:root {
  --ink: #121322;
  --muted: #5b6075;
  --line: #dfe3ef;
  --paper: #ffffff;
  --soft: #f7f8fc;
  --yellow: #ffd400;
  --pink: #ff4fb3;
  --cyan: #00c9f2;
  --mint: #00e58b;
  --violet: #8a63ff;
  --shadow: 0 18px 55px rgba(31, 38, 74, .12);
  --shadow-sm: 0 10px 30px rgba(31, 38, 74, .09);
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65; text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(circle at 8% 8%, rgba(255,212,0,.17), transparent 24rem),
    radial-gradient(circle at 92% 16%, rgba(255,79,179,.13), transparent 27rem),
    radial-gradient(circle at 60% 92%, rgba(0,201,242,.10), transparent 30rem),
    linear-gradient(180deg, #fff 0%, #fbfbff 60%, #fff 100%);
}
a { color: #4338ca; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: #241aa9; }
img { display: block; max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 4px solid rgba(0,201,242,.42); outline-offset: 3px; border-radius: 8px; }
::selection { background: #ffdc64; color: #151515; }
.container { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.container-narrow { width: min(820px, calc(100% - 36px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; padding: 12px 16px; background: #111; color: #fff; border-radius: 10px; }
.skip-link:focus { top: 16px; }
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(18,19,34,.09); background: rgba(255,255,255,.91); backdrop-filter: blur(16px); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 900; letter-spacing: -.04em; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #111; font-weight: 950; background: linear-gradient(135deg,var(--yellow),var(--pink) 43%,var(--cyan) 72%,var(--mint)); box-shadow: 0 8px 22px rgba(255,79,179,.20); }
.brand-copy { display: grid; line-height: 1; }
.brand-name { font-size: 1.12rem; }
.brand-tag { color: var(--muted); font-size: .68rem; margin-top: 5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.desktop-nav { display: flex; align-items: center; gap: 4px; }
.nav-link { color: #33364a; text-decoration: none; font-size: .92rem; font-weight: 750; padding: 10px 11px; border-radius: 12px; }
.nav-link:hover, .nav-link[aria-current="page"] { background: #f0f1f7; color: #111; }
.nav-cta { margin-left: 6px; color: #111; background: linear-gradient(90deg,var(--yellow),#ffe968); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.menu-button { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; }
.menu-button span { display: block; width: 20px; height: 2px; margin: 4px auto; background: #171825; }
.mobile-nav { display: none; padding: 0 0 16px; }
.mobile-nav.open { display: grid; }
.mobile-nav .nav-link { padding: 12px 4px; border-radius: 0; border-bottom: 1px solid var(--line); }
.ticker { overflow: hidden; border-bottom: 1px solid rgba(18,19,34,.08); background: linear-gradient(90deg,var(--yellow),var(--pink),var(--cyan),var(--mint)); }
.ticker-track { display: flex; width: max-content; gap: 38px; padding: 9px 0; animation: ticker 30s linear infinite; font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #111; }
.ticker-track span::before { content: "◆"; margin-right: 9px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.23); }
@keyframes ticker { to { transform: translateX(-50%); } }
.gradient-text { background: linear-gradient(90deg,#d5a900 0%,#f13b9e 36%,#00aacc 68%,#00aa68 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { margin: 0 0 14px; font-size: .75rem; line-height: 1.2; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #6e39d6; }
.hero { padding: 76px 0 64px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.03fr) minmax(420px,.97fr); align-items: center; gap: 54px; }
h1,h2,h3,h4 { line-height: 1.12; letter-spacing: -.035em; margin-top: 0; }
h1 { font-size: clamp(2.7rem, 6vw, 5.9rem); margin-bottom: 24px; }
h2 { font-size: clamp(2rem, 4vw, 3.8rem); margin-bottom: 18px; }
h3 { font-size: 1.34rem; margin-bottom: 10px; }
.lede { font-size: clamp(1.06rem, 1.8vw, 1.27rem); color: var(--muted); max-width: 700px; margin: 0 0 28px; }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 14px; border: 1px solid transparent; text-decoration: none; font-weight: 850; color: #121322; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { color: #121322; transform: translateY(-2px); }
.button-primary { background: linear-gradient(90deg,var(--yellow),#ffe45e); box-shadow: 0 12px 25px rgba(255,212,0,.27); }
.button-secondary { background: #fff; border-color: #bfc4d4; box-shadow: var(--shadow-sm); }
.button-pink { background: linear-gradient(90deg,#ff7ac9,var(--pink)); color: #111; }
.hero-visual { position: relative; }
.hero-visual::before, .hero-visual::after { content:""; position:absolute; border-radius:999px; filter: blur(24px); opacity:.55; z-index:-1; }
.hero-visual::before { width:140px;height:140px;background:var(--pink);right:-20px;top:-30px; }
.hero-visual::after { width:170px;height:170px;background:var(--cyan);left:-35px;bottom:-35px; }
.hero-frame { border-radius: 34px; overflow: hidden; transform: rotate(1.2deg); box-shadow: 0 30px 80px rgba(67,56,202,.18); border: 7px solid #fff; }
.trust-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 36px; }
.stat { padding: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.78); border-radius: 16px; }
.stat strong { display: block; font-size: 1.25rem; }
.stat span { color: var(--muted); font-size: .78rem; }
.notice { padding: 19px 22px; border-radius: 18px; border: 1px solid #f3cb25; background: linear-gradient(90deg,#fff7c7,#fff); box-shadow: var(--shadow-sm); }
.notice strong { display: inline-block; margin-right: 5px; }
.section { padding: 88px 0; }
.section-soft { background: linear-gradient(180deg,rgba(246,247,252,.8),rgba(255,255,255,.9)); border-block: 1px solid rgba(18,19,34,.06); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.section-head p { max-width: 620px; color: var(--muted); margin: 0 0 7px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.card { position: relative; overflow: hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad { padding: 27px; }
.card:hover { border-color:#c6baf8; }
.card::after { content:""; position:absolute; inset:auto -40% -60% 25%; height:90px; transform:rotate(-8deg); background:linear-gradient(90deg,transparent,rgba(255,79,179,.13),rgba(0,201,242,.14),transparent); pointer-events:none; }
.icon-box { width:48px;height:48px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;font-weight:950;font-size:1.25rem;background:linear-gradient(135deg,#ffe25e,#ff7ac9 55%,#74e8ff); }
.card p { color:var(--muted); }
.card-link { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-weight:850; text-decoration:none; }
.process { counter-reset:step; display:grid; gap:16px; }
.process-item { counter-increment:step; display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:start; padding:24px; background:#fff; border:1px solid var(--line); border-radius:20px; }
.process-item::before { content:counter(step); width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,var(--yellow),var(--pink));font-weight:950; }
.process-item h3 { margin:2px 0 6px; }
.process-item p { margin:0;color:var(--muted); }
.band { padding:36px; border-radius:30px; background:linear-gradient(115deg,#fff4a8,#ffd6ef 42%,#c8f5ff 72%,#c9ffe8); border:1px solid rgba(18,19,34,.08); box-shadow:var(--shadow); }
.band-grid { display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center; }
.page-hero { padding:64px 0 48px; }
.page-hero h1 { font-size:clamp(2.45rem,5vw,4.9rem);max-width:980px; }
.breadcrumbs { font-size:.82rem;color:var(--muted);margin-bottom:24px; }
.breadcrumbs a { color:var(--muted); }
.breadcrumbs span { margin:0 7px; }
.content-layout { display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:48px;align-items:start; }
.prose { font-size:1.04rem; }
.prose h2 { font-size:clamp(1.65rem,3vw,2.35rem);margin:48px 0 16px; }
.prose h3 { margin-top:30px; }
.prose p { margin:0 0 19px;color:#36394b; }
.prose ul, .prose ol { margin:0 0 24px;padding-left:24px;color:#36394b; }
.prose li { margin:7px 0; }
.prose a { font-weight:750; }
.prose .lead-in { font-size:1.18rem;color:#404358; }
.callout { margin:30px 0; padding:24px; border-left:6px solid var(--pink); background:#fff4fa; border-radius:0 18px 18px 0; }
.callout-cyan { border-left-color:var(--cyan);background:#edfbff; }
.callout-yellow { border-left-color:var(--yellow);background:#fffbea; }
.table-wrap { overflow-x:auto;margin:28px 0;border:1px solid var(--line);border-radius:18px;background:#fff; }
table { width:100%;border-collapse:collapse;min-width:650px; }
th,td { padding:15px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top; }
th { background:#f5f6fb;font-size:.79rem;text-transform:uppercase;letter-spacing:.07em; }
tr:last-child td { border-bottom:0; }
.sidebar { position:sticky;top:100px;display:grid;gap:16px; }
.side-card { padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm); }
.side-card h2,.side-card h3 { font-size:1.05rem;margin-bottom:12px; }
.side-card ul { list-style:none;padding:0;margin:0; }
.side-card li + li { margin-top:9px; }
.side-card a { text-decoration:none;font-weight:720; }
.checklist { list-style:none!important;padding:0!important; }
.checklist li { position:relative;padding-left:30px;margin:11px 0!important; }
.checklist li::before { content:"✓";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:7px;display:grid;place-items:center;background:#c9ffe8;color:#087747;font-weight:950;font-size:.78rem; }
.matrix { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:26px 0; }
.matrix-card { padding:22px;border-radius:19px;border:1px solid var(--line);background:#fff; }
.matrix-card strong { display:block;margin-bottom:6px; }
.matrix-card:nth-child(1){box-shadow:inset 5px 0 0 var(--yellow)}
.matrix-card:nth-child(2){box-shadow:inset 5px 0 0 var(--pink)}
.matrix-card:nth-child(3){box-shadow:inset 5px 0 0 var(--cyan)}
.matrix-card:nth-child(4){box-shadow:inset 5px 0 0 var(--mint)}
.article-hero { padding:52px 0 36px; }
.article-header { max-width:960px; }
.article-header h1 { font-size:clamp(2.45rem,5.7vw,5.2rem);margin-bottom:20px; }
.article-meta { display:flex;flex-wrap:wrap;gap:10px 18px;color:var(--muted);font-size:.88rem;margin:22px 0 28px; }
.chip { display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#f0edff;color:#5a38b4;text-decoration:none;font-size:.74rem;font-weight:850; }
.article-image { width:min(100%,1040px);margin:0 auto 48px;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow); }
.article-shell { display:grid;grid-template-columns:minmax(0,760px) 280px;justify-content:center;gap:56px;align-items:start; }
.article-body { font-size:1.05rem; }
.article-body h2 { font-size:clamp(1.65rem,3vw,2.25rem);margin:48px 0 16px; }
.article-body p { color:#343748;margin:0 0 20px; }
.source-note { margin:34px 0;padding:21px 23px;background:#edfaff;border:1px solid #a8e9f7;border-radius:18px; }
.source-note a { font-weight:850; }
.article-tags { display:flex;flex-wrap:wrap;gap:8px;margin:36px 0; }
.toc { padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm); }
.toc h2 { font-size:1.04rem;margin-bottom:12px; }
.toc ol { margin:0;padding-left:19px; }
.toc li { margin:7px 0;font-size:.88rem; }
.toc a { color:#3e4053;text-decoration:none; }
.blog-card { display:flex;flex-direction:column; }
.blog-card img { width:100%;aspect-ratio:1/1;object-fit:cover; }
.blog-card-content { display:flex;flex:1;flex-direction:column;padding:22px; }
.blog-card h2,.blog-card h3 { font-size:1.28rem; }
.blog-card p { flex:1;margin-top:0; }
.blog-card .meta { font-size:.76rem;color:var(--muted);margin-bottom:10px; }
.archive-header { padding:60px 0 38px; }
.archive-header h1 { font-size:clamp(2.5rem,5vw,4.5rem); }
.archive-count { display:inline-block;margin-top:8px;padding:6px 10px;border-radius:999px;background:#fff4bd;font-size:.78rem;font-weight:850; }
.faq { display:grid;gap:12px; }
details { border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm); }
summary { cursor:pointer;list-style:none;padding:20px 54px 20px 22px;font-weight:850;position:relative; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+";position:absolute;right:22px;top:14px;font-size:1.7rem;color:#6e39d6; }
details[open] summary::after { content:"–"; }
details p { margin:0;padding:0 22px 22px;color:var(--muted); }
.definition-list { display:grid;gap:14px; }
.definition { padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff; }
.definition dt { font-weight:900;font-size:1.1rem; }
.definition dd { margin:5px 0 0;color:var(--muted); }
.site-footer { margin-top:80px;padding:62px 0 26px;background:linear-gradient(135deg,#fff2a6,#ffd8ef 38%,#c9f6ff 70%,#cbffe8);border-top:1px solid rgba(18,19,34,.08); }
.footer-grid { display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px; }
.footer-brand { max-width:330px; }
.footer-brand p { color:#4d5062; }
.footer-heading { font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin-bottom:14px; }
.footer-links { list-style:none;padding:0;margin:0; }
.footer-links li + li { margin-top:8px; }
.footer-links a { color:#2f3142;text-decoration:none;font-size:.91rem;font-weight:650; }
.footer-bottom { display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:42px;padding-top:22px;border-top:1px solid rgba(18,19,34,.15);font-size:.8rem;color:#4d5062; }
.reveal { opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease; }
.reveal.visible { opacity:1;transform:none; }
.not-found { min-height:58vh;display:grid;place-items:center;text-align:center; }
.not-found strong { font-size:clamp(5rem,20vw,11rem);line-height:.8; }
@media (max-width: 980px) {
  .desktop-nav { display:none; }
  .menu-button { display:block; }
  .hero-grid,.content-layout,.article-shell,.band-grid { grid-template-columns:1fr; }
  .hero-visual { max-width:680px; }
  .sidebar { position:static;grid-template-columns:repeat(2,1fr); }
  .article-shell { max-width:820px;margin:auto; }
  .toc { order:-1; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 700px) {
  .container,.container-narrow { width:min(100% - 26px,1180px); }
  .brand-tag { display:none; }
  .ticker-track { animation-duration:42s; }
  .hero { padding-top:48px; }
  h1 { font-size:clamp(2.55rem,13vw,4rem); }
  .hero-grid { gap:34px; }
  .trust-strip,.grid-2,.grid-3,.grid-4,.matrix,.sidebar,.footer-grid { grid-template-columns:1fr; }
  .section { padding:66px 0; }
  .section-head { display:block; }
  .section-head .button { margin-top:12px; }
  .band { padding:26px; }
  .article-hero { padding-top:40px; }
  .article-image { border-radius:18px; }
  .article-body { font-size:1rem; }
  .footer-bottom { display:block; }
  .footer-bottom span { display:block;margin-top:8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
  .reveal { opacity:1;transform:none; }
}
@media print {
  .site-header,.ticker,.site-footer,.sidebar,.toc,.hero-actions { display:none!important; }
  body { background:#fff;color:#000; }
  .article-shell,.content-layout { display:block; }
  a { color:#000;text-decoration:underline; }
}