:root { --ink:#061721; --teal:#3a9b8f; --footer:#06212c; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:#fff; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
.landing { min-height:100svh; overflow-x:hidden; background-color:#fff; background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),url('assets/pattern-page.svg'); background-blend-mode:screen,normal; background-repeat:repeat; background-size:240px 140px; }
.intro-stage { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background-color:#fff; background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),url('assets/pattern-page.svg'); background-blend-mode:screen,normal; background-repeat:repeat; background-size:240px 140px; pointer-events:none; animation:stageAway .72s 5.55s ease-in-out forwards; }
.intro-logo { position:relative; display:block; width:min(535px,calc(100vw - 44px)); aspect-ratio:545/136; height:auto; animation:logoTravel 1.2s 4.55s cubic-bezier(.65,0,.2,1) forwards; }
.logo-piece { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; }
.piece-signet-top { opacity:1; clip-path:inset(0 80% 40% 0); animation:signetTopIn 1.15s .15s cubic-bezier(.22,1,.36,1) both,signetLeft .8s 1.55s cubic-bezier(.65,0,.2,1) forwards; }
.piece-signet-step { opacity:1; clip-path:inset(50% 80% 0 0); animation:signetStepIn 1.15s .25s cubic-bezier(.22,1,.36,1) both,signetLeft .8s 1.55s cubic-bezier(.65,0,.2,1) forwards; }
.piece-p { clip-path:inset(24% 65% 10% 24%); animation:pieceIn .48s 2.12s cubic-bezier(.2,.8,.2,1) both; }
.piece-a { clip-path:inset(24% 52% 10% 34%); animation:pieceIn .48s 2.28s cubic-bezier(.2,.8,.2,1) both; }
.piece-s1 { clip-path:inset(24% 40% 10% 48%); animation:pieceIn .48s 2.44s cubic-bezier(.2,.8,.2,1) both; }
.piece-s2 { clip-path:inset(24% 28% 10% 60%); animation:pieceIn .48s 2.60s cubic-bezier(.2,.8,.2,1) both; }
.piece-s3 { clip-path:inset(24% 16% 10% 72%); animation:pieceIn .48s 2.76s cubic-bezier(.2,.8,.2,1) both; }
.piece-t { clip-path:inset(24% 5.8% 10% 84%); animation:pieceIn .48s 2.92s cubic-bezier(.2,.8,.2,1) both; }
.piece-dot { clip-path:inset(58% 0 8% 94%); animation:dotPieceIn .55s 3.20s cubic-bezier(.2,1.55,.45,1) both; }
.piece-claim { clip-path:inset(0 0 74% 22%); animation:claimPieceIn .7s 3.65s ease-out both; }
.hero { min-height:calc(100svh - 145px); padding:clamp(46px,7vh,82px) 0 clamp(30px,4vh,48px); display:flex; flex-direction:column; align-items:center; position:relative; }
.content { width:min(452px,calc(100vw - 44px)); position:relative; z-index:2; }
.brand-logo { display:block; width:100%; height:auto; margin-bottom:clamp(30px,4.5vh,46px); }
.final-logo { opacity:0; animation:finalLogoIn .2s 5.48s linear forwards; }
.delayed-content { opacity:0; animation:contentIn .8s 5.95s cubic-bezier(.22,1,.36,1) forwards; }
.message h1 { margin:0; font-size:clamp(25px,2.35vw,35px); line-height:1.18; letter-spacing:-.025em; font-weight:760; }
.message p { margin:27px 0 0; text-align:center; font-size:clamp(16px,1.35vw,20px); line-height:1.5; }
.pressure-visual { align-self:stretch; width:100%; margin-top:clamp(15px,2vh,25px); }
.pressure-composite { position:relative; display:block; width:min(930px,76vw); margin:0 0 0 auto; padding:0; border:0; background:transparent; cursor:pointer; filter:drop-shadow(0 13px 9px rgba(6,23,33,.11)); }
.pressure-composite:focus-visible { outline:2px solid var(--teal); outline-offset:5px; border-radius:8px; }
.pressure-base { display:block; width:100%; height:auto; }
.pressure-needle { position:absolute; z-index:2; width:11.75%; height:auto; left:10.88%; top:45.7%; transform-origin:11.55% 50%; transform:rotate(135deg); will-change:transform; }
.pressure-needle.is-running { animation:needlePressure 2.15s 6.25s cubic-bezier(.18,.7,.22,1) forwards; }
.pressure-needle.is-replay { animation:needlePressure 2.15s 0s cubic-bezier(.18,.7,.22,1) forwards; }
.soon { margin-top:clamp(-8px,-.5vw,0px); text-align:center; padding:0 24px; position:relative; z-index:2; }
.soon p { margin:0; font-size:clamp(14px,1.2vw,17px); }
.soon .eyebrow { margin-bottom:8px; color:var(--teal); text-transform:uppercase; letter-spacing:.055em; font-size:14px; font-weight:700; }
.brand-footer { min-height:145px; display:grid; place-items:center; background-color:var(--footer); background-image:url('assets/pattern-footer.svg'); background-repeat:repeat; background-size:240px 140px; background-position:0 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.brand-footer span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@keyframes logoTravel { from { transform:translateY(0) scale(1); } to { transform:translateY(calc(-50vh + 138px)) scale(.845); } }
@keyframes signetTopIn { from { transform:translate(calc(40.5% - 20px),-13px) rotate(-7deg); opacity:0; } to { transform:translate(40.5%,0) rotate(0); opacity:1; } }
@keyframes signetStepIn { from { transform:translate(calc(40.5% + 17px),16px) rotate(7deg); opacity:0; } to { transform:translate(40.5%,0) rotate(0); opacity:1; } }
@keyframes signetLeft { to { transform:translate(0,0) rotate(0); } }
@keyframes pieceIn { from { opacity:0; transform:translateY(15px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes dotPieceIn { from { opacity:0; transform:scale(0); } 70% { opacity:1; transform:scale(1.28); } to { opacity:1; transform:scale(1); } }
@keyframes claimPieceIn { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:none; } }
@keyframes stageAway { to { opacity:0; visibility:hidden; } }
@keyframes finalLogoIn { to { opacity:1; } }
@keyframes contentIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes needlePressure { 0% { transform:rotate(135deg); } 72% { transform:rotate(394deg); } 86% { transform:rotate(382deg); } 100% { transform:rotate(387deg); } }
@media (max-width:640px) {
  .hero { min-height:calc(100svh - 100px); padding-top:34px; }
  .content { width:min(390px,calc(100vw - 34px)); }
  .brand-logo { margin-bottom:27px; }
  .message h1 { font-size:clamp(23px,7.2vw,30px); }
  .message p { margin-top:20px; }
  .pressure-visual { margin-top:12px; }
  .pressure-composite { width:min(740px,112vw); }
  .soon { margin-top:-4px; margin-bottom:21px; }
  .brand-footer { min-height:100px; background-size:180px 105px; }
  @keyframes logoTravel { from { transform:translateY(0) scale(1); } to { transform:translateY(calc(-50vh + 100px)) scale(.86); } }
}
@media (prefers-reduced-motion:reduce) { .intro-stage { display:none; } .final-logo,.delayed-content { opacity:1; animation:none; } .pressure-needle,.pressure-needle.is-running,.pressure-needle.is-replay { animation:none; transform:rotate(387deg); } }