/* ========== Base / Tokens ========== */
* { box-sizing: border-box; }
:root{
  --text:#ffffff;
  --text-dim:#cfcfe6;
  --neon:#39FF14;
  --yellow:#FFD600;
  --purple-dk:#24003a;
  --purple-md:#531b9e;
  --purple-lg:#7a2bdb;
  --green-a:#00ffa3;
  --green-b:#00d37f;
  --green-c:#39ff14;

  /* Monitor screen window (tuned for your PNG) */
  --screen-left:7.5%;
  --screen-top:12.5%;
  --screen-w:58%;
  --screen-h:52.5%;
  --screen-pad:5%;
  --screen-bg:#0f1116; /* dark gray */
}

html, body{ height:100%; }
body{
  margin:0;
  font-family:'Satoshi',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  color:var(--text);
  background:#000;
  overflow:hidden;
}

/* ========== Background layers ========== */
.bg-layer{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  display:block; z-index:0;
}
#liquid{ opacity:.40; pointer-events:none; }
#stars { opacity:.40; pointer-events:none; }

/* ========== Hero layout (desktop default) ========== */
.hero{
  position:relative; z-index:1;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(360px,1.05fr) minmax(420px,.95fr);
  align-items:center;
  gap:clamp(24px,5vw,64px);
  padding:clamp(16px,3vw,32px);
  max-width:1360px;            /* wider so the monitor can breathe */
  margin:0 auto;
}

.hero-copy{ max-width:640px; }
.hero-copy h1{
  font-weight:800;
  color: #ffeac1;
  font-size:clamp(26px,4.5vw,52px);
  line-height:1.18;
  letter-spacing:.1px;
  margin:0 0 24px;
  text-wrap:balance;
  text-shadow:0 0 18px rgba(0,0,0,.65);
}

/* ========== CTA ========== */
.cta{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; letter-spacing:.5px; font-size:15px;
  padding:14px 28px; border-radius:9999px; text-decoration:none;
  background:linear-gradient(135deg,#1a002b 0%,#280042 50%,#004d26 100%);
  background-size:300% 300%; animation:ctaFlow 9s ease-in-out infinite;
  border:2px solid transparent; background-clip:padding-box;
  color:#d6a6ff; text-shadow:0 0 8px rgba(214,166,255,.45);
  transition:all .28s ease; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.cta::before{
  content:""; position:absolute; inset:0; padding:2px; border-radius:inherit;
  background:linear-gradient(270deg,#56FFAA,#AA5EFF,#56FFAA);
  background-size:400% 400%; animation:borderFlow 6s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.cta svg{ width:22px; height:22px; flex-shrink:0; fill:currentColor; transition:transform .28s ease; position:relative; top:1px; }
.cta:hover,.cta:active{
  background:linear-gradient(135deg,var(--green-a) 0%,var(--green-b) 50%,var(--green-c) 100%);
  background-size:220% 220%;
  color:#003300;
  box-shadow:0 12px 30px rgba(0,0,0,.42),0 0 22px rgba(57,255,20,.45);
}
.cta:hover svg,.cta:active svg{ transform:translateX(3px); }

/* BUY button variant */
.cta.cta-primary{
  background:linear-gradient(135deg,var(--green-a) 0%,var(--green-b) 50%,var(--green-c) 100%);
  background-size:220% 220%; color:#061a0f; text-shadow:none; animation:none;
}
.cta.cta-primary:hover,.cta.cta-primary:active{
  background:linear-gradient(135deg,#140022 0%,#220038 50%,#002815 100%);
  background-size:300% 300%; color:#d6a6ff;
  box-shadow:0 12px 30px rgba(0,0,0,.42),0 0 22px rgba(170,94,255,.45);
}
.cta.cta-primary:hover,.cta.cta-primary:active{ color:var(--green-c)!important; }
.cta.cta-primary:hover .label,
.cta.cta-primary:active .label,
.cta.cta-primary:hover svg,
.cta.cta-primary:active svg{ color:var(--green-c)!important; fill:var(--green-c)!important; }

@keyframes ctaFlow{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes borderFlow{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

@media (prefers-reduced-motion:reduce){ .cta,.cta::before{ animation:none; } }

/* ========== Visual mount container ========== */
.hero-visual{ width:100%; display:grid; place-items:center; }

/* CTA pair */
.cta-group{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
@media (max-width:900px){ .cta-group{ flex-direction:column; align-items:flex-start; } }
.cta-group .cta{ margin-top:0; }

/* Accessible focus ring */
.cta:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,0,0,.6),0 0 0 5px rgba(170,94,255,.85); }

/* --- Monitor layout ------------------------------------ */
/* Bigger on desktop; still bounded by viewport height to prevent overlap */
.monitor-wrap{
  position:relative;
  /* min 320px, typical up to ~46vw, also bound by 54vh; hard cap 640px */
  width:clamp(320px, min(46vw, 54vh), 640px);
  aspect-ratio:1 / 1;
}
.monitor-overlay{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; z-index:2; pointer-events:none;
}
.monitor-screen{
  position:absolute;
  left:var(--screen-left); top:var(--screen-top);
  width:var(--screen-w); height:var(--screen-h);
  background:var(--screen-bg);
  overflow:hidden; z-index:1; border-radius:16px;
}
.monitor-inset{ position:absolute; inset:var(--screen-pad); border-radius:inherit; overflow:hidden; }
.monitor-inset #capsule-mount,
.monitor-inset #capsule-mount canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* Soft floating shadow under the monitor */
.monitor-wrap::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-2%;
  height:10%; filter:blur(16px);
  background:radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.45), transparent 70%);
  z-index:0;
}

/* ====== RESPONSIVE TUNING ====== */

/* Medium desktops / narrow laptops */
@media (max-width:1200px){
  .hero{
    grid-template-columns:1.1fr .9fr;
    gap:clamp(20px,4vw,48px);
  }
  .monitor-wrap{
    width:clamp(300px, min(42vw, 50vh), 600px);
  }
}

/* Square-ish windows (split screen, tablets landscape) */
@media (max-aspect-ratio:1/1){
  .monitor-wrap{ width:clamp(280px, min(40vw, 48vh), 560px); }
  .hero-copy h1{ font-size:clamp(24px,4vw,48px); }
}

/* ===== Mobile ===== */
@media (max-width:900px){
  body{ overflow:auto; }

  /* Remove the forced viewport height to kill the big vertical gap */
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:clamp(10px, 2vh, 16px);
    padding:16px 18px max(20px, env(safe-area-inset-bottom));
  }

  .hero-visual{
    order:-1;
    display:grid; place-items:center;
    margin-bottom:8px;            /* tighter join to the headline */
    transform:none;               /* no vertical offset */
  }

  .hero-copy{ max-width:640px; margin-top:0; }
  .hero-copy h1{
    text-align:left;
    font-size:clamp(24px, 6vw, 32px);
    line-height:1.18;
    margin:0 0 12px;
  }

  .cta{ margin-top:14px; }

  /* Size monitor generously on phones, but still height-bounded */
  .monitor-wrap{ width:clamp(280px, min(84vw, 44vh), 560px); }

  :root{ --screen-pad:6%; } /* slight breathing room on phones */
}

/* Short-height phones */
@media (max-width:900px) and (max-height:680px){
  .hero-copy h1{ font-size:clamp(22px, 5vw, 28px); line-height:1.14; }
}

/* Very tall phones */
@media (max-width:900px) and (min-height:860px){
  .hero{ gap:clamp(12px, 1.6vh, 20px); }
}

/* XL screens */
@media (min-width:1600px){
  .hero{ max-width:1480px; }
  .monitor-wrap{ width:clamp(360px, min(44vw, 56vh), 680px); }
}