/* ============================================================
   AnyKey — Liquid Glass site (flat / transparent, iOS 26 feel)
   Shared across home / catalog / product / pricing.
   Flat glass = translucent SOLID fills (no backdrop-filter), so it
   clips cleanly everywhere. Vivid mesh wallpaper does the refraction.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-text); color: var(--ink-900);
  min-height: 100vh; -webkit-font-smoothing: antialiased;
  background-color: #EFEFFB;
  background-image:
    radial-gradient(30% 36% at 8% 4%,  rgba(110,86,247,0.42), transparent 62%),
    radial-gradient(28% 34% at 94% 2%, rgba(242,85,125,0.34), transparent 62%),
    radial-gradient(30% 38% at 96% 96%, rgba(251,140,40,0.30), transparent 62%),
    radial-gradient(32% 40% at 4% 98%, rgba(18,184,134,0.28), transparent 62%),
    linear-gradient(180deg, #F0EFFC, #F6F2FB);
  background-attachment: fixed;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
a { color: var(--brand-600); text-decoration: none; }

/* ---------- flat glass materials ---------- */
.g {  background: rgba(255,255,255,0.60); border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-rim-strong), var(--glass-shadow); border-radius: 26px; }
.g-strong { background: rgba(255,255,255,0.82); border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-rim-strong), var(--glass-shadow); border-radius: 34px; }
.g-pill { background: rgba(255,255,255,0.60); border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-rim-strong), var(--glass-shadow); border-radius: 999px; }

/* ---------- typography helpers ---------- */
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink-900); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-600); }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-600); }
.sec-head { text-align: center; max-width: 660px; margin: 0 auto; }
.sec-head h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(28px,4vw,42px); margin: 12px 0 0; }
.sec-head p { font-size: 18px; color: var(--ink-600); margin: 14px 0 0; line-height: 1.5; }

/* ---------- buttons ---------- */
.btn { appearance: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  border-radius: 999px; text-decoration: none; color: var(--ink-900);
  transition: transform .12s var(--ease-out), background .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.15em; height: 1.15em; }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn-md { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-glass { background: rgba(255,255,255,0.72); border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-rim-strong), var(--glass-shadow); }
.btn-glass:hover { background: rgba(255,255,255,0.92); }
.btn-primary { background: var(--brand-500); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), inset 0 0 0 1px rgba(70,49,196,0.45), 0 10px 26px -8px rgba(110,86,247,0.55); }
.btn-primary:hover { background: var(--brand-600); }
.btn-accent { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 10px 26px -8px rgba(14,15,19,0.22); }
.btn-white { background: rgba(255,255,255,0.96); color: var(--brand-700); box-shadow: inset 0 1px 0 #fff, 0 10px 26px -8px rgba(0,0,0,0.22); }
.btn-clear { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.36); }

/* ---------- nav ---------- */
.nav-shell { position: sticky; top: 16px; z-index: 50; padding: 0 24px; }
.nav { max-width: 1132px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 9px 9px 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand b { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--ink-900); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.nlink { position: relative; appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 600; color: var(--ink-700); padding: 9px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  transition: background .18s var(--ease-out), color .18s var(--ease-out); }
.nlink:hover, .nlink.active { background: rgba(255,255,255,0.55); color: var(--ink-900); }
.nlink svg { width: 15px; height: 15px; transition: transform .2s var(--ease-out); }
.spacer { flex: 1; }

/* mega-menu */
.menu { position: relative; }
.mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: 640px; max-width: calc(100vw - 32px); padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.menu:hover .mega { opacity: 1; visibility: visible; transform: translateX(-50%); }
.menu:hover .nlink svg { transform: rotate(180deg); }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.mega svg { width: 15px; height: 15px; flex: none; }
.mrow { display: flex; gap: 12px; padding: 12px; border-radius: 18px; text-decoration: none; transition: background .15s var(--ease-out); }
.mrow:hover { background: rgba(255,255,255,0.6); }
.mrow.soon { opacity: .72; }
.mrow img { width: 42px; height: 42px; flex: none; }
.mname { font-size: 14px; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 8px; margin: 0; }
.msub { font-size: 12.5px; color: var(--ink-500); margin: 4px 0 0; line-height: 1.4; }
.mall { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.55); font-weight: 700; font-size: 14px; color: var(--brand-600); }

/* ---------- badges / tags ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.badge.ok { background: rgba(18,184,134,0.16); color: #0C8F6A; }
.badge.soon { background: rgba(14,15,19,0.08); color: var(--ink-500); }
.badge.new { background: var(--brand-100); color: var(--brand-700); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag { font-size: 12px; font-weight: 600; color: var(--ink-600); background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.6); padding: 5px 10px; border-radius: 8px; }

/* ---------- tool cards ---------- */
.tools { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.tool { position: relative; padding: 24px; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,255,255,0.60); border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-rim-strong), var(--glass-shadow);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.tool:hover { transform: translateY(-5px); box-shadow: var(--glass-shadow-lg); }
.tool .glow { position: absolute; width: 160px; height: 160px; border-radius: 50%; top: -60px; right: -40px; filter: blur(38px); opacity: .5; }
.tool .top { display: flex; align-items: flex-start; gap: 14px; position: relative; }
.tool img { width: 50px; height: 50px; }
.tool h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--ink-900); }
.tool .desc { font-size: 14px; line-height: 1.5; color: var(--ink-600); margin: 0; position: relative; }
.tool .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tcta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; text-decoration: none; }

/* ---------- feature cards ---------- */
.features { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.feat { padding: 22px; border-radius: 22px; background: rgba(255,255,255,0.55);
  border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-rim-strong), var(--glass-shadow); }
.feat .ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--feat-tint, var(--brand-100)); color: var(--feat-accent, var(--brand-600)); margin-bottom: 14px; }
.feat .ic svg { width: 22px; height: 22px; }
.feat h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink-900); }
.feat p { font-size: 14px; line-height: 1.55; color: var(--ink-600); margin: 0; }

/* ---------- pricing ---------- */
.prices { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: start; }
.price { position: relative; padding: 28px; border-radius: 28px; display: flex; flex-direction: column; gap: 16px;
  background: rgba(255,255,255,0.64); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-rim-strong), var(--glass-shadow); }
.price.featured { background: rgba(255,255,255,0.82); box-shadow: inset 0 1px 0 #fff, 0 0 0 2px var(--brand-400), var(--glass-shadow-lg); }
.price .flag { position: absolute; top: -12px; left: 28px; background: var(--brand-500); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.price .pname { font-size: 15px; font-weight: 700; color: var(--ink-900); margin: 0; }
.price .pdesc { font-size: 13px; color: var(--ink-500); margin: 4px 0 0; }
.price .amount { display: flex; align-items: baseline; gap: 6px; }
.price .num { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -0.02em; color: var(--ink-900); }
.price .per { font-size: 14px; color: var(--ink-500); }
.price .old { font-size: 15px; color: var(--ink-300); text-decoration: line-through; }
.price ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.price li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-700); line-height: 1.4; }
.price .ck { flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; display: flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-600); }
.price .ck svg { width: 11px; height: 11px; }
.price .divider { height: 1px; background: rgba(14,15,19,0.08); }

/* switcher */
.switch { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.5); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-rim-strong); }
.switch button { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14px;
  color: var(--ink-500); padding: 8px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s var(--ease-out), color .15s var(--ease-out); }
.switch button.on { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-sm); }
.switch .mini { font-size: 11px; font-weight: 700; color: #0C8F6A; background: rgba(18,184,134,0.16); padding: 2px 7px; border-radius: 999px; }

/* comparison table */
.compare { border-radius: 26px; overflow: hidden; background: rgba(255,255,255,0.7); border: 1px solid var(--glass-rim); box-shadow: var(--glass-shadow); }
.compare .hd, .compare .rw { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.compare .hd { background: rgba(14,15,19,0.92); color: #fff; font-weight: 700; font-size: 14px; }
.compare .hd > div { padding: 16px 20px; text-align: center; }
.compare .hd > div:first-child { text-align: left; }
.compare .rw { border-top: 1px solid rgba(14,15,19,0.06); font-size: 14px; }
.compare .rw:nth-child(even) { background: rgba(255,255,255,0.4); }
.compare .rw > div { padding: 15px 20px; text-align: center; color: var(--ink-700); }
.compare .rw > div:first-child { text-align: left; font-weight: 600; color: var(--ink-900); }
.compare .yes { color: var(--brand-600); font-weight: 800; }
.compare .no { color: var(--ink-300); }

/* faq */
.faq { border-radius: 26px; padding: 4px 28px; background: rgba(255,255,255,0.62); border: 1px solid var(--glass-rim); box-shadow: var(--glass-shadow); }
.faq details { border-bottom: 1px solid rgba(14,15,19,0.07); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: 17px; font-weight: 700; color: var(--ink-900);
  display: flex; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pl { margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(14,15,19,0.05);
  color: var(--ink-500); display: flex; align-items: center; justify-content: center; transition: transform .25s var(--ease-out), background .15s, color .15s; }
.faq summary .pl svg { width: 13px; height: 13px; }
.faq details[open] summary .pl { transform: rotate(45deg); background: var(--brand-100); color: var(--brand-600); }
.faq .ans { padding: 0 40px 22px 0; font-size: 15px; line-height: 1.6; color: var(--ink-600); margin: 0; }

/* breadcrumb */
.crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-500); }
.crumb a { color: var(--ink-500); }
.crumb b { color: var(--ink-900); font-weight: 600; }

/* CTA block */
.cta { position: relative; overflow: hidden; border-radius: 40px; padding: 64px 40px; text-align: center; background: var(--cta-bg, var(--brand-500)); }
.cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 130% at 50% -10%, rgba(255,255,255,0.30), transparent 55%); }
.cta-in { position: relative; }
.cta h2 { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(30px,4.4vw,46px); letter-spacing: -0.02em; margin: 0; }
.cta p { color: rgba(255,255,255,0.9); font-size: 19px; margin: 16px auto 0; max-width: 540px; }
.cta .row { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* footer */
.ftr { margin-top: 40px; background: rgba(255,255,255,0.55); border-top: 1px solid var(--glass-rim); }
.ftr-in { max-width: 1180px; margin: 0 auto; padding: 56px 24px 28px; }
.ftr-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.ftr-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-500); max-width: 280px; }
.ftr h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); margin: 0 0 14px; font-weight: 700; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ftr ul a { color: var(--ink-600); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.ftr ul a:hover { color: var(--ink-900); }
.ftr .fdot { width: 6px; height: 6px; border-radius: 50%; }
.ftr-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(14,15,19,0.08); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; color: var(--ink-400); }

/* live widget */
.live { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 22px; width: min(340px,100%);
  background: rgba(255,255,255,0.82); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-rim-strong), var(--glass-shadow-lg); }
.live .ic { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--accent-social-100); color: var(--accent-social-500); display: flex; align-items: center; justify-content: center; }
.live .t1 { font-size: 14px; color: var(--ink-900); line-height: 1.35; }
.live .t2 { font-size: 12px; color: var(--ink-500); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.gd { width: 7px; height: 7px; border-radius: 50%; background: #12B886; animation: pulse 1.8s infinite; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ============================================================
   Motion — aurora drift, scroll reveal, hero intro, button sweep
   All gated on prefers-reduced-motion: no-preference.
   ============================================================ */

/* aurora: slow liquid blobs under the glass (static if reduced-motion) */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(70px); }
.aurora span:nth-child(1) { width: 48vw; height: 48vw; background: rgba(110,86,247,0.42); top: -14vw; left: -8vw; }
.aurora span:nth-child(2) { width: 44vw; height: 44vw; background: rgba(242,85,125,0.34); bottom: -16vw; right: -10vw; }
.aurora span:nth-child(3) { width: 38vw; height: 38vw; background: rgba(18,184,134,0.26); bottom: -12vw; left: 18vw; }

@media (prefers-reduced-motion: no-preference) {
  .aurora span:nth-child(1) { animation: drift1 26s ease-in-out infinite; }
  .aurora span:nth-child(2) { animation: drift2 31s ease-in-out infinite; }
  .aurora span:nth-child(3) { animation: drift3 36s ease-in-out infinite; }
  @keyframes drift1 { 50% { transform: translate(16vw, 12vw) scale(1.18); } }
  @keyframes drift2 { 50% { transform: translate(-15vw, -10vw) scale(1.12); } }
  @keyframes drift3 { 50% { transform: translate(10vw, -8vw) scale(1.2); } }

  /* scroll reveal — hidden from first paint, no flash */
  .js-anim .tool, .js-anim .feat, .js-anim .price,
  .js-anim .sec-head, .js-anim .compare, .js-anim .faq, .js-anim .cta,
  .js-anim [data-reveal] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    will-change: opacity, transform;
  }
  .js-anim .tool.in, .js-anim .feat.in, .js-anim .price.in,
  .js-anim .sec-head.in, .js-anim .compare.in, .js-anim .faq.in, .js-anim .cta.in,
  .js-anim [data-reveal].in { opacity: 1; transform: none; }

  /* hero / page-header intro stagger on load (inline-animated floats keep their own anim) */
  .js-anim .hero-grid > div > *, .js-anim .section--tight > * { animation: heroIn .75s var(--ease-out) both; }
  .js-anim .hero-grid > div > *:nth-child(2), .js-anim .section--tight > *:nth-child(2) { animation-delay: .07s; }
  .js-anim .hero-grid > div > *:nth-child(3), .js-anim .section--tight > *:nth-child(3) { animation-delay: .14s; }
  .js-anim .hero-grid > div > *:nth-child(4), .js-anim .section--tight > *:nth-child(4) { animation-delay: .21s; }
  .js-anim .hero-grid > div > *:nth-child(5), .js-anim .section--tight > *:nth-child(5) { animation-delay: .28s; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* glass specular sweep on solid buttons (hover) */
  .btn-primary, .btn-accent, .btn-white { position: relative; overflow: hidden; }
  .btn-primary::after, .btn-accent::after, .btn-white::after {
    content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent); transform: skewX(-18deg); }
  .btn-primary:hover::after, .btn-accent:hover::after, .btn-white:hover::after { animation: sweep .7s var(--ease-out); }
  @keyframes sweep { from { left: -65%; } to { left: 135%; } }

  /* tool card icon nudge on hover */
  .tool { } .tool img { transition: transform .25s var(--ease-out); }
  .tool:hover img { transform: translateY(-2px) rotate(-3deg) scale(1.04); }
}

/* modal (installation help / lead capture) */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(22,18,45,0.5); }
.modal-card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 32px; border-radius: 28px;
  background: rgba(255,255,255,0.95); border: 1px solid var(--glass-rim); box-shadow: var(--glass-shadow-lg); }
.modal-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(14,15,19,0.06); color: var(--ink-500); font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease-out), color .15s var(--ease-out); }
.modal-x:hover { background: rgba(14,15,19,0.10); color: var(--ink-900); }
.modal-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.modal-field label { font-size: 13px; font-weight: 600; color: var(--ink-800); }
.modal-field input, .modal-field textarea { font-family: inherit; font-size: 15px; color: var(--ink-900); background: #fff;
  border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; outline: 0; transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.modal-field input:focus, .modal-field textarea:focus { border-color: var(--brand-500); box-shadow: var(--ring); }
@media (prefers-reduced-motion: no-preference) {
  .modal-card { animation: modalIn .28s var(--ease-out); }
  @keyframes modalIn { from { transform: translateY(12px) scale(.98); } to { transform: none; } }
}

/* ---------- theme toggle (nav) ---------- */
.theme-toggle { appearance: none; cursor: pointer; flex: none; width: 42px; height: 42px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-700);
  background: rgba(255,255,255,0.55); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-rim-strong);
  transition: background .18s var(--ease-out), color .18s var(--ease-out); }
.theme-toggle:hover { background: rgba(255,255,255,0.92); color: var(--ink-900); }
.theme-toggle span { display: inline-flex; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ic-sun { display: none; }

/* ============================================================
   Dark theme — page-level treatment.
   The PALETTE (ink scale, surfaces, glass rims/shadows, borders)
   now lives in the design-system tokens (tokens/colors.css,
   glass.css, shadows.css) and applies to every component.
   Below are only overrides for the landing-page CLASSES that use
   literal white fills in light mode and aren't token-driven.
   ============================================================ */
[data-theme="dark"] body {
  background-color: #15161D;
  background-image:
    radial-gradient(32% 38% at 8% 4%,   rgba(110,86,247,0.30), transparent 64%),
    radial-gradient(30% 36% at 94% 2%,  rgba(110,86,247,0.16), transparent 64%),
    radial-gradient(30% 40% at 96% 96%, rgba(91,65,230,0.18),  transparent 64%),
    radial-gradient(34% 42% at 4% 98%,  rgba(110,86,247,0.14), transparent 64%),
    linear-gradient(180deg, #15161D, #101119);
}
/* glass surfaces */
[data-theme="dark"] .g,
[data-theme="dark"] .g-pill,
[data-theme="dark"] .tool,
[data-theme="dark"] .feat,
[data-theme="dark"] .price,
[data-theme="dark"] .faq { background: rgba(255,255,255,0.045); }
[data-theme="dark"] .g-strong { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .live { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .price.featured { background: rgba(110,86,247,0.12);
  box-shadow: inset 0 1px 0 var(--glass-rim-strong), 0 0 0 2px var(--brand-500), var(--glass-shadow-lg); }
[data-theme="dark"] .btn-glass { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .btn-glass:hover { background: rgba(255,255,255,0.13); }
[data-theme="dark"] .switch { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .switch button.on { background: rgba(255,255,255,0.14); color: var(--ink-900); }
[data-theme="dark"] .tag { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .nlink:hover,
[data-theme="dark"] .nlink.active { background: rgba(255,255,255,0.10); }
[data-theme="dark"] .mrow:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .ftr { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,0.08); color: var(--ink-700); }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.14); color: var(--ink-900); }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: inline-flex; }
/* accent chips that were tinted with light product colors */
[data-theme="dark"] .feat .ic { background: rgba(255,255,255,0.06); color: var(--acc, var(--brand-400)); }
[data-theme="dark"] .price .ck { background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .live .ic { background: rgba(242,85,125,0.18); }
[data-theme="dark"] .badge.soon { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .badge.new { background: rgba(110,86,247,0.20); color: var(--brand-300); }
/* dividers / hairlines (were dark ink over white) */
[data-theme="dark"] .price .divider,
[data-theme="dark"] .faq summary .pl { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .faq details { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ftr-bottom { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .mall { border-top-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .faq details[open] summary .pl { background: rgba(110,86,247,0.22); color: var(--brand-300); }
/* comparison table (pricing page) */
[data-theme="dark"] .compare { background: rgba(255,255,255,0.045); }
[data-theme="dark"] .compare .rw { border-top-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .compare .rw:nth-child(even) { background: rgba(255,255,255,0.03); }
/* modal */
[data-theme="dark"] .modal-card { background: #1B1D27; }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.62); }
[data-theme="dark"] .modal-x { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .modal-x:hover { background: rgba(255,255,255,0.14); }
[data-theme="dark"] .modal-field input,
[data-theme="dark"] .modal-field textarea { background: rgba(255,255,255,0.04); color: var(--ink-900); border-color: rgba(255,255,255,0.14); }

/* responsive */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .tools, .features, .prices { grid-template-columns: 1fr !important; }
  .ftr-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .nav-links { display: none; }
}