/* Global Site Styles – Compoundingly */

/* =========================
   0) THEME TOKENS
   ========================= */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#60636b;
  --border:#e6e6eb;
  --ring:#3b82f6;

  --soft:#f7f7fa;
  --radius:14px;
  --shadow:0 8px 24px rgba(17,17,17,.06);

  --link:#2563eb;
  --icon:#6b7280;
  --nav-bg:#ffffff;
  --menu-bg:#ffffff;
  --hover:#f5f5f7;

  --footer-text:#8a8f98;
  --meta:#ffffff;

  /* Brand CTA (light) */
  --cta-start:#6a5acd;
  --cta-mid:#4fb1e3;
  --cta-end:#00b894;
  --cta-text:#ffffff;
  --cta-shadow:0 8px 18px rgba(0,0,0,.18);
  --cta-shadow-hover:0 12px 26px rgba(0,0,0,.24);

  /* Form control baseline height */
  --control-h:44px;
}
html[data-theme="dark"]{
  --bg:#0b0b0f;
  --text:#f2f2f5;
  --muted:#b0b0bb;
  --border:#23232a;
  --ring:#60a5fa;

  --soft:#14141a;

  --link:#93c5fd;
  --icon:#b7b7c6;
  --nav-bg:#111218;
  --menu-bg:#111218;
  --hover:#191a22;

  --footer-text:#a9a9b4;
  --meta:#0b0b0f;

  /* Brand CTA (dark) */
  --cta-start:#7c6fed;
  --cta-mid:#5fc7f2;
  --cta-end:#28d7aa;
  --cta-text:#ffffff;
  --cta-shadow:0 10px 22px rgba(0,0,0,.35);
  --cta-shadow-hover:0 14px 30px rgba(0,0,0,.45);
}

/* =========================
   1) RESET & BASE
   ========================= */
*{ box-sizing:border-box; }
html, body{
  margin:0;
  padding:0;
  min-height:100%;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  display:flex;
  flex-direction:column;
}
img,svg{ max-width:100%; height:auto; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* =========================
   2) LAYOUT
   ========================= */
.container{ max-width:1100px; margin:0 auto; padding:0 16px; }
main{ flex:1; padding:24px 16px; }

/* =========================
   3) TYPOGRAPHY & CARDS
   ========================= */
h1,h2,h3,h4,h5{ font-weight:700; margin:0 0 12px; }
p{ margin:0 0 16px; color:var(--text); }
.muted{ color:var(--muted); }

.card{
  background:var(--menu-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.divider{ height:1px; background:var(--border); margin:18px 0; }
.fine{ color:var(--footer-text); font-size:13px; margin-top:6px; }

/* =========================
   3B) HERO
   ========================= */
.hero{ max-width:820px; margin:0 auto 46px auto; text-align:center; }
.hero h1{ font-size:34px; margin:0 0 10px; }
.hero p{ color:var(--muted); font-size:18px; margin:0 auto; }

/* =========================
   3C) FEATURES GRID
   ========================= */
.features{ display:grid; grid-template-columns:1fr; gap:22px; margin-top:34px; }
@media (min-width:720px){ .features{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .features{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.card h2{ font-size:20px; margin:2px 0 10px; }
.card p{ font-size:14.5px; color:var(--muted); min-height:40px; margin:0 0 14px; }

/* =========================
   3D) BRAND CTA (legacy gradient buttons)
   ========================= */
.card .cta{ display:block; margin-top:12px; text-align:center; }
.card .cta small{ display:block; margin-top:6px; color:var(--muted); }

.card a.cta,
.card a.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
  color:var(--cta-text) !important;
  background:linear-gradient(90deg,var(--cta-start) 0%,var(--cta-start) 22%,var(--cta-mid) 56%,var(--cta-end) 100%);
  box-shadow:var(--cta-shadow);
  border:1px solid rgba(255,255,255,.08);
  background-clip:padding-box;
  text-decoration:none !important;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  will-change:transform, box-shadow, filter;
}
.card a.cta:hover,
.card a.cta-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--cta-shadow-hover);
  filter:saturate(1.02);
  text-decoration:none;
}
.card a.cta:active,
.card a.cta-btn:active{ transform:translateY(0); filter:saturate(.98) brightness(.98); }
.card a.cta:focus-visible,
.card a.cta-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
@media (max-width:640px){
  .card a.cta,
  .card a.cta-btn{ width:100%; }
}

/* ==== Neutral inline CTA (no gradient) ==== */
.card a.cta-inline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--border);
  background:var(--menu-bg);
  border-radius:12px;
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.card a.cta-inline:hover{ background:var(--hover); transform:translateY(-1px); }
.card a.cta-inline:active{ transform:translateY(0); }
.card a.cta-inline .cta-prefix{ opacity:.9; }
.card a.cta-inline .cta-logo{ height:22px; width:auto; display:block; }
.card a.cta-inline .logo-dark{ display:none; }
.card a.cta-inline .cta-wordmark{ display:none; font-weight:800; letter-spacing:.01em; }

html[data-theme="dark"] .card a.cta-inline .logo-light{ display:none; }
html[data-theme="dark"] .card a.cta-inline .logo-dark{ display:block; }

@media (max-width:480px){
  .card a.cta-inline{ padding:9px 12px; }
  .card a.cta-inline .cta-logo{ height:20px; }
}

/* =========================
   4) ACCESSIBILITY
   ========================= */
.sr-only{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.sr-only:focus{
  position:static; width:auto; height:auto; padding:8px 12px; margin:8px;
  background:#111; color:#fff; border-radius:6px; z-index:9999;
}

/* =========================
   5) NAVIGATION
   ========================= */
nav{
  width:100%;
  background:var(--nav-bg);
  border-bottom:1px solid var(--border);
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  min-height:56px;
}
.nav-shell{ display:block; flex:1 1 auto; }
.nav-links{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
nav a, nav button{
  margin:0 12px;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}
nav button{
  background:none;
  border:0;
  cursor:pointer;
  padding:8px 10px;
  border-radius:6px;
}

/* Tools dropdown trigger */
.dropdown{ position:relative; display:inline-block; }
.dropdown > button{
  font-size:1.05rem;
  font-weight:600;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--soft);
}
.dropdown > button:hover{ background:var(--hover); }
html[data-theme="dark"] .dropdown > button{
  background:var(--soft);
  color:var(--text);
}

/* Dropdown menu */
.menu{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:none;
  min-width:260px;
  text-align:left;
  background:var(--menu-bg);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  padding:8px;
  z-index:3001;
}
.menu[aria-hidden="false"]{ display:block; }
.menu a,.menu .menu-section{ display:block; padding:10px 12px; border-radius:8px; }
.menu a{ color:var(--text); font-weight:500; }
.menu a:hover,.menu a:focus{ background:var(--hover); }
.menu .menu-section{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:4px;
}

/* Theme toggle */
.theme-toggle{
  position:absolute;
  right:16px;
  top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  font-weight:600;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  background:transparent;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .12s ease, box-shadow .12s ease;
  z-index:3002;
}
.theme-toggle:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.theme-toggle .icon{ width:18px; height:18px; display:inline-flex; }
.theme-toggle svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
@media (max-width:480px){ .theme-toggle #themeText{ display:none; } }

/* =========================
   5B) MOBILE NAV
   ========================= */
@media (max-width:640px){
  nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:10px 16px 12px;
    min-height:auto;
  }
  .theme-toggle{
    position:static;
    order:-1;
    align-self:flex-end;
    margin:0 0 8px;
  }
  .nav-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    column-gap:14px;
    row-gap:14px;
    justify-items:center;
    align-items:center;
    white-space:normal;
  }
  .nav-links > a, .nav-links > .dropdown{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .dropdown{ position:static; }
  .dropdown > button{
    width:100%;
    justify-content:center;
    background:transparent;
    border:0;
    padding:6px 4px;
    font-size:1rem;
  }
  .menu{
    position:fixed;
    left:12px; right:12px; top:64px; bottom:12px;
    transform:none;
    max-height:none;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:12px;
  }
  body.menu-open{ overflow:hidden; }
}

/* =========================
   6) FOOTER
   ========================= */
footer{
  text-align:center;
  padding:22px;
  border-top:1px solid var(--border);
  margin-top:28px;
  background:var(--nav-bg);
  color:var(--footer-text);
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:0 16px;
}
.legal{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:14px;
}
.legal .sep{ color:var(--footer-text); }
.legal a{ color:var(--footer-text); text-decoration:none; }
@media (max-width:640px){
  .legal{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .legal a, .legal .sep{ white-space:nowrap; }
}

/* Footer icons */
footer .icons{ display:flex; gap:14px; }
footer .icons a{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--icon);
  text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .12s ease, box-shadow .12s ease, color .15s ease, border-color .15s ease;
}
footer .icons a:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  border-color:transparent;
}
footer .icons svg{ width:20px; height:20px; display:block; }
footer .icons a[aria-label="Twitter / X"]:hover{ color:#1DA1F2; }
footer .icons a[aria-label="Instagram"]:hover{ color:#E1306C; }
footer .icons a[aria-label="YouTube"]:hover{ color:#FF0000; }
footer .icons a:focus-visible{ outline:none; }

.footer-inner .copy{
  width:100%;
  text-align:center;
  font-size:13px;
  color:var(--footer-text);
  padding-top:6px;
}

/* =========================
   7) GENERIC BUTTONS
   ========================= */
.btn{
  padding:12px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--menu-bg);
  cursor:pointer;
  font-weight:700;
  color:var(--text);
}
.btn-primary{
  border:0;
  background:linear-gradient(135deg,#7c3aed,#22c55e);
  color:#fff;
}
.btn-primary:hover{ filter:brightness(1.05); }