/* ============================================================
   Visage — public pages (home, access, sign-in)
   Neutral near-black with a single acid-lime accent. No blue.
   ============================================================ */

:root{
  --bg:      #0a0a0b;
  --bg-2:    #101012;
  --bg-3:    #161619;
  --bg-4:    #1d1d21;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.055);
  --txt:     #f4f4f6;
  --txt-2:   #9a9aa3;
  --txt-3:   #63636c;
  --acc:     #d4ff3f;
  --acc-dim: #b6de2f;
  --danger:  #ff6b6b;
  --r:       14px;
  --r-sm:    10px;
  --sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.page{ overflow-x:hidden }

a{ color:inherit; text-decoration:none }

img,svg{ display:block; max-width:100% }

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.022em; line-height:1.12 }

p{ margin:0 0 1em }
p:last-child{ margin-bottom:0 }

.wrap{ width:100%; max-width:1160px; margin:0 auto; padding:0 24px }

.dim{ color:var(--txt-3) }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:var(--acc);
  color:#0a0a0b;
  font:inherit; font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  cursor:pointer;
  transition:transform .13s ease, background .13s ease, border-color .13s ease,
             color .13s ease, opacity .13s ease;
  white-space:nowrap;
}
.btn:hover{ background:#e2ff6b; transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }

.btn.ghost{
  background:transparent;
  color:var(--txt);
  border-color:var(--line);
}
.btn.ghost:hover{ background:var(--bg-3); border-color:rgba(255,255,255,.18); transform:none }

.btn.big{ padding:14px 26px; font-size:15.5px; border-radius:12px }
.btn.full{ width:100% }
.btn.light{ background:#fff; color:#0a0a0b }
.btn.light:hover{ background:#eaeaee }

.btn.dead{ background:var(--bg-3); color:var(--txt-3); cursor:not-allowed; pointer-events:none }

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line-2);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px }
.nav-r{ display:flex; align-items:center; gap:10px }

.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
}
.brand svg{ width:26px; height:26px; color:var(--acc); flex:none }

/* ---------------- hero ---------------- */
.hero{ position:relative; padding:96px 0 84px; overflow:hidden }
.hero.tight{ padding:70px 0 64px }

.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 18% -8%, rgba(212,255,63,.10), transparent 62%),
    radial-gradient(620px 460px at 92% 8%, rgba(212,255,63,.055), transparent 60%);
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(720px 480px at 30% 20%, #000, transparent 78%);
          mask-image:radial-gradient(720px 480px at 30% 20%, #000, transparent 78%);
}

.hero-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:60px; align-items:center;
}

.eyebrow{
  display:inline-block;
  margin-bottom:18px;
  font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc);
}

.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.35rem);
  letter-spacing:-.038em;
  line-height:1.02;
  margin-bottom:22px;
}

.lede{
  font-size:clamp(1.02rem, 1.7vw, 1.19rem);
  color:var(--txt-2);
  max-width:47ch;
  margin-bottom:30px;
}

.cta{ display:flex; flex-wrap:wrap; gap:12px }

.micro{ margin-top:20px; font-size:13.5px; color:var(--txt-3) }
.micro a{ color:var(--txt-2); border-bottom:1px solid var(--line); padding-bottom:1px }
.micro a:hover{ color:var(--acc); border-color:var(--acc) }

/* ---------------- hero artwork ---------------- */
.hero-art{ display:flex; justify-content:center }

.art-card{
  width:100%; max-width:420px;
  background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.art-top{
  display:flex; align-items:center; gap:7px;
  padding:12px 15px;
  border-bottom:1px solid var(--line-2);
  background:rgba(255,255,255,.015);
}
.art-dot{ width:8px; height:8px; border-radius:50%; background:var(--bg-4) }
.art-title{ margin-left:6px; font-size:11.5px; letter-spacing:.1em;
            text-transform:uppercase; color:var(--txt-3) }

.art-body{
  display:grid; grid-template-columns:1fr 116px; gap:12px;
  padding:16px;
}
.art-photo{
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line-2);
  background:#0f0f11;
}
.art-photo svg{ width:100%; height:auto }

.art-cam{
  display:flex; flex-direction:column;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line-2);
  background:#0f0f11;
}
.art-cam-h{
  padding:8px 10px; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-3);
  border-bottom:1px solid var(--line-2);
}
.art-cam-b{
  flex:1; min-height:110px;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(212,255,63,.13), transparent 70%);
}
.art-cam-b svg{ width:46px; height:46px }

.art-foot{
  display:flex; gap:8px; padding:0 16px 16px;
}
.art-pill{
  padding:4px 10px;
  border:1px solid var(--line); border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.03em;
  color:var(--txt-2);
}
.art-pill.rec{ color:#0a0a0b; background:var(--acc); border-color:var(--acc) }

/* ---------------- marquee strip ---------------- */
.strip{ border-block:1px solid var(--line-2); background:var(--bg-2) }
.strip-in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:16px; padding:16px 24px;
  font-size:13px; color:var(--txt-2); text-align:center;
}
.strip-in i{ width:3px; height:3px; border-radius:50%; background:var(--acc); flex:none }

/* ---------------- sections ---------------- */
.sect{ padding:92px 0 }
.sect.alt{ background:var(--bg-2); border-block:1px solid var(--line-2) }

.sect-h{ margin-bottom:44px; max-width:56ch }
.sect-h h2{ font-size:clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing:-.032em }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.step{
  padding:26px 24px 28px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.sect.alt .step{ background:var(--bg-3) }
.step .n{
  display:grid; place-items:center;
  width:32px; height:32px; margin-bottom:16px;
  border-radius:9px;
  background:var(--acc); color:#0a0a0b;
  font-size:14px; font-weight:700;
}
.step h3{ font-size:17px; margin-bottom:8px }
.step p{ font-size:14.5px; color:var(--txt-2); margin:0 }

/* cards */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
.cards .card{
  padding:28px 26px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.sect.alt .cards .card{ background:var(--bg-3) }
.cards .card h3{ font-size:19px; margin-bottom:10px }
.cards .card p{ font-size:14.5px; color:var(--txt-2) }

.tag{
  display:inline-block; margin-top:4px;
  padding:4px 11px; border-radius:999px;
  border:1px solid var(--line);
  font-size:11.5px; font-weight:600; letter-spacing:.03em;
  color:var(--txt-2);
}
.tag.alt{ border-color:rgba(212,255,63,.35); color:var(--acc) }

.feat{ list-style:none; margin:0 0 22px; padding:0 }
.feat li{
  position:relative; padding:8px 0 8px 26px;
  font-size:14.5px; color:var(--txt-2);
  border-bottom:1px solid var(--line-2);
}
.feat li:last-child{ border-bottom:0 }
.feat li::before{
  content:''; position:absolute; left:2px; top:15px;
  width:11px; height:6px;
  border-left:2px solid var(--acc); border-bottom:2px solid var(--acc);
  transform:rotate(-45deg);
}
.feat li.off{ color:var(--txt-3) }
.feat li.off::before{
  border:0; width:11px; height:2px; top:18px;
  background:var(--txt-3); transform:none;
}
.feat b{ color:var(--txt); font-weight:600 }

/* access */
.access{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:36px }
.access-copy p{ font-size:15.5px; color:var(--txt-2); max-width:52ch }
.access-list{ margin:22px 0 28px; padding:0; list-style:none; counter-reset:a }
.access-list li{
  counter-increment:a;
  position:relative; padding:12px 0 12px 46px;
  font-size:15px; color:var(--txt-2);
  border-top:1px solid var(--line-2);
}
.access-list li::before{
  content:counter(a);
  position:absolute; left:0; top:12px;
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:8px;
  background:var(--bg-3); border:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--acc);
}
.access-list b{ color:var(--txt) }

.access-side{ display:grid; gap:16px; align-content:start }
.side-card{
  padding:24px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.side-lab{
  display:block; margin-bottom:6px;
  font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt-3);
}
.side-num{ display:block; font-size:26px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px }
.side-card p{ font-size:13.5px; color:var(--txt-2); margin-bottom:18px }

/* band */
.band{ position:relative; padding:84px 0; background:var(--acc); color:#0a0a0b }
.band-in{ text-align:center }
.band h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); letter-spacing:-.034em; margin-bottom:10px }
.band p{ font-size:16px; color:rgba(10,10,11,.68); margin-bottom:28px }
.band .cta{ justify-content:center }
.band .btn{ background:#0a0a0b; color:var(--acc) }
.band .btn:hover{ background:#000 }
.band .btn.ghost.light{ background:transparent; color:#0a0a0b; border-color:rgba(10,10,11,.28) }
.band .btn.ghost.light:hover{ background:rgba(10,10,11,.07) }

/* ---------------- footer ---------------- */
.foot{ border-top:1px solid var(--line-2); background:var(--bg-2); padding-top:52px }
.foot-in{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px;
  padding-bottom:40px;
}
.foot-p{ margin-top:14px; font-size:13.5px; color:var(--txt-3); max-width:38ch }
.foot-cols{ display:flex; gap:56px }
.foot-cols h4{
  margin-bottom:12px;
  font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt-3);
}
.foot-cols a{ display:block; padding:5px 0; font-size:14px; color:var(--txt-2) }
.foot-cols a:hover{ color:var(--acc) }
.foot-legal{
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  padding-top:22px; padding-bottom:30px;
  border-top:1px solid var(--line-2);
  font-size:12.5px; color:var(--txt-3);
}
.foot-legal p{ margin:0; max-width:76ch }
.foot-legal b{ color:var(--txt-2); font-weight:600 }

/* ---------------- mail card (access page) ---------------- */
.mail-card{
  width:100%; max-width:430px;
  padding:24px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 40px 90px -55px rgba(0,0,0,.95);
}
.mail-h{
  margin:16px 0 6px;
  font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--txt-3);
}
.mail-h:first-child{ margin-top:0 }
.mail-to a{
  font-size:19px; font-weight:600; letter-spacing:-.015em;
  color:var(--acc); word-break:break-all;
}
.mail-to a:hover{ text-decoration:underline; text-underline-offset:3px }
.mail-sub{ font-size:14.5px; color:var(--txt) }
.mail-body{
  margin:0 0 20px; padding:16px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; line-height:1.7; color:var(--txt-2);
  white-space:pre-wrap; word-break:break-word;
}

/* ---------------- warn ---------------- */
.warn{
  margin-top:14px; padding:14px 16px;
  border:1px solid rgba(212,255,63,.22);
  border-left:3px solid var(--acc);
  border-radius:var(--r-sm);
  background:rgba(212,255,63,.05);
  font-size:13px; line-height:1.6; color:var(--txt-2);
}
.warn b{ display:block; margin-bottom:3px; color:var(--txt) }
.warn.wide{ margin-top:26px }

/* ---------------- auth ---------------- */
.auth-wrap{ display:grid; place-items:center; padding:70px 24px 90px }
.auth{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:56px; align-items:center;
  width:100%; max-width:900px;
}
.auth-copy h1{ font-size:clamp(2rem, 4vw, 2.7rem); letter-spacing:-.035em; margin-bottom:14px }
.auth-copy p{ font-size:15px; color:var(--txt-2); max-width:40ch }

.auth-card{
  padding:30px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 40px 90px -60px rgba(0,0,0,.95);
}

.auth-card .row{ margin-bottom:16px }
.auth-card label{
  display:block; margin-bottom:7px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--txt-2);
}
.auth-card input{
  width:100%;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--txt);
  font:inherit; font-size:15px;
  transition:border-color .13s ease, box-shadow .13s ease;
}
.auth-card input:focus{
  outline:none;
  border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(212,255,63,.14);
}

.auth-foot{
  margin-top:20px; padding-top:18px;
  border-top:1px solid var(--line-2);
  text-align:center;
}
.auth-foot a{ font-size:13.5px; color:var(--txt-3) }
.auth-foot a:hover{ color:var(--acc) }

.err{
  margin-bottom:18px; padding:12px 14px;
  border:1px solid rgba(255,107,107,.3);
  border-radius:var(--r-sm);
  background:rgba(255,107,107,.08);
  color:#ffb4b4;
  font-size:13.5px; line-height:1.55;
}
.err code{
  padding:1px 5px; border-radius:4px;
  background:rgba(0,0,0,.35);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
}

.ok{
  margin-bottom:18px; padding:12px 14px;
  border:1px solid rgba(212,255,63,.3);
  border-radius:var(--r-sm);
  background:rgba(212,255,63,.08);
  color:var(--acc);
  font-size:13.5px;
}

/* ---------------- centred notice (try-out cooldown) ---------------- */
body.center{ display:grid; place-items:center; min-height:100vh; padding:40px 24px }
.narrow{ max-width:520px; text-align:center }
.narrow h1{ font-size:clamp(1.8rem, 4vw, 2.4rem); letter-spacing:-.03em; margin-bottom:14px }
.narrow p{ color:var(--txt-2); font-size:15.5px }
.narrow .cta{ justify-content:center; margin-top:26px }
.narrow .micro{ margin-top:24px }
.narrow .micro a{ color:var(--txt-2); border-bottom:1px solid var(--line) }

.gate-ico{
  display:grid; place-items:center;
  width:56px; height:56px; margin:0 auto 22px;
  border-radius:16px;
  background:var(--bg-3); border:1px solid var(--line);
  color:var(--acc);
}
.gate-ico svg{ width:28px; height:28px }

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .hero-in{ grid-template-columns:1fr; gap:48px }
  .hero-art{ order:-1 }
  .access{ grid-template-columns:1fr; gap:32px }
  .auth{ grid-template-columns:1fr; gap:36px; max-width:440px }
  .auth-copy{ text-align:center }
  .auth-copy p{ margin-inline:auto }
}
@media (max-width:780px){
  .steps{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr }
  .sect{ padding:66px 0 }
  .hero{ padding:64px 0 58px }
  .foot-in{ grid-template-columns:1fr; gap:32px }
  .foot-cols{ gap:40px; flex-wrap:wrap }
}
@media (max-width:560px){
  body{ font-size:15px }
  .nav-in{ height:60px }
  .nav-r .btn{ padding:9px 15px; font-size:13.5px }
  .cta{ flex-direction:column; align-items:stretch }
  .cta .btn{ width:100% }
  .art-body{ grid-template-columns:1fr }
  .strip-in{ gap:10px; font-size:12.5px }
  .strip-in i{ display:none }
  .auth-card{ padding:24px }
}