*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f8f6fb;color:#1f1d26;font-family:"Manrope",Arial,sans-serif}.intro{position:relative;width:100vw;height:100dvh;min-height:620px;overflow:hidden;background:radial-gradient(circle at 48% 38%,rgba(255,255,255,.98) 0,rgba(249,246,252,.95) 34%,rgba(235,229,243,.96) 72%,rgba(222,212,235,.98) 100%)}.intro:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.9),transparent 28%,transparent 68%,rgba(118,82,150,.12)),repeating-linear-gradient(90deg,transparent 0 139px,rgba(118,82,150,.025) 140px);pointer-events:none}.ambient{position:absolute;border-radius:50%;filter:blur(80px);opacity:.36}.ambient-a{width:38vw;height:38vw;left:-10vw;top:-13vw;background:#dcecf3}.ambient-b{width:34vw;height:34vw;right:-8vw;bottom:-8vw;background:#b481d0}.ambient-c{width:22vw;height:22vw;left:40%;bottom:-15vw;background:#72518d;opacity:.16}.logo-relief{position:absolute;z-index:1;left:50%;top:50%;width:min(54vw,920px);transform:translate(-50%,-50%) rotate(-2deg);opacity:.065;filter:grayscale(1) drop-shadow(0 24px 18px rgba(81,52,103,.4));pointer-events:none}.logo-relief img{width:100%;height:auto;transform:perspective(900px) rotateX(16deg);filter:contrast(1.15)}.intro-tools{position:absolute;z-index:30;right:26px;top:20px;display:flex;gap:9px}.ghost{border:1px solid rgba(68,49,83,.18);color:#55445f;background:rgba(255,255,255,.64);backdrop-filter:blur(16px);border-radius:999px;padding:10px 16px;font-size:11px;font-weight:700;letter-spacing:.12em;cursor:pointer;box-shadow:0 8px 20px rgba(67,45,83,.08);transition:.25s}.ghost:hover{transform:translateY(-2px);border-color:rgba(118,82,150,.45);color:#765296}.stage{position:relative;z-index:3;height:100%;max-width:1680px;margin:auto;padding:4.1vh 3.2vw 2.5vh;display:flex;flex-direction:column;align-items:center}.story-copy{text-align:center;min-height:14vh;display:flex;flex-direction:column;justify-content:flex-end;transition:.5s}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.34em;color:#765296;margin-bottom:9px}.story-copy h1{font-family:"Syne",Arial,sans-serif;font-size:clamp(30px,3.3vw,60px);line-height:.98;letter-spacing:-.025em;margin:0;background:linear-gradient(90deg,#1e1b24 0,#4b385a 48%,#9c64b7 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 12px 32px rgba(83,52,102,.08)}.story-copy p{margin:8px 0 0;color:#6c6870;font-size:clamp(11px,1.05vw,16px);font-weight:500}.letters-wrap{position:relative;width:min(80vw,1240px);height:min(45vh,460px);margin-top:.6vh;filter:drop-shadow(0 28px 36px rgba(80,55,95,.18))}.letter-bubble{position:absolute;width:clamp(29px,3.5vw,56px);aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.78);box-shadow:inset 0 7px 12px rgba(255,255,255,.48),inset 0 -8px 14px rgba(76,54,90,.19),0 13px 25px rgba(76,52,92,.22),0 0 0 4px rgba(118,82,150,.055);opacity:0;transform:translateY(-70vh) scale(.42) rotate(var(--rot));transition:transform 1s cubic-bezier(.16,.88,.23,1.12),opacity .4s ease;overflow:hidden}.letter-bubble:after{content:"";position:absolute;left:14%;right:14%;top:8%;height:23%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,0));filter:blur(2px)}.letter-bubble.landed{opacity:1;transform:translate(0,0) scale(1) rotate(0)}.brand-final{position:absolute;left:50%;top:46.5%;transform:translate(-50%,-50%) scale(.84);display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;transition:.9s ease;text-shadow:0 18px 30px rgba(87,53,105,.12)}.brand-final.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.brand-final-logo{width:clamp(160px,18vw,310px);height:auto;filter:drop-shadow(0 18px 17px rgba(76,48,92,.18))}.brand-final span{margin-top:8px;font-weight:800;letter-spacing:.18em;font-size:clamp(9px,1vw,15px);color:#372c3d}.brand-final em{font-family:Georgia,serif;font-size:clamp(13px,1.35vw,19px);margin-top:7px;color:#765f82}.proof-row{width:min(95vw,1530px);margin-top:auto;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;opacity:0;transform:translateY(25px);transition:.8s ease}.proof-row.show{opacity:1;transform:none}.proof-row>div{position:relative;min-height:78px;border-radius:26px;padding:12px 10px;display:flex;flex-direction:column;justify-content:center;text-align:center;background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(231,222,239,.68));border:1px solid rgba(118,82,150,.18);box-shadow:inset 0 2px 6px rgba(255,255,255,.9),0 13px 18px rgba(76,51,91,.16),0 5px 0 rgba(118,82,150,.18);backdrop-filter:blur(15px);transition:.32s;overflow:hidden}.proof-row>div:before{content:"";position:absolute;inset:-60% -25% auto;height:85%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:rotate(8deg);opacity:.38}.proof-row>div:hover{transform:translateY(-9px) scale(1.055);background:linear-gradient(145deg,#ffffff,#e3d2ed);border-color:rgba(118,82,150,.44);box-shadow:inset 0 2px 8px rgba(255,255,255,.96),0 22px 34px rgba(79,50,96,.23),0 6px 0 rgba(118,82,150,.42)}.proof-row b{position:relative;font-size:clamp(8px,.77vw,12px);line-height:1.12;letter-spacing:.035em;color:#352a3c}.proof-row span{position:relative;font-size:8.5px;line-height:1.2;color:#796f7d;margin-top:4px}.enter{margin-top:17px;margin-bottom:.6vh;padding:14px 30px;border-radius:999px;background:linear-gradient(135deg,#9259b3,#71418f);color:#fff;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.14em;box-shadow:0 10px 0 #4c2b61,0 20px 32px rgba(75,45,92,.25);opacity:0;transform:translateY(12px);transition:.45s;display:flex;align-items:center;gap:14px}.enter i{font-style:normal;font-size:18px}.enter.show{opacity:1;transform:none}.enter:hover{transform:translateY(-4px);box-shadow:0 13px 0 #4c2b61,0 27px 40px rgba(75,45,92,.3)}.intro.exit{animation:exitScene .65s forwards}@keyframes exitScene{to{opacity:0;filter:blur(12px);transform:scale(1.015)}}
@media(max-width:1000px){.proof-row{grid-template-columns:repeat(3,1fr);max-width:760px}.proof-row>div{min-height:58px}.letters-wrap{height:39vh}.story-copy{min-height:15vh}}
@media(max-width:800px){.stage{padding:5vh 14px 2vh}.story-copy{min-height:17vh}.letters-wrap{width:96vw;height:41vh}.letter-bubble{width:clamp(22px,6.4vw,34px)}.proof-row{grid-template-columns:repeat(3,1fr);gap:7px;width:94vw}.proof-row>div{min-height:52px;border-radius:18px;padding:7px 5px}.proof-row b{font-size:8px}.proof-row span{font-size:7px}.brand-final{top:45%}.intro-tools{right:12px;top:12px}.ghost{padding:8px 10px;font-size:9px}.enter{margin-top:10px;padding:11px 20px;font-size:10px}.logo-relief{width:90vw}}
@media(max-width:430px){.story-copy h1{font-size:27px}.story-copy p{font-size:10px}.eyebrow{font-size:8px;letter-spacing:.24em}.letters-wrap{height:37vh}.proof-row{grid-template-columns:repeat(3,1fr)}.proof-row>div:nth-child(n+7){display:none}.brand-final-logo{width:170px}.brand-final span{font-size:8px}.brand-final em{font-size:12px}}
/* =========================================================
   V12 — intro refinement: HADS violet, logo relief outside letters
========================================================= */
.intro{
  background:
    radial-gradient(circle at 48% 36%,rgba(255,255,255,.98) 0,rgba(250,246,252,.97) 28%,rgba(234,222,242,.98) 67%,rgba(111,64,143,.28) 100%)!important;
}
.intro:before{
  background:
    linear-gradient(120deg,rgba(255,255,255,.82),transparent 30%,transparent 69%,rgba(124,74,163,.18)),
    radial-gradient(circle at 82% 18%,rgba(176,91,205,.18),transparent 29%),
    repeating-linear-gradient(90deg,transparent 0 139px,rgba(118,82,150,.023) 140px)!important;
}
.logo-relief{
  left:auto!important;right:-5vw!important;top:17%!important;width:min(38vw,650px)!important;
  transform:perspective(1100px) rotateY(-18deg) rotateX(8deg)!important;opacity:.085!important;
  filter:drop-shadow(0 36px 34px rgba(85,49,109,.34))!important;
}
.logo-relief img{filter:saturate(.9) contrast(1.08)!important}
.story-copy h1{font-family:"Syne","Manrope",sans-serif!important;font-weight:700!important;letter-spacing:-.045em!important}
.letters-wrap{z-index:3}
.brand-final{z-index:6;background:rgba(255,255,255,.62);padding:18px 34px 16px;border-radius:28px;border:1px solid rgba(124,74,163,.16);backdrop-filter:blur(16px);box-shadow:0 22px 48px rgba(76,46,93,.16),0 7px 0 rgba(124,74,163,.12)}
.brand-final-logo{width:clamp(190px,20vw,330px)!important}
.proof-row>div{background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(230,214,240,.82))!important;border-color:rgba(124,74,163,.24)!important;box-shadow:inset 0 2px 8px rgba(255,255,255,.98),0 16px 28px rgba(77,46,95,.18),0 6px 0 rgba(124,74,163,.22)!important}
.enter{background:linear-gradient(135deg,#9858bb,#744092)!important}
@media(max-width:800px){.logo-relief{right:-28vw!important;top:22%!important;width:92vw!important;opacity:.055!important}.brand-final{padding:12px 18px}}


/* V14 — proof bubbles are born from the central HADS logo, one by one */
.proof-row.show{opacity:1!important;transform:none!important}
.proof-row.show>div{opacity:0;transform:translate(var(--birth-x,0px),var(--birth-y,-100px)) scale(1.72);filter:blur(7px);will-change:transform,opacity,filter}
.proof-row.show>div.proof-born{
  animation:hadsProofBirth .82s cubic-bezier(.18,.88,.22,1.08) forwards;
}
@keyframes hadsProofBirth{
  0%{opacity:0;transform:translate(var(--birth-x),var(--birth-y)) scale(1.72);filter:blur(7px)}
  52%{opacity:1;filter:blur(0);transform:translate(calc(var(--birth-x)*.16),calc(var(--birth-y)*.16)) scale(1.12)}
  78%{transform:translate(0,-8px) scale(1.055)}
  100%{opacity:1;filter:blur(0);transform:translate(0,0) scale(1)}
}
.proof-row.show>div.proof-born:hover{animation:none;opacity:1;filter:none;transform:translateY(-9px) scale(1.055)}

/* =========================================================
   V15 — story message descends from the top into its final 3D proof button
========================================================= */
.proof-row.show>div{
  opacity:0;
  transform:translate(var(--story-x,0px),var(--story-y,-180px)) scale(1.55);
  filter:blur(4px);
}
.proof-row.show>div.proof-born{
  animation:hadsStoryDrop 1.08s cubic-bezier(.18,.82,.20,1.04) forwards!important;
}
@keyframes hadsStoryDrop{
  0%{opacity:0;transform:translate(var(--story-x),var(--story-y)) scale(1.48);filter:blur(5px)}
  18%{opacity:.94;filter:blur(1px)}
  68%{opacity:1;transform:translate(calc(var(--story-x)*.08),calc(var(--story-y)*.08)) scale(1.08);filter:none}
  84%{transform:translate(0,-7px) scale(1.045)}
  100%{opacity:1;transform:translate(0,0) scale(1);filter:none}
}
.proof-row.wave-ready>div.proof-born{
  animation:proofVioletWave 10.8s ease-in-out infinite!important;
}
.proof-row.wave-ready>div:nth-child(1){animation-delay:0s!important}
.proof-row.wave-ready>div:nth-child(2){animation-delay:1.15s!important}
.proof-row.wave-ready>div:nth-child(3){animation-delay:2.30s!important}
.proof-row.wave-ready>div:nth-child(4){animation-delay:3.45s!important}
.proof-row.wave-ready>div:nth-child(5){animation-delay:4.60s!important}
.proof-row.wave-ready>div:nth-child(6){animation-delay:5.75s!important}
.proof-row.wave-ready>div:nth-child(7){animation-delay:6.90s!important}
.proof-row.wave-ready>div:nth-child(8){animation-delay:8.05s!important}
.proof-row.wave-ready>div:nth-child(9){animation-delay:9.20s!important}
@keyframes proofVioletWave{
  0%,8%,100%{transform:translateY(0) scale(1);background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(230,214,240,.82));box-shadow:inset 0 2px 8px rgba(255,255,255,.98),0 16px 28px rgba(77,46,95,.18),0 6px 0 rgba(124,74,163,.22)}
  3.5%{transform:translateY(-10px) scale(1.075);background:linear-gradient(145deg,#a85fca,#71418f);box-shadow:inset 0 2px 8px rgba(255,255,255,.25),0 25px 40px rgba(94,49,119,.35),0 8px 0 rgba(77,42,97,.48)}
}
.proof-row.wave-ready>div b,.proof-row.wave-ready>div span{transition:color .25s ease}
.proof-row.wave-ready>div:hover{
  animation:none!important;transform:translateY(-11px) scale(1.08)!important;
  background:linear-gradient(145deg,#ad64ce,#70408d)!important;
  box-shadow:inset 0 2px 8px rgba(255,255,255,.28),0 27px 42px rgba(86,45,109,.38),0 9px 0 rgba(74,40,94,.5)!important;
}
.proof-row.wave-ready>div:hover b,.proof-row.wave-ready>div:hover span{color:#fff!important}
.proof-row.wave-paused>div{animation-play-state:paused!important}

/* top story gets a little more breathing room for the slower sequence */
.story-copy{min-height:15.5vh!important}