@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg:      #07071a;
  --bg-1:    #0f1128;
  --bg-2:    #161a3a;
  --surface: rgba(22,26,58,.7);
  --text:    rgba(255,255,255,.92);
  --muted:   rgba(255,255,255,.56);
  --dim:     rgba(255,255,255,.32);
  --stroke:  rgba(255,255,255,.09);
  --accent:  #f0b932;
  --accent2: #e09a18;
  --ar:      240,185,50;
  --link:    #7ec8ff;
  --hdr-h:   60px;
  --r:       10px;
  --pad:     18px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Manrope',system-ui,sans-serif;
  font-size:15px; line-height:1.65;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }

/* ── BACKGROUND ── */
.bg {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 15% 25%, rgba(80,0,140,.5) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 85% 75%, rgba(120,80,220,.28) 0%, transparent 60%),
    linear-gradient(160deg,#060312 0%,#0d0822 45%,#07071a 100%);
}
.bg::after {
  content:''; position:absolute; inset:0; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='46'%3E%3Cpolygon points='20,2 38,12 38,34 20,44 2,34 2,12' fill='none' stroke='%239b59b6' stroke-width='.6'/%3E%3C/svg%3E");
  background-size:40px 46px;
}

/* ── HEADER ── */
.hdr {
  position:sticky; top:0; z-index:100;
  height:var(--hdr-h);
  background:rgba(7,7,26,.88);
  backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--stroke);
}
.hdr__inner {
  max-width:1200px; margin:0 auto;
  height:100%; padding:0 var(--pad);
  display:flex; align-items:center; gap:12px;
}
.hdr__logo { flex-shrink:0; }
.hdr__logo img { height:36px; width:auto; }
.hdr__nav {
  display:none;
  list-style:none; flex:1;
  justify-content:center; gap:2px;
}
.hdr__nav a {
  display:inline-flex; align-items:center;
  padding:6px 13px; border-radius:999px;
  font-size:12.5px; font-weight:700; color:var(--muted);
  border:1px solid transparent;
  transition:color .15s,background .15s,border-color .15s;
}
.hdr__nav a:hover,
.hdr__nav a.active {
  color:var(--accent);
  background:rgba(var(--ar),.08);
  border-color:rgba(var(--ar),.25);
}
.hdr__cta {
  margin-left:auto;
  padding:8px 18px; border-radius:999px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  color:#0f1128; font-weight:900; font-size:13px;
  white-space:nowrap; flex-shrink:0;
  transition:opacity .15s,transform .15s;
}
.hdr__cta:hover { opacity:.88; transform:translateY(-1px); }

.burger {
  width:38px; height:38px; flex-shrink:0;
  border:1px solid var(--stroke); border-radius:var(--r);
  background:transparent; cursor:pointer;
  display:grid; place-content:center; gap:5px;
  margin-left:auto;
}
.burger__line { width:18px; height:2px; background:rgba(255,255,255,.8); border-radius:2px; display:block; }

/* ── SIDE MENU ── */
.side {
  position:fixed; inset:0 0 0 auto; width:280px; z-index:200;
  background:var(--bg-1); border-left:1px solid var(--stroke);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s ease;
  padding:20px 0 40px;
}
.side.open { transform:translateX(0); }
.side__close {
  position:absolute; top:14px; right:16px;
  width:36px; height:36px; background:rgba(255,255,255,.06);
  border:none; border-radius:var(--r); cursor:pointer;
  display:grid; place-content:center;
}
.side__close::before,.side__close::after {
  content:''; position:absolute; width:16px; height:2px;
  background:var(--muted); border-radius:2px;
}
.side__close::before { transform:rotate(45deg); }
.side__close::after  { transform:rotate(-45deg); }
.side nav { margin-top:56px; padding:0 16px; }
.side nav a {
  display:block; padding:12px 16px; border-radius:var(--r);
  font-weight:700; font-size:14px; color:var(--muted);
  transition:color .15s,background .15s;
}
.side nav a:hover,
.side nav a.active { color:var(--accent); background:rgba(var(--ar),.08); }
.overlay {
  position:fixed; inset:0; z-index:150;
  background:rgba(0,0,0,.5); display:none;
}
.overlay.show { display:block; }

/* ── PAGE WRAPPER ── */
.page { max-width:900px; margin:0 auto; padding:36px var(--pad) 80px; }

/* ── HERO ── */
.hero { margin-bottom:32px; }
.hero h1 {
  font-size:clamp(22px,4vw,34px); font-weight:900; line-height:1.22;
  margin-bottom:14px;
  background:linear-gradient(135deg,#fff 40%,var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__lead { font-size:16px; color:var(--muted); max-width:700px; }

/* ── STATS STRIP ── */
.stats { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.stat {
  flex:1 1 130px; min-width:120px;
  background:var(--surface); border:1px solid var(--stroke);
  border-radius:var(--r); padding:14px 16px;
  backdrop-filter:blur(8px);
}
.stat__val { font-size:21px; font-weight:900; color:var(--accent); line-height:1; margin-bottom:4px; }
.stat__lbl { font-size:11.5px; color:var(--muted); font-weight:600; }

/* ── SECTION ── */
.section { margin-bottom:40px; }
.section h2 {
  font-size:clamp(17px,2.8vw,22px); font-weight:800;
  margin-bottom:14px; padding-bottom:10px;
  border-bottom:1px solid var(--stroke);
}
.section h3 {
  font-size:16px; font-weight:800;
  margin:22px 0 8px; color:var(--accent);
}
.section p { margin-bottom:12px; color:rgba(255,255,255,.82); }
.section p:last-child { margin-bottom:0; }
.section strong { color:var(--text); font-weight:700; }
.section ul, .section ol { padding-left:20px; margin-bottom:12px; }
.section li { margin-bottom:6px; color:rgba(255,255,255,.82); }

/* ── INLINE LINK ── */
.ilink { color:var(--link); text-decoration:underline; text-underline-offset:3px; }
.ilink:hover { color:var(--accent); }

/* ── TABLE ── */
.tbl-wrap { overflow-x:auto; margin:16px 0; border-radius:var(--r); border:1px solid var(--stroke); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th {
  background:rgba(var(--ar),.1); color:var(--accent);
  font-weight:700; text-align:left;
  padding:10px 14px; border-bottom:1px solid rgba(var(--ar),.2);
  white-space:nowrap;
}
td { padding:9px 14px; border-bottom:1px solid var(--stroke); color:rgba(255,255,255,.82); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.025); }

/* ── FAQ ── */
.faq__item { border-bottom:1px solid var(--stroke); }
.faq__q {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0; gap:12px; text-align:left;
  font-family:inherit; font-size:14.5px; font-weight:700; color:var(--text);
}
.faq__q:hover { color:var(--accent); }
.faq__icon {
  flex-shrink:0; width:22px; height:22px;
  border:1px solid var(--stroke); border-radius:50%;
  display:grid; place-content:center;
  transition:transform .2s,border-color .2s;
  font-size:14px; color:var(--muted); font-style:normal;
}
.faq__item.open .faq__icon { transform:rotate(45deg); border-color:var(--accent); color:var(--accent); }
.faq__a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq__item.open .faq__a { max-height:800px; }
.faq__a-inner { padding:0 0 16px; font-size:14px; color:var(--muted); line-height:1.7; }

/* ── CARDS ── */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin:16px 0; }
.card {
  background:var(--surface); border:1px solid var(--stroke);
  border-radius:var(--r); padding:18px;
  backdrop-filter:blur(8px);
  transition:border-color .2s,transform .2s;
}
.card:hover { border-color:rgba(var(--ar),.3); transform:translateY(-2px); }
.card__icon { font-size:26px; margin-bottom:10px; }
.card__title { font-size:14px; font-weight:800; margin-bottom:5px; }
.card__text { font-size:13px; color:var(--muted); line-height:1.55; }

/* ── STEPS ── */
.steps { counter-reset:step; display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.step {
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--stroke);
  border-radius:var(--r); padding:14px 16px;
}
.step__num {
  counter-increment:step;
  flex-shrink:0; width:30px; height:30px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:50%; display:grid; place-content:center;
  font-size:13px; font-weight:900; color:#0f1128; margin-top:2px;
}
.step__num::before { content:counter(step); }
.step__title { font-size:14px; font-weight:800; margin-bottom:3px; }
.step__text { font-size:13px; color:var(--muted); }

/* ── NOTICE ── */
.notice {
  background:rgba(var(--ar),.07); border:1px solid rgba(var(--ar),.22);
  border-radius:var(--r); padding:14px 16px;
  font-size:13.5px; color:rgba(255,255,255,.72); margin:20px 0;
}
.notice strong { color:var(--accent); }

/* ── INTERNAL LINKS ── */
.internal-links { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.internal-links a {
  padding:6px 14px; border-radius:999px;
  border:1px solid var(--stroke);
  font-size:12.5px; font-weight:700; color:var(--muted);
  transition:color .15s,border-color .15s,background .15s;
}
.internal-links a:hover {
  color:var(--accent); border-color:rgba(var(--ar),.3);
  background:rgba(var(--ar),.06);
}

/* ── BREADCRUMB ── */
.breadcrumb {
  display:flex; gap:6px; align-items:center;
  font-size:12.5px; color:var(--dim); margin-bottom:22px; flex-wrap:wrap;
}
.breadcrumb a { color:var(--link); }
.breadcrumb span { color:var(--dim); }

/* ── AUTHOR ── */
.author-section { margin:48px 0 32px; border-top:1px solid var(--stroke); padding-top:28px; }
.author-section__title {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--dim); margin-bottom:14px;
}
.author-card {
  display:flex; gap:14px; align-items:center;
  background:var(--surface); border:1px solid var(--stroke);
  border-radius:var(--r); padding:14px 16px;
  max-width:340px;
}
.author-card__avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:grid; place-content:center;
  font-size:16px; font-weight:900; color:#0f1128;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.author-card__name { font-size:14px; font-weight:800; }
.author-card__role { font-size:12px; color:var(--muted); margin-top:2px; }

/* ── FOOTER ── */
.ft { background:var(--bg-1); border-top:1px solid var(--stroke); padding:36px var(--pad) 24px; }
.ft__inner {
  max-width:1200px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center;
}
.ft__nav { display:flex; flex-wrap:wrap; gap:8px 20px; }
.ft__nav a { font-size:13px; color:var(--muted); font-weight:600; transition:color .15s; }
.ft__nav a:hover { color:var(--accent); }
.ft__bottom {
  max-width:1200px; margin:20px auto 0;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  border-top:1px solid var(--stroke); padding-top:20px;
}
.ft__logos { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ft__badge {
  background:rgba(255,255,255,.05); border:1px solid var(--stroke);
  border-radius:6px; padding:4px 9px;
  font-size:11px; font-weight:700; color:var(--dim);
}
.ft__legal { flex:1; font-size:11.5px; color:var(--dim); line-height:1.6; max-width:600px; }
.ft__copy { font-size:12px; color:var(--dim); width:100%; margin-top:4px; }

/* ── RESPONSIVE ── */
@media(min-width:768px) {
  .hdr__nav { display:flex; }
  .burger { display:none; }
  :root { --hdr-h:64px; }
  .hdr__logo img { height:42px; }
}
@media(min-width:1024px) {
  .page { padding:48px 24px 100px; }
}

/* ── ARTICLE FIGURE ── */
.article-figure {
  margin: 20px 0 24px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--stroke);
  line-height: 0;
}
.article-figure img {
  width: 100%;
  height: auto;
  display: block;
}