/* --- Mobile Scroll Fixes --- */
html, body {
  background-color: #0a0e13 !important; /* Force dark background */
  overscroll-behavior-y: none; /* Prevent white bounce area */
  min-height: 100%;
  -webkit-tap-highlight-color: transparent;
}


/* --- Custom Dark Scrollbar --- */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #0a0e13; 
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  border: 3px solid #0a0e13;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) #0a0e13;
}


/* --- Mobile Navigation & Drawer (Moved to Top for Priority) --- */
.burger-menu {
  display: none !important; /* Hidden on desktop */
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  padding: 0;
  z-index: 9999; /* High z-index */
  margin-left: 20px;
  flex-shrink: 0;
}

.burger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff; /* Hardcoded white */
  border-radius: 2px;
  transition: all 0.3s linear;
  position: relative;
  transform-origin: 1px;
}

/* Mobile Breakpoint */
@media (max-width: 900px) {
  .burger-menu {
    display: flex !important; /* Force show on mobile */
  }

  /* Transform the nav into a drawer */
  .header .nav {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen */
    width: 280px;
    height: 100vh;
    background: #101720; /* Hardcoded dark bg */
    border-left: 1px solid rgba(255,255,255,.1);
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 30px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9998;
    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
    display: flex !important; /* Ensure flex is active */
  }

  .header .nav.active {
    right: 0; /* Slide in */
  }

  /* Adjust links for mobile */
  .header .nav a {
    margin-left: 0;
    margin-bottom: 20px;
    font-size: 1.1rem;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.05);
    padding-bottom: 12px;
    color: #fff;
    display: block;
  }

  /* Burger Animation */
  .burger-menu.active span:nth-child(1) { transform: rotate(45deg); }
  .burger-menu.active span:nth-child(2) { opacity: 0; }
  .burger-menu.active span:nth-child(3) { transform: rotate(-45deg); }
}


:root{
  --bg:#0b0f14;
  --panel:#101720;
  --panel-2:#0e141c;
  --text:#e6f0ff;
  --muted:#9db2c7;
  --accent:#00e0ff;
  --accent-soft: rgba(0,224,255,0.12);
  --ring: 0 0 32px rgba(0,224,255,.35);
  --grid: rgba(0,224,255,.06);
}

*{box-sizing:border-box}
html,body{padding-top:60px;}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(60vw 60vw at 80% -10%, rgba(0,224,255,.07), transparent 60%),
    radial-gradient(60vw 60vw at -10% 100%, rgba(0,224,255,.05), transparent 60%),
    linear-gradient(180deg, #0a0e13 0%, #0b0f14 100%);
  background-attachment: fixed;
}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.header{position:fixed;top:0;left:0;width:100%;backdrop-filter:saturate(150%) blur(8px);
  background:linear-gradient(180deg, rgba(16,23,32,.85), rgba(16,23,32,.6));
  border-bottom:1px solid rgba(255,255,255,.06);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding: 6px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand-img{height:44px;width:auto;display:block;object-fit:contain}
.nav a{color:var(--muted);text-decoration:none;margin-left:20px;font-weight:600}
.nav a:hover{color:var(--text)}

.hero{padding:40px 0 56px;border-bottom:1px solid rgba(255,255,255,.06)}
.kicker{color:var(--accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.h1{font-family:"Orbitron",sans-serif;font-size:clamp(28px,5vw,52px);line-height:1.05;margin:10px 0 14px}
.sub{color:var(--muted);font-size:clamp(14px,2.2vw,18px);max-width:850px}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}
.button{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(0,224,255,.12), rgba(0,224,255,.08));
  color:var(--text);box-shadow: var(--ring)}
.button.secondary{background:transparent;border-color:rgba(255,255,255,.14);box-shadow:none;color:var(--muted)}
.button[disabled]{opacity:.6;cursor:not-allowed}
.button:hover{transform:translateY(-1px);box-shadow:0 6px 30px rgba(0,224,255,.35)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px;min-height:140px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.card h3{margin:6px 0 8px;font-family:"Orbitron",sans-serif;font-size:18px}
.card p{margin:0;color:var(--muted)}

.section{padding:42px 0}
.section h2{font-family:"Orbitron",sans-serif;margin:0 0 16px}
.badge{display:inline-block;border:1px solid rgba(255,255,255,.14);padding:6px 10px;border-radius:999px;color:var(--muted);font-size:.82rem;margin-bottom:16px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00))}

.demo-teaser{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:center}
@media (max-width:900px){.demo-teaser{grid-template-columns:1fr}}
.preview{min-height:480px;position:relative;overflow:hidden}
.preview::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg, var(--grid), var(--grid) 1px, transparent 1px, transparent 12px),
  repeating-linear-gradient(0deg, transparent, transparent 12px, var(--grid) 12px, var(--grid) 13px);
  opacity:.25;pointer-events:none}
.preview-inner{position:absolute;inset:12px;display:grid;grid-template-columns:1.3fr 1fr;gap:16px;font-size:12px}
.preview .mini-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.preview .mini-card{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px;background:linear-gradient(180deg, #0b121a, #0e1620)}
.preview .mini-title{color:var(--muted);font-weight:600;font-size:11px}
.preview .mini-val{font-family:"Orbitron",sans-serif;font-size:14px;margin-top:4px}
.preview .mini-table{border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden; padding-bottom:4px; padding-bottom:10px; }
.preview table{width:100%;border-collapse:collapse}
.preview th,.preview td{padding:4px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview .alerts{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px;background:linear-gradient(180deg, #0b121a, #0e1620);height:100%;overflow:hidden}
.preview .ticker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}

.waitlist{display:flex;flex-direction:column;gap:16px;padding:22px;background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,.06);border-radius:16px;max-width:720px;margin-top:8px}
.form-row{display:flex;gap:10px;flex-wrap:wrap}
.input{flex:1;min-width:220px;background:#0b121a;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;color:var(--text)}
.input:focus{outline:none;border-color:rgba(0,224,255,.4);box-shadow:0 0 0 3px rgba(0,224,255,.12)}

.faq{border-top:1px solid rgba(255,255,255,.06);margin-top:12px;padding-top:18px}
.accordion{border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}
.acc-item + .acc-item{border-top:1px solid rgba(255,255,255,.08)}
.acc-btn{width:100%;text-align:left;background:linear-gradient(180deg, var(--panel), var(--panel-2));
  color:var(--text);padding:14px 16px;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.acc-btn:hover{background:rgba(255,255,255,.05)}
.acc-btn[aria-expanded="true"]{border-bottom:1px solid rgba(255,255,255,.08)}
.acc-panel{display:none;padding:12px 16px;background:linear-gradient(180deg, #0a0f14, #0d151e);color:var(--muted)}
.acc-panel.show{display:block}

.footer{
  padding:26px 0 30px 0;
  border-top:1px solid rgba(255,255,255,.06);
  background:radial-gradient(90vw 120vh at 0% 140%, rgba(0,224,255,.05), transparent 60%), var(--bg);
}
.footer-logo{height:18px;opacity:.9}

/* Demo Page */
.layout-demo{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 64px)}
.sidebar{background:linear-gradient(180deg, var(--panel), var(--panel-2));border-right:1px solid rgba(255,255,255,.06);padding:18px}
.sidebar h4{font-family:"Orbitron",sans-serif;margin:6px 0 16px}
.side-link{display:block;color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:10px}
.side-link:hover,.side-link.active{background:rgba(255,255,255,.06);color:var(--text)}
.topbar{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12)}
.actions{display:flex;gap:16px;flex-wrap:wrap}
.btn{padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);font-weight:600}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn:hover{background:rgba(255,255,255,.07)}

.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:14px}
@media (max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}}
.kpi{border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px;background:linear-gradient(180deg, var(--panel), var(--panel-2))}
.kpi h5{margin:0 0 6px;color:var(--muted);font-weight:600}
.kpi .val{font-family:"Orbitron",sans-serif;font-size:22px}

.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:14px;padding:14px}
.panel{border:1px solid rgba(255,255,255,.06);border-radius:12px;background:linear-gradient(180deg, var(--panel), var(--panel-2));padding:12px}
.panel h4{margin:4px 0 10px;font-family:"Orbitron",sans-serif}
.table{width:100%;border-collapse:collapse;font-size:.95rem}
.table th,.table td{border-bottom:1px solid rgba(255,255,255,.06);padding:10px 6px;text-align:left}
.chip{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--accent-soft);color:#bff6ff;font-weight:700;font-size:.8rem}

/* Charts & sparklines */
.chart{width:100%;height:220px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:linear-gradient(180deg, #0b121a, #0e1620);position:relative;overflow:hidden}
.spark{width:80px;height:24px}
canvas{width:100%;height:100%}

/* v5 adjustments */
.logo-title{font-family:"Orbitron",sans-serif;font-weight:700;font-size:18px;letter-spacing:.2px;color:var(--text);opacity:.95}
.header .logo{gap:12px}
.preview-inner{grid-template-rows:1fr;}
.preview .col-right{display:grid;grid-template-rows:1fr 1fr;gap:16px;min-height:100%}
.preview .alerts, .preview .snapshot{min-height:0} /* allow grid to split evenly */
.preview .snapshot{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px;background:linear-gradient(180deg, #0b121a, #0e1620)}
.preview .snapshot .row{display:flex;justify-content:space-between;font-size:11px;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.preview .snapshot .row:last-child{border-bottom:none}
.preview .mini-table{max-height:calc(100% - 0px); padding-bottom:4px; padding-bottom:10px; }

.preview .mini-table thead, .preview .mini-table tbody tr{display:table;width:100%;table-layout:fixed}
.waitlist{max-width:860px}

/* v6 header text-only brand */
.brand-text{font-family:"Orbitron",sans-serif;font-weight:700;font-size:18px;letter-spacing:.2px;color:var(--text);text-decoration:none}
/* form width tweak */
.waitlist{max-width:1100px}

/* v9: clean preview table (no scrollbars, fit in box) */
.preview .mini-table{overflow:hidden; padding-bottom:4px; padding-bottom:10px; }
.preview table{table-layout:fixed}
.preview th,.preview td{padding:4px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* v10: preview column height alignment */
.preview-inner{height:100%}
.preview .mini-left{
  display:grid;
  grid-template-rows:auto 1fr; /* KPIs natural height + table fills remaining */
  min-height:100%;
}
.preview .mini-table{height:100%; padding-bottom:4px; padding-bottom:10px; }
.preview .col-right{grid-template-rows:1fr 1fr} /* keep equal halves */
.preview .alerts, .preview .snapshot{min-height:0} /* allow equal distribution without overflow */


/* v11: two-row grid to align Symbols (left) with Market Snapshot (right) */
.preview-inner{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-rows:auto 1fr; /* row1 auto, row2 fills */
  height:100%;
  gap:16px;
}
.mini-left{display:grid;grid-template-rows:auto 1fr;min-height:0}
.col-right{display:grid;grid-template-rows:auto 1fr;min-height:0}
/* Map children: first child in each column is row1, second child is row2 */
.mini-left > .mini-kpis{grid-row:1}
.mini-left > .mini-table{grid-row:2}
.col-right > .alerts{grid-row:1}
.col-right > .snapshot{grid-row:2}

/* Ensure row2 items expand but never overflow the preview */
.preview .mini-table,
.preview .snapshot{height:100%; overflow:hidden}
.preview .alerts{overflow:hidden}

/* Keep table tidy and within the box */
.preview table{table-layout:fixed}
.preview th,.preview td{padding:4px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* v12: tighten preview grid & trim height */
.preview{min-height:480px; /* this trims bottom whitespace */}
/* Ensure exactly two rows and no implicit extra tracks/gaps */
.preview-inner{grid-auto-rows:unset}
.mini-left, .col-right{grid-auto-rows:unset}
/* Remove any accidental extra spacing */
.preview .mini-left > *:not(.mini-kpis):not(.mini-table){display:none}
.preview .col-right > *:not(.alerts):not(.snapshot){display:none}
/* Make sure KPIs and Alerts are auto-height, lower row fills cleanly */
.mini-left{grid-template-rows:auto 1fr}
.col-right{grid-template-rows:auto 1fr}
/* Avoid bottom padding/margins causing a phantom row */
.preview .mini-table, .preview .snapshot, .preview .alerts{margin:0;padding-top:8px;padding-bottom:8px}

/* v14: final index polish */
.preview-inner{align-content:stretch}
.mini-left, .col-right{grid-auto-rows:unset}
/* Ensure only the intended two children render in each column */
.mini-left > :nth-child(n+3){display:none !important}
.col-right > :nth-child(n+3){display:none !important}
/* Remove bottom padding on the symbols table wrapper to avoid overflow triggering a new row */
.preview .mini-table{padding-top:6px; padding-bottom:0; padding-bottom:4px; padding-bottom:10px; }
/* Keep right column comfortable without changing its height */
.preview .alerts{padding-top:8px; padding-bottom:8px}
.preview .snapshot{padding-top:8px; padding-bottom:8px}
/* Safety: eliminate any residual margin that could create a sliver row */
.preview .mini-table *, .preview .alerts *, .preview .snapshot *{margin-bottom:0}

/* v15: widen left column & kill phantom row */
.preview-inner{grid-template-columns:1.45fr 1fr !important; grid-auto-rows:unset; grid-auto-flow:row}
.mini-left, .col-right{grid-auto-rows:unset; grid-auto-flow:row; overflow:hidden}
.mini-left > *{margin-bottom:0}
.preview .mini-table{overflow:hidden; height:100%; padding-bottom:4px; padding-bottom:10px; }
.preview .mini-table table{width:100%}
.preview .mini-table tr:last-child td{border-bottom:none}

/* Give more space to Status column and prevent truncation where possible */
.preview th:nth-child(4), .preview td:nth-child(4){width:28%}
.preview th:nth-child(1), .preview td:nth-child(1){width:28%}
.preview th:nth-child(2), .preview td:nth-child(2){width:22%}
.preview th:nth-child(3), .preview td:nth-child(3){width:22%}


/* v16: restore bottom stroke for Symbols table */
.preview .mini-table{
  /* ensure container has a visible bottom edge even if last row border is removed */
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
 padding-bottom:4px; padding-bottom:10px; }

/* v17: guaranteed bottom edge for Symbols box */
.preview .mini-table{position:relative; overflow:hidden; padding-bottom:4px; padding-bottom:10px; }
.preview .mini-table::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.16)}


/* v18 retry: border normalization & symbols bottom line */
.preview{
.preview::before{inset:1px !important}
.preview .mini-table{position:relative; overflow:hidden; padding-bottom:4px; padding-bottom:10px; }
.preview .mini-table::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.16)}
/* Keep alerts/snapshot padding light so the outer border looks even */
.preview .alerts{padding-top:8px; padding-bottom:8px}
.preview .snapshot{padding-top:8px; padding-bottom:8px}

.preview{border:none !important}

.preview .mini-table table{margin:0}

/* v22: Final border fix for Symbols box */
.preview .mini-table{position:relative; overflow:hidden; padding-bottom:12px;}
.preview .mini-table::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:rgba(255,255,255,.18);
  pointer-events:none;
  z-index:5;
}

/* v22: Raise Coming Soon section slightly and add spacing */
.hero-content{position:relative; top:-20px;}
.hero-content h2{margin-top:14px;} /* space between Coming Soon and See ZynIQ in Action */


/* v23 structural fixes */
.hero-left{ position: relative; top: -18px; }
.hero-left .badge{ display:inline-block; margin-bottom: 12px; }
.hero-left h2{ margin-top: 4px; margin-bottom: 8px; }

/* Dedicated border element inside Symbols mini-table (not clipped, no extra height) */
.symbol-border{
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: rgba(255,255,255,.18);
  pointer-events:none;
  z-index: 10;
}

/* Footer layout: center the nav directly under the © line */
.footer-flex{
  display:flex;
  justify-content:center;
  align-items:center;
}
.footer-col{
  width:100%;
  max-width:760px;
  text-align:center;
  margin:0 auto;
}
.footer-copy{
  color: var(--muted);
  margin-top:6px;
  font-size:.8rem;
}
.footer-nav{
  margin-top:4px;
  margin-bottom:4px;
}
.footer-nav a{
  color: var(--muted);
  text-decoration:none;
  margin: 0 10px;
  font-size:.9rem;
}
.footer-nav a:hover{
  color: var(--text);
}

/* v24 structural fixes *//* v24 structural fixes */
/* Wrap ensures the border line can't be clipped by the inner table's overflow */
.mini-table-wrap{ position:relative; overflow:visible }
.mini-table-wrap::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background: rgba(255,255,255,.18);
  pointer-events:none;
  z-index: 10;
}

/* Lift the left block and add real spacing under the badge */
.hero-left{ margin-top: -25px; }
.hero-left .badge{ margin-bottom: 22px; }
.hero-left h2{ margin-top: 0; }


/* v35 adjustments */
.demo-teaser .badge{margin-bottom:16px}
.demo-teaser h2{margin-top:0}

/* Guarantee a visible bottom border on the symbols table preview */
.preview .mini-table{position:relative}
.preview .mini-table::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(255,255,255,.18); pointer-events:none;
}


/* v36 spacing refinements */
.demo-teaser{padding-top:60px;padding-bottom:20px}
.demo-teaser .badge{margin-bottom:24px}
.demo-teaser h2{margin-top:6px}


/* v37 increased spacing for Coming Soon + See ZynIQ in Action */
.demo-teaser{padding-top:100px;padding-bottom:30px}
.demo-teaser .badge{margin-bottom:40px}
.demo-teaser h2{margin-top:10px;margin-bottom:18px}


/* v38 enforced vertical spacing for demo teaser */
.section.demo-teaser,
.section .demo-teaser {
  padding-top: 120px !important;
  padding-bottom: 40px !important;
}

.demo-teaser .badge {
  margin-bottom: 50px !important;
}

.demo-teaser h2 {
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}

.demo-teaser .sub {
  margin-top: 22px !important;
}


/* v41: Guarantee bottom border on left preview table (symbols area) */
.preview .mini-table {
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.mini-table-wrap {
  position: relative;
  overflow: visible;
}
.mini-table-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,.18);
  pointer-events: none;
  z-index: 10;
}


/* v42: Reliable bottom border for left preview symbols table */
.mini-table-wrap-v42 { position: relative; overflow: visible; }
.mini-table-wrap-v42::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(255,255,255,.18); pointer-events: none; z-index: 10;
}
/* Ensure the inner box doesn't clip the overlay line */
.mini-table-wrap-v42 .mini-table { overflow: visible; }


/* v43: after swapping order, ensure mini-left stacks cleanly */
.mini-left { display: grid; grid-auto-rows: min-content; gap: 8px; }

/* CTA Button: See the Demo UI */
.btn-demo {
  background: linear-gradient(90deg, #00c2ff, #0078ff);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  margin-left: auto;
}
.btn-demo:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(0, 194, 255, 0.4);
}
/* Align header content left-right */
header, .header, .site-header, .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Force right alignment inside header */
.header-cta { margin-left:auto; }
header { display:flex; align-items:center; gap:16px; }


/* Scoped header layout for CTA */
.container, .container {
  display:flex;
  align-items:center;
}
/* Push CTA to the right */

.btn-demo.header-cta:hover { transform: translateY(-1px); box-shadow: 0 0 12px rgba(0, 194, 255, 0.4); }

/* --- ZynIQ: Header Demo CTA (polished gradient + glow + icon) --- */
.btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #00c2ff, #0078ff);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(0, 194, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
  will-change: transform, box-shadow;
}

.btn-demo.header-cta {
  margin-left: auto;
}

.btn-demo:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(0, 194, 255, 0.55);
}

.btn-demo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.3), 0 0 20px rgba(0, 194, 255, 0.5);
}

.btn-demo .icon {
  width: 16px; height: 16px;
  display: inline-block;
  flex: 0 0 16px;
  line-height: 0;
}

@media (hover: none) {
  .btn-demo:hover { transform: none; box-shadow: 0 0 12px rgba(0,194,255,0.35); }
}
/* --- End CTA --- */

/* --- ZynIQ: Header brand prominence (no header height change) --- */
.header .logo { display: inline-flex; align-items: center; gap: 10px; }
.header .logo .brand-img { height: 52px; max-height: 52px; width: auto; }
.header .logo .brand-text { font-size: 24px; font-weight: 700; letter-spacing: 0.02em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 56px; max-height: 56px; }
  .header .logo .brand-text { font-size: 26px; }
}
/* keep header height stable */
.header .header-inner { min-height: 64px; }

/* --- ZynIQ v59: Larger header brand (fills header visually) --- */
.header .logo { display: inline-flex; align-items: center; gap: 8px; }
.header .logo .brand-img { height: 52px; max-height: 52px; width: auto; }
.header .logo .brand-text { font-size: 24px; font-weight: 700; letter-spacing: 0.02em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 56px; max-height: 56px; }
  .header .logo .brand-text { font-size: 28px; font-weight: 700; }
}

/* --- ZynIQ v60: Larger logo+text to fill header without changing height --- */
.header .logo { display: inline-flex; align-items: center; gap: 8px; transform: translateY(-1px); }
.header .logo .brand-img { height: 48px; max-height: 48px; width: auto; }
.header .logo .brand-text { font-size: 26px; font-weight: 700; letter-spacing: 0.02em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 56px; max-height: 56px; }
  .header .logo .brand-text { font-size: 32px; font-weight: 700; }
}

/* --- ZynIQ v61: Final large header brand without increasing header height --- */
.header .logo { display: inline-flex; align-items: center; gap: 6px; transform: translateY(-1px); }
.header .logo .brand-img { height: 54px; max-height: 54px; width: auto; }
.header .logo .brand-text { font-size: 28px; font-weight: 700; letter-spacing: 0.02em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 64px; max-height: 64px; }
  .header .logo .brand-text { font-size: 36px; font-weight: 700; }
}

/* --- ZynIQ v62: Maximum fill header brand (Orbitron 800 weight) --- */
.header .logo { display: inline-flex; align-items: center; gap: 6px; transform: translateY(-2px); }
.header .logo .brand-img { height: 60px; max-height: 60px; width: auto; }
.header .logo .brand-text { font-size: 32px; font-weight: 800; letter-spacing: 0.015em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 72px; max-height: 72px; }
  .header .logo .brand-text { font-size: 42px; font-weight: 800; }
}

/* --- ZynIQ v63: Full-fill header brand scaling --- */
.header .logo { display: inline-flex; align-items: center; gap: 5px; transform: translateY(-3px); }
.header .logo .brand-img { height: 70px; max-height: 70px; width: auto; }
.header .logo .brand-text { font-size: 36px; font-weight: 800; letter-spacing: 0.015em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 84px; max-height: 84px; }
  .header .logo .brand-text { font-size: 48px; font-weight: 800; }
}

/* --- ZynIQ v64: Ultimate header fill (max visual balance) --- */
.header .logo { display: inline-flex; align-items: center; gap: 5px; transform: translateY(-4px); }
.header .logo .brand-img { height: 80px; max-height: 80px; width: auto; }
.header .logo .brand-text { font-size: 42px; font-weight: 800; letter-spacing: 0.01em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 96px; max-height: 96px; }
  .header .logo .brand-text { font-size: 56px; font-weight: 800; }
}

/* --- ZynIQ v65: Extreme fill header brand (final max visual balance) --- */
.header .logo { display: inline-flex; align-items: center; gap: 5px; transform: translateY(-6px); }
.header .logo .brand-img { height: 92px; max-height: 92px; width: auto; }
.header .logo .brand-text { font-size: 48px; font-weight: 800; letter-spacing: 0.01em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 110px; max-height: 110px; }
  .header .logo .brand-text { font-size: 64px; font-weight: 800; }
}

/* --- ZynIQ v66: Absolute maximum fill for header brand --- */
.header .logo { display: inline-flex; align-items: center; gap: 5px; transform: translateY(-8px); }
.header .logo .brand-img { height: 100px; max-height: 100px; width: auto; }
.header .logo .brand-text { font-size: 54px; font-weight: 800; letter-spacing: 0.01em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 125px; max-height: 125px; }
  .header .logo .brand-text { font-size: 72px; font-weight: 800; }
}

/* --- ZynIQ v67: Slightly smaller 'See the Demo UI' button --- */
.btn-demo {
  padding: 7px 18px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
}
@media (min-width: 1024px) {
  .btn-demo {
    padding: 8px 20px !important;
    font-size: 15px !important;
  }
}

/* --- ZynIQ v70: Footer stacked & centered --- */
.footer .footer-flex {
  justify-content: center;
}
.footer .footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer .footer-nav {
  text-align: center;
  margin-bottom: 6px;
}
.footer .footer-nav a {
  display: inline-block;
  margin: 0 6px;
}
.footer .footer-copy {
  text-align: center;
}

/* --- ZynIQ v71: Larger logo + font for balanced visual weight --- */
.header .logo { display: inline-flex; align-items: center; gap: 6px; transform: translateY(-6px); }
.header .logo .brand-img { height: 110px; max-height: 110px; width: auto; }
.header .logo .brand-text { font-size: 64px; font-weight: 800; letter-spacing: 0.01em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 130px; max-height: 130px; }
  .header .logo .brand-text { font-size: 80px; font-weight: 800; }
}

/* --- ZynIQ v72: True proportional max for header brand --- */
.header .logo { display: inline-flex; align-items: center; gap: 6px; transform: translateY(-6px); }
.header .logo .brand-img { height: 125px; max-height: 125px; width: auto; }
.header .logo .brand-text { font-size: 72px; font-weight: 800; letter-spacing: 0.01em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 150px; max-height: 150px; }
  .header .logo .brand-text { font-size: 96px; font-weight: 800; }
}

/* --- ZynIQ v73: Absolute visual maximum header brand size --- */
.header .logo { display: inline-flex; align-items: center; gap: 6px; transform: translateY(-8px); }
.header .logo .brand-img { height: 140px; max-height: 140px; width: auto; }
.header .logo .brand-text { font-size: 86px; font-weight: 800; letter-spacing: 0.01em; }
@media (min-width: 1024px) {
  .header .logo .brand-img { height: 175px; max-height: 175px; }
  .header .logo .brand-text { font-size: 112px; font-weight: 800; }
}

/* ZynIQ header brand sizing (reset from oversize) */
.header .logo { display:inline-flex; align-items:center; gap:8px; transform:none; }
.header .logo .brand-img { height:44px; max-height:44px; width:auto; }
.header .logo .brand-text { font-size:24px; font-weight:700; letter-spacing:0.02em; line-height:1; }
@media (min-width:1024px){
  .header .logo .brand-img { height:50px; max-height:50px; }
  .header .logo .brand-text { font-size:26px; }
}
/* Ensure header doesn't expand: keep inner flex centering */
.header .header-inner { align-items: center; }


/* v77: Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }





/* --- v77c mobile white-gap fix (surgical) --- */
/* Prevents white band at bottom during address bar collapse on mobile */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: #0b0e12;
  z-index: -1;
  pointer-events: none;
}
@supports (height: 100dvh) {
  body::before{ height: 100dvh; }
}
@supports not (height: 100dvh) {
  body::before{ height: 100vh; }
}
/* --- end mobile white-gap fix --- */


/* Waitlist: right-align final row button */
.waitlist .form-row:last-of-type{
  justify-content:flex-end;
}


/* Waitlist layout tweak: full-width rows + right-aligned submit button on last row */
.waitlist .form-row{
  width:100%;
}

.waitlist .form-row:last-of-type{
  justify-content:flex-start;
}

/* Waitlist layout: full-width rows and right-aligned submit button on last row */
.waitlist .form-row{
  width:100%;
}

.waitlist .form-row:last-of-type{
  align-items:flex-end;
}


/* ZynIQ multipage skeleton additions */
.nav a.active{
  color: var(--text);
}

.page-hero{padding:40px 0 32px;border-bottom:1px solid rgba(255,255,255,.06)}
.page-hero .h1{
  margin-bottom:16px;
}
.page-hero .sub{
  max-width:760px;
}

.page-grid{
  padding:40px 0 60px;
}
.page-grid .grid{
  margin-top:18px;
}

.page-note{
  color:var(--muted);
  font-size:.9rem;
  margin-top:6px;
}


/* --- ZynIQ multipage header + accessibility fixes (v2) --- */

/* Screen-reader only text */
.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Ensure header inner uses flex layout consistently */
header.header{
  display:block;
}
.header .container.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Keep nav items on one row with consistent spacing */
.header .nav{
  display:flex;
  align-items:center;
  gap:20px;
}
.header .nav a{
  margin-left:0;
}

/* --- Indicators dropdown in header nav --- */
.header .nav .nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.header .nav .nav-item-indicators > a::after {
  content: "▾";
  margin-left: 4px;
  font-size: 0.7em;
  opacity: 0.9;
}

.header .nav .nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  flex-direction: column;
  min-width: 180px;
  padding: 8px 0;
  border-radius: 12px;
  background: rgba(5, 7, 11, 0.98);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
  z-index: 60;
}

.header .nav .nav-dropdown a {
  padding: 6px 14px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.header .nav .nav-dropdown a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.header .nav .nav-item-indicators:hover .nav-dropdown {
  display: flex;
}



/* Push Demo UI CTA to far right */
.header-cta{
  margin-left:auto;
}

/* Ensure Demo UI link renders as a pill button */
.header .btn-demo.header-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Force consistent spacing under the header on all subpages */
.page-hero{padding:40px 0 56px !important;}


/* ZynIQ Indicators packs */
.section-packs .sub{
  max-width:720px;
}
.pack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:28px;
}
.pack-card{
  position:relative;
  border-radius:18px;
  padding:22px 20px 20px;
  background:radial-gradient(circle at top left,#102233,#050b15);
  box-shadow:0 18px 45px rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pack-header .pack-label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--accent-soft);
  margin-bottom:4px;
}
.pack-name{
  font-family:var(--font-display);
  font-size:1.35rem;
  margin:0 0 4px;
}
.pack-tagline{
  font-size:.95rem;
  color:var(--muted);
}
.pack-features{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.93rem;
}
.pack-features li::before{
  content:"•";
  margin-right:6px;
  color:var(--accent-soft);
}
.pack-fit{
  font-size:.9rem;
  color:var(--muted);
  margin-top:8px;
}
.pack-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.pack-price{
  font-size:.9rem;
  color:var(--muted);
}
.pack-card .button[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* ribbons */
.pack-ribbon{
  position:absolute;
  top:14px;
  right:16px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:4px 10px;
  border-radius:999px;
  background:linear-gradient(90deg,#2af0ff,#4d7cff);
  color:#01030a;
}
.pack-ribbon-alt{
  background:linear-gradient(90deg,#ffb347,#ff6b9d);
}

/* Compare table */
.section-compare{
  border-top:1px solid rgba(255,255,255,.05);
}
.compare-table{
  margin-top:26px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  font-size:.9rem;
}
.compare-row{
  display:grid;
  grid-template-columns:1.3fr repeat(4,1fr);
}
.compare-row:nth-child(odd){
  background:rgba(7,14,28,.95);
}
.compare-row:nth-child(even){
  background:rgba(4,9,18,.95);
}
.compare-head{
  background:linear-gradient(90deg,rgba(42,240,255,.18),rgba(77,124,255,.14));
  font-weight:600;
}

.compare-label{
  font-weight:600;
  color:var(--muted);
}
@media (max-width:900px){
  .compare-row{
    grid-template-columns:1.1fr repeat(4,1fr);
  }
}

/* Media placeholders */
.section-media .media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:26px;
}
.media-card h3{
  margin:10px 0 4px;
}
.media-card p{
  font-size:.9rem;
  color:var(--muted);
}
.media-thumb{
  border-radius:14px;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  border:1px dashed rgba(255,255,255,.18);
}
.placeholder-thumb{
  background:radial-gradient(circle at top left,#101a2b,#050814);
  color:var(--muted);
}
.media-video-placeholder{
  margin-top:26px;
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.media-video-placeholder .media-thumb{
  width:260px;
  max-width:100%;
  height:150px;
}
.media-video-placeholder h3{
  margin:0 0 4px;
}
.media-video-placeholder p{
  font-size:.9rem;
  color:var(--muted);
}

/* Access section tweaks */
.section-access .grid{
  margin-top:24px;
}

.compare-cell{
  padding:8px 10px;
  border-right:1px solid rgba(255,255,255,.04);
}
.compare-cell:last-child{
  border-right:none;
}
.compare-cell:not(.compare-label){
  text-align:center;
}
.compare-head .compare-cell{
  text-align:center;
}
/* Highlight Pro column slightly */
.compare-row .compare-cell:nth-child(4){
  font-weight:600;
  background:rgba(42,240,255,.04);
}

.section-access .grid{
  margin-top:24px;
}
.section-access .card h3{
  margin:4px 0 10px;
}
.section-access .card p{
  line-height:1.5;
}

/* Pricing page layout */
.section-pricing-packs h2{
  max-width:640px;
}
.section-pricing-packs .sub{
  max-width:720px;
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:26px;
}
@media (max-width:1100px){
  .pricing-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:700px){
  .pricing-grid{
    grid-template-columns:1fr;
  }
}
.pricing-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:230px;
}
.pricing-label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.pricing-card.highlighted{
  border-color:rgba(42,240,255,.6);
  box-shadow:0 0 0 1px rgba(42,240,255,.25),0 12px 36px rgba(0,0,0,.6);
}
.pricing-summary{
  margin:6px 0 12px;
  color:var(--muted);
}
.pricing-price{
  margin-top:auto;
  font-family:"Orbitron",sans-serif;
  font-size:24px;
}
.pricing-caption{
  margin-top:4px;
  font-size:.85rem;
  color:var(--muted);
}
.pricing-note{
  margin-top:18px;
  font-size:.85rem;
  color:var(--muted);
}
.section-pricing-bot .card p + p{
  margin-top:10px;
}

/* Minimalist pricing grid */
.section-minimal-pricing h2{
  max-width:640px;
}
.section-minimal-pricing .sub{
  max-width:720px;
}
.minimal-pricing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:28px;
}
@media(max-width:1100px){
  .minimal-pricing-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:700px){
  .minimal-pricing-grid{grid-template-columns:1fr;}
}
.pricing-mini-card{
  padding:22px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  text-align:center;
  background:rgba(255,255,255,.03);
}
.pricing-mini-card .price{
  font-family:"Orbitron",sans-serif;
  font-size:26px;
  margin:12px 0;
}
.btn.disabled{
  opacity:.4;
  cursor:not-allowed;
}




.header .logo {
  transition: box-shadow 0.25s ease;
  border-radius: 999px;
}

.header .logo:hover {
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.55);
}


/* ---- ZynIQ Header Orb – Persistent Glow + Hover Intensify ---- */

.header .logo .brand-img {
  filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.35))
          drop-shadow(0 0 12px rgba(0, 200, 255, 0.22));
  transition: 
    filter 0.25s ease,
    transform 0.25s ease;
}

.header .logo:hover .brand-img {
  filter: brightness(1.28)
          drop-shadow(0 0 10px rgba(0, 200, 255, 0.85))
          drop-shadow(0 0 22px rgba(0, 200, 255, 0.65));
  transform: scale(1.05);
}

/* Optional: soft halo on the whole clickable area */
.header .logo {
  transition: box-shadow 0.25s ease;
  border-radius: 999px;
}

.header .logo:hover {
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.35);
}


/* Indicators section screenshot cards (index) */
.section-indicators-showcase .indicators-grid{
  margin-top: 24px;
}

.screenshot-card{
  padding: 16px 16px 18px;
}

.screenshot-card .indicator-thumb { display:flex; justify-content:center; align-items:center; border-radius:12px; overflow:hidden; margin:0 0 12px; }

.screenshot-card .indicator-thumb img { height:180px; width:auto; object-fit:cover; display:block; }

.screenshot-card h3{
  margin-top: 10px;
  margin-bottom: 6px;
}

.screenshot-card p{
  font-size: 0.9rem;
  line-height: 1.45;
}




/* Hard override for Indicators section layout */
.section-indicators-showcase .indicators-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: flex-start;
}

.section-indicators-showcase .screenshot-card{
  display: block;
}

.section-indicators-showcase .indicator-thumb { display:flex; justify-content:center; align-items:center; border-radius:12px; overflow:hidden; margin:0 0 12px; }

.section-indicators-showcase .indicator-thumb img { height:180px; width:auto; object-fit:cover; display:block; }




/* Indicators section – 3-card grid with thumbnails */
.section-indicators-showcase .indicators-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: flex-start;
}

.section-indicators-showcase .indicator-card {
  padding: 16px 18px 18px;
}

.section-indicators-showcase .indicator-thumb { display:flex; justify-content:center; align-items:center; border-radius:12px; overflow:hidden; margin:0 0 12px; }

.section-indicators-showcase .indicator-thumb img { height:180px; width:auto; object-fit:cover; display:block; }




/* Indicators section – 2×2 grid with thumbnails */
.section-indicators-showcase .indicators-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-indicators-showcase .indicator-card {
  padding: 16px 18px 18px;
}

.section-indicators-showcase .indicator-thumb { display:flex; justify-content:center; align-items:center; border-radius:12px; overflow:hidden; margin:0 0 12px; }

.section-indicators-showcase .indicator-thumb img { height:180px; width:auto; object-fit:cover; display:block; }

@media (max-width: 960px) {
  .section-indicators-showcase .indicators-grid-2x2 {
    grid-template-columns: 1fr;
  }
}




/* Indicators section – 2x2 grid layout for preview cards */
.section-indicators-showcase .indicator-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

/* Indicator cards */
.section-indicators-showcase .indicator-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
}

/* Indicator thumbnails */
.section-indicators-showcase .indicator-thumb { display:flex; justify-content:center; align-items:center; border-radius:12px; overflow:hidden; margin:0 0 12px; }

.section-indicators-showcase .indicator-thumb img { height:180px; width:auto; object-fit:cover; display:block; }

/* Stack cards on mobile */
@media (max-width: 960px) {
  .section-indicators-showcase .indicator-showcase-grid {
    grid-template-columns: 1fr;
  }
}

/* Indicators section – 2x2 grid layout for preview cards */
.section-indicators-showcase .indicator-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.section-indicators-showcase .indicator-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-indicators-showcase .indicator-thumb { display:flex; justify-content:center; align-items:center; border-radius:12px; overflow:hidden; margin:0 0 12px; }

.section-indicators-showcase .indicator-thumb img { height:180px; width:auto; object-fit:cover; display:block; }

/* v18 image centering fix */
.section-indicators-showcase .indicator-thumb img {
  display:block;
  margin-left:auto;
  margin-right:auto;
  height:180px;
  width:auto;
  object-fit:cover;
}

/* v18c: make indicator thumbnails span full card width */
.section-indicators-showcase .indicator-thumb img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin: 0;
}

/* v18d: consistent padding & centering for indicator thumbnails */
.section-indicators-showcase .indicator-thumb {
  width: 100%;
  margin: 0 0 12px;
  border-radius: 12px;
  overflow: hidden;
  padding: 0 10px;              /* equal left/right padding inside card */
  box-sizing: border-box;
}

.section-indicators-showcase .indicator-thumb img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin: 0;
}

/* v18g indicator note */
.indicator-note {
  text-align:center;
  font-size:12px;
  color: rgba(255,255,255,0.35);
  margin-top:12px;
}

/* v18L: tighten spacing above "Why these indicators" */


/* v18M: pull Why These Indicators section up closer */


/* v18N: tighten vertical gap between indicators grid and "Why these indicators" */
.section-indicators-showcase{
  padding-bottom: 8px;
}

.section-why-indicators{
  padding-top: 8px;
}

.indicator-cta-wrap { margin-top: 32px; text-align:left; }

/* v20b: Bot section 3-card showcase (match indicator visuals) */
.bot-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}
@media (max-width: 900px) {
  .bot-showcase-grid { grid-template-columns: 1fr; }
}
.bot-cta-row {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* v20c: make bot cards reuse indicator card visuals */
.section-bot-showcase .indicator-thumb { display:flex; justify-content:center; align-items:center; border-radius:12px; overflow:hidden; margin:0 0 12px; }

/* v20e: enforce 3-column layout for bot cards and prevent span */
.section-bot-showcase .bot-showcase-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}
.section-bot-showcase .card{
  grid-column: auto !important;
  width: auto !important;
}
@media (max-width: 1000px){
  .section-bot-showcase .bot-showcase-grid{ grid-template-columns: 1fr !important; }
}

/* v20h: fixed-size thumbs for bot cards to match indicator feel */
.section-bot-showcase .indicator-thumb{
  padding: 0 8px;
  box-sizing: border-box;
}
.section-bot-showcase .indicator-thumb img{
  display:block;
  width:100%;
  height:120px;           /* fixed display height */
  object-fit:cover;
}

/* v21 polish: bot section micro-tweaks */
.section-bot-showcase .indicator-thumb { margin-top: 2px; }
.section-bot-showcase .indicator-note { margin-top: 10px !important; }
.section-bot-showcase h3 { letter-spacing: 0em; }
/* responsive steps for the bot cards */
@media (max-width: 980px){
  .section-bot-showcase .bot-showcase-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 680px){
  .section-bot-showcase .bot-showcase-grid{ grid-template-columns: 1fr !important; }
}

/* v22c: only primary CTA glows in bot section (kill pseudo glows on others) */
.section-bot-showcase .bot-cta-row .button:not(.button-glow),
.section-bot-showcase .bot-cta-row .button:not(.button-glow)::before,
.section-bot-showcase .bot-cta-row .button:not(.button-glow)::after{
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  content: none !important;
  display: inline-block !important; /* ensure button itself still shows */
  opacity: 1 !important;
}

/* v22d: force non-primary CTAs to have zero glow */
.section-bot-showcase .bot-cta-row .button-no-glow,
.section-bot-showcase .bot-cta-row .button-no-glow::before,
.section-bot-showcase .bot-cta-row .button-no-glow::after{
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  background-image: none !important;
  outline: none !important;
}


.footer-copy { text-align: center; }

}

/* --- Mobile Navigation & Drawer --- */
.burger-menu {
  display: none !important; /* Hidden on desktop */
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  padding: 0;
  z-index: 1001; /* Above the drawer */
  margin-left: 20px; flex-shrink: 0; /* Spacing from nav/logo */
}

.burger-menu span {
  width: 100%;
  height: 2px;
  background-color: var(--text);
  border-radius: 2px;
  transition: all 0.3s linear;
  position: relative;
  transform-origin: 1px;
}

/* Mobile Breakpoint */
@media (max-width: 900px) {
  .burger-menu {
    display: flex !important;
  }

  /* Transform the nav into a drawer */
  .header .nav {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen by default */
    width: 280px;
    height: 100vh;
    background: var(--panel);
    border-left: 1px solid rgba(255,255,255,.06);
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 30px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
  }

  .header .nav.active {
    right: 0; /* Slide in */
  }

  /* Adjust links for mobile */
  .header .nav a {
    margin-left: 0;
    margin-bottom: 20px;
    font-size: 1.1rem;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.04);
    padding-bottom: 12px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .header .nav.active a {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
  }

  /* Burger Animation to 'X' */
  .burger-menu.active span:nth-child(1) {
    transform: rotate(45deg);
  }
  .burger-menu.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
  }
  .burger-menu.active span:nth-child(3) {
    transform: rotate(-45deg);
  }
}

@media (max-width: 900px) {  }
@media (max-width: 900px) { body { overflow-x: hidden; } }

/* Fix for Docs Page Spacing */
.docs-page {
  padding-top: 0 !important; /* Remove section padding */
  margin-top: 20px !important; /* Add small margin if needed */
}
.docs-shell {
  margin-top: 0 !important;
}


/* --- Navigation Dropdown --- */
.nav-dropdown-container {
  position: relative;
  display: inline-flex; /* Align with other nav items */
  align-items: center;
  height: 100%;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #0a0e13;
  min-width: 180px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 0;
  z-index: 1000;
  margin-top: 0px; /* Connect to parent */
}

/* Show on hover */
/* .nav-dropdown-container:hover .nav-dropdown-menu { */ .unused-rule {
  display: block;
}

/* Dropdown Links */
.nav-dropdown-menu a {
  color: rgba(255,255,255,0.8) !important; /* Override nav a styles */
  padding: 10px 20px !important;
  text-decoration: none;
  display: block;
  font-size: 14px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.nav-dropdown-menu a:hover {
  background-color: rgba(255,255,255,0.05) !important;
  color: #00c2ff !important;
}

/* Mobile Styles */
@media (max-width: 900px) {
  .nav-dropdown-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: auto;
  }

  .nav-dropdown-menu {
    position: static;
    display: block; /* Always visible on mobile */
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0 0 0 20px; /* Indent */
    width: 100%;
    margin-top: 0;
  }

  .nav-dropdown-menu a {
    padding: 8px 0 !important;
    font-size: 15px !important;
    color: rgba(255,255,255,0.6) !important;
  }

  .nav-dropdown-menu a:hover {
    color: #fff !important;
    background: transparent !important;
  }
}


/* --- Dropdown Toggle & Arrow --- */
.nav-dropdown-container.show .nav-dropdown-menu {
  display: block;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0 4px 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  transition: transform 0.2s ease, color 0.2s ease;
  font-size: 10px; /* Small arrow */
}

.dropdown-toggle:hover {
  color: #fff;
}

.nav-dropdown-container.show .dropdown-toggle {
  transform: rotate(180deg);
  color: #fff;
}

/* Mobile Adjustments for Toggle */
@media (max-width: 900px) {
  .nav-dropdown-container {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .nav-dropdown-container > a {
    flex-grow: 1;
    width: auto;
  }

  .dropdown-toggle {
    padding: 12px 20px; /* Larger touch target */
    font-size: 12px;
    height: 100%;
  }

  .nav-dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,0.02); /* Slight background for sub-items */
    margin-top: 4px;
    display: none; /* Hidden by default on mobile too */
  }

  .nav-dropdown-menu a {
    padding-left: 32px !important; /* Indent sub-items */
    font-size: 14px !important;
  }
}





/* --- Mobile Dropdown Fixes --- */
@media (max-width: 900px) {
  .nav-dropdown-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto !important; /* Force container to grow */
    min-height: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }

  /* The main link */
  .nav-dropdown-container > a {
    flex: 1;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding: 0 0 12px 0 !important;
    display: flex;
    align-items: center;
    font-size: 1.1rem !important;
    color: #fff !important;
    height: auto;
  }

  /* The toggle button */
  .dropdown-toggle {
    width: 50px;
    padding: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-left: 1px solid rgba(255,255,255,.05);
    background: transparent;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    height: auto;
  }

  .dropdown-toggle svg {
    width: 14px;
    height: 14px;
  }

  /* The dropdown menu */
  .nav-dropdown-menu {
    position: relative !important; /* Ensure it takes up space */
    top: auto !important;
    left: auto !important;
    float: none !important;
    flex-basis: 100%;
    width: 100%;
    box-shadow: none;
    border: none;
    background: rgba(0,0,0,0.2);
    margin: 0;
    padding: 0;
    display: none;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.05);
    transform: none !important; /* Disable any transforms */
  }

  /* When open */
  .nav-dropdown-container.show .nav-dropdown-menu {
    display: block;
    animation: none !important; /* Disable desktop animation */
  }

  .nav-dropdown-menu a {
    padding: 14px 0 14px 20px !important;
    font-size: 1rem !important;
    color: rgba(255,255,255,0.7) !important;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    margin-bottom: 0 !important;
    display: block;
  }

  .nav-dropdown-menu a:last-child {
    border-bottom: none;
  }
}


/* --- Desktop Dropdown Spacing Fix --- */
@media (min-width: 901px) {
  .nav-dropdown-menu {
    margin-top: 28px !important; /* Push it down */
    left: -10px !important; /* Slight adjustment to align better if needed, or keep 0 */
  }

  /* Optional: Add a small arrow/triangle pointing up? 
     The user didn't ask for it, but it looks nice. 
     For now, just the spacing. */
}

/* --- Site Footer (New) --- */
.site-footer {
  width: 100%;
  padding: 40px 20px;
  background: radial-gradient(circle at 50% 0%, rgba(0, 224, 255, 0.05), transparent 70%), var(--bg, #0b0e14);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 50px;
  text-align: center;
  position: relative;
  z-index: 10;
  clear: both;
}

.site-footer__content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Navigation Links */
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.site-footer__nav a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.site-footer__nav a:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Bottom Section (Legal + Copy) */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 4px;
  width: 100%;
  max-width: 600px;
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
}

.site-footer__legal a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.site-footer__legal a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__separator {
  color: rgba(255, 255, 255, 0.2);
}

.site-footer__copyright {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 5px;
    justify-items: center;
    width: 100%;
  }

  .site-footer__nav a {
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .site-footer {
    padding: 25px 15px;
  }

  .site-footer__content {
    gap: 20px;
  }
}

/* Active Nav Link */
.nav a.active {
  color: var(--accent) !important;
  text-shadow: 0 0 12px rgba(0, 224, 255, 0.4);
  font-weight: 500;
}

/* --- Social Media Icons --- */
.site-footer__social {
  display: flex;
  gap: 24px;
  margin: 10px 0 4px 0; /* Spacing between Nav and Social */
  justify-content: center;
  align-items: center;
  width: 100%;
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 8px;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.site-footer__social a:hover {
  background: rgba(255, 255, 255, 0.05);
}

.social-icon {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  transition: all 0.2s ease;
  /* Invert black icons to white for dark theme */
  filter: invert(1); 
}

.site-footer__social a:hover .social-icon {
  opacity: 1;
  transform: scale(1.1);
  filter: invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* Mobile Adjustments */
@media (max-width: 600px) {
  .site-footer__social {
    gap: 20px;
    margin: 10px 0 4px 0;
  }
  .social-icon {
    width: 22px; /* Slightly larger touch target */
    height: 22px;
  }
}

/* --- Improved Mobile Dropdown Styles --- */
@media (max-width: 768px) {
  .nav-dropdown-menu {
    position: static !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: none !important;
    display: none; /* Toggled by JS */
    overflow: hidden;
  }

  /* When active (if JS toggles display block) */
  .nav-dropdown-container.active .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu a {
    display: flex !important;
    align-items: center;
    padding: 12px 16px !important;
    margin-bottom: 4px !important;
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
  }

  .nav-dropdown-menu a:last-child {
    margin-bottom: 0 !important;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    transform: translateX(4px);
  }

  /* Add a small indicator or icon if desired, e.g. a bullet or arrow */
  

  
}