/* Nucleora — shared site styles */
:root{
  /* Near-blacks carry a little warmth so the page doesn't read as pure
     blue-black, which is the default of every dark template. */
  --bg: #0b0e14;
  --bg-soft: #10141c;
  --panel: #151a24;
  --panel-2: #1a212d;
  --border: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.055);
  --text: #e8ebf0;
  --text-dim: #a2abbb;
  --text-dimmer: #727d90;

  /* One signature colour. Everything else supports it rather than competing:
     the accents sit at 62-79% brightness instead of the 92-98% that made the
     old palette read as neon. All pass WCAG AA on --bg and --panel. */
  --teal: #3fbfa8;
  --teal-deep: #2f9d8a;
  --teal-wash: rgba(63,191,168,0.09);
  --teal-line: rgba(63,191,168,0.22);
  --blue: #5b87c4;
  --green: #4a9d7a;
  --amber: #c9932f;

  /* Used in exactly one place sitewide (the hero rule below). A gradient
     repeated on every button and every number is a template; used once, it
     is a signature. */
  --grad: linear-gradient(90deg, var(--teal), rgba(63,191,168,0));

  --radius: 14px;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* NAV */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(9,12,22,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.2px;}
.brand img{width:30px;height:30px;border-radius:8px;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{color:var(--text-dim);font-size:14.5px;font-weight:500;transition:color .15s;}
.nav-links a:hover, .nav-links a.active{color:var(--text);}
.nav-cta{
  padding:9px 17px;border-radius:9px;font-weight:700;font-size:14px;
  background:var(--teal);color:#06201b !important;transition:background .16s;
}
.nav-cta:hover{background:var(--teal-deep);}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;}

@media(max-width:880px){
  .nav-links{position:absolute;top:72px;left:0;right:0;background:var(--bg-soft);
    flex-direction:column;align-items:flex-start;padding:18px 24px;gap:16px;
    border-bottom:1px solid var(--border);display:none;}
  .nav-links.open{display:flex;}
  .nav-toggle{display:inline-block;}
}

/* HERO / SECTIONS */
section{padding:88px 0;}
.section-tight{padding:56px 0;}
/* Section kicker. Was an ALL-CAPS pill above nearly every heading, 14 across
   the site — a regularity that announced itself as scaffolding. Now a quiet
   sentence-case line with a short rule, and used on far fewer sections. */
.eyebrow{
  display:block;font-size:13px;font-weight:600;letter-spacing:.2px;
  color:var(--text-dimmer);margin-bottom:14px;padding-left:34px;position:relative;
}
.eyebrow:before{
  content:"";position:absolute;left:0;top:0.62em;
  width:24px;height:1px;background:var(--teal);opacity:.75;
}
h1{font-size:54px;line-height:1.07;font-weight:800;letter-spacing:-1.1px;margin:20px 0 20px;}
/* The one gradient on the site: a hairline that fades out under the hero
   headline. Signature, not decoration. */
.hero-rule{height:2px;width:120px;background:var(--grad);border:0;margin:0 auto 26px;border-radius:2px;}
h2{font-size:35px;line-height:1.18;font-weight:750;letter-spacing:-.5px;margin:0 0 16px;}
h3{font-size:20px;font-weight:700;margin:0 0 8px;letter-spacing:-.1px;}
.lede{font-size:19px;color:var(--text-dim);max-width:680px;}
.center{text-align:center;margin-left:auto;margin-right:auto;}
.muted{color:var(--text-dim);}
.dimmer{color:var(--text-dimmer);}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;border-radius:11px;font-weight:700;font-size:15.5px;
  border:1px solid var(--border);cursor:pointer;
}
.btn{transition:background .16s, border-color .16s, transform .16s;}
.btn-primary{background:var(--teal);color:#06201b;border:1px solid transparent;font-weight:750;}
.btn-primary:hover{background:var(--teal-deep);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border);}
.btn-ghost:hover{background:var(--panel);border-color:var(--teal-line);}
.btn:active{transform:translateY(1px);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:9px;}

.card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;
}
.card-soft{background:var(--bg-soft);}

.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){
  .grid-3, .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:620px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  h1{font-size:38px;}
  h2{font-size:28px;}
}

/* Feature-card marks. Emoji here (🧬 ⚛️ 🌊 …) is the loudest tell of a
   generated page; these are drawn inline SVG strokes instead. */
.feature-card .ico{
  display:block;width:26px;height:26px;margin-bottom:16px;color:var(--teal);
}
.feature-card .ico svg{width:100%;height:100%;display:block;}
.feature-card p{color:var(--text-dim);font-size:14.8px;margin:0;line-height:1.62;}
.feature-card{transition:border-color .18s, background .18s;}
.feature-card:hover{border-color:var(--teal-line);background:var(--panel-2);}

/* Asymmetry helpers — a hand-composed page is not a perfect grid. The lead
   item in a set gets more room than the ones that follow it. */
.grid-lead{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:20px;}
@media(max-width:900px){.grid-lead{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.grid-lead{grid-template-columns:1fr;}}
.span-2{grid-column:span 2;}
@media(max-width:620px){.span-2{grid-column:auto;}}

/* A quiet rule used to separate thoughts, replacing some of the em-dashes. */
.rule{border:0;border-top:1px solid var(--border-soft);margin:0 0 28px;max-width:80px;}

.shot{
  border-radius:16px;border:1px solid var(--border);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.6);
}
.shot img{width:100%;display:block;}

.stat{
  text-align:center;padding:22px 10px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--border-soft);
}
/* Plain text, not gradient-filled. A number is more convincing when it is
   simply stated than when it is decorated. */
.stat .n{font-size:29px;font-weight:800;color:var(--text);letter-spacing:-.5px;}
.stat .n em{font-style:normal;color:var(--teal);}
.stat .l{font-size:12.5px;color:var(--text-dimmer);margin-top:4px;}

.dna-ticker{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;letter-spacing:1px;color:var(--text-dimmer);
  background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:12px;
  padding:16px 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dna-ticker b{color:var(--teal);font-weight:600;}

.pill{
  display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;
}
.pill-real{background:rgba(74,157,122,0.13);color:#6cb897;border:1px solid rgba(74,157,122,0.3);}
.pill-proxy{background:rgba(201,147,47,0.12);color:#d2a851;border:1px solid rgba(201,147,47,0.28);}

table.compare{width:100%;border-collapse:collapse;}
table.compare th, table.compare td{padding:12px 14px;border-bottom:1px solid var(--border-soft);text-align:left;font-size:14.5px;}
table.compare th{color:var(--text-dimmer);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;}

.check-list{list-style:none;padding:0;margin:0;}
.check-list li{padding-left:28px;position:relative;margin-bottom:12px;color:var(--text-dim);font-size:15px;}
.check-list li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800;}
.cross-list li:before{content:"—";color:var(--text-dimmer);}

.step{
  display:grid;grid-template-columns:56px 1fr;gap:18px;margin-bottom:14px;
}
.step .num{
  width:52px;height:52px;border-radius:50%;background:transparent;color:var(--teal);
  border:1px solid var(--teal-line);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;
}

.category-card{background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:12px;padding:20px;}
.category-card .count{font-size:26px;font-weight:800;color:var(--teal);}
.category-card .name{font-weight:700;margin-top:2px;}
.category-card ul{margin:12px 0 0;padding-left:18px;color:var(--text-dim);font-size:13.5px;}
.category-card li{margin-bottom:4px;}

/* FOOTER */
footer{border-top:1px solid var(--border-soft);padding:60px 0 34px;background:var(--bg-soft);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dimmer);margin:0 0 14px;}
.footer-grid a{display:block;color:var(--text-dim);font-size:14.5px;margin-bottom:10px;}
.footer-grid a:hover{color:var(--text);}
.footer-legal{border-top:1px solid var(--border-soft);padding-top:26px;color:var(--text-dimmer);font-size:12.8px;line-height:1.7;}
.footer-legal p{margin:0 0 10px;}
.footer-bottom-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:6px;}

/* FORM */
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-size:13.5px;font-weight:700;color:var(--text-dim);margin-bottom:7px;}
.form-field .hint{font-size:12.5px;color:var(--text-dimmer);margin-top:5px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-size:15px;font-family:inherit;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none;border-color:var(--teal);
}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:620px){.form-row-2{grid-template-columns:1fr;}}
.privacy-note{
  display:flex;gap:12px;align-items:flex-start;background:var(--teal-wash);
  border:1px solid var(--teal-line);border-radius:12px;padding:16px 18px;font-size:13.5px;color:var(--text-dim);
}
.form-status{margin-top:16px;font-size:14px;display:none;padding:14px 16px;border-radius:10px;}
.form-status.ok{display:block;background:rgba(74,157,122,0.12);border:1px solid rgba(74,157,122,0.32);color:#7cc0a2;}
.form-status.err{display:block;background:rgba(200,90,90,0.12);border:1px solid rgba(200,90,90,0.32);color:#e08c8c;}

/* Required/optional markers on labels. */
.form-field label .req{color:var(--teal);margin-left:2px;}
.form-field label .opt{color:var(--text-dimmer);font-weight:500;text-transform:none;font-size:12.5px;}

/* Per-field validation message, shown under the input it belongs to. */
.field-err{display:none;font-size:12.8px;color:#e08c8c;margin-top:6px;}
.field-err.show{display:block;}
.form-field.invalid input,
.form-field.invalid textarea{border-color:rgba(200,90,90,0.55);}
.form-field.valid input,
.form-field.valid textarea{border-color:rgba(74,157,122,0.45);}

.charcount{text-align:right;}
.charcount.near{color:var(--amber);}

/* Submit button: spinner replaces nothing, it simply appears while in flight. */
.btn-submit{display:inline-flex;align-items:center;gap:10px;}
.btn-submit[disabled]{opacity:0.65;cursor:default;}
.btn-spinner{
  display:none;width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid rgba(6,32,27,0.25);border-top-color:#06201b;
  animation:btn-spin 0.6s linear infinite;
}
.btn-submit.loading .btn-spinner{display:block;}
@keyframes btn-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.btn-spinner{animation-duration:1.6s;}}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* Confirmation panel that replaces the form once a submission lands. */
.form-sent{text-align:center;padding:18px 4px 8px;}
.form-sent-mark{
  width:56px;height:56px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:700;color:var(--teal);background:transparent;border:1px solid var(--teal-line);
}
.form-sent h3{font-size:23px;margin-bottom:10px;}
.form-sent p{margin:0 auto 10px;max-width:44ch;}
.form-sent-aside{font-size:13.5px;}
.form-sent-aside a{color:var(--teal);}

.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.tag{font-size:12.5px;color:var(--text-dimmer);background:var(--bg-soft);border:1px solid var(--border-soft);padding:5px 11px;border-radius:999px;}

video{width:100%;border-radius:16px;border:1px solid var(--border);}

.breadcrumb-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 40px;}
.breadcrumb-tabs span{
  background:var(--bg-soft);border:1px solid var(--border-soft);color:var(--text-dimmer);
  padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:700;
}
.breadcrumb-tabs span.done{color:#7cc0a2;border-color:rgba(110,231,176,.3);}