/* Montserrat (self-hosted) */
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-VariableFont_wght.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:#EEF1F7;
  background:#000001; /* near-black */
}
::selection{ background: var(--c2); color:#000001 }

/* ===== Palette (logo-inspired; JS morphs these) ===== */
:root{
  --c1:#f1b8d0; /* pink */
  --c2:#cbb7ff; /* lilac */
  --c3:#c9f3d7; /* mint */
  --c4:#9ecbff; /* sky */

  --text:#EEF1F7; --muted:#C6CBDC;

  --grad-hero:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4));
  --grad-accent:linear-gradient(90deg,var(--c4),var(--c2),var(--c1));
  --panel:#0a0b16; --panel-2:#121333;
  --r:16px;
}

/* ===== Blurred lights + 65% overlay ===== */
.bg-wrap{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:#000001; }
.bg-wrap::after{ content:""; position:absolute; inset:0; background:#000; opacity:.65; z-index:2; pointer-events:none; }

.light{
  position:absolute; border-radius:50%;
  filter:blur(190px); mix-blend-mode:screen; opacity:.58;
  transform:translate(-50%,-50%);
  will-change:transform,background,opacity,filter;
  transition:background 5s ease; z-index:1;
}
.l1{ top:16%; left:76%; width:980px; height:980px;
  background:radial-gradient(circle at 45% 45%, var(--c4), var(--c2) 45%, transparent 65%);
  animation:floatA 26s ease-in-out infinite;
}
.l2{ top:74%; left:22%; width:1120px; height:1120px; opacity:.34;
  background:radial-gradient(circle at 30% 30%, var(--c1), var(--c3) 42%, transparent 68%);
  animation:floatB 30s ease-in-out infinite;
}
.l3{ top:96%; left:88%; width:820px; height:820px; opacity:.26;
  background:radial-gradient(circle at 50% 50%, var(--c1), var(--c4) 40%, transparent 70%);
  animation:floatC 28s ease-in-out infinite;
}
@keyframes floatA{0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}50%{transform:translate(-50%,-50%) translate3d(90px,-50px,0) scale(1.06)}}
@keyframes floatB{0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}50%{transform:translate(-50%,-50%) translate3d(-100px,35px,0) scale(1.07)}}
@keyframes floatC{0%,100%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1)}50%{transform:translate(-50%,-50%) translate3d(55px,65px,0) scale(1.05)}}

.grain{
  position:absolute; inset:-120%; opacity:.45; mix-blend-mode:overlay; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  animation:grain 18s linear infinite;
}
@keyframes grain{from{transform:translate3d(0,0,0)}to{transform:translate3d(-10%,-10%,0)}}

/* ===== HERO (solo on load) ===== */
.no-scroll{ overflow: hidden; }        /* lock scroll initially */
.show-content{ overflow-y: auto; }     /* enable after reveal */

.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:clamp(24px,6vw,64px)}
.hero-inner{width:min(1100px,92vw)}
.hero-title{
  margin:0 0 .4rem; font-weight:800; line-height:1.06;
  font-size:clamp(2.4rem,7.8vw,5.2rem);
  background:var(--grad-hero); background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 34px rgba(0,0,0,.5);
  transition:background 5s ease;
}
.hero-tag{
  margin:.2rem 0 .8rem; font-weight:700; letter-spacing:.3px;
  font-size:clamp(1.05rem,3.8vw,1.7rem);
  background:var(--grad-accent); background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(0,0,0,.35);
  transition:background 5s ease;
}
.hero-sub{
  margin:.2rem auto 1.6rem; max-width:52ch; color:#C9CEE0;
  font-weight:500; font-size:clamp(.98rem,2.8vw,1.05rem);
}

/* Arrow button: circle + perfectly centered white chevron */
.scroll-prompt{
  position:relative; border:none; background:transparent; cursor:pointer;
  display:inline-grid; place-items:center; width:110px; height:110px;
}
.scroll-prompt .ring{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));
  opacity:.28; filter:saturate(1.1);
}
.scroll-prompt .chev{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:44px; height:32px; display:block;
}
.scroll-prompt:focus-visible{ outline:3px solid var(--c2); outline-offset:6px; }

/* ===== CONTENT (hidden initially → slide/fade in) ===== */
.content-wrap{
  opacity:0; transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
  padding: 0 clamp(16px,5vw,60px) 56px;
}
.show-content .content-wrap{ opacity:1; transform:none; }

/* Narrative panel */
.panel{
  width:min(980px,92vw);
  margin: clamp(18px,3vw,30px) auto;
  background: linear-gradient(180deg, rgba(7,9,16,.92), rgba(7,9,16,.64));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r);
  padding: clamp(18px,3.2vw,28px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.45), 0 10px 32px rgba(0,0,0,.6);
}
.prose .lede{
  margin:0 0 .85rem; line-height:1.85; color:#DDE1F3; font-size:clamp(1.02rem,2.9vw,1.12rem);
}
.divider{
  height:2px; width:100%; margin:.6rem 0 .8rem;
  background: linear-gradient(90deg, transparent, var(--c2), var(--c3), var(--c4), transparent);
  opacity:.35; border-radius:999px;
}
.impact-list{ list-style:none; margin:.25rem 0 .75rem; padding:0; }
.impact-list li{ display:flex; gap:.6rem; align-items:flex-start; margin:.3rem 0; line-height:1.8; }
.impact-list .dot{
  flex:0 0 10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, var(--c1), var(--c2));
  margin-top:.52rem;
}
.italic{ font-style:italic; color:#D6DBEE; }
.accent-line{
  margin:.5rem 0 0; font-weight:800; letter-spacing:.3px;
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Subscribe — inline on desktop, stacked on mobile */
.subscribe{ text-align:center; }
.subscribe-form{
  display:flex; gap:.8rem; justify-content:center; align-items:center; flex-wrap:nowrap;
}
.subscribe-form input[type="email"]{
  flex:1 1 420px; min-width:min(420px, 70vw);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:#0d1025; color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px 16px; outline:none;
  transition:border-color .25s, box-shadow .25s, background .25s;
  height:52px; font-size:1rem;
}
.subscribe-form input[type="email"]::placeholder{ color:#9aa2bd; }
.subscribe-form input[type="email"]:focus{
  border-color: var(--c2);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--c2) 28%, transparent);
  background:#12143a;
}

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:0 22px; height:52px; border-radius:12px; border:none; cursor:pointer;
  color:#000001; font-weight:800;
  background: var(--grad-hero); background-size:220% 100%;
  transition: transform .06s ease, filter .2s ease, background 5s ease;
  white-space:nowrap;
}
.btn:hover{ background-position:100% 0; filter:brightness(1.05); }
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-glow{
  position:absolute; inset:-2px; border-radius:inherit;
  background: radial-gradient(60% 60% at 50% 50%, var(--c2), transparent 70%);
  filter: blur(16px); opacity:.35; z-index:-1;
}
.fine-print{ margin:.6rem 0 0; color:var(--muted); font-size:.9rem; }

/* Footer */
.footer{ text-align:center; color:var(--muted); font-size:.95rem; padding:22px 0 6px; }
.footer .credit a{ color: var(--c2); text-decoration:none; font-weight:700; }

/* Responsive */
@media (max-width:780px){
  .subscribe-form{ flex-direction:column; align-items:stretch; }
  .subscribe-form input[type="email"]{ min-width:0; width:100%; }
  .btn{ width:100%; }
  .hero-title{ font-size:clamp(2rem, 10vw, 3.2rem); }
}