```
:root {
    --bg: #121216;
    --surface: #1B1B21;
    --surface-soft: #24242C;
    --surface-deep: #18181E;

    --text: #F7F7FA;
    --text-muted: #B7B7C2;

    --accent: #FF6B8A;
    --accent-hover: #E95779;
    --accent-soft: rgba(255, 107, 138, 0.14);

    --border: #3A3A45;
    --divider: #2D2D35;

    --max-width: 1180px;
    --radius: 24px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 107, 138, 0.10),
            transparent 34%
        ),
        var(--bg);

    color: var(--text);

    line-height: 1.6;
}


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


img {
    max-width: 100%;
    display: block;
}


.container {
    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin: 0 auto;
}


/* HEADER */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;

    backdrop-filter:
        blur(18px);

    background:
        rgba(18, 18, 22, 0.88);

    border-bottom:
        1px solid var(--divider);
}


.header-inner {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;
}


.brand {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;

    color: var(--text);
}


.brand-logo {
    width: 42px;
    height: 42px;

    object-fit: contain;

    display: block;
}


.main-nav {
    display: flex;
    align-items: center;

    gap: 26px;
}


.main-nav a {
    color: var(--text-muted);

    font-size: 0.95rem;

    transition:
        color 0.2s ease;
}


.main-nav a:hover {
    color: var(--accent);
}


/* HERO */

.hero {
    padding:
        110px
        0
        90px;
}


.hero-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, 0.8fr);

    align-items: center;

    gap: 80px;
}


.hero-content {
    max-width: 720px;
}


.eyebrow,
.section-eyebrow {
    margin:
        0
        0
        14px;

    color: var(--accent);

    font-weight: 800;

    letter-spacing: 0.16em;

    font-size: 0.78rem;
}


.hero h1 {
    margin:
        0
        0
        24px;

    font-size:
        clamp(
            3rem,
            7vw,
            5.6rem
        );

    line-height: 0.98;

    letter-spacing: -0.055em;

    color: var(--text);
}


.hero-text {
    margin: 0;

    max-width: 680px;

    color: var(--text-muted);

    font-size: 1.18rem;
}


.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 36px;
}


/* BUTTONS */

.primary-button,
.secondary-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding:
        0
        24px;

    border-radius: 14px;

    font-weight: 750;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.primary-button {
    background: var(--accent);

    color: #ffffff;

    box-shadow:
        0
        10px
        28px
        rgba(255, 107, 138, 0.20);
}


.primary-button:hover {
    background: var(--accent-hover);

    transform:
        translateY(-2px);

    box-shadow:
        0
        14px
        34px
        rgba(255, 107, 138, 0.28);
}


.secondary-button {
    border:
        1px
        solid
        var(--border);

    background:
        transparent;

    color: var(--text);
}


.secondary-button:hover {
    border-color:
        var(--accent);

    background:
        rgba(255, 107, 138, 0.06);

    transform:
        translateY(-2px);
}


/* HERO CARD */

.hero-card {
    position: relative;
}


.hero-card::before {
    content: "";

    position: absolute;

    inset: -30px;

    background:
        radial-gradient(
            circle,
            rgba(255, 107, 138, 0.16),
            transparent 68%
        );

    filter:
        blur(20px);
}


.hero-card-inner {
    position: relative;

    min-height: 440px;

    border-radius: 34px;

    border:
        1px
        solid
        var(--border);

    background:
        linear-gradient(
            145deg,
            rgba(255, 107, 138, 0.10),
            rgba(255, 255, 255, 0.02)
        );

    box-shadow:
        0
        32px
        80px
        rgba(0, 0, 0, 0.40);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 46px;
}


.hero-logo {
    width: 180px;
    height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


.hero-card h2 {
    margin:
        34px
        0
        8px;

    font-size: 2.2rem;

    color: var(--text);
}


.hero-card p {
    margin: 0;

    color: var(--text-muted);

    font-size: 1.05rem;
}


/* SECTIONS */

.section {
    padding:
        90px
        0;
}


.alternate-section {
    background:
        rgba(255, 255, 255, 0.018);

    border-top:
        1px
        solid
        var(--divider);

    border-bottom:
        1px
        solid
        var(--divider);
}


.section-title {
    margin:
        0
        0
        20px;

    max-width: 780px;

    font-size:
        clamp(
            2rem,
            5vw,
            3.6rem
        );

    line-height: 1.05;

    letter-spacing: -0.04em;

    color: var(--text);
}


.section-text {
    max-width: 760px;

    margin: 0;

    color: var(--text-muted);

    font-size: 1.08rem;
}


/* FEATURES */

.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 18px;

    margin-top: 46px;
}


.feature-card {
    min-height: 280px;

    padding: 28px;

    border-radius:
        var(--radius);

    border:
        1px
        solid
        var(--border);

    background:
        var(--surface);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.feature-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(255, 107, 138, 0.45);

    box-shadow:
        0
        18px
        45px
        rgba(0, 0, 0, 0.25);
}


.feature-number {
    margin-bottom: 48px;

    color: var(--accent);

    font-size: 0.85rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.feature-card h3 {
    margin:
        0
        0
        12px;

    font-size: 1.25rem;

    color: var(--text);
}


.feature-card p {
    margin: 0;

    color: var(--text-muted);
}


/* SAFETY */

#safety {
    position: relative;
}


#safety::before {
    content: "";

    position: absolute;

    left: 0;
    top: 20%;

    width: 260px;
    height: 260px;

    background:
        radial-gradient(
            circle,
            rgba(255, 107, 138, 0.06),
            transparent 70%
        );

    pointer-events: none;
}


/* DOWNLOAD */

.download-section {
    background:
        linear-gradient(
            145deg,
            rgba(255, 107, 138, 0.10),
            rgba(255, 255, 255, 0.01)
        );

    border-top:
        1px
        solid
        var(--divider);

    border-bottom:
        1px
        solid
        var(--divider);
}


.download-inner {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 60px;
}


.download-inner h2 {
    margin:
        0
        0
        14px;

    max-width: 700px;

    font-size:
        clamp(
            2rem,
            5vw,
            3.2rem
        );

    line-height: 1.08;

    color: var(--text);
}


.download-inner p {
    color: var(--text-muted);
}


.download-actions {
    display: flex;

    flex-direction: column;

    align-items:
        flex-start;

    gap: 12px;

    min-width: 210px;
}


.coming-soon {
    color: var(--text-muted);

    font-size: 0.88rem;
}


/* SUPPORT */

#support a {
    color: var(--accent);

    font-weight: 700;
}


#support a:hover {
    color: var(--accent-hover);
}


/* FOOTER */

.site-footer {
    padding:
        34px
        0;

    border-top:
        1px
        solid
        var(--divider);

    background:
        var(--surface-deep);

    color: var(--text-muted);
}


.footer-inner {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;
}


.footer-links {
    display: flex;

    gap: 22px;
}


.footer-links a {
    transition:
        color 0.2s ease;
}


.footer-links a:hover {
    color: var(--accent);
}


/* TEXT SELECTION */

::selection {
    background:
        rgba(255, 107, 138, 0.28);

    color:
        var(--text);
}


/* RESPONSIVE */

@media (
    max-width: 950px
) {

    .hero-inner {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .hero-card {
        max-width: 560px;
    }


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


    .download-inner {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}


@media (
    max-width: 700px
) {

    .container {
        width:
            min(
                calc(100% - 28px),
                var(--max-width)
            );
    }


    .site-header {
        position: static;
    }


    .header-inner {
        min-height: auto;

        padding:
            20px
            0;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .main-nav {
        width: 100%;

        gap: 18px;

        overflow-x: auto;

        padding-bottom: 4px;
    }


    .main-nav a {
        white-space: nowrap;
    }


    .hero {
        padding:
            72px
            0
            60px;
    }


    .hero h1 {
        font-size: 3.25rem;
    }


    .hero-text {
        font-size: 1.05rem;
    }


    .hero-card-inner {
        min-height: 360px;

        padding: 34px;
    }


    .hero-logo {
        width: 92px;
        height: 92px;

        font-size: 3rem;
    }


    .section {
        padding:
            70px
            0;
    }


    .feature-grid {
        grid-template-columns: 1fr;
    }


    .feature-card {
        min-height: auto;
    }


    .feature-number {
        margin-bottom: 30px;
    }


    .footer-inner {
        flex-direction:
            column;

        align-items:
            flex-start;
    }
}


@media (
    max-width: 480px
) {

    .hero h1 {
        font-size: 2.75rem;
    }


    .hero-actions {
        flex-direction: column;
    }


    .primary-button,
    .secondary-button {
        width: 100%;
    }


    .main-nav {
        font-size: 0.9rem;
    }
}

/* APP PREVIEW */

.app-preview-section {
    background:
        rgba(255, 255, 255, 0.015);

    border-top:
        1px solid var(--divider);

    border-bottom:
        1px solid var(--divider);
}


.screenshot-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 22px;

    margin-top: 48px;
}


.screenshot-card {
    padding: 14px;

    border:
        1px solid var(--border);

    border-radius: 24px;

    background: var(--surface);

    text-align: center;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.screenshot-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(255, 107, 138, 0.45);

    box-shadow:
        0
        18px
        45px
        rgba(0, 0, 0, 0.28);
}


.screenshot-card img {
    width: 100%;
    height: auto;

    border-radius: 18px;

    display: block;
}


.screenshot-card h3 {
    margin:
        16px
        0
        6px;

    color: var(--text);

    font-size: 1.1rem;
}


@media (
    max-width: 950px
) {

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


@media (
    max-width: 600px
) {

    .screenshot-grid {
        grid-template-columns: 1fr;
    }
}

/* LEGAL PAGES */

.legal-content {
    max-width: 860px;
    margin-top: 48px;
    color: var(--text-muted);
}

.legal-content h2 {
    margin:
        42px
        0
        14px;

    color: var(--text);

    font-size: 1.45rem;

    line-height: 1.25;
}

.legal-content p {
    margin:
        0
        0
        18px;
}

.legal-content ul {
    margin:
        0
        0
        24px;

    padding-left: 24px;
}

.legal-content li {
    margin-bottom: 10px;
}

.legal-content a {
    color: var(--accent);
    font-weight: 700;
}

.legal-content a:hover {
    color: var(--accent-hover);
}


/* =========================================================
   CrewChem premium landing page refresh — October 2026
   Original selectors retained for other pages and legal routes.
   ========================================================= */
:root {
    --bg: #081321;
    --surface: #102237;
    --surface-soft: #162d46;
    --surface-deep: #07101d;
    --text: #f6f8ff;
    --text-muted: #bac9dc;
    --accent: #ff7497;
    --accent-hover: #ff4f82;
    --accent-soft: rgba(255,116,151,.13);
    --border: rgba(160,194,234,.18);
    --divider: rgba(160,194,234,.12);
    --max-width: 1200px;
    --radius: 22px;
}
body {
    background: radial-gradient(ellipse 60% 32% at 90% 0%, rgba(39,113,181,.23),transparent 75%),
                radial-gradient(ellipse 48% 28% at 5% 20%,rgba(255,116,151,.09),transparent 75%),var(--bg);
}
.site-header {background:rgba(6,18,32,.82);border-bottom:1px solid var(--divider)}
.header-inner {min-height:82px}
.brand {font-size:1.6rem}
.brand-logo {width:46px;height:46px}
.main-nav {gap:22px;align-items:center}
.main-nav a {font-weight:600}
.main-nav .nav-download {color:#0d1c2a;background:#f6f8ff;border-radius:999px;padding:11px 18px;white-space:nowrap;transition:background .2s,transform .2s}
.main-nav .nav-download:hover {color:#081321;background:#c8e7ff;transform:translateY(-2px)}
.hero {padding:108px 0 108px;overflow:hidden}
.hero-inner {grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);gap:clamp(28px,6vw,85px)}
.eyebrow,.section-eyebrow {color:#9bd8fa;letter-spacing:.17em}
.eyebrow {display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(125,195,238,.3);background:rgba(125,195,238,.08);padding:10px 14px;border-radius:999px;margin-bottom:28px;font-size:.72rem}
.status-dot {width:8px;height:8px;display:inline-block;background:#73e6b5;box-shadow:0 0 0 4px rgba(115,230,181,.12);border-radius:50%}
.hero h1 {font-size:clamp(3.1rem,6.5vw,6rem);line-height:1.01;max-width:720px;margin-bottom:28px}
.gradient-text {color:#ffaac0;background:linear-gradient(115deg,#a1d9ff 5%,#f3b5dd 52%,#ff819b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-text {font-size:1.17rem;max-width:560px;line-height:1.8}
.hero-actions {margin-top:32px}
.primary-button {background:linear-gradient(120deg,#ff7798,#ff527f);box-shadow:0 14px 35px rgba(255,85,132,.22);border-radius:13px}
.primary-button:hover {background:linear-gradient(120deg,#ff8da9,#fc3d74)}
.secondary-button {border-radius:13px;background:rgba(255,255,255,.035)}
.hero-note {margin:24px 0 0;font-size:.88rem;color:#a5b9ce}
.hero-card::before {inset:-90px;background:radial-gradient(circle,rgba(70,159,229,.22),transparent 65%);filter:blur(25px)}
.hero-card-inner {min-height:570px;padding:35px 52px;overflow:visible;background:linear-gradient(150deg,rgba(49,107,163,.22),rgba(12,34,59,.45) 55%,rgba(255,98,143,.09));border:1px solid rgba(171,209,246,.18);box-shadow:0 36px 95px rgba(0,0,0,.34)}
.phone-shell {width:min(275px,78%);max-height:525px;aspect-ratio:9/18.5;padding:12px 8px 10px;background:#080c16;border:4px solid #324a61;border-radius:40px;position:relative;box-shadow:0 28px 70px rgba(0,0,0,.57),inset 0 0 0 2px #090e17;overflow:hidden;transform:rotate(-4deg)}
.phone-shell img {height:100%;width:100%;object-fit:cover;object-position:top;border-radius:29px;background:#13243c}
.phone-camera {height:17px;width:85px;background:#080c16;position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:1;border-radius:0 0 13px 13px}
.hero-float {position:absolute;z-index:2;padding:13px 17px;border-radius:14px;background:rgba(17,38,60,.94);border:1px solid rgba(171,209,246,.25);box-shadow:0 14px 35px rgba(0,0,0,.24);font-size:.85rem;font-weight:750;color:#edf7ff;white-space:nowrap;backdrop-filter:blur(12px)}
.hero-float-top {top:98px;right:-24px;transform:rotate(5deg)}
.hero-float-bottom {bottom:87px;left:-40px;transform:rotate(-2deg)}
.section {padding:100px 0}
.section-title {max-width:850px;line-height:1.12}
.section-text {line-height:1.9}
.alternate-section,.app-preview-section {background:rgba(115,174,234,.035)}
.feature-grid {gap:17px}
.feature-card {background:linear-gradient(160deg,rgba(40,80,122,.42),rgba(13,30,48,.9));border:1px solid var(--border);padding:30px 25px;min-height:295px}
.feature-number {font-size:1rem;color:#9bd8fa;margin-bottom:55px}
.feature-card:hover,.screenshot-card:hover {border-color:rgba(255,116,151,.5)}
.screenshot-card {background:linear-gradient(160deg,rgba(30,61,96,.65),rgba(12,29,47,.96));border:1px solid var(--border);border-radius:25px;padding:17px}
.screenshot-card img {border:6px solid #091320;border-radius:24px;box-shadow:0 13px 24px rgba(0,0,0,.3);max-height:490px;width:100%;object-fit:contain;background:#091320}
.screenshot-card h3 {margin:19px 0 8px}
.download-section {background:linear-gradient(110deg,rgba(255,100,149,.15),rgba(49,127,194,.12));}
.download-inner {gap:35px}
.download-actions .primary-button {white-space:nowrap}
#support a,.legal-content a {color:#9bd8fa}
.site-footer {background:#050e19}
:focus-visible {outline:3px solid #9bd8fa;outline-offset:4px}
@media (max-width:950px) {
    .hero-inner {grid-template-columns:1fr;gap:55px}
    .hero-content {max-width:750px}
    .hero-card {max-width:600px;margin:0 auto;width:100%}
    .hero-card-inner {min-height:530px}
    .main-nav {gap:15px}
}
@media (max-width:700px) {
    .header-inner {gap:17px}
    .main-nav {flex-wrap:nowrap;scrollbar-width:none}
    .main-nav::-webkit-scrollbar {display:none}
    .hero {padding:65px 0 75px}
    .hero h1 {font-size:clamp(2.85rem,11vw,4.8rem)}
    .hero-card-inner {min-height:475px;padding:20px 25px}
    .hero-float-top {right:-8px;top:58px}
    .hero-float-bottom {left:-7px;bottom:58px}
    .phone-shell {max-height:425px;width:min(230px,70%)}
    .section {padding:75px 0}
    .feature-grid {grid-template-columns:1fr}
    .feature-number {margin-bottom:30px}
    .screenshot-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
    .download-inner {gap:24px}
}
@media (max-width:480px) {
    .hero h1 {font-size:clamp(2.7rem,12vw,3.5rem)}
    .hero-card-inner {min-height:420px}
    .phone-shell {max-height:365px;width:205px}
    .hero-float {font-size:.72rem;padding:9px 11px}
    .hero-float-bottom {bottom:35px}
    .hero-float-top {top:36px}
    .screenshot-grid {grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce) {
    html {scroll-behavior:auto}
    *,*::before,*::after {transition:none!important;animation:none!important}
}


/* CrewChem readability & spacing revision — 2026-10-20 */
:root {
  --bg:#f7f9fd;
  --surface:#ffffff;
  --surface-soft:#edf3fa;
  --surface-deep:#f0f4fa;
  --text:#14243a;
  --text-muted:#506179;
  --accent:#bb315e;
  --accent-hover:#992348;
  --border:#dce4ed;
  --divider:#e2e9f0;
  --max-width:1120px;
}
html {scroll-padding-top:98px}
body {background:#f7f9fd;color:var(--text);overflow-x:hidden}
.container {width:min(calc(100% - 96px),var(--max-width));margin-inline:auto}
.site-header {background:#fff;backdrop-filter:none;border-bottom:1px solid #dae3ec;box-shadow:0 2px 18px rgba(21,40,68,.06)}
.header-inner {min-height:86px;gap:24px}
.brand {color:#172842}
.main-nav {gap:clamp(12px,1.9vw,24px);flex-wrap:wrap}
.main-nav a {color:#263c57;font-weight:650}
.main-nav a:hover {color:#a72b53}
.main-nav .nav-download {background:#183655;color:#fff;border-radius:10px;padding:10px 17px}
.main-nav .nav-download:hover {background:#2d5278;color:#fff}
.hero {padding:88px 0 100px;overflow:hidden;background:radial-gradient(ellipse at 85% 10%,#dbeaf9 0%,transparent 48%),#f7f9fd}
.hero-inner {gap:clamp(40px,5vw,76px)}
.eyebrow,.section-eyebrow {color:#265e86}
.eyebrow {color:#265e86;background:#e8f2fb;border-color:#c9dfed}
.hero h1 {color:#162a43;font-size:clamp(2.8rem,5.7vw,5.1rem);line-height:1.08;letter-spacing:-.045em}
.gradient-text {color:#b43262;background:linear-gradient(115deg,#27648b,#b43262);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-text,.section-text {color:#435671;line-height:1.75}
.hero-note {color:#526982}
.primary-button {background:#ad315b;color:#fff;box-shadow:0 10px 25px rgba(150,42,82,.17)}
.primary-button:hover {background:#90264a}
.secondary-button {color:#1a3754;border-color:#bed0e2;background:#fff}
.secondary-button:hover {background:#f1f6fa;border-color:#6799b6}
.hero-card::before {inset:-30px;background:radial-gradient(circle,rgba(49,113,172,.11),transparent 67%)}
.hero-card-inner {background:linear-gradient(155deg,#e2effa,#ffffff 70%,#fceaf0);border:1px solid #d5e1ed;box-shadow:0 20px 55px rgba(37,65,95,.13)}
.hero-float {background:#fff;color:#213852;border:1px solid #d4e2ed;box-shadow:0 10px 25px rgba(37,65,95,.13)}
.section {padding:90px 0}
.section-title {color:#162a43}
.alternate-section,.app-preview-section {background:#edf3f9;border-color:#e1e9f1}
.feature-card {background:#fff;border-color:#dce4ed;box-shadow:0 8px 26px rgba(27,53,79,.045)}
.feature-card h3,.screenshot-card h3 {color:#152c46}
.feature-card p {color:#51647b}
.feature-number {color:#a3315b}
.feature-card:hover,.screenshot-card:hover {border-color:#b86a85}
.screenshot-card {background:#fff;border:1px solid #dbe5ef;box-shadow:0 8px 24px rgba(34,58,88,.06)}
.download-section {background:linear-gradient(110deg,#e8f1fb,#f9e8f0);border-color:#dce5ef}
.download-inner h2 {color:#182e49}
.download-inner p,.coming-soon {color:#465c76}
#support a,.legal-content a {color:#a52b55}
.site-footer {background:#eaf0f6;color:#344b65;border-top:1px solid #d1deea;padding:42px 0}
.footer-inner {align-items:flex-start;gap:26px}
.footer-links {display:flex;flex-wrap:wrap;gap:14px 24px}
.footer-links a {color:#243f5c;font-weight:600}
.footer-links a:hover {color:#9b2851}
.legal-content {color:#465b74}
.legal-content h2 {color:#152c46}
:focus-visible {outline:3px solid #2c6b9d;outline-offset:3px}
@media(max-width:950px) {
  .container {width:min(calc(100% - 64px),var(--max-width))}
  .header-inner {padding-block:16px}
}
@media(max-width:700px) {
  .container {width:calc(100% - 40px)}
  .site-header {position:relative}
  .header-inner {align-items:flex-start;gap:16px}
  .main-nav {flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding-bottom:8px}
  .main-nav a {flex:none}
  .hero {padding:60px 0 78px}
  .hero h1 {font-size:clamp(2.45rem,9vw,3.8rem)}
  .section {padding:72px 0}
  .hero-card-inner {overflow:hidden}
  .hero-float-top {right:3px}
  .hero-float-bottom {left:3px}
  .footer-inner {gap:22px}
}
@media(max-width:480px){
 .container {width:calc(100% - 36px)}
 .hero-card-inner {padding-inline:18px}
 .hero-float {white-space:normal;max-width:55%;line-height:1.25}
 .footer-links {gap:12px 16px}
}