:root{
  /* Light (defaults) */
  --brand-navy:#142533;
  --brand-orange:#E07A2B;
  --brand-ink:#101418;
  --brand-cloud:#F5F7FA;
  --brand-slate:#6A7683;
  --brand-white:#FFFFFF;

  /* Theme tokens */
  --bg: var(--brand-cloud);
  --surface: var(--brand-white);
  --text: var(--brand-ink);
  --muted: var(--brand-slate);
  --border:#e7ecf2;

  --radius:14px;
  --shadow:0 6px 18px rgba(20,37,51,.08);
}

/* Auto-dark (system preference) */
/*@media (prefers-color-scheme: dark) {*/
/*  :root {*/
/*    --bg:#0E141A;*/
/*    --surface:#131B22;*/
/*    --text:#E9EEF4;*/
/*    --muted:#9AA7B3;*/
/*    --border:#22303D;*/
    /*--brand-navy:#E9EEF4;  */
    /* nav links readable on dark 
/*    --shadow:0 6px 18px rgba(0,0,0,.5);*/
/*  }*/
/*}*/

/* Explicit themes (JS toggle overrides media query) */
:root[data-theme="light"]{
  --bg:#F5F7FA; --surface:#FFFFFF; --text:#101418; --muted:#6A7683; --border:#e7ecf2; --brand-navy:#142533; --shadow:0 6px 18px rgba(20,37,51,.08);
}
:root[data-theme="dark"]{
  --bg:#0E141A; --surface:#131B22; --text:#E9EEF4; --muted:#9AA7B3; --border:#22303D; --brand-navy:#E9EEF4; --shadow:0 6px 18px rgba(0,0,0,.5);
  /* optional, slightly softer on dark */
  --brand-orange:#F09952;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 20px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--brand-navy)}
/* Logo size */
.logo-lg{width:175px;height:auto;max-width:none}
.brand-wordmark{font-weight:600;letter-spacing:.2px}
.brand-wordmark strong{color:var(--brand-orange);font-weight:800}

/* Nav */
.nav-toggle{display:none;background:none;border:0;font-size:1.3rem}
.nav-list{list-style:none;display:flex;gap:22px;margin:0;padding:0}
.nav-list a{color:var(--brand-navy);text-decoration:none;font-weight:600}
.nav-list a:hover{color:var(--brand-orange)}
.has-children{position:relative}

/* Show submenu on hover */
.has-children:hover .dropdown{display:block}

/* Dropdown */
.dropdown{
  display:none;position:absolute;top:100%;left:0;z-index:1000;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow);padding:8px 0;min-width:220px
}
.dropdown li{list-style:none}
.dropdown a{display:block;padding:10px 14px;font-weight:500;color:var(--text);text-decoration:none}
.dropdown a:hover{background:rgba(0,0,0,.04)}
:root[data-theme="dark"] .dropdown a:hover{background:rgba(255,255,255,.06)}

/* Footer */
.site-footer{margin-top:48px;background:var(--surface);border-top:1px solid var(--border)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;color:var(--muted)}
.footer-nav a{color:var(--muted);text-decoration:none;margin-left:14px}
.footer-nav a:hover{color:var(--brand-orange)}

/* Page sections */
.hero{
  background:linear-gradient(180deg, var(--surface), var(--bg));
  padding:56px 0;border-bottom:1px solid var(--border)
}
.hero h1{margin:0 0 10px;font-size:2rem;color:var(--brand-navy)}
.hero p{margin:0;color:var(--muted)}
.grid{display:grid;gap:18px}
.grid.auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)
}
.button{
  display:inline-block;background:var(--brand-orange);color:#fff;text-decoration:none;
  padding:10px 14px;border-radius:10px;font-weight:700
}
.button:hover{filter:brightness(.95)}

/* Responsive */
@media (max-width:840px){
  .nav-toggle{display:inline-block}
  .nav-list{
    display:none;position:absolute;right:20px;top:64px;
    background:var(--surface);padding:14px;border:1px solid var(--border);
    border-radius:12px;box-shadow:var(--shadow);flex-direction:column;width:240px
  }
  .nav[aria-expanded="true"] .nav-list{display:flex}
}

/* Theme toggle button */
.theme-toggle{
  position: relative;
  z-index: 1100;
  width:40px;height:40px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface); box-shadow:var(--shadow); cursor:pointer;
}
.theme-toggle::before{ content:"🌙"; display:block; text-align:center; line-height:38px; font-size:18px; }
:root[data-theme="dark"] .theme-toggle::before{ content:"☀️"; }


.product{display:flex;gap:18px;align-items:flex-start}
.product-cover{width:180px;height:auto;border-radius:10px;border:1px solid var(--border)}
.product-body{flex:1}
.product-title{margin:0 0 4px}
.product-subtitle{margin:0 0 10px;color:var(--muted)}
.product-status{margin:0 0 10px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.85rem}
.badge-soon{background:rgba(224,122,43,.12);color:var(--brand-orange);border:1px solid rgba(224,122,43,.35)}
.notify-form{display:flex;gap:10px;margin-top:10px}
.notify-form input{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}
@media (max-width:720px){ .product{flex-direction:column;align-items:stretch} }