/* bakaloff.com — dark, kinetic, modern */
:root{
  --bg0:#070A10;
  --bg1:#0A0F18;
  --bg2:#0C1422;
  --txt:#E7EEF9;
  --muted:#A7B4CC;
  --muted2:#7E8AA3;
  --line:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.06);
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --accentA:#7C3AED;
  --accentB:#22D3EE;
  --accentC:#F59E0B;
  --radius:18px;
  --mx: 0px;
  --my: 0px;
  --cx: 50vw;
  --cy: 30vh;
  --lx: 50vw;
  --ly: 30vh;
  --li: 0;
  --sy: 0;
  --grade: 12deg;
  --font-body: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth; scroll-padding-top:84px;}
body{
  margin:0;
  font-family: var(--font-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 900px at 10% -10%, rgba(124,58,237,.18), transparent 55%),
              radial-gradient(1000px 750px at 110% 30%, rgba(34,211,238,.14), transparent 55%),
              radial-gradient(900px 700px at 40% 110%, rgba(245,158,11,.10), transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg0) 55%, #05070b 100%);
  color: var(--txt);
  overflow-x:hidden;
}

/* Spotlight cursor */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: -3;
  background:
    radial-gradient(520px 420px at var(--cx) var(--cy),
      rgba(255,255,255,.10),
      rgba(124,58,237,.09) 18%,
      rgba(34,211,238,.06) 34%,
      transparent 62%),
    radial-gradient(300px 260px at var(--lx) var(--ly),
      rgb(255 255 255 / calc(.10 * var(--li))),
      rgb(34 211 238 / calc(.08 * var(--li))) 22%,
      rgb(124 58 237 / calc(.06 * var(--li))) 44%,
      transparent 70%);
  mix-blend-mode: screen;
  opacity: .85;
  filter: hue-rotate(calc(var(--grade) * 0.6)) blur(0.2px);
  transition: opacity 300ms ease;
}
body.spot-off::before{
  opacity: 0;
}

/* Subtle film overlay (extra "cinematic" layer) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: -2;
  background:
    radial-gradient(1200px 900px at 50% 20%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(900px 700px at 20% 80%, rgba(255,255,255,.02), transparent 55%);
  opacity: .55;
  mix-blend-mode: overlay;
}

/* Background layers */
.bg{
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events:none;
}
.bg canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.85;
  filter: saturate(1.05) contrast(1.05);
}
#fx{
  opacity: .70;
  filter: saturate(1.08) contrast(1.06);
  mix-blend-mode: screen;
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(140vmax 100vmax at 50% 0%, rgba(0,0,0,.25), rgba(0,0,0,.72)),
    radial-gradient(1200px 900px at calc(50% + var(--mx)) calc(30% + var(--my)), rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.45), transparent 22%, transparent 78%, rgba(0,0,0,.6));
  mix-blend-mode: normal;
}

/* Color grading overlay (scroll-synced via --grade) */
.bg .grade{
  position:absolute;
  inset:-2vmax;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(34,211,238,.22), transparent 62%),
    radial-gradient(900px 520px at 80% 65%, rgba(124,58,237,.22), transparent 62%),
    radial-gradient(800px 520px at 55% 110%, rgba(245,158,11,.14), transparent 65%);
  filter: hue-rotate(var(--grade)) saturate(1.18) contrast(1.05);
  opacity: .55;
  mix-blend-mode: screen;
  transition: filter 900ms cubic-bezier(.2,.9,.2,1);
}

/* Micro-motion drift (subtle cinematic rumble) */
@keyframes microDrift {
  0%   { transform: translate3d(-0.6px, 0.4px, 0); }
  35%  { transform: translate3d(0.9px, -0.5px, 0); }
  70%  { transform: translate3d(-0.4px, 0.8px, 0); }
  100% { transform: translate3d(-0.6px, 0.4px, 0); }
}
.bg .grade{
  animation: microDrift 9.5s ease-in-out infinite;
}
.hero::after{
  animation: microDrift 8.5s ease-in-out infinite;
}

/* Utility */
.container{
  width:min(1120px, 92vw);
  margin:0 auto;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius:999px;
  color: var(--muted);
  text-decoration:none;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
}
.dot{
  width:.55rem;
  height:.55rem;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), rgba(255,255,255,.15));
  box-shadow:
    0 0 0 3px rgba(255,255,255,.06),
    0 0 24px rgba(34,211,238,.20);
}

/* Header */
header{
  position: sticky;
  top:0;
  z-index: 10;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,10,16,.78), rgba(7,10,16,.30));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body.scrolled header{
  background: linear-gradient(180deg, rgba(7,10,16,.92), rgba(7,10,16,.55));
  border-bottom-color: rgba(255,255,255,.09);
}
body.scrolled .nav{
  padding: .72rem 0;
}
body.scrolled .brand small{ display:none; }
body.scrolled .mark{ width:40px; height:40px; border-radius: 14px; }

/* Ambient micro-feedback */
@keyframes impactPulse {
  0%{ filter: saturate(1) brightness(1); }
  35%{ filter: saturate(1.08) brightness(1.06); }
  100%{ filter: saturate(1) brightness(1); }
}
body.impact header{
  animation: impactPulse 260ms ease-out;
}

/* Hero intro sequence (first load) */
body.intro header,
body.intro .heroGrid{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
body.intro .hero::after{
  opacity: 0;
}
body.intro-go header{
  transition: opacity 680ms cubic-bezier(.2,.9,.2,1), transform 680ms cubic-bezier(.2,.9,.2,1);
}
body.intro-go .heroGrid{
  transition: opacity 980ms cubic-bezier(.2,.9,.2,1), transform 980ms cubic-bezier(.2,.9,.2,1);
  transition-delay: 80ms;
}
body.intro-go .hero::after{
  transition: opacity 1100ms cubic-bezier(.2,.9,.2,1);
  transition-delay: 140ms;
}
body.intro-go header,
body.intro-go .heroGrid{
  opacity: 1;
  transform: translate3d(0,0,0);
}
body.intro-go .hero::after{ opacity: .9; }
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .9rem 0;
}
.brand{
  display:flex;
  gap:.75rem;
  align-items:center;
  text-decoration:none;
  color: var(--txt);
}
.mark{
  width:42px;
  height:42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(34,211,238,.25), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}
.mark span{
  font-weight:900;
  letter-spacing:.04em;
  background: linear-gradient(120deg, var(--accentB), var(--accentC));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.brand strong{font-weight:800}
.brand small{
  display:block;
  color: var(--muted2);
  margin-top:.1rem;
}
.navlinks{
  display:flex;
  align-items:center;
  gap:.8rem;
  position: relative;
}
.navlinks a{
  text-decoration:none;
  color: var(--muted);
  padding:.55rem .75rem;
  border-radius: 12px;
  border: 1px solid transparent;
  transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.navlinks a[aria-current="true"]{
  color: var(--txt);
}
.navIndicator{
  position:absolute;
  left:0;
  bottom: -6px;
  height: 3px;
  width: 0px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(34,211,238,.10),
      rgba(34,211,238,.75),
      rgba(124,58,237,.75),
      rgba(245,158,11,.55));
  box-shadow:
    0 0 18px rgba(34,211,238,.28),
    0 0 36px rgba(124,58,237,.18);
  transform: translateX(0px);
  transition: transform 520ms cubic-bezier(.2,.9,.2,1), width 520ms cubic-bezier(.2,.9,.2,1), opacity 300ms ease;
  opacity: .95;
  pointer-events:none;
}

/* Modal (case studies) */
.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
}
.modal[hidden]{ display:none; }
.modalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px) saturate(1.05);
}
.modalPanel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:min(860px, 92vw);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 400px at 10% 0%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(700px 400px at 90% 60%, rgba(124,58,237,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,15,24,.92), rgba(7,10,16,.86));
  box-shadow: 0 40px 140px rgba(0,0,0,.72);
  padding: 22px 22px 18px;
  overflow:hidden;
}
.sheetHandle{
  display:none;
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 44px;
  height: 18px;
  z-index: 2;
  cursor: grab;
}
.sheetHandle span{
  display:block;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.modalClose{
  position:absolute;
  right: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  cursor:pointer;
}
.modalKicker{ opacity:.75; letter-spacing:.06em; text-transform: uppercase; font-size:.78rem; }
.modalTitle{ margin:.35rem 0 .4rem; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.modalDesc{ margin:0 0 1rem; color: var(--muted); max-width: 70ch; }
.casePoints{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 12px;
}
.casePoint{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  border-radius: 14px;
  padding: 10px 12px;
}
.casePoint b{
  display:block;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .78;
  margin-bottom: 4px;
}
.casePoint p{
  margin:0;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
}
.casePoint .hint{
  margin-top: 6px;
  color: var(--muted2);
  font-size: .9rem;
}
.caseHint{
  margin: 0;
  color: var(--muted2);
  font-size: .92rem;
  opacity: .9;
  padding-left: 2px;
}
.modalTags{ display:flex; flex-wrap:wrap; gap:.5rem; margin: 0 0 1rem; }
.modalTags .tag{
  display:inline-flex;
  gap:.45rem;
  align-items:center;
  padding:.35rem .55rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--txt);
  font-size: .82rem;
}
.modalActions{ display:flex; gap:.65rem; flex-wrap:wrap; }

body.modal-open{ overflow:hidden; }

@media (max-width: 620px){
  /* Bottom-sheet on mobile */
  .sheetHandle{ display:block; }
  .modalPanel{
    left: 50%;
    top: auto;
    bottom: 10px;
    --sheetY: 0px;
    transform: translate(-50%, 0) translateY(var(--sheetY));
    width: min(920px, calc(100vw - 20px));
    max-height: calc(100vh - 90px);
    overflow: auto;
    padding: 32px 14px 16px;
    border-radius: 22px;
    will-change: transform;
    touch-action: pan-y;
  }
  .modalPanel.dragging{ transition: none !important; }
  .modalPanel.expanded{
    left: 50%;
    bottom: 0;
    width: 100vw;
    max-height: calc(100vh - 12px);
    border-radius: 22px 22px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .modalClose{ top: 10px; right: 10px; }
  .modalDesc{ max-width: unset; }
}

/* Chapter markers */
.chapters{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction:column;
  gap: 10px;
  z-index: 12;
  padding: 10px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.chaptersProgress{
  position: relative;
  width: 4px;
  height: 64px;
  margin: 2px auto 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.chaptersProgress i{
  position:absolute;
  inset:0;
  transform-origin: top;
  transform: scaleY(var(--sy));
  background: linear-gradient(180deg, rgba(34,211,238,.8), rgba(124,58,237,.55), rgba(245,158,11,.45));
  border-radius: 999px;
}
.chaptersLinks{ display:flex; flex-direction:column; gap: 10px; }
.chapter{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--muted);
  padding: 4px 6px;
  border-radius: 999px;
  transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0);
}
.chapter .cDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 0 rgba(34,211,238,.0);
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.chapter .cLabel{
  font-size: .78rem;
  opacity: .0;
  max-width: 0;
  overflow:hidden;
  white-space:nowrap;
  transition: opacity 220ms ease, max-width 220ms ease;
}
.chapters:hover .chapter .cLabel{
  opacity: .82;
  max-width: 180px;
}
.chapter[aria-current]{
  color: var(--txt);
}
.chapter[aria-current] .cDot{
  background: rgba(34,211,238,.22);
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 0 0 6px rgba(34,211,238,.09);
  transform: scale(1.08);
}
.backTop{
  margin-top: 8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  cursor:pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.backTop.show{
  opacity: .95;
  transform: translateY(0);
}

@media (max-width: 920px){
  .chapters{ display:none; }
}
.navlinks a:hover{
  color: var(--txt);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  transform: translate3d(var(--magx, 0px), calc(var(--magy, 0px) - 1px), 0);
}
.cta{
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  padding:.6rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120px 60px at 20% 0%, rgba(34,211,238,.22), transparent 70%),
    radial-gradient(120px 60px at 90% 80%, rgba(245,158,11,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  color: var(--txt);
  text-decoration:none;
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0);
  transition: transform 180ms ease, filter 180ms ease;
}
.cta:hover{ transform: translate3d(var(--magx, 0px), calc(var(--magy, 0px) - 1px), 0); filter: brightness(1.06); }

/* Hero */
.hero{
  padding: clamp(44px, 6vw, 84px) 0 44px;
  position: relative;
}
.hero::after{
  content:"";
  position:absolute;
  inset:-40px -10vw -10px;
  background:
    radial-gradient(700px 420px at calc(60% + var(--mx)) calc(40% + var(--my)), rgba(34,211,238,.12), transparent 60%),
    radial-gradient(760px 460px at calc(30% - var(--mx)) calc(20% - var(--my)), rgba(124,58,237,.12), transparent 62%);
  filter: blur(10px);
  opacity: .9;
  pointer-events:none;
  z-index:-1;
  transform: translateY(calc(var(--sy) * -18px));
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(18px, 3vw, 30px);
  align-items: start;
}
.kicker{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 20px;
}
.headline{
  margin: 18px 0 10px;
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.035em;
  font-size: clamp(42px, 5.3vw, 78px);
}
.headline .grad{
  background: conic-gradient(from 180deg at 50% 50%,
    rgba(34,211,238,.95),
    rgba(124,58,237,.92),
    rgba(245,158,11,.92),
    rgba(34,211,238,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow:
    0 0 28px rgba(34,211,238,.15),
    0 0 60px rgba(124,58,237,.10);
}
.subhead{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1.05rem;
  max-width: 58ch;
}
.heroActions{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  margin-top: 20px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.8rem 1rem;
  border-radius: 16px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--txt);
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.btn:hover{ transform: translate3d(var(--magx, 0px), calc(var(--magy, 0px) - 1px), 0); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.btn.primary{
  background:
    radial-gradient(120px 80px at 25% 0%, rgba(34,211,238,.22), transparent 70%),
    radial-gradient(120px 80px at 95% 90%, rgba(124,58,237,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
}

/* Kinetic card */
.card{
  position: relative;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: 18px;
  transform-style: preserve-3d;
  will-change: transform;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 260px at calc(50% + var(--mx)) calc(10% + var(--my)), rgba(34,211,238,.22), transparent 60%),
    radial-gradient(420px 260px at calc(40% - var(--mx)) calc(90% - var(--my)), rgba(124,58,237,.18), transparent 60%),
    radial-gradient(320px 260px at 90% 20%, rgba(245,158,11,.12), transparent 60%);
  filter: blur(10px);
  opacity: .9;
  transform: translateZ(-1px);
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255,255,255,.14), transparent 30%),
    linear-gradient(300deg, rgba(255,255,255,.10), transparent 30%);
  opacity:.22;
  pointer-events:none;
}
.cardInner{
  position:relative;
  z-index:1;
  display:grid;
  gap: 12px;
}
.cardTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.cardTitleText{
  display:grid;
  gap: 2px;
  min-width: 0;
}
.cardTitle h3{
  margin:0;
  font-size: 1.05rem;
  letter-spacing:.01em;
}
.cardKicker{
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}
.cardProof{
  white-space: nowrap;
  opacity: .9;
}
.mono{
  font-family: var(--font-mono);
  color: rgba(255,255,255,.72);
  font-size:.92rem;
}
.chipRow{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.chip{
  padding:.4rem .6rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.78);
  font-size:.85rem;
}
.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  margin: 6px 0;
}
.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stat{
  padding: 10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.stat b{
  display:block;
  font-size: 1.05rem;
}
.stat span{
  color: var(--muted2);
  font-size:.86rem;
}

/* Sections */
section{
  padding: 26px 0;
  position: relative;
}
section::before{
  content:"";
  position:absolute;
  left: -10vw;
  right: -10vw;
  top: -20px;
  bottom: -20px;
  pointer-events:none;
  opacity: 0;
  transform: translateY(10px);
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(124,58,237,.12), transparent 60%),
    radial-gradient(900px 520px at 85% 70%, rgba(34,211,238,.10), transparent 62%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.02), transparent);
  filter: blur(10px);
  transition: opacity 800ms cubic-bezier(.2,.9,.2,1), transform 800ms cubic-bezier(.2,.9,.2,1);
  z-index: -1;
}
section.active::before{
  opacity: 1;
  transform: translateY(0);
}

/* View Transitions (in-page navigation) */
@supports (view-transition-name: none) {
  html{ view-transition-name: root; }
  ::view-transition-old(root){
    animation: vt-out 420ms cubic-bezier(.2,.9,.2,1) both;
  }
  ::view-transition-new(root){
    animation: vt-in 520ms cubic-bezier(.2,.9,.2,1) both;
  }
  @keyframes vt-out{
    from{ opacity:1; filter: blur(0px) saturate(1); transform: translateY(0); }
    to{ opacity:0; filter: blur(10px) saturate(1.05); transform: translateY(-6px); }
  }
  @keyframes vt-in{
    from{ opacity:0; filter: blur(12px) saturate(1.10); transform: translateY(10px); }
    to{ opacity:1; filter: blur(0px) saturate(1); transform: translateY(0); }
  }
}
.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  margin: 10px 0 14px;
}
.sectionHead h2{
  margin:0;
  font-size: clamp(1.15rem, 1.25vw + .95rem, 1.6rem);
  letter-spacing:-0.01em;
}
.sectionHead p{
  margin:0;
  color: var(--muted2);
  max-width: 60ch;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.tile{
  grid-column: span 6;
  padding: 18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 70px rgba(0,0,0,.30);
  position:relative;
  overflow:hidden;
  transform-style: preserve-3d;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  will-change: transform;
  text-decoration: none;
  color: inherit;
  display:block;
  --rx: 0deg;
  --ry: 0deg;
}
.tile:hover{
  transform: perspective(900px) translate3d(0,-2px,0) rotateX(var(--rx)) rotateY(var(--ry));
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.tile{
  transform: perspective(900px) translate3d(0,0,0) rotateX(var(--rx)) rotateY(var(--ry));
}
.tileInner{
  position: relative;
  transform: translateZ(16px);
}
.tile::before{
  content:"";
  position:absolute;
  inset:-2px;
  opacity:.0;
  background:
    radial-gradient(360px 240px at 20% 0%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(360px 240px at 90% 80%, rgba(124,58,237,.18), transparent 60%);
  filter: blur(10px);
  transition: opacity 220ms ease;
}
.tile:hover::before{ opacity: 1; }
.tile h3{ margin:0 0 6px; font-size: 1.05rem; letter-spacing: -0.012em; }
.tile p{ margin:0; color: var(--muted); line-height:1.6; font-size: .98rem; }
.aboutLead{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 76ch;
}
.aboutLead .line{
  display:block;
}
.aboutLead .line + .line{
  margin-top: 8px;
}
.bullets{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}
.bullets li{
  position: relative;
  padding-left: 14px;
  color: rgba(255,255,255,.80);
  line-height: 1.55;
}
.bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34,211,238,.85), rgba(124,58,237,.70));
  box-shadow: 0 0 0 4px rgba(34,211,238,.08);
}
.bullets b{ color: var(--txt); }

/* About layout */
.aboutGrid .aboutPrimary{ grid-column: span 7; }
.aboutGrid .aboutCompany{ grid-column: span 5; }
.aboutActions{ margin-top: 14px; }
.aboutCompany p{ max-width: 60ch; }
.tile .meta{
  margin-top: 12px;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.meta .tag{
  font-size:.82rem;
  color: rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  padding:.35rem .6rem;
}

/* Contact */
.contact{
  margin: 18px 0 40px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-decoration:none;
  color: var(--txt);
  padding: 16px 18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.contact a:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.contact small{ color: var(--muted2); display:block; margin-top:.15rem;}

/* Reveal animations */
[data-reveal]{
  opacity:0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1), filter 700ms ease;
}
[data-reveal].in{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}

footer{
  padding: 18px 0 44px;
  color: var(--muted2);
}
footer .foot{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 18px;
}

/* Responsive */
@media (max-width: 920px){
  html{ scroll-padding-bottom: 96px; }
  .heroGrid{ grid-template-columns: 1fr; }
  .navlinks{ display:none; }
  .tile{ grid-column: span 12; }
  .aboutGrid .aboutPrimary,
  .aboutGrid .aboutCompany{ grid-column: span 12; }
  .contact{ grid-template-columns: 1fr; }
  /* Make the hero card more compact on mobile */
  .card .stats{ grid-template-columns: repeat(2, 1fr); }
  .card .stats .stat:nth-child(3){ display:none; }
  .card .subhead{ display:none; }
}

/* Mobile bottom nav */
.mobileNav{
  display:flex;
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 14;
  height: 62px;
  padding: 8px 10px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(12px) saturate(1.05);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  gap: 6px;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.mobileNav a{
  position: relative;
  flex: 1;
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  text-decoration:none;
  color: var(--muted);
  border-radius: 14px;
  padding: 8px 0;
}
.mobileNav a span{ display:block; line-height:1; }
.mobileNav a .mI{
  font-size: 1.05rem;
  opacity: .85;
}
.mobileNav a > span:last-child{
  font-size: .78rem;
  opacity: .9;
}
.mobileNav a[aria-current="true"]{
  color: var(--txt);
}
.mIndicator{
  position:absolute;
  left: 0;
  bottom: 6px;
  height: 3px;
  width: 0px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,211,238,.75), rgba(124,58,237,.75), rgba(245,158,11,.55));
  box-shadow: 0 0 18px rgba(34,211,238,.22);
  transform: translateX(0px);
  transition: transform 520ms cubic-bezier(.2,.9,.2,1), width 520ms cubic-bezier(.2,.9,.2,1);
  opacity: .95;
  pointer-events:none;
}

@media (min-width: 921px){
  .mobileNav{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .mIndicator{ transition:none !important; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
  body::before{ display:none; }
  body::after{ display:none; }
  body.intro header,
  body.intro .heroGrid,
  body.intro-go header,
  body.intro-go .heroGrid{ opacity:1 !important; transform:none !important; transition:none !important; }
  .bg .grade{ transition: none; filter:none; }
  .bg .grade, .hero::after{ animation: none !important; }
}