/* ============================================================
   MARKHAM SEO COMPANY — DESIGN SYSTEM v3
   Premium software-agency direction (Stripe/Linear/Vercel-inspired):
   deeper glassmorphism, ambient mesh-gradient dark sections, bolder
   fluid hero type, and the .hero-3d-* scaffolding used by the
   Three.js hero scenes (see public/assets/js/hero-scene.js). Variable
   NAMES are kept stable from v1/v2 (admin.css depends on them) —
   only values/additions, so admin inherits the refresh for free.
   ============================================================ */

:root {
    /* ---- Color: brand ---- */
    --navy: #0B2D63;
    --blue: #1976D2;
    --emerald: #10B981;
    --white: #FFFFFF;
    --light-gray: #F7F9FC;
    --text: #1E293B;

    /* ---- Color: named scale (values updated, names unchanged) ---- */
    --ink-900: var(--navy);
    --ink-800: #0E3A80;
    --ink-700: #123B7D;      /* secondary dark, header-on-scroll */
    --blue-600: var(--blue);
    --blue-700: #145EA8;     /* hover state for primary */
    --blue-500: #2F87DE;
    --blue-50:  #EAF2FB;     /* tinted backgrounds, badges */
    --emerald-500: var(--emerald);
    --emerald-600: #0B9A6D;
    --emerald-50: #E6F9F2;
    --paper-0: var(--light-gray);
    --paper-100: var(--white);
    --ash-700: var(--text);
    --ash-500: #5B6B85;      /* secondary text */
    --line-200: #E2E8F0;     /* borders, dividers */
    --line-100: #EDF1F7;

    --color-primary: var(--blue-600);
    --color-primary-hover: var(--blue-700);
    --color-success: var(--emerald-500);
    --color-bg: var(--paper-0);
    --color-surface: var(--paper-100);
    --color-text: var(--ash-700);
    --color-text-muted: var(--ash-500);
    --color-heading: var(--ink-900);
    --color-border: var(--line-200);

    /* ---- Gradients ---- */
    --gradient-brand: linear-gradient(135deg, var(--ink-900) 0%, var(--blue-600) 100%);
    --gradient-brand-deep: linear-gradient(160deg, #081F45 0%, var(--ink-900) 45%, var(--blue-700) 100%);
    --gradient-accent: linear-gradient(120deg, var(--blue-600) 0%, var(--emerald-500) 100%);
    --gradient-accent-soft: linear-gradient(120deg, var(--blue-50) 0%, var(--emerald-50) 100%);
    --gradient-text: linear-gradient(120deg, var(--ink-900) 0%, var(--blue-600) 60%, var(--emerald-600) 100%);

    /* ---- Type ---- */
    --font-display: 'Manrope', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --text-xs: 0.8125rem;    /* 13px */
    --text-sm: 0.9375rem;    /* 15px */
    --text-base: 1.0625rem;  /* 17px */
    --text-lg: 1.25rem;      /* 20px */
    --text-xl: 1.5rem;       /* 24px */
    --text-2xl: 2rem;        /* 32px */
    --text-3xl: 2.75rem;     /* 44px */
    --text-4xl: 3.5rem;      /* 56px */
    --text-5xl: 4.25rem;     /* 68px */

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;

    /* ---- Spacing scale (4px base) ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* ---- Layout ---- */
    --container-max: 1240px;
    --container-narrow: 780px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ---- Elevation (navy-tinted, layered) ---- */
    --shadow-sm: 0 1px 2px rgba(11, 45, 99, 0.06), 0 1px 1px rgba(11, 45, 99, 0.05);
    --shadow-md: 0 12px 32px rgba(11, 45, 99, 0.10), 0 2px 8px rgba(11, 45, 99, 0.06);
    --shadow-lg: 0 32px 64px rgba(11, 45, 99, 0.16), 0 8px 24px rgba(11, 45, 99, 0.08);
    --shadow-glow-blue: 0 10px 28px rgba(25, 118, 210, 0.28);
    --shadow-glow-emerald: 0 10px 28px rgba(16, 185, 129, 0.32);

    /* ---- Glass ---- */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.55);
    --glass-bg-dark: rgba(11, 45, 99, 0.62);
    --glass-border-dark: rgba(255, 255, 255, 0.12);
    --glass-blur: 22px;
    --glass-bg-deep: rgba(255, 255, 255, 0.9);
    --glass-border-glow: rgba(47, 135, 222, 0.35);

    /* ---- Motion ---- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 500ms;
    --duration-reveal: 700ms;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-heading);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
    font-weight: 800;
    letter-spacing: -0.02em;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); font-weight: 700; }
h4 { font-size: var(--text-lg); font-weight: 700; }
p { margin: 0 0 var(--space-4); }

/* Base icon size: every icon() SVG has no width/height attribute, so
   without this fallback an icon used somewhere with no more specific
   contextual rule renders at the browser's default replaced-element
   size (huge). Contextual rules below (.btn .icon, .icon-tile .icon,
   etc.) override this for their own component. */
.icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

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

/* Visible, non-generic focus state used everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 3px solid var(--blue-600);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--ink-900);
    color: #fff;
    padding: var(--space-3) var(--space-5);
    z-index: 1000;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---- Layout helpers ---- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
    position: relative;
}
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; }
.section { padding: var(--space-9) 0; position: relative; }
.section-tight { padding: var(--space-7) 0; position: relative; }
@media (max-width: 768px) {
    .section { padding: var(--space-7) 0; }
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    .text-5xl-mobile-fix { font-size: 2.5rem; }
}

.section-dark {
    background:
        radial-gradient(circle at 14% 18%, rgba(124, 227, 184, 0.10), transparent 42%),
        radial-gradient(circle at 86% 78%, rgba(191, 216, 255, 0.09), transparent 46%),
        var(--gradient-brand-deep);
    color: #C9D6EC;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-light-blue { background: var(--blue-50); }
.section-white { background: var(--white); }

/* Decorative blurred gradient blobs used behind hero/CTA sections */
.blob-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.35; }
.blob-blue { background: var(--blue-500); }
.blob-emerald { background: var(--emerald-500); }
.blob-navy { background: var(--ink-800); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--blue-700);
    background: var(--blue-50);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
}
.eyebrow-on-dark { color: #BFD8FF; background: rgba(255, 255, 255, 0.1); }
.eyebrow .icon { width: 14px; height: 14px; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-sm);
    padding: 14px 26px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    transition: transform var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-glow-blue); }
.btn-gradient { background: var(--gradient-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-gradient:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-emerald); }
.btn-secondary { background: transparent; color: var(--ink-900); border-color: var(--line-200); }
.btn-secondary:hover { border-color: var(--blue-600); color: var(--blue-700); background: var(--blue-50); }
.btn-on-dark { background: #fff; color: var(--ink-900); }
.btn-on-dark:hover { background: var(--emerald-500); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-glow-emerald); }
.btn-ghost-on-dark { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.btn-ghost-on-dark:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); }
.btn-lg { padding: 17px 32px; font-size: var(--text-base); border-radius: var(--radius-md); }
.btn-block { width: 100%; }
.btn:active { transform: translateY(0) scale(0.98); }

/* ---- Cards ---- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    transition: transform var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border-glow); border-color: transparent; }

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
}
.glass-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border-dark);
    color: #fff;
}

.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--gradient-accent-soft);
    color: var(--blue-700);
    margin-bottom: var(--space-4);
    flex-shrink: 0;
}
.icon-tile .icon { width: 26px; height: 26px; }
.icon-tile-solid { background: var(--gradient-accent); color: #fff; }
.icon-tile-sm { width: 40px; height: 40px; border-radius: var(--radius-sm); }
.icon-tile-sm .icon { width: 20px; height: 20px; }

/* ---- Forms ---- */
.field { margin-bottom: var(--space-5); }
.field label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink-900);
    margin-bottom: var(--space-2);
}
.field input, .field select, .field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 12px 14px;
    border: 1px solid var(--line-200);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ash-700);
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-50); outline: none; }
.field-error { color: #C0362C; font-size: var(--text-xs); margin-top: var(--space-2); }
.field-hint { color: var(--ash-500); font-size: var(--text-xs); margin-top: var(--space-2); }
.honeypot { position: absolute; left: -9999px; top: -9999px; }

/* ---- Rank ticker: signature proof motif ---- */
.rank-ticker { display: flex; flex-direction: column; gap: var(--space-3); }
.rank-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: #fff;
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}
.rank-card .keyword { color: var(--ink-900); font-weight: 600; }
.rank-card .movement { color: var(--emerald-600); font-weight: 700; display: flex; align-items: center; gap: 4px; }

/* ---- Stats / counters ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.stat { text-align: center; }
.stat-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); color: var(--ink-900); letter-spacing: -0.02em; }
.section-dark .stat-value { color: #fff; }
.stat-label { display: block; font-size: var(--text-sm); color: var(--ash-500); margin-top: var(--space-2); }
.section-dark .stat-label { color: #A9BEDD; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Trust badges ---- */
.trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; }
.trust-badge { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink-900); }
.trust-badge .icon { width: 20px; height: 20px; color: var(--emerald-600); flex-shrink: 0; }

/* ---- Logo strip ---- */
.logo-strip { display: flex; align-items: center; justify-content: center; gap: var(--space-8); flex-wrap: wrap; }
.logo-strip span {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--ash-500);
    opacity: 0.75;
    transition: opacity var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.logo-strip span:hover { opacity: 1; color: var(--blue-700); }

/* ---- Process timeline (horizontal, home page) ---- */
.process-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.process-timeline li { position: relative; padding-top: var(--space-5); }
.process-timeline .step-index {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gradient-accent); color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}
.process-timeline .step-label { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); display: block; margin-bottom: var(--space-2); }
@media (max-width: 900px) { .process-timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-timeline { grid-template-columns: 1fr; } }

/* ---- Vertical timeline (service/industry deliverables) ---- */
.v-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.v-timeline::before { content: ''; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--line-200); }
.v-timeline li { position: relative; padding: 0 0 var(--space-6) 60px; }
.v-timeline li:last-child { padding-bottom: 0; }
.v-timeline .v-timeline-marker {
    position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
    background: var(--gradient-accent); color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; box-shadow: var(--shadow-sm);
}

/* ---- Process steps (service/industry "how this engagement runs") ----
   Replaces the plain .v-timeline list with a compact glass-card timeline:
   a real 2-up grid so two steps share the same vertical row (desktop),
   with a thin connecting "spine" down the center and a small numbered
   badge overlapping each card's corner. Collapses to one column on
   mobile with the badge/line shifted to the left edge. Each card carries
   an icon, title, description, and a distinct "outcome" pill. */
.process-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.process-steps::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--blue-500), var(--emerald-500));
    opacity: 0.22;
    transform: translateX(-50%);
}
.process-step { position: relative; }
.process-step-marker {
    position: absolute;
    top: -12px;
    left: -12px;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gradient-accent); color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs);
    box-shadow: var(--shadow-sm), 0 0 0 4px var(--color-bg);
    z-index: 1;
}
.process-step-card {
    height: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.process-step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border-glow); }
.process-step-card .icon-tile { width: 38px; height: 38px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.process-step-card .icon-tile .icon { width: 19px; height: 19px; }
.process-step-card h3 { margin-bottom: var(--space-2); font-size: var(--text-base); }
.process-step-card p { color: var(--ash-500); font-size: var(--text-xs); line-height: var(--leading-snug); margin-bottom: var(--space-3); }
.process-step-outcome {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 700; color: var(--emerald-600);
    background: var(--emerald-50); border-radius: var(--radius-pill);
    padding: 5px var(--space-3);
}
.process-step-outcome .icon { width: 13px; height: 13px; }
@media (max-width: 768px) {
    .process-steps { grid-template-columns: 1fr; gap: var(--space-5); }
    .process-steps::before { left: 17px; }
    .process-step { margin-left: var(--space-6); }
    .process-step-marker { left: -34px; top: 4px; }
}

/* ---- Feature / benefit cards ---- */
.feature-card { text-align: left; }
.feature-card h3 { margin-bottom: var(--space-2); }
.feature-card p { color: var(--ash-500); font-size: var(--text-sm); margin-bottom: 0; }

/* ---- Deliverables checklist ---- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); }
.checklist .icon { width: 20px; height: 20px; color: var(--emerald-600); flex-shrink: 0; margin-top: 2px; }

/* ---- Pricing ---- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.pricing-card {
    background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-lg);
    padding: var(--space-6); display: flex; flex-direction: column; position: relative;
    transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pricing-card.is-featured { border: 2px solid var(--blue-600); box-shadow: var(--shadow-lg); }
.pricing-card .pricing-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--gradient-accent); color: #fff; font-size: var(--text-xs); font-weight: 700;
    padding: 6px 16px; border-radius: var(--radius-pill); white-space: nowrap;
}
.pricing-card .pricing-tier { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--ink-900); }
.pricing-card .pricing-range { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--ink-900); margin: var(--space-3) 0; }
.pricing-card .pricing-range small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--ash-500); }
.pricing-card .checklist { margin: var(--space-5) 0; flex: 1; }
.pricing-note { text-align: center; color: var(--ash-500); font-size: var(--text-sm); margin-top: var(--space-6); }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-card.is-featured { order: -1; } }

/* ---- FAQ accordion ---- */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
    border: 1px solid var(--line-200); border-radius: var(--radius-md);
    padding: 0; background: #fff; overflow: hidden;
}
.faq-item summary {
    cursor: pointer; font-weight: 700; color: var(--ink-900); font-family: var(--font-display);
    padding: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 20px; height: 20px; color: var(--blue-600); flex-shrink: 0; transition: transform var(--duration-base) var(--ease-standard); }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item .faq-answer { padding: 0 var(--space-5) var(--space-5); color: var(--ash-500); font-size: var(--text-sm); }

/* ---- Testimonials ---- */
.testimonial-track { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); scrollbar-width: none; }
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card {
    scroll-snap-align: start; flex: 0 0 min(360px, 85vw);
    background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-lg);
    padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
}
.testimonial-stars { display: flex; gap: 2px; color: var(--emerald-500); }
.testimonial-stars .icon { width: 16px; height: 16px; }
.testimonial-quote { font-size: var(--text-base); color: var(--ink-900); flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-avatar {
    width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-accent);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; flex-shrink: 0;
}
.testimonial-name { font-weight: 700; color: var(--ink-900); font-size: var(--text-sm); }
.testimonial-role { color: var(--ash-500); font-size: var(--text-xs); }
.carousel-controls { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-5); }
.carousel-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-200); background: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.carousel-btn:hover { background: var(--blue-50); border-color: var(--blue-600); }
.carousel-btn .icon { width: 18px; height: 18px; color: var(--ink-900); }
.carousel-btn[data-carousel-prev] .icon { transform: rotate(180deg); }

/* ---- Google reviews block ---- */
.reviews-block { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; justify-content: center; text-align: left; }
.reviews-stars { display: flex; gap: 2px; color: var(--emerald-500); }
.reviews-stars .icon { width: 22px; height: 22px; }
.reviews-score { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--ink-900); }

/* ---- Split feature (service/industry detail pages) ----
   Two-column "content + real photo" section directly below the hero:
   existing copy on the left (unchanged content, just given a readable
   measure), a real contextual photograph on the right — rounded,
   shadowed, with a soft gradient glow behind it so it feels lifted off
   the page rather than pasted on. Both columns scroll-reveal
   independently via the existing [data-reveal] system. */
.split-feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; }
.split-feature-copy { max-width: 62ch; }
.split-feature-copy > *:first-child { margin-top: 0; }
.split-feature-media { position: relative; }
.split-feature-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(11, 45, 99, 0.06);
    display: block;
}
.split-feature-media::before {
    content: '';
    position: absolute;
    inset: -18px;
    background: var(--gradient-accent-soft);
    border-radius: calc(var(--radius-xl) + 18px);
    z-index: -1;
    opacity: 0.6;
    filter: blur(24px);
}
@media (max-width: 900px) {
    .split-feature { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---- Service / industry landing page layout (single column, full width) ---- */
.service-block { margin-top: var(--space-8); }
.service-block:first-child { margin-top: 0; }
.service-block .eyebrow { margin-bottom: var(--space-3); }
.service-body :is(h2, h3) { margin-top: var(--space-7); }

/* ---- Hero background illustration (service/industry hero only) ----
   Purely decorative, positioned absolute so it never affects the text
   column's width, spacing, or flow. .hero-content-stack wraps the
   existing hero text as a plain, unstyled-except-for-stacking layer:
   position:relative + z-index:1 is what actually keeps the text above
   the illustration — without it, an absolutely-positioned z-index:auto
   sibling paints above ordinary static content by default, which would
   put the illustration in front of the text instead of behind it. */
.service-hero { position: relative; overflow: hidden; }
.hero-content-stack { position: relative; z-index: 1; }
.hero-illustration {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: clamp(240px, 40%, 440px);
    aspect-ratio: 1 / 1;
    z-index: 0;
    opacity: 0.1;
    color: #fff;
    pointer-events: none;
}
.hero-illustration-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-illustration-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36%;
    height: 36%;
    stroke-width: 1.25;
}
@media (max-width: 900px) {
    .hero-illustration { width: clamp(160px, 32vw, 240px); opacity: 0.08; }
}
@media (max-width: 640px) {
    .hero-illustration { display: none; }
}

/* ---- 3D hero scaffolding (public/assets/js/hero-scene.js) ----
   Progressive enhancement over the static illustration/visual above:
   hero_scene_markup() (icons.php) and the homepage hero both render a
   `.hero-3d-wrap` containing a `.hero-3d-stage` (WebGL canvas target)
   *alongside* the original static fallback markup, unchanged. The canvas
   stays hidden until hero-scene.js confirms WebGL init succeeded (desktop
   viewport, no reduced-motion, CDN reachable) and adds `.has-3d` — mirrors
   the Quill `typeof Quill === 'undefined'` guard in admin.js. If JS never
   runs, the original static illustration/visual is what's on screen. */
/* Kept in-flow (never display:none) so it always has real layout
   dimensions for hero-scene.js to size the renderer against, even before
   a scene has initialized — only opacity/pointer-events toggle, which
   don't affect layout. */
.hero-3d-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-standard);
}
.hero-3d-stage canvas {
    width: 100%;
    height: 100%;
    display: block;
    /* Ambient glow halo around the rendered scene — cheap (GPU-accelerated
       CSS filter, no extra render passes) and is what makes the bright
       additive-blended nodes/lines actually read clearly against the dark
       gradient hero backgrounds instead of looking washed-out/faint. */
    filter: drop-shadow(0 0 36px rgba(16, 185, 129, 0.28)) drop-shadow(0 0 72px rgba(25, 118, 210, 0.22));
}
.hero-3d-wrap.has-3d .hero-3d-stage { opacity: 1; }
.hero-3d-wrap.has-3d .hero-illustration,
.hero-3d-wrap.has-3d .hero-visual-fallback { display: none; }

/* Service/industry hero: the wrap takes over the exact box the static
   illustration used to occupy (see the .hero-illustration comment above),
   and the nested illustration is neutralized to fill that box instead of
   positioning itself (it still positions itself normally when used
   standalone, e.g. consultation.php, which never opts into 3D). */
.service-hero .hero-3d-wrap {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: clamp(240px, 40%, 440px);
    aspect-ratio: 1 / 1;
    z-index: 0;
    pointer-events: none;
}
.service-hero .hero-3d-wrap .hero-illustration {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    height: 100%;
}
@media (max-width: 900px) {
    .service-hero .hero-3d-wrap { width: clamp(160px, 32vw, 240px); }
}
@media (max-width: 640px) {
    .service-hero .hero-3d-wrap { display: none; }
}

/* ---- Shared hero / section helpers used across every template ---- */
.hero-sub { font-size: var(--text-lg); color: var(--ash-500); max-width: 46ch; }
.section-dark .hero-sub { color: #B9C7E3; }
.hero-actions { display: flex; gap: var(--space-4); margin: var(--space-6) 0; flex-wrap: wrap; }
.section-heading { max-width: 640px; margin-bottom: var(--space-7); }

/* Bolder, fluid hero display type — premium software-agency scale that
   still degrades gracefully on small screens (clamp floor matches the
   existing 768px h1 override below). Covers every hero pattern in use:
   the homepage's two-column .hero, service/industry .service-hero pages,
   and the plain single-column .section-dark heroes (locations, case
   studies, blog, portfolio, about, contact, consultation index pages). */
.hero h1, .service-hero .hero-content-stack h1, .section-dark h1 {
    font-size: clamp(2.25rem, 1.2rem + 3vw, var(--text-5xl));
    letter-spacing: -0.03em;
}

/* ---- Shared card components (service/industry/blog/case-study/portfolio cards) ---- */
.service-card { display: flex; flex-direction: column; gap: var(--space-2); }
.service-card p { color: var(--ash-500); font-size: var(--text-sm); flex: 1; }
.card-link { color: var(--blue-600); font-weight: 700; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 4px; }
.card-link .icon { width: 16px; height: 16px; }
.service-card-more { background: var(--gradient-brand); border-color: transparent; }
.service-card-more h3, .service-card-more p { color: #fff; }
.service-card-more .card-link { color: #A9C6FF; }

/* ---- Shared CTA band (used at the bottom of nearly every page) ---- */
.cta-band { background: var(--gradient-brand); color: #fff; position: relative; overflow: hidden; }
.cta-band-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 28ch; }
.cta-band p { color: #A9B7D1; max-width: 44ch; }
.cta-band-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: var(--text-xs); color: var(--ash-500); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--ash-500); transition: color var(--duration-fast) var(--ease-standard); }
.breadcrumb a:hover { color: var(--blue-600); }

/* ---- Scroll reveal + stagger ---- */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-reveal) var(--ease-standard), transform var(--duration-reveal) var(--ease-standard);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-stagger] > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity var(--duration-reveal) var(--ease-standard), transform var(--duration-reveal) var(--ease-standard);
}
[data-stagger].is-visible > * { opacity: 1; transform: translateY(0); }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }

/* Floating decorative elements (hero) */
.float-el { animation: float-y 5s ease-in-out infinite; }
.float-el-delay { animation-delay: 1.2s; }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---- Utility ---- */
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--emerald-50);
    color: var(--emerald-600);
}

/* ---- Floating WhatsApp button ----
   Fixed bottom-right on all pages. Sits above .sticky-mobile-cta (z-index
   90) but below the header (z-index 100) — the two never occupy the same
   screen region, but the ordering keeps intent clear. On mobile it's
   pushed up above the sticky CTA bar so the two never overlap. */
.whatsapp-float {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 95;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), var(--shadow-md);
    transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 10px 32px rgba(37, 211, 102, 0.45), var(--shadow-lg);
    outline: none;
}
@media (max-width: 900px) {
    .whatsapp-float {
        right: var(--space-4);
        bottom: calc(88px + env(safe-area-inset-bottom));
        width: 52px;
        height: 52px;
    }
    .whatsapp-float svg { width: 26px; height: 26px; }
}

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