/* depth3d.css v2 - BOLD 3D/neon layer (preview) */
:root{--neo1:#2EF2D6;--neo2:#FF6FB5;--neo3:#8B7CFF}
body{background:#F3FBF9}
/* animated mesh background behind whole page */
.d3-mesh{position:fixed;inset:-20%;z-index:-2;pointer-events:none;background:
 radial-gradient(40% 35% at 20% 25%,rgba(46,242,214,.28),transparent 70%),
 radial-gradient(35% 30% at 80% 30%,rgba(255,111,181,.22),transparent 70%),
 radial-gradient(45% 40% at 50% 85%,rgba(139,124,255,.22),transparent 70%);
 filter:blur(30px);animation:d3-mesh 22s ease-in-out infinite alternate}
@keyframes d3-mesh{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(4%,-3%,0) rotate(8deg)}100%{transform:translate3d(-4%,3%,0) rotate(-6deg)}}
/* HERO */
.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;
 background:radial-gradient(90% 80% at 80% 10%,#123F7A 0%,transparent 60%),radial-gradient(80% 70% at 10% 90%,#4A1259 0%,transparent 60%),linear-gradient(160deg,#03141F,#04201F 50%,#0A0820)!important;color:#fff}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 70% at 22% 55%,rgba(3,20,31,.7),transparent 70%),linear-gradient(to bottom,transparent 70%,rgba(3,20,31,.85))}
.hero::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-2px;height:45%;z-index:1;pointer-events:none;opacity:.35;
 background-image:linear-gradient(rgba(46,242,214,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(46,242,214,.6) 1px,transparent 1px);background-size:60px 60px;
 transform:perspective(500px) rotateX(62deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);animation:d3-grid 3s linear infinite}
@keyframes d3-grid{to{background-position:0 60px,0 0}}
.hero h1{color:#fff;text-shadow:0 0 30px rgba(46,242,214,.35),0 4px 30px rgba(0,0,0,.6)}
.hero .lead,.hero .hero-points li{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.hero .lead{opacity:.92}
.hero h1 .accent{-webkit-text-fill-color:transparent!important;background-image:linear-gradient(90deg,var(--neo1),var(--neo2),var(--neo3),var(--neo1))!important;background:linear-gradient(90deg,var(--neo1),var(--neo2),var(--neo3),var(--neo1));background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:d3-sheen 5s linear infinite;filter:drop-shadow(0 0 18px rgba(255,111,181,.45))}
@keyframes d3-sheen{to{background-position:300% center}}
.hero .eyebrow{background:rgba(46,242,214,.12);color:#CFFFF7;border:1px solid rgba(46,242,214,.55);box-shadow:0 0 18px rgba(46,242,214,.35);backdrop-filter:blur(8px)}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
/* Teal fill only. The pink gradient stop and the skewed ::after shine were drawing a sliver past the pill edge. */
.hero .btn:not(.btn-ghost),.btn-primary{background:linear-gradient(120deg,#2EF2D6,#14B8A6)!important;background-size:100% 100%!important;background-clip:padding-box!important;-webkit-background-clip:padding-box!important;color:#04201F!important;box-shadow:0 10px 28px -10px rgba(20,184,166,.55)!important;animation:none!important;overflow:hidden;border-color:transparent}
.hero .btn:not(.btn-ghost)::before,.hero .btn:not(.btn-ghost)::after,.btn-primary::before,.btn-primary::after{content:none!important;display:none!important}
#d3-canvas{position:absolute;inset:0;width:100%;max-width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.hero .hero-grid{position:relative;z-index:2}
.hero .px-hero{opacity:.2}
.hero .ai-card{background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.06))!important;border:1px solid rgba(46,242,214,.5)!important;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
 box-shadow:0 40px 100px -20px rgba(0,0,0,.7),0 0 50px -6px rgba(46,242,214,.45),0 0 90px -20px rgba(255,111,181,.5),inset 0 1px 0 rgba(255,255,255,.4);color:#fff;transform-style:preserve-3d}
.hero .ai-card .bubble.me{background:rgba(255,255,255,.95);color:#132A29}
.hero .ai-card .bubble.ai{background:rgba(4,32,31,.7);color:#EFF8F6;border:1px solid rgba(46,242,214,.3)}
/* CARDS: glass + neon edge + shine */
.card,.calc-card{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(236,250,247,.82))!important;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9)!important;
 box-shadow:0 24px 50px -24px rgba(8,61,59,.45),0 0 0 1px rgba(46,242,214,.18),inset 0 1px 0 #fff!important;transform-style:preserve-3d;will-change:transform;overflow:hidden;isolation:isolate}
.card::before,.calc-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:-1;pointer-events:none;
 background:conic-gradient(from var(--d3a,0deg),var(--neo1),var(--neo3),var(--neo2),var(--neo1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;transition:opacity .3s}
.card::after,.calc-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
 background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.75),rgba(46,242,214,.18) 40%,transparent 65%);mix-blend-mode:soft-light}
.d3-tilt{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.d3-tilt:hover{box-shadow:0 40px 80px -28px rgba(8,61,59,.55),0 0 40px -6px rgba(46,242,214,.55),0 0 60px -16px rgba(255,111,181,.45)!important}
.d3-tilt:hover::before{opacity:1}.d3-tilt:hover::after{opacity:1}
.card>*,.calc-card>*{transform:translateZ(30px)}
section h2{perspective:700px;background:linear-gradient(90deg,#04201F,#0E6E6A 45%,#8B2C6B);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{-webkit-text-fill-color:initial}
section{perspective:1200px}
.d3-blob{position:fixed;z-index:-1;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;animation:d3-float 18s ease-in-out infinite alternate}
.d3-blob.a{background:var(--neo1);top:30vh;left:-16vmax}.d3-blob.b{background:var(--neo2);top:110vh;right:-18vmax;animation-delay:-6s}.d3-blob.c{background:var(--neo3);top:60vh;left:40vw;opacity:.18;animation-delay:-12s}
@keyframes d3-float{to{transform:translate3d(6vw,-8vh,0) scale(1.15)}}
.d3-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:9999;background:linear-gradient(90deg,var(--neo1),var(--neo3),var(--neo2));box-shadow:0 0 12px var(--neo1)}
@media (max-width:760px){.hero{min-height:92vh}.hero .ai-card{backdrop-filter:blur(10px)}.d3-blob{filter:blur(50px)}.d3-blob.c{display:none}.d3-mesh{animation:none;filter:blur(20px)}.hero::before{opacity:.22;animation:none}.card>*,.calc-card>*{transform:none}}
/* Audience pills sit above the card edge. Clip shine/border on the pseudos, not the tag.
   Three equal columns on wider screens; one full-width column below 720px. */
#who .g-3{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:18px}
#who .card.persona{overflow:visible;margin-top:4px;backdrop-filter:none;-webkit-backdrop-filter:none}
#who .card.persona>.tag{transform:none;z-index:3}
@media (max-width:720px){#who .g-3{grid-template-columns:1fr}}
/* Keep the page inside the viewport. Fixed mesh/blobs and the nowrap hero accent were widening the scroll width. */
html,body{overflow-x:clip;max-width:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.hero{overflow-x:clip;max-width:100%}
.hero-grid,.hero-grid>*,.wrap,.cta-box{min-width:0;max-width:100%}
.hero h1,.hero h1 .accent,h2,.cta-box h2,.lead{white-space:normal;overflow-wrap:break-word;max-width:100%}
.lead{max-width:min(640px,100%)}
.cta-box h2{max-width:min(720px,100%)}
.hero h1{font-size:clamp(1.75rem,7vw,3.9rem)}
h2,.cta-box h2{font-size:clamp(1.45rem,5.2vw,2.6rem)}
.btn,.btn-primary,.btn-lg,.btn-light,.btn-ghost{font-size:1rem;line-height:1.2;max-width:100%;box-sizing:border-box}
.nav .btn{font-size:.92rem;width:auto;padding:10px 18px}
.btn-lg{font-size:1.06rem}
.d3-mesh{inset:0;width:100%;max-width:100%}
.d3-blob{max-width:100vw}
@media (prefers-reduced-motion:reduce){.hero .accent,.d3-mesh,.d3-blob,.hero::before,.btn,.btn-primary{animation:none!important}.d3-tilt{transition:none}}
.hero h1 .accent::after{background:linear-gradient(90deg,rgba(46,242,214,.35),rgba(255,111,181,.35))!important;filter:blur(6px)}