/* ═══════════════════════════════════════════════════════════════
   PT Intec Multi Solution — landing page
   Palet & token diambil dari tema ims-enterprise yang berjalan
   sekarang (navy ink + oranye + paper + cream + Manrope).
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* --- token asli IMS (tidak diubah) --- */
  --ims-ink:        oklch(24% .055 252);
  --ims-ink-deep:   oklch(17% .04  252);
  --ims-orange:     oklch(67% .205 43);
  --ims-orange-hover: oklch(61% .19 43);
  --ims-paper:      oklch(98% .006 250);
  --ims-cream:      oklch(92% .025 88);
  --ims-muted:      oklch(53% .025 252);
  --ims-line:       oklch(89% .012 252);

  /* --- turunan baru: diambil dari gradasi biru pada logo --- */
  --ims-abyss:      oklch(12% .035 254);
  --ims-blue:       oklch(52% .17  258);
  --ims-blue-lit:   oklch(66% .16  248);
  --ims-cyan:       oklch(82% .12  210);
  --ims-on-dark:    oklch(96% .01  250);
  --ims-on-dark-mut:oklch(72% .022 250);
  --ims-hairline:   oklch(100% 0 0 / .10);

  --content: 75rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 18px;
  --header-h: 82px;

  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-soft:     cubic-bezier(.22,.61,.36,1);
}

/* ── reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* Halaman ini sengaja berkomitmen pada satu identitas visual (paper terang +
   hero navy), jadi warnanya dikunci dan tidak ikut tema gelap sistem. */
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1.5rem);
  background:var(--ims-paper);
  color-scheme:light;
}

body{
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.6;
  color:var(--ims-ink);
  background:var(--ims-paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--ims-orange);color:#fff}

:focus-visible{
  outline:2px solid var(--ims-orange);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:999;
  padding:.75rem 1.25rem;border-radius:999px;
  background:var(--ims-ink);color:#fff;font-weight:600;
  transition:top .2s;
}
.skip-link:focus{top:1rem}

.shell{
  width:100%;max-width:var(--content);
  margin-inline:auto;padding-inline:var(--gutter);
}

/* ── progress bar ──────────────────────────────────────────── */
.scroll-progress{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:300;
  pointer-events:none;
}
.scroll-progress i{
  display:block;height:100%;width:var(--p,0%);
  background:linear-gradient(90deg,var(--ims-cyan),var(--ims-blue-lit) 45%,var(--ims-orange));
  transition:width .1s linear;
}

/* ═══════════════ HEADER ═══════════════ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:200;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background .45s var(--ease-soft),
             box-shadow .45s var(--ease-soft),
             backdrop-filter .45s;
}
.header__inner{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  width:100%;
}

.brand{display:flex;align-items:center;margin-right:auto}
.brand__logo{position:relative;display:block;height:58px;width:65.8px}
.brand__img{
  position:absolute;inset:0;height:100%;width:auto;
  transition:opacity .4s var(--ease-soft);
  object-fit:contain;
}
.brand__img--dark{opacity:0}

.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem)}
.nav a{
  position:relative;font-size:.9375rem;font-weight:600;
  color:var(--ims-on-dark-mut);
  transition:color .25s;
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--ims-orange);
  transition:right .35s var(--ease-out-expo);
}
.nav a:not(.btn):hover{color:var(--ims-on-dark)}
.nav a:not(.btn):hover::after{right:0}
.nav .nav__cta{display:none}

.header__cta{font-size:.875rem;padding:.65rem 1.15rem}
.menu-toggle{display:none}

/* header setelah discroll → berbalik ke tema terang IMS */
.site-header.is-stuck{
  background:oklch(98% .006 250 / .82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--ims-line), 0 12px 34px -26px oklch(24% .055 252 / .6);
}
.site-header.is-stuck .brand__img--light{opacity:0}
.site-header.is-stuck .brand__img--dark{opacity:1}
.site-header.is-stuck .nav a{color:var(--ims-muted)}
.site-header.is-stuck .nav a:not(.btn):hover{color:var(--ims-ink)}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{
  --btn-bg:var(--ims-orange);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.8rem 1.4rem;border-radius:999px;
  font-weight:700;font-size:.9375rem;letter-spacing:.005em;
  white-space:nowrap;
  transition:transform .35s var(--ease-out-expo),
             background-color .25s, border-color .25s, color .25s,
             box-shadow .35s var(--ease-out-expo);
  will-change:transform;
}
.btn svg{width:1em;height:1em;transition:transform .35s var(--ease-out-expo)}
.btn:hover svg{transform:translateX(3px)}

.btn--primary{
  background:var(--ims-orange);color:#fff;
  box-shadow:0 10px 30px -12px oklch(67% .205 43 / .85);
}
.btn--primary:hover{background:var(--ims-orange-hover)}

.btn--ghost{
  color:var(--ims-on-dark);
  border:1px solid var(--ims-hairline);
  background:oklch(100% 0 0 / .04);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{
  background:oklch(100% 0 0 / .1);
  border-color:oklch(100% 0 0 / .24);
}
.btn--lg{padding:.95rem 1.7rem;font-size:1rem}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;
  min-height:min(100svh,900px);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + clamp(3rem,9vh,6rem)) 0 clamp(5rem,11vh,7rem);
  background:var(--ims-abyss);
  color:var(--ims-on-dark);
  isolation:isolate;
  overflow:hidden;
}

.hero__stage{position:absolute;inset:0;z-index:-1}
#heroCanvas{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity 1.4s var(--ease-soft);
}
#heroCanvas.is-ready{opacity:1}

.hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(oklch(100% 0 0 / .035) 1px,transparent 1px),
    linear-gradient(90deg,oklch(100% 0 0 / .035) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(120% 80% at 50% 40%,#000 25%,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%,#000 25%,transparent 75%);
}
.hero__glow{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 78% 34%, oklch(52% .17 258 / .32), transparent 70%),
    radial-gradient(46% 42% at 18% 72%, oklch(82% .12 210 / .16), transparent 72%),
    radial-gradient(40% 34% at 62% 88%, oklch(67% .205 43 / .13), transparent 72%);
}
.hero__vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--ims-abyss) 0%, oklch(12% .035 254 / .84) 34%, oklch(12% .035 254 / .1) 66%, transparent 100%),
    linear-gradient(180deg, oklch(12% .035 254 / .7) 0%, transparent 26%, transparent 62%, var(--ims-abyss) 100%);
}

.hero__inner{position:relative;z-index:1;max-width:58rem}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.42rem .95rem .42rem .7rem;
  border:1px solid var(--ims-hairline);
  border-radius:999px;
  background:oklch(100% 0 0 / .04);
  backdrop-filter:blur(8px);
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ims-on-dark-mut);
}
.eyebrow__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ims-orange);
  box-shadow:0 0 0 0 oklch(67% .205 43 / .55);
  animation:pulse 2.6s var(--ease-soft) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 oklch(67% .205 43 / .5)}
  70%{box-shadow:0 0 0 9px oklch(67% .205 43 / 0)}
  100%{box-shadow:0 0 0 0 oklch(67% .205 43 / 0)}
}

.hero__title{
  margin-top:clamp(1.4rem,3vh,2rem);
  font-size:clamp(2.35rem,1.5rem + 3.5vw,3.95rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.032em;
  text-wrap:balance;
}
@media (max-width:700px){ .hero__title br{display:none} }
.hero__title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--ims-cyan) 0%,var(--ims-blue-lit) 46%,var(--ims-blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.hero__lead{
  margin-top:1.35rem;max-width:42rem;
  font-size:clamp(1.02rem,.97rem + .35vw,1.2rem);
  color:var(--ims-on-dark-mut);
}

.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.hero__stats{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2.75rem,6vh,4rem);
  padding-top:1.75rem;
  border-top:1px solid var(--ims-hairline);
}
.hero__stats dt{
  font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:oklch(62% .02 250);
}
.hero__stats dd{margin:.35rem 0 0;font-weight:700;font-size:1.0625rem}

/* ticker */
.hero__ticker{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:.85rem 0;
  border-top:1px solid var(--ims-hairline);
  background:oklch(12% .035 254 / .55);
  backdrop-filter:blur(10px);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{
  display:flex;align-items:center;gap:1.75rem;width:max-content;
  animation:ticker 42s linear infinite;
}
.ticker__track span{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:oklch(66% .02 250);white-space:nowrap;
}
.ticker__track i{width:4px;height:4px;border-radius:50%;background:var(--ims-orange);opacity:.65;flex:none}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ═══════════════ SECTIONS ═══════════════ */
.section{position:relative;padding:clamp(5rem,12vh,8.5rem) 0}
.section--cream{background:linear-gradient(180deg,var(--ims-paper),oklch(96% .016 88) 45%,var(--ims-paper))}
.section--dark{
  background:var(--ims-ink-deep);color:var(--ims-on-dark);
  overflow:hidden;isolation:isolate;
}
.section__grid{
  position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(oklch(100% 0 0 / .04) 1px,transparent 1px),
    linear-gradient(90deg,oklch(100% 0 0 / .04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 78%);
}

.section__head{max-width:46rem;margin-bottom:clamp(2.75rem,6vh,4.25rem)}
.section__head--split{
  display:grid;gap:1.5rem clamp(2rem,6vw,5rem);
  max-width:none;align-items:end;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
}

.kicker{
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ims-orange);
  display:flex;align-items:center;gap:.6rem;
}
.kicker::before{
  content:"";width:26px;height:1px;background:currentColor;opacity:.55;
}

.section__title{
  margin-top:1rem;
  font-size:clamp(1.85rem,1.3rem + 2.2vw,3rem);
  font-weight:800;line-height:1.1;letter-spacing:-.025em;
  text-wrap:balance;
}
.section__lead{
  margin-top:1.1rem;
  color:var(--ims-muted);
  font-size:clamp(1rem,.97rem + .25vw,1.125rem);
}
.section--dark .section__lead{color:var(--ims-on-dark-mut)}

/* ── cards ─────────────────────────────────────────────────── */
.cards{
  display:grid;gap:clamp(1rem,1.6vw,1.35rem);
  /* 19rem -> 3 kolom di lebar konten 75rem, jadi 6 layanan jatuh rapi 3x2 */
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
}
.card{
  position:relative;overflow:hidden;
  padding:clamp(1.6rem,2.4vw,2.1rem);
  border:1px solid var(--ims-line);
  border-radius:var(--radius);
  background:#fff;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-out-expo),
             border-color .35s, box-shadow .5s var(--ease-out-expo);
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(22rem 22rem at var(--mx,50%) var(--my,0%),
             oklch(52% .17 258 / .1), transparent 62%);
  transition:opacity .4s;
  pointer-events:none;
}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--ims-cyan),var(--ims-blue) 55%,var(--ims-orange));
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out-expo);
}
.card:hover{
  border-color:oklch(80% .04 252);
  box-shadow:0 26px 60px -34px oklch(24% .055 252 / .55);
}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}

.card__no{
  position:absolute;top:1.15rem;right:1.4rem;
  font-size:.75rem;font-weight:800;letter-spacing:.1em;
  color:oklch(78% .02 252);
}
.card__icon{
  width:46px;height:46px;display:grid;place-items:center;
  border-radius:13px;
  background:linear-gradient(150deg,oklch(52% .17 258 / .11),oklch(82% .12 210 / .13));
  border:1px solid oklch(52% .17 258 / .16);
  color:var(--ims-blue);
  transition:transform .5s var(--ease-out-expo);
}
.card:hover .card__icon{transform:translateY(-3px) rotate(-4deg)}
.card__icon svg{
  width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.card h3{
  margin-top:1.35rem;
  font-size:1.1875rem;font-weight:700;letter-spacing:-.012em;
}
.card p{margin-top:.55rem;color:var(--ims-muted);font-size:.9375rem}

/* ── produk ────────────────────────────────────────────────── */
.products{
  display:grid;gap:clamp(1rem,1.8vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
}
.product{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(1.75rem,2.6vw,2.35rem);
  border:1px solid var(--ims-line);
  border-radius:var(--radius);
  background:#fff;
  transition:transform .5s var(--ease-out-expo),
             border-color .35s, box-shadow .5s var(--ease-out-expo);
}
.product:hover{
  transform:translateY(-4px);
  border-color:oklch(80% .04 252);
  box-shadow:0 26px 60px -34px oklch(24% .055 252 / .5);
}
.product__logo{
  display:flex;align-items:center;
  height:44px;margin-bottom:1.35rem;
}
.product__logo img{
  max-height:100%;width:auto;object-fit:contain;
}
.product__desc{
  color:var(--ims-muted);font-size:.9375rem;
  margin-bottom:1.5rem;
}
.product__link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:700;font-size:.9375rem;
  color:var(--ims-blue);
}
.product__link svg{width:.85em;height:.85em;transition:transform .35s var(--ease-out-expo)}
.product:hover .product__link svg{transform:translate(2px,-2px)}

/* ── klien (placeholder, menunggu logo asli) ───────────────── */
.clients{margin-top:clamp(3rem,7vh,4.5rem)}
.clients__label{
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ims-muted);text-align:center;
  margin-bottom:1.5rem;
}
.clients__grid{
  display:grid;gap:clamp(.75rem,1.4vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
}
.client-slot{
  display:grid;place-items:center;
  min-height:5.25rem;
  border:1px dashed oklch(80% .02 252);
  border-radius:12px;
  background:oklch(100% 0 0 / .45);
}
.client-slot span{
  font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:oklch(68% .02 252);
}

/* ── tentang ───────────────────────────────────────────────── */
.about{
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:start;
}
.about__body .section__title{max-width:22ch}
.about__facts{
  display:grid;gap:0;
  border-top:1px solid var(--ims-line);
}
.about__facts > div{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--ims-line);
}
.about__facts dt{
  font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ims-muted);padding-top:.2rem;
}
.about__facts dd{margin:0;font-weight:700;font-size:.9375rem;text-align:right}

/* ── flow ──────────────────────────────────────────────────── */
.flow{
  position:relative;
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.flow::before{
  content:"";position:absolute;left:0;top:11px;height:2px;
  width:var(--track,100%);
  background:var(--ims-line);
}
.flow::after{
  content:"";position:absolute;left:0;top:11px;height:2px;
  width:var(--flow,0%);
  background:linear-gradient(90deg,var(--ims-cyan),var(--ims-blue) 55%,var(--ims-orange));
  transition:width 1.6s var(--ease-out-expo);
}
.flow__step{position:relative;padding-top:2.4rem}
.flow__dot{
  position:absolute;top:4px;left:0;
  width:16px;height:16px;border-radius:50%;
  background:var(--ims-paper);
  border:2px solid var(--ims-line);
  transition:border-color .5s var(--ease-out-expo),
             box-shadow .5s var(--ease-out-expo),
             background-color .5s;
}
.flow.is-on .flow__step:nth-child(1) .flow__dot{transition-delay:.05s}
.flow.is-on .flow__step:nth-child(2) .flow__dot{transition-delay:.35s}
.flow.is-on .flow__step:nth-child(3) .flow__dot{transition-delay:.65s}
.flow.is-on .flow__step:nth-child(4) .flow__dot{transition-delay:.95s}
.flow.is-on .flow__dot{
  border-color:var(--ims-blue);
  background:#fff;
  box-shadow:0 0 0 5px oklch(52% .17 258 / .12);
}
.flow.is-on .flow__step:last-child .flow__dot{
  border-color:var(--ims-orange);
  box-shadow:0 0 0 5px oklch(67% .205 43 / .14);
}
.flow__label{font-weight:700;font-size:1.0625rem;letter-spacing:-.01em}

/* ── phases ────────────────────────────────────────────────── */
.phases{
  display:grid;gap:clamp(1rem,1.6vw,1.35rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.phase{
  position:relative;
  padding:clamp(1.5rem,2.2vw,2rem) clamp(1.4rem,2vw,1.75rem);
  border:1px solid var(--ims-hairline);
  border-radius:var(--radius);
  background:linear-gradient(165deg,oklch(100% 0 0 / .055),oklch(100% 0 0 / .015));
  transition:border-color .4s,background .4s,transform .5s var(--ease-out-expo);
}
.phase:hover{
  transform:translateY(-4px);
  border-color:oklch(100% 0 0 / .22);
  background:linear-gradient(165deg,oklch(100% 0 0 / .09),oklch(100% 0 0 / .02));
}
.phase__no{
  display:inline-block;
  font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(120deg,var(--ims-cyan),var(--ims-blue-lit));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.phase:last-child .phase__no{
  background:linear-gradient(120deg,oklch(78% .16 55),var(--ims-orange));
  -webkit-background-clip:text;background-clip:text;
}
.phase h3{margin-top:1rem;font-size:1.125rem;font-weight:700}
.phase p{margin-top:.5rem;color:var(--ims-on-dark-mut);font-size:.9375rem}

/* ── pillars ───────────────────────────────────────────────── */
.pillars{
  display:grid;gap:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--ims-line);
}
.pillar{
  padding:clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2rem);
  border-bottom:1px solid var(--ims-line);
  border-right:1px solid var(--ims-line);
  transition:background .4s;
}
.pillar:nth-child(4n){border-right:0}
.pillar:hover{background:oklch(96% .012 250)}
.pillar h3{
  display:flex;align-items:baseline;gap:.6rem;
  font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;
}
.pillar h3 span{color:var(--ims-orange);font-size:.7em}
.pillar p{margin-top:.6rem;color:var(--ims-muted);font-size:.9375rem}

/* ═══════════════ CTA ═══════════════ */
.cta{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(5rem,12vh,8rem) 0;
  background:var(--ims-ink-deep);color:var(--ims-on-dark);
  text-align:center;
}
.cta__aura{
  position:absolute;inset:-30% -10% auto -10%;height:130%;z-index:-1;
  background:
    radial-gradient(50% 46% at 50% 12%, oklch(52% .17 258 / .38), transparent 70%),
    radial-gradient(38% 34% at 16% 70%, oklch(82% .12 210 / .14), transparent 72%),
    radial-gradient(38% 34% at 86% 68%, oklch(67% .205 43 / .16), transparent 72%);
  animation:drift 22s var(--ease-soft) infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-1.5%,0,0) scale(1)}
  to{transform:translate3d(1.5%,-2%,0) scale(1.07)}
}
.cta__inner{position:relative;display:flex;flex-direction:column;align-items:center}
.cta .kicker{justify-content:center}
.cta__title{
  margin-top:1rem;max-width:20ch;
  font-size:clamp(2rem,1.35rem + 2.6vw,3.25rem);
  font-weight:800;line-height:1.06;letter-spacing:-.03em;
  text-wrap:balance;
}
.cta__lead{
  margin-top:1.15rem;max-width:38rem;
  color:var(--ims-on-dark-mut);
  font-size:clamp(1rem,.97rem + .25vw,1.125rem);
}
.cta .hero__actions{justify-content:center}

.contact{
  display:grid;gap:1.5rem clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  width:100%;margin-top:clamp(3rem,7vh,4.5rem);
  padding-top:2rem;
  border-top:1px solid var(--ims-hairline);
  text-align:left;
}
.contact span{
  display:block;
  font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:oklch(62% .02 250);
}
.contact p{margin-top:.5rem;font-size:.9375rem;color:var(--ims-on-dark);line-height:1.55}
.contact a{
  border-bottom:1px solid oklch(100% 0 0 / .22);
  padding-bottom:1px;transition:border-color .25s,color .25s;
}
.contact a:hover{color:var(--ims-orange);border-color:var(--ims-orange)}

/* ═══════════════ FOOTER ═══════════════ */
.site-footer{background:var(--ims-abyss);color:var(--ims-on-dark-mut);font-size:.9rem}
.footer__inner{
  display:grid;gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  padding-block:clamp(3rem,7vh,4.5rem);
}
.footer__brand img{height:76px;width:auto}
.footer__brand p{margin-top:1.1rem;max-width:26rem}
.footer__nav{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.footer__nav h4{
  font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ims-on-dark);margin-bottom:.9rem;
}
.footer__nav a{display:block;padding:.28rem 0;transition:color .25s}
.footer__nav a:hover{color:var(--ims-orange)}
.footer__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;
  padding-block:1.5rem;
  border-top:1px solid var(--ims-hairline);
  font-size:.8125rem;
}

/* ═══════════════ REVEAL ═══════════════ */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-soft), transform .9s var(--ease-out-expo);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-in{opacity:1;transform:none}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1000px){
  .section__head--split{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillar:nth-child(2n){border-right:0}
}

@media (max-width:860px){
  :root{--header-h:64px}
  .header__cta{display:none}
  .nav .nav__cta{display:inline-flex}
  .brand__logo{height:44px;width:49.9px}

  .menu-toggle{
    display:grid;place-content:center;gap:5px;
    width:42px;height:42px;border-radius:12px;
    border:1px solid var(--ims-hairline);
    background:oklch(100% 0 0 / .05);
  }
  .menu-toggle span{
    display:block;width:18px;height:2px;border-radius:2px;
    background:var(--ims-on-dark);
    transition:transform .4s var(--ease-out-expo),opacity .25s;
  }
  .site-header.is-stuck .menu-toggle{border-color:var(--ims-line);background:#fff}
  .site-header.is-stuck .menu-toggle span{background:var(--ims-ink)}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:1rem var(--gutter) 1.75rem;
    background:oklch(12% .035 254 / .96);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--ims-hairline);
    clip-path:inset(0 0 100% 0);
    opacity:0;pointer-events:none;
    transition:clip-path .5s var(--ease-out-expo),opacity .3s;
  }
  .nav.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .nav a:not(.btn){
    padding:.85rem 0;font-size:1.05rem;
    color:var(--ims-on-dark);
    border-bottom:1px solid var(--ims-hairline);
  }
  .nav a:not(.btn)::after{display:none}
  .nav__cta{margin-top:1.25rem;align-self:flex-start}
  .site-header.is-stuck .nav a:not(.btn){color:var(--ims-on-dark)}

  .flow::before,.flow::after{display:none}
  .flow{gap:0}
  .flow__step{
    padding:1.1rem 0 1.1rem 2.2rem;
    border-bottom:1px solid var(--ims-line);
  }
  .flow__dot{top:1.35rem}
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:0}
}

@media (max-width:560px){
  .hero{min-height:auto;padding-bottom:clamp(6rem,14vh,8rem)}
  .hero__actions .btn{flex:1 1 100%}
  .hero__stats{gap:1.25rem 2rem}
  .contact{text-align:left}
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  #heroCanvas{opacity:1}
}