:root{
  --accent:#ffffff;
  --bg-body:#0b0d12;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg-body);color:#e6ecf3;font:16px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}
a.back{position:fixed;left:12px;top:10px;color:#4e4e4e;text-decoration:none;opacity:.85;z-index:50}
.no-scroll{overflow:hidden}

.boot{ position:fixed; inset:0; background:#000; display:grid; place-items:center; z-index:40; }
.power{ width:min(160px,22vw); height:auto; transition:transform .18s ease, filter .18s ease; filter:drop-shadow(0 8px 24px rgba(0,0,0,.6)); }
.power:hover{ transform:scale(1.06); }
.power:active{ transform:scale(.98); }

.hero{ min-height:100vh; display:grid; place-items:center; gap:28px; position:relative; background:#000; transition:background-color 1.6s ease; }
.hero-logo{ width:min(780px,70vw); height:auto; opacity:0; transition:opacity 1.6s ease, transform 1.2s ease; transform:translateY(6px) scale(.995); }
.hero.on{ background:#fff; }
.hero.on .hero-logo{ opacity:1; transform:translateY(0) scale(1); }

.slider{ width:min(520px,72vw); height:28px; position:relative; user-select:none; touch-action:none; opacity:0; transition:opacity .8s ease .6s; }
.hero.on .slider{ opacity:1; }
.slider .track{ position:absolute; left:0; right:0; top:50%; height:4px; background:#000; transform:translateY(-50%); border-radius:999px; }
.slider .thumb{ position:absolute; top:50%; left:0; width:22px; height:22px; border-radius:50%; background:#cfcfcf; border:2px solid #1a1a1a; transform:translate(-50%,-50%); transition:transform .05s ease; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.slider .thumb:active{ transform:translate(-50%,-50%) scale(.96); }

.container{max-width:none;width:min(1800px,96vw);margin:0 auto;padding:48px clamp(18px,4vw,48px) 100px;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px);align-items:center;margin:clamp(80px,10vw,160px) 0;}
.row.reverse{grid-template-columns:1fr 1fr;}
.row.center-last{ grid-template-columns:1fr; text-align:center; }
.col.alone{ max-width:680px; margin:0 auto; }

.title{ font-weight:800; font-size:clamp(22px,2.4vw,32px); margin:0 0 8px; color:var(--accent); }
p{ margin:0; color:#d9e1ea; }

.img-fit{ display:block; width:100%; height:auto; border-radius:var(--radius); }
.cycle-wrap{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; }
.cycle-ghost{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; opacity:0; transform:scale(1.003); transition:opacity .7s ease, transform .7s ease; border-radius:inherit; }
.cycle-ghost.is-on{ opacity:1; transform:scale(1); }

.btn-primary{ margin-top:22px; display:inline-block; padding:14px 28px; border-radius:14px; border:none; color:#0b0d12; background:var(--accent); font-weight:800; letter-spacing:.2px; cursor:pointer; box-shadow:0 12px 28px rgba(0,0,0,.25); transition:transform .15s ease, filter .15s ease; }
.btn-primary:hover{ transform:translateY(-1px) scale(1.02); filter:saturate(1.05); }
.btn-primary:active{ transform:translateY(0) scale(.99); }

.modal{ position:fixed; inset:0; background:rgba(0,0,0,.62); display:none; align-items:center; justify-content:center; z-index:60; }
.modal.show{ display:flex; }
.modal video{ max-width:92vw; max-height:88vh; display:block; border-radius:16px; object-fit:contain; background:transparent; }

/* Center hero content perfectly */
.hero{ position:relative; }
.hero-inner{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(900px,92vw); display:grid; gap:28px; justify-items:center; }

/* Stable frames for media so layout doesn't jump */
.media .frame{ position:relative; width:100%; aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; background:#0b0d12; box-shadow:0 8px 28px rgba(0,0,0,.3) inset; }
.media .frame .cycle-wrap{ position:absolute; inset:0; display:block; border-radius:inherit; overflow:hidden; }
.media .frame .img-fit,
.media .frame .cycle-ghost{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.row .text{max-width:720px}

@media (max-width: 860px){
  .row, .row.reverse{ grid-template-columns:1fr; gap:22px; }
  .row .media{ order:0; }
  .row .text{ order:1; max-width:100%; }
  .container{ padding-left:clamp(14px,5vw,28px); padding-right:clamp(14px,5vw,28px); }
  .media .frame{ aspect-ratio:16/9; } /* mobile looks better in 16:9 */
}