:root {
  color-scheme: dark;
  --bg: #050b17;
  --panel: #0b1425;
  --panel-strong: #101d31;
  --line: #203754;
  --line-soft: rgba(91, 146, 196, 0.22);
  --text: #edf6ff;
  --muted: #9db0c5;
  --accent: #56edbc;
  --accent-blue: #62b9ff;
  --warning: #f1c66e;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line-soft); background: rgba(5, 11, 23, 0.88); backdrop-filter: blur(18px); }
.site-header__inner { width: min(var(--max), calc(100% - 40px)); min-height: 68px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(86, 237, 188, 0.55); border-radius: 10px; background: linear-gradient(145deg, rgba(86, 237, 188, 0.18), rgba(98, 185, 255, 0.13)); color: var(--accent); font: 900 18px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.brand > span:last-child { display: grid; gap: 2px; }
.brand strong { font-size: 14px; letter-spacing: 0.04em; }
.brand small { color: #6f849b; font: 10px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: 13px; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); }
.site-nav__cta { padding: 9px 14px; border: 1px solid rgba(86, 237, 188, 0.48); border-radius: 8px; color: var(--accent); }

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); background: radial-gradient(circle at 78% 20%, rgba(47, 124, 210, 0.18), transparent 32%), linear-gradient(145deg, #061020 0%, #07152a 53%, #060c17 100%); }
.hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(84, 151, 212, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(84, 151, 212, 0.055) 1px, transparent 1px); background-size: 56px 56px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.hero__glow { position: absolute; top: 20%; right: 10%; width: 320px; height: 320px; border-radius: 50%; background: rgba(86, 237, 188, 0.08); filter: blur(70px); }
.hero__content { position: relative; width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 96px 0 70px; }
.eyebrow, .section-index { margin: 0 0 14px; color: var(--accent); font: 800 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.12em; }
.hero h1 { max-width: 920px; margin: 0; font-size: clamp(44px, 7vw, 78px); line-height: 1.02; letter-spacing: -0.04em; }
.hero h1 span { display: block; margin-top: 13px; color: #a7c4df; font-size: clamp(24px, 4vw, 46px); font-weight: 520; letter-spacing: -0.025em; }
.hero__lead { max-width: 850px; margin: 30px 0 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { min-height: 44px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: rgba(10, 24, 43, 0.68); color: var(--text); font-size: 14px; font-weight: 700; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); border-color: var(--accent-blue); outline: none; }
.button--primary { border-color: var(--accent); background: var(--accent); color: #03130e; }
.button--primary:hover, .button--primary:focus-visible { border-color: #9affdf; background: #75f6cd; }
.hero__facts { max-width: 900px; margin: 52px 0 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line-soft); }
.hero__facts div { display: grid; gap: 7px; }
.hero__facts dt { color: var(--accent-blue); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.hero__facts dd { margin: 0; color: var(--muted); font-size: 13px; }

.page-layout { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 70px 0 100px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 70px; align-items: start; }
.toc { position: sticky; top: 100px; display: grid; gap: 4px; }
.toc p { margin: 0 0 10px; color: #6f849b; font: 800 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.toc a { padding: 9px 12px; border-left: 1px solid var(--line); color: #8296ab; font-size: 12px; line-height: 1.4; }
.toc a:hover, .toc a:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.article { min-width: 0; }
.article-meta { padding: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px 22px; border-bottom: 1px solid var(--line-soft); color: #73879c; font-size: 12px; }
.article-section { padding: 72px 0 0; }
.article-section h2, .sources h2, .article-cta h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; letter-spacing: -0.025em; }
.article-section > p:not(.section-index):not(.fine-print) { margin: 22px 0 0; color: #b0c0d0; font-size: 16px; line-height: 1.95; }
.article-section code { color: #8bd4ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.callout { margin-top: 28px; padding: 22px 24px; border: 1px solid rgba(86, 237, 188, 0.3); border-left: 3px solid var(--accent); border-radius: 8px; background: rgba(86, 237, 188, 0.055); }
.callout strong { color: var(--accent); font-size: 13px; }
.callout p { margin: 8px 0 0; color: #c2d2df; line-height: 1.7; }
.concept-grid, .tips-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.concept-grid article, .tips-grid article { padding: 22px; border: 1px solid var(--line-soft); border-radius: 9px; background: linear-gradient(145deg, rgba(16, 29, 49, 0.85), rgba(9, 18, 33, 0.85)); }
.concept-grid span, .tips-grid span { color: var(--accent-blue); font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.concept-grid h3, .tips-grid h3 { margin: 15px 0 0; font-size: 17px; }
.concept-grid p, .tips-grid p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.process { margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; }
.process li { padding: 20px; display: grid; grid-template-columns: 34px 1fr; gap: 14px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(10, 21, 38, 0.74); }
.process li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: rgba(98, 185, 255, 0.1); color: var(--accent-blue); font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.process strong { font-size: 15px; }
.process p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.calculator { margin-top: 28px; padding: 24px; border: 1px solid rgba(98, 185, 255, 0.34); border-radius: 12px; background: linear-gradient(145deg, rgba(16, 29, 49, 0.94), rgba(7, 15, 28, 0.96)); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22); }
.calculator label, .pricing-fields legend { color: #d7e5f1; font-size: 13px; font-weight: 700; }
.calculator textarea { width: 100%; margin-top: 10px; padding: 16px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; outline: none; background: #07101e; color: var(--text); line-height: 1.7; }
.calculator textarea:focus, .pricing-fields input:focus, .pricing-fields select:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(98, 185, 255, 0.1); }
.calculator__actions { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.calculator__actions button { padding: 7px 11px; border: 1px solid var(--line); border-radius: 6px; background: #0b1728; color: #b8c9d8; cursor: pointer; font-size: 12px; }
.calculator__actions button:hover { border-color: var(--accent); color: var(--accent); }
.calculator__actions span { margin-left: auto; color: #6e8499; font-size: 11px; }
.calculator__results { margin-top: 20px; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; }
.result-card { min-height: 112px; padding: 18px; display: grid; align-content: space-between; border: 1px solid var(--line-soft); border-radius: 8px; background: #091424; }
.result-card--primary { border-color: rgba(86, 237, 188, 0.38); background: rgba(86, 237, 188, 0.07); }
.result-card span, .result-card small { color: #7890a6; font-size: 11px; }
.result-card strong { margin: 11px 0; color: var(--text); font: 800 28px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.result-card--primary strong { color: var(--accent); }
.pricing-fields { margin: 20px 0 0; padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; border: 1px solid var(--line-soft); border-radius: 8px; }
.pricing-fields legend { padding: 0 8px; }
.pricing-fields label { display: grid; gap: 5px; }
.pricing-fields small { color: #72889d; font-size: 10px; font-weight: 500; }
.pricing-fields input, .pricing-fields select { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; outline: none; background: #07101e; color: var(--text); }
.cost-summary { margin-top: 14px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; align-items: center; border-radius: 8px; background: rgba(98, 185, 255, 0.08); }
.cost-summary span { color: #a9bdcf; font-size: 13px; }
.cost-summary strong { color: var(--accent-blue); font: 800 24px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.cost-summary small { grid-column: 1 / -1; color: #71879b; font-size: 10px; line-height: 1.5; }
.fine-print { margin: 14px 0 0; color: #758ba0; font-size: 12px; line-height: 1.75; }

.formula { margin-top: 28px; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--panel); color: #c8d8e6; font: 700 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.formula span { padding: 8px 11px; border-radius: 6px; background: rgba(98, 185, 255, 0.08); }
.formula b { color: var(--accent); }
pre { margin: 24px 0 0; padding: 20px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 9px; background: #040a13; }
pre code { color: #a9dbff !important; font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
.provider-table { margin-top: 26px; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 9px; }
table { width: 100%; min-width: 720px; border-collapse: collapse; }
th, td { padding: 15px 16px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; font-size: 13px; line-height: 1.6; }
th { background: #0d1a2d; color: #7f96ab; font: 800 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
td { color: #afc0cf; }
td:first-child { color: var(--text); font-weight: 700; }
td a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }
.tips-grid { grid-template-columns: repeat(2, 1fr); }
.faq-list { margin-top: 28px; border-top: 1px solid var(--line-soft); }
.faq-list details { border-bottom: 1px solid var(--line-soft); }
.faq-list summary { padding: 20px 4px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-weight: 700; list-style: none; }
.faq-list summary::after { color: var(--accent); content: "+"; font: 500 22px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { margin: -4px 0 0; padding: 0 34px 22px 4px; color: var(--muted); line-height: 1.8; }
.sources { margin-top: 72px; padding: 28px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel); }
.sources h2 { font-size: 23px; }
.sources ul { margin: 18px 0 0; padding-left: 20px; color: var(--muted); }
.sources li + li { margin-top: 10px; }
.sources a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }
.article-cta { margin-top: 72px; padding: 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(86, 237, 188, 0.32); border-radius: 12px; background: radial-gradient(circle at 100% 0, rgba(86, 237, 188, 0.12), transparent 45%), var(--panel); }
.article-cta h2 { max-width: 650px; font-size: 30px; }
.article-cta p:not(.section-index) { margin: 12px 0 0; color: var(--muted); line-height: 1.7; }
.article-cta > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }

.site-footer { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 30px 0 40px; display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center; border-top: 1px solid var(--line-soft); color: #74899d; font-size: 12px; }
.site-footer > div { display: grid; gap: 5px; }
.site-footer strong { color: var(--text); font-size: 14px; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer nav a:hover { color: var(--accent); }
.site-footer p { margin: 0; }

@media (max-width: 920px) {
  .site-nav a:not(.site-nav__cta) { display: none; }
  .hero__content { padding-top: 74px; }
  .page-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .pricing-fields { grid-template-columns: repeat(2, 1fr); }
  .article-cta { align-items: flex-start; flex-direction: column; }
  .article-cta > div:last-child { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .site-header__inner, .hero__content, .page-layout, .site-footer { width: min(100% - 28px, var(--max)); }
  .site-header__inner { min-height: 60px; }
  .site-nav__cta { padding: 8px 10px; }
  .hero__content { padding: 60px 0 50px; }
  .hero h1 { font-size: 42px; }
  .hero h1 span { font-size: 24px; line-height: 1.25; }
  .hero__lead { font-size: 15px; }
  .hero__facts { grid-template-columns: 1fr; gap: 15px; }
  .page-layout { padding: 48px 0 70px; }
  .article-section { padding-top: 56px; }
  .concept-grid, .tips-grid, .process, .calculator__results { grid-template-columns: 1fr; }
  .calculator { padding: 17px; }
  .calculator__actions { flex-wrap: wrap; }
  .calculator__actions span { width: 100%; margin: 4px 0 0; }
  .pricing-fields { grid-template-columns: 1fr; }
  .cost-summary { grid-template-columns: 1fr; }
  .cost-summary small { grid-column: auto; }
  .article-cta { padding: 24px; }
  .site-footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}