:root { --bg:#0b1020; --surface:#141b2b; --surface2:#202a40; --text:#f7fbff; --muted:#aab7c9; --accent:#7de8d0; --accent2:#9edcff; --line:rgba(255,255,255,.14); --glow:rgba(125,232,208,.16); --radius:22px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:var(--bg); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.65; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 8% 0%, var(--glow), transparent 32%), radial-gradient(circle at 95% 18%, rgba(117,184,255,.10), transparent 28%); z-index:-1; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
img { max-width:100%; display:block; }
.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.nav-wrap { max-width:1180px; margin:auto; padding:15px 22px; display:flex; gap:28px; align-items:center; justify-content:space-between; }
.site-mark { display:flex; align-items:center; gap:12px; min-width:0; }
.mark-box { width:38px; height:38px; border:1px solid var(--accent); border-radius:12px; display:grid; place-items:center; color:var(--accent); font-size:12px; letter-spacing:.1em; font-weight:800; box-shadow:0 0 24px var(--glow); }
.mark-copy { min-width:0; }
.mark-copy strong { display:block; font-size:15px; letter-spacing:.02em; white-space:nowrap; }
.mark-copy span { display:block; color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.main-nav { display:flex; gap:18px; align-items:center; font-size:13px; color:var(--muted); }
.main-nav a { padding:7px 0; border-bottom:1px solid transparent; }
.main-nav a:hover, .main-nav a.active { color:var(--text); border-color:var(--accent); }
.page-wrap { max-width:1180px; margin:auto; padding:0 22px 70px; }
.hero { padding:88px 0 66px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:46px; align-items:end; }
.eyebrow { margin:0 0 18px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3,h4 { margin:0; line-height:1.12; letter-spacing:-.035em; }
.hero h1 { max-width:780px; font-size:clamp(42px,6vw,82px); }
.hero-lede { max-width:690px; margin:24px 0 0; color:var(--muted); font-size:18px; line-height:1.7; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:11px 17px; font-size:13px; font-weight:750; transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.btn:hover { transform:translateY(-2px); color:var(--text); border-color:var(--accent); }
.btn-primary { color:var(--bg); background:var(--accent); border-color:var(--accent); }
.btn-primary:hover { color:var(--bg); background:var(--accent2); }
.btn-ghost { color:var(--muted); background:transparent; }
.hero-panel { border:1px solid var(--line); background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface2) 84%, transparent)); border-radius:var(--radius); padding:24px; position:relative; overflow:hidden; }
.hero-panel::after { content:""; position:absolute; width:190px; height:190px; border-radius:50%; right:-70px; top:-80px; background:var(--glow); filter:blur(4px); }
.panel-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.15em; }
.signal { margin-top:24px; display:flex; align-items:center; gap:12px; }
.signal-dot { width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent); }
.signal strong { font-size:25px; }
.signal span { display:block; color:var(--muted); font-size:13px; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; }
.stat { border-top:1px solid var(--line); padding-top:13px; }
.stat strong { display:block; font-size:25px; color:var(--accent); }
.stat span { color:var(--muted); font-size:11px; }
.section { padding:30px 0 10px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.section-head h2 { font-size:clamp(25px,3vw,38px); }
.section-head p { margin:0; color:var(--muted); max-width:510px; font-size:14px; }
.cards-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.story-card { min-width:0; border:1px solid var(--line); border-radius:var(--radius); background:color-mix(in srgb, var(--surface) 91%, transparent); overflow:hidden; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.story-card:hover { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 16px 44px var(--glow); }
.story-thumb { height:156px; background:linear-gradient(135deg, var(--surface2), var(--surface)); overflow:hidden; }
.story-thumb img { width:100%; height:100%; object-fit:cover; opacity:.88; transition:transform .35s ease; }
.story-card:hover .story-thumb img { transform:scale(1.05); }
.story-body { padding:18px; }
.story-label { color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:800; }
.story-card h3 { margin:9px 0 9px; font-size:20px; }
.story-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.story-meta { display:flex; gap:10px; color:var(--muted); font-size:11px; margin-top:16px; }
.case-strip { display:grid; grid-template-columns:1.1fr 2fr; gap:18px; align-items:stretch; margin-top:30px; }
.case-intro { border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:linear-gradient(145deg, var(--surface), transparent); }
.case-intro h2 { font-size:28px; }
.case-intro p { color:var(--muted); font-size:14px; }
.case-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.case-card { border:1px solid var(--line); border-radius:18px; padding:17px; background:var(--surface); }
.case-card span { color:var(--accent2); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.case-card h3 { font-size:16px; margin-top:10px; }
.category-row { display:flex; gap:9px; flex-wrap:wrap; }
.category-pill { border:1px solid var(--line); border-radius:999px; padding:7px 11px; color:var(--muted); font-size:12px; }
.category-pill:hover { color:var(--text); border-color:var(--accent); }
.quote { margin:40px 0 10px; border-left:3px solid var(--accent); padding:6px 0 6px 22px; max-width:780px; }
.quote p { margin:0; font-size:clamp(21px,3vw,34px); letter-spacing:-.03em; line-height:1.25; }
.quote cite { color:var(--muted); font-size:12px; display:block; margin-top:12px; font-style:normal; }
.site-footer { border-top:1px solid var(--line); margin-top:70px; padding:30px 0 0; color:var(--muted); font-size:12px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
.footer-grid strong { color:var(--text); display:block; margin-bottom:8px; font-size:14px; }
.footer-links { display:flex; flex-direction:column; gap:5px; }
.page-heading { padding:66px 0 30px; max-width:780px; }
.page-heading h1 { font-size:clamp(38px,5vw,64px); }
.page-heading p { color:var(--muted); font-size:17px; margin:18px 0 0; }
.article-shell { padding:56px 0 20px; }
.article-kicker { color:var(--accent); font-size:11px; letter-spacing:.16em; font-weight:800; text-transform:uppercase; }
.article-shell h1 { font-size:clamp(40px,5vw,70px); max-width:900px; margin-top:14px; }
.article-deck { max-width:790px; color:var(--muted); font-size:18px; margin:22px 0 0; }
.article-meta { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; color:var(--muted); font-size:12px; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:36px; align-items:start; margin-top:42px; }
.article-content { border-top:1px solid var(--line); padding-top:28px; font-size:17px; }
.article-content h2 { font-size:30px; margin:42px 0 14px; }
.article-content h3 { font-size:23px; margin:28px 0 10px; }
.article-content p { margin:0 0 18px; color:color-mix(in srgb, var(--text) 88%, var(--muted)); }
.article-content a { color:var(--accent2); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent2) 45%, transparent); text-underline-offset:3px; }
.article-content ul, .article-content ol { padding-left:25px; }
.article-content li { margin:7px 0; }
.article-content figure { margin:30px 0; padding:0; }
.article-content figure img, .article-content > img { width:100%; border-radius:18px; border:1px solid var(--line); }
.article-content figcaption { color:var(--muted); font-size:12px; margin-top:8px; }
.article-aside { position:sticky; top:92px; border:1px solid var(--line); border-radius:18px; padding:18px; background:var(--surface); }
.article-aside strong { display:block; font-size:13px; margin-bottom:12px; }
.article-aside p { color:var(--muted); font-size:12px; margin:0 0 14px; }
.article-aside .aside-line { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.related { margin-top:52px; }
.related .cards-grid { grid-template-columns:repeat(3,1fr); }
.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:20px; }
.about-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:28px; }
.about-card h2 { font-size:28px; margin-bottom:13px; }
.about-card p { color:var(--muted); margin:0 0 15px; }
.checklist { display:grid; gap:12px; margin-top:20px; }
.check { display:flex; gap:11px; align-items:flex-start; }
.check i { width:21px; height:21px; flex:0 0 21px; border:1px solid var(--accent); border-radius:50%; color:var(--accent); font-style:normal; display:grid; place-items:center; font-size:12px; }
.check span { color:var(--muted); font-size:14px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; padding-top:60px; } .cards-grid { grid-template-columns:repeat(2,1fr); } .case-strip, .about-grid { grid-template-columns:1fr; } .article-layout { grid-template-columns:1fr; } .article-aside { position:static; order:-1; } .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) { .nav-wrap { padding:12px 16px; } .main-nav { gap:11px; font-size:11px; } .mark-copy span { display:none; } .page-wrap { padding-left:16px; padding-right:16px; } .hero { padding:54px 0 40px; } .hero h1 { font-size:42px; } .hero-lede { font-size:16px; } .cards-grid, .case-cards, .related .cards-grid { grid-template-columns:1fr; } .stat-row { gap:7px; } .stat strong { font-size:20px; } .footer-grid { grid-template-columns:1fr; } .article-shell { padding-top:40px; } .article-shell h1 { font-size:40px; } .article-content { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }

.hero-visual { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:20px; border:1px solid var(--line); margin:0 0 28px; box-shadow:0 18px 50px var(--glow); }
.tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.tool-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:28px; }
.tool-card h2 { font-size:28px; margin:8px 0 12px; }
.tool-card p { color:var(--muted); }
.tool-checks { display:grid; gap:10px; margin-top:22px; }
.tool-check { display:flex; gap:10px; align-items:center; border-top:1px solid var(--line); padding:12px 0; color:var(--muted); font-size:14px; }
.tool-check input { accent-color:var(--accent); width:18px; height:18px; }
.tool-notes { width:100%; min-height:260px; resize:vertical; border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--bg) 60%,transparent); color:var(--text); padding:14px; font:inherit; }
.tool-note { font-size:12px; margin-top:12px; }
@media (max-width:700px) { .tool-grid { grid-template-columns:1fr; } }