:root { --bg:#040912; --ink:#f1f2ef; --teal:#2fb9bc; --gold:#ffb71b; --dim:#70808f; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); }
body { font-family:Arial,Helvetica,sans-serif; color:var(--ink); }

.kinetic-page { position:relative; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto auto; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 72% 50%,#0c1b28 0,#07101a 28%,var(--bg) 65%); }
.texture { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.kinetic-page::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:84px 84px; mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 85%,transparent); }
.beam { position:absolute; z-index:1; width:1px; height:54vh; left:4.6vw; top:25%; background:linear-gradient(180deg,transparent,var(--teal) 20%,var(--gold) 78%,transparent); box-shadow:0 0 18px rgba(47,185,188,.3); }

.topline { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; padding:26px clamp(24px,5vw,72px); opacity:0; animation:drop .8s .2s ease forwards; }
.logo { width:116px; height:auto; margin:8px 0 0 8px; }
.launch-status { margin-top:17px; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.58); }
.region { justify-self:end; margin-top:14px; display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.45); font-size:10px; letter-spacing:.28em; }
.region i { width:28px; height:1px; background:rgba(255,255,255,.2); }
.region-dot { width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal); animation:pulse 1.5s infinite; }

.kinetic-stage { position:relative; width:min(1220px,88vw); margin:auto; display:grid; grid-template-columns:1fr; align-items:center; padding:2vh 0 4vh; }
.side-copy { position:absolute; left:-82px; top:50%; transform:translateY(-50%) rotate(180deg); display:flex; align-items:center; gap:18px; color:rgba(255,255,255,.28); font-size:11px; letter-spacing:.22em; }
.side-copy span { writing-mode:vertical-rl; white-space:nowrap; }
.copy-block { position:relative; z-index:2; }
.word-window { position:relative; height:clamp(190px,27vw,365px); overflow:hidden; }
.statement { position:absolute; inset:48px 0 -48px; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(65%); animation:statementCycle 9s cubic-bezier(.77,0,.18,1) infinite; }
.statement-two { animation-delay:3s; }
.statement-three { animation-delay:6s; }
.statement span { display:block; line-height:.82; letter-spacing:-.065em; white-space:nowrap; }
.verb { font-size:clamp(70px,9.5vw,146px); font-weight:200; color:var(--ink); }
.object { font-size:clamp(82px,11.8vw,180px); font-weight:500; }
.statement .object { color:transparent; -webkit-text-stroke:1px var(--teal); text-shadow:0 0 28px rgba(47,185,188,.08); }

.launch-lockup { margin-top:clamp(18px,3vh,34px); display:flex; align-items:center; gap:22px; opacity:0; animation:rise .8s 1.15s ease forwards; }
.arrow-line { width:clamp(70px,9vw,130px); height:1px; background:linear-gradient(90deg,var(--teal),var(--gold)); position:relative; }
.arrow-line::after { content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid var(--gold); border-right:1px solid var(--gold); transform:rotate(45deg); }
.launch-lockup p { margin:0; }
.era { color:rgba(255,255,255,.45); font-size:9px; letter-spacing:.28em; }
.coming { margin-top:5px!important; color:var(--ink); font-size:16px; font-weight:300; letter-spacing:.2em; }
.coming b { color:var(--gold); font-weight:300; }

.kinetic-tagline { min-height:44px; display:flex; align-items:center; justify-content:center; gap:clamp(13px,2vw,30px); overflow:hidden; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); padding:12px 24px; color:rgba(255,255,255,.7); font-size:13px; letter-spacing:.34em; white-space:nowrap; }
.tag-word { display:inline-block; opacity:0; animation:tagSnap 5s cubic-bezier(.2,.8,.2,1) infinite; }
.tag-two { animation-delay:.16s; color:var(--teal); }.tag-three { animation-delay:.32s; }
.tag-pipe { color:var(--gold); font-style:normal; font-weight:300; opacity:0; animation:tagPipe 5s .25s ease infinite; }.pipe-two { animation-delay:.42s; }
footer { display:flex; justify-content:space-between; padding:18px clamp(24px,5vw,72px) 22px; color:rgba(255,255,255,.28); font-size:8px; letter-spacing:.22em; text-transform:uppercase; }
footer p { margin:0; }

@keyframes statementCycle { 0%{opacity:0;transform:translateY(60%);filter:blur(12px)} 7%,27%{opacity:1;transform:translateY(0);filter:blur(0)} 34%,100%{opacity:0;transform:translateY(-60%);filter:blur(10px)} }
@keyframes drop { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:none} }
@keyframes rise { from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:none} }
@keyframes pulse { 50%{opacity:.25;transform:scale(.7)} }
@keyframes tagSnap { 0%{opacity:0;transform:translateY(18px);filter:blur(6px)} 12%,72%{opacity:1;transform:translateY(0);filter:blur(0)} 84%,100%{opacity:0;transform:translateY(-18px);filter:blur(6px)} }
@keyframes tagPipe { 0%,8%{opacity:0;transform:scaleY(.2)} 18%,72%{opacity:1;transform:scaleY(1);text-shadow:0 0 10px var(--gold)} 84%,100%{opacity:0;transform:scaleY(.2)} }

@media(max-width:760px){
  .topline{grid-template-columns:1fr 1fr;padding:22px}.logo{width:96px;margin:6px 0 0 4px}.launch-status{display:none}.region{grid-column:2}.beam{left:11px;height:46vh}
  .kinetic-stage{width:86vw;grid-template-columns:1fr;padding:2vh 0 4vh}.side-copy{display:none}.copy-block{z-index:2}
  .word-window{height:275px}.statement{inset:30px 0 -30px;justify-content:center}.statement span{white-space:normal}.verb{font-size:60px}.object{font-size:72px;line-height:.9!important}
  .launch-lockup{gap:15px}.arrow-line{width:48px}.era{font-size:7px}.coming{font-size:12px}.kinetic-tagline{gap:10px;padding:11px 12px;font-size:10px;letter-spacing:.18em}footer{justify-content:center;text-align:center}footer p:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}.statement-one{opacity:1!important;transform:none!important}}

/* Mobile headline fitting */
@media (max-width: 760px) {
  .word-window {
    height: 285px;
  }

  .statement span {
    white-space: nowrap;
  }

  .verb {
    font-size: clamp(44px, 15vw, 60px);
  }

  .object {
    font-size: clamp(48px, 16vw, 72px);
  }

  .statement-two .object {
    font-size: clamp(34px, 10.8vw, 52px);
    letter-spacing: -0.045em;
  }
}

@media (max-width: 380px) {
  .verb {
    font-size: 44px;
  }

  .object {
    font-size: 50px;
  }

  .statement-two .object {
    font-size: 34px;
  }
}