/* ==========================================================================
   3ambytes — one-page site theme
   Palette derived from logo.png: steel blue (#6f97c9) -> lavender (#8b82c0)
   ========================================================================== */

:root {
    --bg: #060c18;
    --bg-alt: #0a1526;
    --surface: #0e1c33;
    --surface-2: #122542;
    --border: #1c2f4d;

    --cyan: #6f97c9;
    --cyan-soft: #a9d3f5;
    --blue: #8b82c0;
    --blue-deep: #3d4f78;

    --text: #eaf4fb;
    --text-muted: #93a6c2;
    --text-faint: #5f7290;

    --gradient: linear-gradient(120deg, var(--cyan) 0%, var(--blue) 100%);

    --radius: 14px;
    --shadow-glow: 0 0 40px rgba(111, 151, 201, 0.15);
    --text-glow: 0 0 18px rgba(111, 151, 201, 0.65);
    --container: 1140px;

    --header-bg: rgba(6, 12, 24, 0.85);
    --on-gradient-text: #04101f;
}

/* Light theme — same token set, re-mapped for a white/near-white surface.
   Everything in the site is built on these variables, so most components
   re-theme automatically; only a few hardcoded values below need patching. */
[data-theme="light"] {
    --bg: #f5f8fc;
    --bg-alt: #eaf0f8;
    --surface: #ffffff;
    --surface-2: #f2f6fb;
    --border: #d7e1ee;

    /* Darker/more saturated than the dark-theme values on purpose — the
       dark-theme accents are pastel-light and would fail contrast on a
       white background. */
    --cyan: #2f6faf;
    --cyan-soft: #1f5c94;
    --blue: #5b4f96;
    --blue-deep: #332b5c;

    --text: #16233a;
    --text-muted: #4c5c72;
    --text-faint: #74839a;

    --shadow-glow: 0 0 40px rgba(47, 111, 175, 0.14);
    --text-glow: 0 0 12px rgba(47, 111, 175, 0.35);
    --header-bg: rgba(255, 255, 255, 0.85);
    --on-gradient-text: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 140px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4 {
    font-family: 'Poppins', 'Inter', sans-serif;
    line-height: 1.25;
    margin: 0 0 0.5em;
}

p { color: var(--text-muted); margin: 0 0 1em; }
a { color: var(--cyan-soft); text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Brand name called out where it opens body copy (hero-sub) — solid accent
   color + soft glow (chosen over a plain gradient-text version, which read
   too close in brightness to the muted paragraph around it to actually
   grab attention) plus uppercase/letter-spacing so it reads as a wordmark,
   not just the next word in the sentence. */
.brand-name {
    color: var(--cyan-soft);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-shadow: var(--text-glow);
}

.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cyan-soft);
    margin-bottom: 12px;
}
.eyebrow.center { display: block; text-align: center; }

.section-title { font-size: clamp(26px, 4vw, 38px); font-weight: 700; }
.section-title.center { text-align: center; }
.section-sub { text-align: center; max-width: 560px; margin: 0 auto 48px; }

/* Legal pages (privacy policy, terms) — narrower measure than the marketing
   sections for readability, plain left-aligned headings rather than the
   centered hero-style ones the rest of the site uses. */
.legal-page { padding: 80px 0 110px; }
.legal-page .container { max-width: 760px; }
.legal-page .legal-updated { color: var(--text-faint); font-size: 14px; margin-bottom: 40px; }
.legal-page h2 { font-size: 22px; margin-top: 2.2em; }
.legal-page h2:first-of-type { margin-top: 1.4em; }
.legal-page ul { color: var(--text-muted); padding-left: 22px; margin: 0 0 1em; }
.legal-page li { margin-bottom: 0.5em; }
.legal-page a { text-decoration: underline; text-underline-offset: 2px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary {
    background: var(--gradient);
    color: var(--on-gradient-text);
    box-shadow: 0 8px 24px rgba(111, 151, 201, 0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(111, 151, 201, 0.35); }
.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan-soft); }
.btn-block { width: 100%; }

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transition: background 0.25s ease;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 24px;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: padding 0.25s ease;
}
.brand-logo { height: 115px; width: auto; display: block; transition: height 0.25s ease; }

.header-actions { display: flex; align-items: center; gap: 20px; }
.main-nav { display: flex; align-items: center; gap: 40px; transition: gap 0.25s ease; }
.main-nav a {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 16.5px;
    white-space: nowrap;
    transition: font-size 0.25s ease;
}
.main-nav a:hover { color: var(--text); }
.nav-cta {
    color: var(--on-gradient-text) !important;
    padding: 12px 26px;
    font-size: 16px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: padding 0.25s ease, font-size 0.25s ease;
}

/* Compact state once scrolled past the hero: shrink the logo and the nav together */
@media (min-width: 721px) {
    .site-header.scrolled .header-inner { padding-top: 6px; padding-bottom: 6px; }
    .site-header.scrolled .brand-logo { height: 56px; }
    .site-header.scrolled .main-nav { gap: 24px; }
    .site-header.scrolled .main-nav a { font-size: 14px; }
    .site-header.scrolled .nav-cta { padding: 8px 18px; font-size: 13.5px; }
}

.theme-toggle {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan-soft); }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 90px;
    text-align: center;
}
.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    z-index: 0;
}
.hero-glow-1 { width: 420px; height: 420px; background: var(--cyan); top: -120px; left: -100px; animation: heroGlowFloat 9s ease-in-out infinite; }
.hero-glow-2 { width: 380px; height: 380px; background: var(--blue); bottom: -140px; right: -80px; animation: heroGlowFloat 11s ease-in-out infinite reverse; }

@keyframes heroGlowFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(24px, -18px) scale(1.06); }
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.hero-inner > * { animation: heroFadeUp 0.7s ease both; }
.hero-inner > .eyebrow { animation-delay: 0.05s; }
.hero-inner > h1 { animation-delay: 0.15s; }
.hero-inner > .hero-sub { animation-delay: 0.25s; }
.hero-inner > .hero-actions { animation-delay: 0.35s; }
.hero-inner > .hero-stats { animation-delay: 0.45s; }

.hero h1 { font-size: clamp(32px, 5.5vw, 54px); font-weight: 800; }
.hero-sub { font-size: 18px; max-width: 600px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }

@media (prefers-reduced-motion: reduce) {
    .hero-glow-1, .hero-glow-2, .hero-inner > * { animation: none; }
}

/* Scroll-triggered reveal, toggled via IntersectionObserver in main.js */
.reveal {
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.9s ease, translate 0.9s ease;
    transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; translate: none; transition: none; }
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; align-items: center; }
.stat strong { font-size: 26px; font-family: 'Poppins', sans-serif; color: var(--cyan-soft); }
.stat span { font-size: 13px; color: var(--text-faint); margin-top: 4px; }

/* Grid / cards */
.grid { display: grid; gap: 24px; }
.services-grid { grid-template-columns: repeat(3, 1fr); }

.services { padding: 90px 0; background: var(--bg-alt); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 26px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.9s ease, translate 0.9s ease;
    transition-delay: 0s, 0s, 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s);
}
.card:hover {
    transform: translateY(-4px);
    border-color: rgba(111, 151, 201, 0.4);
    box-shadow: var(--shadow-glow);
}
.card-icon { font-size: 30px; margin-bottom: 14px; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { font-size: 14.5px; margin: 0; }

/* Why Us */
.why-us { padding: 90px 0; }
.why-grid { grid-template-columns: repeat(4, 1fr); }
.why-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 24px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.9s ease, translate 0.9s ease;
    transition-delay: 0s, 0s, 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s);
}
.why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(111, 151, 201, 0.4);
    box-shadow: var(--shadow-glow);
}
.why-number {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 28px;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
}
.why-card h3 { font-size: 17px; margin-bottom: 8px; }
.why-card p { font-size: 14px; margin: 0; }

/* Process */
.process { padding: 90px 0; background: var(--bg-alt); }
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 24px;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.9s ease, translate 0.9s ease;
    transition-delay: 0s, 0s, 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s);
}
.step:hover {
    transform: translateY(-4px);
    border-color: rgba(111, 151, 201, 0.4);
    box-shadow: var(--shadow-glow);
}
.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient);
    color: var(--on-gradient-text);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 14px; margin: 0; }

/* FAQ */
.faq { padding: 90px 0 110px; background: var(--bg-alt); }
.faq-list {
    max-width: 920px;
    margin: 0 auto;
    column-count: 2;
    column-gap: 20px;
}
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2px 18px;
    margin-bottom: 14px;
    break-inside: avoid;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.9s ease, translate 0.9s ease;
    transition-delay: 0s, 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s);
}
.faq-item:hover {
    border-color: rgba(111, 151, 201, 0.4);
    box-shadow: var(--shadow-glow);
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 13px 0;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 18px;
    color: var(--cyan-soft);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 13px; margin: 0; font-size: 13.5px; }

/* Products */
.products { padding: 90px 0; }
.products-list { display: flex; flex-direction: column; gap: 22px; }
.product-card {
    position: relative;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 26px 26px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.9s ease, translate 0.9s ease;
    transition-delay: 0s, 0s, 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s);
}
.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(111, 151, 201, 0.45);
    box-shadow: var(--shadow-glow);
}
.product-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(111, 151, 201, 0.15);
    color: var(--cyan-soft);
    margin-bottom: 16px;
}
.product-badge-soon { background: rgba(147, 166, 194, 0.15); color: var(--text-muted); }
.product-card h3 { font-size: 19px; }
.tag {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-faint);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
}

/* Featured product card: info column + inline "what's included" panel,
   replacing what used to be a separate full-width section below it. */
.product-card-featured {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 8px 36px;
    align-items: start;
    padding: 36px 34px 32px;
}
.product-card-featured:hover { transform: none; }
.product-main .tag { display: block; width: fit-content; }
.product-features {
    border-left: 1px solid var(--border);
    padding-left: 36px;
}
.product-features-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 16px;
}
.feature-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.9s ease, translate 0.9s ease;
    transition-delay: 0s, 0s, 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s);
}
.feature-item:hover {
    transform: translateY(-3px);
    border-color: rgba(111, 151, 201, 0.4);
    box-shadow: var(--shadow-glow);
}
.feature-icon { font-size: 18px; flex-shrink: 0; }

.platform-cta { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }

@media (max-width: 900px) {
    .product-card-featured { grid-template-columns: 1fr; }
    .product-features {
        border-left: none;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: 24px;
        margin-top: 20px;
    }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .feature-grid { grid-template-columns: 1fr; }
}

/* About */
.about { padding: 90px 0; background: var(--bg-alt); }
.about-inner {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}
.about-visual {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-glow);
}
.about-logo { width: 100%; max-width: 320px; }

/* Contact */
.contact { padding: 90px 0 110px; }
.contact-inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
}
.contact-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 15px;
}
.contact-icon { font-size: 18px; }

.contact-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
}
.form-row-group { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-row label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.form-row input,
.form-row textarea {
    width: 100%;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    resize: vertical;
    transition: border-color 0.15s ease;
}
.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--cyan);
}
.form-row input.is-invalid,
.form-row textarea.is-invalid {
    border-color: #ef4444;
}
.field-error {
    display: none;
    font-size: 12.5px;
    color: #fca5a5;
}
.field-error.show { display: block; }

.captcha-inline { display: flex; align-items: center; gap: 8px; }
.captcha-img {
    height: 44px;
    width: 130px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: block;
}
.captcha-refresh {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.captcha-inline input { flex: 1; min-width: 0; }
.captcha-refresh:hover { border-color: var(--cyan); color: var(--cyan-soft); }

.form-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status {
    display: none;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 16px;
}
.form-status.show { display: block; }
.form-status.success { background: rgba(111, 151, 201, 0.12); color: var(--cyan-soft); border: 1px solid rgba(111, 151, 201, 0.3); }
.form-status.error { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Footer */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding-top: 56px; }
.footer-inner {
    display: grid;
    grid-template-columns: 1.3fr 1.1fr 0.8fr;
    gap: 28px;
    align-items: start;
    padding-bottom: 36px;
}
.footer-brand::after { content: ''; display: table; clear: both; }
/* 27px used to be illegible for this logo -- it has fine detail (clock
   hands, binary-digit texture, hairline swoosh) that turns to mush below
   ~40px tall no matter the image format or resampling quality (verified by
   rendering it at several sizes directly). 40px is the smallest height
   that keeps the clock face and wordmark clearly readable. */
.footer-logo { height: 40px; float: left; margin-top: 0; margin-right: 10px; }
.footer-brand p { font-size: 14px; line-height: 2; max-width: 100%; margin: 0; }
.footer-links, .footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-links h4, .footer-contact h4 { font-size: 14px; color: var(--text); margin-bottom: 2px; }

.footer-links-row { display: flex; flex-wrap: nowrap; align-items: center; }
.footer-links-row a { position: relative; padding: 0 10px; white-space: nowrap; }
.footer-links-row a:first-child { padding-left: 0; }
.footer-links-row a:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: var(--border);
}

.footer-links a, .footer-contact a {
    color: var(--text-muted);
    font-size: 14px;
    transition: color 0.15s ease;
}
.footer-links a:hover, .footer-contact a:hover {
    color: var(--cyan-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 20px 0;
}
.footer-bottom p { margin: 0; font-size: 13px; color: var(--text-faint); text-align: center; }

/* Back to top */
.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient);
    color: var(--on-gradient-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(111, 151, 201, 0.3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 90;
}
.back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Responsive */
@media (max-width: 900px) {
    .services-grid, .why-grid, .process-steps { grid-template-columns: repeat(2, 1fr); }
    .about-inner, .contact-inner { grid-template-columns: 1fr; }
    .about-visual { order: -1; }
    .footer-inner { grid-template-columns: 1fr; }
    .brand-logo { height: 95px; }
}

@media (max-width: 720px) {
    .faq-list { column-count: 1; }
    .footer-links-row { flex-wrap: wrap; row-gap: 8px; }
    .main-nav {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--bg-alt);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 24px 28px;
        gap: 18px;
        transform: translateY(-120%);
        opacity: 0;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .main-nav.open { transform: translateY(0); opacity: 1; }
    .nav-cta { align-self: flex-start; }
    .nav-toggle { display: flex; }
    .services-grid, .why-grid, .process-steps { grid-template-columns: 1fr; }
    .hero { padding: 90px 0 60px; }
    .hero-stats { gap: 28px; }
    .brand-logo { height: 56px; }
}