:root{
  --bg:#040308;
  --card:#0b0f17;
  --text:#e0f7ff;
  --sub:#89a6d9;
  --accent:#00f6ff;
  --accent2:#ff00d4;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

.container{max-width:1200px;margin:0 auto;padding:0 24px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-10{gap:40px}
.grid{display:grid}.g2{grid-template-columns:1fr}.md-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.g2{grid-template-columns:repeat(2,minmax(0,1fr))}}

a{color:inherit;text-decoration:none}
small, .sub{color:var(--sub)}

header.sticky{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: #040308aa;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.badge{
  display:inline-block;
  border:1px solid var(--accent);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  letter-spacing:.12em;
  background: radial-gradient(120px 60px at 30% 40%, var(--accent) 20%, transparent 60%);
}

h1{font-size:40px;margin:0}
@media(min-width:900px){  }
h2{font-size:28px;margin:0 0 12px}
h3{font-size:22px;margin:0 0 8px}
p{line-height:1.6}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:16px;
  padding:12px 18px;font-weight:600;
  border:1px solid transparent;
}
.btn-primary{ background:var(--accent); color:#00111a; }
.btn-ghost{ border-color:var(--accent); color:var(--text); background:transparent; }

.card{
  background: var(--card);
  border:1px solid rgba(255,255,255,0.2);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius:24px;
  padding:24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.logo-row{display:flex;align-items:center;gap:12px}
.wordmark{display:flex;align-items:baseline;gap:6px;user-select:none;font-weight:800;letter-spacing:.2em}
.dot{margin-top:-4px;color:var(--accent)}

.hero-card{
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--accent) 20%, transparent) , transparent 50%), var(--card);
  border:1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius:24px;
  padding:24px;
}

.grid-3{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card-mini{
  background:#0d131b;border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius:18px;padding:16px;text-align:center
}

.section{padding:60px 0}


.lang-switch button{
  border:1px solid var(--accent);
  padding:6px 10px;border-radius:999px;font-size:12px;display:inline-flex;gap:8px;align-items:center;
  background:transparent;color:var(--text);opacity:.8
}
.lang-switch button[aria-pressed="true"]{opacity:1}

.color-picker{height:40px;width:56px;border-radius:8px;border:none;outline:none}

.top-btn{
  position:fixed;right:24px;bottom:24px;z-index:60;border-radius:999px;
  padding:10px 14px;background:var(--accent);color:#00111a;border:none;font-weight:700;
  box-shadow:0 12px 24px rgba(0,0,0,.4);display:none
}
.top-btn.show{display:inline-flex}

.bg-layers{
  position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden
}
.bg-fog{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 700px at 85% -10%, color-mix(in oklab, var(--accent2) 20%, transparent), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 60%);
}
.bg-grid{
  position:absolute;inset:0;opacity:.3;mix-blend-mode:screen;
  background-image:
    linear-gradient(color-mix(in oklab, var(--accent) 20%, transparent), color-mix(in oklab, var(--accent2) 20%, transparent)),
    repeating-linear-gradient(to bottom, transparent 0, transparent 14px, #ffffff0d 15px),
    repeating-linear-gradient(to right, transparent 0, transparent 14px, #ffffff0d 15px);
}
.bg-scan{
  position:absolute;inset:0;opacity:.2;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 3px);
  animation:scan 4s ease-in-out infinite alternate;
}
@keyframes scan { from{ transform: translateY(-10%);} to{ transform: translateY(10%);} }

.nav a{color:var(--sub);opacity:.9}
.nav a:hover{opacity:1}


/* --- Wordmark styling (v16) --- */
.wordmark{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark{ color: var(--text); }
}


/* v22: About lead paragraph size */
.lead{ font-size: clamp(1.06rem, 1.05rem + 0.7vw, 1.4rem); line-height: 1.7; max-width: 65ch; }

/* v26: 3-up grid for Services */
.grid.g3{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width: 720px){
  .grid.g3{ grid-template-columns: repeat(3, 1fr); }
}

/* v29: card padding safety */
.card{ padding: 16px; border-radius: 14px; border: 1px solid #ffffff1a; background: color-mix(in oklab, var(--bg) 72%, transparent); }

/* v30: checklist styling */
.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.checklist li{ position:relative; padding-left:24px; }
.checklist li::before{ content:"✔"; position:absolute; left:0; top:0; transform:translateY(2px); opacity:0.8; }


/* v31: About card polish */
.about-card{ position:relative; overflow:hidden; }
.about-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(1200px 300px at -15% 120%, color-mix(in oklab, var(--accent) 26%, transparent) 0%, transparent 60%);
  pointer-events:none; opacity:0.6;
}
.about-card .lead{ margin-bottom:10px; }


/* v34 about width */
.about-card{ width:100%; }


/* v35: About section typography/layout */
.about-card{ width:100%; }
.about-inner{ display:grid; gap:14px; }
@media (min-width: 900px){
  .about-inner{ grid-template-columns: 1.6fr 1fr; align-items:start; }
}
.about-card .lead{
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.18rem);
  line-height: 1.7;
  max-width: 62ch;
  margin: 0;
}
.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.checklist li{ position:relative; padding-left:22px; font-size: 0.98rem; line-height:1.6; opacity:0.9; }
.checklist li::before{ content:"✔"; position:absolute; left:0; top:0; transform: translateY(2px); opacity:0.8; }



/* v43 menu bump */
header nav a{ font-size: 1.02rem; }
@media (min-width: 900px){
  header nav a{ font-size: 1.08rem; }
}


/* v44 menu bump */
header nav a, header .nav a, .menu a, nav a { font-size: 1.08rem; }
@media (min-width: 900px){
  header nav a, header .nav a, .menu a, nav a { font-size: 1.12rem; }
}


/* v46: sticky footer + bottom gap fixes */
html, 
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; margin: 0; }
main { flex: 1 0 auto; }

/* Ensure footer sits at bottom without extra gap */
footer { margin-top: auto; }

/* Remove accidental bottom margins on the last block */
main > *:last-child { margin-bottom: 0 !important; }
.section:last-child, .container:last-child { margin-bottom: 0 !important; padding-bottom: 0; }
hr:last-of-type { margin-bottom: 0; }

/* Guard against any 1px line caused by subpixel rounding */
body { background: var(--bg); }
html { background: var(--bg); }


/* v47 sticky footer override */
html, 
body { min-height: 100vh; min-height: 100dvh; display:flex; flex-direction:column; margin:0; }
main { flex:1 0 auto; }
footer, 


/* v48: bottom seam fix */
html, body { background: var(--bg); }
body { overflow-x: hidden; }
footer, .
footer::after, .footer::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  bottom: -2px; height: 3px;
  background: var(--bg);
  pointer-events: none;
}



/* v49: hard floor paint to kill bottom seam */
html, body { background: var(--bg); margin:0; }
footer, .
body::after{
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 6px;               /* slightly taller to cover any subpixel gap */
  background: var(--bg);
  z-index: 0;
  pointer-events: none;
}



/* v50: prevent header/menu from overlapping top content */
:root{ --header-h: 64px; }
@media (min-width: 900px){ :root{ --header-h: 80px; } }

header{ position: sticky; top: 0; z-index: 1000; }
main{ padding-top: var(--header-h); }

/* When navigating to anchors, keep sections visible below sticky header */
.section:first-of-type, section:first-of-type{ scroll-margin-top: calc(var(--header-h) + 12px); }



/* v56: Tools/Alati dropdown */
.nav-dropdown{ position: relative; display:inline-block; }
.nav-dropdown .has-caret{ background:none; border:none; color: var(--muted, #b9c2ff); font: inherit; padding: 8px 10px; cursor:pointer; }
.nav-dropdown .has-caret::after{ content:"▾"; margin-left:6px; font-size:.8em; opacity:.8; }
.nav-dropdown .nav-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  display:none; min-width: 260px;
  background: color-mix(in oklab, var(--bg) 85%, #0000);
  border:1px solid #ffffff1a; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  padding:8px; z-index: 2000; backdrop-filter: blur(6px);
}
.nav-dropdown.open .nav-menu{ display:block; }
.nav-dropdown .nav-sub{
  display:block; padding:10px 12px; border-radius:8px; color:#cbd5ff; text-decoration:none;
}
.nav-dropdown .nav-sub:hover{ background:#ffffff10; color:#fff; }
@media (hover:none){
  .nav-dropdown .nav-menu{ top: calc(100% + 12px); }
}



/* v56: tools pages styling */
.card.pad{ background: color-mix(in oklab, var(--panel, #0b0f1c) 92%, #0000); border:1px solid #ffffff1a; border-radius:16px; padding:20px; }
.tool-grid{ display:grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap:14px; }
.tool-grid .row{ grid-column: 1 / -1; }
.tool-grid input[type="number"], .tool-grid input[type="text"]{
  width:100%; border:1px solid #ffffff1a; background:#0b0f1c; color:#e6ecff; border-radius:10px; padding:10px 12px;
}
.tool-grid label{ display:flex; flex-direction:column; gap:6px; font-size:0.95rem; }
.btn.primary{ background: linear-gradient(90deg, #7c3aed, #06b6d4); color:#fff; border:none; padding:10px 14px; border-radius:12px; }
.combo{ padding:8px 10px; border-radius:8px; background:#ffffff0d; margin-top:6px; }
.age-gate{ position:fixed; inset:0; display:grid; place-items:center; background:#0008; z-index:9999; }
.age-card{ background: #0b0f1c; color:#e6ecff; border:1px solid #ffffff1a; border-radius:16px; padding:20px; width:min(520px, 92vw); }
@media (max-width: 720px){ .tool-grid{ grid-template-columns: 1fr; } }



/* v57: RNG page spacing + checkbox alignment */
.tool-page{ margin-top: 32px; }
@media (min-width: 900px){ .tool-page{ margin-top: 44px; } }
.tool-grid label.row{ flex-direction: row; align-items: center; gap: 10px; }
.tool-grid label.row input[type="checkbox"]{ width: auto; height: 18px; }



/* v59: tools page title sizing + spacing */
.tool-page{ margin-top: 32px; }
@media (min-width: 900px){ .tool-page{ margin-top: 44px; } }
.tool-page h1{ font-size: 1.6rem; line-height: 1.25; margin-bottom: .75rem; }
@media (min-width: 900px){ .tool-page h1{ font-size: 2rem; } }
.tool-page p{ font-size: 1rem; max-width: 70ch; }



/* v59: age gate z-index and click-through */
.age-gate{ position: fixed; inset:0; display:grid; place-items:center; background:#0008; z-index: 99999; pointer-events: auto; }
.age-card{ position: relative; z-index: 100000; pointer-events: auto; }
.age-gate *{ pointer-events: auto; }



/* v59: responsive dropdown improvements */
.nav-dropdown{ position: relative; }
.nav-dropdown .nav-menu{ z-index: 3000; }
@media (max-width: 860px){
  .main-nav{ gap: 8px; flex-wrap: wrap; }
  .nav-dropdown{ width: 100%; }
  .nav-dropdown .has-caret{ width: 100%; text-align: left; padding-left: 0; }
  .nav-dropdown .nav-menu{ position: static; display: none; width: 100%; margin-top: 6px; }
  .nav-dropdown.open .nav-menu{ display: block; }
  .nav-dropdown .nav-sub{ padding: 10px 0; }
}



/* v60: dropdown polish */
.nav-dropdown .nav-menu{ border:1px solid #ffffff26; }
@media (max-width: 860px){
  header .container{ align-items: flex-start; }
  .main-nav{ width: 100%; }
}



/* v61: rock‑solid age gate clickability */
.age-gate{ position:fixed; inset:0; display:grid; place-items:center; background:#000a;
  z-index: 2147483647; pointer-events: auto; }
.age-card{ position:relative; z-index: 2147483647; pointer-events: auto; }
.age-gate *{ pointer-events: auto; }














/* === FORCE-KILL header right-edge line / separators (tested) === */
header, header * { -webkit-tap-highlight-color: transparent; }
header .nav, header .nav * { border: 0 !important; box-shadow: none !important; }
header .nav a::after, header .nav a::before { content: none !important; }
header .nav a:focus, header .nav a:active, header .nav a:focus-visible { outline: 0 !important; box-shadow:none !important; }
header .btn, header .btn-ghost, header .lang-switch { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
header .hamburger { border: 0 !important; background: transparent !important; outline: 0 !important; }
header .hamburger .bar { background: var(--text); }
header .container::after { content: none !important; }



/* === Responsive Menu v1 (mobile panel + hamburger) === */
:root { --header-h: 64px; }
@media (min-width: 900px){ :root { --header-h: 80px; } }
header.sticky{ position:sticky; top:0; z-index:1000; }

/* Hamburger icon (styles only; HTML is already present) */
header .hamburger{ width:40px; height:28px; position:relative; cursor:pointer; border:none; background:transparent; display:none; }
header .hamburger .bar{ position:absolute; left:0; right:0; height:2px; background: var(--text); border-radius:2px; transition: transform .25s ease, top .25s ease, opacity .2s ease; }
header .hamburger .bar:nth-child(1){ top:4px; }
header .hamburger .bar:nth-child(2){ top:13px; }
header .hamburger .bar:nth-child(3){ top:22px; }
header.menu-open .hamburger .bar:nth-child(1){ top:13px; transform:rotate(45deg); }
header.menu-open .hamburger .bar:nth-child(2){ opacity:0; }
header.menu-open .hamburger .bar:nth-child(3){ top:13px; transform:rotate(-45deg); }

/* Desktop: inline menu, hide hamburger */
@media (min-width: 900px){
  header .hamburger{ display:none; }
  #site-menu{ display:flex; gap:16px; align-items:center; position:static; background:transparent; border:none; box-shadow:none; padding:0; max-height:none; opacity:1; transform:none; }
}

/* Mobile: show hamburger, menu becomes floating panel */
@media (max-width: 899.98px){
  header .hamburger{ display:block; }
  #site-menu{
    position: fixed;
    left: 12px; right: 12px;
    top: calc(var(--header-h) + 8px);
    background: rgba(10,12,20,0.96);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.65);
    padding: 12px;
    z-index: 100001;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    display:block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }
  #site-menu.nav{ display:flex; flex-direction:column; gap:8px; }
  #site-menu .nav{ display:flex; flex-direction:column; gap:8px; }
  #site-menu a{ display:block; padding:12px 10px; border-radius:10px; }
  #site-menu a:hover{ background:rgba(255,255,255,0.06); }

  header.menu-open #site-menu{
    max-height: 70vh;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}


.header-spacer{height:0}


/* === Desktop nav row layout (prevents tall header) === */
@media (min-width: 900px){
  #site-menu{ flex-direction: row !important; gap:16px !important; }
}

/* v2 root-cause fix: unify footer styling */
footer, .footer {
  background: #070b10;
  color: var(--sub);
  padding: 40px 0;
  margin-top: auto;
}



/* v6: Normalize 'Alati/Tools' dropdown trigger to match nav links */
header .nav .has-caret{
  font-size: 1.12rem;      /* match header nav a size */
  color: var(--sub);       /* match link color */
  opacity: .9;             /* match link opacity */
  font-weight: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}
header .nav .has-caret:hover,
header .nav .has-caret:focus{
  opacity: 1;
  outline: 0;
  box-shadow: none;
}