/* AlgoCraftDev — main.css | merged in load order */

/* ─── BASE ─── */

/* --- Design Tokens (legacy + new carbon-black system) --- */
:root {
    /* ── Legacy accent tokens (keep — used throughout components) ── */
    --color-bg:          #050608;
    --color-cyan:        #22d3ee;
    --color-purple:      #a55eea;
    --color-purple-deep: #6a37fc;
    --color-pink:        #ff375f;
    --color-yellow:      #ffae00;
    --color-blue:        #4b7bec;
    --color-green:       #22c55e;
    --color-accent:      #22d3ee;

    /* ── New carbon-black palette tokens ── */
    --bg:              #050608;
    --bg-2:            #070A10;
    --surface:         #0B1020;
    --surface-2:       #0E1630;
    --surface-elevated:#0E1630;
    --border:          #1B2A44;
    --highlight:       rgba(255,255,255,0.07);

    --text:            #F3F6FF;
    --text-2:          #B9C3D9;
    --text-muted:      #7F8AA3;
    --text-dimmed:     #7F8AA3;
    --text-secondary:   #B9C3D9;

    --primary:         #2F80FF;
    --primary-hover:   #1E6BFF;
    --accent-violet:   #8B5CF6;
    --accent:          #8B5CF6;
    --focus:           #22D3EE;

    --success:  #22C55E;
    --warning:  #F59E0B;
    --error:    #EF4444;
    --danger:   #EF4444;

    /* ── Gradient tokens ── */
    --gradient-brand:      linear-gradient(270deg, #6a37fc, #00d2ff, #a855f7, #ec4899, #6a37fc);
    --gradient-brand-size: 400% 400%;
    --gradient-text:       linear-gradient(to right, #a55eea, #4b7bec);
    --gradient-cta:        linear-gradient(135deg, #2F80FF, #8B5CF6);

    /* ── Glass surface tokens ── */
    --glass-bg:           rgba(11, 16, 32, 0.80);
    --glass-border:       rgba(27, 42, 68, 0.45);
    --glass-border-hover: rgba(255, 255, 255, 0.16);
    --glass-top:          rgba(27, 42, 68, 0.70);
    --glass-shadow:       0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
    --glass-blur:         blur(18px) saturate(1.5);
    --glass-blur-webkit:  blur(18px) saturate(1.5);

    /* ── Radii ── */
    --radius-sm:   12px;
    --radius-md:   16px;
    --radius-lg:   20px;
    --radius-xl:   30px;
    --radius-pill: 999px;
}

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

/* --- Body --- */
body {
    background-color: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    transition: opacity 0.45s ease-in-out;
    opacity: 0;
    background-image:
        radial-gradient(ellipse 110% 50% at 50% 100%, rgba(14,16,22,0.90) 0%, transparent 65%),
        radial-gradient(ellipse 80%  40% at 50%   0%, rgba(8,9,14,0.75)  0%, transparent 55%);
    background-attachment: scroll; /* fixed breaks iOS Safari */
}

/* Page load states */
body.fade-in  { opacity: 1; }
body.fade-out { opacity: 0; }
body.loading  { opacity: 0; }

.blob-wrapper {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/*
  LIGHTING MODEL
  ──────────────
  No hard specular circles. Instead, broad diffused light that
  wraps around the curved surface — like a soft studio light
  bouncing off liquid glass.

  Each drop has:
  • Body: dark glass core with wide radial gradient — centre
    slightly warmer/lighter (lit face), edges nearly black
  • Fresnel rim: thin bright edge ring from grazing reflections,
    feathered wide so it reads as a glow not a line
  • Reflection sheen: large, very soft ellipse — like a
    ceiling light reflected in a puddle, blurred to almost
    nothing (filter: blur on the child div)
  • Caustic: wide soft glow beneath/around the drop

  NO sharp white circles. Everything blurred and spread.
*/

/* ── Shared base ── */
.drop {
    position: absolute;
    will-change: transform;
}

/* ── Body — the dark glass mass ── */
.drop-inner {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        /* Fresnel rim — wide feathered glow at the edge */
        radial-gradient(circle,
            transparent                        0%,
            transparent                       70%,
            rgba(0,   0,   4,  0.70)          78%,  /* Snell dark band */
            rgba(145, 162, 188, 0.08)         82%,
            rgba(175, 192, 215, 0.18)         86%,  /* rim peak — softer */
            rgba(155, 172, 198, 0.10)         90%,
            rgba(120, 138, 165, 0.04)         94%,
            transparent                       98%
        ),
        /* Body — dark glass, lit from upper-left */
        radial-gradient(ellipse 75% 70% at 38% 34%,
            rgba(22, 23, 30, 0.82)   0%,   /* lit face */
            rgba(13, 14, 19, 0.92)  35%,
            rgba(6,   7, 11, 0.97)  65%,
            rgba(2,   2,  5, 1.00) 100%
        );
    box-shadow:
        0 32px 80px  rgba(0, 0, 0, 0.75),
        0 12px 30px  rgba(0, 0, 0, 0.55),
        inset 0 -28px 65px rgba(0, 0, 0, 0.65),
        inset 0  14px 40px rgba(18, 20, 28, 0.45);
}

/* ── Reflection sheen — large blurred soft light ──
   This replaces the hard specular. A wide soft ellipse
   blurred heavily so it reads as diffused light wrapping
   around the form, not a circle sitting on top of it.   */
.drop-specular {
    position: absolute;
    inset: -20%;
    border-radius: inherit;
    background:
        /* Main reflection — wide, off-centre ellipse */
        radial-gradient(ellipse 55% 42% at 32% 26%,
            rgba(185, 200, 225, 0.28)  0%,
            rgba(155, 172, 205, 0.14) 30%,
            rgba(120, 140, 175, 0.05) 60%,
            transparent               88%
        ),
        /* Secondary fill light — opposite side, very faint */
        radial-gradient(ellipse 35% 28% at 72% 74%,
            rgba(100, 115, 145, 0.10)  0%,
            rgba(80,  95, 125, 0.04)  45%,
            transparent               80%
        );
    filter: blur(18px);
    mix-blend-mode: screen;
    pointer-events: none;
}

/* ── Caustic — wide ambient glow around the base ── */
.drop-caustic {
    position: absolute;
    inset: -35%;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 70% 40% at 50% 85%,
            rgba(130, 148, 178, 0.10)  0%,
            rgba(100, 118, 150, 0.04) 50%,
            transparent               80%
        );
    filter: blur(22px);
    pointer-events: none;
}

/* ══════════════════════════════════════════════
   PER-DROP SIZING — organic deformed shapes
   Each uses a completely different border-radius
   so none of them look circular
   ══════════════════════════════════════════════ */

/* Drop 1 — large, upper-left, kidney-ish */
.drop-1 {
    width:  820px;
    height: 720px;
    top:  -22%;
    left: -14%;
    border-radius: 62% 38% 54% 46% / 44% 58% 42% 56%;
    animation: dropFloat1 22s ease-in-out infinite alternate;
}

/* Drop 2 — tall + narrow, upper-right, leaning */
.drop-2 {
    width:  460px;
    height: 600px;
    top:   2%;
    right: -8%;
    border-radius: 44% 56% 38% 62% / 58% 36% 64% 42%;
    animation: dropFloat2 28s ease-in-out infinite alternate;
    animation-delay: -9s;
}

/* Drop 3 — wide squashed, lower-left */
.drop-3 {
    width:  740px;
    height: 560px;
    bottom: -16%;
    left:    4%;
    border-radius: 58% 42% 66% 34% / 36% 62% 38% 64%;
    animation: dropFloat3 19s ease-in-out infinite alternate;
    animation-delay: -14s;
}

/* Drop 4 — small irregular, center-right */
.drop-4 {
    width:  320px;
    height: 380px;
    top:   35%;
    right: 12%;
    border-radius: 48% 52% 34% 66% / 64% 38% 62% 36%;
    animation: dropFloat4 16s ease-in-out infinite alternate;
    animation-delay: -5s;
}

/* ── Background ambient ── */
.blob-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 15% 12%,
            rgba(16, 18, 26, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 45% 40% at 88% 82%,
            rgba(13, 14, 20, 0.28) 0%, transparent 68%);
    pointer-events: none;
}

/* ── Edge vignette ── */
.blob-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 82% 78% at 50% 50%,
        transparent 32%,
        rgba(2, 2, 4, 0.65) 100%
    );
    pointer-events: none;
}

/* ── Float animations — organic, slight morph via scale ── */
@keyframes dropFloat1 {
    0%   { transform: translate(  0px,   0px) rotate(0deg)   scale(1.000, 1.000); }
    28%  { transform: translate( 18px,  24px) rotate( 4deg)  scale(1.018, 0.988); }
    62%  { transform: translate( 28px,  10px) rotate(-2deg)  scale(0.992, 1.014); }
    100% { transform: translate(  0px,   0px) rotate(0deg)   scale(1.000, 1.000); }
}
@keyframes dropFloat2 {
    0%   { transform: translate(  0px,   0px) rotate( 0deg)  scale(1.000, 1.000); }
    38%  { transform: translate(-22px,  18px) rotate(-5deg)  scale(1.014, 0.990); }
    72%  { transform: translate(-10px,  32px) rotate( 2deg)  scale(0.986, 1.018); }
    100% { transform: translate(  0px,   0px) rotate( 0deg)  scale(1.000, 1.000); }
}
@keyframes dropFloat3 {
    0%   { transform: translate(  0px,   0px) rotate( 0deg)  scale(1.000, 1.000); }
    42%  { transform: translate( 20px, -22px) rotate( 3deg)  scale(1.016, 0.986); }
    78%  { transform: translate(  8px, -34px) rotate(-2deg)  scale(0.988, 1.016); }
    100% { transform: translate(  0px,   0px) rotate( 0deg)  scale(1.000, 1.000); }
}
@keyframes dropFloat4 {
    0%   { transform: translate(  0px,   0px) rotate(  0deg) scale(1.000, 1.000); }
    32%  { transform: translate(-16px, -20px) rotate( 6deg)  scale(1.024, 0.982); }
    68%  { transform: translate( 12px, -14px) rotate(-3deg)  scale(0.980, 1.022); }
    100% { transform: translate(  0px,   0px) rotate(  0deg) scale(1.000, 1.000); }
}

/* --- Shared Gradient Animation --- */
@keyframes gradientShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* --- Purple Gradient Text --- */
.purple-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 4px 10px rgba(168, 85, 247, 0.4));
    font-weight: 800;
}

/* --- Badge --- */
.badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 50px;
    color: var(--accent);
    font-size: 0.8rem;
    margin-bottom: 20px;
}

/* --- Skip Link --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    padding: 12px 24px;
    background: var(--focus);
    outline: 2px solid var(--focus);
    color: #000;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 0 0 12px 12px;
    text-decoration: none;
    transition: top 0.3s ease;
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-delay:           0ms    !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior: auto !important;
    }

    .drop-1, .drop-2, .drop-3, .drop-4 { animation: none !important; }

    .section-dots span    { animation: none !important; opacity: 0.5; }
    .section-intro::after { animation: none !important; background: var(--color-purple-deep); }

    .project-btn,
    .nav-links .nav-btn,
    .send-btn,
    .tier-note-icon,
    .tier-highlight,
    .footer-logo,
    .pulsing-dot { animation: none !important; }
}

/* ─── NAVBAR ─── */

.navbar {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

.logo {
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: none;
    font-family: inherit;
    padding: 0;
    line-height: inherit;
}

.logo:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.nav-links {
    list-style: none;
    display: flex;
    font-size: 1rem;
    gap: 13px;
    align-items: center;
}

.nav-links a {
    position: relative;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    display: block;
    padding-bottom: 4px;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-purple-deep), var(--color-cyan));
    transition: width 0.3s ease, left 0.3s ease;
    border-radius: 2px;
}

.nav-links a:hover::after {
    width: 100%;
    left: 0;
}

.nav-links a.nav-btn::after {
    display: none;
}

.nav-links .nav-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background: var(--gradient-brand);
    background-size: var(--gradient-brand-size);
    color: white;
    font-size: 15px;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: gradientShift 8s ease infinite;
}

.nav-links .nav-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(106, 55, 252, 0.5);
}

.menu-toggle,
.menu-close {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

/* FIX: Added focus-visible for menu-close (accessibility) */
.menu-close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 10px;
}

/* Custom page nav */
.custom-nav {
    max-width: 2000px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

button.pill-action {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    line-height: inherit;
}

@media screen and (max-width: 768px) {

    /* FIX: custom-nav also needs responsive handling */
    .custom-nav {
        padding: 0.85rem 1.25rem;
        gap: 10px;
    }

    .custom-nav .logo {
        font-size: 1.1rem;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.3s ease, opacity 0.2s ease, visibility 0.2s ease;
        z-index: 2001;
        position: relative;
        opacity: 1;
        visibility: visible;
    }

    .menu-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .menu-toggle i {
        width: 20px;
        height: 20px;
    }

    .menu-toggle.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* FIX: backdrop z-index was -1, now uses a proper stacking context */
    .nav-wrapper::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: -1;
        pointer-events: none;
    }

    .nav-wrapper.active::before {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2000;
        background: rgba(13, 13, 21, 0.95);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 0;
        display: flex;
        flex-direction: column;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease,
            visibility 0.3s ease;
        will-change: transform, opacity;
        box-shadow: none;
    }

    .nav-wrapper.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
            0 0 1px rgba(255, 255, 255, 0.05);
    }

    .menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.3s ease;
        z-index: 2002;
    }

    .menu-close:hover {
        background: rgba(255, 55, 95, 0.1);
        border-color: rgba(255, 55, 95, 0.2);
        color: var(--color-pink);
    }

    .menu-close i {
        width: 18px;
        height: 18px;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 60px 24px 24px;
        width: 100%;
    }

    .nav-links li {
        width: 100%;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .nav-wrapper.active .nav-links li {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-wrapper.active .nav-links li:nth-child(1) {
        transition-delay: 0.06s;
    }

    .nav-wrapper.active .nav-links li:nth-child(2) {
        transition-delay: 0.10s;
    }

    .nav-wrapper.active .nav-links li:nth-child(3) {
        transition-delay: 0.14s;
    }

    .nav-wrapper.active .nav-links li:nth-child(4) {
        transition-delay: 0.18s;
    }

    .nav-wrapper.active .nav-links li:nth-child(5) {
        transition-delay: 0.22s;
    }

    .nav-wrapper.active .nav-links li:nth-child(6) {
        transition-delay: 0.26s;
    }

    .nav-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        font-size: 0.95rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.75);
        border-radius: 10px;
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .nav-links a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-links a::after {
        display: none;
    }

    .nav-links li:last-child {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav-links .nav-btn {
        width: 100%;
        padding: 12px 24px;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
        text-align: center;
        justify-content: center;
    }
}

/* ─── HERO ─── */

.welcome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 100px;
}

.welcome p {
    font-size: 18px;
    max-width: 780px;
    text-align: center;
    color: white;
}

.project-btn {
    margin-top: 4rem;
    padding: 18px 40px;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    display: inline-block;
    background: var(--gradient-brand);
    background-size: var(--gradient-brand-size);
    color: white;
    font-weight: bold;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: gradientShift 8s ease infinite;
}

.project-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(106, 55, 252, 0.5);
}

.hero-3d {
    /* FIX: clamp() prevents overflow on mid-size screens */
    font-size: clamp(2.8rem, 8vw, 6.5rem);
    margin-bottom: 13px;
    text-align: center;
    color: white;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-line-1 {
    display: block;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 0 rgba(106, 55, 252, 0.35),
        0 4px 0 rgba(106, 55, 252, 0.28),
        0 6px 0 rgba(106, 55, 252, 0.2),
        0 8px 0 rgba(106, 55, 252, 0.12),
        0 10px 0 rgba(106, 55, 252, 0.06),
        0 0 20px rgba(106, 55, 252, 0.15),
        0 12px 25px rgba(0, 0, 0, 0.5),
        0 20px 50px rgba(106, 55, 252, 0.2),
        0 30px 80px rgba(106, 55, 252, 0.1);
    transition: text-shadow 0.4s ease, transform 0.4s ease;
}

.hero-line-1:hover {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 0 rgba(106, 55, 252, 0.45),
        0 4px 0 rgba(106, 55, 252, 0.38),
        0 6px 0 rgba(106, 55, 252, 0.3),
        0 8px 0 rgba(106, 55, 252, 0.2),
        0 10px 0 rgba(106, 55, 252, 0.12),
        0 0 30px rgba(106, 55, 252, 0.25),
        0 15px 30px rgba(0, 0, 0, 0.6),
        0 25px 60px rgba(106, 55, 252, 0.3),
        0 40px 100px rgba(106, 55, 252, 0.15);
    transform: translateY(-3px);
}

.hero-line-2 {
    display: block;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
    filter:
        drop-shadow(0 2px 6px rgba(106, 55, 252, 0.5)) drop-shadow(0 8px 25px rgba(168, 85, 247, 0.6)) drop-shadow(0 16px 50px rgba(106, 55, 252, 0.25)) drop-shadow(0 24px 80px rgba(106, 55, 252, 0.12));
    transition: filter 0.4s ease, transform 0.4s ease;
}

.hero-line-2:hover {
    filter:
        drop-shadow(0 2px 8px rgba(106, 55, 252, 0.6)) drop-shadow(0 10px 30px rgba(168, 85, 247, 0.75)) drop-shadow(0 20px 60px rgba(106, 55, 252, 0.35)) drop-shadow(0 30px 100px rgba(106, 55, 252, 0.18));
    transform: translateY(-3px);
}

.value-section {
    padding: 60px 20px 50px;
}

.value-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Color tokens per card ── */
.value-box--cyan   { --val-rgb: 0, 210, 255;   --val-color: #00d2ff; }
.value-box--purple { --val-rgb: 165, 94, 234;  --val-color: #a55eea; }
.value-box--yellow { --val-rgb: 255, 174, 0;   --val-color: #ffae00; }

@keyframes valShimmer {
    from { transform: translateX(-120%) skewX(-14deg); }
    to   { transform: translateX(260%)  skewX(-14deg); }
}

.value-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 340px;
    padding: 32px 24px 28px;
    text-align: center;
    border-radius: var(--radius-lg);
    color: white;
    background: linear-gradient(
        155deg,
        rgba(var(--val-rgb, 255,255,255), 0.06) 0%,
        rgba(11, 16, 32, 0.82) 60%,
        rgba(var(--val-rgb, 255,255,255), 0.03) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(var(--val-rgb, 27,42,68), 0.20);
    border-top: 2px solid rgba(var(--val-rgb, 27,42,68), 0.55);
    box-shadow:
        0 4px 28px rgba(0,0,0,0.30),
        0 0 18px rgba(var(--val-rgb, 0,0,0), 0.06),
        inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    transition: transform 0.35s ease, border-color 0.35s ease,
                box-shadow 0.35s ease, background 0.35s ease;
}

/* Shimmer sweep on hover */
.value-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 55%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(var(--val-rgb, 255,255,255), 0.07) 50%,
        transparent 75%
    );
    transform: translateX(-120%) skewX(-14deg);
    pointer-events: none;
    z-index: 0;
}
.value-box:hover::before {
    animation: valShimmer 0.6s ease forwards;
}

/* Bottom edge glow */
.value-box::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--val-rgb, 255,255,255), 0.40), transparent);
    pointer-events: none;
}

.value-box:hover {
    transform: translateY(-7px);
    border-color: rgba(var(--val-rgb, 255,255,255), 0.30);
    border-top-color: rgba(var(--val-rgb, 255,255,255), 0.60);
    box-shadow:
        0 16px 44px rgba(0,0,0,0.38),
        0 0 30px rgba(var(--val-rgb, 0,0,0), 0.16),
        inset 0 1px 0 rgba(255,255,255,0.09);
}

.value-icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    border: 1px solid rgba(var(--val-rgb, 255,255,255), 0.20);
    background: rgba(var(--val-rgb, 255,255,255), 0.08);
}

.value-box:hover .value-icon {
    transform: scale(1.10) rotate(-4deg);
    box-shadow: 0 0 24px rgba(var(--val-rgb, 255,255,255), 0.35);
}

.value-icon i {
    width: 22px;
    height: 22px;
    color: var(--val-color);
}

/* ── Big stat number ── */
.value-stat {
    position: relative;
    z-index: 1;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
    color: var(--val-color);
    letter-spacing: -0.02em;
    text-shadow: 0 0 22px rgba(var(--val-rgb), 0.40);
}

.value-stat span {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--val-rgb), 0.65);
    margin-left: 3px;
    vertical-align: middle;
}

.value-box h2 {
    position: relative;
    z-index: 1;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
    color: #fff;
}

.value-box p {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ─── SECTIONS ─── */

.section-intro {
    position: relative;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-intro-full {
    grid-column: 1 / -1;
    margin-bottom: 40px;
}

.section-intro::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    margin: 20px auto 0;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand);
    background-size: var(--gradient-brand-size);
    animation: gradientShift 8s ease infinite;
}

.section-intro h2 {
    position: relative;
    display: inline-block;
}

.section-intro h2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(106, 55, 252, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    filter: blur(30px);
}

.section-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}

.section-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: dotPulse 3s ease-in-out infinite;
}

.section-dots span:nth-child(1) {
    background: var(--color-cyan);
    animation-delay: 0s;
}

.section-dots span:nth-child(2) {
    background: #a855f7;
    animation-delay: 0.3s;
}

.section-dots span:nth-child(3) {
    background: #ec4899;
    animation-delay: 0.6s;
}

@keyframes dotPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.section-intro .section-sub {
    max-width: 650px;
    margin: 0 auto;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1rem;
}

.section-intro .badge {
    margin-bottom: 16px;
}

/* FIX: Use clamp() so large headings scale on mid screens */
.section-intro.hero-size h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.section-intro.large-size h2 {
    font-size: clamp(2.5rem, 6vw, 5rem);
}

.about-section {
    color: white;
    padding: 100px 6% 80px;
}

/* ── Centered header ── */
.about-header {
    max-width: 700px;
    margin: 0 auto 56px;
    text-align: center;
}

.about-lead {
    color: var(--text-muted);
    font-size: 0.97rem;
    line-height: 1.7;
    margin-top: 14px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Bento grid ── */
.bento-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Card 1: tall — spans both rows on the left */
.bento-card--1 {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Card 2: top-right area */
.bento-card--2 {
    grid-column: 2;
    grid-row: 1;
}

/* Card 3: middle-right */
.bento-card--3 {
    grid-column: 3;
    grid-row: 1;
}

/* Card 4: wide bottom spanning right two columns */
.bento-card--4 {
    grid-column: 2 / 4;
    grid-row: 2;
}

/* ── Base bento card ── */
.bento-card {
    position: relative;
    overflow: hidden;
    padding: 32px 28px 28px;
    border-radius: 20px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur-webkit);
    border: 1px solid var(--glass-border);
    border-top: 1px solid var(--glass-top);
    box-shadow: var(--glass-shadow);
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: background 0.35s ease, border-color 0.35s ease,
                box-shadow 0.35s ease, transform 0.35s ease;
}

/* ── Cursor spotlight — follows mouse inside card ── */
.bento-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    background: radial-gradient(
        400px circle at var(--bento-x, 50%) var(--bento-y, 50%),
        var(--bento-glow, rgba(255,255,255,0.06)) 0%,
        transparent 70%
    );
}

.bento-card:hover::after { opacity: 1; }

/* Per-card spotlight color */
.bento-card--1 { --bento-glow: rgba(0, 210, 255, 0.10); }
.bento-card--2 { --bento-glow: rgba(165, 94, 234, 0.10); }
.bento-card--3 { --bento-glow: rgba(255, 55, 95, 0.10); }
.bento-card--4 { --bento-glow: rgba(255, 174, 0, 0.10); }

.bento-card:hover {
    transform: translateY(-3px);
    background: rgba(14, 20, 40, 0.88);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(255,255,255,0.05) inset;
}

/* ── Directional entrance animations ── */
.bento-from-left  { opacity: 0; transform: translateX(-40px); }
.bento-from-right { opacity: 0; transform: translateX(40px); }
.bento-from-top   { opacity: 0; transform: translateY(-32px); }
.bento-from-bottom{ opacity: 0; transform: translateY(32px); }

.bento-card.bento-visible {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ── Per-card accent colors ── */
.bento-card--1 { border-top-color: rgba(0, 210, 255, 0.4); }
.bento-card--1:hover {
    border-top-color: rgba(0, 210, 255, 0.75);
    box-shadow: 0 8px 40px rgba(0, 210, 255, 0.07), inset 0 0 0 1px rgba(0,210,255,0.07);
    background: rgba(0, 210, 255, 0.025);
}

.bento-card--2 { border-top-color: rgba(165, 94, 234, 0.4); }
.bento-card--2:hover {
    border-top-color: rgba(165, 94, 234, 0.75);
    box-shadow: 0 8px 40px rgba(165, 94, 234, 0.07), inset 0 0 0 1px rgba(165,94,234,0.07);
    background: rgba(165, 94, 234, 0.025);
}

.bento-card--3 { border-top-color: rgba(255, 55, 95, 0.4); }
.bento-card--3:hover {
    border-top-color: rgba(255, 55, 95, 0.75);
    box-shadow: 0 8px 40px rgba(255, 55, 95, 0.07), inset 0 0 0 1px rgba(255,55,95,0.07);
    background: rgba(255, 55, 95, 0.025);
}

.bento-card--4 { border-top-color: rgba(255, 174, 0, 0.4); }
.bento-card--4:hover {
    border-top-color: rgba(255, 174, 0, 0.75);
    box-shadow: 0 8px 40px rgba(255, 174, 0, 0.07), inset 0 0 0 1px rgba(255,174,0,0.07);
    background: rgba(255, 174, 0, 0.025);
}

/* ── Faded background number — hidden (about is not a numbered sequence) ── */
.bento-num {
    display: none;
}

.bento-card:hover .bento-num {
    display: none;
}

/* ── Icon ── */
.bento-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    margin-bottom: 20px;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.bento-icon i { width: 22px; height: 22px; }

.bento-card--1:hover .bento-icon {
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.35);
    transform: scale(1.1) rotate(-4deg);
    background: rgba(0, 210, 255, 0.14);
}
.bento-card--2:hover .bento-icon {
    box-shadow: 0 0 24px rgba(165, 94, 234, 0.35);
    transform: scale(1.1) rotate(-4deg);
    background: rgba(165, 94, 234, 0.14);
}
.bento-card--3:hover .bento-icon {
    box-shadow: 0 0 24px rgba(255, 55, 95, 0.35);
    transform: scale(1.1) rotate(-4deg);
    background: rgba(255, 55, 95, 0.14);
}
.bento-card--4:hover .bento-icon {
    box-shadow: 0 0 24px rgba(255, 174, 0, 0.35);
    transform: scale(1.1) rotate(-4deg);
    background: rgba(255, 174, 0, 0.14);
}

/* ── Text ── */
.bento-card h3 {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.bento-card--1 h3 { font-size: 1.25rem; }

.bento-card p {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 18px;
}

/* ── Tag pill ── */
.bento-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-self: flex-start;
    margin-top: auto;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Shimmer sweep on card hover */
.bento-tag::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,0.18) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: none;
}

.bento-card:hover .bento-tag::after {
    transform: translateX(100%);
    transition: transform 0.55s ease;
}

.bento-card:hover .bento-tag {
    transform: translateY(-1px);
}

/* Card 4 horizontal layout on desktop — icon + text side by side */
.bento-card--4 {
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    flex-wrap: wrap;
}

.bento-card--4 .bento-icon { margin-bottom: 0; flex-shrink: 0; }

.bento-card--4 .bento-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bento-card--4 h3 { margin-bottom: 8px; }
.bento-card--4 p  { margin-bottom: 14px; }

/* Icon box color aliases (reuse from existing) */
.cyan-bg   { color: var(--color-cyan);   background: rgba(0, 210, 255, 0.08);   border-color: rgba(0, 210, 255, 0.15); }
.purple-bg { color: var(--color-purple); background: rgba(165, 94, 234, 0.08);  border-color: rgba(165, 94, 234, 0.15); }
.red-bg    { color: var(--color-pink);   background: rgba(255, 55, 95, 0.08);   border-color: rgba(255, 55, 95, 0.15); }
.yellow-bg { color: var(--color-yellow); background: rgba(255, 174, 0, 0.08);   border-color: rgba(255, 174, 0, 0.15); }

/* ── Stagger delays for entrance ── */
.bento-card--1 { transition-delay: 0ms; }
.bento-card--2 { transition-delay: 100ms; }
.bento-card--3 { transition-delay: 180ms; }
.bento-card--4 { transition-delay: 260ms; }

/* Keep feature-item styles intact for mobile fallback */
.feature-item {
    counter-increment: feat;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 20px 24px;
    border-radius: var(--radius-md);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(27,42,68,0.40);
    border-top-width: 2px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255,255,255,0.04) inset;
    transition: background 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease, transform 0.3s ease;
}

.feature-item:hover {
    background: rgba(20, 20, 36, 0.68);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-3px);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.09) inset;
}

.services-section {
    padding: 100px 5%;
    text-align: center;
    color: white;
}

.services-header h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 15px;
}

.services-header p {
    max-width: 700px;
    margin: 0 auto 60px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Service card shimmer animations ── */
@keyframes svcShimmerDefault {
    0%   { transform: translateX(-120%) skewX(-14deg); }
    100% { transform: translateX(240%) skewX(-14deg); }
}
@keyframes svcShimmerYellow {
    0%   { transform: translateX(-120%) skewX(-14deg); }
    100% { transform: translateX(240%) skewX(-14deg); }
}
@keyframes svcShimmerActive {
    0%   { transform: translateX(-120%) skewX(-14deg); }
    100% { transform: translateX(240%) skewX(-14deg); }
}
@keyframes svcActivePulse {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 1; }
}

/* ── Base service card — matches inquiry card glass style ── */
.service-card {
    position: relative;
    background: linear-gradient(
        135deg,
        rgba(11, 16, 32, 0.82) 0%,
        rgba(9, 13, 26, 0.88) 50%,
        rgba(11, 16, 32, 0.80) 100%
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(27,42,68,0.40);
    border-top: 2px solid rgba(27,42,68,0.65);
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.24),
        0 0 12px rgba(99, 55, 220, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    transition: transform 0.3s ease, border-color 0.3s ease,
                background 0.3s ease, box-shadow 0.3s ease;
}

/* Shimmer sweep pseudo — fires on hover + mobile centre */
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(180, 140, 255, 0.07) 50%,
        transparent 75%
    );
    transform: translateX(-120%) skewX(-14deg);
    pointer-events: none;
    z-index: 1;
}
.service-card:hover::before,
.service-card.shimmer-play::before {
    animation: svcShimmerDefault 0.65s ease forwards;
}

/* Bottom glow line */
.service-card::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.35), transparent);
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    animation: svcActivePulse 4s ease-in-out infinite;
}

.service-card:hover {
    transform: translateY(-7px);
    background: linear-gradient(
        135deg,
        rgba(100, 50, 220, 0.11) 0%,
        rgba(24, 22, 44, 0.70) 50%,
        rgba(24, 100, 180, 0.09) 100%
    );
    border-color: rgba(167, 139, 250, 0.30);
    border-top-color: rgba(167, 139, 250, 0.50);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.30),
        0 0 20px rgba(99, 55, 220, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

/* ── Active / selected state — per-service colored shimmer ── */
.service-card.active {
    border-color: var(--svc-active-color, #22d3ee);
    border-top-color: var(--svc-active-color, #22d3ee);
    background: linear-gradient(
        135deg,
        var(--svc-active-bg-a, rgba(20, 60, 80, 0.18)) 0%,
        rgba(18, 18, 34, 0.72) 50%,
        var(--svc-active-bg-b, rgba(20, 60, 80, 0.12)) 100%
    );
    box-shadow:
        0 0 32px var(--svc-active-glow, rgba(34, 211, 238, 0.20)),
        0 4px 20px rgba(0, 0, 0, 0.30),
        0 1px 0 rgba(255, 255, 255, 0.09) inset;
}
.service-card.active::before {
    background: linear-gradient(
        105deg,
        transparent 25%,
        var(--svc-active-shimmer, rgba(34, 211, 238, 0.12)) 50%,
        transparent 75%
    );
}
.service-card.active.shimmer-play::before {
    animation: svcShimmerActive 0.75s ease forwards;
}
.service-card.active::after {
    background: linear-gradient(90deg, transparent, var(--svc-active-color, #22d3ee), transparent);
    opacity: 1;
    animation: svcActivePulse 2.4s ease-in-out infinite;
}

/* Per-service active token sets */
.service-card[data-id="business"].active    { --svc-active-color:#ffae00; --svc-active-glow:rgba(255,174,0,0.22);   --svc-active-shimmer:rgba(255,200,40,0.16); --svc-active-bg-a:rgba(50,38,0,0.20); --svc-active-bg-b:rgba(40,30,0,0.14); }
.service-card[data-id="landing"].active     { --svc-active-color:#22d3ee; --svc-active-glow:rgba(34,211,238,0.20);  --svc-active-shimmer:rgba(34,211,238,0.13); --svc-active-bg-a:rgba(0,50,70,0.18);  --svc-active-bg-b:rgba(0,40,60,0.12); }
.service-card[data-id="ecommerce"].active   { --svc-active-color:#a78bfa; --svc-active-glow:rgba(167,139,250,0.20); --svc-active-shimmer:rgba(167,139,250,0.13); --svc-active-bg-a:rgba(60,30,120,0.18); --svc-active-bg-b:rgba(50,25,100,0.12); }
.service-card[data-id="booking"].active     { --svc-active-color:#34d399; --svc-active-glow:rgba(52,211,153,0.20);  --svc-active-shimmer:rgba(52,211,153,0.13); --svc-active-bg-a:rgba(0,55,40,0.18);  --svc-active-bg-b:rgba(0,45,35,0.12); }
.service-card[data-id="portfolio"].active   { --svc-active-color:#f472b6; --svc-active-glow:rgba(244,114,182,0.20); --svc-active-shimmer:rgba(244,114,182,0.13); --svc-active-bg-a:rgba(80,20,55,0.18);  --svc-active-bg-b:rgba(65,15,45,0.12); }
.service-card[data-id="webapp"].active      { --svc-active-color:#60a5fa; --svc-active-glow:rgba(96,165,250,0.20);  --svc-active-shimmer:rgba(96,165,250,0.13); --svc-active-bg-a:rgba(15,40,90,0.18);  --svc-active-bg-b:rgba(10,30,75,0.12); }
.service-card[data-id="redesign"].active    { --svc-active-color:#fb923c; --svc-active-glow:rgba(251,146,60,0.20);  --svc-active-shimmer:rgba(251,146,60,0.13); --svc-active-bg-a:rgba(70,28,0,0.18);  --svc-active-bg-b:rgba(58,22,0,0.12); }
.service-card[data-id="management"].active  { --svc-active-color:#a78bfa; --svc-active-glow:rgba(167,139,250,0.20); --svc-active-shimmer:rgba(167,139,250,0.13); --svc-active-bg-a:rgba(60,30,120,0.18); --svc-active-bg-b:rgba(50,25,100,0.12); }

/* ── Business / popular card — golden amber glow ── */
.service-card.popular {
    padding-top: 52px;
    border-top-color: rgba(255, 174, 0, 0.55);
    border-color: rgba(255, 174, 0, 0.20);
    background: linear-gradient(
        135deg,
        rgba(60, 42, 0, 0.22) 0%,
        rgba(20, 18, 10, 0.60) 50%,
        rgba(50, 35, 0, 0.16) 100%
    );
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.24),
        0 0 20px rgba(255, 174, 0, 0.10),
        0 1px 0 rgba(255, 220, 80, 0.10) inset;
    --hover-color: #ffae00;
    --hover-shadow: rgba(255, 174, 0, 0.28);
}
.service-card.popular::before {
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(255, 210, 60, 0.11) 50%,
        transparent 75%
    );
}
.service-card.popular:hover::before {
    animation: svcShimmerYellow 0.65s ease forwards;
}
.service-card.popular::after {
    background: linear-gradient(90deg, transparent, rgba(255, 174, 0, 0.50), transparent);
    opacity: 0.75;
    animation: svcActivePulse 3s ease-in-out infinite;
}
.service-card.popular:hover {
    border-color: rgba(255, 174, 0, 0.45);
    border-top-color: rgba(255, 200, 50, 0.65);
    background: linear-gradient(
        135deg,
        rgba(70, 50, 0, 0.28) 0%,
        rgba(24, 22, 10, 0.72) 50%,
        rgba(60, 42, 0, 0.20) 100%
    );
}

.service-icon {
    font-size: 2rem;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.service-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.service-card:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
    border-color: var(--focus);
}

.process-section {
    padding: 80px 10%;
    color: white;
    text-align: center;
}

.process-header h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 10px;
}

.process-header p {
    color: var(--text-muted);
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Timeline track ── */
.process-steps {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

/* No vertical spine — clean layout */

/* ── Step cards ── */
.step-card {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 28px 28px 28px 24px;
    border-radius: 18px;
    background: var(--surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(27,42,68,0.40);
    border-top: 1px solid rgba(27,42,68,0.60);
    box-shadow: 0 4px 22px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
    border-left-width: 3px;
    width: 100%;
    text-align: left;
    transition: background 0.45s ease, border-color 0.45s ease,
                box-shadow 0.45s ease, transform 0.45s ease,
                opacity 0.45s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Shimmer sweep pseudo-element — fires when .is-active is added */
.step-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.055) 50%,
        transparent 80%
    );
    transform: translateX(-110%);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.step-card.is-active::before {
    animation: stepShimmer 0.7s ease forwards;
}

@keyframes stepShimmer {
    from { transform: translateX(-110%); }
    to   { transform: translateX(110%); }
}

/* Active card — glows and lifts */
.step-card.is-active {
    transform: translateX(5px);
    opacity: 1 !important;
}

/* Dim cards that are not active (when any card is active) */
.process-steps.has-active .step-card:not(.is-active) {
    opacity: 0.45;
    transform: translateX(0) scale(0.99);
}

/* Per-step active border + bg + shadow */
.step-card:nth-child(1).is-active {
    border-left-color: rgba(0, 210, 255, 1);
    background: rgba(0, 210, 255, 0.05);
    box-shadow: 0 6px 40px rgba(0, 210, 255, 0.1),
                inset 0 0 0 1px rgba(0,210,255,0.08);
}
.step-card:nth-child(3).is-active {
    border-left-color: rgba(165, 94, 234, 1);
    background: rgba(165, 94, 234, 0.05);
    box-shadow: 0 6px 40px rgba(165, 94, 234, 0.1),
                inset 0 0 0 1px rgba(165,94,234,0.08);
}
.step-card:nth-child(5).is-active {
    border-left-color: rgba(255, 55, 95, 1);
    background: rgba(255, 55, 95, 0.05);
    box-shadow: 0 6px 40px rgba(255, 55, 95, 0.1),
                inset 0 0 0 1px rgba(255,55,95,0.08);
}
.step-card:nth-child(7).is-active {
    border-left-color: rgba(255, 174, 0, 1);
    background: rgba(255, 174, 0, 0.05);
    box-shadow: 0 6px 40px rgba(255, 174, 0, 0.1),
                inset 0 0 0 1px rgba(255,174,0,0.08);
}

/* Active icon glow */
.step-card:nth-child(1).is-active .cyan-glow   { box-shadow: 0 0 28px rgba(0, 210, 255, 0.45); transform: scale(1.08) rotate(-4deg); }
.step-card:nth-child(3).is-active .purple-glow { box-shadow: 0 0 28px rgba(165, 94, 234, 0.45); transform: scale(1.08) rotate(-4deg); }
.step-card:nth-child(5).is-active .pink-glow   { box-shadow: 0 0 28px rgba(255, 55, 95, 0.45); transform: scale(1.08) rotate(-4deg); }
.step-card:nth-child(7).is-active .yellow-glow { box-shadow: 0 0 28px rgba(255, 174, 0, 0.45); transform: scale(1.08) rotate(-4deg); }

/* Tag shimmer on active */
.step-card.is-active .step-tag::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
    animation: stepShimmer 0.8s 0.15s ease forwards;
    border-radius: inherit;
}

.step-tag {
    position: relative;
    overflow: hidden;
}

/* Big faded step number — background watermark */
.step-card::after {
    content: attr(data-step);
    position: absolute;
    bottom: -18px;
    right: 12px;
    font-size: 7rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.025);
    pointer-events: none;
    user-select: none;
    transition: color 0.3s ease;
}

.step-card:hover::after {
    color: rgba(255, 255, 255, 0.05);
}

/* Per-step colored left border */
.step-card:nth-child(1)  { border-left-color: rgba(0, 210, 255, 0.5); }
.step-card:nth-child(3)  { border-left-color: rgba(165, 94, 234, 0.5); }
.step-card:nth-child(5)  { border-left-color: rgba(255, 55, 95, 0.5); }
.step-card:nth-child(7)  { border-left-color: rgba(255, 174, 0, 0.5); }

/* Per-step hover */
.step-card:nth-child(1):hover {
    border-left-color: rgba(0, 210, 255, 0.9);
    background: rgba(0, 210, 255, 0.03);
    box-shadow: 0 4px 32px rgba(0, 210, 255, 0.07), inset 0 0 0 1px rgba(0,210,255,0.06);
    transform: translateY(-2px);
}
.step-card:nth-child(3):hover {
    border-left-color: rgba(165, 94, 234, 0.9);
    background: rgba(165, 94, 234, 0.03);
    box-shadow: 0 4px 32px rgba(165, 94, 234, 0.07), inset 0 0 0 1px rgba(165,94,234,0.06);
    transform: translateY(-2px);
}
.step-card:nth-child(5):hover {
    border-left-color: rgba(255, 55, 95, 0.9);
    background: rgba(255, 55, 95, 0.03);
    box-shadow: 0 4px 32px rgba(255, 55, 95, 0.07), inset 0 0 0 1px rgba(255,55,95,0.06);
    transform: translateY(-2px);
}
.step-card:nth-child(7):hover {
    border-left-color: rgba(255, 174, 0, 0.9);
    background: rgba(255, 174, 0, 0.03);
    box-shadow: 0 4px 32px rgba(255, 174, 0, 0.07), inset 0 0 0 1px rgba(255,174,0,0.06);
    transform: translateY(-2px);
}

/* ── Cursor spotlight span (injected by JS) ── */
.step-spotlight {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    background: radial-gradient(
        380px circle at var(--step-x, 50%) var(--step-y, 50%),
        var(--step-glow, rgba(255,255,255,0.06)) 0%,
        transparent 70%
    );
    z-index: 0;
}

.step-card:hover .step-spotlight { opacity: 1; }
.step-card.is-active .step-spotlight { opacity: 0.7; }

/* Per-step spotlight colors */
.step-card:nth-child(1) { --step-glow: rgba(0, 210, 255, 0.09); }
.step-card:nth-child(3) { --step-glow: rgba(165, 94, 234, 0.09); }
.step-card:nth-child(5) { --step-glow: rgba(255, 55, 95, 0.09); }
.step-card:nth-child(7) { --step-glow: rgba(255, 174, 0, 0.09); }

/* ── Step number — small badge top-right ── */
.step-number {
    font-size: 0.62rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.18);
    position: absolute;
    top: 14px;
    right: 18px;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

/* ── Step icon — larger, solid coloured background ── */
.step-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.step-icon i {
    width: 20px;
    height: 20px;
}

.cyan-glow {
    color: var(--color-cyan);
    background: rgba(0, 210, 255, 0.1);
    border-color: rgba(0, 210, 255, 0.2);
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.12);
}
.step-card:nth-child(1):hover .cyan-glow {
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.3);
    transform: scale(1.06);
}

.purple-glow {
    color: var(--color-purple);
    background: rgba(165, 94, 234, 0.1);
    border-color: rgba(165, 94, 234, 0.2);
    box-shadow: 0 0 16px rgba(165, 94, 234, 0.12);
}
.step-card:nth-child(3):hover .purple-glow {
    box-shadow: 0 0 24px rgba(165, 94, 234, 0.3);
    transform: scale(1.06);
}

.pink-glow {
    color: var(--color-pink);
    background: rgba(255, 55, 95, 0.1);
    border-color: rgba(255, 55, 95, 0.2);
    box-shadow: 0 0 16px rgba(255, 55, 95, 0.12);
}
.step-card:nth-child(5):hover .pink-glow {
    box-shadow: 0 0 24px rgba(255, 55, 95, 0.3);
    transform: scale(1.06);
}

.yellow-glow {
    color: var(--color-yellow);
    background: rgba(255, 174, 0, 0.1);
    border-color: rgba(255, 174, 0, 0.2);
    box-shadow: 0 0 16px rgba(255, 174, 0, 0.12);
}
.step-card:nth-child(7):hover .yellow-glow {
    box-shadow: 0 0 24px rgba(255, 174, 0, 0.3);
    transform: scale(1.06);
}

/* ── Step body ── */
.step-body h3 {
    font-size: 1.08rem;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.step-body p {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Step tag ── */
.step-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.03em;
    gap: 5px;
}

.cyan-tag {
    color: var(--color-cyan);
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid rgba(0, 210, 255, 0.2);
}

.purple-tag {
    color: var(--color-purple);
    background: rgba(165, 94, 234, 0.1);
    border: 1px solid rgba(165, 94, 234, 0.2);
}

.pink-tag {
    color: var(--color-pink);
    background: rgba(255, 55, 95, 0.1);
    border: 1px solid rgba(255, 55, 95, 0.2);
}

.yellow-tag {
    color: var(--color-yellow);
    background: rgba(255, 174, 0, 0.1);
    border: 1px solid rgba(255, 174, 0, 0.2);
}

/* ── Connector ── */
.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    color: rgba(255, 255, 255, 0.1);
}

.step-connector i {
    width: 16px;
    height: 16px;
}

/* Remove old dot pseudo-element */
.step-connector::before {
    display: none;
}

/* ── Service card Learn More CTA ── */
.service-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    align-self: flex-start;
    transition: background 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, gap 0.25s ease;
}

.service-card-cta i {
    width: 12px;
    height: 12px;
    transition: transform 0.25s ease;
}

.service-card:hover .service-card-cta {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
    gap: 9px;
}

.service-card:hover .service-card-cta i {
    transform: translateX(3px);
}

/* ─── PACKAGES ─── */

.packages-section {
    padding: 60px 5%;
    text-align: center;
    color: white;
    background: transparent;
}

/* FIX: clamp on large headings */
.packages-section h2 {
    font-size: clamp(2.5rem, 6vw, 5rem);
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 30px auto 0;
}

/* ── Package card shimmer ── */
@keyframes pkgShimmer {
    0%   { transform: translateX(-120%) skewX(-14deg); }
    100% { transform: translateX(260%) skewX(-14deg); }
}
@keyframes pkgPulse {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 0.90; }
}

.package-card {
    position: relative;
    background: linear-gradient(
        150deg,
        rgba(var(--pkg-rgb, 20,20,36), 0.18) 0%,
        rgba(11, 16, 32, 0.85) 50%,
        rgba(var(--pkg-rgb, 20,20,36), 0.12) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(27,42,68,0.42);
    border-top: 2px solid rgba(var(--pkg-rgb, 27,42,68), 0.70);
    border-radius: var(--radius-lg);
    padding: 28px 24px 24px;
    text-align: left;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    overflow: hidden;
    box-shadow:
        0 4px 28px rgba(0, 0, 0, 0.30),
        0 0 16px rgba(var(--pkg-rgb, 0,0,0), 0.08),
        0 1px 0 rgba(255, 255, 255, 0.07) inset;
    transition: transform 0.4s ease, border-color 0.4s ease,
                box-shadow 0.4s ease, background 0.4s ease;
}

/* Shimmer sweep on hover */
.package-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 55%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(var(--pkg-rgb, 255,255,255), 0.06) 50%,
        transparent 75%
    );
    transform: translateX(-120%) skewX(-14deg);
    pointer-events: none;
    z-index: 1;
    transition: none;
}
.package-card:hover::before {
    animation: pkgShimmer 0.65s ease forwards;
}

/* Bottom edge glow */
.package-card::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--pkg-rgb, 255,255,255), 0.35), transparent);
    animation: pkgPulse 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* ── Color tokens per card type ── */
.cyan-card {
    --pkg-rgb: 0, 210, 255;
    --hover-color: var(--color-cyan);
    --hover-shadow: rgba(0, 210, 255, 0.28);
}
.yellow-card {
    --pkg-rgb: 255, 174, 0;
    --hover-color: var(--color-yellow);
    --hover-shadow: rgba(255, 174, 0, 0.28);
    padding-top: 50px; /* room for POPULAR tag */
}
.purple-card {
    --pkg-rgb: 165, 94, 234;
    --hover-color: var(--color-purple);
    --hover-shadow: rgba(165, 94, 234, 0.28);
}

.package-card:hover {
    transform: translateY(-8px);
    background: linear-gradient(
        150deg,
        rgba(var(--pkg-rgb, 20,20,36), 0.26) 0%,
        rgba(18, 16, 34, 0.80) 50%,
        rgba(var(--pkg-rgb, 20,20,36), 0.18) 100%
    );
    border-color: rgba(var(--pkg-rgb, 255,255,255), 0.30);
    border-top-color: rgba(var(--pkg-rgb, 255,255,255), 0.55);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(var(--pkg-rgb, 0,0,0), 0.18),
        0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

.popular-tag {
    position: absolute;
    top: 16px;
    left: 20px;
    background: #ffae00;
    color: #1a0e00;
    padding: 3px 10px 3px 8px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 6px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 10px rgba(255, 174, 0, 0.35);
}
.popular-tag::before {
    content: "★";
    font-size: 0.6rem;
}

.package-card h3 {
    font-size: 0.9rem;
    color: var(--hover-color);
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.price {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 4px;
}

.sub-price {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 20px;
}

.features-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
    flex-grow: 1;
}

.card-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.card-feature i {
    width: 16px;
    height: 16px;
    color: var(--hover-color);
    flex-shrink: 0;
}

.card-feature p {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
}

.package-btn {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: white;
    border: 2px solid var(--hover-color);
}

.package-btn:hover {
    background: var(--hover-color);
    color: #000;
}

.yellow-card .package-btn {
    background: var(--color-yellow);
    color: #000;
    border: none;
}

.yellow-card .package-btn:hover {
    background: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Tier note pill */
.tier-note-wrapper {
    text-align: center;
}

.tier-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
}

.tier-note-icon,
.tier-highlight {
    background: var(--primary);
    background-size: var(--gradient-brand-size);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 8s ease infinite;
}

.tier-note-icon {
    font-size: 1rem;
}

.tier-highlight {
    font-weight: 700;
}

/* --- Service Selection Pill --- */
.service-pill-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 10px;
}

.service-pill {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--surface);
    border: 1px solid rgba(27,42,68,0.40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 8px 8px 24px;
    border-radius: 50px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.service-pill:hover {
    border-color: rgba(34, 211, 238, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -10px rgba(34, 211, 238, 0.1);
}

.pill-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-accent);
    animation: pulse-cyan 2s infinite;
}

@keyframes pulse-cyan {
    0% {
        transform: scale(0.95);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7);
    }

    70% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 10px rgba(34, 211, 238, 0);
    }

    100% {
        transform: scale(0.95);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
    }
}

.pill-label {
    font-size: 0.9rem;
    color: #94a3b8;
    font-weight: 500;
}

.pill-value {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pill-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.pill-action:hover {
    background: var(--color-accent);
    color: #000;
    border-color: var(--color-accent);
}

/* FIX: min-height removed on mobile to avoid excessive space */
@media screen and (max-width: 768px) {
    .package-card {
        min-height: unset;
    }

    .service-pill {
        max-width: 95vw;
        padding: 6px 6px 6px 14px;
        gap: 10px;
    }

    .pill-label {
        font-size: 0.75rem;
    }

    .pill-value {
        font-size: 0.78rem;
    }

    .pill-action {
        padding: 6px 10px;
        font-size: 0.62rem;
        border-radius: 20px;
        gap: 4px;
        letter-spacing: 0.02em;
        flex-shrink: 0;
    }

    .pill-action i {
        width: 11px;
        height: 11px;
    }

    /* Tier note — collapse to a simple centered line so text never orphans mid-phrase */
    .tier-note {
        display: block;
        max-width: 90vw;
        font-size: 0.73rem;
        padding: 8px 16px;
        text-align: center;
        line-height: 1.65;
        white-space: normal;
        border-radius: 12px;
    }

    /* Hide the ✦ sparkle — looks odd inline when text wraps */
    .tier-note-icon {
        display: none;
    }
}

@media screen and (max-width: 380px) {
    .service-pill {
        padding: 5px 5px 5px 12px;
        gap: 8px;
    }

    .pill-label {
        font-size: 0.7rem;
    }

    .pill-value {
        font-size: 0.72rem;
    }

    .pill-action {
        padding: 5px 8px;
        font-size: 0.58rem;
    }

    .tier-note {
        font-size: 0.65rem;
        padding: 6px 12px;
    }
}

/* ─── FAQ ─── */

.faq-section {
    padding: 80px 10%;
    color: white;
    text-align: center;
}

.faq-header h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 10px;
}

.faq-header p {
    color: var(--text-secondary);
    margin-bottom: 50px;
}

.faq-container {
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(9,13,26,0.80) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(27,42,68,0.38);
    border-top: 2px solid rgba(27,42,68,0.60);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.05) inset;
    overflow: hidden;
    border-radius: var(--radius-md);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(27,42,68,0.55);
    border-top-color: rgba(27,42,68,0.75);
    background: linear-gradient(135deg, rgba(14,20,40,0.88) 0%, rgba(10,14,28,0.92) 100%);
    box-shadow: 0 6px 22px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.07) inset;
}

.faq-item.active {
    border-color: rgba(34,211,238,0.30);
    border-top-color: var(--focus);
    background: linear-gradient(135deg, rgba(0,45,65,0.18) 0%, rgba(14,12,26,0.72) 100%);
    box-shadow: 0 0 24px rgba(34,211,238,0.08), 0 4px 16px rgba(0,0,0,0.20), 0 1px 0 rgba(34,211,238,0.08) inset;
}

.faq-question {
    width: 100%;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: none;
    border: none;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: var(--color-accent);
}

.faq-question i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: var(--color-accent);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
    padding: 0 24px;
}

/* FIX: raised max-height from 300px to 1000px — long answers were getting clipped */
.faq-item.active .faq-answer {
    max-height: 1000px;
    padding: 0 24px 20px;
}

.faq-answer p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    text-align: left;
}

/* ─── CONTACT ─── */

.contact-section {
    padding: 100px 10%;
    color: white;
    text-align: center;
}

/* FIX: clamp so heading doesn't overflow on mid screens */
.contact-header h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 15px;
}

.contact-container {
    max-width: 900px;
    margin: 50px auto 0;
    background: linear-gradient(
        155deg,
        rgba(12, 18, 40, 0.88) 0%,
        rgba(7, 11, 26, 0.94) 100%
    );
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(27, 42, 68, 0.40);
    border-top: 2px solid rgba(34, 211, 238, 0.28);
    border-radius: var(--radius-xl);
    padding: 50px;
    text-align: left;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(34, 211, 238, 0.05) inset,
        0 1px 0 rgba(34, 211, 238, 0.10) inset;
    position: relative;
    overflow: hidden;
}

/* Subtle cyan ambient top-right glow */
.contact-container::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.07), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure form content sits above the pseudo-element */
.contact-form {
    position: relative;
    z-index: 1;
}

.form-row {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.form-group label {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(185, 195, 217, 0.80);
    letter-spacing: 0.02em;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    background: rgba(8, 12, 28, 0.75);
    border: 1px solid rgba(27, 42, 68, 0.70);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    color: white;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    outline: none;
    width: 100%;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(127, 138, 163, 0.55);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: rgba(34, 211, 238, 0.45);
    background: rgba(10, 16, 34, 0.90);
    box-shadow:
        0 0 0 3px rgba(34, 211, 238, 0.07),
        0 2px 12px rgba(0, 0, 0, 0.30);
}

.contact-form select option {
    background-color: var(--surface-elevated);
    color: white;
}

.contact-form textarea {
    resize: vertical;
}

.send-btn {
    width: 100%;
    padding: 17px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--gradient-brand);
    background-size: var(--gradient-brand-size);
    color: white;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 10px;
    animation: gradientShift 8s ease infinite;
    position: relative;
    overflow: hidden;
}

.send-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.send-btn:hover::after { opacity: 1; }

.send-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(47, 128, 255, 0.38), 0 4px 14px rgba(0,0,0,0.25);
    animation-play-state: paused;
}

/* Violet variant — used for the inquiry "Get a Recommendation" CTA */
.send-btn--violet {
    background: linear-gradient(135deg, #5b21b6, #7c3aed, #8b5cf6);
    background-size: 200% 200%;
    animation: violetShift 6s ease infinite;
}

.send-btn--violet:hover {
    box-shadow: 0 12px 36px rgba(139, 92, 246, 0.40), 0 4px 14px rgba(0,0,0,0.25);
}

@keyframes violetShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.required-star {
    color: var(--danger);
    font-weight: bold;
}

/* --- Contact Summary Pill --- */
.contact-summary-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: rgba(27,42,68,0.35);
    border: 1px solid var(--glass-border);
}

/* --- Clear Selection Pill --- */
.clear-selection-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 15px;
}

.clear-selection-pill {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 10px 10px 22px;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.clear-selection-pill:hover {
    border-color: rgba(255, 55, 95, 0.2);
    background: rgba(255, 55, 95, 0.03);
}

.clear-pill-text {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-weight: 500;
}

.clear-pill-text i {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.clear-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 55, 95, 0.3);
    background: rgba(255, 55, 95, 0.08);
    color: var(--danger);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.clear-pill-btn i {
    width: 14px;
    height: 14px;
    /* FIX: transitions defined per state to prevent stacking glitch */
    transition: transform 0.4s ease;
}

.clear-pill-btn:hover {
    background: rgba(255, 55, 95, 0.18);
    border-color: rgba(255, 55, 95, 0.5);
    color: #ff6b85;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(255, 55, 95, 0.15);
}

.clear-pill-btn:hover i {
    transform: rotate(-180deg);
}

/* FIX: .cleared no longer stacks on top of hover rotation — separate state */
.clear-pill-btn.cleared {
    border-color: rgba(34, 211, 238, 0.4);
    background: rgba(34, 211, 238, 0.1);
    color: var(--color-accent);
    transform: none;
}

.clear-pill-btn.cleared i {
    color: var(--color-accent);
    transform: rotate(0deg);
}

.clear-pill-btn:focus-visible {
    outline: 2px solid var(--color-pink);
    outline-offset: 3px;
}

/* --- Inline Form Errors --- */
.field-error {
    color: var(--danger);
    font-size: 0.8rem;
    min-height: 1.2em;
    display: block;
    margin-top: 4px;
    transition: opacity 0.2s ease;
}

.contact-form .form-group.has-error input,
.contact-form .form-group.has-error select,
.contact-form .form-group.has-error textarea {
    border-color: var(--danger);
    box-shadow: 0 0 12px rgba(255, 55, 95, 0.15);
}

/* --- Honeypot --- */
.form-honeypot {
    position: absolute;
    left: -9999px;
    height: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* --- Notifications / Toast --- */
.notification-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
}

.toast {
    padding: 14px 22px;
    border-radius: 14px;
    color: white;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.4;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    transform: translateX(150%);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
    transform: translateX(0);
}

.toast.error {
    background: rgba(255, 55, 95, 0.2);
    border: 1px solid rgba(255, 55, 95, 0.5);
    border-left: 5px solid var(--color-pink);
}

.toast.success {
    background: rgba(0, 210, 255, 0.2);
    border: 1px solid rgba(0, 210, 255, 0.5);
    border-left: 5px solid var(--color-cyan);
}

@media screen and (max-width: 768px) {
    .notification-container {
        bottom: auto;
        top: 90px;
        right: 16px;
        left: 16px;
        max-width: none;
        align-items: center;
    }

    .toast {
        width: 100%;
        max-width: 340px;
        padding: 10px 16px;
        border-radius: 12px;
        font-size: 0.78rem;
        font-weight: 600;
        text-align: center;
        border-left: none;
        border-top: 3px solid transparent;
        transform: translateY(-30px);
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    }

    .toast.show {
        transform: translateY(0);
        opacity: 1;
    }

    .toast.error {
        border-top-color: var(--danger);
        border-left: none;
    }

    .toast.success {
        border-top-color: var(--color-cyan);
        border-left: none;
    }

    .contact-summary-pill {
        max-width: 95vw;
        padding: 8px 14px;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .contact-summary-pill .pill-label,
    .contact-summary-pill .pill-value {
        font-size: 0.75rem;
    }

    .contact-summary-pill .pill-value {
        white-space: normal;
        word-break: break-word;
    }
}

@media screen and (max-width: 380px) {
    .toast {
        max-width: 280px;
        padding: 8px 14px;
        font-size: 0.72rem;
    }

    .contact-summary-pill .pill-label,
    .contact-summary-pill .pill-value {
        font-size: 0.7rem;
    }
}

.contact-section .inquiry-section {
    display: none;
}

.contact-section.inquiry-mode .contact-header,
.contact-section.inquiry-mode .clear-selection-wrapper,
.contact-section.inquiry-mode .contact-container {
    display: none;
}

.contact-section.inquiry-mode .inquiry-section {
    display: block;
}

/* --- Contact Add-ons Pill --- */
.contact-addons-pill {
    display: none;
    margin-top: 8px;
    margin-bottom: 20px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: rgba(11, 16, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.contact-addons-pill.visible {
    display: block;
}

.addons-pill-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.addons-pill-icon {
    width: 16px;
    height: 16px;
    color: var(--color-purple);
    flex-shrink: 0;
}

.addons-pill-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.addons-pill-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

.addons-pill-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: white;
}

/* When add-ons are selected — cyan accent */
.contact-addons-pill.has-addons {
    border-color: rgba(34, 211, 238, 0.12);
    background: rgba(34, 211, 238, 0.03);
}

.contact-addons-pill.has-addons .addons-pill-icon {
    color: var(--color-accent);
}

.contact-addons-pill.has-addons .addons-pill-value {
    color: var(--color-accent);
}

/* Recommendation hint */
.addons-pill-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(11, 16, 32, 0.65);
    font-size: 0.72rem;
    color: rgba(255, 174, 0, 0.6);
    line-height: 1.4;
}

.addons-pill-hint i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: rgba(255, 174, 0, 0.5);
}

/* Hide hint when add-ons are selected */
.contact-addons-pill.has-addons .addons-pill-hint {
    display: none;
}

/* Responsive */
@media screen and (max-width: 800px) {
    .contact-addons-pill {
        padding: 8px 14px;
        border-radius: 12px;
        margin-top: 6px;
        margin-bottom: 16px;
    }

    .addons-pill-icon {
        width: 14px;
        height: 14px;
    }

    .addons-pill-label {
        font-size: 0.72rem;
    }

    .addons-pill-value {
        font-size: 0.75rem;
    }

    .addons-pill-hint {
        font-size: 0.65rem;
        margin-top: 6px;
        padding-top: 6px;
        gap: 5px;
    }

    .addons-pill-hint i {
        width: 11px;
        height: 11px;
    }
}

@media screen and (max-width: 480px) {
    .contact-addons-pill {
        padding: 7px 12px;
    }

    .addons-pill-content {
        gap: 8px;
    }

    .addons-pill-text {
        gap: 6px;
    }

    .addons-pill-label {
        font-size: 0.68rem;
    }

    .addons-pill-value {
        font-size: 0.7rem;
    }

    .addons-pill-hint {
        font-size: 0.6rem;
    }
}

/* ── Outer card ── */
.csp-card {
    background: linear-gradient(
        150deg,
        rgba(20, 18, 36, 0.60) 0%,
        rgba(14, 12, 26, 0.72) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(11, 16, 32, 0.75);
    border-top: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 4px 24px rgba(0,0,0,0.24),
        0 1px 0 rgba(255,255,255,0.06) inset;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.csp-card.has-selection {
    border-color: rgba(34, 211, 238, 0.2);
}

/* ── Collapsed header ── */
.csp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
}

.csp-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.csp-status-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.csp-card.has-selection .csp-status-dot {
    background: var(--color-accent);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
    animation: pulse-cyan 2s infinite;
}

.csp-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.csp-header-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.csp-header-summary {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csp-card.has-selection .csp-header-summary {
    color: #fff;
}

/* ── Toggle button ── */
.csp-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(11, 16, 32, 0.65);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.csp-toggle-btn i {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.csp-toggle-btn:hover {
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.3);
    color: var(--color-accent);
}

.csp-toggle-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.csp-toggle-btn[aria-expanded="true"],
.csp-toggle-btn[aria-expanded="true"]:hover {
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.3);
    color: var(--color-accent);
}

.csp-toggle-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* ── Expandable body ── */
.csp-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.csp-body.open {
    grid-template-rows: 1fr;
}

.csp-body-inner {
    overflow: hidden;
    border-top: 1px solid rgba(27,42,68,0.38);
}

/* ── Sections ── */
.csp-section {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(11, 16, 32, 0.65);
}

.csp-section:last-of-type {
    border-bottom: none;
}

.csp-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.csp-section-label i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.csp-section-hint {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.2);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-left: auto;
}

/* ── Package row ── */
.csp-package-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.csp-package-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}

.csp-package-icon i {
    width: 18px;
    height: 18px;
}

.csp-package-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.csp-package-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.csp-package-service {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.csp-package-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.25);
    color: var(--color-accent);
}

.csp-package-badge.badge-starter {
    background: rgba(75, 123, 236, 0.12);
    border-color: rgba(75, 123, 236, 0.25);
    color: var(--color-blue);
}

.csp-package-badge.badge-custom {
    background: rgba(255, 174, 0, 0.12);
    border-color: rgba(255, 174, 0, 0.25);
    color: var(--color-yellow);
}

.csp-package-badge.badge-professional {
    background: rgba(165, 94, 234, 0.12);
    border-color: rgba(165, 94, 234, 0.25);
    color: var(--color-purple);
}

.csp-package-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-accent);
}

/* ── Features list ── */
.csp-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.csp-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

.csp-features-list li::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 1px;
}

/* ── Addon rows ── */
.csp-addon-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(27,42,68,0.20);
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 8px;
    user-select: none;
}

.csp-addon-row:last-of-type {
    margin-bottom: 0;
}

.csp-addon-row:hover {
    background: rgba(11, 16, 32, 0.65);
    border-color: rgba(255, 255, 255, 0.1);
}

.csp-addon-row.selected {
    background: rgba(34, 211, 238, 0.05);
    border-color: rgba(34, 211, 238, 0.25);
}

.csp-addon-row:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

.csp-addon-icon-wrap {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.csp-addon-icon-wrap i {
    width: 16px;
    height: 16px;
}

.csp-hosting-icon {
    background: rgba(75, 123, 236, 0.12);
    color: var(--color-blue);
    border: 1px solid rgba(75, 123, 236, 0.15);
}

.csp-addon-row.selected .csp-hosting-icon {
    background: rgba(75, 123, 236, 0.2);
    border-color: rgba(75, 123, 236, 0.35);
}

.csp-mgmt-icon {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.csp-addon-row.selected .csp-mgmt-icon {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.3);
}

.csp-addon-detail {
    flex: 1;
    min-width: 0;
}

.csp-addon-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.csp-addon-name {
    font-size: 0.87rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.25s ease;
}

.csp-addon-row.selected .csp-addon-name {
    color: #fff;
}

.csp-addon-price {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.25s ease;
}

.csp-addon-row.selected .csp-addon-price {
    color: var(--color-accent);
}

.csp-addon-desc {
    font-size: 0.73rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Checkbox ── */
.csp-addon-check {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.csp-addon-check i {
    width: 12px;
    height: 12px;
    color: transparent;
    transform: scale(0);
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.csp-addon-row.selected .csp-addon-check {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

.csp-addon-row.selected .csp-addon-check i {
    color: #000;
    transform: scale(1);
}

/* ── Management plans panel ── */
.csp-plans-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
    margin-top: 10px;
}

.csp-plans-panel.open {
    grid-template-rows: 1fr;
}

.csp-plans-inner {
    overflow: hidden;
}

.csp-plans-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 8px;
    padding-top: 4px;
}

.csp-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-bottom: 2px;
}

/* Individual plan card */
.csp-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 0;
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur-webkit);
    border: 1px solid var(--glass-border);
    border-top: 1px solid var(--glass-top);
    box-shadow: var(--glass-shadow);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
    user-select: none;
}

.csp-plan-card:hover {
    border-color: rgba(34, 211, 238, 0.2);
    background: rgba(34, 211, 238, 0.03);
}

.csp-plan-card.selected {
    border-color: var(--color-accent);
    background: rgba(34, 211, 238, 0.07);
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.1);
}

.csp-plan-card:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.csp-plan-rec-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--gradient-cta);
    color: white;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 8px;
    border-radius: 0 var(--radius-md) 0 8px;
}

.csp-plan-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 3px;
}

.csp-plan-card.selected .csp-plan-name { color: #fff; }

.csp-plan-price {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
    margin-bottom: 4px;
}

.csp-plan-period {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
}

.csp-plan-card.selected .csp-plan-price { color: var(--color-accent); }
.csp-plan-card.selected .csp-plan-period { color: rgba(34, 211, 238, 0.55); }

.csp-plan-desc {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 8px;
}

.csp-plan-features {
    list-style: none;
    padding: 8px 0 0;
    margin: 0;
    border-top: 1px solid rgba(11, 16, 32, 0.65);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.csp-plan-features li {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding-left: 14px;
    position: relative;
    line-height: 1.4;
}

.csp-plan-features li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: rgba(255, 255, 255, 0.2);
}

.csp-plan-card.selected .csp-plan-features li {
    color: rgba(255, 255, 255, 0.7);
}

.csp-plan-card.selected .csp-plan-features li::before {
    color: var(--color-accent);
}

.csp-plan-select-bar {
    margin: 8px -12px 0;
    padding: 7px 12px;
    background: rgba(27,42,68,0.20);
    border-top: 1px solid rgba(11, 16, 32, 0.65);
    text-align: center;
    transition: all 0.2s ease;
}

.csp-plan-select-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.22);
    transition: color 0.2s ease;
}

.csp-plan-card.selected .csp-plan-select-bar {
    background: rgba(34, 211, 238, 0.06);
    border-top-color: rgba(34, 211, 238, 0.1);
}

.csp-plan-card.selected .csp-plan-select-label {
    color: var(--color-accent);
}

/* ── Totals block ── */
.csp-totals {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.015);
    border-top: 1px solid rgba(27,42,68,0.38);
}

.csp-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
}

.csp-total-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.csp-total-label i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.csp-total-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}

.csp-monthly-accent {
    color: var(--color-accent);
}

.csp-total-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(11, 16, 32, 0.65);
    font-size: 0.71rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.csp-total-note i {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* ==========================================================
   ORDER SUMMARY — MANAGEMENT MODE
   When Ongoing Management service is selected:
   hide the toggle button (body auto-opens)
   hide the add-ons section (not applicable)
   ========================================================== */
.csp-card.mgmt-mode .csp-toggle-btn {
    display: none;
}

/* Remove the right-side gap when toggle btn is gone */
.csp-card.mgmt-mode .csp-header {
    padding-right: 20px;
}

/* ── Large desktop (>900px): wider feature grid ── */
@media screen and (min-width: 901px) {
    .csp-features-list {
        grid-template-columns: 1fr 1fr;
    }

    .csp-plans-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Tablet (641–900px) ── */
@media screen and (min-width: 641px) and (max-width: 900px) {
    .csp-features-list {
        grid-template-columns: 1fr 1fr;
    }

    .csp-plans-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .csp-plan-card {
        padding: 10px 10px 0;
    }

    .csp-plan-price {
        font-size: 0.9rem;
    }

    .csp-plan-desc {
        font-size: 0.68rem;
    }

    .csp-plan-features li {
        font-size: 0.67rem;
    }
}

/* ── Mobile (≤640px) ── */
@media screen and (max-width: 640px) {

    /* Header */
    .csp-header {
        padding: 14px 16px;
        gap: 10px;
    }

    .csp-header-label {
        font-size: 0.65rem;
    }

    .csp-header-summary {
        font-size: 0.84rem;
    }

    /* Management mode — no button, so text can use full width */
    .csp-card.mgmt-mode .csp-header-left {
        width: 100%;
    }

    .csp-card.mgmt-mode .csp-header-summary {
        white-space: normal;
    }

    /* Toggle button */
    .csp-toggle-btn {
        padding: 7px 12px;
        font-size: 0.74rem;
    }

    /* Sections */
    .csp-section {
        padding: 14px 16px;
    }

    .csp-section-label {
        font-size: 0.65rem;
        margin-bottom: 12px;
    }

    .csp-section-hint {
        display: none; /* too cramped on mobile */
    }

    /* Package row */
    .csp-package-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
    }

    .csp-package-icon i {
        width: 16px;
        height: 16px;
    }

    .csp-package-service {
        font-size: 0.88rem;
    }

    .csp-package-price {
        font-size: 0.9rem;
    }

    /* Features — single column on mobile */
    .csp-features-list {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .csp-features-list li {
        font-size: 0.78rem;
    }

    /* Addon rows */
    .csp-addon-row {
        gap: 10px;
        padding: 10px 12px;
    }

    .csp-addon-icon-wrap {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 9px;
    }

    .csp-addon-icon-wrap i {
        width: 14px;
        height: 14px;
    }

    .csp-addon-name {
        font-size: 0.83rem;
    }

    .csp-addon-price {
        font-size: 0.76rem;
    }

    .csp-addon-desc {
        font-size: 0.69rem;
    }

    /* Management plans — single column, compact cards */
    .csp-plans-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* On mobile, plan cards stack vertically — keep column layout but tighter */
    .csp-plan-card {
        padding: 11px 12px 0;
    }

    .csp-plan-rec-badge {
        font-size: 0.52rem;
        padding: 2px 7px;
    }

    .csp-plan-name {
        font-size: 0.8rem;
    }

    .csp-plan-price {
        font-size: 0.92rem;
    }

    .csp-plan-desc {
        font-size: 0.69rem;
        margin-bottom: 6px;
    }

    .csp-plan-features {
        padding: 6px 0 0;
        gap: 3px;
    }

    .csp-plan-features li {
        font-size: 0.68rem;
    }

    .csp-plan-select-bar {
        margin: 6px -12px 0;
        padding: 6px 12px;
    }

    .csp-plan-select-label {
        font-size: 0.65rem;
    }

    /* Totals */
    .csp-totals {
        padding: 13px 16px;
    }

    .csp-total-label {
        font-size: 0.8rem;
    }

    .csp-total-value {
        font-size: 0.88rem;
    }

    .csp-total-note {
        font-size: 0.68rem;
    }
}

/* ── Small mobile (≤380px) ── */
@media screen and (max-width: 380px) {
    .csp-header {
        padding: 12px 14px;
        gap: 8px;
    }

    .csp-header-summary {
        font-size: 0.78rem;
        /* allow wrap so text doesn't get truncated */
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .csp-toggle-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
        gap: 4px;
    }

    .csp-toggle-btn i {
        width: 12px;
        height: 12px;
    }

    .csp-section {
        padding: 12px 14px;
    }

    .csp-package-row {
        gap: 10px;
    }

    .csp-addon-row {
        padding: 9px 10px;
        gap: 8px;
    }

    .csp-totals {
        padding: 11px 14px;
    }
}

.payment-methods-wrapper {
    display: flex;
    justify-content: center;
    padding: 0 5%;
    margin: 28px 0 40px;
}

.payment-methods-card {
    background: var(--glass-bg);
    border: 1px solid rgba(27,42,68,0.35);
    border-radius: 24px;
    padding: 24px 32px;
    max-width: 680px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

/* Subtle top glow */
.payment-methods-card::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(34, 197, 94, 0.5),
        transparent);
    pointer-events: none;
}

.payment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.payment-header i {
    width: 14px;
    height: 14px;
    color: var(--success);
    flex-shrink: 0;
}

.payment-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.payment-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: rgba(11, 16, 32, 0.55);
    border: 1px solid rgba(11, 16, 32, 0.75);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    transition: all 0.25s ease;
    white-space: nowrap;
    cursor: default;
}

.payment-badge:hover {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.2);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.payment-badge i {
    width: 15px;
    height: 15px;
    color: var(--success);
    flex-shrink: 0;
}

/* Secure note line */
.payment-secure-note {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.02em;
}
.payment-secure-note i {
    width: 11px;
    height: 11px;
    color: var(--success);
    flex-shrink: 0;
}

/* Mobile */
@media screen and (max-width: 640px) {
    .payment-methods-card {
        padding: 18px 20px;
        gap: 14px;
        border-radius: 18px;
    }

    .payment-badges {
        gap: 8px;
    }

    .payment-badge {
        padding: 7px 14px;
        font-size: 0.76rem;
    }

    .payment-badge i {
        width: 13px;
        height: 13px;
    }

    .payment-header {
        font-size: 0.66rem;
    }
}

@media screen and (max-width: 380px) {
    .payment-methods-card {
        padding: 14px 16px;
    }

    .payment-badge {
        padding: 6px 12px;
        font-size: 0.72rem;
    }
}

/* ── What Happens Next block ── */
.what-happens-next {
    background: linear-gradient(
        135deg,
        rgba(0, 210, 255, 0.06) 0%,
        rgba(11, 16, 32, 0.50) 100%
    );
    border: 1px solid rgba(0, 210, 255, 0.14);
    border-left: 3px solid rgba(0, 210, 255, 0.55);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    margin-bottom: 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.20);
}

.whn-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(0, 210, 255, 0.90);
    margin-bottom: 12px;
}

.whn-heading i { width: 14px; height: 14px; }

.whn-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.whn-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.55;
}

.whn-list li i {
    width: 13px;
    height: 13px;
    min-width: 13px;
    margin-top: 2px;
    color: rgba(0, 210, 255, 0.60);
}

/* ── Second total note (Stripe) ── */
.csp-stripe-note {
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 8px;
}

/* ── Payment Stripe clarifier ── */
.payment-stripe-note {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.73rem;
    color: var(--text-muted);
    padding: 8px 0 4px;
    border-bottom: 1px solid rgba(11, 16, 32, 0.65);
    margin-bottom: 8px;
}

.payment-stripe-note i { width: 12px; height: 12px; color: rgba(0, 210, 255, 0.55); }

/* ── Optional field label ── */
.form-optional {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 3px;
}

/* ── Call booking link ── */
.call-booking-link {
    text-align: center;
    font-size: 0.80rem;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 12px;
}

.call-booking-link a {
    color: rgba(0, 210, 255, 0.75);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.call-booking-link a:hover {
    color: rgba(0, 210, 255, 1);
}

/* ── Select arrow styling fix ── */
.contact-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

/* ── Cross-link microcopy ── */
.form-crosslink {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(47, 128, 255, 0.05);
    border: 1px solid rgba(47, 128, 255, 0.14);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 28px;
    line-height: 1.5;
}

.form-crosslink::before {
    content: '→';
    font-size: 0.75rem;
    color: var(--primary);
    flex-shrink: 0;
    opacity: 0.7;
}

/* Mobile: collapse to centered block so link text never orphans mid-phrase */
@media screen and (max-width: 768px) {
    .form-crosslink {
        display: block;
        text-align: center;
        padding: 10px 14px;
        font-size: 0.77rem;
    }
    .form-crosslink::before {
        display: none;
    }
}

.crosslink-anchor {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.crosslink-anchor:hover { color: var(--primary-hover); opacity: 0.9; }

/* ── Helper / muted microcopy lines ── */
.form-helper-text {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 6px;
}
/* When used as CTA sub-line (below button) */
.send-btn + .form-helper-text,
.inquiry-submit-btn + .form-helper-text {
    margin-top: 10px;
    justify-content: center;
    text-align: center;
}
/* Scope note — amber info callout above Project Details */
.form-scope-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-left: 3px solid rgba(245, 158, 11, 0.50);
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 14px;
    font-size: 0.76rem !important;
    color: rgba(245, 200, 100, 0.75) !important;
    line-height: 1.55;
}
.form-scope-note i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(245, 158, 11, 0.65);
}

/* Also used on a select's helper span (budget field) */
.form-group .form-helper-text {
    margin-top: 5px;
    display: block;
}

/* ── Form section dividers — group related fields ── */
.form-section {
    margin-bottom: 6px;
}

.form-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(27, 42, 68, 0.55);
}

.form-section-label i {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Budget field hidden by default — shown by JS */
#budget-row {
    display: none;
}
#budget-row.visible {
    display: flex;
}

/* ─── ADD-ONS ─── */

.addons-section {
    padding: 60px 5%;
    color: white;
    text-align: center;
}

.addons-section.addons-hidden {
    display: none;
}

/* --- Summary (legacy — removed, replaced by pill above) --- */

/* --- Selection Pill --- */
.addons-selection-pill-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
}

.addons-selection-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--glass-bg);
    border: 1px solid rgba(34, 211, 238, 0.15);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.addons-selection-pill i {
    width: 15px;
    height: 15px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.addons-pill-service {
    font-weight: 600;
    color: white;
}

.addons-pill-sep {
    color: rgba(255, 255, 255, 0.2);
}

.addons-pill-package {
    color: var(--text-secondary);
}

.addons-pill-price {
    font-weight: 700;
    color: var(--color-accent);
}

/* --- Add-on Cards Grid --- */
.addons-grid {
    max-width: 680px;
    margin: 0 auto 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@keyframes addonShimmer {
    0%   { transform: translateX(-120%) skewX(-14deg); }
    100% { transform: translateX(260%) skewX(-14deg); }
}

.addon-card {
    background: linear-gradient(
        135deg,
        var(--surface) 0%,
        rgba(9,13,26,0.82) 100%
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(27,42,68,0.38);
    border-top: 2px solid rgba(27,42,68,0.60);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.22),
        0 1px 0 rgba(255,255,255,0.06) inset;
}

/* Shimmer on hover */
.addon-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 55%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(255,255,255,0.05) 50%,
        transparent 75%
    );
    transform: translateX(-120%) skewX(-14deg);
    pointer-events: none;
    z-index: 1;
}
.addon-card:hover::before {
    animation: addonShimmer 0.65s ease forwards;
}

.addon-card:hover {
    border-color: rgba(27,42,68,0.55);
    border-top-color: rgba(27,42,68,0.70);
    background: linear-gradient(
        135deg,
        rgba(14,20,40,0.90) 0%,
        rgba(10,14,28,0.94) 100%
    );
    transform: translateY(-3px);
    box-shadow:
        0 8px 28px rgba(0,0,0,0.28),
        0 1px 0 rgba(255,255,255,0.08) inset;
}

.addon-card.selected {
    border-color: rgba(34, 211, 238, 0.35);
    border-top-color: rgba(34, 211, 238, 0.60);
    background: linear-gradient(
        135deg,
        rgba(0, 50, 70, 0.25) 0%,
        rgba(14, 12, 26, 0.72) 100%
    );
    box-shadow:
        0 0 28px rgba(34, 211, 238, 0.12),
        0 4px 20px rgba(0,0,0,0.24),
        0 1px 0 rgba(34,211,238,0.10) inset;
}

.addon-card:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.addon-card-inner {
    padding: 22px 22px 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Top row: icon + checkbox */
.addon-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.addon-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.addon-icon i {
    width: 22px;
    height: 22px;
}

.hosting-icon {
    background: rgba(34, 211, 238, 0.08);
    color: var(--color-accent);
    border: 1px solid rgba(34, 211, 238, 0.12);
}

.management-icon {
    background: rgba(165, 94, 234, 0.08);
    color: var(--color-purple);
    border: 1px solid rgba(165, 94, 234, 0.12);
}

.addon-card.selected .hosting-icon {
    background: rgba(34, 211, 238, 0.14);
    border-color: rgba(34, 211, 238, 0.25);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.15);
}

.addon-card.selected .management-icon {
    background: rgba(165, 94, 234, 0.14);
    border-color: rgba(165, 94, 234, 0.25);
    box-shadow: 0 0 14px rgba(165, 94, 234, 0.15);
}

/* Checkbox */
.addon-check-box {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 2px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.addon-check-box i {
    width: 14px;
    height: 14px;
    opacity: 0;
    transform: scale(0) rotate(-45deg);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #000;
}

.addon-card.selected .addon-check-box {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.15);
}

.addon-card.selected .addon-check-box i {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Body */
.addon-body {
    margin-bottom: 16px;
}

.addon-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.addon-title-row h3 {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    line-height: 1.3;
}

.addon-price {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.addon-card.selected .addon-price {
    color: var(--color-accent);
}

.addon-tagline {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* Bullets */
.addon-bullets {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 0;
    border-top: 1px solid rgba(27,42,68,0.25);
    border-bottom: 1px solid rgba(27,42,68,0.25);
    margin-bottom: 12px;
}

.addon-bullet {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.addon-bullet i {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.addon-card.selected .addon-bullet i {
    color: var(--color-accent);
}

/* Footer note */
.addon-footer-note {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 14px;
}

/* Select bar */
.addon-select-bar {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(27,42,68,0.25);
    margin: 0 -22px;
    padding: 11px 22px;
    text-align: center;
    transition: all 0.3s ease;
}

.addon-select-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.3s ease;
}

.addon-card.selected .addon-select-bar {
    background: rgba(34, 211, 238, 0.06);
    border-top-color: rgba(34, 211, 238, 0.12);
}

.addon-card.selected .addon-select-label {
    color: var(--color-accent);
}

/* --- Pricing Total --- */
.addons-total {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.total-card {
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(27,42,68,0.38);
    border-top: 2px solid rgba(27,42,68,0.60);
    box-shadow: 0 4px 20px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.06) inset;
    border-radius: var(--radius-md);
    padding: 20px 32px;
    max-width: 350px;
    width: 100%;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.total-label {
    color: var(--text-secondary);
}

.total-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
}

.total-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 0;
}

.total-row.monthly {
    font-size: 0.85rem;
}

.total-row.monthly .total-label {
    color: rgba(255, 255, 255, 0.5);
}

.total-value-monthly {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-accent);
}

.total-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(27,42,68,0.25);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.total-footer i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* --- Continue Button --- */
.addons-action {
    text-align: center;
}

.addons-continue-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 40px;
    border-radius: 50px;
    border: none;
    background: var(--gradient-cta);
    color: var(--text);
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.addons-continue-btn i {
    width: 18px;
    height: 18px;
}

.addons-continue-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--primary-hover), var(--accent));
    box-shadow: 0 10px 30px rgba(47, 128, 255, 0.40);
}

.addons-continue-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
}

.addons-note {
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--text-dimmed);
}

.payment-methods-wrapper {
    display: flex;
    justify-content: center;
    padding: 0 5%;
    margin-top: 20px;
}

.payment-methods-card {
    background: linear-gradient(135deg, var(--surface), rgba(9,13,26,0.80));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(27,42,68,0.35);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.05) inset;
    border-radius: var(--radius-pill);
    padding: 14px 24px;
    max-width: 600px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.payment-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.payment-header i {
    width: 14px;
    height: 14px;
    color: var(--color-green);
    flex-shrink: 0;
}

.payment-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.payment-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.payment-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.payment-badge:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
}

.payment-badge i {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
    flex-shrink: 0;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .addons-section {
        padding: 50px 8%;
    }

    .addons-grid {
        max-width: 560px;
    }

    .addon-card-inner {
        padding: 18px 18px 0;
    }

    .total-card {
        max-width: 320px;
        padding: 18px 24px;
    }

    .payment-methods-card {
        max-width: 500px;
        padding: 12px 20px;
        gap: 12px;
    }
}

@media screen and (max-width: 800px) {
    .addons-section {
        padding: 35px 5%;
    }

    /* Selection pill */
    .addons-selection-pill {
        font-size: 0.75rem;
        padding: 8px 14px;
        gap: 7px;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .addons-selection-pill i {
        width: 13px;
        height: 13px;
    }

    /* Cards: stack to single column on mobile */
    .addons-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 12px;
        margin-bottom: 20px;
    }

    .addon-card-inner {
        padding: 16px 16px 0;
    }

    .addon-top-row {
        margin-bottom: 12px;
    }

    .addon-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .addon-icon i {
        width: 18px;
        height: 18px;
    }

    .addon-check-box {
        width: 22px;
        height: 22px;
        border-radius: 6px;
    }

    .addon-check-box i {
        width: 12px;
        height: 12px;
    }

    .addon-title-row h3 {
        font-size: 0.92rem;
    }

    .addon-price {
        font-size: 0.78rem;
    }

    .addon-tagline {
        font-size: 0.8rem;
    }

    .addon-bullets {
        gap: 6px;
        padding: 10px 0;
        margin-bottom: 10px;
    }

    .addon-bullet {
        font-size: 0.76rem;
    }

    .addon-bullet i {
        width: 13px;
        height: 13px;
    }

    .addon-footer-note {
        font-size: 0.7rem;
        margin-bottom: 10px;
    }

    .addon-select-bar {
        margin: 0 -16px;
        padding: 9px 16px;
    }

    .addon-select-label {
        font-size: 0.7rem;
    }

    /* Total */
    .addons-total {
        margin-bottom: 18px;
    }

    .total-card {
        padding: 14px 18px;
        max-width: 300px;
        border-radius: 14px;
    }

    .total-row {
        font-size: 0.8rem;
        padding: 4px 0;
    }

    .total-value {
        font-size: 0.95rem;
    }

    .total-divider {
        margin: 6px 0;
    }

    .total-row.monthly {
        font-size: 0.75rem;
    }

    .total-value-monthly {
        font-size: 0.85rem;
    }

    .total-footer {
        font-size: 0.65rem;
        margin-top: 8px;
        padding-top: 8px;
        gap: 4px;
    }

    .total-footer i {
        width: 11px;
        height: 11px;
    }

    /* Button */
    .addons-continue-btn {
        width: 100%;
        max-width: 300px;
        padding: 13px 28px;
        font-size: 0.88rem;
        justify-content: center;
        border-radius: 14px;
    }

    .addons-continue-btn i {
        width: 16px;
        height: 16px;
    }

    .addons-note {
        margin-top: 10px;
        font-size: 0.72rem;
    }

    /* Payments */
    .payment-methods-wrapper {
        margin-top: 16px;
        padding: 0 4%;
    }

    .payment-methods-card {
        padding: 10px 14px;
        border-radius: var(--radius-pill);
        gap: 8px;
    }

    .payment-header {
        font-size: 0.65rem;
        gap: 5px;
    }

    .payment-header i {
        width: 11px;
        height: 11px;
    }

    .payment-divider {
        height: 14px;
    }

    .payment-badges {
        gap: 5px;
    }

    .payment-badge {
        padding: 5px 10px;
        font-size: 0.68rem;
        gap: 4px;
        border-radius: var(--radius-pill);
    }

    .payment-badge i {
        width: 11px;
        height: 11px;
    }
}

/* ========================================================   SMALL MOBILE (≤480px)
   ========================================================== */
@media screen and (max-width: 480px) {
    .addons-section {
        padding: 30px 4%;
    }

    .addon-card-inner {
        padding: 14px 14px 0;
    }

    .addon-select-bar {
        margin: 0 -14px;
        padding: 8px 14px;
    }

    .total-card {
        max-width: 260px;
        padding: 12px 14px;
    }

    .total-row {
        font-size: 0.75rem;
    }

    .total-value {
        font-size: 0.88rem;
    }

    .total-value-monthly {
        font-size: 0.8rem;
    }

    .addons-continue-btn {
        max-width: 260px;
        padding: 12px 24px;
        font-size: 0.82rem;
    }

    .addons-note {
        font-size: 0.68rem;
    }

    .payment-methods-card {
        padding: 9px 12px;
        gap: 6px;
    }

    .payment-badge {
        padding: 4px 8px;
        font-size: 0.64rem;
    }

    .payment-badge i {
        width: 10px;
        height: 10px;
    }
}

@media screen and (max-width: 380px) {
    .addons-selection-pill {
        font-size: 0.68rem;
    }

    .total-card {
        max-width: 240px;
    }

    .addons-continue-btn {
        max-width: 230px;
        padding: 11px 20px;
        font-size: 0.78rem;
    }

    .payment-badge {
        max-width: none;
        margin: 0;
    }
}

.total-monthly-section {
    padding: 6px 0 4px;
}

.total-monthly-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.total-monthly-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    gap: 8px;
}

.total-item-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.7);
}

.total-item-name i {
    width: 13px;
    height: 13px;
    color: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.total-item-price {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-accent);
}

.total-monthly-empty {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.25);
    padding: 4px 0;
    font-style: italic;
}

.mgmt-plans-panel {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
        max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease,
        transform 0.35s ease;
    pointer-events: none;
}

.mgmt-plans-panel.open {
    max-height: 700px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mgmt-plans-inner {
    padding: 28px 0 4px;
}

.mgmt-plans-header {
    text-align: center;
    margin-bottom: 24px;
}

.mgmt-plans-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.mgmt-plans-sub {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto;
}

/* Plans grid — 3 columns on desktop */
.mgmt-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Individual plan card */
.mgmt-plan-card {
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(27,42,68,0.55);
    box-shadow: 0 4px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mgmt-plan-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
}

.mgmt-plan-card.selected {
    border-color: var(--color-accent);
    background: rgba(34, 211, 238, 0.04);
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.15),
        0 0 24px rgba(34, 211, 238, 0.08);
}

.mgmt-plan-card:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* Recommended badge */
.mgmt-recommended-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent);
    color: var(--text);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 0 var(--radius-lg) 0 10px;
}

/* Plan card body */
.mgmt-plan-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 18px 18px 10px;
    flex-wrap: wrap;
}

.mgmt-plan-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: white;
}

.mgmt-plan-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
    transition: color 0.25s ease;
    line-height: 1;
}

.mgmt-plan-period {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

.mgmt-plan-card.selected .mgmt-plan-price {
    color: var(--color-accent);
}

.mgmt-plan-card.selected .mgmt-plan-period {
    color: rgba(34, 211, 238, 0.6);
}

.mgmt-plan-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    padding: 0 18px 12px;
    margin: 0;
}

/* Feature list */
.mgmt-plan-features {
    list-style: none;
    padding: 10px 18px 14px;
    margin: 0;
    border-top: 1px solid rgba(27,42,68,0.25);
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.mgmt-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.mgmt-plan-features li i {
    width: 13px;
    height: 13px;
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    margin-top: 2px;
    transition: color 0.25s ease;
}

.mgmt-plan-card.selected .mgmt-plan-features li i {
    color: var(--color-accent);
}

.mgmt-plan-card.selected .mgmt-plan-features li {
    color: rgba(255, 255, 255, 0.8);
}

/* Select bar at bottom */
.mgmt-plan-select-bar {
    margin-top: auto;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(27,42,68,0.25);
    text-align: center;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.mgmt-plan-select-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    transition: color 0.25s ease;
}

.mgmt-plan-card.selected .mgmt-plan-select-bar {
    background: rgba(34, 211, 238, 0.05);
    border-top-color: rgba(34, 211, 238, 0.12);
}

.mgmt-plan-card.selected .mgmt-plan-select-label {
    color: var(--color-accent);
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .mgmt-plans-grid {
        gap: 10px;
    }

    .mgmt-plan-top {
        padding: 16px 16px 8px;
    }

    .mgmt-plan-price {
        font-size: 1.1rem;
    }

    .mgmt-plan-desc,
    .mgmt-plan-features {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mgmt-plan-select-bar {
        padding: 9px 16px;
    }
}

@media screen and (max-width: 800px) {
    /* Stack to single column on mobile */
    .mgmt-plans-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mgmt-plan-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .mgmt-recommended-badge {
        font-size: 0.58rem;
        padding: 3px 8px;
    }

    .mgmt-plan-top {
        padding: 14px 14px 6px;
        width: 100%;
    }

    .mgmt-plan-name {
        font-size: 0.86rem;
    }

    .mgmt-plan-price {
        font-size: 1rem;
    }

    .mgmt-plan-desc {
        padding: 0 14px 10px;
        font-size: 0.74rem;
        width: 100%;
    }

    .mgmt-plan-features {
        padding: 8px 14px 10px;
        gap: 5px;
        width: 100%;
    }

    .mgmt-plan-features li {
        font-size: 0.74rem;
    }

    .mgmt-plan-select-bar {
        width: 100%;
        padding: 8px 14px;
    }

    .mgmt-plan-select-label {
        font-size: 0.68rem;
    }

    .mgmt-plans-title {
        font-size: 0.98rem;
    }

    .mgmt-plans-sub {
        font-size: 0.78rem;
    }

    .mgmt-plans-inner {
        padding: 20px 0 4px;
    }

    .total-monthly-label {
        font-size: 0.68rem;
    }

    .total-item-name {
        font-size: 0.78rem;
    }

    .total-item-price {
        font-size: 0.78rem;
    }
}

@media screen and (max-width: 480px) {
    .mgmt-plans-panel.open {
        max-height: 1200px;
    }

    .mgmt-plan-top {
        padding: 12px 12px 5px;
    }

    .mgmt-plan-desc,
    .mgmt-plan-features {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mgmt-plan-select-bar {
        padding: 7px 12px;
    }
}

/* ─── INQUIRY ─── */

/* ═══════════════════════════════════════════════════════════
   INQUIRY CARD — Premium animated treatment
   ═══════════════════════════════════════════════════════════ */

@keyframes inquiryShimmer {
    0%   { transform: translateX(-120%) skewX(-14deg); }
    100% { transform: translateX(260%) skewX(-14deg); }
}
@keyframes inquiryShimmerLoop {
    0%   { transform: translateX(-120%) skewX(-14deg); opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translateX(260%) skewX(-14deg); opacity: 0; }
}
@keyframes inquiryPulse {
    0%, 100% { opacity: 0.50; transform: scaleX(0.85); }
    50%       { opacity: 1;    transform: scaleX(1.05); }
}
@keyframes inquiryBgShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes inquiryCornerSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes inquiryOrb {
    0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.18; }
    50%       { transform: translate(-50%, -50%) scale(1.3); opacity: 0.30; }
}

.service-card.inquiry-card {
    background: linear-gradient(
        135deg,
        rgba(88, 28, 220, 0.16) 0%,
        rgba(18, 14, 34, 0.78) 35%,
        rgba(14, 60, 100, 0.14) 65%,
        rgba(88, 28, 220, 0.16) 100%
    );
    background-size: 300% 300%;
    animation: inquiryBgShift 8s ease infinite;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(139, 92, 246, 0.32);
    border-top: 2px solid rgba(167, 139, 250, 0.65);
    position: relative;
    z-index: 0;
    overflow: hidden;
    box-shadow:
        0 6px 32px rgba(88, 28, 220, 0.18),
        0 0 0 1px rgba(139, 92, 246, 0.08) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
    --hover-color: var(--accent);
    --hover-shadow: rgba(139, 92, 246, 0.35);
    transition: transform 0.35s ease, border-color 0.35s ease,
                box-shadow 0.35s ease;
}

/* ── Slow diagonal shimmer loop — always running ── */
.service-card.inquiry-card::before {
    content: '';
    position: absolute;
    top: -20%; left: 0;
    width: 50%;
    height: 140%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(200, 160, 255, 0.09) 45%,
        rgba(100, 220, 255, 0.06) 55%,
        transparent 80%
    );
    transform: translateX(-120%) skewX(-14deg);
    pointer-events: none;
    z-index: 2;
    animation: inquiryShimmerLoop 3.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Bottom edge glow line ── */
.service-card.inquiry-card::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(139, 92, 246, 0.70) 30%,
        rgba(34, 211, 238, 0.60) 70%,
        transparent
    );
    animation: inquiryPulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

/* ── Ambient orb — top-left purple ── */
.service-card.inquiry-card .inq-orb-tl {
    position: absolute;
    top: -30px; left: -30px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 70%);
    animation: inquiryOrb 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* ── Ambient orb — bottom-right cyan ── */
.service-card.inquiry-card .inq-orb-br {
    position: absolute;
    bottom: -20px; right: -20px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.25), transparent 70%);
    animation: inquiryOrb 5s ease-in-out infinite 1.5s;
    pointer-events: none;
    z-index: 0;
}

/* ── Corner bracket — top right ── */
.service-card.inquiry-card .inq-corner {
    position: absolute;
    top: 12px; right: 12px;
    width: 24px; height: 24px;
    pointer-events: none;
    z-index: 3;
}
.service-card.inquiry-card .inq-corner::before,
.service-card.inquiry-card .inq-corner::after {
    content: '';
    position: absolute;
    background: rgba(167, 139, 250, 0.55);
}
.service-card.inquiry-card .inq-corner::before {
    top: 0; right: 0;
    width: 2px; height: 10px;
}
.service-card.inquiry-card .inq-corner::after {
    top: 0; right: 0;
    width: 10px; height: 2px;
}

.service-card.inquiry-card:hover {
    transform: translateY(-9px);
    border-color: rgba(167, 139, 250, 0.55);
    border-top-color: rgba(192, 170, 255, 0.85);
    box-shadow:
        0 16px 56px rgba(88, 28, 220, 0.28),
        0 0 40px rgba(139, 92, 246, 0.16),
        0 0 0 1px rgba(167, 139, 250, 0.14) inset,
        0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

.service-card.inquiry-card .service-icon {
    position: relative;
    z-index: 1;
}
.service-card.inquiry-card .service-icon i {
    color: #c4b5fd;
    filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.70));
}
.service-card.inquiry-card:hover .service-icon i {
    filter: drop-shadow(0 0 16px rgba(167, 139, 250, 0.90));
}

.service-card.inquiry-card h3 {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #ddd6fe, #a5f3fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-card.inquiry-card p {
    position: relative;
    z-index: 1;
    color: rgba(220, 210, 255, 0.60);
}

/* --- Inquiry Section --- */
.inquiry-section {
    padding: 40px 0;
    color: white;
    text-align: center;
}

.inquiry-header h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 15px;
}

.inquiry-container {
    max-width: 900px;
    margin: 50px auto 0;
    background: linear-gradient(
        155deg,
        rgba(20, 14, 42, 0.90) 0%,
        rgba(10, 8, 26, 0.95) 100%
    );
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(88, 28, 220, 0.22);
    border-top: 2px solid rgba(139, 92, 246, 0.42);
    border-radius: var(--radius-xl);
    padding: 50px;
    text-align: left;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(139, 92, 246, 0.06) inset,
        0 1px 0 rgba(167, 139, 250, 0.12) inset;
    position: relative;
    overflow: hidden;
}

/* Violet ambient orb top-right */
.inquiry-container::before {
    content: '';
    position: absolute;
    top: -70px; right: -70px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.10), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.inquiry-form {
    position: relative;
    z-index: 1;
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
    background: rgba(10, 7, 24, 0.80);
    border: 1px solid rgba(88, 28, 220, 0.28);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    color: white;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    outline: none;
    width: 100%;
}

.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {
    color: rgba(127, 138, 163, 0.50);
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
    border-color: rgba(139, 92, 246, 0.55);
    background: rgba(14, 10, 32, 0.92);
    box-shadow:
        0 0 0 3px rgba(139, 92, 246, 0.09),
        0 2px 12px rgba(0, 0, 0, 0.30);
}

.inquiry-form select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.inquiry-form select option {
    background-color: #1a1a2e;
    color: white;
}

.inquiry-form textarea {
    resize: vertical;
}

.inquiry-form .form-row {
    display: flex;
    gap: 24px;
    margin-bottom: 0;
}

.inquiry-form .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.inquiry-form label {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(185, 195, 217, 0.82);
    letter-spacing: 0.02em;
}

.inquiry-char-counter {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

.inquiry-submit-btn {
    margin-top: 8px;
}

.inquiry-form .form-group.has-error input,
.inquiry-form .form-group.has-error select,
.inquiry-form .form-group.has-error textarea {
    border-color: var(--danger);
    box-shadow: 0 0 12px rgba(239,68,68,0.15);
}

@media screen and (max-width: 768px) {
    .inquiry-section {
        padding: 30px 0;
    }

    .inquiry-container {
        padding: 22px 16px;
        border-radius: var(--radius-lg);
        margin: 20px auto 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Expect block — drastically tighter on mobile */
    .inquiry-expect-block {
        padding: 14px 14px 12px;
        margin-bottom: 22px;
        border-radius: 12px;
    }

    .inquiry-expect-heading {
        font-size: 0.60rem;
        margin-bottom: 10px;
        gap: 5px;
    }
    .inquiry-expect-heading i { width: 10px; height: 10px; }

    .inquiry-expect-rows {
        gap: 6px;
    }

    /* Rows: icon + label/value side by side, compact */
    .ier-row {
        padding: 8px 10px;
        gap: 9px;
        border-radius: 8px;
        align-items: flex-start;
    }

    .ier-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
        border-radius: 7px;
        margin-top: 1px;
    }
    .ier-icon i { width: 11px; height: 11px; }

    .ier-label {
        font-size: 0.57rem;
        letter-spacing: 0.05em;
    }

    .ier-value {
        font-size: 0.77rem;
        line-height: 1.45;
    }

    /* Form fields */
    .inquiry-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .inquiry-form .form-group {
        margin-bottom: 14px;
        gap: 5px;
    }

    .inquiry-form label {
        font-size: 0.82rem;
    }

    .inquiry-form input,
    .inquiry-form select,
    .inquiry-form textarea {
        padding: 11px 12px;
        font-size: 1rem;
        border-radius: 10px;
    }

    .inquiry-form textarea {
        resize: vertical;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .inquiry-container {
        max-width: 700px;
        padding: 40px 36px;
    }
}
/* ==========================================================
   INQUIRY CARD — Enhanced content elements
   (new classes only — does not touch ::before/::after/h3/p)
   ========================================================== */

/* Top row: icon left, badge right */
.inquiry-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    width: 100%;
}

/* Move service-icon margin into the top row */
.service-card.inquiry-card .inquiry-card-top .service-icon {
    margin-bottom: 0;
}

/* "Free Consult" badge */
.inquiry-free-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.25);
    color: #22d3ee;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 6px;
    /* subtle pulse to draw the eye */
    animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
    50%       { box-shadow: 0 0 8px 3px rgba(34, 211, 238, 0.18); }
}

/* CTA — sleek pill button */
.inquiry-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.22);
    background: rgba(34, 211, 238, 0.06);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(34, 211, 238, 0.75);
    align-self: flex-start;
    transition: background 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, gap 0.25s ease, box-shadow 0.25s ease;
}

.inquiry-card-cta i {
    width: 13px;
    height: 13px;
    transition: transform 0.25s ease;
}

.service-card.inquiry-card:hover .inquiry-card-cta {
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.45);
    color: #22d3ee;
    gap: 10px;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.1);
}

.service-card.inquiry-card:hover .inquiry-card-cta i {
    transform: translateX(3px);
}

/* Mobile adjustments */
@media screen and (max-width: 800px) {
    .inquiry-card-cta {
        font-size: 0.63rem;
        padding: 4px 11px;
        margin-top: 12px;
        gap: 4px;
    }
}

.inquiry-expect-block {
    background: linear-gradient(
        150deg,
        rgba(20, 16, 40, 0.72) 0%,
        rgba(9,13,26,0.88) 100%
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(27,42,68,0.38);
    border-top: 2px solid rgba(139, 92, 246, 0.35);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 28px;
    box-shadow:
        0 4px 22px rgba(0,0,0,0.28),
        0 1px 0 rgba(255,255,255,0.05) inset;
    position: relative;
    overflow: hidden;
}

.inquiry-expect-block::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.10);
    filter: blur(28px);
    pointer-events: none;
}

.inquiry-expect-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(139, 92, 246, 0.80);
    margin-bottom: 16px;
    position: relative;
}
.inquiry-expect-heading i { width: 12px; height: 12px; }

.inquiry-expect-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.ier-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.ier-row:hover {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.09);
}

.ier-row--stripe {
    background: rgba(139, 92, 246, 0.07);
    border-color: rgba(139, 92, 246, 0.18);
}
.ier-row--stripe:hover {
    background: rgba(139, 92, 246, 0.10);
    border-color: rgba(139, 92, 246, 0.24);
}

.ier-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.ier-icon i { width: 14px; height: 14px; }

.ier-icon--yellow {
    background: rgba(255,174,0,0.12);
    color: rgba(255,200,60,0.90);
    border: 1px solid rgba(255,174,0,0.20);
}
.ier-icon--cyan {
    background: rgba(0,210,255,0.10);
    color: rgba(0,210,255,0.88);
    border: 1px solid rgba(0,210,255,0.18);
}
.ier-icon--purple {
    background: rgba(139,92,246,0.13);
    color: rgba(167,139,250,0.90);
    border: 1px solid rgba(139,92,246,0.22);
}

.ier-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ier-label {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.40);
    line-height: 1;
}

.ier-value {
    font-size: 0.83rem;
    color: rgba(255,255,255,0.70);
    line-height: 1.5;
}
.ier-value strong {
    color: rgba(255,255,255,0.90);
    font-weight: 600;
}

/* ── Inquiry → Services crosslink block ── */
.inquiry-crosslink-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-left: 3px solid rgba(139, 92, 246, 0.45);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 32px;
}

.icb-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.icb-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(196, 181, 253, 0.85);
    line-height: 1.3;
}

.icb-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.icb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.30);
    color: #a78bfa;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, gap 0.22s ease;
}

.icb-btn i {
    width: 13px;
    height: 13px;
    transition: transform 0.22s ease;
}

.icb-btn:hover {
    background: rgba(139, 92, 246, 0.22);
    border-color: rgba(167, 139, 250, 0.55);
    color: #c4b5fd;
    gap: 9px;
}

.icb-btn:hover i {
    transform: translate(2px, -2px);
}

.icb-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

@media screen and (max-width: 600px) {
    .inquiry-crosslink-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 13px 14px;
    }

    .icb-btn {
        align-self: flex-start;
        font-size: 0.76rem;
        padding: 7px 14px;
    }
}

/* ── Inquiry pill — matches packages pill proportions exactly on mobile ── */
@media screen and (max-width: 768px) {
    .inquiry-section .service-pill {
        max-width: 95vw;
        padding: 6px 6px 6px 14px;
        gap: 10px;
    }
    .inquiry-section .pill-label { font-size: 0.75rem; }
    .inquiry-section .pill-value { font-size: 0.78rem; white-space: nowrap; }
    .inquiry-section .pill-action {
        padding: 6px 10px;
        font-size: 0.62rem;
        border-radius: 20px;
        gap: 4px;
        letter-spacing: 0.02em;
        flex-shrink: 0;
    }
    .inquiry-section .pill-action i { width: 11px; height: 11px; }
}
@media screen and (max-width: 380px) {
    .inquiry-section .service-pill { padding: 5px 5px 5px 12px; gap: 8px; }
    .inquiry-section .pill-label { font-size: 0.7rem; }
    .inquiry-section .pill-value { font-size: 0.72rem; }
    .inquiry-section .pill-action { padding: 5px 8px; font-size: 0.58rem; }
}

/* ── Select option bg for inquiry ── */
.inquiry-form select option {
    background-color: #0e0820;
    color: white;
}

/* ─── FOOTER ─── */

.site-footer {
    padding: 80px 10% 30px;
    color: white;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 40px;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 50px;
}

.footer-logo {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 12px;
    background: var(--gradient-brand);
    background-size: var(--gradient-brand-size);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 8s ease infinite;
}

.footer-brand p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-socials a i {
    width: 16px;
    height: 16px;
}

.footer-socials a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-accent);
    border-color: rgba(34, 211, 238, 0.3);
    transform: translateY(-2px);
}

/* FIX: added focus-visible on social links */
.footer-socials a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 10px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-links a {
    font-size: 0.85rem;
    color: var(--text-dimmed);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.footer-links a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 50px auto 20px;
    max-width: 1100px;
}

.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
}

.footer-support-note {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.5;
    margin-top: 4px;
}

/* FIX: footer grid collapses properly before it gets too squished */
@media screen and (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

@media screen and (max-width: 560px) {
    .site-footer {
        padding: 60px 6% 24px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ─── UTILITIES ─── */

/* --- Focus Visible --- */
.package-btn:focus-visible,
.project-btn:focus-visible,
.send-btn:focus-visible,
.nav-links .nav-btn:focus-visible,
.pill-action:focus-visible,
.next-step-pill:focus-visible,
.faq-question:focus-visible,
.error-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* --- Display Helpers --- */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-grid {
    display: grid !important;
}

/* --- Flex Helpers --- */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

/* --- Spacing --- */
.mt-0 {
    margin-top: 0 !important;
}

.mt-8 {
    margin-top: 8px !important;
}

.mt-16 {
    margin-top: 16px !important;
}

.mt-24 {
    margin-top: 24px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-24 {
    margin-bottom: 24px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

/* --- Text Helpers --- */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

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

.text-dimmed {
    color: var(--text-dimmed);
}

.text-accent {
    color: var(--color-accent);
}

.text-small {
    font-size: 0.85rem;
}

.text-xs {
    font-size: 0.75rem;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

/* --- Truncation --- */
.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* FIX: Removed duplicate .visually-hidden / .sr-only — already defined in base.css */

/* --- Width Helpers --- */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.mw-600 {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.mw-900 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.mw-1100 {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── ANIMATIONS ─── */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Feature cards slide in from the right with a bit more travel */
.feature-item.reveal {
    opacity: 0;
    transform: translateX(36px) translateY(16px);
    transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.feature-item.reveal.revealed {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .feature-item.reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Background blobs */
    .blob-wrapper .drop,
    .blob-wrapper .drop-inner,
    .blob-wrapper .drop-specular,
    .blob-wrapper .drop-caustic {
        animation: none !important;
    }

    /* Button gradient shifts */
    .send-btn,
    .send-btn--violet {
        animation: none !important;
        background-position: 0% 50% !important;
    }

    /* Inquiry card shimmer + orbs */
    .service-card.inquiry-card,
    .service-card.inquiry-card::before,
    .service-card.inquiry-card::after,
    .service-card.inquiry-card .inq-orb-tl,
    .service-card.inquiry-card .inq-orb-br {
        animation: none !important;
    }

    /* Pulsing dot on order summary */
    .csp-status-dot {
        animation: none !important;
    }

    /* Badge pulse */
    .inquiry-free-badge {
        animation: none !important;
    }
}

/* ─── SERVICE MODAL ─── */

/* ── Overlay ── */
.svc-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.svc-modal[hidden] { display: none; }

.svc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.38s ease;
    /* Backdrop takes pointer events only — panel sits above it */
    cursor: pointer;
}

/* ── Panel ── */
.svc-modal-panel {
    position: relative;
    z-index: 1;
    background: rgba(14, 12, 26, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(27,42,68,0.38);
    border-radius: 24px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
    /* No top padding — header band goes edge-to-edge */
    padding: 0 0 28px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(255,255,255,0.05);
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    transition: opacity 0.38s cubic-bezier(0.22,1,0.36,1),
                transform 0.38s cubic-bezier(0.22,1,0.36,1);
    will-change: transform, opacity;
}

/* Open state */
.svc-modal.is-open .svc-modal-backdrop { opacity: 1; }
.svc-modal.is-open .svc-modal-panel    { opacity: 1; transform: translateY(0) scale(1); }

/* ── Close button ── */
.svc-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.svc-modal-close:hover {
    background: rgba(255,55,95,0.18);
    border-color: rgba(255,55,95,0.35);
    color: var(--color-pink);
}
.svc-modal-close i { width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════
   MODAL HEADER BAND — full-width colored top section
   ═══════════════════════════════════════════════════════════ */
.svc-modal-head {
    position: relative;
    padding: 28px 28px 24px;
    border-radius: 24px 24px 0 0;
    background: var(--svc-band-bg, linear-gradient(135deg, rgba(0,210,255,0.10), rgba(14,12,26,0.0)));
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    /* Decorative glow blob */
}

/* Ambient glow orb in top-right */
.svc-modal-head::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: var(--svc-band-orb, rgba(0,210,255,0.12));
    filter: blur(40px);
    pointer-events: none;
}

/* Per-color band backgrounds */
.svc-modal-panel[data-color="cyan"]   { --svc-band-bg: linear-gradient(135deg, rgba(0,210,255,0.10) 0%, rgba(14,12,26,0) 60%);   --svc-band-orb: rgba(0,210,255,0.16);   --svc-accent-rgb: 0,210,255; }
.svc-modal-panel[data-color="purple"] { --svc-band-bg: linear-gradient(135deg, rgba(167,139,250,0.10) 0%, rgba(14,12,26,0) 60%); --svc-band-orb: rgba(167,139,250,0.16); --svc-accent-rgb: 167,139,250; }
.svc-modal-panel[data-color="yellow"] { --svc-band-bg: linear-gradient(135deg, rgba(255,174,0,0.10) 0%, rgba(14,12,26,0) 60%);   --svc-band-orb: rgba(255,174,0,0.14);   --svc-accent-rgb: 255,174,0; }
.svc-modal-panel[data-color="pink"]   { --svc-band-bg: linear-gradient(135deg, rgba(255,55,95,0.10) 0%, rgba(14,12,26,0) 60%);   --svc-band-orb: rgba(255,55,95,0.14);   --svc-accent-rgb: 255,55,95; }
.svc-modal-panel[data-color="blue"]   { --svc-band-bg: linear-gradient(135deg, rgba(96,165,250,0.10) 0%, rgba(14,12,26,0) 60%);  --svc-band-orb: rgba(96,165,250,0.16);  --svc-accent-rgb: 96,165,250; }
.svc-modal-panel[data-color="green"]  { --svc-band-bg: linear-gradient(135deg, rgba(52,211,153,0.10) 0%, rgba(14,12,26,0) 60%);  --svc-band-orb: rgba(52,211,153,0.14);  --svc-accent-rgb: 52,211,153; }

/* Top accent line */
.svc-modal-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--svc-accent-rgb, 0,210,255), 0.70) 30%,
        rgba(var(--svc-accent-rgb, 0,210,255), 0.90) 50%,
        rgba(var(--svc-accent-rgb, 0,210,255), 0.70) 70%,
        transparent 100%
    );
    border-radius: 24px 24px 0 0;
}

/* Row 1: icon + category pill */
.svc-modal-head-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.svc-modal-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--svc-accent-rgb, 255,255,255), 0.22);
    background: rgba(var(--svc-accent-rgb, 255,255,255), 0.08);
    position: relative;
    z-index: 1;
}
.svc-modal-icon i { width: 20px; height: 20px; }

/* Category pill */
.svc-modal-category {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: rgba(var(--svc-accent-rgb, 255,255,255), 0.09);
    border: 1px solid rgba(var(--svc-accent-rgb, 255,255,255), 0.28);
    color: rgba(var(--svc-accent-rgb, 255,255,255), 1);
    position: relative;
    z-index: 1;
}

/* Row 2: full-width title — wraps naturally, never truncates */
.svc-modal-title {
    font-size: 1.55rem !important;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #ffffff;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Row 3: tagline */
.svc-modal-tagline {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.40);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Body gets its own padding now (since panel has no top padding) */
.svc-modal-body-wrap {
    padding: 24px 32px 0;
}

/* ── Body content ── */
.svc-modal-body { display: flex; flex-direction: column; gap: 22px; }

.svc-section-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 7px;
}

.svc-section-text {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.62);
    line-height: 1.7;
    margin: 0;
}

/* Includes list */
.svc-includes-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.svc-includes-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
}

.svc-includes-list li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    margin-top: 7px;
    background: var(--color-accent);
    opacity: 0.7;
}

/* Use cases */
.svc-usecases {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
}

.svc-usecase-tag {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(27,42,68,0.38);
    font-size: 0.76rem;
    color: rgba(255,255,255,0.5);
}

/* Divider between body sections */
.svc-divider {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 0;
}

/* ── Footer CTA ── */
.svc-modal-footer {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: flex-end;
}

.svc-modal-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--gradient-brand);
    background-size: var(--gradient-brand-size);
    border: none;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    animation: gradientShift 8s ease infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-modal-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(106,55,252,0.4);
}
.svc-modal-cta i { width: 15px; height: 15px; transition: transform 0.25s ease; }
.svc-modal-cta:hover i { transform: translateX(3px); }

/* ── Color accents per service (applied via JS data-color) ── */
.svc-modal-panel[data-color="cyan"]   .svc-modal-icon { color: var(--color-cyan);   background: rgba(0,210,255,0.08);   border-color: rgba(0,210,255,0.2); }
.svc-modal-panel[data-color="purple"] .svc-modal-icon { color: var(--color-purple); background: rgba(165,94,234,0.08);  border-color: rgba(165,94,234,0.2); }
.svc-modal-panel[data-color="pink"]   .svc-modal-icon { color: var(--color-pink);   background: rgba(255,55,95,0.08);   border-color: rgba(255,55,95,0.2); }
.svc-modal-panel[data-color="yellow"] .svc-modal-icon { color: var(--color-yellow); background: rgba(255,174,0,0.08);   border-color: rgba(255,174,0,0.2); }
.svc-modal-panel[data-color="blue"]   .svc-modal-icon { color: var(--color-blue);   background: rgba(75,123,236,0.08);  border-color: rgba(75,123,236,0.2); }
.svc-modal-panel[data-color="green"]  .svc-modal-icon { color: var(--color-green);  background: rgba(34,197,94,0.08);   border-color: rgba(34,197,94,0.2); }

.svc-includes-list[data-color="cyan"]   li::before { background: var(--color-cyan); }
.svc-includes-list[data-color="purple"] li::before { background: var(--color-purple); }
.svc-includes-list[data-color="pink"]   li::before { background: var(--color-pink); }
.svc-includes-list[data-color="yellow"] li::before { background: var(--color-yellow); }
.svc-includes-list[data-color="blue"]   li::before { background: var(--color-blue); }
.svc-includes-list[data-color="green"]  li::before { background: var(--color-green); }

/* ── Mobile ── */
@media screen and (max-width: 640px) {
    .svc-modal { padding: 0; align-items: flex-end; }

    .svc-modal-panel {
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
        padding: 0 0 36px;
        transform: translateY(100%);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .svc-modal-head { padding: 22px 20px 20px; }
    .svc-modal-title { font-size: 1.3rem !important; }
    .svc-modal-tagline { font-size: 0.72rem; }
    .svc-modal-body-wrap { padding: 18px 20px 0; }
    .svc-section-text { font-size: 0.84rem; }
    .svc-includes-list li { font-size: 0.82rem; }
    .svc-modal-cta { padding: 10px 20px; font-size: 0.82rem; }
    .svc-modal-body { gap: 16px; }
    .svc-modal-footer { margin-top: 20px; padding-top: 16px; padding-left: 20px; padding-right: 20px; }
}

/* ── Scroll lock — JS sets position:fixed + top offset for iOS safety ── */
body.modal-open {
    /* width:100% prevents layout shift when scrollbar disappears */
    width: 100%;
}

/* ─── ASK MODAL ─── */

.ask-modal {
    position: fixed;
    inset: 0;
    z-index: 5100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Allow vertical touch so panel inside can scroll on iOS */
    touch-action: pan-y;
}

.ask-modal[hidden] { display: none; }

.ask-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.38s ease;
}

/* ── Panel ── */
.ask-modal-panel {
    position: relative;
    z-index: 1;
    background: rgba(18, 18, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 28px 32px 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.04);
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    transition: opacity 0.38s cubic-bezier(0.22,1,0.36,1),
                transform 0.38s cubic-bezier(0.22,1,0.36,1);
    will-change: transform, opacity;
}

.ask-modal.is-open .ask-modal-backdrop { opacity: 1; }
.ask-modal.is-open .ask-modal-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Close ── */
.ask-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(27,42,68,0.38);
    color: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ask-modal-close:hover {
    background: rgba(255,55,95,0.1);
    border-color: rgba(255,55,95,0.25);
    color: var(--color-pink);
}
.ask-modal-close i { width: 16px; height: 16px; }

/* ── Head ── */
.ask-modal-head { margin-bottom: 18px; padding-right: 28px; }

.ask-modal-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 8px;
}

.ask-modal-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.48);
    line-height: 1.6;
}

/* ── Form fields ── */
.ask-modal-form { display: flex; flex-direction: column; gap: 13px; }

.ask-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ask-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.01em;
}

.ask-field input,
.ask-field textarea {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
}

.ask-field input::placeholder,
.ask-field textarea::placeholder {
    color: rgba(255,255,255,0.25);
}

.ask-field input:focus,
.ask-field textarea:focus {
    border-color: rgba(34,211,238,0.5);
    background: rgba(34,211,238,0.04);
    box-shadow: 0 0 0 3px rgba(34,211,238,0.08);
}

/* Error state */
.ask-field.has-error input,
.ask-field.has-error textarea {
    border-color: rgba(255,55,95,0.5);
    box-shadow: 0 0 0 3px rgba(255,55,95,0.08);
}

.ask-field-error {
    font-size: 0.75rem;
    color: var(--color-pink);
    min-height: 1em;
    display: block;
    transition: opacity 0.2s;
}

/* ── Footer ── */
.ask-modal-footer {
    margin-top: 4px;
}

.ask-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    background: var(--gradient-brand);
    background-size: var(--gradient-brand-size);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    animation: gradientShift 8s ease infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}
.ask-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(106,55,252,0.4);
}
.ask-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.ask-submit-btn i { width: 16px; height: 16px; }

/* Loading dots */
.ask-submit-btn.loading .ask-btn-text::after {
    content: '...';
    animation: ellipsis 1s steps(4, end) infinite;
}
@keyframes ellipsis {
    0%, 100% { content: '.'; }
    33%       { content: '..'; }
    66%       { content: '...'; }
}

/* ── Success state ── */
.ask-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 0 8px;
    gap: 10px;
}

.ask-success[hidden] { display: none; }

.ask-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.ask-success-icon i { width: 24px; height: 24px; color: var(--color-green); }

.ask-success h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.ask-success p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.5);
}

/* ── Mobile ── */
@media screen and (max-width: 640px) {
    .ask-modal { padding: 0; align-items: flex-end; }

    .ask-modal-panel {
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        padding: 32px 22px 36px;
        transform: translateY(100%);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .ask-modal-title { font-size: 1.25rem; }
    .ask-modal-sub   { font-size: 0.82rem; }
    .ask-field input,
    .ask-field textarea { padding: 11px 14px; font-size: 0.86rem; border-radius: 11px; }
    .ask-submit-btn { padding: 13px; font-size: 0.88rem; border-radius: 11px; }
    .ask-modal-form { gap: 14px; }
    .ask-modal-head { margin-bottom: 22px; }
}

/* ── Scroll lock (body) ── */
body.ask-modal-open { width: 100%; }

/* ─── ADDON MODAL ─── */

/* ── Learn More button on addon rows ── */
.csp-addon-learn-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.08);
    color: #67e8f9;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 2;
}

/* Arrow icon via CSS so no extra HTML needed */
.csp-addon-learn-btn::after {
    content: '→';
    font-size: 0.72rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.csp-addon-learn-btn:hover {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.6);
    color: #22d3ee;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
}

.csp-addon-learn-btn:hover::after {
    transform: translateX(2px);
}

/* Management button gets purple tint */
#management-learn-btn {
    border-color: rgba(167, 139, 250, 0.35);
    background: rgba(167, 139, 250, 0.08);
    color: #c4b5fd;
}

#management-learn-btn:hover {
    background: rgba(167, 139, 250, 0.15);
    border-color: rgba(167, 139, 250, 0.6);
    color: #a78bfa;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.15);
}

/* ── Modal overlay ── */
.addon-info-modal {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    touch-action: pan-y;
}

.addon-info-modal[hidden] { display: none; }

.addon-info-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.38s ease;
}

.addon-info-modal.is-open .addon-info-backdrop { opacity: 1; }

/* ── Panel ── */
.addon-info-panel {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(18,18,30,0.96) 60%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    width: 100%;
    max-width: 500px;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 30px 28px 26px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    transition: opacity 0.38s cubic-bezier(0.22,1,0.36,1),
                transform 0.38s cubic-bezier(0.22,1,0.36,1);
    will-change: transform, opacity;
}

.addon-info-modal.is-open .addon-info-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Close button ── */
.addon-info-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.addon-info-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.addon-info-close i { width: 14px; height: 14px; }

/* ── Head ── */
.addon-info-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    padding-right: 24px;
}

.addon-info-icon {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.addon-info-icon i { width: 20px; height: 20px; }

.hosting-icon-clr {
    color: #22d3ee;
    background: rgba(34,211,238,0.08);
    border-color: rgba(34,211,238,0.2);
}
.mgmt-icon-clr {
    color: #a78bfa;
    background: rgba(167,139,250,0.08);
    border-color: rgba(167,139,250,0.2);
}

.addon-info-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 3px;
}

.addon-info-price {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
}

/* ── Intro text ── */
.addon-info-intro {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.65;
    margin: 0 0 18px;
}

/* ── Feature list ── */
.addon-info-list {
    list-style: none;
    padding: 0; margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.addon-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
}

.addon-info-list li i {
    width: 15px; height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(255,255,255,0.28);
}

.addon-info-list li strong {
    color: rgba(255,255,255,0.88);
    font-weight: 600;
}

/* ── Plan tiers (management modal) ── */
.addon-info-plans {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

.addon-info-plan {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 1px 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    position: relative;
}

.addon-info-plan.aip-recommended {
    border-color: rgba(167,139,250,0.25);
    background: rgba(167,139,250,0.05);
}

.aip-badge {
    position: absolute;
    top: -9px; left: 12px;
    font-size: 0.57rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a78bfa;
    background: rgba(167,139,250,0.15);
    border: 1px solid rgba(167,139,250,0.3);
    padding: 2px 7px;
    border-radius: 999px;
}

.aip-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.aip-price {
    font-size: 0.88rem;
    font-weight: 800;
    color: #a78bfa;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    text-align: right;
}

.aip-desc {
    font-size: 0.73rem;
    color: rgba(255,255,255,0.4);
    grid-column: 1 / 3;
    grid-row: 2;
    line-height: 1.45;
}

/* ── Note ── */
.addon-info-note {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.28);
    line-height: 1.5;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── Mobile bottom sheet ── */
@media screen and (max-width: 640px) {
    .addon-info-modal {
        padding: 0;
        align-items: flex-end;
    }

    .addon-info-panel {
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        padding: 24px 20px 32px;
        overflow-y: scroll;
        transform: translateY(100%);
    }
}

/* ─── CUSTOM PAGE ─── */

.custom-page-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 10% 80px;
    color: white;
}

.custom-header {
    text-align: center;
    margin-bottom: 40px;
}

.custom-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 12px;
}

.custom-header p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--text-secondary);
}

.custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

@keyframes customCardShimmer {
    0%   { transform: translateX(-120%) skewX(-14deg); }
    100% { transform: translateX(260%) skewX(-14deg); }
}

.custom-card {
    background: linear-gradient(
        140deg,
        rgba(20, 18, 36, 0.62) 0%,
        rgba(14, 12, 26, 0.72) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(27,42,68,0.38);
    border-top: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 4px 28px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    border-radius: 24px;
    padding: 24px 24px 20px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Shimmer sweep on hover */
.custom-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 55%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(255,255,255,0.045) 50%,
        transparent 75%
    );
    transform: translateX(-120%) skewX(-14deg);
    pointer-events: none;
    z-index: 0;
}
.custom-card:hover::before {
    animation: customCardShimmer 0.65s ease forwards;
}

/* Purple/cyan accent top line on hover */
.custom-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.30), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.custom-card:hover::after { opacity: 1; }

.custom-card:hover {
    border-color: rgba(255, 255, 255, 0.13);
    border-top-color: rgba(139, 92, 246, 0.35);
    background: linear-gradient(
        140deg,
        rgba(26, 22, 48, 0.70) 0%,
        rgba(18, 15, 32, 0.80) 100%
    );
    box-shadow:
        0 8px 36px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(99, 55, 220, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

/* All direct children need z-index above shimmer pseudo */
.custom-card > * { position: relative; z-index: 1; }

.custom-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.custom-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-card-icon i {
    width: 20px;
    height: 20px;
}

.included-icon {
    background: rgba(37, 99, 235, 0.15);
    color: #2563eb;
}

.options-icon {
    background: rgba(234, 179, 8, 0.18);
    color: #eab308;
}

.custom-card-title {
    font-size: 1.1rem;
    margin: 0 0 2px;
}

.custom-card-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.feature-list {
    list-style: none;
    padding: 14px 0 0;
    margin: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.feature-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.feature-icon {
    margin-top: 2px;
}

.included-check {
    color: var(--color-green);
}

.feature-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.88);
}

/* Custom checkboxes */
.option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.option-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fake-box {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 6px;
    border: 2px solid rgba(148, 163, 184, 0.7);
    background: transparent;
    position: relative;
    transition: all 0.2s ease;
}

.option-checkbox:checked+.fake-box {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.25);
}

.option-checkbox:checked+.fake-box::after {
    content: "";
    position: absolute;
    inset: 3px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.back-note {
    margin-top: 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* 3D Title */
.custom-title-3d {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
    filter:
        drop-shadow(0 2px 6px rgba(106, 55, 252, 0.5)) drop-shadow(0 8px 25px rgba(168, 85, 247, 0.6)) drop-shadow(0 16px 50px rgba(106, 55, 252, 0.25)) drop-shadow(0 24px 80px rgba(106, 55, 252, 0.12));
}

/* Starter badge */
.starter-included-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--color-green);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.starter-included-badge i {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Next step pill */
.next-step-wrapper {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.next-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, var(--color-purple-deep), var(--color-cyan));
    background-size: 200% 200%;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease;
}

.next-step-pill i {
    width: 16px;
    height: 16px;
}

.next-step-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    background-position: 100% 0;
}

/* Notes section */
.custom-notes-section {
    max-width: 1100px;
    margin: 30px auto 0;
    padding: 0 10%;
}

/* "Anything not listed?" optional tag inline */
.notes-optional-tag {
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.38);
    margin-left: 4px;
}

/* Scope disclaimer line under subtitle */
.notes-scope-disclaimer {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.32);
    margin: 5px 0 0;
    line-height: 1.5;
    font-style: italic;
}

.custom-notes-card {
    background: linear-gradient(
        140deg,
        rgba(0, 55, 70, 0.14) 0%,
        rgba(14, 12, 26, 0.72) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(34, 211, 238, 0.12);
    border-top: 2px solid rgba(34, 211, 238, 0.28);
    border-radius: 24px;
    padding: 24px 24px 18px;
    box-shadow:
        0 4px 28px rgba(0, 0, 0, 0.28),
        0 0 20px rgba(34, 211, 238, 0.05),
        0 1px 0 rgba(34, 211, 238, 0.06) inset;
}

.notes-icon {
    background: rgba(34, 211, 238, 0.15);
    color: var(--color-accent);
}

.custom-notes-body {
    margin-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    padding-top: 14px;
}

.custom-notes-body textarea {
    width: 100%;
    min-height: 160px;
    max-height: 500px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 15px;
    color: white;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: all 0.3s ease;
}

.custom-notes-body textarea::placeholder {
    color: var(--text-muted);
}

.custom-notes-body textarea:focus {
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.1);
}

.char-counter {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    transition: color 0.3s ease;
}

.char-counter.warning {
    color: var(--color-yellow);
}

.char-counter.danger {
    color: var(--color-pink);
}

/* FIX: 360px min-height on mobile textarea was way too tall */
@media screen and (max-width: 768px) {
    .custom-notes-body textarea {
        min-height: 120px;
    }

    .custom-notes-section {
        padding: 0 5%;
    }

    .custom-page-wrapper {
        padding: 60px 5% 60px;
    }
}

/* ─── ERROR 404 ─── */

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
    padding: 40px 20px;
    color: white;
}

/* FIX: clamp prevents 8rem from overflowing on small screens */
.error-code {
    font-size: clamp(4rem, 15vw, 8rem);
    font-weight: 800;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 4px 20px rgba(106, 55, 252, 0.4));
    line-height: 1;
    margin-bottom: 10px;
}

.error-title {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    margin-bottom: 12px;
    font-weight: 700;
}

.error-desc {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 450px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 50px;
    border: none;
    background: var(--gradient-brand);
    background-size: var(--gradient-brand-size);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: gradientShift 8s ease infinite;
}

.error-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(106, 55, 252, 0.5);
}

.error-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* ─── LEGAL ─── */

.legal-wrapper {
    max-width: 750px;
    margin: 0 auto;
    padding: 80px 8% 80px;
    color: white;
}

.legal-wrapper h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 5px;
}

.legal-date {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 40px;
}

.legal-wrapper h2 {
    font-size: 1.2rem;
    margin-top: 35px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.legal-wrapper p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-wrapper ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

.legal-wrapper li {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 6px;
}

/* FIX: added focus-visible and hover state on legal links */
.legal-wrapper a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-wrapper a:hover {
    color: #67e8f9;
}

.legal-wrapper a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ─── RESPONSIVE ─── */

/* Mobile-only about text — hidden on desktop */
.about-text-mobile { display: none; }

/* Services scroll outer — invisible passthrough on desktop */
.services-scroll-outer { display: contents; }

/* ── Hard-kill reveal animation on service cards at ALL viewport sizes ──
   The horizontal scroll container forces overflow-y:auto which clips
   any card with translateY applied. Belt-and-suspenders with JS. */
@media screen and (max-width: 768px) {
    .service-card.reveal,
    .service-card.revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================
   RESPONSIVE — All breakpoints
   Breakpoints:
     xl  > 1280px  (wide monitors)
     lg  1025–1280px
     md  769–1024px  (tablet landscape / small laptop)
     sm  481–768px   (tablet portrait / large phone)
     xs  ≤ 480px     (phone)
     xxs ≤ 380px     (small phone)
   ========================================================== */

@media screen and (min-width: 1281px) {
    .about-container   { max-width: 1200px; gap: 80px; }
    .services-grid     { max-width: 1300px; }
    .process-steps     { max-width: 780px; }
    .packages-grid     { max-width: 1100px; }
    .faq-container     { max-width: 820px; }
    .contact-container { max-width: 960px; }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* --- Hero --- */
    .hero-3d { font-size: 4rem; }

    .welcome p {
        font-size: 0.95rem;
        max-width: 600px;
    }

    .project-btn { padding: 14px 36px; font-size: 0.95rem; }

    /* --- Section headings --- */
    .section-intro.hero-size h2  { font-size: 2.5rem; }
    .section-intro.large-size h2 { font-size: 3rem; }

    .services-header h2,
    .packages-section h2,
    .process-header h2,
    .contact-header h2,
    .faq-header h2 { font-size: 2.5rem; }

    /* --- About bento --- */
    .about-section { padding: 70px 5% 50px; }
    .about-header { margin-bottom: 32px; }

    .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .bento-card--1 {
        grid-column: 1 / 3; grid-row: 1;
        display: grid;
        grid-template-columns: 46px 1fr;
        grid-template-rows: auto 1fr auto;
        column-gap: 16px;
        align-items: start;
    }
    .bento-card--1 .bento-icon {
        grid-column: 1; grid-row: 1 / 4;
        margin-bottom: 0; flex-shrink: 0; align-self: start;
    }
    .bento-card--1 h3 { grid-column: 2; grid-row: 1; }
    .bento-card--1 p  { grid-column: 2; grid-row: 2; }
    .bento-card--1 .bento-tag { grid-column: 2; grid-row: 3; }
    .bento-card--2 { grid-column: 1; grid-row: 2; }
    .bento-card--3 { grid-column: 2; grid-row: 2; }
    .bento-card--4 { grid-column: 1 / 3; grid-row: 3; }

    /* --- Services --- */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 720px;
        margin: 0 auto;
    }

    .service-card { padding: 28px 22px; }

    /* --- Process --- */
    .process-section { padding: 80px 10%; }
    .process-steps { max-width: 600px; }
    .step-card { padding: 24px 22px; }

    /* --- Packages --- */
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 680px;
        gap: 18px;
    }

    .package-card { padding: 22px 20px; }

    /* --- FAQ --- */
    .faq-container { max-width: 680px; }

    /* --- Contact --- */
    .contact-container {
        max-width: 700px;
        padding: 40px 35px;
    }

    /* --- Custom page --- */
    .custom-title-3d { font-size: 2.2rem; }
    .custom-page-wrapper { padding: 60px 8% 50px; }
    .custom-grid { max-width: 650px; margin: 0 auto; }
    .custom-notes-section { max-width: 650px; }
    .custom-header h1 { font-size: 2.5rem; }

    /* --- Footer --- */
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }
}

@media screen and (max-width: 768px) {

    /* ── Hero ── */
    .hero-3d {
        font-size: clamp(2.6rem, 9.5vw, 3.4rem);
        padding: 0 16px;
        margin-bottom: 12px;
    }

    .hero-line-1:hover, .hero-line-2:hover { transform: none; }

    .welcome {
        padding-top: 44px;
        padding-bottom: 20px;
    }

    .welcome p {
        font-size: 0.78rem;
        line-height: 1.55;
        padding: 0 20px;
        margin-bottom: 14px;
    }

    .project-btn {
        padding: 12px 30px;
        font-size: 0.88rem;
        margin-top: 1.2rem;
    }

    /* ── Value boxes — horizontal scrollable row ── */
    .value-section { padding: 20px 0 16px; }

    .value-container {
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Top: 18px so box-shadow glow + hover translateY(-7px) don't clip */
        padding: 18px 16px 18px;
        justify-content: flex-start;
    }

    .value-container::-webkit-scrollbar { display: none; }

    .value-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex-shrink: 0;
        flex: none;
        width: 138px;
        padding: 14px 12px;
        border-radius: 14px;
        gap: 0;
    }

    .value-box h2,
    .value-box p,
    .value-stat { text-align: center; }

    .value-stat {
        font-size: 1.45rem;
        margin-bottom: 3px;
        letter-spacing: -0.01em;
    }
    .value-stat span { font-size: 0.60rem; }

    .value-box h2 { font-size: 0.76rem; margin-bottom: 2px; line-height: 1.3; }
    .value-box p  { font-size: 0.66rem; line-height: 1.4; }

    .value-icon {
        width: 34px; height: 34px; min-width: 34px;
        margin-bottom: 8px; border-radius: 10px;
    }
    .value-icon i { width: 15px; height: 15px; }

    /* ── Section headings — tighter ── */
    .section-intro { margin-bottom: 20px; }

    .section-intro.hero-size h2  { font-size: clamp(1.5rem, 5vw, 1.9rem); }
    .section-intro.large-size h2 { font-size: clamp(1.6rem, 5.5vw, 2rem); }

    .section-intro::after { width: 40px; height: 2px; margin-top: 10px; }

    .section-intro .section-sub {
        font-size: 0.8rem;
        padding: 0 12px;
        margin-top: 6px;
    }

    .section-intro .badge {
        font-size: 0.68rem;
        padding: 4px 10px;
        margin-bottom: 8px;
    }

    .section-dots { margin-bottom: 8px; gap: 4px; }
    .section-dots span { width: 4px; height: 4px; }

    .services-header h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); }
    .packages-section h2 { font-size: clamp(1.6rem, 5vw, 2rem); }
    .process-header h2   { font-size: clamp(1.5rem, 5vw, 1.9rem); }
    .contact-header h2   { font-size: clamp(1.4rem, 4.5vw, 1.7rem); }
    .faq-header h2       { font-size: clamp(1.5rem, 5vw, 1.9rem); }

    /* ── Section padding — significantly tighter ── */
    .about-section    { padding: 36px 5%; }
    .services-section { padding: 36px 4%; }
    .process-section  { padding: 36px 5%; }
    .packages-section { padding: 32px 4%; }
    .faq-section      { padding: 36px 5%; }
    .contact-section  { padding: 36px 5%; }

    /* ── About — bento stacked on mobile ── */
    .about-section { padding: 36px 4% 28px; }
    .about-header { margin-bottom: 20px; }
    .about-lead { font-size: 0.8rem; }

    .bento-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .bento-card--1, .bento-card--2,
    .bento-card--3, .bento-card--4 {
        grid-column: unset;
        grid-row: unset;
        width: 100%;
        box-sizing: border-box;
    }

    /* Shell — equal padding both sides */
    .bento-card {
        padding: 13px 14px;
        border-radius: 14px;
        border-left-width: 3px;
        border-top-width: 1px;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* Cards 1-3: 2-col grid — icon left, content right */
    .bento-card--1,
    .bento-card--2,
    .bento-card--3 {
        display: grid;
        grid-template-columns: 34px 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 11px;
        row-gap: 0;
        align-items: start;
    }

    /* Icon: spans all 3 rows, left col */
    .bento-card--1 .bento-icon,
    .bento-card--2 .bento-icon,
    .bento-card--3 .bento-icon {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
        justify-self: start;
        margin: 2px 0 0 0;
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 9px;
    }

    .bento-card--1 h3,
    .bento-card--2 h3,
    .bento-card--3 h3 {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 4px;
        align-self: start;
    }

    .bento-card--1 p,
    .bento-card--2 p,
    .bento-card--3 p {
        grid-column: 2;
        grid-row: 2;
        margin-bottom: 8px;
        align-self: start;
    }

    /* Tags: MUST have justify-self:start so they don't stretch full cell width */
    .bento-card--1 .bento-tag,
    .bento-card--2 .bento-tag,
    .bento-card--3 .bento-tag {
        grid-column: 2;
        grid-row: 3;
        display: inline-flex;
        justify-self: start;
        align-self: start;
        margin-top: 0;
    }

    /* Card 4: flex row (has .bento-content wrapper) */
    .bento-card--4 {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 11px;
        padding: 13px 14px;
    }
    .bento-card--4 .bento-icon {
        width: 34px; height: 34px; min-width: 34px;
        border-radius: 9px;
        margin: 2px 0 0 0;
        flex-shrink: 0;
    }
    .bento-card--4 .bento-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .bento-card--4 .bento-tag {
        display: inline-flex;
        align-self: flex-start;
    }

    /* Left accent colors */
    .bento-card--1 { border-left-color: rgba(0, 210, 255, 0.6); }
    .bento-card--2 { border-left-color: rgba(139, 92, 246, 0.6); }
    .bento-card--3 { border-left-color: rgba(255, 55, 95, 0.6); }
    .bento-card--4 { border-left-color: rgba(255, 174, 0, 0.6); }

    .bento-icon i { width: 15px; height: 15px; }
    .bento-num { display: none; }

    .bento-card h3,
    .bento-card--1 h3 { font-size: 0.87rem; line-height: 1.3; }
    .bento-card p     { font-size: 0.74rem; line-height: 1.52; color: rgba(185,195,217,0.75); }
    .bento-tag        { font-size: 0.58rem; padding: 2px 8px; }

    /* Kill entrance animations on mobile */
    .bento-from-left, .bento-from-right,
    .bento-from-top,  .bento-from-bottom {
        opacity: 1 !important;
        transform: none !important;
    }

    @keyframes bentoPop {
        from { opacity: 0; transform: translateY(12px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .bento-card--1 { animation: bentoPop 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.05s both; }
    .bento-card--2 { animation: bentoPop 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.13s both; }
    .bento-card--3 { animation: bentoPop 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.21s both; }
    .bento-card--4 { animation: bentoPop 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.29s both; }

    /* ── Services — horizontal scroll on mobile ── */

    /* Step out of the section's padding so scroll reaches true screen edges */
    .services-section {
        padding-left: 0;
        padding-right: 0;
    }

    .services-header {
        padding-left: 4%;
        padding-right: 4%;
    }

    /* Outer wrapper: full-width breakout, overflow visible so glows aren't clipped */
    .services-scroll-outer {
        width: 100vw;
        max-width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        overflow: visible;
        /* More vertical room so box-shadow glows + hover lift never touch the edge */
        padding: 40px 0 28px;
        /* Fade only L/R edges — mask-size 100% 100% means full height is painted */
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0px,
            black 18px,
            black calc(100% - 18px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0px,
            black 18px,
            black calc(100% - 18px),
            transparent 100%
        );
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /* Inner grid: handles the horizontal scroll only */
    .services-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
        gap: 12px;
        /* Top/bottom padding: 20px/24px leaves room for glow + translateY(-8px) hover */
        padding: 20px 80px 24px 16px;
        align-items: stretch;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .services-grid::-webkit-scrollbar { display: none; }

    .service-card {
        flex-shrink: 0;
        width: 240px;
        max-width: none;
        text-align: left;
        padding: 22px 20px 20px;
        border-radius: 16px;
        margin: 0;
    }

    .service-card h3 { font-size: 0.97rem; margin-bottom: 8px; }
    .service-card p  { font-size: 0.77rem; line-height: 1.55; }
    .service-icon    { font-size: 1.3rem; margin-bottom: 12px; }
    .service-icon i  { width: 22px; height: 22px; }

    .service-card-cta {
        margin-top: 12px;
        padding: 4px 11px;
        font-size: 0.63rem;
        gap: 4px;
        letter-spacing: 0.02em;
    }
    .service-card-cta i { width: 10px; height: 10px; }

    /* Inquiry card same width */
    .service-card.inquiry-card {
        width: 250px;
        padding: 22px 20px 18px;
        max-width: none;
        margin: 0;
    }

    .inquiry-card-cta {
        margin-top: 12px;
        padding: 4px 11px;
        font-size: 0.63rem;
        gap: 4px;
        letter-spacing: 0.02em;
    }
    .inquiry-card-cta i { width: 10px; height: 10px; }

    /* ── Process — horizontal swipe carousel on mobile ── */
    .process-section { padding: 36px 0 28px; }

    .process-header {
        padding: 0 4%;
        margin-bottom: 20px;
    }

    /* Full-width breakout for the swipe container */
    .process-steps {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
        gap: 10px;
        padding: 8px 16px 20px;
        max-width: 100%;
        /* Fade edges */
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
    }
    .process-steps::-webkit-scrollbar { display: none; }

    /* Hide chevron connectors — not needed in horizontal layout */
    .step-connector { display: none; }

    /* Cards become fixed-width swipeable tiles */
    .step-card {
        flex-shrink: 0;
        width: 72vw;
        max-width: 260px;
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 16px 20px;
        border-radius: 16px;
        border-left-width: 1px;
        border-top-width: 2px;
        gap: 0;
    }

    /* Per-step top border color on mobile */
    .step-card:nth-child(1)  { border-top-color: rgba(0, 210, 255, 0.6); }
    .step-card:nth-child(3)  { border-top-color: rgba(165, 94, 234, 0.6); }
    .step-card:nth-child(5)  { border-top-color: rgba(255, 55, 95, 0.6); }
    .step-card:nth-child(7)  { border-top-color: rgba(255, 174, 0, 0.6); }

    /* Mobile: opacity dim/highlight works fine in horizontal scroll.
       Only transforms are suppressed — translateX/scale break the scroll container. */
    .process-steps.has-active .step-card:not(.is-active) {
        opacity: 0.35;
        transform: none;
    }
    .step-card.is-active {
        opacity: 1;
        transform: none;
    }

    .step-card::after { font-size: 4.5rem; bottom: -12px; right: 8px; }

    .step-number { font-size: 0.56rem; top: 10px; right: 12px; }

    .step-icon {
        width: 38px; height: 38px; min-width: 38px;
        border-radius: 10px;
        margin-bottom: 12px;
    }
    .step-icon i { width: 16px; height: 16px; }

    .step-body { width: 100%; }
    .step-body h3 { font-size: 0.88rem; margin-bottom: 4px; }
    .step-body p  { font-size: 0.75rem; line-height: 1.55; }

    .step-tag { font-size: 0.58rem; padding: 2px 7px; margin-bottom: 8px; }

    /* ── Packages ── */
    .packages-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .package-card {
        width: 100%;
        max-width: 400px;
        padding: 20px 18px 16px;
        margin: 0 auto;
        min-height: auto;
        border-radius: 16px;
    }

    .package-card h3 { font-size: 0.76rem; margin-bottom: 5px; }
    .price           { font-size: 1.5rem; margin-bottom: 2px; }
    .sub-price       { font-size: 0.74rem; margin-bottom: 14px; }
    .card-feature    { margin-bottom: 7px; }
    .card-feature p  { font-size: 0.82rem; }
    .card-feature i  { width: 14px; height: 14px; }
    .features-list   { margin-bottom: 16px; }
    .package-btn { padding: 11px; font-size: 0.83rem; border-radius: 10px; }
    /* Popular tag stays inside card on mobile — no clip */
    .popular-tag { font-size: 0.58rem; padding: 3px 10px; top: 10px; left: 14px; }
    /* Popular card: enough top padding to clear the tag (~30px tall) before icon starts */
    .service-card.popular { padding-top: 38px; }

    .tier-note {
        max-width: 95vw;
        font-size: 0.68rem;
        padding: 6px 13px;
        gap: 5px;
        white-space: normal;
        line-height: 1.5;
        text-align: center;
    }

    .service-pill-wrapper { margin-top: 14px; margin-bottom: 4px; }
    .service-pill { max-width: 95vw; padding: 5px 5px 5px 12px; gap: 8px; }
    .pill-label { font-size: 0.72rem; }
    .pill-value { font-size: 0.75rem; }
    .pill-action { padding: 5px 9px; font-size: 0.6rem; border-radius: 20px; gap: 3px; }
    .pill-action i { width: 10px; height: 10px; }

    /* ── FAQ — compact ── */
    .faq-container { gap: 6px; max-width: 100%; margin: 0; }
    .faq-question { font-size: 0.84rem; padding: 13px 16px; }
    .faq-question i { width: 15px; height: 15px; }
    .faq-answer { padding: 0 16px; }
    .faq-item.active .faq-answer { padding: 0 16px 12px; }
    .faq-answer p { font-size: 0.8rem; line-height: 1.6; }
    .faq-item { border-radius: 12px; }

    /* ── Contact ── */
    .form-row { flex-direction: column; gap: 0; margin-bottom: 0; }
    .form-group { margin-bottom: 14px; gap: 6px; }
    .form-group label { font-size: 0.82rem; }
    /* 1rem = 16px: prevents iOS Safari auto-zoom on input focus */
    .contact-form input, .contact-form select, .contact-form textarea { padding: 12px; font-size: 1rem; border-radius: 11px; }
    .contact-form textarea { min-height: 110px; }
    .contact-container { padding: 24px 18px; border-radius: 18px; margin: 18px auto 0; width: 100%; max-width: 100%; }
    .send-btn { padding: 13px; font-size: 0.9rem; border-radius: 11px; margin-top: 4px; }

    /* Order summary pill */
    .csp-card.mgmt-mode .csp-header { padding-right: 16px; }
    .csp-card.mgmt-mode .csp-header-summary { white-space: normal; }

    /* Clear selection */
    .clear-selection-wrapper { margin-top: 14px; margin-bottom: 8px; }
    .clear-selection-pill {
        flex-direction: column; gap: 8px;
        padding: 12px 16px; border-radius: 14px;
        text-align: center; max-width: 340px;
    }
    .clear-pill-text { flex-direction: column; gap: 3px; font-size: 0.73rem; }
    .clear-pill-text i { width: 13px; height: 13px; }
    .clear-pill-btn { width: 100%; justify-content: center; padding: 8px 14px; font-size: 0.74rem; }

    /* Contact summary pill */
    .contact-summary-pill {
        max-width: 95vw; padding: 7px 12px; gap: 7px;
        flex-wrap: wrap; justify-content: center; text-align: center;
    }
    .contact-summary-pill .pill-label,
    .contact-summary-pill .pill-value { font-size: 0.72rem; }
    .contact-summary-pill .pill-value { white-space: normal; word-break: break-word; }

    /* ── Payment ── */
    .payment-methods-card { padding: 16px 16px; gap: 12px; border-radius: 16px; }
    .payment-badges { gap: 7px; }
    .payment-badge { padding: 6px 12px; font-size: 0.74rem; }
    .payment-secure-note { font-size: 0.62rem; text-align: center; }

    /* ── Footer ── */
    .footer-container { grid-template-columns: 1fr; gap: 22px; text-align: center; }
    .footer-brand { display: flex; flex-direction: column; align-items: center; }
    .footer-brand p { max-width: 280px; font-size: 0.78rem; margin-bottom: 12px; }
    .footer-logo { font-size: 1.05rem; }
    .footer-socials { justify-content: center; }
    .footer-socials a { width: 32px; height: 32px; border-radius: 8px; }
    .footer-socials a i { width: 14px; height: 14px; }
    .footer-links { align-items: center; gap: 7px; }
    .footer-links h4 { font-size: 0.76rem; margin-bottom: 2px; }
    .footer-links a { font-size: 0.76rem; }
    .footer-bottom { text-align: center; flex-direction: column; gap: 5px; }
    .footer-bottom p { font-size: 0.66rem; }
    .site-footer { padding: 36px 5% 18px; margin-top: 16px; }
    .footer-divider { margin: 20px auto 12px; }

    /* ── Custom page ── */
    .custom-page-wrapper { padding: 44px 5% 36px; }
    .custom-header { margin-bottom: 20px; }
    .custom-header h1 { font-size: 1.7rem; }
    .custom-header p { font-size: 0.84rem; }
    .custom-grid { gap: 12px; margin-top: 12px; }
    .custom-title-3d { font-size: 1.75rem; }
    .custom-card { padding: 18px 16px 14px; border-radius: 14px; }
    .custom-card-header { gap: 9px; margin-bottom: 10px; }
    .custom-card-icon { width: 34px; height: 34px; border-radius: 9px; }
    .custom-card-icon i { width: 16px; height: 16px; }
    .custom-card-title { font-size: 0.9rem; }
    .custom-card-subtitle { font-size: 0.76rem; }
    .feature-row { margin-bottom: 7px; gap: 7px; }
    .feature-text { font-size: 0.82rem; }
    .next-step-pill { width: 100%; max-width: 260px; justify-content: center; font-size: 0.78rem; padding: 10px 20px; }
    .custom-notes-card { padding: 16px 14px 12px; border-radius: 14px; }
    .custom-notes-card .custom-card-header { flex-direction: column; align-items: center; text-align: center; }
    .custom-notes-body textarea { min-height: 110px; font-size: 1rem; padding: 11px; border-radius: 11px; }
    .char-counter { font-size: 0.66rem; margin-top: 4px; }

    /* ── Error page ── */
    .error-code  { font-size: 4rem; }
    .error-title { font-size: 1.1rem; margin-bottom: 8px; }
    .error-desc  { font-size: 0.85rem; margin-bottom: 26px; }
    .error-btn   { padding: 11px 26px; font-size: 0.88rem; }
}

@media screen and (max-width: 480px) {

    .hero-3d { font-size: clamp(2.2rem, 8.5vw, 2.7rem); padding: 0 14px; }
    .welcome p { font-size: 0.77rem; padding: 0 14px; }
    .project-btn { padding: 10px 26px; font-size: 0.82rem; }

    .section-intro.hero-size h2  { font-size: 1.4rem; }
    .section-intro.large-size h2 { font-size: 1.55rem; }
    .packages-section h2 { font-size: 1.55rem; }
    .contact-header h2   { font-size: 1.35rem; }

    /* Value row — tighter cards */
    .value-box { width: 122px; padding: 12px 10px; }
    .value-stat { font-size: 1.25rem; }
    .value-stat span { font-size: 0.56rem; }
    .value-box h2 { font-size: 0.72rem; }
    .value-box p  { font-size: 0.62rem; }
    .value-icon { width: 30px; height: 30px; min-width: 30px; }
    .value-icon i { width: 13px; height: 13px; }

    /* Service cards narrower */
    .service-card { width: 218px; padding: 19px 17px 17px; }
    .service-card h3 { font-size: 0.9rem; }
    .service-card p  { font-size: 0.73rem; }
    .service-card.inquiry-card { width: 228px; }

    /* Process — narrower cards on small screens */
    .step-card { width: 78vw; max-width: 230px; padding: 14px 13px 16px; }
    .step-card::after { font-size: 3.5rem; }
    .step-icon { width: 34px; height: 34px; min-width: 34px; }
    .step-body h3 { font-size: 0.85rem; }
    .step-body p  { font-size: 0.73rem; }

    /* Packages */
    .package-card { max-width: 340px; padding: 17px 15px 14px; }
    .price { font-size: 1.35rem; }
    .card-feature p { font-size: 0.79rem; }
    .package-btn { padding: 10px; font-size: 0.8rem; }

    /* FAQ */
    .faq-question { font-size: 0.81rem; padding: 12px 14px; }
    .faq-answer p { font-size: 0.78rem; }

    /* Contact */
    .contact-container { padding: 18px 14px; border-radius: 16px; }
    /* Keep 1rem so iOS Safari doesn't zoom on focus */
    .contact-form input, .contact-form select, .contact-form textarea { padding: 11px; font-size: 1rem; }

    /* Custom page */
    .custom-page-wrapper { padding: 36px 4% 28px; }
    .custom-header h1 { font-size: 1.5rem; }
    .custom-notes-body textarea { min-height: 100px; }

    /* Error */
    .error-code { font-size: 3.5rem; }
}

@media screen and (max-width: 380px) {

    .hero-3d { font-size: 2rem; }
    .welcome p { font-size: 0.74rem; padding: 0 12px; }

    .value-box { width: 112px; padding: 10px 8px; }
    .value-stat { font-size: 1.1rem; }
    .value-box h2 { font-size: 0.68rem; }

    .feature-item { padding: 11px 12px 13px; gap: 10px; }
    .feature-info h3 { font-size: 0.8rem; }
    .feature-info p  { font-size: 0.71rem; }
    .icon-box { width: 34px; height: 34px; min-width: 34px; }

    .service-card { width: 200px; padding: 17px 15px; }
    .step-card { width: 82vw; max-width: 210px; padding: 12px 12px 14px; }
    .package-card { max-width: 300px; padding: 15px 13px 12px; }
    .faq-container { gap: 5px; }
    .faq-question { font-size: 0.78rem; padding: 11px 13px; }

    .contact-container { padding: 16px 13px; }

    .csp-header-summary { white-space: normal; overflow: visible; text-overflow: unset; }
    .csp-toggle-btn { padding: 5px 9px; font-size: 0.68rem; }

    .payment-badge { padding: 5px 9px; font-size: 0.66rem; }
    .payment-badges { gap: 5px; }

    .service-pill { padding: 5px 5px 5px 10px; gap: 7px; }
    .pill-label { font-size: 0.68rem; }
    .pill-value { font-size: 0.7rem; }
    .pill-action { padding: 4px 7px; font-size: 0.56rem; }

    .tier-note { font-size: 0.62rem; padding: 5px 10px; }
}

/* ─── MISSING RULES (were never in any source file — added here) ─── */

/* Page loader overlay — hidden by default, JS removes .active if present */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.page-loader.active {
    opacity: 1;
    pointer-events: all;
}
.loader-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.1);
    border-top-color: var(--color-accent);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Body state classes */
body.no-scroll { overflow: hidden; }

/* Cyan gradient text (companion to .purple-gradient) */
.cyan-gradient {
    background: linear-gradient(to right, var(--color-cyan), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
}

/* packages-header layout wrapper */
.packages-header { text-align: center; margin-bottom: 8px; }

/* change-service-btn inherits .pill-action — no extra styles needed */