/* ============================================================
   AIK AUTO TECH - Design tokens, reset, typography
   "Chrome Showroom" - dark canvas, navy/silver from the logo
   ============================================================ */

:root{
  /* --- Surface ladder (near-black -> lifted panel) --- */
  --ink-950:#04060A;
  --ink-900:#070A11;
  --ink-850:#0A0E17;
  --ink-800:#0D121C;
  --ink-700:#121826;
  --ink-600:#182031;
  --ink-500:#1F293D;

  /* --- Navy from the AIK mark --- */
  --navy-900:#08121F;
  --navy-800:#0C1B30;
  --navy-700:#12294A;
  --navy-600:#1B3A69;
  --navy-500:#25508F;

  /* --- Steel / chrome --- */
  --steel-500:#5D6B7E;
  --steel-400:#7C8CA1;
  --steel-300:#9DACC0;
  --steel-200:#C2CEDD;
  --steel-100:#E4EBF3;

  /* --- Signal --- */
  --blue:#2F7BFF;
  --blue-bright:#5C9BFF;
  --blue-deep:#1657D6;
  --blue-glow:rgba(47,123,255,.42);
  --blue-veil:rgba(47,123,255,.10);

  /* --- Text --- */
  --tx-hi:#F3F7FC;
  --tx:#C7D2E0;
  --tx-mid:#93A2B6;
  --tx-low:#6B7A8E;

  /* --- Lines & glass --- */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.24);
  --glass:rgba(255,255,255,.028);
  --glass-2:rgba(255,255,255,.05);

  /* --- Gradients --- */
  --chrome:linear-gradient(122deg,#FFFFFF 0%,#DCE5F0 18%,#93A3B8 42%,#5E6E83 55%,#C3D0E0 76%,#FAFCFF 100%);
  --chrome-dim:linear-gradient(122deg,#C9D5E4 0%,#8A9AAF 40%,#4E5C6E 58%,#A9B8CA 100%);
  --navy-wash:linear-gradient(155deg,#12294A 0%,#0A1425 60%,#070A11 100%);
  --blue-sweep:linear-gradient(100deg,transparent 0%,rgba(47,123,255,.55) 45%,rgba(120,175,255,.9) 50%,rgba(47,123,255,.55) 55%,transparent 100%);

  /* --- Type --- */
  --f-display:"Saira",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  /* Fluid scale */
  --t-mega:clamp(3.1rem,10.2vw,9.5rem);
  --t-h1:clamp(2.6rem,6.6vw,6rem);
  --t-h2:clamp(2rem,4.4vw,3.9rem);
  --t-h3:clamp(1.35rem,2.3vw,2.1rem);
  --t-h4:clamp(1.1rem,1.5vw,1.4rem);
  --t-lead:clamp(1.02rem,1.35vw,1.28rem);
  --t-body:clamp(.95rem,1.02vw,1.05rem);
  --t-sm:.875rem;
  --t-xs:.75rem;
  --t-eyebrow:.7rem;

  /* --- Space --- */
  --gut:clamp(1.15rem,4vw,3.25rem);
  --sec:clamp(4.5rem,10vw,9.5rem);
  --sec-sm:clamp(3rem,6vw,5.5rem);
  --maxw:1560px;
  --maxw-txt:70ch;

  /* --- Radii --- */
  --r-xs:4px; --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  /* --- Motion --- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in-out:cubic-bezier(.76,0,.24,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --d-xs:.18s; --d-sm:.32s; --d:.5s; --d-lg:.8s; --d-xl:1.2s;

  /* --- Elevation --- */
  --sh-sm:0 2px 10px rgba(0,0,0,.4);
  --sh:0 18px 44px -12px rgba(0,0,0,.72);
  --sh-lg:0 44px 90px -24px rgba(0,0,0,.85);
  --sh-blue:0 24px 70px -20px rgba(47,123,255,.42);

  --hdr-h:78px;
}

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:var(--steel-500) var(--ink-900);
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--ink-950);
  color:var(--tx);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  min-height:100vh;
}
body.is-locked{overflow:hidden}

img,svg,video,canvas{display:block;max-width:100%;height:auto}
img{background:var(--ink-800)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}
:focus-visible{
  outline:2px solid var(--blue-bright);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
::selection{background:var(--blue);color:#fff}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-900)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--steel-500),var(--navy-600));
  border-radius:99px;border:2px solid var(--ink-900);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--steel-300),var(--navy-500))}

/* ============================================================
   Typography
   ============================================================ */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  color:var(--tx-hi);
  line-height:1.02;
  letter-spacing:-.028em;
  font-weight:700;
  text-wrap:balance;
}
h1{font-size:var(--t-h1);font-weight:800}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.14}
h4{font-size:var(--t-h4);line-height:1.28;letter-spacing:-.012em}
p{text-wrap:pretty}
strong{color:var(--tx-hi);font-weight:600}

.mega{
  font-family:var(--f-display);
  font-size:var(--t-mega);
  font-weight:800;
  line-height:.86;
  letter-spacing:-.045em;
  color:var(--tx-hi);
}
.lead{
  font-size:var(--t-lead);
  color:var(--tx-mid);
  line-height:1.62;
  max-width:var(--maxw-txt);
}
.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--blue-bright);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";width:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue));
}
.eyebrow--plain::before{display:none}

/* Chrome-filled text - the logo's silver gradient */
.chrome-text{
  background:var(--chrome);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:220% 100%;
  animation:chromeDrift 9s ease-in-out infinite alternate;
}
@keyframes chromeDrift{to{background-position:100% 0}}

.blue-text{color:var(--blue-bright)}
.mono{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:1080px}
.section{padding-block:var(--sec);position:relative}
.section--sm{padding-block:var(--sec-sm)}
.section--flush-t{padding-top:0}
.section--flush-b{padding-bottom:0}

.grid{display:grid;gap:clamp(1rem,2vw,2rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.stack>*+*{margin-top:1.15rem}
.flow{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:-100px;left:1rem;z-index:9999;
  background:var(--blue);color:#fff;padding:.7rem 1.2rem;
  border-radius:var(--r-sm);font-weight:600;transition:top var(--d-sm) var(--e-out);
}
.skip:focus{top:1rem}

.s-head{
  display:grid;gap:1.35rem;
  margin-bottom:clamp(2.4rem,5vw,4.5rem);
  max-width:900px;
}
.s-head--split{
  max-width:none;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:end;gap:clamp(1.5rem,4vw,4rem);
}
@media(max-width:900px){.s-head--split{grid-template-columns:1fr}}

.rule{
  height:1px;width:100%;
  background:linear-gradient(90deg,var(--line-2),transparent);
  transform-origin:left;
}

/* Ambient background fields */
.glow{
  position:absolute;border-radius:50%;
  filter:blur(90px);pointer-events:none;z-index:0;
  opacity:.5;
}
.glow--blue{background:radial-gradient(circle,rgba(47,123,255,.4),transparent 68%)}
.glow--navy{background:radial-gradient(circle,rgba(27,58,105,.55),transparent 68%)}

.grid-field{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 15%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 15%,transparent 78%);
}
.noise{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section>.wrap{position:relative;z-index:2}

/* ============================================================
   Scroll reveal - CSS-driven, JS only adds .in
   ============================================================ */
[data-rv]{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:opacity .9s var(--e-out),transform .9s var(--e-out);
  transition-delay:var(--rv-d,0ms);
}
/* Promote only while the element is still waiting to animate -
   keeping hundreds of permanent GPU layers alive costs memory. */
[data-rv]:not(.in){will-change:opacity,transform}
[data-rv="fade"]{transform:none}
[data-rv="left"]{transform:translate3d(-42px,0,0)}
[data-rv="right"]{transform:translate3d(42px,0,0)}
[data-rv="scale"]{transform:scale(.93)}
[data-rv="clip"]{
  opacity:1;transform:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s var(--e-in-out);
  transition-delay:var(--rv-d,0ms);
}
[data-rv].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.no-js [data-rv]{opacity:1;transform:none;clip-path:none}

/* Per-character headline reveal.
   Words are their own clip boxes so lines never break mid-word
   and descenders are not shaved off by the mask. */
.split{display:block}
.split .wd{
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.16em;
  margin-bottom:-.16em;
}
.split .ch{
  display:inline-block;
  transform:translate3d(0,110%,0) rotate(4deg);
  opacity:0;
  transition:transform 1s var(--e-out),opacity .7s linear;
  transition-delay:calc(var(--i,0)*22ms);
}
.split.in .ch{transform:none;opacity:1}
.no-js .split .ch{transform:none;opacity:1}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-rv],.split .ch{opacity:1 !important;transform:none !important;clip-path:none !important}
  .chrome-text{animation:none;background-position:0 0}
}