:root {
    --bg: #03050a;
    --bg-soft: #070b13;
    --panel: #0b111d;
    --panel-2: #0e1624;
    --panel-3: #111c2d;
    --text: #f5f8ff;
    --muted: #95a5bc;
    --muted-2: #708096;
    --cyan: #20d8ff;
    --cyan-2: #00a8ff;
    --pink: #ff2a9d;
    --pink-2: #ff4fc6;
    --purple: #915cff;
    --green: #3ee6a8;
    --yellow: #ffd369;
    --danger: #ff6680;
    --border: rgba(140, 170, 220, .14);
    --border-hot: rgba(32, 216, 255, .34);
    --shadow: 0 24px 90px rgba(0, 0, 0, .38);
    --glow-cyan: 0 0 28px rgba(32, 216, 255, .20);
    --glow-pink: 0 0 28px rgba(255, 42, 157, .20);
    --radius: 18px;
    --radius-sm: 12px;
    --container: 1220px;
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background:
        radial-gradient(circle at 15% 0%, rgba(0, 174, 255, .08), transparent 34rem),
        radial-gradient(circle at 90% 10%, rgba(255, 42, 157, .07), transparent 34rem),
        var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
code {
    color: #a7efff;
    background: rgba(32, 216, 255, .08);
    border: 1px solid rgba(32, 216, 255, .12);
    border-radius: 6px;
    padding: .12rem .35rem;
}
pre {
    overflow-x: auto;
    padding: 1.2rem 1.3rem;
    background: #050912;
    border: 1px solid var(--border);
    border-radius: 12px;
}
pre code { background: none; border: 0; padding: 0; }

::selection { background: rgba(255, 42, 157, .45); color: white; }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.narrow { max-width: 900px; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.site-shell { min-height: 100vh; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    background: rgba(3, 5, 10, .78);
    backdrop-filter: blur(18px);
    transition: .2s ease;
}
.site-header.is-scrolled {
    border-color: var(--border);
    box-shadow: 0 12px 36px rgba(0,0,0,.24);
}
.nav-wrap {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 52px; height: 52px; object-fit: contain; }
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { letter-spacing: .08em; font-size: .93rem; }
.brand-copy small { color: var(--muted-2); margin-top: 4px; font-size: .72rem; }

.primary-nav { display: flex; align-items: center; gap: 6px; }
.primary-nav a {
    color: #bfcaDA;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: .94rem;
    font-weight: 650;
    transition: .18s ease;
}
.primary-nav a:hover,
.primary-nav a.is-active {
    color: white;
    background: rgba(255,255,255,.045);
}
.primary-nav a.is-active { box-shadow: inset 0 -2px 0 var(--cyan); }
.primary-nav .nav-cta {
    margin-left: 8px;
    color: white;
    border: 1px solid rgba(32, 216, 255, .34);
    background: linear-gradient(135deg, rgba(32, 216, 255, .12), rgba(255, 42, 157, .10));
    box-shadow: var(--glow-cyan);
}
.nav-toggle { display: none; background: none; border: 0; padding: 8px; }
.nav-toggle span:not(.sr-only) { display:block; width:24px; height:2px; background:white; margin:5px 0; border-radius:2px; }

.hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 68px;
    border-bottom: 1px solid var(--border);
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    width: 560px; height: 560px;
    filter: blur(80px);
    opacity: .13;
    border-radius: 50%;
    pointer-events: none;
}
.hero::before { background: var(--cyan); top: -320px; left: -180px; }
.hero::after { background: var(--pink); right: -220px; bottom: -330px; }
.hero-grid-overlay {
    position: absolute; inset: 0;
    opacity: .15;
    background-image:
        linear-gradient(rgba(32,216,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,216,255,.06) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.hero-layout { position: relative; display:grid; grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr); gap: 64px; align-items:center; }
.hero-copy h1,
.page-hero h1,
.article-hero h1 {
    margin: 12px 0 18px;
    line-height: .98;
    letter-spacing: -.045em;
}
.hero-copy h1 { font-size: clamp(3.25rem, 7vw, 6.4rem); max-width: 840px; }
.hero-copy > p { color: #b2bfd1; font-size: clamp(1.05rem, 1.4vw, 1.22rem); max-width: 720px; margin: 0 0 30px; }
.gradient-text {
    background: linear-gradient(90deg, var(--cyan) 8%, #84ecff 44%, #fff 55%, var(--pink) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 42px rgba(32,216,255,.14);
}
.eyebrow {
    display: inline-flex; align-items:center; gap:8px;
    color: var(--cyan);
    font-weight: 850;
    font-size: .78rem;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.eyebrow::before { content:""; width: 20px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--pink)); box-shadow: var(--glow-cyan); }

.hero-art { position:relative; display:grid; place-items:center; min-height: 500px; }
.hero-art img { width:min(100%, 650px); position:relative; z-index:2; filter: drop-shadow(0 0 28px rgba(32,216,255,.16)) drop-shadow(0 0 44px rgba(255,42,157,.12)); }
.logo-glow {
    position:absolute; width:68%; aspect-ratio:1; border-radius:50%;
    background: conic-gradient(from 90deg, rgba(32,216,255,.5), rgba(255,42,157,.55), rgba(145,92,255,.36), rgba(32,216,255,.5));
    filter: blur(74px); opacity:.24;
}

.hero-search {
    display:flex; align-items:center; gap:10px;
    padding: 8px;
    max-width: 760px;
    background: rgba(9, 14, 24, .86);
    border:1px solid rgba(32,216,255,.25);
    border-radius: 15px;
    box-shadow: 0 14px 50px rgba(0,0,0,.28), var(--glow-cyan);
}
.hero-search:focus-within { border-color: rgba(255,42,157,.52); box-shadow: var(--glow-pink); }
.search-icon { color: var(--cyan); font-size: 1.4rem; padding-left: 10px; }
.hero-search input {
    min-width:0; flex:1; color:white; background:transparent; border:0; outline:0;
    padding: 12px 6px; font-size: 1rem;
}
.hero-search input::placeholder { color:#6f7e94; }
.hero-search button,
.button {
    display:inline-flex; justify-content:center; align-items:center;
    border:0; color:white; font-weight:800; border-radius:10px; padding: 12px 18px;
    background: linear-gradient(135deg, #0dbde9, #2a92ff 45%, #c735ff 78%, #ff2a9d);
    box-shadow: 0 10px 30px rgba(32,216,255,.16), 0 0 0 1px rgba(255,255,255,.06) inset;
    transition: transform .18s ease, filter .18s ease;
}
.hero-search button:hover, .button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button-ghost { background: rgba(255,255,255,.045); border:1px solid var(--border-hot); box-shadow:none; }
.button-small { padding:10px 14px; font-size:.9rem; }
.button-large { padding:14px 22px; }
.hero-search-compact { margin-top: 26px; max-width: 680px; }

.hero-quicklinks { display:flex; gap: 10px 14px; flex-wrap:wrap; margin-top:16px; color:var(--muted-2); font-size:.87rem; }
.hero-quicklinks a { color:#b9c9dc; }
.hero-quicklinks a:hover { color:var(--cyan); }

.section { padding: 84px 0; }
.section-tight { padding: 62px 0 84px; }
.section-heading {
    display:flex; justify-content:space-between; align-items:end; gap:28px;
    margin-bottom: 28px;
}
.section-heading h2, .two-column-feature h2, .final-cta h2, .hosting-promo h2 {
    margin:7px 0 0; font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing:-.035em; line-height:1.05;
}
.section-heading p, .section-intro { color:var(--muted); }
.text-link { color:#aeeeff; font-weight:750; white-space:nowrap; }

.category-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.category-card {
    min-height: 250px;
    padding: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
        var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    position:relative;
    overflow:hidden;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.category-card::after {
    content:""; position:absolute; width:140px; height:140px; right:-80px; top:-80px;
    border-radius:50%; background:var(--cyan); filter:blur(50px); opacity:.08; transition:.2s ease;
}
.category-card:nth-child(even)::after { background: var(--pink); }
.category-card:hover { transform:translateY(-4px); border-color:rgba(32,216,255,.28); background-color:#0d1422; }
.category-card:hover::after { opacity:.16; }
.category-icon { width:46px; height:46px; display:grid; place-items:center; font-size:1.35rem; border-radius:12px; background:rgba(32,216,255,.08); border:1px solid rgba(32,216,255,.14); }
.category-card h2, .category-card h3 { margin:19px 0 8px; font-size:1.25rem; }
.category-card p { color:var(--muted); margin:0 0 22px; font-size:.94rem; }
.card-link { color:#c7eefd; font-weight:750; font-size:.88rem; }

.tools-band { background: linear-gradient(180deg, rgba(14,22,36,.72), rgba(4,7,12,.56)); border-block:1px solid var(--border); }
.tool-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
.tool-card {
    display:flex; gap:16px; align-items:flex-start;
    padding:20px;
    background:rgba(255,255,255,.025);
    border:1px solid var(--border);
    border-radius:14px;
    transition:.18s ease;
}
a.tool-card:hover { border-color:rgba(255,42,157,.28); transform:translateY(-2px); }
.tool-card > span { font-size:1.55rem; width:42px; flex:0 0 42px; }
.tool-card h3 { margin:0 0 4px; font-size:1.03rem; }
.tool-card p { margin:0; color:var(--muted); font-size:.9rem; }
.tool-card em { display:inline-block; margin-top:9px; font-style:normal; color:var(--cyan); font-size:.77rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.tool-section { scroll-margin-top: 100px; margin-bottom:60px; }

.two-column-feature { display:grid; grid-template-columns: 1.35fr .65fr; gap:42px; align-items:start; }
.article-list { display:grid; gap:12px; margin-top:24px; }
.article-row {
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:20px 22px;
    background:rgba(255,255,255,.026);
    border:1px solid var(--border);
    border-radius:14px;
    transition:.18s ease;
}
.article-row:hover { border-color:rgba(32,216,255,.28); background:rgba(32,216,255,.035); transform:translateX(2px); }
.article-row h2, .article-row h3 { margin:4px 0 5px; font-size:1.05rem; }
.article-row p { color:var(--muted); margin:0; font-size:.9rem; }
.article-category, .article-updated {
    color:var(--cyan); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:850;
}
.article-updated { color:var(--muted-2); display:block; margin-top:8px; }
.article-arrow { color:var(--pink); font-size:1.5rem; flex:0 0 auto; }

.hosting-promo,
.sidebar-card,
.prose-card {
    background:
        linear-gradient(155deg, rgba(32,216,255,.05), rgba(255,42,157,.035)),
        var(--panel);
    border:1px solid rgba(32,216,255,.18);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.hosting-promo { padding:30px; position:sticky; top:100px; }
.hosting-promo p { color:var(--muted); }
.check-list { list-style:none; padding:0; margin:24px 0; display:grid; gap:10px; }
.check-list li::before { content:"✓"; color:var(--green); font-weight:900; margin-right:9px; }

.final-cta { padding-top:20px; }
.final-cta-inner {
    display:flex; align-items:center; justify-content:space-between; gap:36px;
    padding:38px;
    background:
        radial-gradient(circle at 12% 20%, rgba(32,216,255,.12), transparent 30rem),
        radial-gradient(circle at 90% 80%, rgba(255,42,157,.12), transparent 28rem),
        var(--panel);
    border:1px solid var(--border-hot);
    border-radius:24px;
}
.final-cta-inner p { color:var(--muted); max-width:760px; }

.page-hero, .article-hero {
    position:relative;
    padding:78px 0 58px;
    border-bottom:1px solid var(--border);
    overflow:hidden;
}
.page-hero::after, .article-hero::after {
    content:""; position:absolute; width:520px; height:240px; right:-100px; top:0;
    background:linear-gradient(90deg, var(--cyan), var(--pink));
    filter:blur(120px); opacity:.08; pointer-events:none;
}
.page-hero h1 { font-size:clamp(2.7rem, 6vw, 5.25rem); }
.page-hero p { color:#aebcd0; max-width:780px; font-size:1.12rem; }
.page-hero-small { padding:55px 0 44px; }
.category-icon-large { margin-bottom:14px; }

.breadcrumbs { display:flex; gap:8px; flex-wrap:wrap; color:var(--muted-2); font-size:.82rem; margin-bottom:18px; }
.breadcrumbs a:hover { color:var(--cyan); }

.docs-list-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:34px; align-items:start; }
.empty-state {
    text-align:center; padding:50px 28px;
    border:1px dashed rgba(140,170,220,.2); border-radius:var(--radius); background:rgba(255,255,255,.018);
}
.empty-icon { font-size:2.4rem; display:block; margin-bottom:12px; }
.empty-state h2 { margin:0 0 8px; }
.empty-state p { color:var(--muted); max-width:700px; margin:0 auto; }
.sidebar-card { padding:24px; }
.sidebar-card h2 { margin:8px 0; font-size:1.3rem; }
.sidebar-card p { color:var(--muted); }
.sidebar-label, .callout-label {
    display:inline-block; color:var(--cyan); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; font-weight:900;
}

.service-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
.service-card {
    padding:30px; border:1px solid var(--border); border-radius:var(--radius);
    background:linear-gradient(150deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--panel);
}
.service-icon { font-size:2rem; }
.service-card h2 { font-size:1.6rem; margin:15px 0 7px; }
.service-card p, .service-card li { color:var(--muted); }
.service-card ul { padding-left:1.2rem; }
.coming-badge { display:inline-flex; margin-top:12px; padding:7px 10px; border-radius:999px; background:rgba(32,216,255,.08); border:1px solid rgba(32,216,255,.15); color:#aeeeff; font-size:.75rem; font-weight:800; }

.prose-card { padding:clamp(26px, 5vw, 58px); max-width:900px; margin:auto; }
.prose-card h2 { font-size:1.65rem; margin-top:1.8em; }
.prose-card p { color:#b2c0d2; }

.article-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:48px; align-items:end; }
.article-hero h1 { font-size:clamp(2.6rem, 5vw, 4.8rem); max-width:1000px; }
.article-deck { color:#aebcd0; max-width:860px; font-size:1.1rem; }
.article-meta { display:flex; gap:16px; flex-wrap:wrap; color:var(--muted-2); font-size:.82rem; margin-top:20px; }
.article-status-card { display:flex; gap:12px; align-items:flex-start; padding:18px; background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:14px; }
.article-status-card p { margin:3px 0 0; color:var(--muted); font-size:.82rem; }
.status-dot { width:10px; height:10px; border-radius:50%; background:var(--green); margin-top:7px; box-shadow:0 0 18px rgba(62,230,168,.65); }

.article-layout { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:46px; padding-top:55px; padding-bottom:90px; align-items:start; }
.article-content { max-width:830px; }
.article-content p, .article-content li { color:#b8c5d5; }
.article-content p { margin:0 0 1.25em; }
.article-content h2 { margin:2.2em 0 .65em; font-size:1.8rem; letter-spacing:-.02em; scroll-margin-top:110px; }
.article-content h3 { margin:1.7em 0 .45em; font-size:1.22rem; }
.article-content ul, .article-content ol { margin:0 0 1.4em; }
.article-content a { color:#91eaff; text-decoration:underline; text-underline-offset:3px; }
.quick-answer,
.hero-callout,
.warning-callout {
    border-radius:14px; padding:20px 22px; margin:0 0 28px;
}
.quick-answer {
    border:1px solid rgba(32,216,255,.24);
    background:linear-gradient(135deg, rgba(32,216,255,.07), rgba(145,92,255,.04));
}
.quick-answer p, .hero-callout p, .warning-callout p { margin:6px 0 0; }
.hero-callout { border:1px solid rgba(32,216,255,.2); background:rgba(32,216,255,.045); }
.warning-callout { border:1px solid rgba(255,211,105,.22); background:rgba(255,211,105,.05); }
.warning-callout .callout-label { color:var(--yellow); }
.steps { list-style:none; counter-reset:step; padding:0; display:grid; gap:12px; }
.steps li {
    counter-increment:step;
    display:grid; grid-template-columns:46px minmax(0,1fr); column-gap:14px;
    padding:16px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.018);
}
.steps li::before {
    content:counter(step); grid-row:1 / span 2;
    width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
    background:linear-gradient(135deg, rgba(32,216,255,.16), rgba(255,42,157,.12));
    color:white; font-weight:900;
}
.steps li strong { color:white; }
.steps li span { color:var(--muted); font-size:.92rem; margin-top:2px; }
.article-sidebar { display:grid; gap:18px; }
.sticky-card { position:sticky; top:100px; }
.toc { display:grid; margin-top:10px; }
.toc a { padding:8px 0; color:var(--muted); border-bottom:1px solid rgba(255,255,255,.035); font-size:.9rem; }
.toc a:hover { color:var(--cyan); }
.sidebar-tool-card { margin-top:10px; }
.article-feedback {
    margin-top:54px; padding:20px;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
    background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:14px;
}
.article-feedback p { margin:2px 0 0; font-size:.83rem; color:var(--muted-2); }
.feedback-actions { display:flex; gap:8px; }
.feedback-actions button { border:1px solid var(--border); background:#101825; color:white; border-radius:9px; padding:9px 12px; }

.search-summary { color:var(--muted); margin-bottom:18px; }
.search-summary span { color:white; }
.search-summary strong { color:var(--cyan); }

.site-footer { border-top:1px solid var(--border); background:#020408; padding-top:54px; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3, 1fr); gap:34px; padding-bottom:42px; }
.footer-grid > div { display:grid; align-content:start; gap:8px; }
.footer-grid h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:#d9e2ef; margin:0 0 8px; }
.footer-grid p { color:var(--muted-2); max-width:420px; margin:8px 0 0; font-size:.9rem; }
.footer-grid a { color:var(--muted); font-size:.88rem; }
.footer-grid a:hover { color:var(--cyan); }
.footer-brand { font-weight:950; letter-spacing:.1em; color:white !important; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:18px 0 26px; border-top:1px solid var(--border); color:#607087; font-size:.8rem; }

@media (max-width: 1050px) {
    .hero-layout { grid-template-columns:1fr; gap:26px; }
    .hero-art { min-height:auto; max-width:560px; margin:auto; }
    .hero-copy { text-align:center; }
    .hero-copy > p, .hero-search { margin-left:auto; margin-right:auto; }
    .hero-quicklinks { justify-content:center; }
    .category-grid { grid-template-columns:repeat(2, 1fr); }
    .two-column-feature, .article-layout, .docs-list-layout { grid-template-columns:1fr; }
    .hosting-promo, .sticky-card { position:static; }
    .article-sidebar { grid-template-columns:repeat(2,1fr); }
    .article-hero-grid { grid-template-columns:1fr; }
    .article-status-card { max-width:320px; }
    .footer-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 820px) {
    .nav-toggle { display:block; }
    .primary-nav {
        display:none;
        position:absolute; top:76px; left:20px; right:20px;
        padding:12px;
        flex-direction:column; align-items:stretch;
        background:rgba(7,11,19,.98);
        border:1px solid var(--border);
        border-radius:14px;
        box-shadow:var(--shadow);
    }
    .primary-nav.is-open { display:flex; }
    .primary-nav a { padding:12px 14px; }
    .primary-nav .nav-cta { margin-left:0; text-align:center; }
    .brand-copy small { display:none; }
    .tool-grid, .service-grid { grid-template-columns:1fr; }
    .section-heading { align-items:start; flex-direction:column; }
    .final-cta-inner { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 620px) {
    .container { width:min(calc(100% - 26px), var(--container)); }
    .nav-wrap { min-height:68px; }
    .brand-mark { width:44px; height:44px; }
    .hero { padding-top:48px; }
    .hero-copy h1 { font-size:clamp(2.7rem, 14vw, 4.3rem); }
    .hero-art { margin-top:14px; }
    .hero-search { display:grid; grid-template-columns:auto 1fr; }
    .hero-search button { grid-column:1 / -1; width:100%; }
    .category-grid { grid-template-columns:1fr; }
    .category-card { min-height:auto; }
    .section { padding:62px 0; }
    .section-tight { padding:42px 0 62px; }
    .article-sidebar { grid-template-columns:1fr; }
    .article-feedback { flex-direction:column; align-items:flex-start; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; }
}