:root{--bg:#0b0f14;--panel:#121821;--text:#e9eef5;--muted:#9fb1c5;--brand:#2e6dd5;--brand-2:#1b4fb3;--brand-soft:#5f90e1;--brand-2-soft:#3a66d0}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.container{max-width:1120px;margin:0 auto;padding:24px}
.flex{display:flex}
.between{justify-content:space-between}
.center-v{align-items:center}
.site-header{z-index: 1000;border-bottom:1px solid #1c2430;background:#0a0f16cf;backdrop-filter:saturate(120%) blur(6px);position:sticky;top:0}
.logo{font-weight:800;letter-spacing:.08em;text-decoration:none;color:#fff;font-size: 18px;}
.nav a{color:var(--muted);text-decoration:none;margin-left:16px}
.nav a:hover{color:#fff}
.hero{padding:8px 0 8px}
.hero h1{font-size:clamp(28px,4vw,40px);margin:0 0 8px;background:linear-gradient(135deg,var(--brand-soft),var(--brand-2-soft));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero p{margin:0 0 12px;color:var(--muted)}
.grid{display:grid;gap:16px}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid #1c2430;border-radius:16px;padding:20px;display:flex;flex-direction:column}
.card h2{margin:0 0 6px;background:linear-gradient(135deg,var(--brand-soft),var(--brand-2-soft));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;margin-top:auto;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,var(--brand-soft),var(--brand-2-soft));color:#fff;text-decoration:none;border:0;box-shadow:0 2px 10px rgba(27,79,179,.18)}
.btn:hover{filter:brightness(1.06)}
.site-footer{border-top:1px solid #1c2430;margin-top:40px}
.site-footer .small{font-size:14px;color:var(--muted)}
@media (max-width:640px){
    .container{padding:16px}
    .logo{font-size:18px}
    .nav{gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .nav::-webkit-scrollbar{display:none}
    .nav a{margin-left:12px;font-size:14px;padding:8px 0}
    .grid.three{grid-template-columns:1fr}
    section[id]{scroll-margin-top:60px}
}
.preview-img{width:100%;object-fit:cover;border:1px solid #1c2430;border-radius:12px;display:block;}
.fullbleed-img{display:block;width:100%;object-fit:cover;border-top:1px solid #1c2430;border-bottom:1px solid #1c2430;}

@media (max-width:640px){.grid.three{grid-template-columns:1fr}}
.muted{color:var(--muted)}
.full-bleed{width:100%;position:relative;margin:0}
.seo-img{display:block;width:100%;height:320px;background:linear-gradient(135deg,#16202c,#0b0f14);border-top:1px solid #1c2430;border-bottom:1px solid #1c2430}
.seo{padding:16px 0}
.preview{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#1a2230,#0f141c);border:1px solid #1c2430;border-radius:12px;display:block}
.preview[aria-label]{position:relative}
.preview[aria-label]::after{content:attr(aria-label);position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--muted)}
.faq details{border:1px solid #1c2430;border-radius:12px;padding:12px 14px;background:#0f141c}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:8px 0 0;color:var(--muted)}