/* ============================================================
   Landing page animations — three.js hero + bento + SVG
   ============================================================ */

/* Hero 3D canvas layer */
.hero-3d{position:relative;overflow:hidden;min-height:92vh;padding-top:0;padding-bottom:0}
.hero-3d #hero-3d-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}
.hero-3d .hero-content{position:relative;z-index:2}
.hero-3d .hero-grid{align-items:center;min-height:92vh;padding:110px 0 70px}

/* Specialties bento mosaic */
/* Bento grid — dense auto-flow so filtering re-packs without gaps */
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(196px,auto);grid-auto-flow:row dense;gap:16px}
.bento-card{--fam:var(--violet);position:relative;text-decoration:none;color:inherit;border-radius:var(--radius);background:linear-gradient(160deg,var(--surface),var(--surface-2));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform .35s cubic-bezier(.22,.75,.3,1),border-color .35s ease,box-shadow .35s ease,opacity .5s ease}
.bento-card[data-family="systems"]{--fam:var(--violet)}
.bento-card[data-family="health"]{--fam:var(--cyan)}
.bento-card[data-family="growth"]{--fam:var(--warning)}
.bento-card[data-tile="lg"]{grid-column:span 2;grid-row:span 2}
.bento-card[data-tile="wide"]{grid-column:span 2}
.bento-card:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--fam) 14%,transparent),transparent 55%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.bento-card:hover,.bento-card:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--fam) 50%,transparent);box-shadow:0 26px 74px rgba(6,8,32,.46),0 0 0 1px color-mix(in srgb,var(--fam) 40%,transparent),0 0 32px color-mix(in srgb,var(--fam) 20%,transparent)}
.bento-card:hover:before,.bento-card:focus-visible:before{opacity:1}
.bento-card-inner{display:flex;flex-direction:column;height:100%;padding:22px;position:relative;z-index:1}
.bento-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bento-card .icon-box{width:38px;height:38px;border-radius:11px;font-size:.86rem;background:color-mix(in srgb,var(--fam) 20%,transparent);color:color-mix(in srgb,var(--fam) 62%,var(--paper))}
.bento-badge{display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--fam) 40%,transparent);background:color-mix(in srgb,var(--fam) 12%,transparent);color:color-mix(in srgb,var(--fam) 78%,var(--paper));border-radius:999px;padding:4px 10px;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bento-card h3{font-family:var(--font-body);font-size:1.05rem;margin:0 0 8px;letter-spacing:-.02em;line-height:1.25}
.bento-card p{color:var(--silver);font-size:.84rem;line-height:1.5;margin:0 0 14px}
.bento-extra{color:color-mix(in srgb,var(--silver) 82%,transparent);font-size:.82rem}
.bento-card small{display:block;margin-top:auto;color:color-mix(in srgb,var(--fam) 72%,var(--silver));font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bento-arrow{position:absolute;top:20px;right:20px;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--fam) 16%,transparent);color:color-mix(in srgb,var(--fam) 60%,var(--paper));font-size:1.1rem;font-weight:700;opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .3s ease;z-index:2}
.bento-card:hover .bento-arrow,.bento-card:focus-visible .bento-arrow{opacity:1;transform:translateX(0)}
.bento-card[data-tile="lg"] .icon-box{width:46px;height:46px;border-radius:13px;font-size:1rem}
.bento-card[data-tile="lg"] h3{font-size:1.5rem;margin-bottom:10px}
.bento-card[data-tile="lg"] p{font-size:.92rem}
.bento-card.is-hidden{display:none}
.bento-grid.js-reveal .bento-card{opacity:0}
.bento-grid.js-reveal.is-visible .bento-card{opacity:1;transition:opacity .55s ease calc(var(--i) * 45ms),transform .35s cubic-bezier(.22,.75,.3,1),border-color .35s ease,box-shadow .35s ease}

/* Family filter chips (--fam drives each chip's accent) */
.bento-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;margin-bottom:22px}
.filter-chip{--fam:var(--violet);display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:color-mix(in srgb,var(--fam) 6%,transparent);color:var(--paper);border-radius:999px;padding:8px 15px;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:border-color .25s ease,background .25s ease,color .25s ease}
.filter-chip[data-fam="systems"]{--fam:var(--violet)}
.filter-chip[data-fam="health"]{--fam:var(--cyan)}
.filter-chip[data-fam="growth"]{--fam:var(--warning)}
.chip-dot{width:9px;height:9px;border-radius:50%;background:var(--fam);box-shadow:0 0 12px color-mix(in srgb,var(--fam) 70%,transparent)}
.chip-dot.all{background:conic-gradient(from 210deg,var(--violet),var(--cyan),var(--warning),var(--violet))}
.filter-chip:hover{border-color:color-mix(in srgb,var(--fam) 45%,transparent)}
.filter-chip.is-active{border-color:color-mix(in srgb,var(--fam) 60%,transparent);background:color-mix(in srgb,var(--fam) 16%,transparent)}
.filter-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Bento reveal + filtering are handled together with the grid rules above. */

/* Stats reveal */
.stats-section .stats>div{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.75,.3,1)}
.stats-section.is-visible .stats>div{opacity:1;transform:translateY(0)}
.stats-section.is-visible .stats>div:nth-child(1){transition-delay:.05s}
.stats-section.is-visible .stats>div:nth-child(2){transition-delay:.15s}
.stats-section.is-visible .stats>div:nth-child(3){transition-delay:.25s}
.stats-section.is-visible .stats>div:nth-child(4){transition-delay:.35s}

/* Capability cards entrance */
.capabilities-section{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.75,.3,1)}
.capabilities-section.is-visible{opacity:1;transform:translateY(0)}
.capability-card{position:relative;overflow:hidden}
.capability-card .capability-svg{position:absolute;right:-18px;bottom:-18px;width:110px;height:110px;opacity:0;transform:scale(0.8) rotate(-12deg);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.75,.3,1)}
.capability-card:hover .capability-svg{opacity:0.9;transform:scale(1) rotate(0deg)}
.orbit-ring{transform-origin:60px 60px;animation:spin-slow 20s linear infinite}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Positioning animated SVG */
.positioning-section{position:relative;overflow:hidden}
.positioning-copy{position:relative;z-index:2}
.positioning-visual{display:flex;align-items:center;justify-content:center;padding:18px}
.positioning-visual svg{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 0 30px rgba(102,38,239,.12))}

/* Positioning before/after grid (B&A boolean-intersection micro-grid) */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 26px}
.ba-col{display:flex;flex-direction:column;gap:10px;padding:20px;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,var(--surface),var(--surface-2));transition:transform .3s cubic-bezier(.22,.75,.3,1),border-color .3s ease}
.ba-col:hover,.ba-col:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--violet) 46%,transparent)}
.ba-col-kicker{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.ba-before,.ba-after{margin:0;font-size:.85rem;line-height:1.5;color:var(--silver)}
.ba-before strong,.ba-after strong{color:var(--paper);font-weight:760;margin-right:4px}
.ba-after strong{color:var(--lavender)}
.ba-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:760;color:var(--cyan)}
.ba-arrow{transition:transform .25s ease}
.ba-col:hover .ba-arrow{transform:translateX(4px)}
@media(max-width:900px){.ba-grid{grid-template-columns:1fr}}

/* Homepage FAQ accordion */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,var(--surface),var(--surface-2));overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:680;font-size:.98rem;color:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;font-size:1.2rem;color:var(--violet);transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--cyan)}
.faq-item summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.faq-item p{margin:0;padding:0 22px 20px;color:var(--silver);font-size:.9rem;line-height:1.6}

/* Scroll reveal utility */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.75,.3,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:1100px){
  /* 3 columns; the flagship stays wide but drops to a single row so a 2x2
     tile does not fight the narrower track. */
  .bento-grid{grid-template-columns:repeat(3,1fr)}
  .bento-card[data-tile="lg"]{grid-row:span 1}
}
@media(max-width:760px){
  .hero-3d{min-height:auto}
  .hero-3d .hero-grid{min-height:auto;padding-top:92px;padding-bottom:44px}
  .bento-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(180px,auto)}
  .bento-card[data-tile="lg"],.bento-card[data-tile="wide"]{grid-column:span 2;grid-row:span 1}
  .bento-card[data-tile="lg"] h3{font-size:1.25rem}
  .positioning-visual svg{max-width:280px}
}
@media(max-width:480px){
  .bento-grid{grid-template-columns:1fr}
  .bento-card[data-tile="lg"],.bento-card[data-tile="wide"]{grid-column:span 1}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .orbit-ring{animation:none}
  .capability-card,.bento-card,.stats>div,.capabilities-section,.reveal{transition:none!important;opacity:1!important;transform:none!important}
}


/* Homepage 3D hero and specialty scroller */
.hero{position:relative;padding:92px 0 58px;overflow:hidden}
.hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
/* Grid items default to min-width:auto, so a long display word can force the
   copy column wider than the viewport and .hero{overflow:hidden} clips it.
   Allowing the tracks to shrink keeps the headline and lead inside the frame. */
.hero-grid>*{min-width:0}
.hero-3d h1{overflow-wrap:break-word}
.hero-copy{max-width:720px}
.hero-visual{position:relative;min-height:520px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow)}
.hero-visual canvas{display:block;width:100%!important;height:100%!important}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,32,.15) 0%,rgba(6,8,32,.65) 100%);pointer-events:none}

/* Hero capability matrix — the hero visual is composed from real expertise
   data over the 3D shield, not a raster image. */
.hero-matrix{display:flex;flex-direction:column;padding:26px 24px;background:linear-gradient(158deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface-2) 78%,transparent));border-color:var(--line-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.hero-matrix-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hero-matrix-kicker{color:var(--cyan);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hero-matrix-badge{flex:none;padding:6px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--violet) 40%,transparent);background:color-mix(in srgb,var(--violet) 15%,transparent);color:var(--lavender);font-size:.68rem;font-weight:760;letter-spacing:.03em;white-space:nowrap}
.hero-matrix-sub{margin:14px 0 6px;color:var(--paper);font-size:1.05rem;font-weight:640;line-height:1.4;max-width:30ch}
.hero-matrix-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1;justify-content:center}
.hero-matrix-list li+li{border-top:1px solid var(--line)}
.hero-matrix-list a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;padding:16px 4px;text-decoration:none;color:inherit;border-radius:12px;transition:padding-left .3s cubic-bezier(.22,.75,.3,1),background .2s ease}
.hero-matrix-list a:hover{padding-left:12px;background:color-mix(in srgb,var(--violet) 8%,transparent)}
.hero-matrix-list a:hover .mega-tile{transform:scale(1.08)}
.hero-matrix-text{min-width:0}
.hero-matrix-text strong{display:block;font-size:.95rem;font-weight:680;color:var(--paper);letter-spacing:-.01em}
.hero-matrix-text small{display:block;margin-top:3px;color:var(--silver);font-size:.8rem;line-height:1.4}
.hero-matrix-arrow{color:var(--silver);font-size:1.05rem;transition:transform .3s ease,color .3s ease}
.hero-matrix-list a:hover .hero-matrix-arrow{transform:translateX(4px);color:var(--cyan)}
.hero-matrix-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);color:var(--silver);font-size:.78rem;font-weight:660;text-decoration:none;transition:color .2s ease}
.hero-matrix-foot:hover{color:var(--cyan)}
.hero-matrix-foot:hover .hero-matrix-arrow{transform:translateX(4px);color:var(--cyan)}

/* Specialty horizontal scroller */
.specialty-scroller{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 4px 24px;margin-top:26px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.specialty-scroller::-webkit-scrollbar{height:8px}
.specialty-scroller::-webkit-scrollbar-track{background:transparent}
.specialty-scroller::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.specialty-card{flex:0 0 280px;scroll-snap-align:start;padding:18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.22,.75,.3,1),border-color .35s ease,box-shadow .35s ease;position:relative;overflow:hidden}
.specialty-card:hover{transform:translateY(-6px) rotateX(2deg);border-color:color-mix(in srgb,var(--cyan) 34%,transparent);box-shadow:0 30px 80px rgba(6,8,32,.55)}
.specialty-card:before{content:"";position:absolute;width:160px;height:160px;right:-50px;top:-50px;background:radial-gradient(circle,rgba(102,38,239,.28),transparent 68%);opacity:0;transition:opacity .4s ease}
.specialty-card:hover:before{opacity:1}
.specialty-card .icon-box{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--violet) 18%,transparent);color:color-mix(in srgb,var(--lavender) 55%,var(--paper));font-weight:820;margin-bottom:12px;font-size:.82rem;border:1px solid color-mix(in srgb,var(--violet) 22%,transparent)}
.specialty-card h3{font-family:var(--font-body);font-size:1.05rem;margin-bottom:8px}
.specialty-card p{color:var(--silver);font-size:.84rem;line-height:1.5;margin:0 0 12px}
.specialty-card .meta{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-size:.72rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.specialty-card .meta:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.scroller-hint{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;color:var(--silver);font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.scroller-hint span{display:inline-block;animation:scroll-hint 2.4s ease-in-out infinite}
@keyframes scroll-hint{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(6px);opacity:1}}

/* Stats reveal */
.stats-section.is-visible .stats>div{opacity:1;transform:none}
.stats-section.is-visible .stats>div:nth-child(1){transition-delay:.05s}
.stats-section.is-visible .stats>div:nth-child(2){transition-delay:.15s}
.stats-section.is-visible .stats>div:nth-child(3){transition-delay:.25s}
.stats-section.is-visible .stats>div:nth-child(4){transition-delay:.35s}

/* Animated proof ring for brand consistency */
.proof-ring-anim{position:relative;display:inline-grid;place-items:center}
.proof-ring-anim .ring{position:absolute;border-radius:50%;border:1px solid rgba(102,38,239,.18);animation:proof-pulse 4s ease-in-out infinite}
.proof-ring-anim .ring:nth-child(2){inset:14px;animation-delay:.6s;border-style:dashed}
.proof-ring-anim .ring:nth-child(3){inset:28px;animation-delay:1.2s}
.proof-ring-anim .ring:nth-child(4){inset:42px;animation-delay:1.8s;border-color:rgba(25,211,226,.14)}
@keyframes proof-pulse{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.08);opacity:.9}}

/* Grid floor animation */
.grid-floor{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.06;background-image:linear-gradient(var(--cyan) 1px,transparent 1px),linear-gradient(90deg,var(--cyan) 1px,transparent 1px);background-size:60px 60px;transform:perspective(500px) rotateX(55deg) translateY(40px) scale(2);animation:grid-drift 20s linear infinite}
@keyframes grid-drift{0%{background-position:0 0}100%{background-position:60px 60px}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.75,.3,1)}
.reveal.is-visible{opacity:1;transform:none}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{min-height:360px}
  .specialty-card{flex:0 0 220px}
}

@media(max-width:760px){
  .specialty-card{flex:0 0 200px}
  .hero{padding-top:58px}
  /* The base h1 clamp floors at 3rem, which is too wide for the homepage hero
     on phones; scale it with the viewport so the headline fits the frame. */
  .hero-3d h1{font-size:clamp(2rem,8.6vw,3.2rem)}
}