:root{
  --navy:#143A63; --navy2:#1B4A78; --teal:#2FB6D3; --teal2:#67D3E6;
  --bg:#F4FAFD; --ink:#143A63; --muted:#4B6580;
  --card:rgba(255,255,255,.62); --line:rgba(27,74,120,.12);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0B1E33;--ink:#EAF6FB;--muted:#A9C0D3;--card:rgba(255,255,255,.94);--line:rgba(103,211,230,.25)}
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* Background */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.b1{width:60vmax;height:60vmax;left:-20vmax;top:-25vmax;background:radial-gradient(circle,var(--teal2),transparent 65%);animation:drift1 22s ease-in-out infinite alternate}
.b2{width:55vmax;height:55vmax;right:-22vmax;bottom:-28vmax;background:radial-gradient(circle,#5B8FCB,transparent 65%);animation:drift2 26s ease-in-out infinite alternate}
.b3{width:35vmax;height:35vmax;right:10vmax;top:-12vmax;background:radial-gradient(circle,rgba(47,182,211,.7),transparent 65%);animation:drift1 30s ease-in-out infinite alternate-reverse}
.ribbon{position:absolute;width:46vmax;height:14vmax;border-radius:14vmax;border:2.2vmax solid transparent;
  background:linear-gradient(135deg,var(--navy2),var(--teal)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.09;will-change:transform}
.r1{left:-14vmax;bottom:6vmax;transform:rotate(-38deg);animation:float1 18s ease-in-out infinite alternate}
.r2{right:-16vmax;top:4vmax;transform:rotate(38deg);animation:float2 21s ease-in-out infinite alternate}
#net{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
@keyframes drift1{to{transform:translate(9vmax,7vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-8vmax,-6vmax) scale(1.1)}}
@keyframes float1{to{transform:rotate(-30deg) translate(3vmax,-3vmax)}}
@keyframes float2{to{transform:rotate(46deg) translate(-3vmax,3vmax)}}

/* Layout */
.stage{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(24px,5vw,56px) 20px calc(24px + env(safe-area-inset-bottom))}

/* Logo card */
.logo-card{position:relative;width:min(760px,92vw);padding:clamp(22px,4.5vw,52px) clamp(20px,5vw,64px);border-radius:32px;background:var(--card);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 80px -20px rgba(20,58,99,.28),0 8px 24px -10px rgba(47,182,211,.35),inset 0 1px 0 #fff;
  overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease-out}
.logo-card img{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(20,58,99,.18))}
.glow{position:absolute;left:50%;top:50%;width:70%;height:70%;translate:-50% -50%;background:radial-gradient(closest-side,rgba(103,211,230,.45),transparent);filter:blur(30px);animation:pulse 5s ease-in-out infinite}
.sheen{position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-18deg);animation:sheen 6s 2.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45;scale:1.12}}
@keyframes sheen{0%{left:-60%}35%,100%{left:130%}}

/* Text */
h1{margin-top:clamp(28px,5vh,48px);font-weight:600;font-size:clamp(1.9rem,5.2vw,3.4rem);line-height:1.12;letter-spacing:-.02em;max-width:18ch;text-wrap:balance;
  background:linear-gradient(100deg,var(--ink) 30%,var(--teal) 60%,var(--ink) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 7s 2s ease-in-out infinite alternate}
@keyframes shine{to{background-position:-100% 0}}
.lead{margin-top:18px;max-width:52ch;font-weight:300;font-size:clamp(1rem,2.2vw,1.18rem);line-height:1.7;color:var(--muted)}
.actions{margin-top:34px}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:17px 34px;border-radius:999px;color:#fff;text-decoration:none;font-weight:500;font-size:1.05rem;letter-spacing:.01em;
  background:linear-gradient(120deg,var(--navy2),var(--navy) 45%,var(--teal) 130%);background-size:200% 100%;
  box-shadow:0 14px 34px -10px rgba(20,58,99,.65),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .25s,box-shadow .25s,background-position .5s}
.btn:hover{transform:translateY(-3px);background-position:100% 0;box-shadow:0 20px 40px -10px rgba(47,182,211,.65),inset 0 1px 0 rgba(255,255,255,.3)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--teal2);outline-offset:4px}
.btn::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid var(--teal);opacity:0;animation:ring 3.2s 3s ease-out infinite}
@keyframes ring{0%{opacity:.6;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
footer{margin-top:clamp(36px,7vh,70px);font-size:.85rem;color:var(--muted);opacity:.85}

/* Load sequence (one orchestrated entrance) */
.js .reveal{opacity:0;transform:translateY(22px);filter:blur(8px);animation:in .9s cubic-bezier(.2,.8,.2,1) forwards}
.js .logo-card.reveal{transform:scale(.94);clip-path:inset(0 100% 0 0 round 32px);animation:cardIn 1.4s cubic-bezier(.2,.8,.2,1) .15s forwards}
.js .d1{animation-delay:1s}.js .d2{animation-delay:1.2s}.js .d3{animation-delay:1.4s}.js .d4{animation-delay:1.7s}
@keyframes in{to{opacity:1;transform:none;filter:none}}
@keyframes cardIn{to{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0 round 32px)}}

@media (max-width:520px){.logo-card{border-radius:24px}.btn{padding:15px 26px;font-size:1rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none;filter:none;clip-path:none}
  #net{display:none}
}