:root { --sc-bg:#080b17; --sc-panel:#12162a; --sc-text:#f4f0e8; --sc-muted:#c4bfce; --sc-line:rgba(229,199,131,.18); --sc-gold:#e5c783; --sc-blue:#34c8e7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--sc-bg); }
body { margin:0; overflow-x:hidden; color:var(--sc-text); background:radial-gradient(circle at 12% 7%,rgba(74,64,150,.26),transparent 29rem),radial-gradient(circle at 92% 34%,rgba(19,139,154,.13),transparent 28rem),var(--sc-bg); font-family:Nunito,Arial,sans-serif; line-height:1.65; }
a { color:var(--sc-gold); }
.scenario-shell { width:min(100% - 32px,1180px); margin:0 auto; }
.scenario-header { position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(8,11,23,.84); backdrop-filter:blur(18px); }
.scenario-header-inner { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.scenario-brand { color:var(--sc-text); font-family:Comfortaa, sans-serif; font-size:1rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.scenario-brand::before { content:'✦'; margin-right:8px; color:var(--sc-gold); font-size:.84em; }
.scenario-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:18px; }
.scenario-nav a { min-height:44px; display:inline-flex; align-items:center; color:#ded9e7; font-size:.92rem; font-weight:800; text-decoration:none; }
.scenario-nav a:hover { color:var(--sc-gold); }
.scenario-main { padding:clamp(30px,6vw,72px) 0; }
.scenario-hero { position:relative; isolation:isolate; min-height:min(540px,67vw); display:flex; align-items:flex-end; padding:clamp(28px,6vw,72px); overflow:hidden; border:1px solid var(--sc-line); border-radius:28px; background:#0a1020; box-shadow:inset 0 1px rgba(255,255,255,.06),0 28px 70px rgba(0,0,0,.22); }
.scenario-hero::before { content:''; position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(8,11,23,.98) 5%,rgba(8,11,23,.82) 46%,rgba(8,11,23,.15)),var(--scenario-image) center/cover no-repeat; }
.scenario-hero::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,#000,transparent 78%); }
.scenario-kicker { margin:0 0 12px; color:var(--sc-gold); font-size:.76rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,h3 { font-family:Comfortaa,sans-serif; line-height:1.25; }
h1 { max-width:790px; margin:0; font-size:clamp(2rem,5vw,4.15rem); letter-spacing:-.045em; }
.scenario-lead { max-width:700px; margin:18px 0 0; color:#ded8e6; font-size:clamp(1.05rem,2vw,1.24rem); }
.scenario-meta { margin:18px 0 0; color:#a9a3b5; font-size:.9rem; }
.scenario-reading { display:grid; grid-template-columns:minmax(0,1fr) 286px; align-items:start; gap:22px; margin-top:22px; }
.scenario-content,.scenario-cta,.scenario-faq,.scenario-recommendations { border:1px solid var(--sc-line); border-radius:26px; background:linear-gradient(145deg,rgba(28,29,61,.9),rgba(10,22,34,.96)); box-shadow:inset 0 1px rgba(255,255,255,.05),0 24px 64px rgba(0,0,0,.16); }
.scenario-content { padding:clamp(25px,5vw,56px); }
.scenario-content h2 { margin:44px 0 14px; font-size:clamp(1.32rem,2.8vw,1.92rem); color:#f8f4eb; }
.scenario-content h2:first-child { margin-top:0; }
.scenario-content h3 { margin:28px 0 8px; color:#f1eadc; font-size:1.1rem; }
.scenario-content p,.scenario-content li { color:#d7d2df; font-size:1.04rem; }
.scenario-content ul,.scenario-content ol { padding-left:1.25em; }
.scenario-content li + li { margin-top:8px; }
.scenario-note { margin:28px 0; padding:18px 20px; border-left:2px solid var(--sc-gold); border-radius:0 16px 16px 0; background:rgba(213,172,99,.08); color:#e9e3ef; }
.scenario-cta { margin-top:22px; padding:clamp(26px,5vw,44px); background:radial-gradient(circle at 87% 0,rgba(213,172,99,.2),transparent 22rem),linear-gradient(140deg,#25224f,#0d2632); }
.scenario-cta h2,.scenario-faq h2 { margin:0; font-size:clamp(1.35rem,3vw,1.9rem); }
.scenario-cta p { max-width:660px; color:#d2cddd; }
.scenario-button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border:0; border-radius:14px; color:#20170b; background:linear-gradient(135deg,#ead08b,#c99550); box-shadow:0 12px 28px rgba(213,172,99,.2); font-family:inherit; font-size:1rem; font-weight:900; text-decoration:none; transition:transform .2s ease,filter .2s ease; cursor:pointer; }
.scenario-button:hover { transform:translateY(-2px); filter:brightness(1.07); }
.scenario-recommendations { position:sticky; top:92px; display:grid; gap:10px; padding:18px; }
.scenario-recommendations h2 { margin:0 0 2px; font-size:1.12rem; }
.scenario-recommendation { min-height:96px; display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid rgba(229,199,131,.12); border-radius:15px; color:#f4f0e8; background:rgba(255,255,255,.025); text-decoration:none; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.scenario-recommendation:hover { transform:translateY(-2px); border-color:rgba(229,199,131,.5); background:rgba(229,199,131,.07); }
.scenario-recommendation span { color:var(--sc-gold); font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.scenario-recommendation strong { font-family:Comfortaa,sans-serif; font-size:.86rem; line-height:1.4; }
.scenario-all-link { min-height:42px; display:inline-flex; align-items:center; justify-content:space-between; color:var(--sc-gold); font-weight:900; text-decoration:none; }
.scenario-faq { margin-top:22px; padding:clamp(24px,5vw,40px); }
.scenario-faq details { padding:16px 0; border-top:1px solid rgba(255,255,255,.1); }
.scenario-faq details:first-of-type { margin-top:16px; }
.scenario-faq summary { cursor:pointer; color:#f4f0e8; font-weight:900; }
.scenario-faq p { margin:12px 0 0; color:#c8c3d1; }
.scenario-footer { border-top:1px solid rgba(255,255,255,.08); padding:30px 0; color:#bbb6c6; background:#070b13; }
.scenario-footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 24px; }
.scenario-footer p { margin:0; }
:focus-visible { outline:3px solid var(--sc-gold); outline-offset:4px; }
@media (max-width:980px) { .scenario-reading { grid-template-columns:1fr; } .scenario-recommendations { position:static; grid-template-columns:repeat(3,minmax(0,1fr)); } .scenario-recommendations h2,.scenario-all-link { grid-column:1 / -1; } }
@media (max-width:640px) { .scenario-shell { width:min(100% - 28px,1180px); } .scenario-header-inner { min-height:64px; align-items:flex-start; flex-direction:column; gap:0; padding:10px 0; } .scenario-nav { justify-content:flex-start; gap:16px; } .scenario-nav a { min-height:32px; } .scenario-main { padding-top:28px; } .scenario-hero { min-height:455px; padding:28px 22px; border-radius:21px; } .scenario-hero::before { background:linear-gradient(180deg,rgba(8,11,23,.52),rgba(8,11,23,.98) 76%),var(--scenario-image) center/cover no-repeat; } .scenario-content,.scenario-cta,.scenario-faq,.scenario-recommendations { border-radius:20px; } .scenario-content p,.scenario-content li { font-size:1rem; } .scenario-recommendations { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .scenario-button,.scenario-recommendation { transition:none; } .scenario-button:hover,.scenario-recommendation:hover { transform:none; } }