/* ══════════════════════════════════════════════════════════════════════════════
   PORTAPOLIS — World-Class Premium Website
   Design language: Apple × Stripe × editorial luxury
   ══════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* ── Brand palette ────────────────────────────────────────────────────────── */
    --ink-900:        #0A0E1A;   /* primary text, deep ink */
    --ink-800:        #111827;
    --ink-700:        #1F2937;
    --ink-500:        #4B5563;
    --ink-400:        #6B7280;
    --ink-300:        #9CA3AF;
    --ink-200:        #D1D5DB;
    --ink-100:        #E5E7EB;
    --ink-50:         #F3F4F6;

    --paper:          #FAFAF7;   /* warm off-white */
    --paper-2:        #F4F2EC;   /* slightly tinted */
    --surface:        #FFFFFF;
    --surface-tint:   rgba(255,255,255,.65);

    /* Accent — Indigo-violet with a warm gold companion */
    --brand:          #4F46E5;   /* electric indigo */
    --brand-2:        #7C3AED;
    --brand-3:        #2563EB;
    --brand-deep:     #1E1B4B;
    --gold:           #C9A961;   /* warm gold accent */
    --gold-soft:      #E9D9A8;

    --success:        #059669;
    --danger:         #DC2626;

    /* Legacy compatibility (kept for script & existing components) */
    --md-primary:              var(--brand);
    --md-primary-dark:         #3730A3;
    --md-primary-light:        #6366F1;
    --md-on-primary:           #FFFFFF;
    --md-primary-container:    #EEF2FF;
    --md-on-primary-container: #312E81;
    --md-secondary:            #0F766E;
    --md-tertiary:             #B45309;
    --md-success:              var(--success);
    --md-error:                var(--danger);
    --md-background:           var(--paper);
    --md-on-background:        var(--ink-900);
    --md-surface:              var(--surface);
    --md-on-surface:           var(--ink-900);
    --md-surface-variant:      var(--paper-2);
    --md-on-surface-variant:   var(--ink-500);
    --md-outline:              var(--ink-300);
    --md-outline-variant:      var(--ink-100);

    /* ── Shadow / elevation (soft, lifted) ────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(15,18,38,.04);
    --shadow-sm: 0 2px 8px rgba(15,18,38,.05), 0 1px 2px rgba(15,18,38,.03);
    --shadow-md: 0 8px 24px -8px rgba(15,18,38,.10), 0 4px 8px -4px rgba(15,18,38,.05);
    --shadow-lg: 0 24px 48px -16px rgba(15,18,38,.15), 0 8px 16px -8px rgba(15,18,38,.08);
    --shadow-xl: 0 40px 80px -24px rgba(15,18,38,.22);
    --shadow-glow: 0 0 0 1px rgba(79,70,229,.15), 0 24px 48px -16px rgba(79,70,229,.30);

    --elevation-1: var(--shadow-sm);
    --elevation-2: var(--shadow-md);
    --elevation-3: var(--shadow-md);
    --elevation-4: var(--shadow-lg);
    --elevation-5: var(--shadow-xl);

    /* ── Radii ────────────────────────────────────────────────────────────────── */
    --radius-xs:  6px;
    --radius-sm:  10px;
    --radius-md:  14px;
    --radius-lg:  20px;
    --radius-xl:  28px;
    --radius-2xl: 36px;
    --radius-full: 9999px;

    /* ── Spacing ──────────────────────────────────────────────────────────────── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
    --sp-32: 128px;

    /* ── Typography ───────────────────────────────────────────────────────────── */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* ── Motion ──────────────────────────────────────────────────────────────── */
    --ease-out:    cubic-bezier(.2, .8, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-soft:   cubic-bezier(.4, 0, .2, 1);
    --duration-sm: 200ms;
    --duration-md: 350ms;
    --duration-lg: 600ms;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-900);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Global noise texture for depth (very subtle) */
body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .35; mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 1; }

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--sp-6);
}
.container-narrow { max-width: 920px; margin: 0 auto; padding: 0 var(--sp-6); }

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

::selection { background: var(--ink-900); color: var(--paper); }

/* Material Symbols default config */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY  (display serif + clean sans)
   ══════════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    line-height: 1.08;
    font-feature-settings: 'ss01';
}

h1 { font-size: clamp(2.75rem, 6vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
h4 { font-size: 1.125rem; font-weight: 600; }

p { color: var(--ink-500); }

.eyebrow {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--ink-400);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
.eyebrow::before {
    content: ''; width: 24px; height: 1px; background: var(--ink-300);
}

/* Inline italic emphasis in headings */
h1 em, h2 em, h3 em {
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
    font-feature-settings: 'ss01', 'ss03';
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: 14px 26px;
    font-family: var(--font-sans);
    font-size: 15px; font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--duration-sm) var(--ease-out),
                box-shadow var(--duration-md) var(--ease-out),
                background var(--duration-md) var(--ease-out),
                color var(--duration-sm) var(--ease-out);
    position: relative;
    isolation: isolate;
}
.btn .material-symbols-rounded { font-size: 18px; }

.btn-filled {
    background: var(--ink-900);
    color: var(--paper);
    box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, var(--shadow-md);
}
.btn-filled:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, var(--shadow-lg); }
.btn-filled:active { transform: translateY(0); }

.btn-outlined {
    background: transparent;
    color: var(--ink-900);
    border-color: var(--ink-200);
}
.btn-outlined:hover { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); transform: translateY(-1px); }

.btn-ghost {
    background: transparent; color: var(--ink-700);
}
.btn-ghost:hover { color: var(--brand); }

.btn-brand {
    background: var(--brand); color: #fff;
    box-shadow: 0 8px 24px -8px rgba(79,70,229,.5);
}
.btn-brand:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -8px rgba(79,70,229,.65); }

.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-full { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════════════════════ */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: var(--sp-4) 0;
    background: rgba(250,250,247,.72);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-bottom: 1px solid transparent;
    transition: padding var(--duration-md) var(--ease-out),
                background var(--duration-md) var(--ease-out),
                border-color var(--duration-md) var(--ease-out),
                box-shadow var(--duration-md) var(--ease-out);
}
.navbar.scrolled {
    padding: var(--sp-3) 0;
    background: rgba(250,250,247,.92);
    border-bottom-color: rgba(15,18,38,.06);
    box-shadow: 0 1px 0 rgba(15,18,38,.02);
}
.nav-content { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6); }

.logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; transition: opacity var(--duration-sm); }
.logo:hover { opacity: .8; }

.logo-mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--ink-900);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 600; font-size: 20px;
    letter-spacing: -0.02em;
    border-radius: 10px;
    position: relative;
}
.logo-mark::after {
    content: ''; position: absolute; inset: 0; border-radius: 10px;
    background: linear-gradient(135deg, transparent 60%, rgba(255,255,255,.12));
    pointer-events: none;
}
.logo-mark-light { background: rgba(255,255,255,.12); color: #fff; }

.logo-text-group { display: flex; flex-direction: column; gap: 1px; }
.logo-wordmark {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 500; line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink-900);
}
.logo-tagline {
    font-size: 10px; font-weight: 600; line-height: 1;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: .14em;
}

.nav-links { display: flex; list-style: none; align-items: center; gap: var(--sp-8); }
.nav-links a {
    font-size: 14px; font-weight: 500;
    color: var(--ink-700);
    text-decoration: none;
    position: relative;
    transition: color var(--duration-sm);
}
.nav-links a:not(.nav-cta):hover { color: var(--ink-900); }

.nav-cta {
    padding: 10px 22px !important;
    background: var(--ink-900) !important;
    color: var(--paper) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    transition: all var(--duration-sm) var(--ease-out) !important;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px;
    align-items: center;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(15,18,38,.08);
    border-radius: 12px;
    cursor: pointer; padding: 0;
    transition: background var(--duration-sm), border-color var(--duration-sm);
}
.nav-toggle:hover { background: rgba(255,255,255,.9); }
.nav-toggle.active { background: var(--ink-900); border-color: var(--ink-900); }
.nav-toggle span {
    width: 20px; height: 2px; background: var(--ink-900);
    border-radius: 2px;
    transition: all var(--duration-md) var(--ease-out);
}
.nav-toggle.active span { background: #fff; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
    .nav-toggle { display: flex; }

    .navbar { padding: 12px 0; }

    .logo-tagline { display: none; }
    .logo-mark { width: 36px; height: 36px; font-size: 18px; }
    .logo-wordmark { font-size: 20px; }

    .nav-links {
        position: fixed; top: 0; left: 0; right: 0;
        height: 100vh; height: 100dvh;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 96px var(--sp-6) var(--sp-8);
        background: var(--paper);
        border-bottom: none;
        transform: translateY(-100%);
        transition: transform var(--duration-md) var(--ease-out);
        overflow-y: auto;
        z-index: 99;
    }
    .nav-links::before {
        content: ''; position: absolute; inset: 0;
        background:
            radial-gradient(60% 50% at 20% 0%, rgba(124,58,237,.10), transparent 60%),
            radial-gradient(50% 40% at 100% 30%, rgba(201,169,97,.10), transparent 70%);
        pointer-events: none;
    }
    .nav-links.active { transform: translateY(0); }
    .nav-links li { width: 100%; position: relative; z-index: 1; }
    .nav-links li + li { border-top: 1px solid rgba(15,18,38,.06); }
    .nav-links a {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 4px;
        font-family: var(--font-display);
        font-size: 26px; font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink-900);
    }
    .nav-links a::after { display: none; }
    .nav-links .nav-cta {
        margin-top: var(--sp-6);
        padding: 16px 28px !important;
        font-family: var(--font-sans) !important;
        font-size: 16px !important;
        justify-content: center;
        border-top: none !important;
    }
    .nav-links li:has(.nav-cta) { border-top: none; }
    body.menu-open { overflow: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    padding: clamp(120px, 16vh, 180px) 0 var(--sp-24);
    overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.hero-gradient {
    position: absolute; inset: -10% -10% auto -10%; height: 80%;
    background:
        radial-gradient(60% 60% at 20% 10%, rgba(124,58,237,.18), transparent 60%),
        radial-gradient(50% 50% at 90% 20%, rgba(201,169,97,.18), transparent 65%),
        radial-gradient(55% 60% at 50% 80%, rgba(79,70,229,.10), transparent 70%);
    filter: blur(20px);
}
.hero-grid-pattern {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(15,18,38,.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,18,38,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 40%, transparent 80%);
}
.hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; }
.hero-orb-1 { width: 360px; height: 360px; background: var(--brand-2); top: -80px; left: -80px; }
.hero-orb-2 { width: 420px; height: 420px; background: var(--gold-soft); top: 20px; right: -120px; }
.hero-orb-3 { width: 320px; height: 320px; background: var(--brand); bottom: -120px; left: 30%; opacity: .25; }

.hero .container { position: relative; z-index: 1; }

.hero-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--sp-16);
    align-items: center;
}
@media (max-width: 980px) {
    .hero-layout { grid-template-columns: 1fr; gap: var(--sp-12); }
}

.hero-chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 6px 14px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(15,18,38,.08);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    font-size: 12px; font-weight: 600; color: var(--ink-700);
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-xs);
}
.chip-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 0 4px rgba(5,150,105,.18);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(5,150,105,.18); }
    50%      { box-shadow: 0 0 0 8px rgba(5,150,105,.06); }
}

.hero-title {
    margin: var(--sp-6) 0 var(--sp-5);
    font-size: clamp(2.75rem, 6.5vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 400;
}
.hero-title em, .hero-highlight {
    font-style: italic; font-weight: 400;
    background: linear-gradient(105deg, var(--brand) 0%, var(--brand-2) 50%, var(--gold) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    display: inline-block;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.6;
    color: var(--ink-500);
    max-width: 560px;
    margin-bottom: var(--sp-10);
}

.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

.hero-metrics {
    display: flex; align-items: center; gap: var(--sp-6);
    margin-top: var(--sp-12);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--ink-100);
}
.metric { display: flex; flex-direction: column; gap: 2px; }
.metric-value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    line-height: 1;
}
.metric-label {
    font-size: 12px; font-weight: 500;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.metric-divider { width: 1px; height: 32px; background: var(--ink-100); }

/* Hero visual — phone mockup */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; }
.phone-mockup {
    position: relative;
    width: 320px; height: 660px;
    transform: rotate(-2deg);
    animation: float 8s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(-1deg) translateY(-10px); }
}
.phone-body {
    position: relative; width: 100%; height: 100%;
    background: linear-gradient(160deg, #1a1a1f, #0a0a0e);
    border-radius: 48px;
    padding: 14px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        0 60px 120px -30px rgba(15,18,38,.5),
        0 30px 60px -20px rgba(15,18,38,.3);
}
.phone-dynamic-island {
    position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 28px;
    background: #000; border-radius: 14px;
    z-index: 2;
}
.phone-screen {
    width: 100%; height: 100%;
    border-radius: 36px;
    background: linear-gradient(180deg, #fafaf7 0%, #fff 100%);
    overflow: hidden;
    position: relative;
}
.screen-status-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 28px 6px;
    font-size: 14px; font-weight: 600; color: var(--ink-900);
}
.status-icons { display: flex; gap: 4px; }
.status-icons .material-symbols-rounded { font-size: 14px; }

.screen-content { padding: var(--sp-8) var(--sp-5) var(--sp-5); }
.screen-header { margin-bottom: var(--sp-5); }
.screen-greeting {
    display: block; font-size: 13px; color: var(--ink-400); font-weight: 500;
}
.screen-name {
    display: block; font-family: var(--font-display);
    font-size: 24px; font-weight: 500; color: var(--ink-900);
    letter-spacing: -0.02em;
}

.screen-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 20px;
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-4);
}
.notif-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.notif-icon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: rgba(79,70,229,.1);
    color: var(--brand);
    border-radius: 10px;
    font-size: 18px !important;
}
.notif-text { display: flex; flex-direction: column; flex: 1; }
.notif-title { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.notif-time { font-size: 11px; color: var(--ink-400); }
.notif-badge {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--gold-soft); color: #92400E;
    border-radius: 8px;
}
.notif-badge .material-symbols-rounded { font-size: 14px; }
.notif-body { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px dashed var(--ink-100); padding-top: var(--sp-3); }
.notif-visitor-name { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.notif-meta { font-size: 11px; color: var(--ink-400); }
.notif-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.notif-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 8px; border-radius: 10px; font-size: 12px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
}
.notif-btn .material-symbols-rounded { font-size: 14px; }
.notif-btn-reject { background: var(--ink-50); color: var(--ink-700); }
.notif-btn-approve { background: var(--ink-900); color: var(--paper); }

.screen-quick-actions {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 20px;
    padding: var(--sp-3);
}
.quick-action {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: var(--sp-2);
    color: var(--ink-700);
    font-size: 10px; font-weight: 500;
    text-align: center;
}
.quick-action .material-symbols-rounded { font-size: 22px; color: var(--brand); }

/* Floating accent cards */
.float-card {
    position: absolute;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 10px 16px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(15,18,38,.08);
    border-radius: var(--radius-full);
    font-size: 13px; font-weight: 600; color: var(--ink-900);
    box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(20px) scale(.94);
    transition: opacity var(--duration-lg) var(--ease-out),
                transform var(--duration-lg) var(--ease-spring);
}
.float-card.visible { opacity: 1; transform: translateY(0) scale(1); }
.float-card .material-symbols-rounded { font-size: 16px; color: var(--brand); }
.float-card-1 { top: 12%; left: -6%; }
.float-card-2 { top: 38%; right: -10%; }
.float-card-3 { bottom: 16%; left: -2%; }
@media (max-width: 980px) {
    .float-card-1 { top: 6%; left: 0; }
    .float-card-2 { top: 30%; right: 0; }
    .float-card-3 { bottom: 8%; left: 8%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TRUST STRIP
   ══════════════════════════════════════════════════════════════════════════════ */
.trust-strip {
    padding: var(--sp-12) 0;
    border-top: 1px solid var(--ink-100);
    border-bottom: 1px solid var(--ink-100);
    background: rgba(255,255,255,.4);
}
.trust-label {
    text-align: center;
    font-size: 12px; font-weight: 600;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: var(--sp-6);
}
.trust-logos {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--sp-12) var(--sp-16);
}
.trust-item {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: 18px; font-weight: 500;
    color: var(--ink-700);
    letter-spacing: -0.01em;
}
.trust-item .material-symbols-rounded { font-size: 22px; color: var(--brand); }

/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL SECTION
   ══════════════════════════════════════════════════════════════════════════════ */
.section { padding: var(--sp-32) 0; position: relative; }
@media (max-width: 768px) { .section { padding: var(--sp-20) 0; } }

.section-header {
    max-width: 760px;
    margin: 0 auto var(--sp-16);
    text-align: center;
}
.section-chip {
    display: inline-block;
    font-size: 12px; font-weight: 600;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: var(--sp-4);
}
.section-title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-5);
}
.section-subtitle {
    font-size: 1.125rem;
    color: var(--ink-500);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FEATURES — bento grid
   ══════════════════════════════════════════════════════════════════════════════ */
.features-section { background: var(--paper); }

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}
@media (max-width: 980px)  { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .bento-grid { grid-template-columns: 1fr; } }

.bento-card {
    position: relative;
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-xl);
    transition: transform var(--duration-md) var(--ease-out),
                box-shadow var(--duration-md) var(--ease-out),
                border-color var(--duration-md);
    overflow: hidden;
}
.bento-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(60% 50% at 100% 0%, rgba(79,70,229,.05), transparent 70%);
    opacity: 0; transition: opacity var(--duration-md);
    pointer-events: none;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(79,70,229,.2); }
.bento-card:hover::before { opacity: 1; }

.bento-lg { grid-column: span 2; }
@media (max-width: 980px) { .bento-lg { grid-column: span 2; } }
@media (max-width: 640px) { .bento-lg { grid-column: span 1; } }

.bento-icon-wrap {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(79,70,229,.1), rgba(79,70,229,.04));
    color: var(--brand);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-5);
    border: 1px solid rgba(79,70,229,.12);
}
.bento-icon-wrap .material-symbols-rounded { font-size: 26px; }
.bento-icon-secondary {
    background: linear-gradient(135deg, rgba(201,169,97,.18), rgba(201,169,97,.06));
    color: #8C6E2F;
    border-color: rgba(201,169,97,.25);
}
.bento-icon-tertiary {
    background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(15,118,110,.04));
    color: #0F766E;
    border-color: rgba(15,118,110,.18);
}

.bento-card h3 {
    font-size: 1.4rem;
    margin-bottom: var(--sp-3);
}
.bento-card p { font-size: 0.95rem; line-height: 1.6; }

.bento-visual { margin-top: var(--sp-6); }

.mini-timeline {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--paper-2);
    border-radius: var(--radius-md);
}
.tl-step {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 500; color: var(--ink-400);
    text-align: center;
}
.tl-step .material-symbols-rounded {
    font-size: 18px;
    padding: 8px; border-radius: 50%;
    background: var(--surface); color: var(--ink-300);
}
.tl-step.active { color: var(--ink-900); }
.tl-step.active .material-symbols-rounded { background: var(--brand); color: #fff; }
.tl-connector { flex: 0 0 18px; height: 1px; background: var(--ink-200); }

.role-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.role-pill {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 12px; font-weight: 600;
    background: var(--ink-50);
    color: var(--ink-700);
    border: 1px solid var(--ink-100);
}
.rp-admin  { background: rgba(79,70,229,.08); color: #3730A3; border-color: rgba(79,70,229,.15); }
.rp-guard  { background: rgba(15,118,110,.08); color: #0F766E; border-color: rgba(15,118,110,.15); }
.rp-owner  { background: rgba(201,169,97,.18); color: #8C6E2F; border-color: rgba(201,169,97,.3); }
.rp-tenant { background: rgba(124,58,237,.08); color: #6D28D9; border-color: rgba(124,58,237,.15); }
.rp-staff  { background: var(--ink-50); color: var(--ink-700); }

.feature-extras {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-12);
}
.extra-chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 13px; font-weight: 500;
    color: var(--ink-700);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    transition: all var(--duration-sm);
}
.extra-chip:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand); }
.extra-chip .material-symbols-rounded { font-size: 16px; color: var(--ink-400); }
.extra-chip:hover .material-symbols-rounded { color: var(--brand); }

/* ══════════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — steps
   ══════════════════════════════════════════════════════════════════════════════ */
.how-section {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}

.steps-track {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-5);
}
@media (max-width: 1024px) {
    .steps-track {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
    }
    .step-connector { display: none; }
}
@media (max-width: 600px) {
    .steps-track { grid-template-columns: 1fr; }
}

.step-card {
    position: relative;
    padding: var(--sp-8) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: transform var(--duration-md), box-shadow var(--duration-md);
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.step-num {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--ink-900); color: var(--paper);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600;
}
.step-icon-wrap {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(79,70,229,.1), rgba(79,70,229,.04));
    color: var(--brand);
    border-radius: var(--radius-md);
    margin: var(--sp-4) auto var(--sp-5);
}
.step-icon-wrap .material-symbols-rounded { font-size: 28px; }
.step-icon-secondary {
    background: linear-gradient(135deg, rgba(201,169,97,.18), rgba(201,169,97,.06));
    color: #8C6E2F;
}
.step-icon-tertiary {
    background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(124,58,237,.04));
    color: var(--brand-2);
}
.step-icon-success {
    background: linear-gradient(135deg, rgba(5,150,105,.1), rgba(5,150,105,.04));
    color: var(--success);
}
.step-card h3 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.step-card p { font-size: 0.9rem; }

.step-connector {
    color: var(--ink-300);
    display: flex; align-items: center; justify-content: center;
}
.step-connector .material-symbols-rounded { font-size: 24px; }

/* ══════════════════════════════════════════════════════════════════════════════
   SOLUTIONS
   ══════════════════════════════════════════════════════════════════════════════ */
.solutions-section { background: var(--paper); }

.solutions-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}
@media (max-width: 980px) { .solutions-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; } }

.solution-card {
    position: relative;
    padding: var(--sp-10);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-xl);
    transition: transform var(--duration-md), box-shadow var(--duration-md), border-color var(--duration-md);
    overflow: hidden;
}
.solution-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.solution-card-featured {
    background: var(--ink-900);
    color: var(--paper);
    border-color: transparent;
}
.solution-card-featured h3 { color: #fff; }
.solution-card-featured p { color: rgba(255,255,255,.7); }
.solution-card-featured::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(70% 60% at 70% 0%, rgba(124,58,237,.35), transparent 60%);
    pointer-events: none;
}
.solution-card-featured > * { position: relative; z-index: 1; }

.solution-badge {
    position: absolute; top: var(--sp-5); right: var(--sp-5);
    padding: 4px 10px;
    background: var(--gold);
    color: var(--ink-900);
    border-radius: var(--radius-full);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.solution-icon {
    width: 60px; height: 60px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(79,70,229,.1), rgba(79,70,229,.04));
    color: var(--brand);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-6);
}
.solution-icon .material-symbols-rounded { font-size: 28px; }
.solution-card-featured .solution-icon {
    background: rgba(255,255,255,.1);
    color: var(--gold-soft);
}

.solution-card h3 { font-size: 1.5rem; margin-bottom: var(--sp-3); }
.solution-card p { font-size: 0.95rem; margin-bottom: var(--sp-6); }

.solution-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.solution-list li {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    font-size: 14px; color: var(--ink-700);
}
.solution-card-featured .solution-list li { color: rgba(255,255,255,.85); }
.solution-list .material-symbols-rounded {
    font-size: 18px; color: var(--success);
    flex-shrink: 0; margin-top: 1px;
}
.solution-card-featured .solution-list .material-symbols-rounded { color: var(--gold-soft); }

/* ══════════════════════════════════════════════════════════════════════════════
   WHY PORTAPOLIS
   ══════════════════════════════════════════════════════════════════════════════ */
.why-section { background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%); }

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}
@media (max-width: 980px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } }

.why-card {
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
    transition: transform var(--duration-md), box-shadow var(--duration-md);
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.why-icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(79,70,229,.1), rgba(79,70,229,.04));
    color: var(--brand);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-5);
}
.why-icon .material-symbols-rounded { font-size: 24px; }
.why-icon-secondary {
    background: linear-gradient(135deg, rgba(201,169,97,.18), rgba(201,169,97,.06));
    color: #8C6E2F;
}
.why-icon-tertiary {
    background: linear-gradient(135deg, rgba(15,118,110,.1), rgba(15,118,110,.04));
    color: #0F766E;
}
.why-card h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; margin-bottom: var(--sp-2); letter-spacing: -0.02em; }
.why-card p { font-size: 0.92rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════════════════════════════════════ */
.pricing-section { background: var(--paper); }

.pricing-toggle {
    display: flex; justify-content: center; align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-12);
}
.toggle-label {
    font-size: 14px; font-weight: 500; color: var(--ink-400);
    transition: color var(--duration-sm);
}
.toggle-label.toggle-active { color: var(--ink-900); }
.toggle-save {
    margin-left: var(--sp-2);
    padding: 2px 8px;
    background: rgba(5,150,105,.12);
    color: var(--success);
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700;
}
.toggle-switch {
    position: relative; width: 52px; height: 28px;
    background: var(--ink-200);
    border: none; border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--duration-md);
}
.toggle-switch.active { background: var(--ink-900); }
.toggle-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-md) var(--ease-spring);
}
.toggle-switch.active .toggle-thumb { transform: translateX(24px); }

.pricing-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    align-items: stretch;
}
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

.price-card {
    position: relative;
    padding: var(--sp-10);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-xl);
    display: flex; flex-direction: column;
    transition: transform var(--duration-md), box-shadow var(--duration-md);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.price-card-featured {
    background: var(--ink-900);
    color: var(--paper);
    border-color: transparent;
}
.price-card-featured h3 { color: #fff; }
.price-card-featured p, .price-card-featured .price-features li { color: rgba(255,255,255,.78); }
.price-card-featured::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(70% 50% at 50% 0%, rgba(124,58,237,.4), transparent 70%);
    pointer-events: none; border-radius: inherit;
}
.price-card-featured > * { position: relative; z-index: 1; }

.price-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    padding: 6px 14px;
    background: var(--gold);
    color: var(--ink-900);
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    box-shadow: var(--shadow-md);
}

.price-header h3 { font-size: 1.5rem; margin-bottom: var(--sp-2); }
.price-header p { font-size: 0.9rem; margin-bottom: var(--sp-6); }

.price-amount {
    display: flex; align-items: baseline; gap: 2px;
    margin-bottom: var(--sp-2);
}
.price-currency { font-size: 1.5rem; font-weight: 500; color: var(--ink-500); }
.price-card-featured .price-currency { color: rgba(255,255,255,.6); }
.price-value {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink-900);
}
.price-card-featured .price-value { color: #fff; }
.price-period { font-size: 0.95rem; color: var(--ink-400); margin-left: 4px; }
.price-card-featured .price-period { color: rgba(255,255,255,.6); }

.price-note {
    font-size: 0.85rem;
    color: var(--ink-400);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--ink-100);
}
.price-card-featured .price-note { color: rgba(255,255,255,.6); border-bottom-color: rgba(255,255,255,.1); }

.price-features {
    list-style: none;
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
    flex: 1;
}
.price-features li {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    font-size: 14px; color: var(--ink-700);
}
.price-features .material-symbols-rounded {
    font-size: 18px; color: var(--success);
    flex-shrink: 0; margin-top: 1px;
}
.price-card-featured .price-features .material-symbols-rounded { color: var(--gold-soft); }

.price-card-featured .btn-filled {
    background: var(--gold); color: var(--ink-900);
}
.price-card-featured .btn-filled:hover { background: var(--gold-soft); }
.price-card-featured .btn-outlined {
    border-color: rgba(255,255,255,.3); color: #fff;
}
.price-card-featured .btn-outlined:hover { background: #fff; color: var(--ink-900); }

/* ══════════════════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════════════════════════════ */
.testimonials-section { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }

.testimonials-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}
@media (max-width: 980px) { .testimonials-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

.testimonial-card {
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-xl);
    display: flex; flex-direction: column; gap: var(--sp-5);
    transition: transform var(--duration-md), box-shadow var(--duration-md);
    position: relative;
}
.testimonial-card::before {
    content: '"';
    position: absolute; top: var(--sp-3); right: var(--sp-6);
    font-family: var(--font-display);
    font-size: 80px; line-height: 1;
    color: var(--ink-100);
    pointer-events: none;
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.testimonial-stars { display: flex; gap: 2px; }
.testimonial-stars .material-symbols-rounded {
    font-size: 18px;
    color: var(--gold);
    font-variation-settings: 'FILL' 1;
}
.testimonial-text {
    font-family: var(--font-display);
    font-size: 1.18rem;
    line-height: 1.5;
    color: var(--ink-800);
    font-weight: 400;
    letter-spacing: -0.01em;
    flex: 1;
}
.testimonial-author {
    display: flex; align-items: center; gap: var(--sp-3);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--ink-100);
}
.author-avatar {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
}
.author-info { display: flex; flex-direction: column; gap: 2px; }
.author-name { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.author-role { font-size: 12px; color: var(--ink-400); }

/* ══════════════════════════════════════════════════════════════════════════════
   DOWNLOAD CARD
   ══════════════════════════════════════════════════════════════════════════════ */
.download-section { background: var(--paper); }

.download-card {
    background: var(--ink-900);
    color: var(--paper);
    border-radius: var(--radius-2xl);
    padding: clamp(var(--sp-12), 6vw, var(--sp-24));
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--sp-12);
    align-items: center;
    position: relative;
    overflow: hidden;
}
.download-card::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(60% 60% at 0% 0%, rgba(124,58,237,.4), transparent 60%),
        radial-gradient(50% 50% at 100% 100%, rgba(201,169,97,.25), transparent 60%);
    pointer-events: none;
}
.download-card > * { position: relative; z-index: 1; }
@media (max-width: 800px) { .download-card { grid-template-columns: 1fr; text-align: center; } }

.download-content h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    color: #fff;
    margin-bottom: var(--sp-4);
}
.download-content p {
    color: rgba(255,255,255,.75);
    font-size: 1.05rem;
    margin-bottom: var(--sp-8);
    max-width: 500px;
}
@media (max-width: 800px) { .download-content p { margin: 0 auto var(--sp-8); } }

.store-badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 800px) { .store-badges { justify-content: center; } }

.store-badge {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    padding: 12px 22px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    color: #fff;
    text-decoration: none;
    transition: all var(--duration-sm);
}
.store-badge:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }
.store-badge .material-symbols-rounded { font-size: 28px; }
.store-text { display: flex; flex-direction: column; align-items: flex-start; }
.store-small { font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .12em; }
.store-name { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }

.download-visual { display: flex; justify-content: center; }
.download-qr {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-xl);
    padding: var(--sp-10);
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.download-qr .material-symbols-rounded { font-size: 100px; color: #fff; }
.qr-label { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .14em; }

/* ══════════════════════════════════════════════════════════════════════════════
   CTA / CONTACT
   ══════════════════════════════════════════════════════════════════════════════ */
.cta-section { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }

.cta-card {
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-2xl);
    padding: clamp(var(--sp-12), 6vw, var(--sp-20));
    box-shadow: var(--shadow-xl);
    max-width: 920px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.cta-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(60% 60% at 100% 0%, rgba(79,70,229,.06), transparent 70%);
    pointer-events: none;
}
.cta-card > * { position: relative; z-index: 1; }

.cta-content { text-align: center; }
.cta-content h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    margin-bottom: var(--sp-4);
}
.cta-content p {
    font-size: 1.05rem;
    color: var(--ink-500);
    max-width: 540px;
    margin: 0 auto var(--sp-10);
}

.cta-form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 560px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group { position: relative; }
.form-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--ink-400); font-size: 18px !important;
}
.form-input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink-900);
    transition: all var(--duration-sm);
}
.form-input::placeholder { color: var(--ink-400); }
.form-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(79,70,229,.12);
}
.form-disclaimer { font-size: 12px; color: var(--ink-400); text-align: center; margin-top: var(--sp-4); }

/* Textarea icon alignment — anchor to top, not center */
.form-group-textarea .form-icon { top: 16px; transform: none; }
.form-input[rows], textarea.form-input {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
    padding-top: 14px;
}
.form-row-full { grid-template-columns: 1fr !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */
.footer {
    background: var(--ink-900);
    color: rgba(255,255,255,.7);
    padding: var(--sp-20) 0 var(--sp-8);
    position: relative;
    overflow: hidden;
}
.footer::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(60% 50% at 0% 0%, rgba(79,70,229,.18), transparent 60%);
    pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 2.6fr;
    gap: var(--sp-16);
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; gap: var(--sp-10); } }

.footer-logo { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; margin-bottom: var(--sp-5); }
.footer-logo .logo-wordmark { color: #fff; }
.footer-desc { font-size: 14px; line-height: 1.7; max-width: 360px; margin-bottom: var(--sp-6); }

.footer-contact { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.footer-contact li { display: flex; align-items: center; gap: var(--sp-3); font-size: 14px; }
.footer-contact .material-symbols-rounded { font-size: 18px; color: var(--gold-soft); }
.footer-contact a { color: rgba(255,255,255,.7); text-decoration: none; transition: color var(--duration-sm); }
.footer-contact a:hover { color: #fff; }

.footer-social { display: flex; gap: var(--sp-2); }
.social-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: all var(--duration-sm);
}
.social-btn:hover { background: rgba(255,255,255,.15); color: #fff; transform: translateY(-1px); }

.footer-links {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8);
}
@media (max-width: 700px) { .footer-links { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); } }

.footer-col h4 {
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: var(--sp-5);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a {
    font-size: 14px; color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color var(--duration-sm);
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--sp-4);
    padding-top: var(--sp-8);
    font-size: 12px;
    color: rgba(255,255,255,.5);
}

.footer-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.f-badge {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 6px 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 500;
    color: rgba(255,255,255,.7);
}
.f-badge .material-symbols-rounded { font-size: 14px; color: var(--gold-soft); }

/* ══════════════════════════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════════ */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity var(--duration-lg) var(--ease-out),
                transform var(--duration-lg) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-float { opacity: 0; transform: translateY(20px) scale(.95); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SUB-PAGE / GENERIC HELPERS
   (kept for the other pages — shared layout building blocks)
   ══════════════════════════════════════════════════════════════════════════════ */
.page-hero {
    padding: clamp(140px, 18vh, 200px) 0 var(--sp-16);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(50% 60% at 50% 0%, rgba(79,70,229,.10), transparent 70%),
        radial-gradient(40% 50% at 80% 30%, rgba(201,169,97,.12), transparent 70%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: var(--sp-5);
    max-width: 880px;
    margin-left: auto; margin-right: auto;
}
.page-hero-chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 6px 14px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(15,18,38,.08);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    font-size: 12px; font-weight: 600;
    color: var(--ink-700);
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-xs);
}
.page-hero-chip .material-symbols-rounded { color: var(--brand); }
.page-hero-actions {
    display: flex; gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-8);
}
.page-hero .lead {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: var(--ink-500);
    max-width: 680px;
    margin: 0 auto var(--sp-8);
}

.prose {
    max-width: 720px; margin: 0 auto;
    font-size: 1.05rem; line-height: 1.75;
    color: var(--ink-700);
}
.prose h2 { font-size: 1.75rem; margin: var(--sp-12) 0 var(--sp-4); }
.prose h3 { font-size: 1.25rem; margin: var(--sp-8) 0 var(--sp-3); }
.prose p { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4) var(--sp-6); }
.prose li { margin-bottom: var(--sp-2); }
.prose a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong { color: var(--ink-900); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE TWEAKS
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .hero-metrics { gap: var(--sp-4); flex-wrap: wrap; }
    .metric-divider { display: none; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC COMPONENTS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.breadcrumb {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: 13px;
    color: var(--ink-400);
    margin-bottom: var(--sp-6);
}
.breadcrumb a { color: var(--ink-500); text-decoration: none; transition: color var(--duration-sm); }
.breadcrumb a:hover { color: var(--ink-900); }
.breadcrumb .material-symbols-rounded { font-size: 14px; color: var(--ink-300); }
.breadcrumb span:not(.material-symbols-rounded) { color: var(--ink-700); font-weight: 500; }

/* Stats strip (about / etc) */
.stats-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
    padding: var(--sp-12);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
}
@media (max-width: 800px) { .stats-strip { grid-template-columns: repeat(2, 1fr); padding: var(--sp-8); gap: var(--sp-8); } }
.stat-item { text-align: center; }
.stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: var(--sp-2);
}
.stat-label {
    display: block;
    font-size: 12px; font-weight: 500;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: .14em;
}

/* Values grid (about) */
.values-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}
@media (max-width: 980px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-xl);
    transition: transform var(--duration-md), box-shadow var(--duration-md);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(79,70,229,.1), rgba(79,70,229,.04));
    color: var(--brand);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-5);
    border: 1px solid rgba(79,70,229,.12);
}
.value-icon .material-symbols-rounded { font-size: 24px; }
.value-card h3 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.value-card p { font-size: 0.95rem; }

/* Steps detailed (how-it-works) */
.steps-detailed {
    display: flex; flex-direction: column;
    gap: var(--sp-6);
    max-width: 880px; margin: 0 auto;
}
.step-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-8);
    padding: var(--sp-10);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-xl);
    transition: transform var(--duration-md), box-shadow var(--duration-md);
    align-items: start;
}
.step-block:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
@media (max-width: 600px) {
    .step-block { grid-template-columns: 1fr; padding: var(--sp-6); gap: var(--sp-4); }
}
.step-block-num {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    background: var(--ink-900);
    color: var(--paper);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.75rem; font-weight: 500;
    letter-spacing: -0.02em;
}
.step-block-content h3 {
    font-size: 1.5rem; margin-bottom: var(--sp-3);
}
.step-block-content p { font-size: 1rem; }

/* Solution / feature mini-CTA card (used at bottom of features & solutions) */
.mini-cta {
    background: var(--ink-900);
    color: var(--paper);
    border-radius: var(--radius-2xl);
    padding: clamp(var(--sp-12), 6vw, var(--sp-20));
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mini-cta::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(60% 60% at 0% 0%, rgba(124,58,237,.4), transparent 60%),
        radial-gradient(50% 50% at 100% 100%, rgba(201,169,97,.25), transparent 60%);
    pointer-events: none;
}
.mini-cta > * { position: relative; z-index: 1; }
.mini-cta h2 {
    color: #fff;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-bottom: var(--sp-4);
}
.mini-cta p {
    color: rgba(255,255,255,.78);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto var(--sp-8);
}
.mini-cta-actions {
    display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap;
}
.mini-cta .btn-outlined {
    border-color: rgba(255,255,255,.3); color: #fff;
}
.mini-cta .btn-outlined:hover { background: #fff; color: var(--ink-900); border-color: #fff; }
.mini-cta .btn-filled {
    background: var(--gold); color: var(--ink-900);
}
.mini-cta .btn-filled:hover { background: var(--gold-soft); }

/* Contact page */
.contact-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    margin-bottom: var(--sp-10);
    align-items: stretch;
}
@media (max-width: 800px) {
    .contact-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}
.contact-info-card {
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-md), box-shadow var(--duration-md), border-color var(--duration-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.contact-info-card > * { width: 100%; }
.contact-info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(79,70,229,.25); }
.contact-info-icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(79,70,229,.1), rgba(79,70,229,.04));
    color: var(--brand);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-5);
    border: 1px solid rgba(79,70,229,.12);
}
.contact-info-icon .material-symbols-rounded { font-size: 24px; }
.contact-info-card h3 { font-size: 1.15rem; margin-bottom: var(--sp-2); }
.contact-info-card p { font-size: 0.9rem; }

.contact-form-card {
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-2xl);
    padding: clamp(var(--sp-10), 5vw, var(--sp-16));
    box-shadow: var(--shadow-md);
    max-width: 760px; margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.contact-form-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(60% 50% at 100% 0%, rgba(79,70,229,.05), transparent 70%);
    pointer-events: none;
}
.contact-form-card > * { position: relative; z-index: 1; }
.contact-form-header { text-align: center; margin-bottom: var(--sp-10); }
.contact-form-header .eyebrow { margin-bottom: var(--sp-3); }
.contact-form-header .eyebrow::before { display: none; }
.contact-form-card h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    margin-bottom: var(--sp-3);
}
.form-lead {
    color: var(--ink-500);
    margin: 0 auto;
    max-width: 480px;
    font-size: 1rem;
}
/* Override .cta-form constraint when nested inside the card */
.contact-form-card .cta-form { max-width: none; }
.contact-form .form-row { gap: var(--sp-4); }
.contact-form { gap: var(--sp-4); }

/* Section spacing — prevent contact-grid touching form card */
.contact-section .contact-grid { margin-bottom: var(--sp-10); }

/* Info card value line (phone / email / address) */
.contact-info-value {
    display: block;
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--ink-100);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    transition: color var(--duration-sm);
    word-break: break-word;
}
.contact-info-card:hover .contact-info-value { color: var(--brand); }
.contact-info-card h3 { margin-bottom: var(--sp-1); }
.contact-info-card > p { margin-bottom: var(--sp-5); }

/* Map */
.map-section { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.map-frame {
    max-width: 1040px;
    margin: 0 auto;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--ink-100);
    background: var(--surface);
}
.map-frame iframe {
    border: 0;
    display: block;
    filter: grayscale(.15) contrast(1.02);
    transition: filter var(--duration-md);
}
.map-frame:hover iframe { filter: grayscale(0) contrast(1); }

/* Careers / job cards */
.jobs-list {
    display: flex; flex-direction: column;
    gap: var(--sp-4);
    max-width: 880px; margin: 0 auto;
}
.job-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-8);
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-xl);
    transition: transform var(--duration-md), box-shadow var(--duration-md), border-color var(--duration-md);
}
.job-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(79,70,229,.2); }
@media (max-width: 700px) { .job-card { grid-template-columns: 1fr; } }
.job-info h3 { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.job-info p { font-size: 0.95rem; margin-bottom: var(--sp-4); }
.job-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.job-tag {
    padding: 4px 12px;
    background: var(--ink-50);
    color: var(--ink-700);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-full);
    font-size: 12px; font-weight: 500;
}
.job-tag-primary {
    background: rgba(79,70,229,.08); color: #3730A3; border-color: rgba(79,70,229,.15);
}
.job-tag-secondary {
    background: rgba(201,169,97,.18); color: #8C6E2F; border-color: rgba(201,169,97,.3);
}

/* FAQ */
.faq-list {
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    max-width: 760px; margin: 0 auto;
}
.faq-item {
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
    transition: border-color var(--duration-sm), box-shadow var(--duration-sm);
}
.faq-item[open] { border-color: rgba(79,70,229,.25); box-shadow: var(--shadow-sm); }
.faq-item summary {
    padding: var(--sp-5) var(--sp-6);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink-900);
    cursor: pointer;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--sp-4);
    transition: color var(--duration-sm);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: 'add';
    font-family: 'Material Symbols Rounded';
    font-size: 22px;
    color: var(--ink-400);
    transition: transform var(--duration-md) var(--ease-out);
    flex-shrink: 0;
}
.faq-item[open] summary::after { content: 'remove'; color: var(--brand); }
.faq-item summary:hover { color: var(--brand); }
.faq-answer {
    padding: 0 var(--sp-6) var(--sp-5);
    border-top: 1px solid var(--ink-100);
    margin-top: 0;
    padding-top: var(--sp-5);
}
.faq-answer p { color: var(--ink-500); font-size: 0.95rem; line-height: 1.7; }

/* Blog */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex; flex-direction: column;
    transition: transform var(--duration-md), box-shadow var(--duration-md), border-color var(--duration-md);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(79,70,229,.25); }
.blog-thumb {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(79,70,229,.18), rgba(79,70,229,.06));
    display: grid; place-items: center;
    color: var(--brand);
    border-bottom: 1px solid var(--ink-100);
}
.blog-thumb .material-symbols-rounded { font-size: 56px; }
.blog-thumb-2 { background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(124,58,237,.06)); color: var(--brand-2); }
.blog-thumb-3 { background: linear-gradient(135deg, rgba(15,118,110,.18), rgba(15,118,110,.05)); color: #0F766E; }
.blog-thumb-4 { background: linear-gradient(135deg, rgba(201,169,97,.30), rgba(201,169,97,.10)); color: #8C6E2F; }
.blog-thumb-5 { background: linear-gradient(135deg, rgba(220,38,38,.18), rgba(220,38,38,.05)); color: #B91C1C; }
.blog-thumb-6 { background: linear-gradient(135deg, rgba(2,132,199,.18), rgba(2,132,199,.05)); color: #0369A1; }
.blog-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.blog-meta {
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: 12px; color: var(--ink-400);
}
.blog-tag {
    padding: 3px 10px;
    background: var(--ink-50);
    color: var(--ink-700);
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 600;
    letter-spacing: .03em;
}
.blog-card h3 { font-size: 1.2rem; line-height: 1.3; margin: var(--sp-1) 0 var(--sp-2); }
.blog-card p { font-size: 0.92rem; flex: 1; }
.blog-link {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    margin-top: var(--sp-3);
    font-size: 13px; font-weight: 600;
    color: var(--brand);
    transition: gap var(--duration-sm);
}
.blog-link .material-symbols-rounded { font-size: 16px; transition: transform var(--duration-sm); }
.blog-card:hover .blog-link { gap: var(--sp-3); }
.blog-card:hover .blog-link .material-symbols-rounded { transform: translateX(2px); }

/* 404 */
.notfound {
    min-height: 100vh;
    display: grid; place-items: center;
    text-align: center;
    padding: var(--sp-20) var(--sp-6);
    position: relative;
    overflow: hidden;
}
.notfound::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(40% 50% at 50% 30%, rgba(79,70,229,.10), transparent 70%),
        radial-gradient(40% 50% at 70% 70%, rgba(201,169,97,.12), transparent 70%);
}
.notfound-content { position: relative; z-index: 1; max-width: 640px; }
.notfound-code {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(7rem, 18vw, 12rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(105deg, var(--brand) 0%, var(--brand-2) 50%, var(--gold) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    margin-bottom: var(--sp-6);
}
.notfound h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--sp-4); }
.notfound p { font-size: 1.05rem; color: var(--ink-500); margin-bottom: var(--sp-8); }

/* Hero text helper (semantic only) */
.hero-text { display: flex; flex-direction: column; }

/* Footer brand column wrapper (semantic only — already styled via parent grid) */
.footer-brand { display: flex; flex-direction: column; }

/* Visitor notification card variant (modifier on .screen-card) */
.visitor-notification {
    border-color: rgba(79,70,229,.18);
    box-shadow: 0 4px 16px -6px rgba(79,70,229,.18);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE REFINEMENTS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Container padding tighter on phones */
@media (max-width: 640px) {
    .container, .container-narrow { padding: 0 var(--sp-5); }
}
@media (max-width: 400px) {
    .container, .container-narrow { padding: 0 var(--sp-4); }
}

/* Section padding scales down */
@media (max-width: 640px) {
    .section { padding: var(--sp-16) 0; }
    .section-header { margin-bottom: var(--sp-10); }
    .section-title { font-size: clamp(1.65rem, 7.5vw, 2.25rem); }
    .section-subtitle { font-size: 1rem; }
}

/* HERO ─ tablet & phone */
@media (max-width: 980px) {
    .hero { padding: 110px 0 var(--sp-16); text-align: center; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-metrics { justify-content: center; }
    .hero-chip { margin: 0 auto; }
    .hero-visual { min-height: auto; padding-top: var(--sp-8); }
}
@media (max-width: 640px) {
    .hero { padding: 96px 0 var(--sp-12); }
    .hero-title {
        font-size: clamp(2.25rem, 11vw, 3rem);
        line-height: 1.02;
        letter-spacing: -0.03em;
    }
    .hero-subtitle { font-size: 1rem; margin-bottom: var(--sp-8); }
    .hero-actions { width: 100%; flex-direction: column; gap: var(--sp-2); }
    .hero-actions .btn { width: 100%; }
    .hero-metrics {
        margin-top: var(--sp-8);
        padding-top: var(--sp-6);
        gap: var(--sp-5);
        flex-wrap: wrap;
        justify-content: center;
    }
    .metric { flex: 0 0 auto; align-items: center; text-align: center; }
    .metric-value { font-size: 1.5rem; }
    .metric-label { font-size: 10px; }
    .metric-divider { display: none; }

    /* Phone mockup scales to viewport */
    .phone-mockup {
        width: min(280px, 78vw);
        height: auto;
        aspect-ratio: 320 / 660;
    }
    .phone-body { border-radius: 40px; padding: 10px; }
    .phone-screen { border-radius: 30px; }
    .phone-dynamic-island { width: 84px; height: 24px; top: 18px; }

    /* Float cards smaller and tucked in safely */
    .float-card { padding: 8px 12px; font-size: 11px; }
    .float-card .material-symbols-rounded { font-size: 14px; }
    .float-card-1 { top: 4%; left: 2%; }
    .float-card-2 { top: 28%; right: 2%; }
    .float-card-3 { bottom: 4%; left: 8%; }

    .hero-orb-1, .hero-orb-2 { width: 220px; height: 220px; filter: blur(50px); }
    .hero-orb-3 { width: 200px; height: 200px; }
}

/* Hide the noise texture on mobile to reduce repaint cost */
@media (max-width: 640px) {
    body::before { opacity: .2; }
}

/* Trust strip wraps cleaner */
@media (max-width: 640px) {
    .trust-strip { padding: var(--sp-8) 0; }
    .trust-logos { gap: var(--sp-5) var(--sp-8); }
    .trust-item { font-size: 14px; }
    .trust-item .material-symbols-rounded { font-size: 18px; }
}

/* Steps track on tablet stays stacked but cleaner */
@media (max-width: 1024px) {
    .steps-track { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* Step blocks (how-it-works detailed) */
@media (max-width: 600px) {
    .step-block { padding: var(--sp-6); gap: var(--sp-4); }
    .step-block-num { width: 48px; height: 48px; font-size: 1.25rem; }
    .step-block-content h3 { font-size: 1.2rem; }
    .step-block-content p { font-size: 0.95rem; }
}

/* Bento cards tighter padding on phones */
@media (max-width: 640px) {
    .bento-card { padding: var(--sp-6); }
    .bento-card h3 { font-size: 1.15rem; }
    .bento-card p { font-size: 0.9rem; }
    .bento-icon-wrap { width: 44px; height: 44px; margin-bottom: var(--sp-4); }
    .bento-icon-wrap .material-symbols-rounded { font-size: 22px; }
    .mini-timeline { flex-direction: column; gap: var(--sp-2); }
    .tl-connector { width: 1px; height: 12px; }
}

/* Solution / why / value / pricing cards */
@media (max-width: 640px) {
    .solution-card, .price-card { padding: var(--sp-7) var(--sp-6); }
    .solution-card h3, .price-card h3 { font-size: 1.25rem; }
    .why-card, .value-card { padding: var(--sp-6); }
    .price-value { font-size: 2.75rem; }
    .price-card-featured { transform: none; }
}

/* Pricing toggle stays visible */
@media (max-width: 480px) {
    .pricing-toggle { gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
    .toggle-label { font-size: 13px; }
}

/* Testimonials */
@media (max-width: 640px) {
    .testimonial-card { padding: var(--sp-6); }
    .testimonial-text { font-size: 1.05rem; }
}

/* Download CTA card */
@media (max-width: 800px) {
    .download-card { padding: var(--sp-10) var(--sp-6); gap: var(--sp-8); border-radius: var(--radius-xl); }
    .download-qr { padding: var(--sp-6); }
    .download-qr .material-symbols-rounded { font-size: 72px; }
}
@media (max-width: 480px) {
    .store-badge { width: 100%; justify-content: center; }
}

/* CTA / contact form card */
@media (max-width: 640px) {
    .cta-card, .contact-form-card { padding: var(--sp-8) var(--sp-6); border-radius: var(--radius-xl); }
    .form-input { font-size: 16px; /* iOS zoom prevention */ }
}

/* Contact info cards */
@media (max-width: 640px) {
    .contact-info-card { padding: var(--sp-6); }
}

/* Job cards: stack action button below */
@media (max-width: 700px) {
    .job-card { padding: var(--sp-6); gap: var(--sp-4); }
    .job-card .btn { width: 100%; }
    .job-info h3 { font-size: 1.15rem; }
}

/* FAQ accordion */
@media (max-width: 640px) {
    .faq-item summary { padding: var(--sp-4) var(--sp-5); font-size: 1rem; }
    .faq-answer { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
}

/* Blog grid → 1 column on phones, smaller thumb */
@media (max-width: 640px) {
    .blog-thumb { aspect-ratio: 16 / 9; }
    .blog-thumb .material-symbols-rounded { font-size: 44px; }
    .blog-body { padding: var(--sp-5); }
}

/* Mini-CTA */
@media (max-width: 640px) {
    .mini-cta { padding: var(--sp-10) var(--sp-6); border-radius: var(--radius-xl); }
    .mini-cta-actions { flex-direction: column; gap: var(--sp-2); }
    .mini-cta-actions .btn { width: 100%; }
}

/* Footer */
@media (max-width: 640px) {
    .footer { padding: var(--sp-12) 0 var(--sp-6); }
    .footer-top { padding-bottom: var(--sp-8); gap: var(--sp-8); }
    .footer-links { gap: var(--sp-6); }
    .footer-col h4 { margin-bottom: var(--sp-3); font-size: 11px; }
    .footer-bottom {
        flex-direction: column; align-items: flex-start;
        gap: var(--sp-4);
        padding-top: var(--sp-6);
    }
    .footer-badges { gap: var(--sp-2); }
}

/* Stats strip */
@media (max-width: 540px) {
    .stats-strip { padding: var(--sp-6); gap: var(--sp-5); border-radius: var(--radius-xl); }
    .stat-value { font-size: 1.75rem; }
    .stat-label { font-size: 10px; }
}

/* Page hero */
@media (max-width: 640px) {
    .page-hero { padding: 96px 0 var(--sp-10); }
    .page-hero h1 {
        font-size: clamp(2rem, 9vw, 2.75rem);
        line-height: 1.05;
    }
    .page-hero .lead { font-size: 1rem; }
    .page-hero-actions { flex-direction: column; gap: var(--sp-2); width: 100%; }
    .page-hero-actions .btn { width: 100%; }
}

/* Ensure inputs don't trigger iOS zoom */
@media (max-width: 640px) {
    input, textarea, select { font-size: 16px !important; }
}

/* Buttons stay tappable (44pt minimum) */
@media (max-width: 640px) {
    .btn { min-height: 48px; padding: 14px 24px; }
    .btn-lg { min-height: 52px; padding: 16px 28px; }
    .nav-cta { min-height: 44px; }
}

/* 404 page on phone */
@media (max-width: 640px) {
    .notfound { min-height: 80vh; }
    .notfound-code { margin-bottom: var(--sp-4); }
}

/* Prose pages (privacy, terms) */
@media (max-width: 640px) {
    .prose { font-size: 1rem; }
    .prose h2 { font-size: 1.4rem; margin: var(--sp-8) 0 var(--sp-3); }
    .prose h3 { font-size: 1.15rem; margin: var(--sp-6) 0 var(--sp-3); }
}