/* ========= Modern skin for TaxWang (2025) ========= */
/* Design tokens */
:root {
  --bg: #ffffff; --text: #0f172a; --muted: #475569;
  --line:#e5e7eb; --card:#ffffff; --brand:#111827; --accent:#5b8cff;
  --radius:16px; --shadow: 0 10px 30px rgba(2,6,23,.06);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root { --bg:#0b1220; --text:#e5e7eb; --muted:#94a3b8; --line:#1f2937; --card:#0f182b; --brand:#e5e7eb; --accent:#7aa2ff; --shadow:0 10px 30px rgba(0,0,0,.35); }
}
html[data-theme="light"] :root { color-scheme: light; }
html[data-theme="dark"]  :root { color-scheme: dark; }
html,body{background:var(--bg); color:var(--text);}

/* Container + rhythm */
.nw-container{max-width:1120px; margin:0 auto; padding:0 20px;}
.nw-main{padding:24px 0 40px;}
.nw-section{margin:36px 0;}
.nw-h2{font-size:1.125rem; font-weight:800; margin:0 0 10px 0}

/* Header */
.nw-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px); background:color-mix(in oklab, var(--bg) 80%, transparent); border-bottom:1px solid color-mix(in oklab, var(--line) 70%, transparent); transition:box-shadow .3s}
.nw-header[data-scroll="down"]{ box-shadow: 0 6px 18px rgba(2,6,23,.08); }
.nw-logo{font-weight:900; font-size:1.25rem; text-decoration:none; color:var(--text)}
.nw-nav{display:flex; gap:18px; align-items:center;}
.nw-nav a{color:var(--text); text-decoration:none; opacity:.9; padding:10px 0; border-bottom:2px solid transparent}
.nw-nav a.is-active{border-color:var(--text)}
.nw-cta{padding:8px 12px; border:1px solid var(--line); border-radius:999px}
.nw-menu,.nw-theme{display:none; border:1px solid var(--line); background:transparent; border-radius:10px; padding:8px 10px; color:var(--text)}
.nw-header .nw-container{display:flex; align-items:center; gap:14px; height:60px}
html.nav-open .nw-nav{display:flex}

/* Tabbar (mobile horizontal scroll) */
.nw-tabbar{border-bottom:1px solid var(--line); background:var(--bg)}
.nw-tab-scroll{display:flex; gap:10px; padding:10px 0; overflow:auto; scrollbar-width:none}
.nw-tab-scroll::-webkit-scrollbar{display:none}
.nw-pill{display:inline-block; padding:10px 12px; border-radius:999px; border:1px solid var(--line); text-decoration:none; color:var(--text); white-space:nowrap; background:var(--card)}
.nw-pill.is-on{background:var(--brand); color:var(--bg); border-color:var(--brand)}

/* Hero (gradient + glass) */
.nw-hero{position:relative; margin-top:12px}
.nw-hero-bg{height:220px; border-radius:20px; background:
  radial-gradient(1200px 220px at 10% -20%, color-mix(in oklab, var(--accent) 50%, transparent), transparent 60%),
  linear-gradient(120deg, color-mix(in oklab, var(--accent) 35%, var(--bg)) 0%, color-mix(in oklab, var(--brand) 10%, var(--bg)) 100%);
  box-shadow:var(--shadow);}
.nw-hero-inner{position:relative; margin-top:-160px; padding:18px; border-radius:20px; background:color-mix(in oklab, var(--bg) 85%, transparent); border:1px solid color-mix(in oklab, var(--line) 60%, transparent); backdrop-filter:blur(10px); box-shadow:var(--shadow)}
.nw-hero-title{font-size:clamp(28px, 4vw, 44px); font-weight:900; margin:4px 0}
.nw-hero-title span{color:var(--accent)}
.nw-hero-sub{color:var(--muted); margin:8px 0 14px}
.nw-btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--line); color:var(--text); text-decoration:none; background:var(--card)}
.nw-btn--primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.nw-hero-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Cards & grid with container queries */
.nw-grid{display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); container-type:inline-size;}
@container (min-width:720px){ .nw-grid{grid-template-columns:repeat(3, 1fr);} }
.nw-card{display:block; padding:16px; border-radius:16px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); text-decoration:none; color:var(--text); transition:transform .12s}
.nw-card:hover{transform:translateY(-2px)}
.nw-card h3{margin:0 0 6px 0; font-size:1rem; font-weight:800}
.nw-card p{margin:0; color:var(--muted)}

/* FAQ */
.nw-faq{border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--card); margin:10px 0}
.nw-faq > summary{cursor:pointer; font-weight:700}

/* Footer */
.nw-footer{border-top:1px solid var(--line); margin-top:24px; background:color-mix(in oklab, var(--bg) 90%, transparent)}
.nw-footer-grid{display:grid; gap:16px; padding:20px 0}
.nw-footer-grid nav h4{margin:0 0 8px 0; font-size:.9rem; opacity:.9}
.nw-footer-grid ul{list-style:none; padding:0; margin:0}
.nw-footer-grid a{text-decoration:none; color:var(--text); opacity:.9}
.nw-foot-logo{font-weight:900; font-size:1.1rem}
.nw-bottom{border-top:1px solid var(--line); padding:12px 0; text-align:center; color:var(--muted); font-size:.9rem}

/* Mobile nav collapse */
@media (max-width: 900px){
  .nw-nav{ display:none; flex-direction:column; position:absolute; right:20px; top:60px; background:var(--card); border:1px solid var(--line); padding:8px 12px; border-radius:14px; box-shadow:var(--shadow); }
  .nw-menu,.nw-theme{display:inline-flex; align-items:center; justify-content:center}
}

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* === Force Dark Mode (appended) === */
html { color-scheme: dark !important; }
:root {
  --bg: #0b1220 !important;
  --text: #e5e7eb !important;
  --muted: #94a3b8 !important;
  --line: #1f2937 !important;
  --card: #0f182b !important;
  --brand: #e5e7eb !important;
  --accent: #7aa2ff !important;
  --shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}
html, body { background: var(--bg) !important; color: var(--text) !important; }