
:root {
    --ember: #3A6FF8;
    --ember-rgb: 58, 111, 248;
    --ink: #0B0B0F;
    --paper: #FFFFFF;

    --c1: #2563EB;
    --c2: #0EA5E9;
    --c3: #10B981;
    --c4: #8B5CF6;
    --c5: #F59E0B;
    --pos: #16A34A;
    --neg: #DC2626;

    --ds-font: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ds-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
    --font-sans: var(--ds-font);
    --font-body: var(--ds-font);
    --font-display: var(--ds-font);
    --font-mono: var(--ds-mono);

    --ds-r-xs: 6px;
    --ds-r-sm: 8px;
    --ds-r: 10px;
    --ds-r-md: 12px;
    --ds-r-lg: 16px;
    --ds-r-xl: 20px;
    --ds-r-2xl: 28px;
    --ds-r-full: 999px;
    --r-xs: var(--ds-r-xs);
    --r-sm: var(--ds-r);
    --r: var(--ds-r-md);
    --r-md: var(--ds-r-lg);
    --r-lg: var(--ds-r-xl);

    --ds-ease: cubic-bezier(.2, .8, .2, 1);
    --ds-ease-out: cubic-bezier(.16, 1, .3, 1);
    --ds-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --ds-fast: 150ms;
    --ds-base: 240ms;
    --ds-slow: 600ms;
    --transition: var(--ds-base) var(--ds-ease);
    --transition-slow: var(--ds-slow) var(--ds-ease-out);

    --container: 1200px;
}

html[data-theme="light"] {
    --bg: #FFFFFF;
    --bg-soft: #FAFAFA;
    --surface: #FFFFFF;
    --surface-2: #F4F4F5;
    --surface-3: #E4E4E7;
    --border: #E4E4E7;
    --border-strong: #D4D4D8;
    --text: #09090B;
    --text-soft: #52525B;
    --text-muted: #71717A;

    --primary: #3A6FF8;
    --primary-fg: #FFFFFF;
    --primary-hover: #2554DA;
    --accent: #3A6FF8;
    --accent-rgb: 58, 111, 248;
    --accent-fg: #FFFFFF;
    --tint-rgb: 9, 9, 11;
    --shadow-rgb: 9, 9, 11;
    --ring: 0 0 0 3px rgba(9, 9, 11, .10);

    --nav-bg: rgba(255, 255, 255, .78);
    --glass: rgba(255, 255, 255, .72);
    --glass-border: rgba(9, 9, 11, .08);
    --hero-grid: rgba(9, 9, 11, .045);

    --ds-shadow-xs: 0 1px 2px rgba(9, 9, 11, .05);
    --ds-shadow-sm: 0 1px 3px rgba(9, 9, 11, .06), 0 1px 2px rgba(9, 9, 11, .04);
    --ds-shadow: 0 4px 12px -2px rgba(9, 9, 11, .06), 0 2px 4px -2px rgba(9, 9, 11, .04);
    --ds-shadow-lg: 0 24px 48px -16px rgba(9, 9, 11, .14), 0 8px 16px -8px rgba(9, 9, 11, .06);
    --shadow: var(--ds-shadow);
    --shadow-orange: var(--ds-shadow);
    --orange-glow: rgba(9, 9, 11, .04);
    --orange-soft: rgba(9, 9, 11, .04);
    color-scheme: light;
}

:root, [data-theme="dark"] {
    --bg: #09090B;
    --bg-soft: #0C0C0F;
    --surface: #111114;
    --surface-2: #18181B;
    --surface-3: #27272A;
    --border: #232327;
    --border-strong: #34343A;
    --text: #FAFAFA;
    --text-soft: #A1A1AA;
    --text-muted: #71717A;

    --primary: #FAFAFA;
    --primary-fg: #09090B;
    --primary-hover: #E4E4E7;
    --accent: #3B82F6;
    --accent-rgb: 59, 130, 246;
    --accent-fg: #FFFFFF;
    --tint-rgb: 250, 250, 250;
    --shadow-rgb: 0, 0, 0;
    --ring: 0 0 0 3px rgba(250, 250, 250, .12);

    --nav-bg: rgba(9, 9, 11, .72);
    --glass: rgba(17, 17, 20, .72);
    --glass-border: rgba(250, 250, 250, .08);
    --hero-grid: rgba(250, 250, 250, .035);

    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --ds-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6);
    --ds-shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(250, 250, 250, .03);
    --shadow: var(--ds-shadow);
    --shadow-orange: var(--ds-shadow);
    --orange-glow: rgba(250, 250, 250, .035);
    --orange-soft: rgba(250, 250, 250, .05);
    color-scheme: dark;
}

:root, [data-theme="dark"], [data-theme="light"] {
    --orange: var(--accent);
    --orange-red: var(--accent);
    --orange-yellow: var(--accent);
    --orange-light: var(--accent);
}

html { font-family: var(--ds-font); background: var(--bg); }
body {
    font-family: var(--ds-font);
    background: var(--bg);
    color: var(--text);
    font-feature-settings: 'ss01', 'cv11';
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ds-font);
    font-weight: 600;
    letter-spacing: -0.035em;
}
h4, h5, h6 { letter-spacing: -0.02em; }
p { color: var(--text-soft); }
a:hover { color: var(--text); }
::selection { background: var(--text); color: var(--bg); }
[data-theme="light"] ::selection { background: var(--text); color: var(--bg); }
::-webkit-scrollbar-thumb, [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover, [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
::-webkit-scrollbar-track, [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }
.num, [data-count] { font-variant-numeric: tabular-nums; }

.gradient-text,
.gradient-text-cool {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
}

.hero-glow, .hero-glow-1, .hero-glow-2 { display: none !important; }
.hero-grid-overlay {
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}

.container { max-width: var(--container); padding: 0 24px; }
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section-title {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.08;
    margin-bottom: 16px;
    text-wrap: balance;
}
.section-subtitle {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: var(--text-soft);
    line-height: 1.65;
    max-width: 620px;
    text-wrap: pretty;
}
[style*="background:var(--bg-soft)"], [style*="background: var(--bg-soft)"] {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.eyebrow, .ds-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 10px;
    border-radius: var(--ds-r-full);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--ds-shadow-xs);
    color: var(--text-soft);
    font-size: .78rem; font-weight: 500;
    letter-spacing: 0; text-transform: none;
    margin-bottom: 20px;
}
.eyebrow::before, .ds-eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 0 3px rgba(var(--ember-rgb), .16);
}

.btn {
    height: 40px;
    padding: 0 18px;
    border-radius: var(--ds-r);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    gap: 8px;
    transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease),
                border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-base) var(--ds-ease),
                transform var(--ds-fast) var(--ds-ease);
}
.btn:active { transform: scale(.98) !important; }
.btn svg { width: 16px; height: 16px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: .95rem; border-radius: var(--ds-r-md); }
.btn-sm { height: 34px; padding: 0 14px; font-size: .84rem; border-radius: var(--ds-r-sm); }
.btn-block { width: 100%; }
.btn-primary,
.work-featured-cta .btn-primary {
    background: var(--primary) !important;
    color: var(--primary-fg) !important;
    border: 1px solid var(--primary) !important;
    box-shadow: var(--ds-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
.btn-primary:hover,
.work-featured-cta .btn-primary:hover {
    background: var(--primary-hover) !important;
    color: var(--primary-fg) !important;
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow) !important;
}
.btn-primary:hover svg { transform: translateX(2px); }
.btn-secondary,
.work-featured-cta .btn-secondary {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--ds-shadow-xs) !important;
    backdrop-filter: none !important;
}
.btn-secondary:hover,
.work-featured-cta .btn-secondary:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
    transform: translateY(-1px);
}
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-outline:hover { background: var(--surface-2); color: var(--text); box-shadow: none; }
.btn-ghost { color: var(--text-soft); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-accent { background: var(--ember); color: #fff; border: 1px solid var(--ember); }
.btn-accent:hover { color: #fff; filter: brightness(1.05); transform: translateY(-1px); }

.nav {
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 0 !important;
    padding-top: 12px;
    transition: padding var(--ds-base) var(--ds-ease);
}
.nav.scrolled { padding-top: 8px; }
.nav-inner {
    height: 60px;
    max-width: 1240px;
    padding: 0 10px 0 18px;
    background: var(--nav-bg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--border);
    border-radius: var(--ds-r-lg);
    box-shadow: var(--ds-shadow-sm);
    transition: box-shadow var(--ds-base) var(--ds-ease), background var(--ds-base) var(--ds-ease);
}
.nav.scrolled .nav-inner { box-shadow: var(--ds-shadow); }
@media (min-width: 1265px) { .nav-inner { width: calc(100% - 24px); } }
@media (max-width: 1264px) { .nav-inner { width: calc(100% - 24px); } }

.ds-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.ds-logo:hover { color: var(--text); }
.ds-logo-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; transition: transform var(--ds-base) var(--ds-ease-spring); }
.ds-logo:hover .ds-logo-mark { transform: rotate(-6deg) scale(1.04); }
.ds-logo-word { font-family: var(--ds-font); font-weight: 700; font-size: 1.28rem; letter-spacing: -0.045em; line-height: 1; }
.ds-logo-word small { display: block; font-size: .56rem; font-weight: 500; letter-spacing: .02em; color: var(--text-muted); margin-top: 3px; }
.ds-mark-shield { fill: var(--ember); }
.ds-mark-eagle { fill: #FFFFFF; }
.ds-mark-eye { fill: var(--ember); }
.footer .ds-logo-mark { width: 38px; height: 38px; }
.footer .ds-logo-word { font-size: 1.55rem; }

.nav-menu { gap: 0; }
.nav-link {
    padding: 7px 12px;
    border-radius: var(--ds-r-sm);
    font-size: .89rem;
    font-weight: 500;
    color: var(--text-soft);
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.active { color: var(--text); background: var(--surface-2); }
.nav-link.active::after, .nav-link::after { display: none !important; }
.nav-icon-btn {
    width: 36px; height: 36px;
    border-radius: var(--ds-r-sm);
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-soft) !important;
    box-shadow: none !important;
}
.nav-icon-btn:hover { color: var(--text) !important; background: var(--surface-2) !important; border-color: var(--border-strong) !important; }
.nav-icon-btn svg { width: 16px; height: 16px; }
.nav-lang-switch {
    height: 36px; padding: 3px;
    display: inline-flex; align-items: center; gap: 2px;
    border-radius: var(--ds-r-sm);
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
}
.nav-lang-switch span { display: none; }
.nav-lang-switch a {
    height: 28px; min-width: 32px; padding: 0 8px;
    display: grid; place-items: center;
    border-radius: 6px;
    font-size: .74rem; font-weight: 600; letter-spacing: .02em;
    color: var(--text-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: all var(--ds-fast) var(--ds-ease);
}
.nav-lang-switch a.active { background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--ds-shadow-xs) !important; }
.nav-profile-login {
    width: auto !important; padding: 0 14px !important; gap: 7px;
    background: var(--primary) !important; color: var(--primary-fg) !important;
    border-color: var(--primary) !important;
    font-size: .85rem; font-weight: 500;
}
.nav-profile-login:hover { background: var(--primary-hover) !important; color: var(--primary-fg) !important; }
.nav-profile-login svg { width: 15px; height: 15px; }

.nav-mega-panel {
    top: calc(100% + 6px) !important;
}
.nav-mega-panel-inner {
    max-width: 1216px !important;
    margin: 0 auto;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--ds-r-xl) !important;
    box-shadow: var(--ds-shadow-lg) !important;
    overflow: hidden;
}
.nav-mega-title { color: var(--text-muted) !important; font-size: .72rem !important; letter-spacing: .06em !important; font-weight: 600 !important; }
.nav-mega-link { border-radius: var(--ds-r-md) !important; }
.nav-mega-link:hover { background: var(--surface-2) !important; }
.nav-mega-icon {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--ds-r-sm) !important;
    box-shadow: var(--ds-shadow-xs);
}
.nav-mega-link:hover .nav-mega-icon { color: var(--ember) !important; }
.nav-mega-link-name { color: var(--text) !important; }
.nav-mega-link-desc { color: var(--text-muted) !important; }
.nav-mega-all { color: var(--text) !important; }
.nav-mega-banner { border-radius: var(--ds-r-lg) !important; box-shadow: none !important; overflow: hidden; }
.nav-mega-banner:not(.nav-mega-banner--datacorp) { background: var(--bg-soft) !important; border: 1px solid var(--border) !important; }
.nav-mega-banner:not(.nav-mega-banner--datacorp)::before, .nav-mega-banner:not(.nav-mega-banner--datacorp)::after { display: none !important; }
.nav-mega-banner-eyebrow { color: var(--ember) !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
.nav-mega-banner:not(.nav-mega-banner--datacorp) .nav-mega-banner-title { color: var(--text) !important; }
.nav-mega-banner:not(.nav-mega-banner--datacorp) .nav-mega-banner-desc { color: var(--text-soft) !important; }
.nav-mega-banner-cta {
    background: #FAFAFA !important; color: #09090B !important;
    border-radius: var(--ds-r) !important; box-shadow: none !important; border: 0 !important;
}

.nav-profile-dd-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--ds-r-lg) !important;
    box-shadow: var(--ds-shadow-lg) !important;
}
.nav-profile-avatar { background: var(--text) !important; color: var(--bg) !important; }

.ds-card,
.work-card, .ref-card, .why-v2-card, .testi-card-v2, .faq-item,
.svc-select, .stats-bar, .work-featured {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--ds-r-xl) !important;
    box-shadow: var(--ds-shadow-xs);
}
.work-card, .ref-card, .why-v2-card, .testi-card-v2, .work-featured {
    transition: transform var(--ds-base) var(--ds-ease), box-shadow var(--ds-base) var(--ds-ease), border-color var(--ds-base) var(--ds-ease) !important;
}
.work-card:hover, .ref-card:hover, .why-v2-card:hover, .testi-card-v2:hover, .work-featured:hover {
    transform: translateY(-4px) !important;
    border-color: var(--border-strong) !important;
    box-shadow: var(--ds-shadow-lg) !important;
}
.work-card::before, .ref-card::before, .ref-card-featured::before,
.work-card-banner::after, .why-v2-card::before, .stats-bar-item::before { display: none !important; }

.work-card-banner { background: var(--surface-2) !important; border-bottom: 1px solid var(--border); }
.work-card-banner::before { opacity: .6; }
.work-card-status {
    background: var(--glass) !important; color: var(--text) !important;
    border: 1px solid var(--border) !important; backdrop-filter: blur(8px);
    border-radius: var(--ds-r-full) !important; font-weight: 500 !important;
}
.work-card-type { color: var(--text-muted) !important; background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--ds-r-full) !important; }
.work-card-link { color: var(--text) !important; font-weight: 500; }
.work-featured-eyebrow { color: var(--ember) !important; letter-spacing: .12em !important; font-weight: 600 !important; }
.work-featured-title a:hover { color: var(--text) !important; opacity: .8; }
.work-featured-feature { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; border-radius: var(--ds-r-full) !important; font-weight: 500 !important; }
.work-featured-feature::before { background: var(--ember) !important; }
.work-featured-content { background: var(--surface) !important; border-top-color: var(--border) !important; }
.work-featured-cta .btn { border-radius: var(--ds-r-md) !important; font-weight: 500 !important; }

.ref-card-logo-area { background: var(--surface-2) !important; border-bottom: 1px solid var(--border); }
.ref-card-badge {
    background: var(--text) !important; color: var(--bg) !important;
    border-radius: var(--ds-r-full) !important; box-shadow: none !important;
    font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
}
.ref-card-cat { color: var(--text-muted) !important; }
.ref-tech-tag { background: var(--surface-2) !important; border: 1px solid var(--border) !important; color: var(--text-soft) !important; border-radius: var(--ds-r-full) !important; }
.ref-card-btn { color: var(--text) !important; border-color: var(--border) !important; background: var(--surface) !important; border-radius: var(--ds-r) !important; }
.ref-card-btn:hover { background: var(--surface-2) !important; }

.why-v2-card { padding: 28px 26px !important; }
.why-v2-num { color: var(--text-muted) !important; font-family: var(--ds-mono) !important; font-size: .78rem !important; opacity: 1 !important; font-weight: 500 !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
.why-v2-card:hover .why-v2-num { opacity: 1 !important; }
.why-v2-icon {
    width: 40px !important; height: 40px !important;
    border-radius: var(--ds-r-md) !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    display: grid; place-items: center;
    transition: color var(--ds-base) var(--ds-ease), transform var(--ds-base) var(--ds-ease-spring);
}
.why-v2-icon svg { width: 20px; height: 20px; }
.why-v2-card:hover .why-v2-icon { color: var(--ember) !important; transform: rotate(-4deg) scale(1.05); }
.why-v2-card h4 { font-size: 1.05rem !important; font-weight: 600; }

.testi-card-v2 { border-radius: var(--ds-r-xl) !important; }
.testi-stars { color: var(--c5) !important; }
.testi-avatar { background: var(--text) !important; color: var(--bg) !important; border-radius: 50% !important; font-weight: 600; }
.testi-row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

.faq-list { max-width: 820px; margin-left: auto; margin-right: auto; }
.faq-item { border-radius: var(--ds-r-lg) !important; margin-bottom: 10px; }
.faq-item.open { border-color: var(--border-strong) !important; box-shadow: var(--ds-shadow) !important; }
.faq-question { font-family: var(--ds-font) !important; font-weight: 500 !important; font-size: 1rem !important; padding: 18px 22px !important; color: var(--text) !important; }
.faq-question:hover { color: var(--text) !important; }
.faq-icon {
    width: 28px !important; height: 28px !important; flex-shrink: 0;
    display: grid !important; place-items: center;
    border-radius: 50% !important;
    background: var(--surface-2) !important; color: var(--text) !important;
    border: 1px solid var(--border) !important;
    transition: transform var(--ds-base) var(--ds-ease-spring), background var(--ds-fast) !important;
}
.faq-item.open .faq-icon { background: var(--text) !important; color: var(--bg) !important; }
.faq-answer-inner { color: var(--text-soft); }

.tech-ticker {
    background: transparent !important;
    border-color: var(--border) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.tech-ticker-item { font-family: var(--ds-font) !important; font-weight: 500 !important; font-size: 1rem !important; color: var(--text-muted) !important; letter-spacing: -0.01em; }
.tech-ticker-item.is-orange { color: var(--text) !important; }
.tech-ticker-item::after { color: var(--border-strong) !important; }

.svc-select { overflow: hidden; }
.svc-select-list { background: var(--bg-soft) !important; border-right: 1px solid var(--border) !important; }
.svc-select-item { border-radius: var(--ds-r-md) !important; font-weight: 500; }
.svc-select-item.active {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    box-shadow: var(--ds-shadow-sm) !important;
}
.svc-select-item.active .svc-select-icon { color: var(--ember) !important; }
.svc-select-icon { color: var(--text-soft) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.svc-browser { border-radius: var(--ds-r-lg) !important; border-color: var(--border) !important; box-shadow: var(--ds-shadow) !important; }
.svc-dot { background: var(--ember) !important; box-shadow: none !important; }
.svc-chart-bar { background: var(--c1) !important; opacity: .85; border-radius: 4px 4px 0 0 !important; }
.svc-chart-bar:nth-child(even) { background: var(--c2) !important; }
.svc-ads-budget-bar > div { background: var(--ember) !important; }
.svc-fin-change.up { color: var(--pos) !important; }
.svc-fin-change.down { color: var(--neg) !important; }
.svc-fin-row:nth-child(1) .svc-fin-chart { color: var(--c3); }
.svc-fin-row:nth-child(2) .svc-fin-chart { color: var(--c2); }
.svc-fin-row:nth-child(3) .svc-fin-chart { color: var(--neg); }
.svc-fin-row:nth-child(4) .svc-fin-chart { color: var(--c4); }
.svc-game-tab.active { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; }

.process-node-circle {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    border-radius: var(--ds-r-xl) !important;
    box-shadow: var(--ds-shadow-sm);
    font-family: var(--ds-mono) !important;
    color: var(--text) !important;
}
.process-node-circle::before { background: var(--text) !important; border-radius: var(--ds-r-xl) !important; }
.process-node:hover .process-node-num { color: var(--bg) !important; -webkit-text-fill-color: currentColor !important; }
.process-node-num { -webkit-text-fill-color: currentColor !important; background: none !important; }
.process-line-progress { background: var(--ember) !important; box-shadow: none !important; }
.process-node-arrow { color: var(--text-muted) !important; }

.cta-box,
[data-theme="light"] .cta-box {
    background: var(--ink) !important;
    border: 1px solid #232327;
    border-radius: var(--ds-r-2xl) !important;
    box-shadow: var(--ds-shadow-lg);
    isolation: isolate;
}
[data-theme="dark"] .cta-box { background: #131316 !important; }
.cta-box::before {
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000, transparent 75%);
}
.cta-box::after {
    animation: none !important;
    top: auto !important; left: 50% !important; bottom: -140px !important;
    width: 520px !important; height: 260px !important;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(var(--ember-rgb), .35), transparent 70%) !important;
    filter: blur(20px);
}
.cta-box h2 { color: #FAFAFA !important; font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -0.04em; }
.cta-box p { color: #A1A1AA !important; }
.cta-box .btn-primary { background: #FAFAFA !important; color: #09090B !important; border-color: #FAFAFA !important; }
.cta-box .btn-primary:hover { background: #E4E4E7 !important; color: #09090B !important; }
.cta-box .btn-secondary { background: rgba(255,255,255,.06) !important; color: #FAFAFA !important; border-color: rgba(255,255,255,.14) !important; }
.cta-box .btn-secondary:hover { background: rgba(255,255,255,.12) !important; color: #FAFAFA !important; }
.cta-box .hero-actions { justify-content: center; }

.page-header, .page-hero {
    padding: 148px 0 64px !important;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.page-header::before, .page-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%);
}
.page-header h1, .page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.045em; font-weight: 600; }

.form-control, .form-input, input.form-control, textarea.form-control, select.form-control {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--ds-r) !important;
    color: var(--text) !important;
    box-shadow: var(--ds-shadow-xs);
    transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease) !important;
}
.form-control:hover { border-color: var(--border-strong) !important; }
.form-control:focus, .form-input:focus {
    outline: none !important;
    border-color: var(--text-muted) !important;
    box-shadow: var(--ring) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; opacity: 1; }
.form-group label { color: var(--text); font-weight: 500; font-size: .86rem; }
.req { color: var(--ember) !important; }
.cs-trigger { border-radius: var(--ds-r) !important; height: 40px !important; box-shadow: var(--ds-shadow-xs); }
.cs-trigger:hover { border-color: var(--border-strong) !important; }
.cs-trigger:focus, .cs-root.is-open .cs-trigger { border-color: var(--text-muted) !important; box-shadow: var(--ring) !important; }
.cs-trigger svg { color: var(--text-muted) !important; }
.cs-menu { border-radius: var(--ds-r-md) !important; box-shadow: var(--ds-shadow-lg) !important; padding: 6px !important; }
.cs-menu li { border-radius: var(--ds-r-sm) !important; }
.cs-menu li:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.cs-menu li.is-active { background: var(--surface-2) !important; color: var(--text) !important; font-weight: 600 !important; }

.footer { background: var(--bg) !important; border-top: 1px solid var(--border) !important; }
.footer::before { display: none !important; }
.footer-regions-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--ds-r-xl) !important;
    box-shadow: var(--ds-shadow-xs) !important;
}
.footer-regions-card::before, .footer-regions-card::after { display: none !important; }
.footer-regions-icon { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: none !important; border-radius: var(--ds-r-md) !important; }
.footer-regions-badge { background: var(--text) !important; color: var(--bg) !important; border: 0 !important; border-radius: var(--ds-r-full) !important; box-shadow: none !important; }
.footer-region-chip { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-soft) !important; border-radius: var(--ds-r-full) !important; box-shadow: none !important; }
.footer-region-chip:hover { color: var(--text) !important; border-color: var(--border-strong) !important; background: var(--surface-2) !important; transform: none !important; }
.footer h5 { font-size: .8rem !important; font-weight: 600 !important; color: var(--text) !important; letter-spacing: 0; }
.footer-links a { color: var(--text-soft) !important; }
.footer-links a:hover { color: var(--text) !important; padding-left: 0 !important; }
.footer-links a::before { display: none !important; }
.footer-social a {
    border-radius: var(--ds-r-sm) !important;
    background: var(--surface) !important; border: 1px solid var(--border) !important;
    color: var(--text-soft) !important; box-shadow: none !important;
}
.footer-social a:hover { color: var(--text) !important; background: var(--surface-2) !important; transform: translateY(-2px); }
.footer-bottom { border-top-color: var(--border) !important; }
.footer-clients-grid > * { border-radius: var(--ds-r-full) !important; }

.whatsapp-float { box-shadow: 0 8px 20px -6px rgba(37, 211, 102, .55) !important; }
.scroll-top {
    border-radius: var(--ds-r-md) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--ds-shadow) !important;
}
.scroll-top:hover { color: var(--text) !important; border-color: var(--border-strong) !important; }

.quote-popup-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--ds-r-xl) !important;
    box-shadow: var(--ds-shadow-lg) !important;
}
.quote-popup-glow { display: none !important; }
.quote-popup-icon { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--ds-r-md) !important; box-shadow: none !important; }
.quote-popup-btn { background: var(--primary) !important; color: var(--primary-fg) !important; border-radius: var(--ds-r) !important; box-shadow: none !important; }
.quote-popup-title { color: var(--text) !important; }

.server-order-modal { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--ds-r-xl) !important; box-shadow: var(--ds-shadow-lg) !important; }
.server-order-overlay { background: rgba(9, 9, 11, .5) !important; backdrop-filter: blur(6px); }
.server-order-plan-icon { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border); border-radius: var(--ds-r-md) !important; box-shadow: none !important; }

.loader-overlay { background: var(--bg) !important; }
.loader-overlay::before { display: none !important; }
.loader-inner { gap: 22px !important; }
.loader-logo { display: none !important; }
.ds-loader-mark { width: 52px; height: 52px; animation: dsLoaderBreath 1.4s var(--ds-ease) infinite; }
@keyframes dsLoaderBreath { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.94); opacity: .75; } }
.loader-percent { display: none !important; }
.loader-progress { min-width: 96px !important; }
.loader-track { height: 2px !important; background: var(--surface-3) !important; }
.loader-fill { background: var(--text) !important; box-shadow: none !important; }

.cookie-consent, .cc-banner, #cookieConsent {
    border-radius: var(--ds-r-xl) !important;
}

.reveal { transform: translateY(18px); filter: blur(6px); transition: opacity .8s var(--ds-ease-out), transform .8s var(--ds-ease-out), filter .8s var(--ds-ease-out); }
.reveal.visible { filter: blur(0); }
.reveal-scale { transform: scale(.97) translateY(12px); filter: blur(6px); transition: opacity .9s var(--ds-ease-out), transform .9s var(--ds-ease-out), filter .9s var(--ds-ease-out); }
.reveal-scale.visible { transform: none; filter: blur(0); }
html.no-anim .reveal, html.no-anim .reveal-scale { filter: none !important; }

[data-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ds-ease-out), transform .7s var(--ds-ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
html.no-anim [data-stagger] > * { opacity: 1 !important; transform: none !important; }

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


.ds-hero {
    position: relative;
    padding: 148px 0 96px;
    overflow: hidden;
    isolation: isolate;
}
.ds-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ds-hero-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%);
}
.ds-hero-orb {
    position: absolute; top: 18%; right: 8%;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ember-rgb), .16), transparent 62%);
    filter: blur(30px);
    animation: dsOrb 14s var(--ds-ease) infinite alternate;
}
[data-theme="light"] .ds-hero-orb { background: radial-gradient(circle, rgba(var(--ember-rgb), .10), transparent 62%); }
@keyframes dsOrb { to { transform: translate(-40px, 30px) scale(1.08); } }
.ds-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.ds-hero-title {
    font-size: clamp(2.6rem, 5.6vw, 4.6rem);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.0;
    margin: 4px 0 22px;
    text-wrap: balance;
}
.ds-hero-title .ds-hero-muted { color: var(--text-muted); display: block; }
.ds-hero-title .ds-ember-dot { color: var(--ember); }
.ds-hero-sub { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.65; max-width: 540px; margin-bottom: 32px; text-wrap: pretty; }
.ds-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ds-hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 36px; color: var(--text-muted); font-size: .86rem; }
.ds-avatars { display: flex; }
.ds-avatars span {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .7rem; font-weight: 600; color: #fff;
    border: 2px solid var(--bg);
    margin-left: -8px;
}
.ds-avatars span:first-child { margin-left: 0; }
.ds-hero-proof strong { color: var(--text); font-weight: 600; }
.ds-stars { display: inline-flex; gap: 1px; color: var(--c5); vertical-align: -2px; }
.ds-stars svg { width: 13px; height: 13px; }

.ds-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 4px 12px 4px 4px;
    border-radius: var(--ds-r-full);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--ds-shadow-xs);
    font-size: .82rem; color: var(--text-soft);
    margin-bottom: 22px;
    transition: border-color var(--ds-fast), background var(--ds-fast);
}
.ds-pill:hover { border-color: var(--border-strong); color: var(--text); }
.ds-pill-tag { padding: 3px 9px; border-radius: var(--ds-r-full); background: var(--text); color: var(--bg); font-size: .72rem; font-weight: 600; }
.ds-pill svg { width: 14px; height: 14px; transition: transform var(--ds-fast); }
.ds-pill:hover svg { transform: translateX(2px); }

.ds-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ds-tile {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--ds-r-xl);
    padding: 18px;
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
    transition: transform var(--ds-base) var(--ds-ease), box-shadow var(--ds-base) var(--ds-ease), border-color var(--ds-base) var(--ds-ease);
}
.ds-tile:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-lg); border-color: var(--border-strong); }
.ds-tile-6 { grid-column: span 6; }
.ds-tile-4 { grid-column: span 4; }
.ds-tile-3 { grid-column: span 3; }
.ds-tile-2 { grid-column: span 2; }
.ds-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ds-tile-label { font-size: .78rem; font-weight: 500; color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; }
.ds-tile-label svg { width: 14px; height: 14px; }
.ds-tile-value { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.ds-tile-value sup, .ds-tile-value small { font-size: .5em; color: var(--text-muted); font-weight: 500; margin-left: 2px; vertical-align: .5em; }
.ds-tile-foot { margin-top: 8px; font-size: .78rem; color: var(--text-muted); }
.ds-trend {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: var(--ds-r-full);
    font-size: .72rem; font-weight: 600;
    background: rgba(22, 163, 74, .1); color: var(--pos);
}
.ds-trend svg { width: 11px; height: 11px; }
.ds-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px; border-radius: var(--ds-r-full);
    font-size: .72rem; font-weight: 500;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft);
}
.ds-live { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: dsPing 2s infinite; }
@keyframes dsPing { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 80%, 100% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } }

.ds-hero-visual { position: relative; }
.ds-hero-visual .ds-bento { position: relative; z-index: 1; }
.ds-float { animation: dsFloat 7s var(--ds-ease) infinite alternate; }
.ds-float-2 { animation-delay: -3.5s; }
@keyframes dsFloat { to { transform: translateY(-6px); } }
.ds-tile:hover.ds-float { animation-play-state: paused; }

.ds-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ds-chart .grid line { stroke: var(--border); stroke-dasharray: 2 4; }
.ds-chart .axis text { fill: var(--text-muted); font-size: 9px; font-family: var(--ds-mono); }
.ds-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.ds-area { opacity: .9; }
.ds-chart-dot { fill: var(--surface); stroke-width: 2.25; }

[data-draw] .ds-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ds-ease-out); }
[data-draw].is-drawn .ds-line { stroke-dashoffset: 0; }
[data-draw] .ds-area { opacity: 0; transition: opacity 1.2s var(--ds-ease) .6s; }
[data-draw].is-drawn .ds-area { opacity: .9; }
[data-draw] .ds-chart-dot { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity .3s 1.6s, transform .5s var(--ds-ease-spring) 1.6s; }
[data-draw].is-drawn .ds-chart-dot { opacity: 1; transform: scale(1); }

.ds-bars { display: flex; align-items: flex-end; gap: 6px; height: 84px; }
.ds-bars > i {
    flex: 1; display: block;
    height: var(--h, 50%);
    border-radius: 5px 5px 2px 2px;
    background: var(--surface-3);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .9s var(--ds-ease-out), background var(--ds-base);
    transition-delay: calc(var(--i, 0) * 60ms);
}
.ds-bars > i.is-hi { background: var(--text); }
.ds-bars > i.is-ember { background: var(--ember); }
.is-drawn .ds-bars > i, .ds-bars.is-drawn > i { transform: scaleY(1); }
.ds-bars:hover > i { background: var(--border-strong); }
.ds-bars:hover > i:hover { background: var(--ember); }

.ds-ring { position: relative; width: 96px; height: 96px; }
.ds-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ds-ring .track { stroke: var(--surface-3); }
.ds-ring .meter { stroke: var(--ember); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ds-ease-out); }
.is-drawn .ds-ring .meter, .ds-ring.is-drawn .meter { stroke-dashoffset: var(--off, 0); }
.ds-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-weight: 600; font-size: 1rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.ds-seg { display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 3px; margin: 12px 0 10px; }
.ds-seg > i { display: block; height: 100%; width: var(--w); border-radius: 99px; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ds-ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.is-drawn .ds-seg > i { transform: scaleX(1); }
.ds-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .74rem; color: var(--text-muted); }
.ds-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ds-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--dot); }

.ds-status { display: flex; flex-direction: column; gap: 8px; }
.ds-status-row { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--text); }
.ds-status-row .ds-live { flex-shrink: 0; }
.ds-status-row em { margin-left: auto; font-style: normal; font-family: var(--ds-mono); font-size: .74rem; color: var(--text-muted); }
.ds-meter { flex: 1; max-width: 90px; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.ds-meter > i { display: block; height: 100%; width: var(--w); background: var(--text); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ds-ease-out) .2s; }
.is-drawn .ds-meter > i { transform: scaleX(1); }

.ds-stats { margin-top: 52px; }
.ds-stats .ds-tile { padding: 22px; }
.ds-stats .ds-tile-value { font-size: clamp(2.2rem, 3.6vw, 3rem); }
.ds-stat-chart { margin-top: 18px; }
.ds-stat-split { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.ds-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 52px; }
.ds-duo-card { padding: 28px; border-radius: var(--ds-r-2xl); border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden; box-shadow: var(--ds-shadow-xs); transition: transform var(--ds-base) var(--ds-ease), box-shadow var(--ds-base) var(--ds-ease); }
.ds-duo-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-lg); }
.ds-duo-card.is-ink { background: var(--ink); border-color: #232327; }
.ds-duo-card.is-ink h3, .ds-duo-card.is-ink .ds-duo-k { color: #FAFAFA; }
.ds-duo-card.is-ink p, .ds-duo-card.is-ink li { color: #A1A1AA; }
.ds-duo-card.is-ink .ds-badge { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #D4D4D8; }
.ds-duo-card h3 { font-size: 1.5rem; margin: 14px 0 10px; letter-spacing: -0.035em; }
.ds-duo-card p { font-size: .95rem; line-height: 1.65; margin-bottom: 18px; }
.ds-duo-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 22px; }
.ds-duo-list li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-soft); }
.ds-duo-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); flex-shrink: 0; }
.ds-duo-k { font-size: .78rem; color: var(--text-muted); font-family: var(--ds-mono); }
.ds-duo-art { position: absolute; right: -52px; bottom: -52px; width: 160px; height: 160px; opacity: .55; pointer-events: none; }
.ds-duo-list { position: relative; z-index: 1; max-width: 92%; }
.ds-duo-card .btn { position: relative; z-index: 1; }
.ds-duo-card.is-ink .btn-secondary { background: rgba(255,255,255,.06) !important; color: #FAFAFA !important; border-color: rgba(255,255,255,.14) !important; }
.ds-duo-card.is-ink .btn-secondary:hover { background: rgba(255,255,255,.12) !important; }

.ds-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ds-section-head .section-subtitle { margin: 0; }

.ds-brand-swatch { border-radius: var(--ds-r-lg); border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.ds-brand-swatch > div:first-child { height: 96px; }
.ds-brand-swatch > div:last-child { padding: 12px 14px; font-size: .82rem; }
.ds-brand-swatch strong { display: block; color: var(--text); font-weight: 600; }
.ds-brand-swatch code { font-family: var(--ds-mono); color: var(--text-muted); font-size: .76rem; }
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ds-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ds-kbd { font-family: var(--ds-mono); font-size: .78rem; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); }

@media (max-width: 1024px) {
    .ds-hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .ds-hero { padding-top: 128px; }
    .ds-hero-copy { text-align: center; }
    .ds-hero-sub { margin-left: auto; margin-right: auto; }
    .ds-hero-actions, .ds-hero-proof { justify-content: center; }
    .ds-hero-visual { max-width: 640px; margin: 0 auto; width: 100%; }
}
@media (max-width: 768px) {
    .nav { padding-top: 8px; }
    .nav-inner { height: 56px; border-radius: var(--ds-r-md); }
    .ds-logo-word small { display: none; }
    .ds-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-tile-6, .ds-tile-4 { grid-column: span 2; }
    .ds-tile-3, .ds-tile-2 { grid-column: span 1; }
    .ds-duo { grid-template-columns: 1fr; }
    .ds-duo-list { grid-template-columns: 1fr; }
    .ds-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-grid-3 { grid-template-columns: 1fr; }
    .ds-hero-title { font-size: clamp(2.3rem, 10vw, 3.2rem); }
    .page-header, .page-hero { padding: 120px 0 48px !important; }
}
@media (max-width: 420px) {
    .ds-tile-3, .ds-tile-2 { grid-column: span 2; }
    .ds-hero-actions .btn { width: 100%; }
}

.ds-tile::after, .ds-duo-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgba(var(--tint-rgb), .05), transparent 70%);
    opacity: 0; transition: opacity var(--ds-base) var(--ds-ease);
}
.ds-tile:hover::after, .ds-duo-card:hover::after { opacity: 1; }
.ds-duo-card.is-ink::after { background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, .06), transparent 70%); }

html.ds-theme-anim, html.ds-theme-anim *, html.ds-theme-anim *::before, html.ds-theme-anim *::after {
    transition: background-color .35s var(--ds-ease), color .35s var(--ds-ease), border-color .35s var(--ds-ease), fill .35s var(--ds-ease) !important;
}

.ds-appgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 18px; }
.ds-appgrid > i { display: block; aspect-ratio: 1; border-radius: 7px; opacity: 0; transform: scale(.4); transition: opacity .5s var(--ds-ease-out), transform .6s var(--ds-ease-spring); transition-delay: calc(var(--i, 0) * 55ms + 200ms); }
.ds-appgrid.is-in > i { opacity: .92; transform: none; }
.ds-appgrid > i:hover { opacity: 1; transform: translateY(-2px) scale(1.06); }
html.no-anim .ds-appgrid > i { opacity: .92; transform: none; }

html .cc-banner { border-radius: var(--ds-r-xl); box-shadow: var(--ds-shadow-lg); border-color: var(--border); background: var(--surface); }
html .cc-icon { color: var(--text); }
html .cc-desc a { color: var(--text); text-underline-offset: 3px; font-weight: 500; }
html .cc-btn { height: 36px; padding: 0 14px; border-radius: var(--ds-r); font-weight: 500; }
html .cc-btn-primary { background: var(--primary); color: var(--primary-fg); }
html .cc-btn-primary:hover { background: var(--primary-hover); color: var(--primary-fg); }
html .cc-btn-secondary, html .cc-btn-reject { background: var(--surface); color: var(--text); border: 1px solid var(--border); font-weight: 500; }
html .cc-btn-secondary:hover, html .cc-btn-reject:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
html .cc-btn-outline:hover { border-color: var(--border-strong); color: var(--text); }
html .cc-cat input[type=checkbox] { accent-color: var(--text); }

html[data-theme="dark"] [data-theme-toggle] .icon-sun { display: block !important; }
html[data-theme="dark"] [data-theme-toggle] .icon-moon { display: none !important; }
html[data-theme="light"] [data-theme-toggle] .icon-sun { display: none !important; }
html[data-theme="light"] [data-theme-toggle] .icon-moon { display: block !important; }

.reveal, .reveal-left, .reveal-right { transition-duration: .6s !important; }
.reveal-scale { transition-duration: .7s !important; }
.reveal { filter: blur(4px); }
.reveal.delay-1, .reveal-scale.delay-1 { transition-delay: .06s; }
.reveal.delay-2, .reveal-scale.delay-2 { transition-delay: .12s; }
.reveal.delay-3, .reveal-scale.delay-3 { transition-delay: .18s; }
.reveal.delay-4, .reveal-scale.delay-4 { transition-delay: .24s; }
.reveal.delay-5, .reveal-scale.delay-5 { transition-delay: .30s; }

.code-editor, .svc-web-code-preview, .svc-web-code-editor, .svc-web-ce-wrap {
    --bg: #0C0C0F; --bg-soft: #0C0C0F; --surface: #111114; --surface-2: #18181B; --surface-3: #27272A;
    --border: #232327; --border-strong: #34343A;
    --text: #FAFAFA; --text-soft: #A1A1AA; --text-muted: #71717A;
    background: #0C0C0F !important;
    color: #A1A1AA;
    border-color: #232327 !important;
}
.svc-web-ce-tab-active { color: #FAFAFA !important; }

.story-numbers { background: var(--ink) !important; }
html[data-theme="dark"] .story-numbers { background: #111114 !important; border-block: 1px solid var(--border); }
.story-num-grid strong { color: #FAFAFA !important; }
.story-num-grid > div:hover strong { color: var(--ember) !important; }

.step-card-premium .step-badge { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border); font-family: var(--ds-mono) !important; font-weight: 500 !important; font-size: .85rem !important; }
.step-card-premium:hover .step-badge { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text); }

html[data-theme="light"] .product-showcase-status--active { color: #15803D; border-color: rgba(21, 128, 61, .3); background: rgba(21, 128, 61, .08); }

.btn-whatsapp { background: #128C4A !important; }
.btn-whatsapp:hover { background: #0F7A40 !important; }

.about-mv-title, .section-title--gradient, .error-code, .dc-plan-price .num, [data-price-num], .story-hero h1 span {
    background: none !important;
    -webkit-background-clip: initial !important; background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important; color: var(--text) !important;
}
.error-code { color: var(--text) !important; letter-spacing: -0.06em; font-weight: 600 !important; }
.error-code::after { content: '.'; color: var(--ember); }

.about-tl-btn.active, .filter-btn.active, .fr-cycle-btn.active, .dc-cycle-btn.active {
    background: var(--text) !important; color: var(--bg) !important;
    border-color: var(--text) !important; box-shadow: var(--ds-shadow-sm) !important;
}
.filter-btn, .about-tl-btn { border-radius: var(--ds-r-full) !important; }

.about-mv-icon {
    background: var(--surface-2) !important; color: var(--text) !important;
    border: 1px solid var(--border) !important; box-shadow: none !important;
    border-radius: var(--ds-r-md) !important;
}

.popular-badge, .dc-plan-popular-tag {
    background: var(--text) !important; color: var(--bg) !important;
    box-shadow: none !important; border: 0 !important;
    font-weight: 600 !important; letter-spacing: .02em !important;
}

.product-showcase-feature {
    background: var(--surface-2) !important; border: 1px solid var(--border) !important; box-shadow: none !important;
}

.story-hero, .story-cta { background: var(--bg) !important; }
.story-cta { border-top: 1px solid var(--border); }
.story-eyebrow {
    background: var(--surface) !important; color: var(--text-soft) !important;
    border: 1px solid var(--border); font-weight: 500 !important; letter-spacing: .04em !important;
}
.story-avatar { background: var(--ink) !important; color: #FAFAFA !important; box-shadow: 0 0 0 6px var(--surface-2), var(--ds-shadow-lg) !important; }
.story-values strong, .story-year { color: var(--text) !important; }
.story-year::after { background: var(--ember) !important; }
.story-timeline::before { background: linear-gradient(180deg, var(--border-strong), transparent) !important; }

.nav-mega-all { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--ds-r-md) !important; box-shadow: none !important; }
.nav-mega-all:hover { background: var(--surface-3) !important; }
.nav-mega-banner-cta { opacity: 1 !important; filter: none !important; }
.nav-mega-banner-cta:hover { background: #E4E4E7 !important; color: #09090B !important; }

.about-tl-content-inner::before,
.contact-company-card::before,
.contact-form::before,
.legal-contact-card::before,
.local-seo-custom-intro::before,
.local-seo-custom-intro__lead::before,
.local-seo-office__card::before,
.local-seo-quick-summary::before,
.prod-highlight-card::before,
.product-showcase-card::before,
.quote-popup-card::before,
.ref-card::before,
.server-order-modal::before,
.svc-card::before,
.svc-detail-example::before,
.svc-page-card::before,
.svc-web-bento-card::before,
.work-card::before { display: none !important; }
.vds-plan-row.popular::before { background: var(--text) !important; }

.nav [data-theme-toggle] { display: none !important; }

html[data-theme="light"] {
    --bg-soft: #F8F8FA;
    --surface-2: #F4F4F6;
    --hero-grid: rgba(9, 9, 11, .035);
}

.reveal, .reveal-scale, .reveal.visible, .reveal-scale.visible { filter: none !important; }
.reveal { transform: translateY(12px); }
.reveal-scale { transform: translateY(12px); }
.reveal-scale.visible { transform: none; }

.ds-hero-orb { display: none !important; }
.ds-hero { background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%); border-bottom: 1px solid var(--border); }
.ds-hero-grid { opacity: .7; }
.ds-float, .ds-float-2 { animation: none !important; }
.ds-hero-visual .ds-tile { box-shadow: 0 1px 2px rgba(9,9,11,.04), 0 12px 32px -12px rgba(9,9,11,.10); }

.ds-hero-proof { flex-direction: column; align-items: flex-start; gap: 12px; }
.ds-trust { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-trust-item {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--ds-r-full);
    background: var(--surface); color: var(--text-soft);
    font-size: .8rem; font-weight: 500;
}
.ds-trust-item svg { width: 14px; height: 14px; color: var(--text); }
.ds-hero-proof-note { font-size: .85rem; color: var(--text-muted); }
.ds-hero-proof-note strong { color: var(--text); }
@media (max-width: 1024px) { .ds-hero-proof { align-items: center; } .ds-trust { justify-content: center; } }

.cta-box, html[data-theme="light"] .cta-box {
    background: #F8F8FA !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}
.cta-box::before {
    background-image: linear-gradient(rgba(9,9,11,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(9,9,11,.04) 1px, transparent 1px) !important;
}
.cta-box::after { display: none !important; }
.cta-box h2 { color: var(--text) !important; }
.cta-box p { color: var(--text-soft) !important; }
.cta-box .btn-primary { background: var(--primary) !important; color: var(--primary-fg) !important; border-color: var(--primary) !important; }
.cta-box .btn-primary:hover { background: var(--primary-hover) !important; color: var(--primary-fg) !important; }
.cta-box .btn-secondary { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.cta-box .btn-secondary:hover { background: var(--surface-2) !important; color: var(--text) !important; }

.story-numbers { background: #F8F8FA !important; border-block: 1px solid var(--border); }
.story-numbers h2 { color: var(--text) !important; }
.story-num-grid > div { background: var(--surface) !important; border-color: var(--border) !important; }
.story-num-grid strong { color: var(--text) !important; }
.story-num-grid span { color: var(--text-muted) !important; }

.work-card:hover, .ref-card:hover, .why-v2-card:hover, .testi-card-v2:hover, .work-featured:hover, .ds-tile:hover, .ds-duo-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 1px 2px rgba(9,9,11,.04), 0 16px 32px -16px rgba(9,9,11,.14) !important;
}

.testi-flag-img, .testi-flag-emoji { opacity: .12 !important; }
.ds-ring .meter { stroke: var(--c1); }

.ds-pill-tag,
.ref-card-badge, .popular-badge, .dc-plan-popular-tag, .footer-regions-badge,
.about-tl-btn.active, .filter-btn.active, .fr-cycle-btn.active, .dc-cycle-btn.active,
.svc-game-tab.active, .faq-item.open .faq-icon,
.step-card-premium:hover .step-badge {
    background: var(--ember) !important; color: #FFFFFF !important; border-color: var(--ember) !important;
}
.testi-avatar, .nav-profile-avatar { background: var(--ember) !important; color: #FFFFFF !important; }
.process-node-circle::before { background: var(--ember) !important; }
.process-node:hover .process-node-num { color: #FFFFFF !important; }
.ds-bars > i.is-hi { background: #93C5FD; }
.ds-meter > i { background: var(--c1); }
.vds-plan-row.popular::before { background: var(--ember) !important; }
.svc-select-item.active { box-shadow: inset 3px 0 0 var(--ember), var(--ds-shadow-sm) !important; }
.nav-link.active { color: var(--ember); background: rgba(var(--ember-rgb), .07); }
.ds-trust-item svg { color: var(--ember); }
.ds-trend { background: rgba(var(--ember-rgb), .08); color: var(--ember); }
.eyebrow::before, .ds-eyebrow::before { box-shadow: 0 0 0 3px rgba(var(--ember-rgb), .14); }
:focus-visible { outline-color: var(--ember); }
.form-control:focus, .form-input:focus { border-color: var(--ember) !important; box-shadow: 0 0 0 3px rgba(var(--ember-rgb), .14) !important; }
::selection, html[data-theme="light"] ::selection { background: rgba(var(--ember-rgb), .18); color: var(--text); }
