/* ============================================================
   FIRMA AI: LANDING (new-design)
   Dark single page. Depends on tokens.css for brand, type and space.
   The particle field is drawn by assets/js/field.js.
   ============================================================ */

:root{
  /* Darker extensions of the brand teal, for the night palette. */
  --night-0:#030C0F;      /* page */
  --night-1:#06181D;      /* raised */
  --teal-glow:#5FB7C2;    /* particles, accents on dark */
  --teal-bright:#9FE3E8;  /* particles under the cursor */
  --on-night:#E9F3F4;
  --on-night-muted:rgba(233,243,244,.62);
  --night-line:rgba(159,227,232,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--on-night);background:var(--night-0);-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Cursor light ----------
   A soft teal glow that trails the pointer across the whole page.
   field.js writes --mx/--my; without JS it sits in the upper right. */
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(600px circle at var(--mx,70%) var(--my,30%),
    rgba(33,112,125,.22),transparent 60%)}

/* ---------- Header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:20;
  background:linear-gradient(to bottom,rgba(3,12,15,.85),rgba(3,12,15,0))}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo img{width:30px;height:30px}
.logo span{font-weight:600;font-size:19px;letter-spacing:-.01em}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;
  overflow:hidden;z-index:1}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
/* A grid item with margin:auto shrinks to fit; make the wrap span the row. */
.hero > .wrap{width:100%}
/* Keeps the copy readable where it overlaps the field. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,12,15,.85) 0%,rgba(3,12,15,.4) 34%,rgba(3,12,15,0) 52%),
             linear-gradient(to top,var(--night-0),transparent 22%)}
.hero-copy{position:relative;z-index:2;padding-top:110px;padding-bottom:var(--s9);max-width:620px}
.eyebrow{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-glow);margin-bottom:var(--s5)}
.hero h1{font-size:clamp(38px,5.2vw,66px);font-weight:600;line-height:1.06;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--teal-bright)}
.hero .lead{margin-top:var(--s5);font-size:var(--fs-lead);line-height:1.55;color:var(--on-night-muted);
  max-width:46ch}

/* ---------- Signup ---------- */
.notify{margin-top:var(--s7)}
.notify-label{display:block;font-size:var(--fs-small);color:var(--on-night);margin-bottom:var(--s3)}
.notify-field{display:flex;gap:6px;padding:6px;max-width:500px;border-radius:var(--r-pill);
  background:rgba(11,37,44,.7);border:1px solid var(--night-line);
  backdrop-filter:blur(10px);transition:border-color .2s,box-shadow .2s}
.notify-field:focus-within{border-color:rgba(159,227,232,.45);box-shadow:0 0 0 4px rgba(95,183,194,.12)}
.notify-field input{flex:1;min-width:0;border:0;background:transparent;color:var(--on-night);
  font-family:inherit;font-size:16px;padding:12px 18px}
.notify-field input::placeholder{color:rgba(233,243,244,.4)}
.notify-field input:focus{outline:none}
.form-status{margin-top:var(--s3);font-size:var(--fs-caption);color:#FFB4A8}
.form-status[hidden]{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);
  padding:12px 26px;font-family:var(--font-sans);font-size:var(--fs-small);font-weight:600;
  border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn-primary{background:var(--teal-bright);color:var(--night-0)}
.btn-primary:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--on-night);border-color:rgba(233,243,244,.3)}
.btn-ghost:hover{border-color:var(--on-night)}
.btn:disabled{opacity:.6;cursor:progress}

/* ---------- Footer ---------- */
.foot{position:relative;z-index:1;border-top:1px solid var(--night-line);padding:var(--s5) 0;
  font-size:var(--fs-caption);color:var(--on-night-muted)}
.foot .wrap{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.foot a{text-decoration:none;color:var(--on-night-muted)}
.foot a:hover{color:var(--on-night)}

/* ---------- Cookie consent ----------
   Banner injected by assets/js/consent.js. Accept and Reject share one size
   on purpose: refusing has to be as easy as agreeing. */
#cc{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:var(--night-1);
  border-top:1px solid var(--night-line);box-shadow:0 -8px 32px rgba(0,0,0,.4);
  transform:translateY(100%);transition:transform .28s ease}
#cc.on{transform:translateY(0)}
#cc .cc-inner{max-width:var(--maxw);margin:0 auto;padding:var(--s5) var(--gutter);
  display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
#cc .cc-text{flex:1 1 380px;min-width:0}
#cc .cc-text b{display:block;font-size:var(--fs-small);margin-bottom:6px}
#cc .cc-text p{font-size:var(--fs-caption);line-height:1.6;color:var(--on-night-muted);max-width:76ch}
#cc .cc-text a{color:var(--teal-bright);text-underline-offset:2px}
#cc .cc-actions{display:flex;gap:var(--s3);flex:0 0 auto}
#cc .cc-actions .btn{min-width:124px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  /* On narrow screens the field sits behind the copy, so dim it evenly. */
  .hero::after{background:linear-gradient(rgba(3,12,15,.45),rgba(3,12,15,.75)),
    linear-gradient(to top,var(--night-0),transparent 22%)}
}
@media(max-width:600px){
  .hero-copy{padding-top:120px}
  #cc .cc-inner{gap:var(--s4)}
  #cc .cc-actions{width:100%}
  #cc .cc-actions .btn{flex:1;min-width:0}
}
@media(max-width:420px){
  .notify-field{flex-direction:column;border-radius:var(--r-lg)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #cc{transition:none}
}