/* ============================================================
   autoclient.io — site styles (loads on top of colors_and_type.css)
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--auto-black);
  color:var(--fg-on-dark-1);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%}
::selection{background:rgba(135,132,253,.32);color:#fff}

/* ============================================================
   PENROSE — impossible-triangle hero mark
   ============================================================ */
.pz-stage{position:relative;display:flex;align-items:center;justify-content:center;margin:0 auto;perspective:1200px}
.pz-glow{position:absolute;inset:-16% -16% -10% -16%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(135,132,253,.55),rgba(255,153,204,.30) 44%,rgba(255,102,102,.13) 64%,transparent 78%);
  filter:blur(16px);z-index:0;animation:pz-pulse 6s var(--ease-in-out) infinite}
.pz-tri{position:absolute;width:360px;height:360px;left:50%;top:50%;
  transform-style:preserve-3d;z-index:1;
  transform:translate(-50%,-50%) scale(var(--pz-scale,.92)) rotateX(9deg) rotateZ(-3deg);
  filter:drop-shadow(0 20px 36px rgba(135,132,253,.34)) drop-shadow(0 8px 16px rgba(255,102,102,.18));
  animation:pz-float 7s var(--ease-in-out) infinite}
.pz-spoke{position:absolute;inset:0;transform-origin:50% 50%}
.pz-face{position:absolute;inset:0}
@keyframes pz-float{
  0%,100%{transform:translate(-50%,-50%) scale(var(--pz-scale,.92)) rotateX(9deg) rotateZ(-3deg) translateY(0)}
  50%{transform:translate(-50%,-50%) scale(var(--pz-scale,.92)) rotateX(9deg) rotateZ(-3deg) translateY(-16px)}
}
@keyframes pz-pulse{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){
  .pz-tri,.pz-glow{animation:none}
}

/* ============================================================
   HERO 3D STAGE — immersive environment behind the mark
   ============================================================ */
.hero-3d{position:relative;overflow:hidden;isolation:isolate;min-height:100vh;display:flex;align-items:center;padding:120px 0 84px}
.hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-scene-spline{pointer-events:auto}
.hero-scene-spline spline-viewer{--logo-display:none}
.hero-layer{position:absolute;inset:0;will-change:transform}

/* perspective grid floor */
.hero-grid{position:absolute;left:50%;bottom:-10%;width:240%;height:64%;
  transform:translateX(-50%) perspective(720px) rotateX(77deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(135,132,253,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(135,132,253,.17) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 58% 100% at 50% 100%,#000 8%,transparent 70%);
  mask-image:radial-gradient(ellipse 58% 100% at 50% 100%,#000 8%,transparent 70%);
  opacity:.6;animation:grid-pan 17s linear infinite}
@keyframes grid-pan{from{background-position:0 0,0 0}to{background-position:0 72px,0 72px}}

/* big soft halo — sits behind the logo centrepiece */
.hero-back-glow{position:absolute;left:50%;top:47%;width:680px;height:680px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(135,132,253,.30),rgba(255,153,204,.13) 48%,rgba(255,102,102,.05) 66%,transparent 76%);
  filter:blur(22px);animation:pz-pulse 9s var(--ease-in-out) infinite}

/* the mark, centred in the scene as the background centrepiece. */
.hero-tri-center{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);opacity:.82}

/* ---- real logo, extruded into a 3D solid ---- */
.logo3d{position:relative;perspective:1500px;aspect-ratio:760/666}
/* static glow behind the mark — lives on the NON-rotating container so it
   never re-rasterizes as the stack turns (the old drop-shadow filter did,
   which is what made the hero stutter). */
.logo3d::before{content:"";position:absolute;left:50%;top:54%;width:78%;height:78%;
  transform:translate(-50%,-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(135,132,253,.5),rgba(255,102,102,.22) 55%,transparent 75%);
  filter:blur(26px)}
/* mouse tilt — large range for strong mobility */
.logo3d-tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
  transform:rotateY(calc(var(--px,0) * 55deg)) rotateX(calc(var(--py,0) * -42deg));
  transition:transform .16s cubic-bezier(.22,.61,.36,1)}
/* continuous idle sway + float, so it's alive even without the cursor */
.logo3d-spin{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
  animation:logo3d-sway 9s var(--ease-in-out) infinite}
.logo3d-slice{position:absolute;left:50%;top:50%;width:100%;height:auto;
  transform:translate(-50%,-50%);backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;user-select:none}
@keyframes logo3d-sway{
  0%,100%{transform:rotateX(9deg) rotateZ(-3deg) rotateY(-15deg) translateY(0)}
  50%{transform:rotateX(13deg) rotateZ(-3deg) rotateY(15deg) translateY(-16px)}
}

/* legibility scrim — soft centre + bottom, so copy reads over the bright mark */
.hero-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 56% 44% at 50% 49%, rgba(20,17,18,.7), rgba(20,17,18,.3) 48%, transparent 72%),
    radial-gradient(ellipse 120% 58% at 50% 122%, rgba(20,17,18,.8), transparent 58%);}
/* keep hero copy crisp where it crosses the bright beams */
.hero-3d h1,.hero-3d p{text-shadow:0 2px 22px rgba(20,17,18,.55)}

/* Spline background: stronger scrim + KPI legibility */
.hero-spline-on .hero-vignette{
  background:
    radial-gradient(ellipse 62% 50% at 50% 49%, rgba(20,17,18,.82), rgba(20,17,18,.45) 48%, transparent 74%),
    radial-gradient(ellipse 130% 64% at 50% 118%, rgba(20,17,18,.92), rgba(20,17,18,.4) 46%, transparent 62%);
}
.hero-spline-on .hero-kpis{
  background:rgba(28,24,25,.44);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(249,248,246,.1);
  border-radius:var(--radius-lg);
  padding:26px 44px;
}
.hero-spline-on .hero-kpis .overline{color:var(--fg-on-dark-2)}

/* depth particles */
.hero-dot{position:absolute;border-radius:50%;will-change:transform;animation:dot-float var(--dd,9s) var(--ease-in-out) infinite;animation-delay:var(--dl,0s)}
@keyframes dot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}

/* parallax-driven mark wrapper */
.hero-mark-par{will-change:transform;
  transform:translate3d(calc(var(--px,0) * 30px), calc(var(--py,0) * 30px), 0) rotate(calc(var(--px,0) * 1.1deg))}

@media(prefers-reduced-motion:reduce){
  .hero-grid,.hero-dot,.hero-back-glow,.aura-drift1,.aura-drift2,.marquee-track{animation:none}
  .logo3d-spin{animation:none;transform:rotateX(9deg) rotateZ(-3deg)}
  /* mouse-tilt stays — it's user-driven, not autonomous motion */
}
@media(max-width:760px){
  .hero-3d{min-height:auto;padding:104px 0 60px}
  .hero-grid{height:46%}
}

/* accent override hook (Tweaks) */
:root{ --accent: var(--auto-purple); }

.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.wrap-wide{max-width:1340px;margin:0 auto;padding:0 40px}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 40px}

/* ---- ambient gradient aura ---- */
.aura{position:absolute;border-radius:50%;filter:blur(95px);opacity:.5;pointer-events:none;z-index:0}

/* drifting animated aura for heroes */
@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,-24px) scale(1.12)}100%{transform:translate(0,0) scale(1)}}
.aura-drift1{animation:drift1 18s ease-in-out infinite}
.aura-drift2{animation:drift2 22s ease-in-out infinite}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;border:0;cursor:pointer;padding:14px 28px;border-radius:var(--radius-sm);transition:transform var(--dur-fast) var(--ease-out),background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),color var(--dur-base);white-space:nowrap;line-height:1}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--auto-gradient);color:#fff;box-shadow:var(--shadow-glow)}
.btn-primary:hover{background:var(--auto-gradient-soft);box-shadow:0 16px 56px rgba(135,132,253,.45)}
.btn-secondary{background:transparent;color:var(--fg-on-dark-1);box-shadow:inset 0 0 0 1px var(--line-strong-dark)}
.btn-secondary:hover{box-shadow:inset 0 0 0 1px rgba(249,248,246,.5)}
.btn-ghost{background:transparent;color:var(--fg-on-dark-2);padding-left:8px;padding-right:8px}
.btn-ghost:hover{color:var(--fg-on-dark-1)}
.btn-sm{padding:10px 18px;font-size:13.5px}
.btn-lg{padding:17px 34px;font-size:16px}
/* on-light variants */
.btn-dark{background:var(--auto-black);color:var(--auto-off-white);box-shadow:none}
.btn-dark:hover{background:#000}
.btn-outline-dark{background:transparent;color:var(--fg-on-light-1);box-shadow:inset 0 0 0 1px var(--line-on-light)}
.btn-outline-dark:hover{box-shadow:inset 0 0 0 1px rgba(35,31,32,.4)}

/* ---- overline ---- */
.overline{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-on-dark-3)}
.overline-grad{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;background:var(--auto-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.overline-dark{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-on-light-3)}

.gt{background:var(--auto-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- pills ---- */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:7px 15px;border-radius:var(--radius-pill)}
.pill-soft{background:rgba(135,132,253,.14);color:var(--auto-violet)}
.pill-outline{box-shadow:inset 0 0 0 1px var(--line-on-dark);color:var(--fg-on-dark-2)}

/* ---- card ---- */
.card{background:var(--bg-elevated);border:1px solid var(--line-on-dark);border-radius:var(--radius-lg);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base)}

/* gradient-border featured card */
.card-grad{position:relative;border-radius:var(--radius-lg);background:var(--bg-elevated)}
.card-grad::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--auto-gradient);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

[data-lucide]{display:inline-flex}
svg.lucide{stroke-width:1.75}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

.fade-up{animation:fadeUp .8s var(--ease-out);animation-fill-mode:both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* never leave hero/entrance content stuck invisible when motion is reduced */
@media (prefers-reduced-motion: reduce){
  .fade-up{animation:none;opacity:1;transform:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* gradient-filled icon tile (home service cards) */
.icon-grad{background:var(--auto-gradient)!important;color:#fff!important;box-shadow:0 8px 22px rgba(135,132,253,.32)}

/* section helpers */
.sec{position:relative;padding:96px 0}
.sec-sm{position:relative;padding:64px 0}
.on-light{background:var(--auto-off-white);color:var(--fg-on-light-1)}

/* marquee for trust bar */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee-mask{-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* link with animated arrow */
.arrow-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--fg-on-dark-1);transition:gap var(--dur-base) var(--ease-out)}
.arrow-link:hover{gap:12px}
.arrow-link .lucide{transition:transform var(--dur-base) var(--ease-out)}

/* faq */
.faq-item{border-top:1px solid var(--line-on-dark)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;background:none;border:0;cursor:pointer;text-align:left;color:inherit;padding:26px 0;font-size:19px;font-weight:400;letter-spacing:-.01em}
.faq-a{overflow:hidden;transition:max-height var(--dur-slow) var(--ease-out),opacity var(--dur-base);max-height:0;opacity:0}
.faq-a.open{opacity:1}
.faq-a-inner{padding:0 0 26px;max-width:760px;font-size:15.5px;line-height:1.7;color:var(--fg-on-dark-2)}

/* inputs */
.field{width:100%;font-family:inherit;font-size:15px;color:var(--fg-on-dark-1);background:var(--auto-black);border:1px solid var(--line-on-dark);border-radius:var(--radius-sm);padding:15px 16px;outline:none;transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.field::placeholder{color:var(--fg-on-dark-3)}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(135,132,253,.22)}
select.field{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F9F8F6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.label{display:block;font-size:13px;font-weight:600;color:var(--fg-on-dark-2);margin-bottom:9px;letter-spacing:.01em}

/* dotted divider with symbol */
.eyebrow-row{display:flex;align-items:center;gap:14px}
.eyebrow-row::after{content:"";flex:1;height:1px;background:var(--line-on-dark)}

/* hide scrollbar utility */
.no-bar::-webkit-scrollbar{display:none}
.no-bar{scrollbar-width:none}

/* pricing comparison table */
.compare-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:center}
.compare-row>div{padding:18px 20px;text-align:center;display:flex;align-items:center;justify-content:center;min-height:58px}
.compare-row>div:first-child{justify-content:flex-start}
.compare-head>div{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-on-dark-3)}
.compare-head{padding:6px 0}
@media(max-width:760px){
  .compare-row>div{padding:13px 10px;font-size:13px}
  .compare-row{grid-template-columns:1.4fr .9fr .9fr .9fr}
}

/* ---- responsive ---- */
@media(max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:900px){
  .wrap,.wrap-wide,.wrap-narrow{padding:0 22px}
  .sec{padding:64px 0}
  .grid-3,.grid-2{grid-template-columns:1fr!important}
  .faq-grid{grid-template-columns:1fr!important;gap:32px!important}
  .contact-grid{grid-template-columns:1fr!important;gap:36px!important}
  .nav-desktop,.nav-cta{display:none!important}
  .nav-burger{display:inline-flex!important}
  .nav-mobile{display:block!important}
}
@media(max-width:680px){
  .grid-4{grid-template-columns:1fr!important}
  .award-row{grid-template-columns:auto 1fr!important;gap:18px!important}
  .award-row>:last-child{display:none}
}
/* ValueProps + IndustrySelector + DiffBand + contact + faq stack on small */
@media(max-width:820px){
  .sec [style*="grid-template-columns: 1fr 1fr"],
  .sec [style*="grid-template-columns: 1.2fr 1fr"],
  .sec [style*="grid-template-columns: 0.8fr 1.2fr"],
  .sec [style*="grid-template-columns: 1fr 1.1fr"]{grid-template-columns:1fr!important;gap:32px!important}
}
@media(max-width:820px){
  .on-team-grid{grid-template-columns:1fr!important;gap:20px!important}
  .case-row{grid-template-columns:1fr!important;gap:28px!important}
  .case-row>*{order:0!important}
}
@media(max-width:900px){
  .team-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:560px){
  .disc-grid{grid-template-columns:1fr!important}
  .team-grid{grid-template-columns:1fr!important}
  .contact-form-row{grid-template-columns:1fr!important}
}