@font-face{font-family:"Rubik";src:url("fonts/rubik.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Varela Round";src:url("fonts/varela.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--navy:#1F2A44;--navy2:#2a3a5f;--navy3:#141c31;--gold:#C8A96A;--gold2:#E8D3A0;--gold3:#9b7e46;--cream:#F7F1E6;--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--navy3);overflow-x:hidden}
body{min-height:100vh;min-height:100dvh;color:var(--cream);font-family:"Rubik",system-ui,sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
 background:radial-gradient(120% 70% at 50% 0%,#2c3d64 0%,var(--navy) 45%,var(--navy3) 100%) fixed;overflow-x:hidden;position:relative}
.dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.glow{position:fixed;left:50%;top:-18vh;width:140vw;max-width:900px;height:75vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(200,169,106,.20),transparent 70%);pointer-events:none;z-index:0;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}
.progress{position:fixed;top:0;right:0;left:0;height:2px;z-index:5;transform-origin:100% 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--gold3),var(--gold2),var(--gold));box-shadow:0 0 10px rgba(232,211,160,.6)}
.wrap{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 20px max(30px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;text-align:center;overflow-x:hidden;overflow-x:clip}
.bsd{align-self:flex-start;font-size:12px;color:rgba(247,241,230,.6);letter-spacing:.02em}
.hero{display:flex;flex-direction:column;align-items:center;margin-top:2px;width:100%}

/* logo reveal */
.logo-stage{position:relative;width:196px;height:196px;display:grid;place-items:center}
.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-a{stroke-dasharray:604;stroke-dashoffset:0;transform-origin:100px 100px;transform:rotate(-90deg)}
.ring-b{transform-origin:100px 100px;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.logo-wrap{position:relative;width:150px;margin-top:-4px}
.logo{display:block;width:100%;height:auto}
.glint{position:absolute;inset:0;pointer-events:none;-webkit-mask:url(logo.png) center/100% 100% no-repeat;mask:url(logo.png) center/100% 100% no-repeat;
 background:linear-gradient(105deg,transparent 35%,rgba(255,248,225,.85) 50%,transparent 65%);background-size:300% 100%;background-position:120% 0;mix-blend-mode:soft-light;opacity:0}
.flare{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;background:radial-gradient(closest-side,rgba(232,211,160,.28),rgba(200,169,106,.08) 55%,transparent 72%);pointer-events:none}
.js .ring-a{stroke-dashoffset:604;animation:draw 1.5s .15s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.js .logo-wrap{animation:logoIn 1.25s .25s var(--ease) both}
@keyframes logoIn{from{opacity:0;transform:scale(.72);filter:blur(10px)}60%{opacity:1;filter:blur(0)}to{opacity:1;transform:none;filter:none}}
.js .flare{animation:flare 1.6s .35s ease-out both,pulse 5s 2s ease-in-out infinite}
@keyframes flare{from{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.08)}to{opacity:.85;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:.5;transform:scale(.94)}}
.js .glint{animation:glint 6.5s 1.3s ease-in-out infinite}
@keyframes glint{0%{opacity:1;background-position:120% 0}22%{opacity:1;background-position:-20% 0}23%,100%{opacity:0;background-position:-20% 0}}

h1{font-family:"Varela Round","Rubik",sans-serif;font-weight:400;font-size:34px;line-height:1.15;margin-top:8px;color:var(--cream);letter-spacing:.01em}
.role{font-size:17px;line-height:1.45;margin-top:8px;color:var(--gold2);font-weight:500;max-width:320px}
.creds{font-size:13.5px;line-height:1.5;margin-top:8px;color:rgba(247,241,230,.72);max-width:340px}
.creds span{white-space:nowrap}
@media (max-width:520px){.creds .dot{display:none}.creds span:not(.dot){display:block}}
.from-r,.from-l{display:inline-block}
.line{display:flex;align-items:center;gap:10px;width:220px;margin:18px auto 14px}
.line span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);background-size:200% 100%;animation:shimmer 4s linear infinite}
.line b{color:var(--gold);font-size:13px;font-weight:400;animation:twinkle 3s ease-in-out infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.9) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}}
.hook{font-family:"Varela Round","Rubik",sans-serif;font-size:23px;line-height:1.4;color:var(--cream);max-width:330px;min-height:2.8em}
.gold{color:var(--gold)}
.shine{background:linear-gradient(100deg,#b8955a 0%,#F3DFA8 45%,#C8A96A 60%,#b8955a 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* entrance choreography (only with JS, so no-JS shows everything) */
.js .letters .ch{display:inline-block;opacity:0;transform:translateY(.45em) scale(.9);filter:blur(6px);animation:chIn .7s var(--ease) forwards}
@keyframes chIn{to{opacity:1;transform:none;filter:none}}
.js .from-r{opacity:0;transform:translateX(70px);animation:slideIn .95s var(--ease) forwards}
.js .from-l{opacity:0;transform:translateX(-70px);animation:slideIn .95s var(--ease) forwards}
@keyframes slideIn{to{opacity:1;transform:none}}
.js .role .from-r{animation-delay:1.05s}.js .role .from-l{animation-delay:1.25s}
.js .creds .from-r{animation-delay:1.45s}.js .creds .from-l{animation-delay:1.6s}
.js .line{opacity:0;transform:scaleX(.2);animation:lineIn .9s 1.75s var(--ease) forwards}
@keyframes lineIn{to{opacity:1;transform:none}}
.js .typing .tc{opacity:0}
.js .typing .tc.on{opacity:1}
.caret{display:inline-block;width:2px;height:1em;margin:0 2px;vertical-align:-.12em;background:var(--gold);animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.js .shine.typing{background:none;-webkit-text-fill-color:var(--gold);color:var(--gold)}

/* hourglass */
.hg-wrap{margin-top:14px;height:58px;display:grid;place-items:center}
.hg{width:38px;height:58px;overflow:visible;filter:drop-shadow(0 4px 10px rgba(200,169,106,.25))}
.hg-spin{transform-box:view-box;transform-origin:30px 46px;animation:flip 9s var(--ease) infinite}
.sand-top{animation:drainTop 9s linear infinite}
.sand-bot{animation:fillBot 9s linear infinite}
.stream{animation:flow .5s linear infinite,streamVis 9s linear infinite}
@keyframes flip{0%,82%{transform:rotate(0)}96%,100%{transform:rotate(180deg)}}
@keyframes drainTop{0%{transform:translateY(4px)}80%,100%{transform:translateY(34px)}}
@keyframes fillBot{0%{transform:translateY(34px)}80%,100%{transform:translateY(4px)}}
@keyframes flow{to{stroke-dashoffset:-5}}
@keyframes streamVis{0%,79%{opacity:.9}81%,100%{opacity:0}}
.js .hg-wrap{opacity:0;animation:fadeUp .9s 2.6s var(--ease) forwards}

/* marquee */
.marquee{width:calc(100% + 40px);margin:16px -20px 0;overflow:hidden;border-block:1px solid rgba(200,169,106,.22);background:linear-gradient(90deg,rgba(200,169,106,.03),rgba(200,169,106,.09),rgba(200,169,106,.03));padding:9px 0;
 -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 26s linear infinite}
.mq-track span{white-space:nowrap;font-family:"Varela Round","Rubik",sans-serif;font-size:14px;letter-spacing:.03em;color:var(--gold2)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(50%)}}
.js .marquee{opacity:0;animation:fadeUp .9s 2.4s var(--ease) forwards}

/* link cards */
.links{width:100%;display:flex;flex-direction:column;gap:13px;margin-top:22px}
.btn{position:relative;display:flex;align-items:center;gap:14px;min-height:76px;padding:13px 16px 13px 14px;border-radius:20px;text-decoration:none;color:var(--cream);text-align:right;
 background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border:1px solid rgba(200,169,106,.42);
 box-shadow:0 10px 24px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;isolation:isolate;
 transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(232,211,160,.16) 50%,transparent 70%);background-size:250% 100%;background-position:130% 0;z-index:-1;transition:background-position .9s var(--ease)}
.btn:active{transform:scale(.97)}
@media (hover:hover){.btn:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 18px 30px -16px rgba(0,0,0,.7),0 0 0 1px rgba(200,169,106,.25),inset 0 1px 0 rgba(255,255,255,.08)}
 .btn:hover::before{background-position:-30% 0}
 .btn:hover .ico{transform:rotate(-8deg) scale(1.08)}
 .btn:hover .arr{transform:translateX(-5px)}}
.btn:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.btn .ico{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--gold);background:rgba(200,169,106,.12);border:1px solid rgba(200,169,106,.35);transition:transform .35s var(--spring)}
.btn .ico svg{width:23px;height:23px}
.btn .txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.btn .t{font-family:"Varela Round","Rubik",sans-serif;font-size:18px;line-height:1.3}
.btn .s{font-size:13.5px;line-height:1.35;color:rgba(247,241,230,.68)}
.btn .arr{flex:none;width:20px;height:20px;color:var(--gold);opacity:.85;transition:transform .3s var(--ease)}
.btn.primary{color:var(--navy);border:none;background:linear-gradient(135deg,#E9D6A6 0%,#C8A96A 48%,#B08F52 100%);box-shadow:0 14px 30px -12px rgba(200,169,106,.6),inset 0 1px 0 rgba(255,255,255,.5);min-height:86px}
.btn.primary .t{font-size:19.5px;color:var(--navy)}
.btn.primary .s{color:rgba(31,42,68,.78)}
.btn.primary .ico{background:var(--navy);color:#E9D6A6;border:none}
.btn.primary .arr{color:var(--navy)}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:sweep 4.5s 3s ease-in-out infinite;z-index:1;pointer-events:none}
@keyframes sweep{0%{left:-60%}35%,100%{left:130%}}
.btn.primary.in{animation:glowPulse 3.2s 1.2s ease-in-out infinite}
@keyframes glowPulse{0%,100%{box-shadow:0 14px 30px -12px rgba(200,169,106,.6),inset 0 1px 0 rgba(255,255,255,.5)}50%{box-shadow:0 14px 38px -8px rgba(232,211,160,.85),inset 0 1px 0 rgba(255,255,255,.5)}}
.ripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(255,248,225,.55);pointer-events:none;animation:ripple .6s ease-out forwards;z-index:2}
.btn.primary .ripple{background:rgba(31,42,68,.25)}
@keyframes ripple{to{transform:scale(40);opacity:0}}

/* scroll reveal: odd cards from the right, even from the left */
.js .rv{opacity:0;transform:translateX(56px);filter:blur(4px);transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease)}
.js .links .rv:nth-child(even){transform:translateX(-56px)}
.js .rv .ico{transform:scale(.4) rotate(-40deg)}
.js .rv.in,.js .links .rv.in:nth-child(even),.js .mkt .rv.in:nth-child(even){opacity:1;transform:none;filter:none}
.js .rv.in .ico{transform:none;transition:transform .7s var(--spring) .25s}
.js .foot.rv{transform:translateY(24px)}
.js .foot.rv.in{transform:none}

.foot{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:8px}
.wa{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--gold);border:1px solid rgba(200,169,106,.5);background:rgba(200,169,106,.08);transition:transform .3s var(--spring)}
.wa::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--gold);animation:ring 2.6s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
.wa:active{transform:scale(.92)}
@media (hover:hover){.wa:hover{transform:scale(1.08)}}
.wa svg{width:26px;height:26px}
.tel{color:var(--cream);text-decoration:none;font-size:17px;letter-spacing:.06em;unicode-bidi:isolate}
.sig{margin-top:6px;font-size:12.5px;line-height:1.5;color:rgba(247,241,230,.55);max-width:300px}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:360px){.btn .t{font-size:16.5px}.btn.primary .t{font-size:18px}.hook{font-size:20px}h1{font-size:30px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
 .js .rv,.js .from-r,.js .from-l,.js .line,.js .hg-wrap,.js .marquee,.js .logo-wrap,.js .letters .ch,.js .rv .ico{opacity:1!important;transform:none!important;filter:none!important}
 .js .ring-a{stroke-dashoffset:0}.glint,.caret,.dust{display:none}}

/* marketing section (hidden until approved) */
.mkt[hidden]{display:none!important}
.mkt{width:100%;margin-top:38px;padding:26px 18px 22px;border-radius:26px;text-align:right;position:relative;
 background:linear-gradient(180deg,rgba(247,241,230,.07),rgba(247,241,230,.02));border:1px solid rgba(200,169,106,.35)}
.mkt::before{content:"";position:absolute;top:-1px;right:24px;left:24px;height:1px;background:linear-gradient(90deg,transparent,var(--gold2),transparent);background-size:200% 100%;animation:shimmer 4s linear infinite}
.eyebrow{font-size:12.5px;letter-spacing:2px;color:var(--gold);font-weight:500;text-align:center}
.mkt h2{font-family:"Varela Round","Rubik",sans-serif;font-weight:400;font-size:27px;line-height:1.25;margin-top:6px;text-align:center}
.mkt-lead{margin-top:10px;font-size:16px;line-height:1.55;color:rgba(247,241,230,.85);text-align:center}
.mkt-list{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.mkt-list li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.mkt-list b{color:var(--gold);font-weight:400;font-size:13px;margin-top:3px;flex:none}
.steps{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px;position:relative;padding-right:4px}
.steps::before{content:"";position:absolute;right:21px;top:18px;bottom:18px;width:1px;background:linear-gradient(var(--gold),rgba(200,169,106,.15))}
.steps li{display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.4;position:relative}
.steps .num{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:"Varela Round","Rubik",sans-serif;color:var(--navy);background:linear-gradient(135deg,#E9D6A6,#C8A96A 55%,#B08F52);box-shadow:0 6px 14px -6px rgba(200,169,106,.6)}
.mkt-cta{margin-top:22px}
.js .mkt .rv:nth-child(even){transform:translateX(-56px)}