:root{
  --void:#0B0907; --bone:#EDE6DD; --mute:#9A8B7D;
  --epoxy:#2E8BFF; --turq:#41D3D6; --amber:#C98A44; --walnut:#7B5038;
  --display:'Krona One',sans-serif; --serif:'Instrument Serif',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif; --ar:'Noto Kufi Arabic',system-ui,sans-serif;
  --out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--void);color:var(--bone);font-family:var(--sans);font-weight:400;overflow:hidden;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;min-height:100svh}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}

#flow{position:fixed;inset:0;width:100%;height:100%;display:block}
.vignette{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 35%,rgba(11,9,7,.55) 75%,rgba(11,9,7,.92) 100%),
             linear-gradient(to top,rgba(11,9,7,.85),transparent 38%)}
.grain{position:fixed;inset:-50%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

.top{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;
  padding:max(calc(var(--pad) * .7),env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right)) calc(var(--pad) * .7) max(var(--pad),env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);letter-spacing:.14em;font-size:14px}
.brand img{width:36px;height:36px;object-fit:contain}

.stage{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:0 max(var(--pad),env(safe-area-inset-right)) 0 max(var(--pad),env(safe-area-inset-left));pointer-events:none}
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);margin-bottom:2vh}
.word{font-family:var(--display);font-weight:400;font-size:clamp(56px,min(21vw,30vh),360px);line-height:.9;letter-spacing:-.03em;
  display:flex;gap:.02em;overflow:hidden;padding-bottom:.04em}
.word span{display:inline-block;transform:translateY(105%);animation:rise 1.4s var(--out) forwards;animation-delay:var(--d)}
.line{font-family:var(--serif);font-size:clamp(22px,3.6vw + 12px,58px);line-height:1.05;margin-top:2.2vh}
.line em{font-style:italic;background:linear-gradient(90deg,var(--epoxy),var(--turq));-webkit-background-clip:text;background-clip:text;color:transparent}
.line-ar{font-family:var(--ar);font-weight:300;font-size:clamp(16px,1.6vw,22px);color:var(--mute);margin-top:1.2vh;align-self:flex-start}

.bottom{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;padding:var(--pad) max(var(--pad),env(safe-area-inset-right)) max(var(--pad),env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left))}
.soon{display:flex;flex-direction:column;gap:12px;min-width:min(260px,44vw)}
.soon__label{font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.soon__bar{position:relative;height:1px;background:rgba(237,230,221,.18);overflow:hidden}
.soon__bar b{position:absolute;inset:0;width:38%;background:linear-gradient(90deg,transparent,var(--turq),transparent);animation:sweep 3.2s var(--out) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(270%)}}

.contact{display:grid;place-items:center;text-align:center;width:clamp(132px,13vw,184px);aspect-ratio:1;border-radius:50%;
  background:var(--bone);color:var(--void);font-weight:500;font-size:14px;line-height:1.25;padding:18px;
  transition:transform .5s var(--out),background .4s}
.contact small{display:block;font-size:10px;letter-spacing:.04em;color:#5a4a3d;margin-top:6px;white-space:nowrap}
@media (hover:hover){.contact:hover{background:var(--turq)}}
.contact:active{background:var(--turq)}
.contact:focus-visible{outline:2px solid var(--turq);outline-offset:6px}

.reveal{opacity:0;transform:translateY(16px);animation:fade 1.2s var(--out) forwards;animation-delay:var(--d)}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1;transform:none}}

@media (max-width:640px){
  .stage{justify-content:flex-start;padding-top:22svh}
  .bottom{align-items:center;gap:16px}
  .soon{min-width:0;flex:1}
  .contact small{font-size:9px}
}
@media (max-height:520px) and (orientation:landscape){
  .stage{justify-content:center;padding-top:0;padding-bottom:10vh}
  .word{font-size:clamp(48px,24vh,200px)}
  .eyebrow{margin-bottom:1vh;font-size:10px}
  .line{margin-top:1vh}
  .line-ar{display:none}
  .bottom{padding-top:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .contact{width:104px;font-size:12px;padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .word span,.reveal{animation:none;transform:none;opacity:1}
  .grain,.soon__bar b{animation:none}
}