:root {
    --ink: #07101f;
    --ink-2: #0a1629;
    --ink-3: #102039;
    --panel: #11213a;
    --white: #ffffff;
    --paper: #f5f7fb;
    --paper-2: #edf1f7;
    --text: #f6f9ff;
    --text-dark: #101a2c;
    --muted: #98aac3;
    --muted-dark: #65748a;
    --line: rgba(149, 181, 224, .16);
    --line-dark: #dbe3ee;
    --blue: #3478ff;
    --blue-2: #67a2ff;
    --mint: #45e0b8;
    --violet: #9877ff;
    --amber: #f0aa3b;
    --cyan: #36c4e8;
    --rose: #f06e86;
    --shell: 1180px;
    --radius: 18px;
    --shadow: 0 24px 60px rgba(17, 39, 72, .12);
    --font: "Inter", Arial, sans-serif;
    --display: "Space Grotesk", "Inter", sans-serif;
    --mono: "JetBrains Mono", monospace;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font);
    text-rendering: optimizeLegibility;
}

body.nav-open {
    overflow: hidden;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

::selection {
    background: rgba(52, 120, 255, .42);
    color: #fff;
}

.shell {
    width: min(calc(100% - 40px), var(--shell));
    margin-inline: auto;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    background: rgba(7, 16, 31, .58);
    backdrop-filter: blur(19px);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.site-header.scrolled {
    border-color: rgba(145, 177, 221, .14);
    background: rgba(7, 16, 31, .92);
    box-shadow: 0 16px 46px rgba(0, 0, 0, .22);
}

.header-shell {
    width: min(calc(100% - 40px), var(--shell));
    height: 78px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 30px;
}

.brand {
    position: relative;
    z-index: 1002;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
}

.brand-mark {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(102, 159, 255, .48);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(62, 122, 255, .26), rgba(69, 224, 184, .06)),
        #0b1830;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px rgba(23, 80, 204, .25);
}

.brand-mark svg {
    width: 30px;
    height: 30px;
    overflow: visible;
    fill: none;
    stroke: #74a9ff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand-mark svg circle {
    fill: var(--mint);
    stroke: #0b1830;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 5px rgba(69, 224, 184, .75));
}

.brand-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.brand-type strong {
    color: #f8fbff;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.035em;
}

.brand-type em {
    padding: 4px 6px 3px;
    border: 1px solid rgba(69, 224, 184, .4);
    border-radius: 5px;
    background: rgba(69, 224, 184, .1);
    color: #77f1d0;
    font-family: var(--mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .11em;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
}

.main-nav > a {
    position: relative;
    padding: 30px 0;
    color: #aebdd1;
    font-size: 13px;
    font-weight: 600;
    transition: color .16s ease;
}

.main-nav > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 20px;
    height: 2px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--blue), var(--mint));
    transition: right .18s ease;
}

.main-nav > a:hover,
.main-nav > a.active {
    color: #fff;
}

.main-nav > a:hover::after,
.main-nav > a.active::after {
    right: 0;
}

.main-nav .mobile-nav-cta {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-search {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(143, 174, 216, .18);
    border-radius: 11px;
    background: rgba(16, 32, 56, .56);
    color: #91a5c0;
    font-size: 13px;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.header-search:hover {
    border-color: rgba(85, 145, 255, .46);
    background: rgba(26, 50, 85, .76);
    color: #fff;
}

.header-cta {
    min-height: 42px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(89, 142, 255, .56);
    border-radius: 11px;
    background: linear-gradient(135deg, #2666ee, #3b82f6);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(30, 93, 222, .26);
    transition: transform .16s ease, box-shadow .16s ease;
}

.header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(30, 93, 222, .36);
}

.menu-toggle {
    display: none;
}

.button {
    min-height: 50px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    border-color: #4c8cff;
    background: linear-gradient(135deg, #2d6ff7, #3d83f5);
    color: #fff;
    box-shadow: 0 16px 34px rgba(28, 93, 228, .28);
}

.button-primary:hover {
    box-shadow: 0 20px 42px rgba(28, 93, 228, .4);
}

.button-ghost {
    border-color: rgba(158, 184, 220, .2);
    background: rgba(15, 29, 50, .64);
    color: #c8d3e2;
}

.button-ghost:hover {
    border-color: rgba(158, 184, 220, .4);
    background: rgba(22, 40, 66, .82);
}

.button-dark {
    border-color: #142b4e;
    background: #0e2039;
    color: #fff;
    box-shadow: 0 14px 28px rgba(12, 31, 57, .16);
}

.button-dark:hover {
    background: #173154;
}

.button-light {
    background: #f3f7ff;
    color: #14233d;
}

.button-light:hover {
    background: #fff;
    box-shadow: 0 15px 32px rgba(0, 0, 0, .2);
}

.button-outline {
    border-color: #d8e1ed;
    background: #fff;
    color: #44536a;
}

.section {
    position: relative;
    padding: 112px 0;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #4970a4;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.section-kicker::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--blue);
}

.section-kicker i {
    color: var(--blue);
}

.section-kicker.light {
    color: #82a9dc;
}

.section-kicker.light i {
    color: #72a6fa;
}

.section-heading {
    margin-bottom: 48px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 48px;
}

.section-heading > div {
    max-width: 700px;
}

.section-heading h2,
.center-heading h2,
.intro-copy h2,
.server-directory-copy h2,
.security-copy h2,
.faq-heading h2,
.generator-promo-copy h2 {
    margin: 13px 0 0;
    color: var(--text-dark);
    font-family: var(--display);
    font-size: clamp(38px, 4.4vw, 56px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.055em;
}

.section-heading > p {
    max-width: 430px;
    margin: 0;
    color: var(--muted-dark);
    font-size: 14px;
    line-height: 1.75;
}

.dark-heading h2 {
    color: #f4f8ff;
}

.dark-heading > p {
    color: #8498b4;
}

.center-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.center-heading .section-kicker {
    justify-content: center;
}

.center-heading .section-kicker::before {
    display: none;
}

.center-heading p {
    max-width: 630px;
    margin: 19px auto 0;
    color: var(--muted-dark);
    font-size: 15px;
    line-height: 1.75;
}

.center-action {
    margin-top: 35px;
    display: flex;
    justify-content: center;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

.hero {
    position: relative;
    min-height: 800px;
    padding-top: 78px;
    isolation: isolate;
    background:
        radial-gradient(circle at 72% 27%, rgba(43, 99, 211, .22), transparent 33%),
        linear-gradient(180deg, #07101f, #081426);
}

.hero-grid {
    position: absolute;
    inset: 78px 0 0;
    z-index: -3;
    background-image:
        linear-gradient(rgba(128, 165, 219, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 165, 219, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 90%);
}

.hero-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #07101f 0%, transparent 19%, transparent 81%, #07101f 100%);
}

.hero-orb {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(4px);
}

.hero-orb-one {
    width: 400px;
    height: 400px;
    top: 80px;
    right: -180px;
    background: rgba(53, 120, 255, .11);
    box-shadow: 0 0 110px rgba(53, 120, 255, .13);
}

.hero-orb-two {
    width: 300px;
    height: 300px;
    bottom: 100px;
    left: -150px;
    background: rgba(69, 224, 184, .05);
    box-shadow: 0 0 100px rgba(69, 224, 184, .08);
}

.hero-shell {
    min-height: 650px;
    padding: 92px 0 84px;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(480px, .96fr);
    align-items: center;
    gap: 62px;
}

.hero-copy {
    position: relative;
    z-index: 4;
}

.hero-kicker {
    margin-bottom: 26px;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(111, 164, 255, .2);
    border-radius: 999px;
    background: rgba(14, 29, 52, .7);
    color: #91a9c8;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.live-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 4px rgba(69, 224, 184, .09);
}

.live-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(69, 224, 184, .5);
    border-radius: 50%;
    animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
    0% { transform: scale(.5); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: scale(1.55); opacity: 0; }
}

.hero h1 {
    max-width: 660px;
    margin: 0;
    color: #f7faff;
    font-family: var(--display);
    font-size: clamp(54px, 6vw, 79px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.07em;
}

.hero h1 span {
    position: relative;
    color: transparent;
    background: linear-gradient(110deg, #72a7ff 8%, #4fe0bd 88%);
    background-clip: text;
    -webkit-background-clip: text;
}

.hero h1 span::after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: -5px;
    width: 70px;
    height: 8px;
    border-bottom: 2px solid rgba(69, 224, 184, .5);
    border-radius: 50%;
    transform: rotate(-3deg);
}

.hero-copy > p {
    max-width: 620px;
    margin: 28px 0 0;
    color: #aebbd0;
    font-size: 17px;
    line-height: 1.75;
    letter-spacing: -.015em;
}

.hero-actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.hero-proof {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(3, max-content);
}

.hero-proof > div {
    min-width: 126px;
    padding: 0 23px;
    border-left: 1px solid rgba(153, 181, 217, .16);
}

.hero-proof > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.hero-proof strong,
.hero-proof span {
    display: block;
}

.hero-proof strong {
    color: #edf4ff;
    font-family: var(--mono);
    font-size: 20px;
}

.hero-proof span {
    margin-top: 5px;
    color: #6f829e;
    font-size: 12px;
}

.hero-media {
    position: relative;
    min-height: 530px;
}

.hero-image-card {
    position: absolute;
    inset: 20px 14px 88px 68px;
    overflow: hidden;
    border: 1px solid rgba(137, 173, 225, .24);
    border-radius: 24px;
    background: #0d1c32;
    box-shadow: 0 42px 85px rgba(0, 0, 0, .4);
    transform: perspective(1200px) rotateY(-4deg) rotateX(1deg);
}

.hero-image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    box-shadow: inset 0 0 0 8px rgba(11, 26, 48, .28);
    border-radius: inherit;
}

.hero-image-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-image-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 14, 28, .12), rgba(5, 14, 28, .72)),
        linear-gradient(90deg, rgba(6, 16, 31, .15), rgba(28, 88, 188, .08));
}

.image-label {
    position: absolute;
    left: 18px;
    bottom: 17px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(150, 181, 223, .24);
    border-radius: 8px;
    background: rgba(6, 17, 33, .72);
    color: #b7c8df;
    backdrop-filter: blur(10px);
    font-size: 12px;
}

.image-label i {
    color: var(--mint);
}

.terminal-card {
    position: absolute;
    z-index: 5;
    left: -10px;
    right: 86px;
    bottom: 18px;
    overflow: hidden;
    border: 1px solid rgba(139, 175, 225, .28);
    border-radius: 17px;
    background: rgba(9, 19, 35, .96);
    box-shadow: 0 30px 66px rgba(0, 0, 0, .4), 0 0 0 7px rgba(23, 47, 81, .17);
}

.terminal-head {
    height: 43px;
    padding: 0 13px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid rgba(146, 174, 211, .11);
    background: rgba(17, 32, 53, .9);
    font-family: var(--mono);
    font-size: 12px;
}

.terminal-head > span {
    color: #879bb8;
}

.terminal-head em {
    justify-self: end;
    color: #64dfbd;
    font-style: normal;
}

.terminal-head em b {
    width: 5px;
    height: 5px;
    margin-right: 5px;
    display: inline-block;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 7px rgba(69, 224, 184, .7);
}

.terminal-dots {
    display: flex;
    gap: 5px;
}

.terminal-dots i {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: #46566c;
}

.terminal-dots i:first-child { background: #ff6b6b; }
.terminal-dots i:nth-child(2) { background: #f5bd4f; }
.terminal-dots i:last-child { background: #45d6a8; }

.terminal-tabs {
    height: 33px;
    padding: 0 16px;
    display: flex;
    align-items: end;
    gap: 22px;
    border-bottom: 1px solid rgba(146, 174, 211, .09);
    color: #60728c;
    font-family: var(--mono);
    font-size: 13px;
}

.terminal-tabs span {
    height: 33px;
    padding-top: 12px;
}

.terminal-tabs .active {
    border-bottom: 2px solid var(--blue);
    color: #b4c4d9;
}

.terminal-body {
    padding: 18px 19px 20px;
    color: #bac8dc;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.7;
}

.terminal-body p {
    margin: 0;
}

.terminal-body p b {
    margin-right: 5px;
    color: var(--mint);
}

.terminal-body .indent {
    padding-left: 16px;
    color: #86b2ff;
}

.terminal-body .success {
    margin-top: 7px;
    color: #54d8ae;
}

.terminal-body .command-gap {
    margin-top: 12px;
}

.terminal-table {
    margin-top: 9px;
    padding: 8px 9px;
    display: grid;
    grid-template-columns: 1.1fr 1fr .8fr;
    gap: 5px 8px;
    border: 1px solid rgba(123, 154, 197, .12);
    border-radius: 7px;
    background: rgba(18, 35, 59, .66);
    font-size: 12px;
}

.terminal-table span {
    color: #5e718b;
}

.terminal-table strong {
    color: #aab9cd;
    font-weight: 500;
}

.terminal-table .ready {
    color: #51ddb4;
}

.floating-app {
    position: absolute;
    z-index: 7;
    min-width: 102px;
    height: 38px;
    padding: 0 10px 0 7px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(130, 166, 217, .23);
    border-radius: 10px;
    background: rgba(14, 29, 50, .96);
    color: #aebdd1;
    font-family: var(--mono);
    font-size: 12px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
}

.floating-app > i {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #1d3150;
    color: #d9e5f7;
    font-size: 13px;
}

.app-github {
    top: 3px;
    right: 0;
    animation: float 5.4s ease-in-out infinite;
}

.app-figma {
    left: 13px;
    top: 98px;
    animation: float 5s ease-in-out -1.3s infinite;
}

.app-figma > i {
    background: rgba(152, 119, 255, .2);
    color: #bda6ff;
}

.app-browser {
    right: -8px;
    bottom: 92px;
    animation: float 5.8s ease-in-out -2s infinite;
}

.app-browser > i {
    background: rgba(69, 224, 184, .15);
    color: #6be8c8;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

.hero-process {
    border-top: 1px solid rgba(135, 166, 207, .1);
    border-bottom: 1px solid rgba(135, 166, 207, .1);
    background: rgba(9, 21, 39, .72);
}

.hero-process-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.hero-process-inner > span {
    color: #60738f;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-process-inner > div {
    display: flex;
    align-items: center;
    gap: 25px;
}

.hero-process p {
    margin: 0;
    color: #91a2ba;
    font-size: 12px;
    font-weight: 600;
}

.hero-process p i {
    margin-right: 8px;
    color: #4f79b6;
    font-family: var(--mono);
    font-size: 13px;
    font-style: normal;
}

.hero-process b {
    color: #2c3c54;
    font-weight: 400;
}

.intro-section {
    background: #fff;
    color: var(--text-dark);
}

.intro-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: 78px;
}

.intro-media {
    position: relative;
    min-height: 545px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(19, 44, 79, .17);
}

.intro-media::before {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid #cddcf0;
    border-radius: 24px;
}

.intro-media img {
    width: 100%;
    height: 100%;
    min-height: 545px;
    display: block;
    object-fit: cover;
}

.intro-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(6, 17, 33, .82));
}

.intro-media-stat {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(193, 214, 241, .22);
    border-radius: 13px;
    background: rgba(7, 20, 39, .76);
    backdrop-filter: blur(12px);
}

.intro-media-stat > i {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(52, 120, 255, .18);
    color: #7eadff;
}

.intro-media-stat strong,
.intro-media-stat span {
    display: block;
}

.intro-media-stat strong {
    color: #fff;
    font-size: 13px;
}

.intro-media-stat span {
    margin-top: 4px;
    color: #8fa3bf;
    font-size: 12px;
}

.section-lead {
    margin: 23px 0 0;
    color: #58687f;
    font-size: 16px;
    line-height: 1.8;
}

.intro-points {
    margin-top: 31px;
    display: grid;
    gap: 19px;
}

.intro-points > div {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
}

.intro-points > div > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    background: #f4f7fc;
    color: var(--blue);
}

.intro-points h3 {
    margin: 1px 0 5px;
    color: #17243b;
    font-size: 14px;
}

.intro-points p {
    margin: 0;
    color: #68788f;
    font-size: 12px;
    line-height: 1.6;
}

.text-link {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #253752;
    font-size: 13px;
    font-weight: 700;
}

.intro-copy > .text-link {
    margin-top: 29px;
}

.text-link i {
    color: var(--blue);
    transition: transform .16s ease;
}

.text-link:hover i {
    transform: translateX(3px);
}

.featured-section {
    background: var(--paper);
    color: var(--text-dark);
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.guide-card {
    position: relative;
    isolation: isolate;
    min-height: 470px;
    overflow: hidden;
    border: 1px solid #dce3ec;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(29, 48, 80, .06);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.accent-blue { --accent: var(--blue); --accent-rgb: 52, 120, 255; }
.accent-mint { --accent: #28c89d; --accent-rgb: 40, 200, 157; }
.accent-violet { --accent: var(--violet); --accent-rgb: 152, 119, 255; }
.accent-amber { --accent: var(--amber); --accent-rgb: 240, 170, 59; }
.accent-cyan { --accent: var(--cyan); --accent-rgb: 54, 196, 232; }
.accent-rose { --accent: var(--rose); --accent-rgb: 240, 110, 134; }

.guide-card:hover {
    z-index: 2;
    border-color: rgba(var(--accent-rgb), .42);
    box-shadow: 0 25px 58px rgba(29, 48, 80, .14);
    transform: translateY(-7px);
}

.card-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.card-cover:focus-visible {
    outline: 3px solid rgba(var(--accent-rgb), .48);
    outline-offset: -3px;
}

.guide-image {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #0d1c32;
}

.guide-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.guide-card:hover .guide-image img {
    transform: scale(1.05);
}

.guide-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 13, 27, .05), rgba(4, 13, 27, .74)),
        linear-gradient(90deg, rgba(var(--accent-rgb), .15), transparent);
}

.guide-count,
.guide-badge {
    position: absolute;
    top: 15px;
}

.guide-count {
    left: 15px;
    color: rgba(255, 255, 255, .82);
    font-family: var(--mono);
    font-size: 12px;
}

.guide-badge {
    right: 15px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(6, 17, 33, .66);
    color: #e6eef9;
    backdrop-filter: blur(9px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.guide-content {
    padding: 22px;
}

.guide-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #7c899e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.guide-meta span + span::before {
    content: "•";
    margin-right: 9px;
    color: #c3cad5;
}

.guide-content h3 {
    margin: 12px 0 9px;
    color: #142036;
    font-family: var(--display);
    font-size: 19px;
    line-height: 1.28;
    letter-spacing: -.035em;
}

.guide-content > p {
    margin: 0;
    color: #69768b;
    font-size: 12px;
    line-height: 1.7;
}

.guide-actions {
    position: relative;
    z-index: 3;
    margin-top: 20px;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    border-top: 1px solid #edf0f5;
}

.download-link {
    min-height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    color: #68758a;
    font-size: 12px;
    font-weight: 650;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.download-link:hover {
    border-color: rgba(var(--accent-rgb), .4);
    background: rgba(var(--accent-rgb), .06);
    color: var(--accent);
}

.resources-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 10%, rgba(56, 114, 225, .11), transparent 27%),
        #081326;
}

.resources-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(132, 166, 216, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 166, 216, .035) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.resource-card {
    position: relative;
    isolation: isolate;
    min-height: 370px;
    padding: 27px;
    overflow: hidden;
    border: 1px solid rgba(134, 166, 211, .14);
    border-radius: 17px;
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), .055), transparent 38%),
        rgba(16, 31, 53, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.resource-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    top: -75px;
    right: -65px;
    border: 1px solid rgba(var(--accent-rgb), .13);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(var(--accent-rgb), .025);
}

.resource-card:hover {
    border-color: rgba(var(--accent-rgb), .4);
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), .1), transparent 44%),
        rgba(19, 37, 63, .94);
    transform: translateY(-6px);
}

.resource-icon {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--accent-rgb), .3);
    border-radius: 12px;
    background: rgba(var(--accent-rgb), .1);
    color: var(--accent);
}

.resource-card small {
    margin-top: 23px;
    display: block;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.resource-card h3 {
    margin: 9px 0 10px;
    color: #f0f5fd;
    font-family: var(--display);
    font-size: 23px;
    letter-spacing: -.035em;
}

.resource-card > p {
    margin: 0;
    color: #8395ae;
    font-size: 12px;
    line-height: 1.65;
}

.resource-card ul {
    margin: 19px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
}

.resource-card li {
    padding: 6px 8px;
    border: 1px solid rgba(130, 162, 204, .11);
    border-radius: 6px;
    background: rgba(5, 16, 32, .34);
    color: #7e91ab;
    font-size: 12px;
}

.resource-card li i {
    margin-right: 5px;
    color: var(--accent);
}

.resource-link {
    position: absolute;
    z-index: 3;
    left: 27px;
    right: 27px;
    bottom: 25px;
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(138, 169, 210, .1);
    color: #bac8dc;
    font-size: 12px;
    font-weight: 700;
}

.resource-link i {
    color: var(--accent);
    transition: transform .16s ease;
}

.resource-link:hover i {
    transform: translate(2px, -2px);
}

.how-section {
    background: #fff;
    color: var(--text-dark);
}

.steps-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.steps-grid::before {
    content: "";
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 57px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #b9cbed 10%, #b9cbed 90%, transparent);
}

.step-card {
    position: relative;
    padding: 29px 24px 26px;
    border: 1px solid #dfe6ef;
    border-radius: 16px;
    background: #fbfcfe;
    box-shadow: 0 12px 32px rgba(25, 49, 82, .05);
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 45px rgba(25, 49, 82, .1);
}

.step-number {
    position: absolute;
    top: 13px;
    right: 15px;
    color: #a3afbf;
    font-family: var(--mono);
    font-size: 12px;
}

.step-card > i {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    margin: 0 auto 19px;
    display: grid;
    place-items: center;
    border: 1px solid #d7e4f7;
    border-radius: 16px;
    background: #eff5ff;
    color: var(--blue);
    box-shadow: 0 0 0 8px #fff;
    font-size: 18px;
}

.step-card h3 {
    margin: 0 0 9px;
    font-family: var(--display);
    font-size: 16px;
}

.step-card p {
    margin: 0;
    color: #68788f;
    font-size: 13px;
    line-height: 1.65;
}

.server-directory-section {
    background: var(--paper);
    color: var(--text-dark);
}

.server-directory-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: start;
    gap: 75px;
}

.server-directory-copy {
    position: sticky;
    top: 120px;
}

.server-directory-copy > p {
    margin: 23px 0 0;
    color: #64748a;
    font-size: 14px;
    line-height: 1.8;
}

.server-note {
    margin: 25px 0;
    padding: 16px;
    display: flex;
    gap: 11px;
    border: 1px solid #dce6f4;
    border-radius: 11px;
    background: #eef4fd;
}

.server-note > i {
    margin-top: 2px;
    color: var(--blue);
}

.server-note p {
    margin: 0;
    color: #60728b;
    font-size: 12px;
    line-height: 1.6;
}

.server-note strong {
    color: #2b3c56;
}

.server-list {
    display: grid;
    gap: 10px;
}

.server-row {
    padding: 15px 17px;
    display: grid;
    grid-template-columns: 45px 1fr auto;
    align-items: center;
    gap: 14px;
    border: 1px solid #dce3ed;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(26, 48, 78, .04);
    transition: transform .18s ease, border-color .18s ease;
}

.server-row:hover {
    border-color: rgba(var(--tone-rgb), .38);
    transform: translateX(4px);
}

.tone-blue { --tone: var(--blue); --tone-rgb: 52, 120, 255; }
.tone-violet { --tone: var(--violet); --tone-rgb: 152, 119, 255; }
.tone-mint { --tone: #28c89d; --tone-rgb: 40, 200, 157; }
.tone-rose { --tone: var(--rose); --tone-rgb: 240, 110, 134; }
.tone-cyan { --tone: var(--cyan); --tone-rgb: 54, 196, 232; }
.tone-amber { --tone: var(--amber); --tone-rgb: 240, 170, 59; }

.server-row-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(var(--tone-rgb), .1);
    color: var(--tone);
}

.server-row h3 {
    margin: 0 0 4px;
    color: #1c2940;
    font-size: 12px;
}

.server-row p {
    margin: 0;
    color: #748299;
    font-size: 12px;
}

.server-row em {
    padding: 6px 8px;
    border: 1px solid #e0e6ef;
    border-radius: 7px;
    background: #f7f9fc;
    color: #738198;
    font-family: var(--mono);
    font-size: 13px;
    font-style: normal;
}

.integration-showcase {
    background: #07111f;
}

.integration-bento {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    grid-template-rows: repeat(2, 250px);
    gap: 16px;
}

.integration-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(142, 174, 219, .15);
    border-radius: 18px;
    background: #0d1b31;
    transition: transform .22s ease, border-color .22s ease;
}

.integration-tile:hover {
    border-color: rgba(84, 143, 247, .46);
    transform: translateY(-4px);
}

.tile-large {
    grid-row: 1 / 3;
}

.integration-tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.integration-tile:hover img {
    transform: scale(1.04);
}

.tile-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 14, 27, .12), rgba(5, 14, 27, .93));
}

.tile-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 12px;
    background: rgba(5, 17, 34, .58);
    color: #e1ebf8;
    backdrop-filter: blur(8px);
}

.integration-tile > div:not(.tile-shade) {
    position: absolute;
    left: 22px;
    right: 56px;
    bottom: 22px;
}

.integration-tile small {
    color: #78a6ea;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.integration-tile h3 {
    margin: 7px 0 0;
    color: #f3f7fe;
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: -.035em;
}

.tile-large h3 {
    max-width: 520px;
    font-size: 31px;
}

.integration-tile p {
    max-width: 480px;
    margin: 9px 0 0;
    color: #8ea0b8;
    font-size: 13px;
    line-height: 1.6;
}

.tile-arrow {
    position: absolute;
    right: 20px;
    bottom: 23px;
    color: #78a6ea;
}

.generator-promo-section {
    background: #fff;
    color: var(--text-dark);
}

.generator-promo {
    position: relative;
    overflow: hidden;
    padding: 58px;
    display: grid;
    grid-template-columns: 1fr .95fr;
    align-items: center;
    gap: 70px;
    border: 1px solid rgba(102, 151, 230, .2);
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% 0, rgba(52, 120, 255, .23), transparent 34%),
        linear-gradient(135deg, #0b1930, #0d2443);
    box-shadow: 0 34px 78px rgba(15, 42, 77, .2);
}

.generator-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(133, 167, 215, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(133, 167, 215, .04) 1px, transparent 1px);
    background-size: 48px 48px;
}

.generator-promo-copy,
.generator-code-preview {
    position: relative;
    z-index: 2;
}

.generator-promo-copy h2 {
    color: #f4f8ff;
}

.generator-promo-copy > p {
    margin: 19px 0 0;
    color: #8fa2bb;
    font-size: 13px;
    line-height: 1.75;
}

.generator-promo-copy ul {
    margin: 22px 0 27px;
    padding: 0;
    display: grid;
    gap: 9px;
    list-style: none;
}

.generator-promo-copy li {
    color: #aebdd1;
    font-size: 12px;
}

.generator-promo-copy li i {
    margin-right: 8px;
    color: var(--mint);
}

.generator-code-preview {
    overflow: hidden;
    border: 1px solid rgba(138, 171, 219, .24);
    border-radius: 16px;
    background: rgba(7, 17, 32, .95);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .34);
    transform: rotate(1.5deg);
}

.code-preview-head {
    height: 44px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(137, 168, 209, .12);
    color: #7487a0;
    font-family: var(--mono);
    font-size: 12px;
}

.code-preview-head em {
    color: #61dbb7;
    font-style: normal;
}

.code-preview-head em i {
    width: 5px;
    height: 5px;
    margin-right: 5px;
    display: inline-block;
    border-radius: 50%;
    background: var(--mint);
}

.generator-code-preview pre {
    margin: 0;
    padding: 28px 24px;
    overflow-x: auto;
    color: #aebed3;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.9;
}

.generator-code-preview pre span {
    color: #78a9fa;
}

.generator-code-preview pre b {
    color: #67dcb9;
    font-weight: 500;
}

.generator-code-preview pre strong {
    color: #e3ab5b;
    font-weight: 500;
}

.code-preview-actions {
    padding: 12px 15px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid rgba(137, 168, 209, .1);
}

.code-preview-actions span {
    padding: 7px 9px;
    border: 1px solid rgba(139, 171, 215, .14);
    border-radius: 7px;
    color: #6f819a;
    font-family: var(--mono);
    font-size: 13px;
}

.security-section {
    background: var(--paper);
    color: var(--text-dark);
}

.security-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: 74px;
}

.security-image {
    position: relative;
    height: 560px;
    overflow: hidden;
    border-radius: 23px;
    box-shadow: 0 28px 68px rgba(18, 41, 72, .18);
}

.security-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.security-image-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 15, 30, .1), rgba(5, 15, 30, .7));
}

.security-lock {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(122, 174, 255, .32);
    border-radius: 17px;
    background: rgba(6, 19, 38, .73);
    color: #77a8ff;
    backdrop-filter: blur(12px);
    font-size: 24px;
}

.security-copy > p {
    margin: 22px 0 0;
    color: #64748a;
    font-size: 14px;
    line-height: 1.8;
}

.security-checks {
    margin: 29px 0 27px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.security-checks > div {
    padding: 15px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid #dce4ef;
    border-radius: 12px;
    background: #fff;
}

.security-checks > div > i {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eef4ff;
    color: var(--blue);
}

.security-checks strong,
.security-checks small {
    display: block;
}

.security-checks strong {
    color: #25344b;
    font-size: 12px;
}

.security-checks small {
    margin-top: 4px;
    color: #7a879a;
    font-size: 12px;
    line-height: 1.45;
}

.faq-section {
    background: #fff;
    color: var(--text-dark);
}

.faq-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    align-items: start;
    gap: 80px;
}

.faq-heading {
    position: sticky;
    top: 120px;
}

.faq-heading > p {
    margin: 20px 0 25px;
    color: #66768c;
    font-size: 13px;
    line-height: 1.75;
}

.accordion {
    display: grid;
    gap: 10px;
}

.accordion-item {
    overflow: hidden;
    border: 1px solid #dce4ee;
    border-radius: 13px;
    background: #fbfcfe;
    transition: border-color .16s ease, background .16s ease;
}

.accordion-item.open {
    border-color: #c6d8f1;
    background: #f5f8fd;
}

.accordion-item button {
    width: 100%;
    min-height: 67px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 0;
    background: transparent;
    color: #203049;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
}

.accordion-item button i {
    color: #71839b;
    transition: transform .2s ease, color .2s ease;
}

.accordion-item.open button i {
    color: var(--blue);
    transform: rotate(45deg);
}

.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}

.accordion-item.open .accordion-content {
    grid-template-rows: 1fr;
}

.accordion-content > p {
    min-height: 0;
    margin: 0;
    overflow: hidden;
    color: #69788d;
    font-size: 13px;
    line-height: 1.7;
}

.accordion-item.open .accordion-content > p {
    padding: 0 20px 20px;
}

.newsletter-section {
    padding: 0 0 90px;
    background: #fff;
    color: var(--text-dark);
}

.newsletter-card {
    padding: 33px 35px;
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 22px;
    border: 1px solid rgba(90, 148, 245, .24);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(47, 108, 228, .16), rgba(61, 178, 163, .08)),
        #0d1d34;
    box-shadow: 0 25px 58px rgba(14, 38, 69, .18);
}

.newsletter-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(107, 162, 255, .3);
    border-radius: 15px;
    background: rgba(65, 123, 233, .13);
    color: #7aa9fc;
    font-size: 20px;
}

.newsletter-card h2 {
    margin: 8px 0 4px;
    color: #f2f7ff;
    font-family: var(--display);
    font-size: 23px;
    letter-spacing: -.04em;
}

.newsletter-card > div:nth-child(2) > p {
    margin: 0;
    color: #8296b0;
    font-size: 12px;
}

.newsletter-form {
    width: 360px;
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 5px;
    border: 1px solid rgba(142, 175, 219, .2);
    border-radius: 11px;
    background: rgba(6, 17, 32, .58);
}

.newsletter-form input {
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #e7eef8;
    font-size: 12px;
}

.newsletter-form button {
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #f1f6ff;
    color: #16243b;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.newsletter-form button i {
    margin-left: 7px;
}

.footer-cta {
    position: relative;
    overflow: hidden;
    padding: 76px 0;
    border-top: 1px solid rgba(139, 170, 212, .1);
    background: #071326;
}

.footer-cta-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(129, 163, 210, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(129, 163, 210, .04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.footer-cta-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.footer-cta-inner > div:first-child {
    max-width: 720px;
}

.footer-cta h2 {
    margin: 12px 0 10px;
    color: #f4f8ff;
    font-family: var(--display);
    font-size: clamp(34px, 4vw, 49px);
    line-height: 1.05;
    letter-spacing: -.055em;
}

.footer-cta p {
    margin: 0;
    color: #8295af;
    font-size: 12px;
    line-height: 1.65;
}

.footer-cta-actions {
    flex: 0 0 auto;
    display: grid;
    gap: 10px;
}

.site-footer {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(132, 166, 210, .11);
    background: #050d19;
}

.footer-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    left: 50%;
    bottom: -330px;
    border-radius: 50%;
    background: rgba(46, 105, 219, .18);
    filter: blur(70px);
    transform: translateX(-50%);
}

.footer-shell {
    position: relative;
}

.footer-main {
    padding: 74px 0 60px;
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 78px;
}

.footer-brand > p {
    max-width: 355px;
    margin: 22px 0 18px;
    color: #788aa3;
    font-size: 12px;
    line-height: 1.75;
}

.independent-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #61758f;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.independent-label i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 8px rgba(69, 224, 184, .6);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.footer-links > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.footer-links h3 {
    margin: 0 0 7px;
    color: #ced8e7;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.footer-links a {
    color: #71849f;
    font-size: 12px;
    transition: color .16s ease, transform .16s ease;
}

.footer-links a:hover {
    color: #a8c4ec;
    transform: translateX(2px);
}

.footer-links a i {
    margin-left: 4px;
    font-size: 13px;
}

.footer-bottom {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(131, 163, 206, .1);
}

.footer-bottom p {
    margin: 0;
    color: #4f6078;
    font-size: 12px;
}

.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(118, 167, 249, .32);
    border-radius: 11px;
    background: rgba(10, 25, 45, .88);
    color: #8db5f5;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .18s ease, transform .18s ease;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* Inner pages */
.inner-hero {
    position: relative;
    min-height: 510px;
    padding: 160px 0 76px;
    overflow: hidden;
    background: #07101f;
}

.inner-hero-bg {
    position: absolute;
    inset: 0;
}

.inner-hero-bg img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.inner-hero-bg > div {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 14, 28, .97) 0%, rgba(5, 14, 28, .88) 55%, rgba(5, 14, 28, .55)),
        linear-gradient(180deg, rgba(5, 14, 28, .2), rgba(5, 14, 28, .78));
}

.inner-hero-shell {
    position: relative;
    z-index: 2;
}

.breadcrumbs {
    margin-bottom: 27px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: #71859f;
    font-size: 12px;
}

.breadcrumbs a:hover {
    color: #a8c9f8;
}

.breadcrumbs i {
    color: #3c4f69;
    font-size: 12px;
}

.article-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #75a8f8;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.article-label > i.fa-circle {
    font-size: 12px;
    color: var(--blue);
    filter: drop-shadow(0 0 6px rgba(52, 120, 255, .8));
}

.inner-hero h1 {
    max-width: 890px;
    margin: 17px 0 20px;
    color: #f7faff;
    font-family: var(--display);
    font-size: clamp(43px, 5.7vw, 69px);
    line-height: 1.02;
    letter-spacing: -.065em;
}

.inner-hero-shell > p {
    max-width: 760px;
    margin: 0;
    color: #a0b1c8;
    font-size: 16px;
    line-height: 1.75;
}

.article-meta {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.article-meta span {
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(136, 166, 207, .18);
    border-radius: 7px;
    background: rgba(15, 31, 53, .66);
    color: #8699b3;
    font-size: 12px;
}

.article-meta i {
    color: #6e9cdd;
}

.compact-hero {
    min-height: 470px;
}

.article-layout {
    padding: 74px 0 105px;
    display: grid;
    grid-template-columns: 195px minmax(0, 1fr) 255px;
    align-items: start;
    gap: 36px;
    color: var(--text-dark);
}

.article-page main {
    background: var(--paper);
}

.article-toc,
.article-sidebar {
    position: sticky;
    top: 105px;
}

.toc-card,
.article-sidebar-card {
    border: 1px solid #dce4ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(24, 49, 84, .05);
}

.toc-card {
    padding: 18px;
}

.toc-card > span,
.article-sidebar-card > span {
    color: #7b899c;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.toc-card nav {
    margin-top: 13px;
    display: grid;
    gap: 6px;
}

.toc-card a {
    padding: 7px 0;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 5px;
    border-bottom: 1px solid #edf0f5;
    color: #66758b;
    font-size: 12px;
    line-height: 1.45;
}

.toc-card a:last-child {
    border-bottom: 0;
}

.toc-card a:hover {
    color: #276cd9;
}

.toc-card a i {
    color: #9aa7b8;
    font-family: var(--mono);
    font-size: 13px;
    font-style: normal;
}

.article-content {
    min-width: 0;
}

.article-command {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(119, 153, 202, .2);
    border-radius: 14px;
    background: #0a1527;
    box-shadow: 0 18px 40px rgba(17, 36, 66, .12);
}

.article-command > div {
    height: 38px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid rgba(137, 167, 209, .1);
}

.article-command > div span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #46566b;
}

.article-command > div span:first-child { background: #ff6b6b; }
.article-command > div span:nth-child(2) { background: #f5bd4f; }
.article-command > div span:nth-child(3) { background: #45d6a8; }

.article-command > div em {
    margin-left: 6px;
    color: #6c7f99;
    font-family: var(--mono);
    font-size: 13px;
    font-style: normal;
}

.article-command > code {
    padding: 20px 70px 20px 20px;
    display: block;
    overflow-x: auto;
    color: #c2d2e8;
    font-family: var(--mono);
    font-size: 12px;
    white-space: nowrap;
}

.copy-code {
    border: 0;
    cursor: pointer;
}

.article-command > .copy-code {
    position: absolute;
    right: 12px;
    bottom: 13px;
    padding: 7px 9px;
    border: 1px solid rgba(142, 174, 216, .16);
    border-radius: 7px;
    background: rgba(23, 44, 72, .82);
    color: #8196b2;
    font-size: 13px;
}

.article-summary {
    margin: 22px 0 35px;
    padding: 20px;
    display: flex;
    gap: 13px;
    border: 1px solid #d8e5f7;
    border-radius: 12px;
    background: #eef5ff;
}

.article-summary > i {
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #3478ed;
    color: #fff;
}

.article-summary strong {
    display: block;
    color: #21334e;
    font-size: 12px;
}

.article-summary p {
    margin: 5px 0 0;
    color: #61728a;
    font-size: 12px;
    line-height: 1.6;
}

.article-section {
    position: relative;
    padding: 8px 0 36px;
    border-bottom: 1px solid #dfe5ed;
}

.article-section + .article-section {
    padding-top: 36px;
}

.article-section-number {
    margin-bottom: 9px;
    display: block;
    color: #7298ce;
    font-family: var(--mono);
    font-size: 12px;
}

.article-section h2,
.article-faq > h2 {
    margin: 0 0 17px;
    color: #132039;
    font-family: var(--display);
    font-size: 27px;
    letter-spacing: -.04em;
}

.article-section > p {
    margin: 0 0 15px;
    color: #56657b;
    font-size: 14px;
    line-height: 1.85;
}

.article-code-block {
    margin: 22px 0;
    overflow: hidden;
    border: 1px solid rgba(119, 153, 202, .19);
    border-radius: 13px;
    background: #0a1527;
    box-shadow: 0 18px 40px rgba(17, 36, 66, .1);
}

.code-block-head {
    height: 39px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(137, 167, 209, .1);
}

.code-block-head span,
.code-block-head button {
    color: #6f829d;
    font-family: var(--mono);
    font-size: 13px;
}

.code-block-head span i {
    margin-right: 6px;
}

.code-block-head button {
    padding: 6px 8px;
    border: 1px solid rgba(136, 168, 210, .13);
    border-radius: 6px;
    background: rgba(23, 43, 69, .8);
}

.article-code-block pre {
    margin: 0;
    padding: 20px;
    overflow-x: auto;
    color: #c4d3e9;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.8;
    white-space: pre-wrap;
}

.article-list {
    margin: 19px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
    list-style: none;
}

.article-list li {
    display: flex;
    gap: 10px;
    color: #52627a;
    font-size: 12px;
    line-height: 1.6;
}

.article-list li i {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e5f7f1;
    color: #22a982;
    font-size: 13px;
}

.article-note {
    margin-top: 20px;
    padding: 16px;
    display: flex;
    gap: 11px;
    border-left: 3px solid #4b84f4;
    border-radius: 0 10px 10px 0;
    background: #edf4ff;
}

.article-note > i {
    color: #4b84f4;
}

.article-note p {
    margin: 0;
    color: #4f6280;
    font-size: 12px;
    line-height: 1.65;
}

.article-download-box {
    margin: 35px 0;
    padding: 25px;
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 17px;
    border: 1px solid #cfe7df;
    border-radius: 15px;
    background: #effaf6;
}

.download-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #d9f4eb;
    color: #21a47c;
}

.article-download-box span {
    color: #4f8b78;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.article-download-box h2 {
    margin: 5px 0;
    color: #183b33;
    font-family: var(--display);
    font-size: 19px;
}

.article-download-box p {
    margin: 0;
    color: #5d7b71;
    font-size: 12px;
    line-height: 1.55;
}

.article-download-box > a {
    padding: 10px 12px;
    border-radius: 8px;
    background: #1a9d77;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.article-download-box > a i {
    margin-left: 6px;
}

.article-faq {
    padding: 17px 0 0;
}

.article-faq > h2 {
    margin-top: 12px;
}

.source-note {
    margin-top: 28px;
    padding: 18px;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #dce4ee;
    border-radius: 12px;
    background: #fff;
}

.source-note > i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eef4ff;
    color: var(--blue);
}

.source-note strong {
    display: block;
    color: #2a3a52;
    font-size: 12px;
}

.source-note p {
    margin: 4px 0 0;
    color: #6f7d91;
    font-size: 12px;
    line-height: 1.5;
}

.source-note a {
    color: #276edc;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.article-sidebar {
    display: grid;
    gap: 13px;
}

.article-sidebar-card {
    padding: 19px;
}

.article-sidebar-card.primary {
    border-color: #cfdff6;
    background: linear-gradient(145deg, #f3f7ff, #fff);
}

.article-sidebar-card h3 {
    margin: 9px 0 7px;
    color: #1f2e46;
    font-size: 13px;
}

.article-sidebar-card > p {
    margin: 0;
    color: #68778c;
    font-size: 12px;
    line-height: 1.6;
}

.article-sidebar-card > a {
    min-height: 38px;
    margin-top: 13px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    background: #3478ed;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.article-sidebar-card > a.secondary {
    margin-top: 7px;
    border: 1px solid #d9e2ee;
    background: #fff;
    color: #41536d;
}

.sidebar-related {
    margin-top: 13px;
    display: grid;
    gap: 10px;
}

.sidebar-related a {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 9px;
    align-items: center;
}

.sidebar-related img {
    width: 58px;
    height: 45px;
    display: block;
    border-radius: 7px;
    object-fit: cover;
}

.sidebar-related > a > span {
    color: #4d5f78;
    font-size: 12px;
    line-height: 1.4;
}

.sidebar-related small {
    margin-top: 4px;
    display: block;
    color: #9aa5b5;
    font-size: 12px;
}

/* Category and guide listing */
.category-content-section,
.all-guides-section,
.tool-section,
.tool-help-section,
.prose-section,
.contact-section,
.legal-section,
.credits-section {
    background: var(--paper);
    color: var(--text-dark);
}

.category-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.category-guide-card {
    position: relative;
    isolation: isolate;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid #dce3ed;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 13px 35px rgba(24, 49, 84, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.category-guide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 23px 50px rgba(24, 49, 84, .12);
}

.category-guide-card > img {
    width: 100%;
    height: 180px;
    display: block;
    object-fit: cover;
}

.category-guide-card-content {
    padding: 22px;
}

.category-guide-card-content > span {
    color: var(--accent);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.category-guide-card h2 {
    margin: 9px 0 9px;
    color: #142138;
    font-family: var(--display);
    font-size: 21px;
    line-height: 1.28;
    letter-spacing: -.04em;
}

.category-guide-card p {
    margin: 0;
    color: #65748a;
    font-size: 13px;
    line-height: 1.65;
}

.category-guide-card-content > div {
    position: relative;
    z-index: 3;
    margin-top: 18px;
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #edf0f5;
}

.category-guide-card small {
    color: #8996a9;
    font-size: 13px;
}

.category-guide-card-content a {
    color: #2d70df;
    font-size: 12px;
    font-weight: 700;
}

.category-feature-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
}

.category-feature {
    position: relative;
    padding: 24px;
    border: 1px solid #dce4ee;
    border-radius: 14px;
    background: #fff;
}

.category-feature > span {
    position: absolute;
    top: 14px;
    right: 15px;
    color: #a0adbd;
    font-family: var(--mono);
    font-size: 13px;
}

.category-feature > i {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef4ff;
    color: var(--blue);
}

.category-feature h3 {
    margin: 17px 0 8px;
    color: #26364e;
    font-size: 12px;
}

.category-feature p {
    margin: 0;
    color: #748196;
    font-size: 12px;
    line-height: 1.6;
}

.server-directory-panel {
    margin-top: 65px;
    padding: 38px;
    border: 1px solid #dce4ed;
    border-radius: 20px;
    background: #eef2f8;
}

.server-directory-panel .server-list {
    grid-template-columns: 1fr 1fr;
}

.guide-filter {
    margin-bottom: 31px;
    padding: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid #dce3ed;
    border-radius: 12px;
    background: #fff;
}

.guide-filter button {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6a788d;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.guide-filter button.active {
    background: #0f213b;
    color: #fff;
}

.guide-card.filtered-out {
    display: none;
}

/* Tools */
.tool-builder {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 20px;
}

.tool-form-panel,
.tool-output-panel {
    padding: 28px;
    border: 1px solid #dbe3ed;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(23, 48, 83, .06);
}

.tool-panel-heading {
    margin-bottom: 26px;
    display: flex;
    gap: 13px;
}

.tool-panel-heading > span {
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #eef4ff;
    color: var(--blue);
}

.tool-panel-heading h2 {
    margin: 1px 0 5px;
    color: #17253d;
    font-family: var(--display);
    font-size: 19px;
}

.tool-panel-heading p {
    margin: 0;
    color: #738197;
    font-size: 12px;
    line-height: 1.5;
}

.form-grid {
    display: grid;
    gap: 16px;
}

.form-field {
    display: grid;
    gap: 7px;
}

.form-field > span {
    color: #485a73;
    font-size: 12px;
    font-weight: 700;
}

.form-field > span i {
    color: var(--rose);
    font-style: normal;
}

.form-field > span em {
    margin-left: 4px;
    color: #99a5b4;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0 13px;
    border: 1px solid #d9e1ec;
    border-radius: 9px;
    outline: 0;
    background: #f9fbfd;
    color: #1d2b41;
    font-size: 13px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.form-field input,
.form-field select {
    height: 45px;
}

.form-field textarea {
    padding-top: 13px;
    resize: vertical;
    line-height: 1.6;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #4c83ed;
    box-shadow: 0 0 0 3px rgba(76, 131, 237, .1);
}

.form-field small {
    color: #97a2b1;
    font-size: 13px;
}

.conditional-fields {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 12px;
}

.conditional-fields.is-hidden {
    display: none;
}

.security-reminder {
    margin-top: 20px;
    padding: 14px;
    display: flex;
    gap: 11px;
    border-radius: 10px;
    background: #eef8f5;
}

.security-reminder > i {
    color: #239a79;
}

.security-reminder p {
    margin: 0;
    color: #567268;
    font-size: 12px;
    line-height: 1.55;
}

.security-reminder strong {
    margin-bottom: 3px;
    display: block;
    color: #315b4e;
}

.generator-output {
    overflow: hidden;
    border: 1px solid rgba(125, 156, 200, .2);
    border-radius: 13px;
    background: #091426;
}

.generator-output-head {
    height: 45px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid rgba(132, 163, 205, .12);
    color: #70839e;
    font-family: var(--mono);
    font-size: 12px;
}

.generator-output-head > span {
    justify-self: center;
}

.generator-output-head > em {
    justify-self: end;
    color: #5bdbb4;
    font-size: 13px;
    font-style: normal;
}

.generator-output pre {
    min-height: 300px;
    margin: 0;
    padding: 23px;
    overflow-x: auto;
    color: #bfd0e8;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.8;
    white-space: pre-wrap;
}

.generator-actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.validation-status {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6d7d91;
    font-size: 12px;
}

.validation-status i {
    color: #22aa82;
}

.tool-help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.tool-help-grid article {
    position: relative;
    padding: 28px;
    border: 1px solid #dce4ee;
    border-radius: 15px;
    background: #fff;
}

.tool-help-grid article > span {
    position: absolute;
    top: 15px;
    right: 16px;
    color: #a1adbc;
    font-family: var(--mono);
    font-size: 13px;
}

.tool-help-grid article > i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf4ff;
    color: var(--blue);
}

.tool-help-grid h3 {
    margin: 17px 0 8px;
    color: #26364e;
    font-size: 13px;
}

.tool-help-grid p {
    margin: 0;
    color: #748196;
    font-size: 12px;
    line-height: 1.65;
}

/* Content, legal and contact pages */
.prose-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    align-items: start;
    gap: 35px;
}

.prose-card {
    padding: 40px;
    border: 1px solid #dce4ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 15px 38px rgba(24, 48, 82, .06);
}

.prose-card h2 {
    margin: 13px 0 18px;
    color: #17253d;
    font-family: var(--display);
    font-size: 29px;
    letter-spacing: -.045em;
}

.prose-card p {
    color: #5c6c82;
    font-size: 13px;
    line-height: 1.85;
}

.value-grid {
    margin: 30px 0 42px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.value-grid > div {
    padding: 20px;
    border: 1px solid #e0e6ef;
    border-radius: 12px;
    background: #f8fafd;
}

.value-grid i {
    color: var(--blue);
}

.value-grid h3 {
    margin: 13px 0 7px;
    color: #283950;
    font-size: 13px;
}

.value-grid p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
}

.prose-sidebar {
    position: sticky;
    top: 105px;
    display: grid;
    gap: 13px;
}

.prose-sidebar > div {
    padding: 22px;
    border: 1px solid #dce4ed;
    border-radius: 14px;
    background: #fff;
}

.prose-sidebar > div > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eef4ff;
    color: var(--blue);
}

.prose-sidebar h3 {
    margin: 15px 0 7px;
    color: #25364e;
    font-size: 12px;
}

.prose-sidebar p {
    margin: 0;
    color: #718096;
    font-size: 12px;
    line-height: 1.55;
}

.prose-sidebar a {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2e70dd;
    font-size: 12px;
    font-weight: 700;
}

.contact-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    align-items: start;
    gap: 60px;
}

.contact-info h2 {
    margin: 13px 0 17px;
    color: #17253d;
    font-family: var(--display);
    font-size: 36px;
    letter-spacing: -.05em;
}

.contact-info > p {
    color: #637289;
    font-size: 12px;
    line-height: 1.75;
}

.contact-method {
    margin-top: 25px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #dce4ee;
    border-radius: 12px;
    background: #fff;
}

.contact-method > i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef4ff;
    color: var(--blue);
}

.contact-method small,
.contact-method strong {
    display: block;
}

.contact-method small {
    color: #8a97a8;
    font-size: 13px;
}

.contact-method strong {
    margin-top: 3px;
    color: #33445c;
    font-size: 12px;
}

.contact-note {
    margin-top: 14px;
    padding: 14px;
    display: flex;
    gap: 10px;
    border-radius: 10px;
    background: #eff8f5;
    color: #517168;
    font-size: 12px;
    line-height: 1.5;
}

.contact-form {
    padding: 30px;
    display: grid;
    gap: 16px;
    border: 1px solid #dce4ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(23, 48, 83, .06);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.honeypot {
    position: absolute;
    left: -9999px;
}

.form-alert {
    padding: 12px;
    border-radius: 9px;
    font-size: 12px;
}

.form-alert.success {
    background: #eaf8f3;
    color: #2f765e;
}

.form-alert.error {
    background: #fff0f2;
    color: #9e4051;
}

.legal-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
    gap: 45px;
}

.legal-nav {
    position: sticky;
    top: 105px;
    padding: 18px;
    display: grid;
    gap: 8px;
    border: 1px solid #dce4ee;
    border-radius: 13px;
    background: #fff;
}

.legal-nav strong {
    margin-bottom: 5px;
    color: #3b4b62;
    font-size: 12px;
}

.legal-nav a {
    padding: 7px 0;
    border-bottom: 1px solid #edf0f4;
    color: #748196;
    font-size: 12px;
}

.legal-content {
    padding: 38px;
    border: 1px solid #dce4ee;
    border-radius: 18px;
    background: #fff;
}

.legal-content > section {
    padding-bottom: 30px;
    border-bottom: 1px solid #e3e8ef;
}

.legal-content > section + section {
    padding-top: 30px;
}

.legal-content > section > span {
    color: #799bd0;
    font-family: var(--mono);
    font-size: 13px;
}

.legal-content h2 {
    margin: 8px 0 13px;
    color: #21314a;
    font-family: var(--display);
    font-size: 22px;
}

.legal-content p {
    margin: 0;
    color: #5e6d83;
    font-size: 12px;
    line-height: 1.85;
}

.legal-contact {
    margin-top: 30px;
    padding: 17px;
    display: flex;
    gap: 12px;
    border-radius: 11px;
    background: #eef4ff;
}

.legal-contact > i {
    color: var(--blue);
}

.legal-contact strong {
    color: #34465f;
    font-size: 12px;
}

.legal-contact p {
    margin-top: 4px;
    font-size: 12px;
}

.legal-contact a {
    color: #2c6fdc;
}

.credits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}

.credits-grid article {
    overflow: hidden;
    border: 1px solid #dce4ee;
    border-radius: 15px;
    background: #fff;
}

.credits-grid img {
    width: 100%;
    height: 180px;
    display: block;
    object-fit: cover;
}

.credits-grid article > div {
    padding: 18px;
}

.credits-grid h2 {
    margin: 0 0 7px;
    color: #25364e;
    font-size: 13px;
}

.credits-grid p {
    margin: 0;
    color: #78869a;
    font-size: 12px;
}

.credits-grid a {
    margin-top: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2f70dd;
    font-size: 12px;
    font-weight: 700;
}

.error-section {
    position: relative;
    min-height: 780px;
    padding: 160px 0 100px;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: #07101f;
    text-align: center;
}

.error-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(128, 165, 219, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 165, 219, .045) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(circle, #000, transparent 72%);
}

.error-content {
    position: relative;
}

.error-code {
    display: block;
    color: transparent;
    background: linear-gradient(110deg, #72a7ff, #4fe0bd);
    background-clip: text;
    -webkit-background-clip: text;
    font-family: var(--mono);
    font-size: 100px;
    font-weight: 700;
    letter-spacing: -.08em;
}

.error-terminal {
    max-width: 470px;
    margin: 0 auto 30px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(132, 168, 219, .2);
    border-radius: 10px;
    background: rgba(10, 24, 44, .82);
    font-family: var(--mono);
    font-size: 12px;
}

.error-terminal span { color: var(--mint); }
.error-terminal code { color: #aebfd6; }
.error-terminal em { margin-left: auto; color: var(--rose); font-style: normal; }

.error-content h1 {
    margin: 0;
    font-family: var(--display);
    font-size: 43px;
    letter-spacing: -.055em;
}

.error-content > p {
    max-width: 580px;
    margin: 17px auto 26px;
    color: #8ea0b7;
    font-size: 13px;
    line-height: 1.7;
}

.error-content > div:last-child {
    display: flex;
    justify-content: center;
    gap: 11px;
}

@media (max-width: 1100px) {
    .main-nav {
        gap: 18px;
    }

    .hero-shell {
        grid-template-columns: 1fr .9fr;
        gap: 35px;
    }

    .hero h1 {
        font-size: clamp(51px, 6.5vw, 70px);
    }

    .guide-grid,
    .resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .article-layout {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .article-sidebar {
        position: static;
        grid-column: 2;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .header-cta,
    .header-search {
        display: none;
    }

    .menu-toggle {
        position: relative;
        z-index: 1002;
        width: 42px;
        height: 42px;
        display: grid;
        place-content: center;
        gap: 6px;
        border: 1px solid rgba(137, 169, 213, .2);
        border-radius: 11px;
        background: rgba(16, 31, 53, .78);
        cursor: pointer;
    }

    .menu-toggle span {
        width: 18px;
        height: 2px;
        border-radius: 10px;
        background: #c0cede;
        transition: transform .16s ease;
    }

    .menu-toggle.active span:first-child {
        transform: translateY(4px) rotate(45deg);
    }

    .menu-toggle.active span:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }

    .main-nav {
        position: fixed;
        inset: 0;
        z-index: 1001;
        padding: 112px 24px 50px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(6, 14, 27, .985);
        backdrop-filter: blur(24px);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-18px);
        transition: opacity .18s ease, transform .18s ease;
    }

    .main-nav.open {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .main-nav > a {
        padding: 16px 4px;
        border-bottom: 1px solid rgba(131, 162, 204, .1);
        color: #c6d2e2;
        font-size: 16px;
    }

    .main-nav > a::after {
        display: none;
    }

    .main-nav .mobile-nav-cta {
        margin-top: 17px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        border: 1px solid rgba(89, 142, 255, .48);
        border-radius: 10px;
        background: linear-gradient(135deg, #2666ee, #3b82f6);
        font-size: 13px;
    }

    .hero-shell {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-copy > p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-media {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
    }

    .hero-process-inner,
    .section-heading,
    .footer-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-process-inner {
        padding: 20px 0;
    }

    .hero-process-inner > div {
        width: 100%;
        justify-content: space-between;
    }

    .intro-grid,
    .security-grid,
    .server-directory-grid,
    .faq-grid,
    .tool-builder,
    .prose-layout,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .intro-media,
    .intro-media img,
    .security-image {
        min-height: 460px;
        height: 460px;
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid::before {
        display: none;
    }

    .server-directory-copy,
    .faq-heading,
    .prose-sidebar {
        position: static;
    }

    .integration-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 430px 260px;
    }

    .tile-large {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .generator-promo {
        grid-template-columns: 1fr;
    }

    .newsletter-card {
        grid-template-columns: 58px 1fr;
    }

    .newsletter-form {
        width: 100%;
        grid-column: 1 / 3;
    }

    .footer-cta-actions {
        display: flex;
        flex-wrap: wrap;
    }

    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-toc,
    .article-sidebar {
        position: static;
    }

    .article-toc {
        display: none;
    }

    .article-sidebar {
        grid-column: auto;
    }

    .category-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-nav {
        position: static;
        display: flex;
        flex-wrap: wrap;
    }

    .credits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .shell,
    .header-shell {
        width: min(calc(100% - 28px), var(--shell));
    }

    .header-shell {
        height: 70px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .brand-mark svg {
        width: 27px;
        height: 27px;
    }

    .brand-type strong {
        font-size: 14px;
    }

    .section {
        padding: 78px 0;
    }

    .hero {
        padding-top: 70px;
    }

    .hero-shell {
        min-height: 0;
        padding: 65px 0 55px;
    }

    .hero h1 {
        font-size: clamp(45px, 14vw, 60px);
    }

    .hero-copy > p {
        margin-top: 23px;
        font-size: 15px;
        line-height: 1.7;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-proof {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-proof > div {
        min-width: 0;
        padding: 0 8px;
    }

    .hero-proof strong {
        font-size: 16px;
    }

    .hero-proof span {
        font-size: 13px;
    }

    .hero-media {
        min-height: 430px;
    }

    .hero-image-card {
        inset: 20px 0 100px 25px;
        transform: none;
    }

    .terminal-card {
        left: 0;
        right: 24px;
    }

    .floating-app {
        display: none;
    }

    .hero-process {
        display: none;
    }

    .section-heading {
        margin-bottom: 31px;
        gap: 18px;
    }

    .section-heading h2,
    .center-heading h2,
    .intro-copy h2,
    .server-directory-copy h2,
    .security-copy h2,
    .faq-heading h2,
    .generator-promo-copy h2 {
        font-size: 38px;
    }

    .guide-grid,
    .resource-grid,
    .category-guide-grid,
    .server-directory-panel .server-list,
    .tool-help-grid,
    .credits-grid {
        grid-template-columns: 1fr;
    }

    .guide-card {
        min-height: 450px;
    }

    .steps-grid,
    .security-checks,
    .category-feature-grid,
    .value-grid {
        grid-template-columns: 1fr;
    }

    .server-row {
        grid-template-columns: 43px 1fr;
    }

    .server-row em {
        grid-column: 2;
        justify-self: start;
    }

    .integration-bento {
        grid-template-columns: 1fr;
        grid-template-rows: 390px 240px 240px;
    }

    .tile-large {
        grid-column: auto;
    }

    .integration-tile h3,
    .tile-large h3 {
        font-size: 22px;
    }

    .generator-promo {
        padding: 30px 22px;
        gap: 40px;
    }

    .security-image,
    .intro-media,
    .intro-media img {
        min-height: 390px;
        height: 390px;
    }

    .newsletter-card {
        padding: 25px 21px;
        grid-template-columns: 1fr;
    }

    .newsletter-icon {
        width: 50px;
        height: 50px;
    }

    .newsletter-form {
        grid-column: auto;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .newsletter-form button {
        min-height: 40px;
    }

    .footer-cta-actions {
        width: 100%;
    }

    .footer-cta-actions .button {
        width: 100%;
    }

    .footer-main {
        padding-top: 58px;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 34px 18px;
    }

    .footer-bottom {
        padding: 18px 0;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
    }

    .inner-hero {
        min-height: 0;
        padding: 132px 0 58px;
    }

    .inner-hero h1 {
        font-size: 42px;
    }

    .inner-hero-shell > p {
        font-size: 14px;
    }

    .article-layout {
        padding: 50px 0 78px;
    }

    .article-section h2,
    .article-faq > h2 {
        font-size: 23px;
    }

    .article-section > p {
        font-size: 13px;
    }

    .article-download-box {
        grid-template-columns: 45px 1fr;
    }

    .article-download-box > a {
        grid-column: 1 / 3;
        text-align: center;
    }

    .source-note {
        grid-template-columns: 36px 1fr;
    }

    .source-note a {
        grid-column: 1 / 3;
    }

    .article-sidebar {
        grid-template-columns: 1fr;
    }

    .server-directory-panel,
    .prose-card,
    .legal-content,
    .contact-form {
        padding: 23px;
    }

    .conditional-fields,
    .generator-actions,
    .form-row {
        grid-template-columns: 1fr;
    }

    .generator-output pre {
        min-height: 250px;
        font-size: 12px;
    }

    .contact-info h2 {
        font-size: 34px;
    }

    .error-code {
        font-size: 78px;
    }

    .error-terminal {
        flex-wrap: wrap;
        justify-content: center;
    }

    .error-terminal em {
        width: 100%;
        margin-left: 0;
    }

    .error-content h1 {
        font-size: 35px;
    }

    .error-content > div:last-child {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}


/* ==================================================================
   FINAL RESPONSIVE REFINEMENT
   Keep this block at the END of the stylesheet.
   It intentionally overrides older homepage and mobile declarations.
   ================================================================== */

:root {
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --shell: 1180px;
}

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    font-family: var(--font) !important;
}

body *,
body *::before,
body *::after {
    min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero h1,
.section-heading h2,
.center-heading h2,
.intro-copy h2,
.server-directory-copy h2,
.security-copy h2,
.faq-heading h2,
.generator-promo-copy h2 {
    font-family: var(--display) !important;
    overflow-wrap: normal;
    word-break: normal;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

.shell,
.header-shell {
    width: min(calc(100% - 40px), var(--shell));
}

/* Header */
.site-header {
    min-height: 78px;
    background: rgba(7, 16, 31, .96);
}

.header-shell {
    position: relative;
    height: 78px;
    gap: 24px;
}

.brand {
    max-width: calc(100% - 64px);
}

.brand-type {
    min-width: 0;
}

.brand-type strong,
.brand-type em {
    white-space: nowrap;
}

.menu-toggle {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Clean hero */
.hero {
    min-height: auto;
    padding-top: 78px;
    overflow: hidden;
    background: linear-gradient(135deg, #07101f 0%, #0a1930 58%, #0c2344 100%);
}

.hero-grid,
.hero-orb {
    display: none !important;
}

.hero-shell {
    min-height: 690px;
    padding: clamp(72px, 8vw, 112px) 0 clamp(70px, 8vw, 98px);
    grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
    gap: clamp(42px, 6vw, 76px);
}

.hero-copy {
    width: 100%;
}

.hero-kicker {
    max-width: 100%;
    margin-bottom: 24px;
    padding: 9px 13px;
    color: #b8c9df;
    background: rgba(255, 255, 255, .055);
    border-color: rgba(132, 177, 244, .22);
    white-space: normal;
    line-height: 1.4;
}

.hero h1 {
    width: 100%;
    max-width: 690px;
    font-size: clamp(50px, 5.5vw, 76px);
    line-height: 1.01;
    letter-spacing: -.058em;
    text-wrap: balance;
}

.hero h1 span::after {
    display: none;
}

.hero-copy > p {
    max-width: 620px;
    margin-top: 24px;
    color: #adbed4;
    font-size: clamp(15px, 1.35vw, 17px);
    line-height: 1.75;
}

.hero-actions {
    margin-top: 31px;
}

.hero-actions .button {
    min-height: 52px;
    padding-inline: 21px;
}

.hero-proof {
    width: min(100%, 590px);
    margin-top: 37px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.hero-proof > div,
.hero-proof > div:first-child {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(143, 176, 220, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.hero-proof strong {
    font-size: 17px;
}

.hero-proof span {
    font-size: 12px;
    line-height: 1.45;
}

.hero-media {
    width: 100%;
    min-height: 520px;
}

.hero-image-card {
    inset: 12px 0 95px 42px;
    border-radius: 25px;
    transform: none;
}

.terminal-card {
    left: 0;
    right: 48px;
    bottom: 12px;
}

.floating-app {
    display: none;
}

/* Consistent sections */
.section {
    padding: clamp(76px, 8vw, 112px) 0;
}

.section-heading,
.intro-grid,
.security-grid,
.server-directory-grid,
.faq-grid,
.generator-promo {
    min-width: 0;
}

.section-heading h2,
.center-heading h2,
.intro-copy h2,
.server-directory-copy h2,
.security-copy h2,
.faq-heading h2,
.generator-promo-copy h2 {
    font-size: clamp(36px, 4.2vw, 56px);
    line-height: 1.06;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.guide-card,
.resource-card,
.step-card,
.server-row,
.integration-tile,
.accordion-item,
.newsletter-card,
.generator-promo,
.intro-media,
.security-image {
    overflow: hidden;
}

/* Tablet */
@media (max-width: 1100px) {
    .hero-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 54px;
    }

    .hero-copy {
        max-width: 780px;
    }

    .hero-media {
        width: min(760px, 100%);
        margin-inline: auto;
    }

    .guide-grid,
    .resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile navigation and page layout */
@media (max-width: 900px) {
    .site-header,
    .site-header.scrolled {
        min-height: 72px;
        background: #07101f;
    }

    .header-shell {
        width: min(calc(100% - 28px), var(--shell));
        height: 72px;
        gap: 12px;
    }

    .brand {
        max-width: calc(100% - 58px);
    }

    .brand-mark {
        width: 42px;
        height: 42px;
    }

    .brand-type strong {
        font-size: 15px;
    }

    .brand-type em {
        font-size: 11px;
    }

    .header-actions {
        margin-left: auto;
    }

    .header-cta,
    .header-search {
        display: none !important;
    }

    .menu-toggle {
        display: grid !important;
        margin-left: auto;
    }

    /* Prevent closed mobile-menu links from leaking into the hero. */
    .main-nav,
    .main-nav:not(.open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .main-nav.open {
        position: fixed !important;
        inset: 72px 0 0 !important;
        z-index: 1001;
        width: 100%;
        height: calc(100dvh - 72px);
        padding: 20px 20px 40px;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow-y: auto;
        background: #07101f;
        transform: none !important;
    }

    .main-nav.open > a {
        width: 100%;
        padding: 17px 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(136, 169, 214, .12);
        color: #d8e4f4;
        font-size: 16px;
        line-height: 1.35;
    }

    .main-nav.open > a::after {
        display: none;
    }

    .main-nav.open .mobile-nav-cta {
        margin-top: 18px;
        padding: 15px 16px;
        display: flex;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, #2768ed, #3c85f7);
        color: #fff;
    }

    .hero {
        padding-top: 72px;
    }

    .hero-shell {
        padding: 66px 0 68px;
        text-align: left;
    }

    .hero-copy {
        align-items: flex-start;
    }

    .hero h1 {
        max-width: 720px;
        font-size: clamp(46px, 8.5vw, 66px);
    }

    .hero-copy > p {
        margin-left: 0;
        margin-right: 0;
    }

    .hero-actions {
        justify-content: flex-start;
    }

    .hero-process-inner,
    .section-heading,
    .footer-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-process-inner > div {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }

    .intro-grid,
    .security-grid,
    .server-directory-grid,
    .faq-grid,
    .generator-promo,
    .tool-builder,
    .prose-layout,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .server-directory-copy,
    .faq-heading,
    .prose-sidebar {
        position: static;
    }

    .integration-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 390px 250px;
    }

    .tile-large {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .newsletter-card {
        grid-template-columns: 58px 1fr;
    }

    .newsletter-form {
        width: 100%;
        grid-column: 1 / -1;
    }
}

/* Phones */
@media (max-width: 650px) {
    .shell,
    .header-shell {
        width: min(calc(100% - 24px), var(--shell));
    }

    .site-header,
    .site-header.scrolled,
    .header-shell {
        min-height: 68px;
        height: 68px;
    }

    .main-nav.open {
        inset: 68px 0 0 !important;
        height: calc(100dvh - 68px);
    }

    .brand {
        gap: 9px;
        max-width: calc(100% - 54px);
    }

    .brand-mark {
        width: 39px;
        height: 39px;
        border-radius: 11px;
    }

    .brand-mark svg {
        width: 27px;
        height: 27px;
    }

    .brand-type {
        gap: 6px;
    }

    .brand-type strong {
        font-size: 14px;
        letter-spacing: -.025em;
    }

    .brand-type em {
        padding: 4px 5px 3px;
        font-size: 10px;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
    }

    .section {
        padding: 72px 0;
    }

    .hero {
        padding-top: 68px;
    }

    .hero-shell {
        padding: 48px 0 58px;
        gap: 38px;
    }

    .hero-kicker {
        width: fit-content;
        margin-bottom: 20px;
        padding: 8px 11px;
        font-size: 9px;
        letter-spacing: .08em;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(39px, 11.5vw, 54px);
        line-height: 1.01;
        letter-spacing: -.05em;
        text-wrap: pretty;
    }

    .hero-copy > p {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.68;
    }

    .hero-actions {
        width: 100%;
        margin-top: 27px;
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions .button {
        width: 100%;
        min-height: 50px;
    }

    .hero-proof {
        width: 100%;
        margin-top: 28px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .hero-proof > div,
    .hero-proof > div:first-child {
        padding: 13px 9px;
        text-align: left;
    }

    .hero-proof strong {
        font-size: 14px;
        line-height: 1.25;
    }

    .hero-proof span {
        margin-top: 4px;
        font-size: 10px;
    }

    .hero-media {
        min-height: 0;
        display: grid;
        gap: 12px;
    }

    .hero-image-card,
    .terminal-card {
        position: relative;
        inset: auto;
        width: 100%;
    }

    .hero-image-card {
        aspect-ratio: 1.22 / 1;
        border-radius: 20px;
    }

    .terminal-card {
        border-radius: 16px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, .32);
    }

    .terminal-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    .terminal-head > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .terminal-body {
        padding: 16px 14px 17px;
        overflow-x: auto;
        font-size: 10px;
    }

    .terminal-table {
        min-width: 300px;
        font-size: 10px;
    }

    .hero-process {
        display: none;
    }

    .section-heading {
        margin-bottom: 32px;
        gap: 14px;
    }

    .section-heading h2,
    .center-heading h2,
    .intro-copy h2,
    .server-directory-copy h2,
    .security-copy h2,
    .faq-heading h2,
    .generator-promo-copy h2 {
        font-size: clamp(32px, 9.5vw, 42px);
    }

    .guide-grid,
    .resource-grid,
    .steps-grid,
    .security-checks,
    .category-guide-grid,
    .server-directory-panel .server-list,
    .tool-help-grid,
    .credits-grid,
    .category-feature-grid,
    .value-grid {
        grid-template-columns: 1fr;
    }

    .guide-card {
        min-height: 0;
    }

    .guide-content,
    .resource-card,
    .step-card {
        padding: 21px;
    }

    .server-row {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .server-row em {
        grid-column: 2;
        justify-self: start;
    }

    .integration-bento {
        grid-template-columns: 1fr;
        grid-template-rows: 330px 240px 240px;
    }

    .tile-large {
        grid-column: auto;
    }

    .generator-promo {
        padding: 28px 20px;
        gap: 35px;
    }

    .generator-code-preview {
        transform: none;
    }

    .intro-media,
    .intro-media img,
    .security-image {
        min-height: 340px;
        height: 340px;
    }

    .newsletter-card {
        padding: 24px 20px;
        grid-template-columns: 1fr;
    }

    .newsletter-form {
        grid-column: auto;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .newsletter-form button {
        min-height: 42px;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 430px) {
    .brand-type strong {
        font-size: 13px;
    }

    .brand-type em {
        font-size: 9px;
    }

    .hero h1 {
        font-size: clamp(36px, 11.8vw, 46px);
    }

    .hero-proof {
        grid-template-columns: 1fr;
    }

    .hero-proof > div,
    .hero-proof > div:first-child {
        padding: 13px 14px;
    }

    .footer-links {
        grid-template-columns: 1fr;
    }
}