/*
Theme Name: AiScaleon
Theme URI: https://aiscaleon.com
Author: AiScaleon
Author URI: https://aiscaleon.com
Description: Premium enterprise software engineering and digital transformation theme for AiScaleon.
Version: 3.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aiscaleon
*/

:root {
    --bg-base: #0B0F19;
    --bg-surface: #121826;
    --bg-elevated: #1C253B;
    --border: rgba(244, 244, 245, 0.05);
    --border-strong: rgba(244, 244, 245, 0.08);
    --text-primary: #F4F4F5;
    --text-secondary: #E7E5E4;
    --text-muted: #A8A29E;
    --brand-orange: #E07A5F;
    --brand-purple: #9E533F;
    --brand-gradient: linear-gradient(135deg, #E07A5F 0%, #9E533F 100%);
}

[data-theme="light"] {
    --bg-base: #fbfaf7;
    --bg-surface: #ffffff;
    --bg-elevated: #f3f0f7;
    --border: rgba(30, 41, 59, 0.08);
    --border-strong: rgba(30, 41, 59, 0.14);
    --text-primary: #0f172a;
    --text-secondary: rgba(15, 23, 42, 0.7);
    --text-muted: rgba(15, 23, 42, 0.45);
}

html {
    overflow-x: hidden;
    overflow-y: auto;
}
body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: visible;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

nav, footer, .dark-card, section {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

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

.section-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 9999px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

.dark-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 1rem; /* 16px */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.dark-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--border-strong);
}

.will-change-transform {
    will-change: transform;
}

/* GSAP Reveal Base Classes */
.gs-reveal {
    transform: translateY(30px);
}
.gs-reveal-left {
    transform: translateX(-40px);
}
.gs-reveal-right {
    transform: translateX(40px);
}
.gs-reveal-scale {
    transform: scale(0.92);
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Aurora Background */
.aurora-bg {
    position: relative;
    background: var(--bg-base);
}
.aurora-bg::before,
.aurora-bg::after {
    content: "";
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.15;
    animation: auroraMove 15s ease-in-out infinite alternate;
}
.aurora-bg::before {
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, var(--brand-purple) 0%, transparent 70%);
}
.aurora-bg::after {
    bottom: -10%;
    right: -10%;
    background: radial-gradient(circle, var(--brand-orange) 0%, transparent 70%);
    animation-delay: -7s;
}

@keyframes auroraMove {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(10%, 15%) scale(1.1); }
}

/* Navbar Scrolled State */
.navbar-scrolled {
    background-color: rgba(13, 15, 18, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

/* Buttons */
.btn-primary {
    background: var(--brand-gradient);
    color: #fff;
    border: none;
    border-radius: 9999px;
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(232, 91, 63, 0.3);
}

.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Marquee */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Impact Item */
.impact-item {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.impact-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(255,255,255,0.05);
    z-index: -1;
    transition: width 0.4s ease;
}
.impact-item:hover::before {
    width: 100%;
}

/* Apogee Hero Animations */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-left {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fade-right {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fade-scale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes bar-grow {
    from { height: 0; opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-up {
    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-fade-down {
    animation: fade-down 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-fade-left {
    animation: fade-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-fade-right {
    animation: fade-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-fade-scale {
    animation: fade-scale 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-bar-grow {
    animation: bar-grow 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ============================================================
   Homepage SaaS polish layer — visual depth without noisy effects
   ============================================================ */

.saas-signal-rail {
    position: relative;
    z-index: 12;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.saas-signal-track {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px 18px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.saas-signal-track span { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.saas-signal-track i {
    width: 6px; height: 6px; border-radius: 999px;
    background: linear-gradient(135deg,#8b3fd8,#d84b9b,#f05a55);
    box-shadow: 0 0 16px rgba(139,63,216,.42);
}
.saas-signal-track b { opacity:.25; font-weight:400; }

.saas-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.saas-section::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background-image:
      linear-gradient(to right, color-mix(in srgb,var(--text-primary) 4%,transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb,var(--text-primary) 4%,transparent) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 48%, rgba(0,0,0,.54), transparent 92%);
    mask-image: radial-gradient(ellipse 72% 62% at 50% 48%, rgba(0,0,0,.54), transparent 92%);
    opacity:.24;
}
.saas-section:nth-of-type(3n)::after {
    content:"";
    position:absolute;
    width:520px;height:520px;
    top:-250px;right:-190px;
    z-index:-1;pointer-events:none;border-radius:50%;
    background: radial-gradient(circle, rgba(123,44,191,.13), rgba(216,75,155,.045) 45%, transparent 72%);
    filter: blur(16px);
}
.saas-section:nth-of-type(3n + 1)::after {
    content:"";
    position:absolute;
    width:480px;height:480px;
    bottom:-250px;left:-170px;
    z-index:-1;pointer-events:none;border-radius:50%;
    background: radial-gradient(circle, rgba(61,124,255,.11), rgba(77,184,255,.035) 46%, transparent 72%);
    filter: blur(18px);
}

.saas-section > div { position:relative; z-index:1; }
.saas-section .section-chip {
    background: linear-gradient(180deg, color-mix(in srgb,var(--bg-surface) 86%,transparent), color-mix(in srgb,var(--bg-elevated) 72%,transparent));
    border-color: color-mix(in srgb,#8b3fd8 28%,var(--border));
    box-shadow: 0 8px 28px rgba(30,18,60,.06), inset 0 1px 0 rgba(255,255,255,.08);
}
.saas-section h2 {
    max-width: 900px;
    margin-left:auto;
    margin-right:auto;
    text-wrap: balance;
}
.saas-section h2::selection { background:#8b3fd8; color:white; }

/* Replace flat repeated cards with elevated product surfaces */
.clay-glass-card,
.saas-interactive-card {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--border-strong) 72%, transparent) !important;
    background:
      linear-gradient(145deg, color-mix(in srgb,var(--bg-surface) 96%,#8b3fd8 4%), var(--bg-surface)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.05) inset,
      0 16px 45px rgba(7,9,20,.08);
    transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .38s ease;
}
.saas-interactive-card::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(139,63,216,.12), transparent 62%);
    transition:opacity .28s ease;
}
.saas-interactive-card:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb,#8b3fd8 36%,var(--border)) !important;
    box-shadow: 0 24px 70px rgba(13,15,35,.15), 0 1px 0 rgba(255,255,255,.08) inset;
}
.saas-interactive-card:hover::before { opacity:1; }

/* First major section becomes a visual stage instead of a plain content block */
.saas-feature-stage {
    background:
      radial-gradient(900px 420px at 76% 40%, rgba(123,44,191,.10), transparent 68%),
      radial-gradient(660px 340px at 12% 78%, rgba(61,124,255,.07), transparent 70%),
      var(--bg-base) !important;
}
.saas-feature-stage #crm-cards-stack::before {
    content:"CRM / INTELLIGENCE LAYER";
    position:absolute;
    top:-34px;left:2px;
    font-size:10px;font-weight:800;letter-spacing:.18em;
    color:var(--text-muted);
}
#crm-pin-section .lg\:col-span-5 > div {
    background:
      linear-gradient(145deg, color-mix(in srgb,var(--bg-surface) 94%,#7b2cbf 6%), color-mix(in srgb,var(--bg-surface) 97%,#3d7cff 3%)) !important;
    border-color: color-mix(in srgb,#8b3fd8 22%,var(--border)) !important;
    box-shadow: 0 30px 90px rgba(31,20,68,.13) !important;
}

/* Make tech rows feel like a system console, not a list */
.saas-section .max-w-4xl.mx-auto.bg-\[var\(--bg-surface\)\] {
    background: linear-gradient(145deg, color-mix(in srgb,var(--bg-surface) 97%,#7137c8 3%), var(--bg-surface)) !important;
    box-shadow: 0 28px 80px rgba(16,18,40,.10);
}

/* Portfolio gets stronger visual theatre */
.saas-portfolio-stage {
    background:
      radial-gradient(760px 360px at 50% 0%, rgba(139,63,216,.12), transparent 74%),
      var(--bg-surface) !important;
}
#portfolio img { transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
#portfolio .group:hover img { transform: scale(1.035); filter:saturate(1.08) contrast(1.02); }

/* Premium micro-details */
.saas-section .material-symbols-outlined {
    filter: drop-shadow(0 7px 14px rgba(123,44,191,.13));
}
.saas-section a[class*="rounded-full"],
.saas-section button[class*="rounded-full"] {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.saas-section a[class*="rounded-full"]:hover,
.saas-section button[class*="rounded-full"]:hover { transform: translateY(-2px); }

/* Light-theme refinement */
[data-theme="light"] .saas-section::before { opacity:.42; }
[data-theme="light"] .clay-glass-card,
[data-theme="light"] .saas-interactive-card {
    box-shadow: 0 18px 50px rgba(38,30,70,.075), inset 0 1px 0 rgba(255,255,255,.95);
}

@media (max-width: 767px) {
    .saas-signal-track { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:15px 20px; }
    .saas-signal-track::-webkit-scrollbar { display:none; }
    .saas-section::before { background-size:52px 52px; opacity:.18; }
    .saas-section:nth-of-type(3n)::after,
    .saas-section:nth-of-type(3n + 1)::after { width:340px;height:340px; }
}

@media (prefers-reduced-motion: reduce) {
    .saas-interactive-card, .saas-section img { transition:none !important; }
}

/* ============================================================
   PHASE 2 HOMEPAGE — structural SaaS redesign
   ============================================================ */
.phase2-section{position:relative;isolation:isolate;overflow:hidden}
.phase2-section:before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;background-image:linear-gradient(rgba(113,55,200,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(113,55,200,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent)}
.phase2-section:after{content:"";position:absolute;inset:-15%;z-index:-2;pointer-events:none;background:radial-gradient(circle at 18% 28%,rgba(139,63,216,.09),transparent 25%),radial-gradient(circle at 82% 32%,rgba(61,124,255,.08),transparent 26%),radial-gradient(circle at 58% 86%,rgba(216,75,155,.06),transparent 22%)}
.phase2-light{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-surface) 96%,#f5f0ff 4%),var(--bg-base))}
.phase2-architecture{background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--bg-base) 95%,#7137c8 5%))}
.phase2-stack-list{display:grid;gap:10px}
.phase2-stack-list>div{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--bg-surface) 92%,transparent);box-shadow:0 10px 30px rgba(20,20,45,.04)}
.phase2-stack-list span{font-size:11px;font-weight:800;color:#8b3fd8}
.phase2-stack-list strong{font-size:14px;color:var(--text-primary)}
.phase2-stack-list em{font-size:11px;font-style:normal;color:var(--text-muted);text-align:right}
.phase2-visual-shell{position:relative;min-height:440px;border-radius:32px;padding:44px 18px 18px;background:linear-gradient(145deg,rgba(21,27,47,.98),rgba(30,20,55,.96));border:1px solid rgba(139,63,216,.24);box-shadow:0 40px 100px rgba(20,15,55,.24);overflow:hidden}
.phase2-visual-shell:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 15%,rgba(139,63,216,.28),transparent 32%),radial-gradient(circle at 15% 80%,rgba(61,124,255,.16),transparent 28%);pointer-events:none}
.phase2-browser-chrome{position:absolute;top:13px;left:18px;right:18px;height:22px;display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.42);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.phase2-browser-chrome i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28)}
.phase2-browser-chrome span{margin-left:8px}
.phase2-cover-image{position:relative;width:100%;height:100%;min-height:375px;object-fit:cover;border-radius:22px;filter:saturate(.94) contrast(1.03);box-shadow:0 28px 70px rgba(0,0,0,.28)}
.phase2-float-card{position:absolute;z-index:3;display:grid;grid-template-columns:32px auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:13px 15px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(17,19,31,.76);backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.3);color:white}
.phase2-float-card .material-symbols-outlined{grid-row:1/3;color:#a66cf0;font-size:24px}.phase2-float-card b{font-size:12px}.phase2-float-card small{font-size:9px;color:rgba(255,255,255,.55)}
.phase2-float-a{left:-16px;bottom:48px}.phase2-float-b{right:-12px;top:86px}.phase2-scanline{position:absolute;left:18px;right:18px;height:1px;top:44%;background:linear-gradient(90deg,transparent,rgba(139,63,216,.8),transparent);box-shadow:0 0 24px rgba(139,63,216,.75);animation:phase2scan 5s ease-in-out infinite}
@keyframes phase2scan{0%,100%{transform:translateY(-80px);opacity:.1}50%{transform:translateY(110px);opacity:.8}}

.phase2-integration-stage{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-elevated) 90%,#efe8ff 10%),var(--bg-surface))}
.phase2-network{position:relative;height:520px;max-width:1060px;margin:0 auto;border:1px solid color-mix(in srgb,#8b3fd8 18%,var(--border));border-radius:38px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg-surface) 94%,#7137c8 6%),color-mix(in srgb,var(--bg-base) 97%,#3d7cff 3%));box-shadow:0 35px 90px rgba(39,25,78,.12);overflow:hidden}
.phase2-network:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at center,rgba(113,55,200,.08) 0 1px,transparent 1.5px);background-size:22px 22px;opacity:.7}
.phase2-network-glow{position:absolute;width:430px;height:430px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(139,63,216,.18),rgba(61,124,255,.07) 38%,transparent 72%)}
.phase2-network-core{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:190px;height:190px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(139,63,216,.35);background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(248,244,255,.9));box-shadow:0 24px 75px rgba(113,55,200,.22),inset 0 0 0 10px rgba(139,63,216,.035);color:#151b2f}
.phase2-network-core .material-symbols-outlined{font-size:40px;color:#7137c8;margin-bottom:8px}.phase2-network-core strong{font-size:18px}.phase2-network-core small{font-size:11px;color:#667085;margin-top:3px}
.phase2-node{position:absolute;z-index:3;width:150px;padding:14px 15px;border-radius:18px;border:1px solid var(--border);background:color-mix(in srgb,var(--bg-surface) 92%,transparent);backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(21,20,47,.10);display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.phase2-node .material-symbols-outlined{grid-row:1/3;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(113,55,200,.09);color:#7137c8;font-size:18px}.phase2-node b{font-size:12px}.phase2-node small{font-size:9px;color:var(--text-muted)}
.node-a{left:7%;top:11%}.node-b{right:7%;top:11%}.node-c{left:4%;bottom:12%}.node-d{right:4%;bottom:12%}.node-e{left:31%;top:5%}.node-f{right:30%;top:5%}
.phase2-network-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}.phase2-network-lines path{fill:none;stroke:url(#none);stroke:#9b6ae0;stroke-width:1.25;stroke-dasharray:5 8;opacity:.34;animation:phase2dash 14s linear infinite}@keyframes phase2dash{to{stroke-dashoffset:-160}}

.phase2-bento-stage{background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--bg-base) 96%,#f5efff 4%))}
.phase2-bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.phase2-bento{grid-column:span 4;min-height:220px;padding:26px;border-radius:26px;border:1px solid var(--border);background:linear-gradient(145deg,color-mix(in srgb,var(--bg-surface) 97%,#7137c8 3%),var(--bg-surface));box-shadow:0 20px 55px rgba(30,22,60,.07);position:relative;overflow:hidden}.phase2-bento:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;bottom:-90px;background:radial-gradient(circle,rgba(113,55,200,.11),transparent 68%)}
.phase2-bento-large{grid-column:span 7;grid-row:span 2;min-height:458px;background:linear-gradient(150deg,#151b2f,#22133e);color:white}.phase2-bento-large p{color:rgba(255,255,255,.62);max-width:520px;position:absolute;left:28px;bottom:26px}.phase2-bento-kicker{text-transform:uppercase;font-size:11px;letter-spacing:.16em;color:#cdb7ef}.phase2-metric{margin-top:38px}.phase2-metric strong{display:block;font-size:72px;line-height:1;font-weight:900;letter-spacing:-.05em}.phase2-metric span{font-size:13px;color:rgba(255,255,255,.55)}
.phase2-mini-chart{height:150px;display:flex;align-items:end;gap:8px;margin-top:34px}.phase2-mini-chart i{flex:1;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,#a66cf0,#d84b9b);box-shadow:0 0 20px rgba(139,63,216,.18)}
.phase2-bento .material-symbols-outlined{font-size:30px;color:#7137c8;margin-bottom:28px}.phase2-bento h3{font-size:20px;font-weight:800;margin-bottom:9px}.phase2-bento p{font-size:13px;line-height:1.6;color:var(--text-secondary)}
.phase2-bento-accent{background:linear-gradient(145deg,color-mix(in srgb,var(--bg-surface) 90%,#f3eaff 10%),color-mix(in srgb,var(--bg-surface) 95%,#ffeef7 5%))}.phase2-live{position:absolute;left:26px;bottom:22px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.phase2-live b{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34c759;margin-right:6px;box-shadow:0 0 12px rgba(52,199,89,.55)}
.phase2-profile-row{position:absolute;left:26px;bottom:22px;display:flex;align-items:center}.phase2-profile-row i{width:28px;height:28px;border-radius:50%;border:2px solid var(--bg-surface);margin-left:-6px;background:linear-gradient(135deg,#7137c8,#3d7cff)}.phase2-profile-row i:first-child{margin-left:0}.phase2-profile-row span{font-size:10px;color:var(--text-muted);margin-left:9px}
.phase2-bento-wide{grid-column:span 5;display:grid;grid-template-columns:1fr 1.15fr;gap:18px;align-items:center}.phase2-bento-wide img{width:100%;height:170px;object-fit:cover;border-radius:18px;box-shadow:0 14px 34px rgba(30,20,60,.12)}

.phase2-web-stage{background:linear-gradient(135deg,color-mix(in srgb,var(--bg-elevated) 94%,#f0e9ff 6%),var(--bg-base))}
.phase2-capabilities{display:grid;grid-template-columns:1fr 1fr;gap:12px}.phase2-capabilities>div{padding:15px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--bg-surface) 90%,transparent);display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px}.phase2-capabilities .material-symbols-outlined{grid-row:1/3;color:#7137c8;font-size:22px}.phase2-capabilities b{font-size:13px}.phase2-capabilities small{font-size:10px;color:var(--text-muted)}
.phase2-code-stage{position:relative;min-height:470px;border-radius:36px;background:#0d1020;border:1px solid rgba(139,63,216,.22);box-shadow:0 40px 100px rgba(19,16,46,.22);overflow:hidden;padding:26px}.phase2-code-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at center,black,transparent 78%)}.phase2-code-stage:after{content:"";position:absolute;width:360px;height:360px;right:-80px;top:-80px;border-radius:50%;background:radial-gradient(circle,rgba(139,63,216,.28),transparent 70%)}.phase2-code-image{position:relative;z-index:2;width:100%;height:100%;min-height:418px;object-fit:cover;border-radius:24px;box-shadow:0 22px 60px rgba(0,0,0,.36)}
.phase2-status-pill{position:absolute;z-index:4;border:1px solid rgba(255,255,255,.14);background:rgba(14,17,31,.78);backdrop-filter:blur(14px);color:white;border-radius:999px;padding:9px 13px;font-size:10px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.25)}.phase2-status-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34c759;margin-right:6px}.phase2-status-pill .material-symbols-outlined{font-size:14px;vertical-align:-3px;margin-right:5px;color:#9c7aeb}.top-pill{top:18px;right:18px}.bottom-pill{bottom:18px;left:18px}

.phase2-process-stage{background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--bg-base) 96%,#efe8ff 4%))}.phase2-roadmap-image{width:100%;border-radius:24px;border:1px solid var(--border);box-shadow:0 20px 55px rgba(34,24,70,.09);margin-top:10px}.phase2-process-list{position:relative}.phase2-process-list:before{content:"";position:absolute;left:34px;top:30px;bottom:30px;width:1px;background:linear-gradient(#7137c8,#d84b9b,#3d7cff)}.phase2-process-step{position:relative;display:grid;grid-template-columns:70px 1fr;gap:22px;min-height:180px;padding:22px 0}.phase2-process-step>span{position:relative;z-index:2;width:70px;height:70px;border-radius:22px;display:grid;place-items:center;background:var(--bg-surface);border:1px solid color-mix(in srgb,#7137c8 28%,var(--border));box-shadow:0 14px 35px rgba(48,30,90,.10);font-size:13px;font-weight:900;color:#7137c8}.phase2-process-step>div{padding:4px 0 0}.phase2-process-step small{text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:#8b3fd8;font-weight:800}.phase2-process-step h3{font-size:25px;font-weight:800;margin:6px 0 8px}.phase2-process-step p{color:var(--text-secondary);font-size:13px;line-height:1.65;max-width:560px}

@media(max-width:1023px){.phase2-visual-shell,.phase2-code-stage{min-height:390px}.phase2-network{height:620px}.node-a{left:6%;top:10%}.node-b{right:6%;top:10%}.node-e{left:21%;top:30%}.node-f{right:20%;top:30%}.node-c{left:8%;bottom:9%}.node-d{right:8%;bottom:9%}.phase2-bento{grid-column:span 6}.phase2-bento-large,.phase2-bento-wide{grid-column:span 12}.phase2-bento-large{min-height:410px}}
@media(max-width:767px){.phase2-section{padding-top:76px!important;padding-bottom:76px!important}.phase2-stack-list>div{grid-template-columns:34px 1fr}.phase2-stack-list em{grid-column:2;text-align:left}.phase2-visual-shell{min-height:300px;padding:42px 12px 12px}.phase2-cover-image{min-height:270px}.phase2-float-a{left:8px;bottom:18px}.phase2-float-b{right:8px;top:66px}.phase2-network{height:auto;min-height:690px;padding:30px 16px;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:12px}.phase2-network-core{position:relative;left:auto;top:auto;transform:none;width:160px;height:160px;margin:10px auto 28px;flex-basis:160px}.phase2-node{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:calc(50% - 8px)}.phase2-network-lines{display:none}.phase2-bento-grid{grid-template-columns:1fr}.phase2-bento,.phase2-bento-large,.phase2-bento-wide{grid-column:auto;min-height:0}.phase2-bento-large{min-height:390px}.phase2-bento-wide{grid-template-columns:1fr}.phase2-capabilities{grid-template-columns:1fr}.phase2-code-stage{min-height:320px;padding:16px}.phase2-code-image{min-height:290px}.phase2-process-list:before{left:26px}.phase2-process-step{grid-template-columns:54px 1fr}.phase2-process-step>span{width:54px;height:54px;border-radius:17px}.phase2-float-card{transform:scale(.88)}}

/* Phase 2 mobile-product showcase */
#solutions{background:radial-gradient(circle at 72% 25%,rgba(123,44,191,.18),transparent 30%),radial-gradient(circle at 16% 82%,rgba(61,124,255,.10),transparent 28%),#090c18!important}
#solutions:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:58px 58px;mask-image:radial-gradient(circle at 66% 34%,black,transparent 68%);pointer-events:none}
.phase2-dark-points{display:grid;gap:12px}.phase2-dark-points>div{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:11px;padding:15px 16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.035);backdrop-filter:blur(10px)}.phase2-dark-points .material-symbols-outlined{grid-row:1/3;color:#b68cff}.phase2-dark-points b{font-size:13px;color:white}.phase2-dark-points small{font-size:10px;color:rgba(255,255,255,.45)}
.phase2-phone-stage{position:relative;min-height:590px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);border-radius:38px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(123,44,191,.055));overflow:hidden}.phase2-phone-stage:after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(139,63,216,.28),transparent 68%);filter:blur(8px)}.phase2-phone-image{position:relative;z-index:3;height:520px;width:auto;object-fit:contain;filter:drop-shadow(0 34px 45px rgba(0,0,0,.46))}.phase2-orbit{position:absolute;border:1px solid rgba(166,108,240,.2);border-radius:50%;z-index:1}.orbit-one{width:430px;height:430px}.orbit-two{width:560px;height:560px;border-style:dashed;animation:orbitspin 28s linear infinite}@keyframes orbitspin{to{transform:rotate(360deg)}}.phase2-phone-card{position:absolute;z-index:5;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(14,17,31,.74);backdrop-filter:blur(18px);color:white;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:8px;box-shadow:0 18px 45px rgba(0,0,0,.3)}.phase2-phone-card .material-symbols-outlined{grid-row:1/3;color:#a66cf0;font-size:22px}.phase2-phone-card b{font-size:11px}.phase2-phone-card small{font-size:9px;color:rgba(255,255,255,.48)}.card-one{left:7%;top:20%}.card-two{right:7%;bottom:18%}
@media(max-width:767px){.phase2-phone-stage{min-height:470px}.phase2-phone-image{height:420px}.orbit-one{width:330px;height:330px}.orbit-two{width:440px;height:440px}.card-one{left:10px;top:14%}.card-two{right:10px;bottom:12%}}

/* ============================================================
   PHASE 3 — Interaction, proof, case-study & conversion system
   ============================================================ */
.phase3-scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;pointer-events:none;background:transparent}.phase3-scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#7137c8,#d84b9b,#f05a55);box-shadow:0 0 16px rgba(139,63,216,.35)}

.phase3-case-stage{padding:112px 0;background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--bg-base) 95%,#eee7ff 5%))}.phase3-section-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);gap:70px;align-items:end;margin-bottom:52px}.phase3-section-intro h2{font-size:clamp(38px,4.2vw,62px);line-height:1.02;letter-spacing:-.045em;font-weight:900;margin:18px 0 0;max-width:850px}.phase3-section-intro>p{font-size:15px;line-height:1.75;color:var(--text-secondary);max-width:470px}
.phase3-case-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr);gap:22px;perspective:1200px}.phase3-case-card{position:relative;border:1px solid color-mix(in srgb,var(--border-strong) 84%,transparent);border-radius:34px;overflow:hidden;background:linear-gradient(155deg,color-mix(in srgb,var(--bg-surface) 96%,#7137c8 4%),var(--bg-surface));box-shadow:0 28px 80px rgba(25,20,54,.09);transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d;transition:transform .22s ease,border-color .35s ease,box-shadow .35s ease}.phase3-case-card:hover{border-color:color-mix(in srgb,#8b3fd8 34%,var(--border));box-shadow:0 36px 100px rgba(28,19,67,.15)}.phase3-case-card--primary{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,.7fr);min-height:560px}.phase3-case-card--secondary{padding:28px;display:flex;flex-direction:column;min-height:560px}.phase3-case-media{position:relative;min-height:560px;overflow:hidden;background:#0b0e18}.phase3-case-media img{width:100%;height:100%;object-fit:cover;display:block}.phase3-case-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(9,12,24,.45))}.phase3-case-media--compact{min-height:260px;border-radius:23px;margin-top:auto}.phase3-case-scan{position:absolute;z-index:3;top:0;bottom:0;width:34%;left:-38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-14deg);animation:phase3scan 7s ease-in-out infinite}@keyframes phase3scan{0%,18%{left:-40%}55%,100%{left:115%}}.phase3-case-copy{padding:34px;display:flex;flex-direction:column;justify-content:center}.phase3-case-eyebrow,.phase3-kicker{font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.16em;color:#9b6bdd;font-weight:800}.phase3-case-copy h3{font-size:32px;line-height:1.05;letter-spacing:-.03em;font-weight:900;margin:12px 0 14px}.phase3-case-copy p{font-size:14px;line-height:1.72;color:var(--text-secondary)}.phase3-case-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.phase3-case-chips span{padding:7px 10px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--bg-elevated) 82%,transparent);font-size:10px;font-weight:700;color:var(--text-secondary)}.phase3-text-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--text-primary);width:max-content;margin-top:6px}.phase3-text-link span{color:#8b3fd8;font-size:17px;transition:transform .25s ease}.phase3-text-link:hover span{transform:translateX(4px)}.phase3-case-float{position:absolute;z-index:5;padding:9px 12px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(12,15,29,.68);backdrop-filter:blur(14px);color:white;font-size:10px;font-weight:700;box-shadow:0 14px 35px rgba(0,0,0,.24)}.phase3-case-float--top{top:18px;left:18px}.phase3-case-float--bottom{bottom:18px;right:18px}.phase3-case-float i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#43d17d;box-shadow:0 0 10px rgba(67,209,125,.6);margin-right:6px}.phase3-case-float .material-symbols-outlined{font-size:14px;vertical-align:-3px;color:#b897ff;margin-right:4px}
.phase3-trust-console{margin-top:22px;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:34px;padding:32px;border:1px solid var(--border);border-radius:30px;background:linear-gradient(145deg,color-mix(in srgb,var(--bg-surface) 96%,#7137c8 4%),var(--bg-surface));box-shadow:0 24px 70px rgba(26,20,54,.07)}.phase3-trust-copy h3{font-size:28px;line-height:1.1;letter-spacing:-.03em;font-weight:850;margin:11px 0}.phase3-trust-copy p{font-size:13px;line-height:1.7;color:var(--text-secondary);max-width:520px}.phase3-trust-signals{display:grid;grid-template-columns:1fr 1fr;gap:12px}.phase3-trust-signals>div{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;gap:0 11px;padding:16px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--bg-elevated) 72%,transparent)}.phase3-trust-signals .material-symbols-outlined{grid-row:1/3;color:#8b3fd8;font-size:23px}.phase3-trust-signals b{font-size:12px}.phase3-trust-signals small{font-size:10px;line-height:1.5;color:var(--text-muted)}

.phase3-conversion{position:relative;padding:118px 0;background:#090c18!important;color:white;overflow:hidden}.phase3-conversion-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:58px 58px;mask-image:radial-gradient(ellipse 72% 86% at 50% 50%,black,transparent 86%)}.phase3-conversion-orb{position:absolute;border-radius:50%;filter:blur(20px);pointer-events:none}.phase3-conversion-orb--one{width:620px;height:620px;left:-250px;top:-260px;background:radial-gradient(circle,rgba(113,55,200,.28),transparent 70%)}.phase3-conversion-orb--two{width:520px;height:520px;right:-190px;bottom:-260px;background:radial-gradient(circle,rgba(61,124,255,.19),rgba(216,75,155,.07) 45%,transparent 72%)}.phase3-conversion-shell{display:grid;grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);align-items:center;gap:70px;padding:56px;border:1px solid rgba(255,255,255,.09);border-radius:38px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 100px rgba(0,0,0,.28);backdrop-filter:blur(14px)}.phase3-live-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.11);border-radius:999px;padding:8px 12px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.68)}.phase3-live-pill i{width:7px;height:7px;border-radius:50%;background:#43d17d;box-shadow:0 0 12px rgba(67,209,125,.72)}.phase3-conversion-copy h2{font-size:clamp(44px,5vw,68px);line-height:.98;letter-spacing:-.055em;font-weight:900;margin:20px 0}.phase3-conversion-copy p{font-size:15px;line-height:1.75;color:rgba(255,255,255,.6);max-width:570px}.phase3-conversion-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.phase3-btn-primary,.phase3-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:999px;font-size:12px;font-weight:800;transition:transform .22s ease,background .25s ease,border-color .25s ease}.phase3-btn-primary{background:linear-gradient(135deg,#7137c8,#8b3fd8 52%,#d84b9b);color:white;box-shadow:0 14px 40px rgba(113,55,200,.26)}.phase3-btn-ghost{border:1px solid rgba(255,255,255,.14);color:white;background:rgba(255,255,255,.035)}.phase3-btn-ghost:hover{background:rgba(255,255,255,.07)}
.phase3-system-map{position:relative;height:360px;min-width:0}.phase3-system-map svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}.phase3-system-map path{fill:none;stroke:url(#none);stroke:rgba(166,108,240,.34);stroke-width:1.2;stroke-dasharray:5 7;stroke-dashoffset:120}.phase3-system-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:160px;height:160px;border-radius:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(125,71,211,.26),rgba(16,19,34,.88));border:1px solid rgba(190,153,255,.27);box-shadow:0 0 70px rgba(113,55,200,.22),inset 0 1px 0 rgba(255,255,255,.08)}.phase3-system-core .material-symbols-outlined{font-size:34px;color:#c7a7ff;margin-bottom:7px}.phase3-system-core b{font-size:16px}.phase3-system-core small{font-size:9px;color:rgba(255,255,255,.46);margin-top:3px}.phase3-system-node{position:absolute;z-index:3;min-width:74px;padding:10px 14px;text-align:center;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(14,17,31,.78);backdrop-filter:blur(14px);font-size:10px;font-weight:800;box-shadow:0 14px 30px rgba(0,0,0,.24)}.phase3-system-node.n1{left:3%;top:9%}.phase3-system-node.n2{right:4%;top:10%}.phase3-system-node.n3{left:1%;bottom:8%}.phase3-system-node.n4{right:1%;bottom:8%}.phase3-system-node.n5{left:50%;bottom:-1%;transform:translateX(-50%)}

.phase3-contact{padding:118px 0;background:radial-gradient(800px 420px at 18% 50%,rgba(113,55,200,.09),transparent 70%),linear-gradient(180deg,var(--bg-base),var(--bg-surface))}.phase3-contact-shell{display:grid;grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr);gap:22px;border:1px solid var(--border);border-radius:38px;padding:20px;background:color-mix(in srgb,var(--bg-surface) 95%,#7137c8 5%);box-shadow:0 36px 100px rgba(29,20,65,.1)}.phase3-contact-side{position:relative;padding:44px;overflow:hidden;border-radius:28px;background:linear-gradient(155deg,#12172a,#211338);color:white;min-height:660px}.phase3-contact-side:after{content:"";position:absolute;width:420px;height:420px;right:-180px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(139,63,216,.34),transparent 70%)}.phase3-contact-side .section-chip{position:relative;z-index:2;color:white;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05)}.phase3-contact-side h2{position:relative;z-index:2;margin:20px 0 14px;font-size:clamp(42px,4vw,60px);line-height:1;letter-spacing:-.05em;font-weight:900}.phase3-contact-side>p{position:relative;z-index:2;color:rgba(255,255,255,.6);font-size:14px;line-height:1.7;max-width:520px}.phase3-contact-points{position:relative;z-index:2;display:grid;gap:10px;margin-top:28px}.phase3-contact-points>div{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:0 10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}.phase3-contact-points .material-symbols-outlined{grid-row:1/3;color:#b993ff;font-size:22px}.phase3-contact-points b{font-size:12px}.phase3-contact-points small{font-size:10px;line-height:1.5;color:rgba(255,255,255,.43)}.phase3-contact-visual{position:absolute;left:44px;right:44px;bottom:38px;height:170px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0b0e18}.phase3-contact-visual img{width:100%;height:100%;object-fit:cover;opacity:.83}.phase3-contact-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(11,14,24,.55))}.phase3-contact-status{position:absolute;z-index:3;left:12px;bottom:12px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(8,11,21,.68);backdrop-filter:blur(12px);padding:7px 10px;font-size:9px;font-weight:700}.phase3-contact-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#43d17d;margin-right:6px}.phase3-form-panel{padding:38px 34px;display:flex;flex-direction:column;justify-content:center}.phase3-form-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;margin-bottom:4px;border-bottom:1px solid var(--border)}.phase3-form-head span{font-size:13px;font-weight:850}.phase3-form-head small{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.phase3-form-panel label{display:block;margin-bottom:8px;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}.phase3-form-panel input,.phase3-form-panel textarea{width:100%;border:1px solid var(--border);border-radius:15px;padding:14px 15px;background:var(--bg-elevated);color:var(--text-primary);font-size:13px;outline:none;transition:border-color .22s ease,box-shadow .22s ease,background .22s ease}.phase3-form-panel input:focus,.phase3-form-panel textarea:focus{border-color:rgba(139,63,216,.58);box-shadow:0 0 0 4px rgba(139,63,216,.08);background:var(--bg-surface)}.phase3-submit{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-radius:15px;background:linear-gradient(135deg,#7137c8,#8b3fd8,#d84b9b);color:white;font-size:12px;font-weight:850;box-shadow:0 14px 35px rgba(113,55,200,.2);transition:transform .22s ease,box-shadow .22s ease}.phase3-submit:hover{box-shadow:0 18px 44px rgba(113,55,200,.28)}.phase3-submit .material-symbols-outlined{font-size:18px}.phase3-form-note{text-align:center;color:var(--text-muted);font-size:9px;line-height:1.5;margin-top:12px}

/* Portfolio phase 3: richer filtering and focus */
#portfolio-grid{perspective:1200px}.portfolio-item{transition:opacity .3s ease,transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease!important}.portfolio-item:hover{transform:translateY(-9px) scale(1.01)!important;box-shadow:0 28px 70px rgba(35,25,73,.14)!important}.portfolio-tab{position:relative;overflow:hidden}.portfolio-tab:after{content:"";position:absolute;inset:auto 20% 0;height:1px;background:linear-gradient(90deg,transparent,#b47df4,transparent);opacity:0;transition:opacity .2s ease}.portfolio-tab:hover:after,.portfolio-tab.active:after{opacity:1}

@media(max-width:1023px){.phase3-section-intro{grid-template-columns:1fr;gap:20px}.phase3-case-grid{grid-template-columns:1fr}.phase3-case-card--primary{grid-template-columns:1fr}.phase3-case-card--primary .phase3-case-media{min-height:430px}.phase3-case-card--secondary{min-height:auto}.phase3-trust-console{grid-template-columns:1fr}.phase3-conversion-shell,.phase3-contact-shell{grid-template-columns:1fr}.phase3-system-map{height:330px}.phase3-contact-side{min-height:620px}}
@media(max-width:767px){.phase3-case-stage,.phase3-conversion,.phase3-contact{padding:78px 0}.phase3-section-intro h2{font-size:38px}.phase3-case-card{border-radius:26px}.phase3-case-card--primary .phase3-case-media{min-height:320px}.phase3-case-copy{padding:24px}.phase3-case-copy h3{font-size:27px}.phase3-trust-console{padding:22px}.phase3-trust-signals{grid-template-columns:1fr}.phase3-conversion-shell{padding:28px 22px;gap:28px;border-radius:28px}.phase3-conversion-copy h2{font-size:42px}.phase3-system-map{height:300px}.phase3-system-core{width:132px;height:132px;border-radius:34px}.phase3-contact-shell{padding:10px;border-radius:28px}.phase3-contact-side{padding:30px 24px;min-height:610px}.phase3-contact-visual{left:24px;right:24px;bottom:24px}.phase3-form-panel{padding:26px 16px}.phase3-case-float{display:none}}
@media(prefers-reduced-motion:reduce){.phase3-case-card{transform:none!important}.phase3-case-scan{animation:none}.phase3-system-map path{stroke-dashoffset:0!important}}

/* ============================================================
   Phase 4 — site-wide responsive, service-page & UX polish
   ============================================================ */
:focus-visible { outline: 2px solid #8b3fd8; outline-offset: 4px; }
img { max-width: 100%; height: auto; }

.service-page-shell {
    --service-grid: color-mix(in srgb, var(--text-primary) 4%, transparent);
    background:
      radial-gradient(820px 520px at 8% 8%, rgba(113,55,200,.09), transparent 70%),
      radial-gradient(720px 480px at 94% 22%, rgba(61,124,255,.06), transparent 72%),
      var(--bg-base);
}
.service-page-shell > section { position: relative; isolation: isolate; overflow: hidden; }
.service-page-shell > section::before {
    content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
    background-image:
      linear-gradient(to right,var(--service-grid) 1px,transparent 1px),
      linear-gradient(to bottom,var(--service-grid) 1px,transparent 1px);
    background-size:76px 76px;
    -webkit-mask-image:radial-gradient(ellipse 70% 58% at 50% 46%,#000,transparent 90%);
    mask-image:radial-gradient(ellipse 70% 58% at 50% 46%,#000,transparent 90%);
    opacity:.24;
}
.service-page-shell > section:nth-of-type(3n + 2)::after,
.service-page-shell > section:nth-of-type(3n)::after {
    content:""; position:absolute; z-index:-1; width:430px; height:430px; border-radius:999px;
    pointer-events:none; filter:blur(24px); opacity:.72;
}
.service-page-shell > section:nth-of-type(3n + 2)::after {
    right:-240px; top:8%; background:radial-gradient(circle,rgba(139,63,216,.13),rgba(216,75,155,.04) 48%,transparent 72%);
}
.service-page-shell > section:nth-of-type(3n)::after {
    left:-250px; bottom:0; background:radial-gradient(circle,rgba(61,124,255,.10),rgba(77,184,255,.035) 48%,transparent 72%);
}

.service-page-shell > section:first-child {
    min-height:min(760px,92vh); display:flex; align-items:center;
    background:
      radial-gradient(700px 460px at 74% 38%,rgba(113,55,200,.14),transparent 70%),
      radial-gradient(540px 340px at 18% 78%,rgba(61,124,255,.07),transparent 70%),
      var(--bg-base) !important;
    border-bottom:1px solid var(--border);
}
.service-page-shell > section:first-child::before { opacity:.38; background-size:64px 64px; }
.service-page-shell > section:first-child h1 { text-wrap:balance; max-width:900px; }
.service-page-shell > section:first-child img { filter:saturate(1.04) contrast(1.02); }
.service-page-shell > section:first-child [class*="rounded-3xl"][class*="border"],
.service-page-shell > section:first-child [class*="rounded-2xl"][class*="border"] {
    box-shadow:0 34px 90px rgba(11,15,35,.16),inset 0 1px 0 rgba(255,255,255,.08) !important;
    border-color:color-mix(in srgb,#8b3fd8 26%,var(--border)) !important;
}

.service-page-shell .clay-glass-card,
.service-page-shell [class*="rounded-3xl"][class*="border"] {
    transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .38s ease;
}
.service-page-shell .clay-glass-card:hover {
    transform:translateY(-7px);
    border-color:color-mix(in srgb,#8b3fd8 34%,var(--border)) !important;
    box-shadow:0 28px 72px rgba(16,18,40,.14);
}
.service-page-shell .clay-glass-card img { transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .45s ease; }
.service-page-shell .clay-glass-card:hover img { transform:scale(1.035); filter:saturate(1.06) contrast(1.025); }

.service-page-shell > section > .max-w-container-max { width:100%; }
.service-page-shell .px-margin-desktop,
main .px-margin-desktop { padding-left:clamp(22px,5.85vw,80px) !important; padding-right:clamp(22px,5.85vw,80px) !important; }
.service-page-shell h2 { text-wrap:balance; }
.service-page-shell p { text-wrap:pretty; }
.service-page-shell img[class*="rounded"], .saas-section img[class*="rounded"] { box-shadow:0 18px 56px rgba(11,15,35,.10); }

.service-page-shell a[class*="rounded-full"],
.service-page-shell button[class*="rounded-full"] {
    position:relative; overflow:hidden;
    transition:transform .24s ease,box-shadow .24s ease,background-color .24s ease,border-color .24s ease;
}
.service-page-shell a[class*="rounded-full"]:hover,
.service-page-shell button[class*="rounded-full"]:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(31,22,58,.16); }

input,textarea,select { transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease; }
input:focus,textarea:focus,select:focus {
    border-color:color-mix(in srgb,#8b3fd8 58%,var(--border-strong)) !important;
    box-shadow:0 0 0 4px rgba(139,63,216,.10); outline:none;
}

/* Shared responsive rhythm: fixes the fixed 80px gutter on tablets/mobile. */
@media (max-width:1023px) {
    .service-page-shell > section:first-child { min-height:auto; padding-top:128px !important; padding-bottom:80px !important; }
    .service-page-shell .grid { row-gap:32px; }
}
@media (max-width:767px) {
    .service-page-shell > section,.saas-section { padding-top:64px !important; padding-bottom:64px !important; }
    .service-page-shell > section:first-child { padding-top:112px !important; padding-bottom:64px !important; }
    .service-page-shell h1 { font-size:clamp(38px,11vw,56px) !important; line-height:1.05 !important; letter-spacing:-.035em !important; }
    .service-page-shell h2,.saas-section h2 { font-size:clamp(30px,8vw,40px) !important; line-height:1.12 !important; }
    .service-page-shell .rounded-3xl { border-radius:22px; }
    .service-page-shell [class*="p-8"] { padding:24px; }
    .service-page-shell [class*="gap-12"] { gap:32px; }
    .service-page-shell > section::before { background-size:52px 52px; opacity:.16; }
}
@media (max-width:420px) {
    .service-page-shell .px-margin-desktop,main .px-margin-desktop { padding-left:18px !important; padding-right:18px !important; }
    .service-page-shell h1 { font-size:38px !important; }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}


/* ============================================================
   Phase 5 — Distinct service identities + mobile production pass
   ============================================================ */
.scaleon-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.service-page-shell{--service-a:#8b3fd8;--service-b:#3d7cff;--service-c:#d84b9b}
.service-ai{--service-a:#8b3fd8;--service-b:#d84b9b;--service-c:#4db8ff}
.service-web{--service-a:#3d7cff;--service-b:#8b3fd8;--service-c:#4db8ff}
.service-app{--service-a:#d84b9b;--service-b:#7137c8;--service-c:#f05a55}
.service-cloud{--service-a:#3d7cff;--service-b:#4db8ff;--service-c:#7137c8}
.service-product{--service-a:#7137c8;--service-b:#3d7cff;--service-c:#d84b9b}
.service-commerce{--service-a:#f05a55;--service-b:#d84b9b;--service-c:#7137c8}
.service-marketing{--service-a:#8b3fd8;--service-b:#f05a55;--service-c:#3d7cff}
.service-dubai{--service-a:#3d7cff;--service-b:#7137c8;--service-c:#f05a55}
.service-about{--service-a:#7137c8;--service-b:#8b3fd8;--service-c:#4db8ff}

.service-hero{isolation:isolate;min-height:680px;background:
 radial-gradient(900px 540px at 82% 35%,color-mix(in srgb,var(--service-a) 18%,transparent),transparent 70%),
 radial-gradient(700px 420px at 8% 72%,color-mix(in srgb,var(--service-b) 11%,transparent),transparent 72%),var(--bg-base)!important}
.service-hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.26;background-image:linear-gradient(to right,color-mix(in srgb,var(--text-primary) 5%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--text-primary) 5%,transparent) 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(to bottom,black,transparent 94%)}
.service-hero img{filter:saturate(1.03) contrast(1.02);box-shadow:0 35px 100px color-mix(in srgb,var(--service-a) 16%,transparent);border:1px solid color-mix(in srgb,var(--service-a) 24%,var(--border))}
.service-page-shell>section:not(.service-hero):not(.service-identity-strip){position:relative;isolation:isolate}
.service-page-shell>section:not(.service-hero):not(.service-identity-strip):before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px 280px at 88% 8%,color-mix(in srgb,var(--service-a) 7%,transparent),transparent 72%);opacity:.75}
.service-page-shell .rounded-3xl,.service-page-shell .rounded-2xl{border-color:color-mix(in srgb,var(--service-a) 18%,var(--border))}
.service-page-shell img{max-width:100%;height:auto}

.service-identity-strip{position:relative;z-index:5;margin-top:-50px;padding:0 24px 44px;background:transparent!important;overflow:visible!important}
.service-identity-inner{max-width:1180px;margin:auto;min-height:154px;border:1px solid color-mix(in srgb,var(--service-a) 24%,var(--border));border-radius:28px;padding:22px 24px 22px 28px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:28px;background:color-mix(in srgb,var(--bg-surface) 86%,transparent);backdrop-filter:blur(22px);box-shadow:0 30px 90px rgba(10,14,32,.18);overflow:hidden}
.service-kicker{display:block;font:800 11px/1.2 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
.service-pill-row{display:flex;gap:9px;flex-wrap:wrap}.service-pill-row span{padding:9px 13px;border-radius:999px;border:1px solid color-mix(in srgb,var(--service-a) 20%,var(--border));background:color-mix(in srgb,var(--bg-elevated) 82%,transparent);font-size:12px;font-weight:700;color:var(--text-secondary)}
.service-identity-visual{position:relative;height:108px;border-radius:20px;overflow:hidden;border:1px solid color-mix(in srgb,var(--service-b) 18%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--service-a) 11%,var(--bg-surface)),color-mix(in srgb,var(--service-b) 6%,var(--bg-surface)))}
.service-identity-visual img{width:100%;height:100%;object-fit:cover;opacity:.48;mix-blend-mode:luminosity;transform:scale(1.06);filter:saturate(.8) contrast(1.08)}
.service-identity-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg-surface) 20%,transparent),transparent 45%,color-mix(in srgb,var(--service-a) 16%,transparent))}
.service-identity-visual i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--service-c);box-shadow:0 0 0 5px color-mix(in srgb,var(--service-c) 15%,transparent),0 0 28px var(--service-c);z-index:3;animation:servicePulse 3s ease-in-out infinite}.service-identity-visual i:nth-of-type(1){left:19%;top:37%}.service-identity-visual i:nth-of-type(2){left:53%;top:64%;animation-delay:-1s}.service-identity-visual i:nth-of-type(3){right:16%;top:27%;animation-delay:-2s}@keyframes servicePulse{50%{transform:scale(.7);opacity:.5}}

/* Different composition rhythm by discipline. */
.service-ai>section:nth-of-type(3),.service-product>section:nth-of-type(3){background-image:linear-gradient(135deg,color-mix(in srgb,var(--service-a) 6%,var(--bg-elevated)),var(--bg-surface))!important}
.service-cloud>section:nth-of-type(4),.service-web>section:nth-of-type(3){background-image:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--service-b) 5%,var(--bg-elevated)))!important}
.service-commerce>section:nth-of-type(3),.service-marketing>section:nth-of-type(4){background-image:radial-gradient(900px 420px at 50% 0,color-mix(in srgb,var(--service-a) 10%,transparent),transparent 70%),var(--bg-surface)!important}
.service-app>section:nth-of-type(4),.service-dubai>section:nth-of-type(4){background-image:linear-gradient(145deg,color-mix(in srgb,var(--service-a) 7%,var(--bg-surface)),var(--bg-base))!important}

/* Mobile: reduce oversized desktop geometry and make every control finger-friendly. */
@media(max-width:1023px){
  .service-hero{min-height:auto;padding-top:8.5rem!important;padding-bottom:5.5rem!important}
  .service-page-shell h1{font-size:clamp(2.55rem,8.6vw,4.6rem)!important;line-height:1.02!important;letter-spacing:-.045em!important}
  .service-page-shell h2{font-size:clamp(2rem,6vw,3.15rem)!important;line-height:1.08!important}
  .service-page-shell section[class*="py-24"]{padding-top:5rem!important;padding-bottom:5rem!important}
  .service-page-shell .grid{column-gap:1.5rem}
}
@media(max-width:767px){
  html{scroll-padding-top:72px}
  body{font-size:16px}
  #main-navbar{height:64px}.service-hero{padding-top:7.5rem!important;padding-bottom:4.5rem!important;min-height:0}
  .service-page-shell h1{font-size:clamp(2.25rem,11.2vw,3.4rem)!important;line-height:1.02!important}
  .service-page-shell h2{font-size:clamp(1.85rem,8vw,2.6rem)!important}.service-page-shell h3{line-height:1.14}
  .service-page-shell p{font-size:15px;line-height:1.7}
  .service-page-shell section[class*="py-24"]{padding-top:4rem!important;padding-bottom:4rem!important}
  .service-page-shell section[class*="py-16"]{padding-top:3.25rem!important;padding-bottom:3.25rem!important}
  .service-page-shell [class*="p-10"],.service-page-shell [class*="p-12"]{padding:1.35rem!important}
  .service-page-shell [class*="gap-12"]{gap:2rem!important}.service-page-shell [class*="gap-16"]{gap:2.25rem!important}
  .service-page-shell a[class*="px-"],.service-page-shell button{min-height:44px}
  .service-identity-strip{margin-top:-24px;padding:0 16px 30px}.service-identity-inner{grid-template-columns:1fr;padding:18px;border-radius:22px;gap:16px}.service-identity-visual{height:88px}.service-pill-row{gap:7px}.service-pill-row span{font-size:11px;padding:8px 10px}
  .service-hero img{max-height:330px;object-fit:contain}
}
@media(max-width:420px){
  .service-page-shell h1{font-size:2.22rem!important}.service-page-shell h2{font-size:1.8rem!important}
  .service-identity-visual{display:none}.service-identity-inner{min-height:0}.service-pill-row span{width:100%;text-align:center}
  .fixed.bottom-6.right-6{right:14px!important;bottom:14px!important}
}
@media(prefers-reduced-motion:reduce){.service-identity-visual i{animation:none!important}.service-page-shell *{scroll-behavior:auto!important}}


/* ============================================================
   Phase 6 — native scrolling, render stability & performance
   ============================================================ */
html {
    scroll-behavior: auto !important;
    scroll-padding-top: 76px;
    scrollbar-gutter: stable;
}
body { overscroll-behavior-y: auto; }
section[id] { scroll-margin-top: 82px; }

/* Content stays visible even when animation JS is delayed or unavailable. */
.gs-reveal,
.gs-reveal-left,
.gs-reveal-right,
.gs-reveal-scale { transform: none; }

/* Remove the long pinned CRM scroll sequence. Cards remain in normal document
   flow, preventing scroll trapping and missing states after resize/navigation. */
#crm-cards-stack { height: auto !important; }
#crm-pin-section .crm-scroll-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
}
.crm-visual-column > div { position: sticky; top: 96px; }
@media (min-width: 1024px) {
    #crm-cards-stack {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px !important;
    }
    #crm-pin-section .crm-scroll-card { min-height: 245px; }
}

/* Never skip whole sections or images: this keeps long pages and the browser's
   scroll height stable. */
.service-page-shell > section,
main > .saas-section,
img { content-visibility: visible !important; }

/* Reduce GPU-heavy compositing on phones/tablets. */
@media (max-width: 767px), (pointer: coarse) {
    .service-identity-inner,
    .phase3-conversion-shell,
    .clay-glass-card,
    [class*="backdrop-blur"] {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .service-page-shell > section:nth-of-type(3n + 2)::after,
    .service-page-shell > section:nth-of-type(3n)::after,
    .saas-section::after {
        filter: blur(8px) !important;
        opacity: .38 !important;
    }
    .clay-glass-card:hover,
    .saas-interactive-card:hover,
    .portfolio-item:hover { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
}

/* ============================================================
   Phase 6.1 — homepage scroll stability & global section polish
   ============================================================ */
html { scroll-behavior: auto; }
body.home main { overflow-anchor: none; }
body.home .gs-reveal,
body.home .gs-reveal-left,
body.home .gs-reveal-right,
body.home .gs-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
}
body.home .saas-interactive-card { will-change: auto; }
body.home .phase3-system-map path { stroke-dashoffset: 0 !important; }

.global-delivery-panel{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:28px;
    padding:34px;
    border:1px solid var(--border);
    border-radius:28px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--bg-surface) 96%,#7137c8 4%),var(--bg-surface));
    box-shadow:0 22px 60px rgba(28,20,58,.08);
}
.global-delivery-panel:after{
    content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-130px;
    background:radial-gradient(circle,rgba(123,44,191,.13),transparent 68%);pointer-events:none;
}
.global-delivery-copy,.global-delivery-grid,.global-market-row{position:relative;z-index:1}
.global-delivery-copy h3{font:800 clamp(27px,3vw,38px)/1.08 Outfit,sans-serif;letter-spacing:-.035em;color:var(--text-primary);margin:16px 0 12px}
.global-delivery-copy p{font-size:14px;line-height:1.75;color:var(--text-secondary);max-width:620px}
.global-delivery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.global-delivery-grid>div{min-height:106px;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--bg-elevated);display:flex;flex-direction:column;justify-content:flex-end}
.global-delivery-grid strong{font:800 22px/1.1 Outfit,sans-serif;color:var(--text-primary)}
.global-delivery-grid span{font-size:11px;color:var(--text-muted);margin-top:7px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.global-market-row{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.global-market-row span{padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg-base);color:var(--text-secondary);font-size:11px;font-weight:700}
@media(max-width:767px){
  .global-delivery-panel{grid-template-columns:1fr;padding:24px;border-radius:22px;gap:20px}
  .global-delivery-grid{grid-template-columns:1fr 1fr}
  .global-delivery-grid>div{min-height:94px;padding:15px}
}

/* =============================================================
   CRM SERVICES — centered, native scroll-snap service carousel
   Keeps page scrolling native while giving the cards a deliberate
   horizontal scroll interaction. Added 2026-08-28.
   ============================================================= */
#crm-pin-section {
    overflow: hidden;
}

/* The CRM services are the focal point of this section. The old right-side
   visual made the cards feel oversized/off-centre, so the cards now occupy a
   balanced, centred stage. */
#crm-pin-section > .max-w-container-max > .grid {
    display: block !important;
    position: relative;
    width: 100%;
}

#crm-pin-section .crm-visual-column {
    display: none !important;
}

#crm-pin-section #crm-cards-stack {
    position: relative !important;
    display: flex !important;
    align-items: stretch;
    gap: 20px !important;
    width: min(1080px, 100%) !important;
    max-width: 1080px;
    height: auto !important;
    margin: 0 auto;
    padding: 10px max(20px, calc((100% - 1020px) / 2)) 26px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, #7b2cbf 42%, var(--border)) transparent;
    -webkit-overflow-scrolling: touch;
}

#crm-pin-section #crm-cards-stack::-webkit-scrollbar {
    height: 7px;
}
#crm-pin-section #crm-cards-stack::-webkit-scrollbar-track {
    background: transparent;
}
#crm-pin-section #crm-cards-stack::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, #7b2cbf 38%, var(--border));
    border-radius: 999px;
}

#crm-pin-section #crm-cards-stack::before {
    content: "SCROLL TO EXPLORE  •  CRM / INTELLIGENCE LAYER";
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 40px);
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--text-muted);
}

#crm-pin-section .crm-scroll-card {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 clamp(280px, 31vw, 326px);
    width: auto !important;
    min-width: 0;
    height: auto !important;
    min-height: 278px !important;
    padding: 26px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: 0 16px 42px rgba(17, 19, 40, .08) !important;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background-color .3s ease !important;
}

#crm-pin-section .crm-scroll-card:hover {
    transform: translateY(-5px) !important;
    border-color: color-mix(in srgb, #7b2cbf 34%, var(--border)) !important;
    box-shadow: 0 24px 56px rgba(17, 19, 40, .13) !important;
}

#crm-pin-section .crm-scroll-card h4 {
    font-size: 1.08rem !important;
    line-height: 1.35;
}

#crm-pin-section .crm-scroll-card p {
    font-size: .875rem !important;
    line-height: 1.65;
}

@media (max-width: 767px) {
    #crm-pin-section {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
    #crm-pin-section #crm-cards-stack {
        width: calc(100vw - 16px) !important;
        margin-left: calc(50% - 50vw + 8px);
        padding: 12px 9vw 24px;
        gap: 14px !important;
    }
    #crm-pin-section .crm-scroll-card {
        flex-basis: min(82vw, 315px);
        min-height: 260px !important;
        padding: 22px !important;
    }
    #crm-pin-section #crm-cards-stack::before {
        top: -20px;
        font-size: 9px;
        letter-spacing: .11em;
    }
}

@media (prefers-reduced-motion: reduce) {
    #crm-pin-section .crm-scroll-card {
        transition: none !important;
    }
}

/* ============================================================
   Final scroll stability pass — preserves the original Tailwind runtime
   and layout while removing only expensive homepage paint/scroll effects.
   ============================================================ */
html { scroll-behavior: auto !important; }
body.home, body.home main { overflow-anchor: none; }
body.home { overscroll-behavior-y: auto; }

/* Keep decorative motion from repainting continuously while the user scrolls. */
body.home .aurora-blob,
body.home .phase2-scanline,
body.home .phase2-network-lines path,
body.home .orbit-two,
body.home .phase3-case-scan,
body.home .phase3-system-map path,
body.home [class*="animate-"] {
    animation: none !important;
}

/* Heavy backdrop filtering across many large cards is expensive during scroll.
   Preserve backgrounds/borders/shadows while disabling only the filter layer. */
.clay-glass-card,
.phase2-float-card,
.phase2-node,
.phase2-status-pill,
.phase2-dark-points > div,
.phase2-phone-card,
.phase3-case-float,
.phase3-conversion-shell,
[class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Avoid sticky repaint work on the homepage. */
body.home .crm-visual-column > div { position: static !important; }

/* Compact CRM services — short, centered, no horizontal scroll trapping. */
#crm-pin-section.crm-services-compact {
    padding: 82px 24px;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.crm-services-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
}
.crm-services-heading {
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
}
.crm-services-heading h2 {
    margin: 12px 0 12px;
    color: var(--text-primary);
    font: 800 clamp(32px, 4vw, 48px)/1.08 Outfit, sans-serif;
    letter-spacing: -.035em;
}
.crm-services-heading p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
}
.crm-services-primary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.crm-service-card {
    min-height: 190px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--bg-surface);
    box-shadow: 0 12px 34px rgba(17,19,40,.06);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.crm-service-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, #7b2cbf 32%, var(--border));
    box-shadow: 0 18px 42px rgba(17,19,40,.09);
}
.crm-service-card > .material-symbols-outlined {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 12px;
    background: color-mix(in srgb, #7b2cbf 11%, var(--bg-elevated));
    color: #8b3fd8;
    font-size: 22px;
}
.crm-service-card h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font: 800 18px/1.25 Outfit, sans-serif;
}
.crm-service-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}
.crm-service-card--featured {
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-surface) 94%, #7b2cbf 6%), var(--bg-surface));
    border-color: color-mix(in srgb, #7b2cbf 28%, var(--border));
}
.crm-services-more {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.crm-services-more > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}
.crm-services-more .material-symbols-outlined {
    font-size: 15px;
    color: #8b3fd8;
}

@media (max-width: 900px) {
    .crm-services-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    #crm-pin-section.crm-services-compact { padding: 64px 18px; }
    .crm-services-heading { margin-bottom: 26px; }
    .crm-services-heading h2 { font-size: 32px; }
    .crm-services-primary { grid-template-columns: 1fr; gap: 12px; }
    .crm-service-card { min-height: 0; padding: 20px; }
    .crm-services-more { justify-content: flex-start; }
}

/* ============================================================
   2026-08-31 production stability + visual depth pass
   ============================================================ */

/* One document scroller only. Decorative layers must never affect page height. */
html {
    min-height: 100%;
    width: 100%;
    overflow-x: clip !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
    overflow-anchor: none !important;
}
body {
    min-height: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    overflow-y: visible !important;
    overflow-anchor: none !important;
    overscroll-behavior-y: none;
}
main, section, footer { max-width: 100%; }

/* The previous animated absolute aurora changed document overflow while it moved.
   Keep it viewport-bound and static so scrollHeight cannot drift. */
.aurora-bg { position: relative; overflow-x: clip !important; }
.aurora-bg::before,
.aurora-bg::after {
    position: fixed !important;
    width: 52vmax !important;
    height: 52vmax !important;
    animation: none !important;
    transform: none !important;
    contain: strict;
    will-change: auto !important;
    filter: blur(100px) !important;
    opacity: .10 !important;
    z-index: -1 !important;
}
.aurora-bg::before { top: -22vmax !important; left: -20vmax !important; }
.aurora-bg::after { bottom: -24vmax !important; right: -20vmax !important; }

/* Mobile drawer must not own a hidden scrollbar while off-canvas. */
#mobile-menu-drawer { visibility: hidden; pointer-events: none; }
#mobile-menu-drawer.is-open { visibility: visible; pointer-events: auto; }
#mobile-menu-drawer:not(.is-open) .mobile-menu-panel { overflow-y: hidden !important; }
#mobile-menu-drawer.is-open .mobile-menu-panel { overflow-y: auto !important; }
html.menu-open, html.menu-open body { overflow: hidden !important; }

/* Remove unused / continuously repainting decorative motion. */
.phase3-scroll-progress { display: none !important; }
.phase2-network-lines path,
.phase2-scanline,
.orbit-two,
.phase3-case-scan,
.phase3-system-map path,
.aurora-blob { animation: none !important; }

/* Reduce compositor-heavy effects that were multiplied across long pages. */
[class*="backdrop-blur"],
.navbar-scrolled,
.phase2-phone-card,
.phase3-case-float,
.phase3-contact-status {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* New visual-first system used across homepage and service pages. */
.visual-band {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(700px 320px at 8% 12%, rgba(103, 80, 255, .10), transparent 70%),
        radial-gradient(620px 300px at 92% 78%, rgba(0, 191, 255, .07), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 92%, #7c3aed 8%), var(--bg-base));
    border-block: 1px solid var(--border);
}
.visual-showcase {
    position: relative;
    width: min(1200px, 100%);
    margin-inline: auto;
    padding: 10px;
    border-radius: 30px;
    border: 1px solid color-mix(in srgb, #7c5cff 24%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb,var(--bg-surface) 94%,#7c3aed 6%), var(--bg-surface));
    box-shadow: 0 28px 80px rgba(8, 12, 32, .16), inset 0 1px 0 rgba(255,255,255,.06);
    overflow: hidden;
}
.visual-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.visual-showcase img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 21px;
    object-fit: cover;
}
.visual-showcase--crm { margin-bottom: 30px; }
.visual-showcase--wide { width: min(1320px,100%); }
.visual-showcase--global { width: min(1400px,100%); }

/* Make alternating sections visibly distinct rather than flat repetitions. */
main > section:nth-of-type(4n+1) {
    background-image: radial-gradient(700px 340px at 86% 18%, rgba(124,58,237,.075), transparent 72%);
}
main > section:nth-of-type(4n+2) {
    background-image: radial-gradient(760px 360px at 10% 76%, rgba(14,165,233,.06), transparent 72%);
}
main > section:nth-of-type(4n+3) {
    background-image: linear-gradient(135deg, color-mix(in srgb,var(--bg-surface) 96%,#7c3aed 4%), var(--bg-base));
}

/* CRM: visual-first, compact cards below it. */
#crm-pin-section.crm-services-compact {
    background:
        radial-gradient(700px 360px at 50% 12%, rgba(95, 72, 255, .12), transparent 68%),
        var(--bg-base) !important;
}
.crm-services-primary { margin-top: 0 !important; }
.crm-service-card { min-height: 170px !important; }

/* Hero / large section images should not shift layout as they decode. */
img { content-visibility: auto; }

/* Less motion on every device; no element is allowed to steer the scroll. */
@media (prefers-reduced-motion: no-preference) {
    .visual-showcase { transition: border-color .25s ease, box-shadow .25s ease; }
    .visual-showcase:hover { border-color: color-mix(in srgb,#7c5cff 42%,var(--border)); box-shadow:0 34px 90px rgba(8,12,32,.20); }
}
@media (max-width: 768px) {
    .visual-showcase { padding: 6px; border-radius: 21px; }
    .visual-showcase img { border-radius: 15px; }
    .aurora-bg::before,.aurora-bg::after { opacity:.06 !important; filter:blur(80px) !important; }
}

/* =========================================================
   2026-08-31 Visual polish pass — richer, less "AI blue"
   ========================================================= */
:root{
  --brand-coral:#ef6a5b;
  --brand-amber:#e6a63b;
  --brand-aubergine:#6f3a78;
  --brand-plum:#9b4f7a;
  --brand-teal:#2f8f83;
  --brand-sage:#91a66f;
  --brand-orange:var(--brand-coral);
  --brand-purple:var(--brand-aubergine);
  --brand-gradient:linear-gradient(115deg,var(--brand-coral),var(--brand-amber) 42%,var(--brand-plum));
}
[data-theme="light"]{
  --bg-base:#f7f4ee;
  --bg-surface:#fffdf9;
  --bg-elevated:#f0ece5;
  --border:rgba(48,39,33,.10);
  --border-strong:rgba(48,39,33,.18);
  --text-primary:#211d1a;
  --text-secondary:#5f5852;
  --text-muted:#817970;
}

/* Fixed ambient layer: movement without affecting document geometry. */
body.aurora-bg::before,body.aurora-bg::after{position:fixed!important;width:42vw!important;height:42vw!important;filter:blur(110px)!important;opacity:.10!important;animation:ambientDrift 28s ease-in-out infinite alternate!important;contain:paint;}
body.aurora-bg::before{top:-14vw!important;left:-12vw!important;background:radial-gradient(circle,var(--brand-plum),transparent 70%)!important}
body.aurora-bg::after{bottom:-16vw!important;right:-12vw!important;background:radial-gradient(circle,var(--brand-amber),transparent 70%)!important;animation-delay:-14s!important}
@keyframes ambientDrift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(8%,5%,0) scale(1.08)}}

/* Homepage hero — always readable in both modes. */
.home-hero{background:#121113!important;color:#fff;isolation:isolate}
.home-hero video{filter:saturate(.72) contrast(1.04) brightness(.62)}
.home-hero-overlay{background:linear-gradient(90deg,rgba(15,13,14,.90) 0%,rgba(15,13,14,.70) 48%,rgba(15,13,14,.40) 100%),radial-gradient(750px 520px at 74% 35%,rgba(239,106,91,.16),transparent 70%),radial-gradient(620px 420px at 24% 78%,rgba(230,166,59,.12),transparent 72%)}
.home-hero-copy,.home-hero-panel{opacity:1!important;transform:none!important;animation:none!important}
.home-hero-title{color:#fff!important;text-wrap:balance;max-width:760px}
.home-hero-lead,.home-hero-muted{color:rgba(255,255,255,.72)!important}
.home-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#f6d9a8;font-weight:750;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.home-hero-eyebrow span{width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-coral),var(--brand-amber))}
.home-hero-proof{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 28px}
.home-hero-proof span{font-size:12px;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);padding:8px 11px;border-radius:999px}
.home-hero-proof b{color:#fff}
.home-hero-bar{opacity:1!important;transform:none!important;animation:none!important}
.home-hero-panel>div{border-color:rgba(255,255,255,.16)!important;background:linear-gradient(145deg,rgba(33,29,31,.72),rgba(42,30,34,.45))!important;box-shadow:0 32px 90px rgba(0,0,0,.32)!important}

/* Warmer section rhythm; avoids endless blue/dark blocks. */
main>section{position:relative}
main>section:nth-of-type(4n+2):not(.home-hero):not(.saas-signal-rail){background-image:radial-gradient(760px 360px at 9% 12%,rgba(239,106,91,.075),transparent 72%),radial-gradient(650px 360px at 92% 82%,rgba(145,166,111,.055),transparent 70%)!important}
main>section:nth-of-type(4n+3):not(.home-hero):not(.saas-signal-rail){background-image:radial-gradient(720px 340px at 88% 8%,rgba(230,166,59,.075),transparent 70%),linear-gradient(180deg,var(--bg-surface),var(--bg-base))!important}
main>section:nth-of-type(4n+4):not(.home-hero):not(.saas-signal-rail){background-image:radial-gradient(720px 360px at 16% 82%,rgba(47,143,131,.065),transparent 70%)!important}
.section-chip{border-color:color-mix(in srgb,var(--brand-coral) 28%,var(--border-strong));background:color-mix(in srgb,var(--brand-amber) 7%,var(--bg-surface));color:var(--text-primary)}
.text-grad{background:linear-gradient(100deg,var(--brand-coral),var(--brand-amber),var(--brand-plum));-webkit-background-clip:text;background-clip:text}
.btn-primary{background:linear-gradient(110deg,var(--brand-coral),var(--brand-plum));box-shadow:0 14px 36px rgba(111,58,120,.18)}

/* Better content density and visual breaks. */
.saas-section{padding-top:88px!important;padding-bottom:88px!important}
.home-section-heading p{max-width:760px;margin:16px auto 0;color:var(--text-secondary);font-size:17px;line-height:1.75}
.home-tech-visual,.home-advanced-visual,.home-why-visual{overflow:hidden;border:1px solid var(--border);border-radius:28px;background:var(--bg-surface);box-shadow:0 26px 70px rgba(30,20,18,.10)}
.home-tech-visual{position:relative;min-height:310px}
.home-tech-visual img{display:block;width:100%;height:310px;object-fit:cover;object-position:center}
.home-tech-visual>div{position:absolute;left:24px;right:24px;bottom:20px;display:flex;flex-wrap:wrap;gap:8px}
.home-tech-visual span{padding:8px 12px;border-radius:999px;background:rgba(20,18,18,.78);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:750;backdrop-filter:blur(12px)}
.home-advanced-visual{max-width:980px;margin-left:auto;margin-right:auto}
.home-advanced-visual img{display:block;width:100%;max-height:430px;object-fit:cover}
.home-why-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:24px;align-items:stretch;margin-bottom:32px}
.home-why-visual img{display:block;width:100%;height:100%;min-height:350px;object-fit:cover}
.home-why-summary{border-radius:28px;padding:34px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand-amber) 13%,var(--bg-surface)),var(--bg-surface));border:1px solid color-mix(in srgb,var(--brand-amber) 25%,var(--border));display:flex;flex-direction:column;justify-content:flex-end}
.home-why-summary b{font-size:28px;line-height:1.15;color:var(--text-primary);letter-spacing:-.025em}.home-why-summary p{color:var(--text-secondary);line-height:1.7;margin-top:14px}

/* More nuanced cards, less identical glass. */
.clay-glass-card,.dark-card,.crm-service-card,.phase2-bento{box-shadow:0 14px 42px rgba(35,27,24,.06)!important}
.clay-glass-card:nth-child(3n+1),.crm-service-card:nth-child(3n+1){border-top-color:var(--brand-coral)!important}
.clay-glass-card:nth-child(3n+2),.crm-service-card:nth-child(3n+2){border-top-color:var(--brand-amber)!important}
.clay-glass-card:nth-child(3n),.crm-service-card:nth-child(3n){border-top-color:var(--brand-teal)!important}

/* Light mode contrast repairs, including elements authored for dark mode. */
[data-theme="light"] main:not(.home-hero) .text-white\/80,[data-theme="light"] main:not(.home-hero) .text-white\/70{color:var(--text-secondary)!important}
[data-theme="light"] .phase2-section:not(.phase2-dark) h2,[data-theme="light"] .phase2-section:not(.phase2-dark) h3,[data-theme="light"] .phase2-section:not(.phase2-dark) h4{color:var(--text-primary)!important}
[data-theme="light"] .clay-glass-card{background:rgba(255,253,249,.90)!important;color:var(--text-primary)!important;border-color:rgba(56,45,37,.11)!important}
[data-theme="light"] .navbar-scrolled{background-color:rgba(255,253,249,.92)!important}
[data-theme="light"] .navbar-scrolled a,[data-theme="light"] .navbar-scrolled button{color:var(--text-primary)!important}
[data-theme="light"] .home-hero,[data-theme="light"] .home-hero *{--text-primary:#fff;--text-secondary:rgba(255,255,255,.72);--border-strong:rgba(255,255,255,.16)}

/* Reduce empty vertical gaps on content-heavy sections. */
@media (min-width:1024px){.py-28{padding-top:5.5rem!important;padding-bottom:5.5rem!important}.py-24{padding-top:5rem!important;padding-bottom:5rem!important}}
@media (max-width:900px){.home-why-layout{grid-template-columns:1fr}.home-why-summary{min-height:220px}.home-tech-visual img{height:260px}.saas-section{padding-top:64px!important;padding-bottom:64px!important}}
@media (prefers-reduced-motion:reduce){body.aurora-bg::before,body.aurora-bg::after{animation:none!important}}
.home-dark-section{--text-primary:#fff;--text-secondary:rgba(255,255,255,.70);--text-muted:rgba(255,255,255,.48);--border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.16);color:#fff!important;background-color:#171416!important;background-image:radial-gradient(820px 380px at 12% 18%,rgba(239,106,91,.12),transparent 72%),radial-gradient(760px 340px at 88% 78%,rgba(145,166,111,.08),transparent 70%)!important}
.home-dark-section .section-chip{color:#fff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.home-dark-section .clay-glass-card{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.10)!important}
[data-theme="light"] .home-dark-section{--text-primary:#fff;--text-secondary:rgba(255,255,255,.72);--text-muted:rgba(255,255,255,.48);color:#fff!important}

/* =========================================================
   AISCALEON VISUAL DECORATION PASS — AUG 2026
   Purely compositional: no scroll hijacking, no layout-moving animation.
   ========================================================= */
:root{
  --accent-coral:#ef765f;
  --accent-amber:#e7a94b;
  --accent-plum:#8e5a8b;
  --accent-sage:#79a58d;
  --accent-teal:#3f9893;
  --accent-ink:#15161c;
  --warm-surface:#201b1c;
}

/* Tighter editorial rhythm: less empty space, stronger visual cadence. */
main > section,
main > .saas-section,
.phase2-section{padding-top:76px!important;padding-bottom:76px!important}
.phase3-conversion{padding:82px 0!important}
.phase3-conversion-shell{padding:44px!important}
#portfolio{padding-top:76px!important;padding-bottom:76px!important}

/* Decorative atmosphere without the generic blue-AI wash. */
.saas-section,.phase2-section{position:relative;isolation:isolate}
.saas-section::before,.phase2-section::before{
  opacity:.42!important;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px)!important;
  background-size:72px 72px!important;
  mask-image:linear-gradient(to bottom,transparent 2%,black 18%,black 82%,transparent 98%)!important;
}
/* warm/plum/coral light pools alternate by section */
main > section:nth-of-type(4n+1)::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;width:520px;height:520px;border-radius:50%;
  right:-180px;top:8%;background:radial-gradient(circle,rgba(239,118,95,.12),transparent 68%);filter:blur(8px)
}
main > section:nth-of-type(4n+2)::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;width:560px;height:560px;border-radius:50%;
  left:-210px;bottom:2%;background:radial-gradient(circle,rgba(231,169,75,.10),transparent 68%);filter:blur(10px)
}
main > section:nth-of-type(4n+3)::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;width:500px;height:500px;border-radius:50%;
  right:-170px;bottom:-80px;background:radial-gradient(circle,rgba(142,90,139,.14),transparent 68%);filter:blur(10px)
}

/* Give the primary homepage product bands their own art direction. */
.phase2-web-stage{
  background:
    linear-gradient(120deg,rgba(239,118,95,.055),transparent 33%),
    linear-gradient(300deg,rgba(142,90,139,.07),transparent 35%),var(--bg-base)!important;
}
.phase2-app-stage{
  background:
    radial-gradient(circle at 88% 14%,rgba(121,165,141,.11),transparent 30%),
    radial-gradient(circle at 12% 82%,rgba(231,169,75,.07),transparent 28%),var(--bg-elevated)!important;
}

/* Image frames now look intentional rather than empty rectangles. */
.phase2-code-stage,.phase2-visual-shell,.home-tech-visual,.home-why-summary{
  border:1px solid color-mix(in srgb,var(--border) 76%,var(--accent-coral) 24%)!important;
  box-shadow:0 28px 80px rgba(7,9,19,.22),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.phase2-code-stage,.phase2-visual-shell{position:relative;background:linear-gradient(145deg,#171922,#211a25)!important}
.phase2-code-stage::after,.phase2-visual-shell::after{
  content:"";position:absolute;inset:auto 22px 18px auto;width:86px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-coral),var(--accent-amber));opacity:.8;pointer-events:none
}
.phase2-code-image,.phase2-phone-image,.phase2-cover-image,.home-tech-visual img{
  width:100%;height:100%;object-fit:cover;border-radius:24px;display:block;
}

/* Stronger section transitions: visual ribbon rather than flat stacked panels. */
.phase2-section + .phase2-section::marker{display:none}
.phase2-section + .phase2-section{border-top-color:transparent!important}
.phase2-section + .phase2-section > div::before{
  content:"";display:block;width:88px;height:3px;margin:0 0 28px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-coral),var(--accent-amber),var(--accent-plum));opacity:.9
}

/* Cards: warmer, varied, less monochrome. */
.phase2-capabilities>div:nth-child(3n+1),.clay-glass-card:nth-child(3n+1){border-top-color:var(--accent-coral)!important}
.phase2-capabilities>div:nth-child(3n+2),.clay-glass-card:nth-child(3n+2){border-top-color:var(--accent-amber)!important}
.phase2-capabilities>div:nth-child(3n),.clay-glass-card:nth-child(3n){border-top-color:var(--accent-sage)!important}
.section-chip{border-color:color-mix(in srgb,var(--accent-coral) 42%,var(--border))!important;background:color-mix(in srgb,var(--bg-surface) 88%,var(--accent-coral) 12%)!important}

/* CTA is intentionally compact; no giant dead region above it. */
.phase3-conversion{margin-top:0!important}
.phase3-conversion-shell{min-height:0!important}
.phase3-conversion-copy h2{font-size:clamp(40px,4.4vw,62px)!important}
.phase3-conversion-orb--one{background:radial-gradient(circle,rgba(239,118,95,.22),transparent 70%)!important}
.phase3-conversion-orb--two{background:radial-gradient(circle,rgba(231,169,75,.16),rgba(142,90,139,.08) 45%,transparent 72%)!important}
.phase3-btn-primary{background:linear-gradient(135deg,var(--accent-coral),#d65d72 52%,var(--accent-plum))!important;box-shadow:0 14px 38px rgba(239,118,95,.18)!important}

/* Tiny animation only on decorative paint layers, never scroll containers. */
@keyframes decorativePulse{0%,100%{opacity:.48;transform:scale(1)}50%{opacity:.68;transform:scale(1.035)}}
@media (prefers-reduced-motion:no-preference){
  main > section:nth-of-type(4n+1)::after,
  main > section:nth-of-type(4n+2)::after,
  main > section:nth-of-type(4n+3)::after{animation:decorativePulse 12s ease-in-out infinite;transform-origin:center}
  .phase2-code-stage img,.phase2-visual-shell img,.home-tech-visual img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease}
  .phase2-code-stage:hover img,.phase2-visual-shell:hover img,.home-tech-visual:hover img{transform:scale(1.018);filter:saturate(1.05) contrast(1.02)}
}

/* Light theme: explicit readable decorative surfaces. */
[data-theme="light"] .phase2-code-stage,[data-theme="light"] .phase2-visual-shell{
  background:linear-gradient(145deg,#fffaf7,#f3f6f3)!important;border-color:rgba(108,77,64,.16)!important
}
[data-theme="light"] .phase2-code-stage::after,[data-theme="light"] .phase2-visual-shell::after{opacity:.7}
[data-theme="light"] .phase3-conversion{background:#201b1c!important}
[data-theme="light"] .phase3-conversion *{--text-primary:#fff;--text-secondary:rgba(255,255,255,.70)}

@media(max-width:900px){
  main > section,main > .saas-section,.phase2-section{padding-top:58px!important;padding-bottom:58px!important}
  .phase3-conversion{padding:60px 0!important}.phase3-conversion-shell{padding:28px 22px!important}
}

/* ===== Native motion + visual refresh (no GSAP / no scroll manipulation) ===== */
:root {
    --brand-coral: #ff6b5f;
    --brand-amber: #f4b942;
    --brand-plum: #8b5cf6;
    --brand-teal: #24b6a6;
    --brand-sage: #8fb996;
    --brand-ink: #121218;
    --brand-gradient: linear-gradient(135deg, #ff6b5f 0%, #f4b942 42%, #8b5cf6 100%);
}
[data-theme="light"] {
    --brand-gradient: linear-gradient(135deg, #e9584d 0%, #d99a22 46%, #7651d8 100%);
}

/* Retire old GSAP transforms completely. */
.gs-reveal, .gs-reveal-left, .gs-reveal-right, .gs-reveal-scale {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Native reveal enhancement: content is visible by default; JS only adds polish. */
.native-effects [data-native-reveal] {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .native-effects [data-native-reveal] {
      transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .native-effects [data-native-reveal].is-visible {
      opacity: 1;
      transform: none;
  }
}

/* Decorative backgrounds are fixed/inset and can never extend document height. */
.aurora-bg::before,
.aurora-bg::after {
    position: fixed !important;
    inset: auto !important;
    width: 46vw !important;
    height: 46vw !important;
    max-width: 760px;
    max-height: 760px;
    z-index: -2 !important;
    filter: blur(130px) !important;
    animation: none !important;
    transform: none !important;
}
.aurora-bg::before { top: -18vw !important; left: -12vw !important; background: radial-gradient(circle, rgba(255,107,95,.22), transparent 68%) !important; }
.aurora-bg::after { right: -10vw !important; bottom: -18vw !important; background: radial-gradient(circle, rgba(139,92,246,.18), transparent 70%) !important; }

/* Section art direction: warmer, richer, less generic AI-blue. */
main section { position: relative; isolation: isolate; }
main section:nth-of-type(4n+1)::before,
main section:nth-of-type(4n+2)::before,
main section:nth-of-type(4n+3)::before {
    content:"";
    position:absolute;
    pointer-events:none;
    z-index:-1;
    border-radius:999px;
    filter:blur(70px);
    opacity:.13;
    width:320px;
    height:320px;
}
main section:nth-of-type(4n+1)::before { right:4%; top:8%; background:#ff6b5f; }
main section:nth-of-type(4n+2)::before { left:2%; bottom:8%; background:#f4b942; }
main section:nth-of-type(4n+3)::before { right:10%; bottom:4%; background:#24b6a6; }

.visual-showcase,
.home-visual-frame,
.phase3-visual,
.home-why-visual {
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    border: 1px solid color-mix(in srgb, var(--border-strong) 80%, var(--brand-coral) 20%);
    box-shadow: 0 22px 70px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden;
}
[data-theme="light"] .visual-showcase,
[data-theme="light"] .home-visual-frame,
[data-theme="light"] .phase3-visual,
[data-theme="light"] .home-why-visual {
    background: linear-gradient(145deg, #ffffff, #f8f5f0);
    box-shadow: 0 20px 60px rgba(46,35,28,.09);
}

.dark-card:nth-child(4n+1) { border-top-color: rgba(255,107,95,.75); }
.dark-card:nth-child(4n+2) { border-top-color: rgba(244,185,66,.75); }
.dark-card:nth-child(4n+3) { border-top-color: rgba(36,182,166,.72); }
.dark-card:nth-child(4n)   { border-top-color: rgba(139,92,246,.72); }

/* Keep the browser as the only vertical scroller. */
html, body { min-height: 100%; height: auto !important; overflow-x: hidden !important; }
html { overflow-y: auto !important; scroll-behavior: auto !important; }
body { overflow-y: visible !important; }
body, main, #page, #content { overscroll-behavior-y: auto; }
.menu-open { overflow: hidden !important; }

/* No expensive animated filter/backdrop effects during normal scrolling. */
@media (prefers-reduced-motion: no-preference) {
  .ambient-orb, .decorative-orb { animation: none !important; }
}
.image-unavailable { display:none !important; }

/* =========================================================
   FINAL ART-DIRECTION PASS — no circular background blobs
   ========================================================= */
:root{
  --art-coral:#ff6f61;
  --art-gold:#f0b44d;
  --art-violet:#7c5ce7;
  --art-teal:#2aa198;
  --art-rose:#d75a87;
  --art-lime:#9abf64;
}

/* Remove every decorative orb/blob introduced by earlier passes. */
.phase3-conversion-orb,
.ambient-orb,
.decorative-orb,
.aurora-blob{display:none!important}
main>section::after{display:none!important;animation:none!important}
main section:nth-of-type(4n+1)::before,
main section:nth-of-type(4n+2)::before,
main section:nth-of-type(4n+3)::before{display:none!important}

/* Full-page ambient treatment: angular animated mesh, never circular. */
body.aurora-bg::before,
body.aurora-bg::after{
  content:""!important;display:block!important;position:fixed!important;inset:0!important;
  width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;
  pointer-events:none!important;z-index:-3!important;filter:none!important;opacity:1!important;
  transform:none!important;border-radius:0!important;
}
body.aurora-bg::before{
  background:
    linear-gradient(118deg,transparent 0 22%,rgba(255,111,97,.055) 31%,transparent 43% 100%),
    linear-gradient(302deg,transparent 0 55%,rgba(240,180,77,.045) 67%,transparent 79%),
    linear-gradient(160deg,rgba(124,92,231,.035),transparent 34%,rgba(42,161,152,.035) 68%,transparent)!important;
  background-size:160% 160%,170% 170%,150% 150%!important;
}
body.aurora-bg::after{
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px)!important;
  background-size:48px 48px!important;
  opacity:.34!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent)!important;
  mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent)!important;
}
@media(prefers-reduced-motion:no-preference){
  body.aurora-bg::before{animation:meshShift 22s ease-in-out infinite alternate!important}
}
@keyframes meshShift{0%{background-position:0% 0%,100% 100%,0 50%}100%{background-position:35% 18%,62% 70%,100% 48%}}

/* Dotted/pixel grid and SVG wave fields instead of empty flat backgrounds. */
.saas-section,.phase2-section,.service-page-shell>section{overflow:hidden}
.saas-section::before,.phase2-section::before,.service-page-shell>section::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='130' viewBox='0 0 480 130'%3E%3Cpath d='M-10 82 C70 18 145 122 235 58 S395 15 500 70' fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1'/%3E%3Cpath d='M-10 102 C90 45 150 142 260 78 S405 42 500 92' fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='1'/%3E%3C/svg%3E"),
    radial-gradient(rgba(255,255,255,.10) .75px,transparent .9px)!important;
  background-size:auto,720px 195px,22px 22px!important;
  background-position:center bottom,center bottom,0 0!important;
  background-repeat:no-repeat,no-repeat,repeat!important;
  opacity:.50!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,black 14%,black 86%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0,black 14%,black 86%,transparent 100%)!important;
}

/* Alternating angular color washes by section — no radial circles. */
main>section:nth-of-type(4n+1):not(.home-hero){background-image:linear-gradient(135deg,rgba(255,111,97,.055),transparent 28%),linear-gradient(315deg,rgba(124,92,231,.04),transparent 32%)!important}
main>section:nth-of-type(4n+2):not(.home-hero){background-image:linear-gradient(125deg,rgba(240,180,77,.05),transparent 30%),linear-gradient(300deg,rgba(42,161,152,.045),transparent 34%)!important}
main>section:nth-of-type(4n+3):not(.home-hero){background-image:linear-gradient(145deg,rgba(215,90,135,.05),transparent 30%),linear-gradient(325deg,rgba(154,191,100,.04),transparent 34%)!important}
main>section:nth-of-type(4n):not(.home-hero){background-image:linear-gradient(110deg,rgba(42,161,152,.045),transparent 28%),linear-gradient(300deg,rgba(255,111,97,.045),transparent 34%)!important}

/* Compact the growth-system CTA decisively. */
.phase3-conversion{padding:44px 0!important;min-height:0!important}
.phase3-conversion-shell{grid-template-columns:minmax(0,1fr) minmax(360px,.72fr)!important;gap:34px!important;padding:30px 34px!important;border-radius:28px!important;min-height:0!important}
.phase3-conversion-copy h2{font-size:clamp(36px,4vw,54px)!important;margin:14px 0 12px!important;line-height:1!important}
.phase3-conversion-copy p{line-height:1.6!important;max-width:620px!important}
.phase3-conversion-actions{margin-top:20px!important}
.phase3-system-map{height:230px!important}
.phase3-system-core{width:126px!important;height:112px!important;border-radius:24px!important}
.phase3-system-node{border-radius:12px!important;padding:8px 11px!important;backdrop-filter:none!important}
.phase3-conversion-grid{background-size:42px 42px!important;opacity:.48}

/* Dark mode must never inherit hard-coded light canvases. */
[data-theme="dark"] main section,
[data-theme="dark"] .service-page-shell>section{color:var(--text-primary)}
[data-theme="dark"] .bg-\[var\(--bg-surface\)\]{background-color:var(--bg-surface)!important}
[data-theme="dark"] .bg-\[var\(--bg-elevated\)\]{background-color:var(--bg-elevated)!important}
[data-theme="dark"] .phase2-code-stage,
[data-theme="dark"] .phase2-visual-shell,
[data-theme="dark"] .visual-showcase,
[data-theme="dark"] .home-visual-frame,
[data-theme="dark"] .home-why-visual{background:linear-gradient(145deg,#17171d,#1e1b23)!important}

/* Light mode: brighter, layered and varied rather than one dull off-white. */
[data-theme="light"]{
  --bg-base:#f8f6f1;
  --bg-surface:#ffffff;
  --bg-elevated:#f2eee7;
  --text-primary:#17151a;
  --text-secondary:#5e5963;
  --text-muted:#817a84;
  --border:rgba(64,52,46,.13);
  --border-strong:rgba(64,52,46,.20);
}
[data-theme="light"] body{background:#f8f6f1!important}
[data-theme="light"] body.aurora-bg::after{background-image:linear-gradient(rgba(56,44,40,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(56,44,40,.045) 1px,transparent 1px)!important;opacity:.42!important}
[data-theme="light"] .saas-section::before,[data-theme="light"] .phase2-section::before,[data-theme="light"] .service-page-shell>section::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='130' viewBox='0 0 480 130'%3E%3Cpath d='M-10 82 C70 18 145 122 235 58 S395 15 500 70' fill='none' stroke='%23554b46' stroke-opacity='.075' stroke-width='1'/%3E%3Cpath d='M-10 102 C90 45 150 142 260 78 S405 42 500 92' fill='none' stroke='%23554b46' stroke-opacity='.045' stroke-width='1'/%3E%3C/svg%3E"),radial-gradient(rgba(54,43,38,.12) .7px,transparent .9px)!important;
  background-size:720px 195px,22px 22px!important;background-repeat:no-repeat,repeat!important;background-position:center bottom,0 0!important;opacity:.38!important
}
[data-theme="light"] main>section:nth-of-type(4n+1):not(.home-hero){background-color:#fffaf6!important;background-image:linear-gradient(135deg,rgba(255,111,97,.10),transparent 30%),linear-gradient(315deg,rgba(124,92,231,.055),transparent 38%)!important}
[data-theme="light"] main>section:nth-of-type(4n+2):not(.home-hero){background-color:#f5f8f3!important;background-image:linear-gradient(130deg,rgba(154,191,100,.12),transparent 32%),linear-gradient(305deg,rgba(42,161,152,.07),transparent 36%)!important}
[data-theme="light"] main>section:nth-of-type(4n+3):not(.home-hero){background-color:#fff9ee!important;background-image:linear-gradient(135deg,rgba(240,180,77,.14),transparent 30%),linear-gradient(315deg,rgba(215,90,135,.055),transparent 38%)!important}
[data-theme="light"] main>section:nth-of-type(4n):not(.home-hero){background-color:#f7f4fb!important;background-image:linear-gradient(135deg,rgba(124,92,231,.10),transparent 30%),linear-gradient(315deg,rgba(255,111,97,.05),transparent 38%)!important}
[data-theme="light"] .dark-card,[data-theme="light"] .clay-glass-card,[data-theme="light"] .phase2-feature-card{background:rgba(255,255,255,.78)!important;box-shadow:0 14px 38px rgba(62,48,40,.07)!important}

/* Logo must never carry a colored rectangle behind it. */
#main-navbar img[alt="AiScaleon"],.custom-logo{background:transparent!important;mix-blend-mode:normal!important;filter:none!important}

/* Native network canvas: isolated visual only, cannot affect layout or scrolling. */
.home-hero{isolation:isolate}
.home-hero-network{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.34}
.home-hero>.relative{z-index:2!important}

@media(max-width:1023px){
  .phase3-conversion-shell{grid-template-columns:1fr!important;gap:18px!important}
  .phase3-system-map{height:190px!important}
}
@media(max-width:767px){
  .phase3-conversion{padding:34px 0!important}
  .phase3-conversion-shell{padding:24px 20px!important}
  .phase3-system-map{display:none!important}
}

/* =========================================================
   2026-08-31 Mature dark-mode palette — slate / forest / aubergine
   Keeps native scrolling and existing layout intact.
   ========================================================= */
:root{
  --dark-slate:#121617;
  --dark-slate-2:#181d1e;
  --dark-forest:#16211c;
  --dark-forest-2:#1b2922;
  --dark-aubergine:#241a23;
  --dark-aubergine-2:#2c202a;
  --dark-card:#202525;
  --dark-card-2:#242928;
  --accent-sage:#8fa38e;
  --accent-copper:#b97857;
  --accent-amber:#c9a16a;
  --accent-plum:#8a697f;
  --accent-moss:#74866f;
}

html:not([data-theme="light"]),
[data-theme="dark"]{
  --bg-base:var(--dark-slate);
  --bg-surface:var(--dark-slate-2);
  --bg-elevated:var(--dark-card);
  --border:rgba(232,227,216,.085);
  --border-strong:rgba(232,227,216,.15);
  --text-primary:#f1eee7;
  --text-secondary:rgba(241,238,231,.68);
  --text-muted:rgba(241,238,231,.43);
  --brand-coral:var(--accent-copper);
  --brand-amber:var(--accent-amber);
  --brand-aubergine:var(--accent-plum);
  --brand-plum:var(--accent-plum);
  --brand-teal:var(--accent-sage);
  --brand-sage:var(--accent-moss);
  --brand-orange:var(--accent-copper);
  --brand-purple:var(--accent-plum);
  --brand-gradient:linear-gradient(110deg,var(--accent-copper),var(--accent-amber) 46%,var(--accent-plum));
}

html:not([data-theme="light"]) body,
[data-theme="dark"] body{
  background:var(--dark-slate)!important;
}

/* Replace neon-tech section washes with earthy, editorial depth. */
html:not([data-theme="light"]) main>section:nth-of-type(4n+1):not(.home-hero),
[data-theme="dark"] main>section:nth-of-type(4n+1):not(.home-hero){
  background-color:var(--dark-slate)!important;
  background-image:linear-gradient(130deg,rgba(185,120,87,.055),transparent 32%),linear-gradient(315deg,rgba(138,105,127,.055),transparent 38%)!important;
}
html:not([data-theme="light"]) main>section:nth-of-type(4n+2):not(.home-hero),
[data-theme="dark"] main>section:nth-of-type(4n+2):not(.home-hero){
  background-color:var(--dark-forest)!important;
  background-image:linear-gradient(128deg,rgba(143,163,142,.07),transparent 34%),linear-gradient(310deg,rgba(116,134,111,.05),transparent 40%)!important;
}
html:not([data-theme="light"]) main>section:nth-of-type(4n+3):not(.home-hero),
[data-theme="dark"] main>section:nth-of-type(4n+3):not(.home-hero){
  background-color:var(--dark-aubergine)!important;
  background-image:linear-gradient(135deg,rgba(185,120,87,.05),transparent 30%),linear-gradient(305deg,rgba(138,105,127,.075),transparent 40%)!important;
}
html:not([data-theme="light"]) main>section:nth-of-type(4n):not(.home-hero),
[data-theme="dark"] main>section:nth-of-type(4n):not(.home-hero){
  background-color:var(--dark-slate-2)!important;
  background-image:linear-gradient(120deg,rgba(201,161,106,.045),transparent 30%),linear-gradient(300deg,rgba(143,163,142,.05),transparent 40%)!important;
}

/* Full-page ambient treatment: quiet, earthy and non-neon. */
html:not([data-theme="light"]) body.aurora-bg::before,
[data-theme="dark"] body.aurora-bg::before{
  background:
    linear-gradient(118deg,transparent 0 23%,rgba(185,120,87,.035) 32%,transparent 45% 100%),
    linear-gradient(300deg,transparent 0 54%,rgba(116,134,111,.04) 67%,transparent 80%),
    linear-gradient(160deg,rgba(138,105,127,.035),transparent 36%,rgba(143,163,142,.025) 68%,transparent)!important;
}
html:not([data-theme="light"]) body.aurora-bg::after,
[data-theme="dark"] body.aurora-bg::after{
  background-image:linear-gradient(rgba(241,238,231,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(241,238,231,.014) 1px,transparent 1px)!important;
  opacity:.24!important;
}

/* Hero: charcoal/forest with restrained warm accents. */
html:not([data-theme="light"]) .home-hero,
[data-theme="dark"] .home-hero{
  background:#101413!important;
}
html:not([data-theme="light"]) .home-hero-overlay,
[data-theme="dark"] .home-hero-overlay{
  background:linear-gradient(90deg,rgba(14,18,17,.94) 0%,rgba(14,18,17,.78) 47%,rgba(22,25,23,.50) 100%),linear-gradient(145deg,rgba(22,33,28,.24),transparent 45%),linear-gradient(315deg,rgba(44,32,42,.18),transparent 48%)!important;
}
html:not([data-theme="light"]) .home-hero-eyebrow,
[data-theme="dark"] .home-hero-eyebrow{color:#dcc4a5!important}
html:not([data-theme="light"]) .home-hero-eyebrow span,
[data-theme="dark"] .home-hero-eyebrow span{background:linear-gradient(90deg,var(--accent-copper),var(--accent-amber))!important}
html:not([data-theme="light"]) .home-hero-panel>div,
[data-theme="dark"] .home-hero-panel>div{
  background:linear-gradient(145deg,rgba(27,41,34,.82),rgba(36,26,35,.68))!important;
  border-color:rgba(232,227,216,.12)!important;
  box-shadow:0 28px 78px rgba(0,0,0,.30)!important;
}

/* Cards and media frames should feel material, not glass/neon. */
html:not([data-theme="light"]) .clay-glass-card,
html:not([data-theme="light"]) .dark-card,
html:not([data-theme="light"]) .crm-service-card,
html:not([data-theme="light"]) .phase2-bento,
html:not([data-theme="light"]) .phase2-feature-card,
html:not([data-theme="light"]) .visual-showcase,
html:not([data-theme="light"]) .home-visual-frame,
[data-theme="dark"] .clay-glass-card,
[data-theme="dark"] .dark-card,
[data-theme="dark"] .crm-service-card,
[data-theme="dark"] .phase2-bento,
[data-theme="dark"] .phase2-feature-card,
[data-theme="dark"] .visual-showcase,
[data-theme="dark"] .home-visual-frame{
  background:linear-gradient(145deg,var(--dark-card),var(--dark-card-2))!important;
  border-color:rgba(232,227,216,.09)!important;
  box-shadow:0 16px 46px rgba(0,0,0,.18)!important;
}
html:not([data-theme="light"]) .home-tech-visual,
html:not([data-theme="light"]) .home-advanced-visual,
html:not([data-theme="light"]) .home-why-visual,
[data-theme="dark"] .home-tech-visual,
[data-theme="dark"] .home-advanced-visual,
[data-theme="dark"] .home-why-visual{
  background:#171d1a!important;
  border-color:rgba(232,227,216,.10)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.22)!important;
}

/* Distinctive muted accents, no electric-blue dominance. */
html:not([data-theme="light"]) .text-grad,
[data-theme="dark"] .text-grad{
  background:linear-gradient(100deg,#d49a76,#d6b982 45%,#a8879e)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
}
html:not([data-theme="light"]) .btn-primary,
[data-theme="dark"] .btn-primary{
  background:linear-gradient(110deg,#a86349,#8a697f)!important;
  box-shadow:0 12px 30px rgba(57,35,42,.24)!important;
}
html:not([data-theme="light"]) .section-chip,
[data-theme="dark"] .section-chip{
  background:rgba(201,161,106,.07)!important;
  border-color:rgba(201,161,106,.20)!important;
  color:#ded7ca!important;
}
html:not([data-theme="light"]) .clay-glass-card:nth-child(3n+1),
html:not([data-theme="light"]) .crm-service-card:nth-child(3n+1),
[data-theme="dark"] .clay-glass-card:nth-child(3n+1),
[data-theme="dark"] .crm-service-card:nth-child(3n+1){border-top-color:var(--accent-copper)!important}
html:not([data-theme="light"]) .clay-glass-card:nth-child(3n+2),
html:not([data-theme="light"]) .crm-service-card:nth-child(3n+2),
[data-theme="dark"] .clay-glass-card:nth-child(3n+2),
[data-theme="dark"] .crm-service-card:nth-child(3n+2){border-top-color:var(--accent-sage)!important}
html:not([data-theme="light"]) .clay-glass-card:nth-child(3n),
html:not([data-theme="light"]) .crm-service-card:nth-child(3n),
[data-theme="dark"] .clay-glass-card:nth-child(3n),
[data-theme="dark"] .crm-service-card:nth-child(3n){border-top-color:var(--accent-plum)!important}

/* Dark-mode hard surfaces from older purple/blue CSS. */
html:not([data-theme="light"]) .phase2-light,
html:not([data-theme="light"]) .phase2-architecture,
html:not([data-theme="light"]) .phase2-bento-stage,
html:not([data-theme="light"]) .phase2-web-stage,
html:not([data-theme="light"]) .phase2-process-stage,
html:not([data-theme="light"]) .phase2-integration-stage,
html:not([data-theme="light"]) .phase3-case-stage,
[data-theme="dark"] .phase2-light,
[data-theme="dark"] .phase2-architecture,
[data-theme="dark"] .phase2-bento-stage,
[data-theme="dark"] .phase2-web-stage,
[data-theme="dark"] .phase2-process-stage,
[data-theme="dark"] .phase2-integration-stage,
[data-theme="dark"] .phase3-case-stage{
  background:var(--dark-slate-2)!important;
}
html:not([data-theme="light"]) .phase2-network,
[data-theme="dark"] .phase2-network{
  background:linear-gradient(145deg,var(--dark-forest),var(--dark-aubergine))!important;
  border-color:rgba(143,163,142,.14)!important;
  box-shadow:0 28px 74px rgba(0,0,0,.22)!important;
}
html:not([data-theme="light"]) .phase3-contact-side,
[data-theme="dark"] .phase3-contact-side{
  background:linear-gradient(155deg,#17221d,#2a1f29)!important;
}
html:not([data-theme="light"]) .phase3-submit,
[data-theme="dark"] .phase3-submit{
  background:linear-gradient(135deg,#9c654c,#8a697f)!important;
  box-shadow:0 14px 34px rgba(57,35,42,.22)!important;
}

/* Service accents become earthy even when templates provide older blue/purple values. */
html:not([data-theme="light"]) .service-page-shell,
[data-theme="dark"] .service-page-shell{
  --service-a:#8a697f!important;
  --service-b:#8fa38e!important;
}
html:not([data-theme="light"]) .service-hero,
[data-theme="dark"] .service-hero{
  background-color:var(--dark-slate)!important;
  background-image:linear-gradient(125deg,rgba(138,105,127,.07),transparent 32%),linear-gradient(305deg,rgba(143,163,142,.06),transparent 40%)!important;
}

/* Preserve text clarity. */
html:not([data-theme="light"]) h1,html:not([data-theme="light"]) h2,html:not([data-theme="light"]) h3,
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3{color:var(--text-primary)}

/* =========================================================
   FINAL HIGH-END ENGINEERING SUITE — 2026-08-31
   Premium software-company visual language: ink slate, crisp surfaces,
   restrained sky/indigo, mint reserved for engineering/system states.
   ========================================================= */
:root{
  --eng-bg:#0B0F19;
  --eng-bg-2:#0F1624;
  --eng-surface:#141C2B;
  --eng-card:#1E293B;
  --eng-card-soft:#182233;
  --eng-heading:#F8FAFC;
  --eng-body:#94A3B8;
  --eng-muted:#64748B;
  --eng-line:rgba(148,163,184,.14);
  --eng-line-strong:rgba(148,163,184,.24);
  --eng-sky:#E07A5F;
  --eng-indigo:#8B5E83;
  --eng-mint:#34D399;
  --brand-orange:var(--eng-sky);
  --brand-purple:var(--eng-indigo);
  --brand-coral:var(--eng-sky);
  --brand-aubergine:var(--eng-indigo);
  --brand-plum:var(--eng-indigo);
  --brand-teal:var(--eng-mint);
  --brand-sage:var(--eng-mint);
  --brand-gradient:linear-gradient(105deg,var(--eng-sky),var(--eng-indigo));
}

html:not([data-theme="light"]),[data-theme="dark"]{
  --bg-base:var(--eng-bg);
  --bg-surface:var(--eng-surface);
  --bg-elevated:var(--eng-card);
  --text-primary:var(--eng-heading);
  --text-secondary:var(--eng-body);
  --text-muted:var(--eng-muted);
  --border:var(--eng-line);
  --border-strong:var(--eng-line-strong);
}

body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;letter-spacing:-.005em}
h1,h2,h3,h4,h5,h6,.font-headline-lg,.font-headline-md,.font-display-xl,.font-display-lg,
.global-delivery-copy h3,.global-delivery-grid strong{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif!important;
}
h1,h2{letter-spacing:-.045em!important}
h3{letter-spacing:-.025em!important}

/* Dark theme foundation */
html:not([data-theme="light"]) body,[data-theme="dark"] body{background:var(--eng-bg)!important;color:var(--eng-heading)!important}
html:not([data-theme="light"]) body.aurora-bg,[data-theme="dark"] body.aurora-bg{background:var(--eng-bg)!important}
html:not([data-theme="light"]) body.aurora-bg::before,[data-theme="dark"] body.aurora-bg::before{
  position:fixed!important;inset:0!important;width:auto!important;height:auto!important;border-radius:0!important;filter:none!important;animation:none!important;opacity:1!important;
  background:
    linear-gradient(180deg,rgba(11,15,25,.28),rgba(11,15,25,.88)),
    radial-gradient(ellipse at 78% 12%,rgba(129,140,248,.075),transparent 34%),
    radial-gradient(ellipse at 15% 42%,rgba(56,189,248,.045),transparent 30%)!important;
}
html:not([data-theme="light"]) body.aurora-bg::after,[data-theme="dark"] body.aurora-bg::after{
  position:fixed!important;inset:0!important;width:auto!important;height:auto!important;border-radius:0!important;filter:none!important;animation:none!important;opacity:.26!important;
  background-image:linear-gradient(rgba(148,163,184,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.045) 1px,transparent 1px)!important;
  background-size:64px 64px!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 72%)!important;
}

/* Clean engineered section rhythm — no rainbow alternating panels. */
html:not([data-theme="light"]) main>section:not(.home-hero),[data-theme="dark"] main>section:not(.home-hero){
  background-color:transparent!important;
  background-image:none!important;
  border-color:var(--eng-line)!important;
}
html:not([data-theme="light"]) main>section:nth-of-type(even):not(.home-hero),[data-theme="dark"] main>section:nth-of-type(even):not(.home-hero){
  background:linear-gradient(180deg,rgba(20,28,43,.58),rgba(11,15,25,.22))!important;
}
html:not([data-theme="light"]) main>section:nth-of-type(3n):not(.home-hero),[data-theme="dark"] main>section:nth-of-type(3n):not(.home-hero){
  background:linear-gradient(180deg,rgba(15,22,36,.72),rgba(11,15,25,.30))!important;
}

/* Cards: crisp engineering panels rather than clay/glass/neon. */
html:not([data-theme="light"]) .dark-card,html:not([data-theme="light"]) .clay-glass-card,html:not([data-theme="light"]) .crm-service-card,
html:not([data-theme="light"]) .phase2-bento,html:not([data-theme="light"]) .phase2-feature-card,html:not([data-theme="light"]) .visual-showcase,
html:not([data-theme="light"]) .home-visual-frame,html:not([data-theme="light"]) .home-why-visual,
[data-theme="dark"] .dark-card,[data-theme="dark"] .clay-glass-card,[data-theme="dark"] .crm-service-card,[data-theme="dark"] .phase2-bento,
[data-theme="dark"] .phase2-feature-card,[data-theme="dark"] .visual-showcase,[data-theme="dark"] .home-visual-frame,[data-theme="dark"] .home-why-visual{
  background:linear-gradient(180deg,rgba(30,41,59,.94),rgba(20,28,43,.96))!important;
  border:1px solid var(--eng-line)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.20)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.dark-card:hover,.clay-glass-card:hover,.crm-service-card:hover{transform:translateY(-3px)!important;border-color:rgba(56,189,248,.24)!important;box-shadow:0 20px 48px rgba(0,0,0,.26)!important}

/* Hero = confident software engineering, not cyberpunk. */
html:not([data-theme="light"]) .home-hero,[data-theme="dark"] .home-hero{background:#0B0F19!important}
html:not([data-theme="light"]) .home-hero-overlay,[data-theme="dark"] .home-hero-overlay{
  background:linear-gradient(90deg,rgba(11,15,25,.98) 0%,rgba(11,15,25,.91) 45%,rgba(11,15,25,.58) 76%,rgba(11,15,25,.42) 100%)!important;
}
.home-hero-network{opacity:.20!important}
html:not([data-theme="light"]) .home-hero-panel>div,[data-theme="dark"] .home-hero-panel>div{
  background:rgba(20,28,43,.92)!important;border-color:var(--eng-line)!important;box-shadow:0 24px 64px rgba(0,0,0,.28)!important;backdrop-filter:none!important
}

/* Restrained accents. */
.text-grad{background:linear-gradient(100deg,var(--eng-sky),var(--eng-indigo))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.btn-primary{background:#F8FAFC!important;color:#0B0F19!important;border:1px solid rgba(248,250,252,.82)!important;border-radius:10px!important;box-shadow:none!important;font-weight:700!important}
.btn-primary:hover{background:#E2E8F0!important;transform:translateY(-2px)!important;box-shadow:0 12px 28px rgba(0,0,0,.22)!important}
.btn-ghost{border-color:var(--eng-line-strong)!important;border-radius:10px!important}
.btn-ghost:hover{background:rgba(148,163,184,.08)!important;border-color:rgba(56,189,248,.30)!important}
.section-chip{border-radius:7px!important;background:rgba(56,189,248,.055)!important;border-color:rgba(56,189,248,.16)!important;color:#BAE6FD!important;font-size:11px!important;letter-spacing:.11em!important}

/* Developer/system labels use mint + mono sparingly. */
.service-kicker,.phase2-micro,.phase3-eyebrow,.tech-label,.code-label,[class*="eyebrow"]{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace!important;
}
html:not([data-theme="light"]) .service-kicker,html:not([data-theme="light"]) .phase2-micro,html:not([data-theme="light"]) .tech-label,
[data-theme="dark"] .service-kicker,[data-theme="dark"] .phase2-micro,[data-theme="dark"] .tech-label{color:#6EE7B7!important}

/* Eliminate legacy glowing borders / colored top rules. */
html:not([data-theme="light"]) .clay-glass-card:nth-child(n),html:not([data-theme="light"]) .crm-service-card:nth-child(n),
[data-theme="dark"] .clay-glass-card:nth-child(n),[data-theme="dark"] .crm-service-card:nth-child(n){border-top-color:var(--eng-line)!important}

/* Navigation */
html:not([data-theme="light"]) #main-navbar,[data-theme="dark"] #main-navbar{background:rgba(11,15,25,.86)!important;border-bottom:1px solid rgba(148,163,184,.10)!important;backdrop-filter:blur(14px)!important}
html:not([data-theme="light"]) .navbar-scrolled,[data-theme="dark"] .navbar-scrolled{background:rgba(11,15,25,.96)!important;border-bottom-color:var(--eng-line)!important}
#main-navbar .text-\[\#E07A5F\]{color:var(--eng-sky)!important}
#main-navbar .text-\[\#8B5E83\]{color:var(--eng-indigo)!important}

/* Media treatment: screenshots look like real product evidence. */
.visual-showcase img,.home-visual-frame img,.home-tech-visual img,.home-advanced-visual img,.home-why-visual img{
  border-radius:12px!important;filter:saturate(.88) contrast(1.02)!important;
}
.home-tech-visual,.home-advanced-visual,.home-why-visual{
  border-radius:16px!important;background:var(--eng-surface)!important;border:1px solid var(--eng-line)!important;box-shadow:0 24px 70px rgba(0,0,0,.24)!important
}

/* Compact CTA / digital-stack block. */
.phase3-conversion{padding-block:40px!important}
.phase3-conversion-shell{padding:30px 34px!important;gap:28px!important;min-height:0!important;background:linear-gradient(135deg,#111827,#172033)!important;border:1px solid var(--eng-line)!important;border-radius:18px!important}
.phase3-system-map{height:210px!important;min-height:0!important}

/* Light mode — clean, bright engineering studio; no dull gray wash. */
[data-theme="light"]{
  --bg-base:#F8FAFC;
  --bg-surface:#FFFFFF;
  --bg-elevated:#F1F5F9;
  --text-primary:#0F172A;
  --text-secondary:#475569;
  --text-muted:#64748B;
  --border:rgba(15,23,42,.09);
  --border-strong:rgba(15,23,42,.16);
}
[data-theme="light"] body{background:#F8FAFC!important;color:#0F172A!important}
[data-theme="light"] body.aurora-bg::before{position:fixed!important;inset:0!important;width:auto!important;height:auto!important;filter:none!important;border-radius:0!important;animation:none!important;opacity:1!important;background:linear-gradient(180deg,#F8FAFC,#F1F5F9)!important}
[data-theme="light"] body.aurora-bg::after{position:fixed!important;inset:0!important;width:auto!important;height:auto!important;border-radius:0!important;filter:none!important;animation:none!important;opacity:.36!important;background-image:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px)!important;background-size:64px 64px!important;mask-image:linear-gradient(to bottom,rgba(0,0,0,.58),transparent 68%)!important}
[data-theme="light"] main>section:not(.home-hero){background:#F8FAFC!important;background-image:none!important}
[data-theme="light"] main>section:nth-of-type(even):not(.home-hero){background:#FFFFFF!important}
[data-theme="light"] main>section:nth-of-type(3n):not(.home-hero){background:#F1F5F9!important}
[data-theme="light"] .dark-card,[data-theme="light"] .clay-glass-card,[data-theme="light"] .crm-service-card,[data-theme="light"] .phase2-bento,[data-theme="light"] .phase2-feature-card,[data-theme="light"] .visual-showcase,[data-theme="light"] .home-visual-frame,[data-theme="light"] .home-why-visual{
  background:#FFFFFF!important;border:1px solid rgba(15,23,42,.09)!important;box-shadow:0 14px 34px rgba(15,23,42,.07)!important;color:#0F172A!important;backdrop-filter:none!important
}
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,[data-theme="light"] h4{color:#0F172A!important}
[data-theme="light"] p,[data-theme="light"] li{color:#475569}
[data-theme="light"] .section-chip{background:#EFF6FF!important;border-color:#BAE6FD!important;color:#0369A1!important}
[data-theme="light"] .btn-primary{background:#0F172A!important;color:#F8FAFC!important;border-color:#0F172A!important}
[data-theme="light"] .btn-primary:hover{background:#1E293B!important}
[data-theme="light"] .btn-ghost{color:#0F172A!important;border-color:rgba(15,23,42,.18)!important}
[data-theme="light"] #main-navbar{background:rgba(248,250,252,.92)!important;border-bottom:1px solid rgba(15,23,42,.08)!important;backdrop-filter:blur(14px)!important}
[data-theme="light"] #main-navbar a,[data-theme="light"] #main-navbar button{color:#334155}
[data-theme="light"] .home-hero{background:#0B0F19!important}
[data-theme="light"] .home-hero h1,[data-theme="light"] .home-hero h2,[data-theme="light"] .home-hero h3,[data-theme="light"] .home-hero p{color:#F8FAFC!important}
[data-theme="light"] .home-hero .text-\[var\(--text-secondary\)\]{color:#CBD5E1!important}
[data-theme="light"] .phase3-conversion-shell{background:linear-gradient(135deg,#0F172A,#1E293B)!important;color:#F8FAFC!important}
[data-theme="light"] .phase3-conversion-shell h2,[data-theme="light"] .phase3-conversion-shell h3{color:#F8FAFC!important}
[data-theme="light"] .phase3-conversion-shell p{color:#CBD5E1!important}

/* Accessibility + restrained motion. */
:focus-visible{outline:2px solid var(--eng-sky)!important;outline-offset:3px!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* =========================================================
   CYBER METALLIC TYPOGRAPHY PASS — 2026-08-31
   Reduce stark white usage with platinum, glacier and warm-retrotech tones.
   ========================================================= */
:root{
  --metal-platinum:#E2E8F0;
  --metal-zinc:#E4E4E7;
  --metal-silver:#A1A1AA;
  --metal-slate:#94A3B8;
  --ice-heading:#F0F9FF;
  --ice-copy:#BAE6FD;
  --terminal-sand:#D6D3D1;
  --terminal-stone:#A8A29E;
  --terminal-gold:#FEF08A;
}

html:not([data-theme="light"]),[data-theme="dark"]{
  --eng-heading:var(--metal-platinum);
  --eng-body:var(--metal-silver);
  --text-primary:var(--metal-platinum);
  --text-secondary:var(--metal-silver);
  --text-muted:#7F8793;
}

/* Platinum is the default hierarchy; only large display copy receives the ice tint. */
html:not([data-theme="light"]) h1,[data-theme="dark"] h1,
html:not([data-theme="light"]) .font-display-xl,[data-theme="dark"] .font-display-xl,
html:not([data-theme="light"]) .font-headline-lg,[data-theme="dark"] .font-headline-lg{
  color:var(--ice-heading)!important;
}
html:not([data-theme="light"]) h2,html:not([data-theme="light"]) h3,html:not([data-theme="light"]) h4,
[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{
  color:var(--metal-platinum)!important;
}
html:not([data-theme="light"]) p,html:not([data-theme="light"]) li,
[data-theme="dark"] p,[data-theme="dark"] li{
  color:var(--metal-silver);
}

/* Hero: crisp glacier hierarchy without a wall of pure white. */
html:not([data-theme="light"]) .home-hero h1,[data-theme="dark"] .home-hero h1,
[data-theme="light"] .home-hero h1{color:var(--ice-heading)!important}
html:not([data-theme="light"]) .home-hero p,[data-theme="dark"] .home-hero p,
[data-theme="light"] .home-hero p{color:#AAB8C8!important}
html:not([data-theme="light"]) .home-hero-proof b,[data-theme="dark"] .home-hero-proof b,
[data-theme="light"] .home-hero-proof b{color:var(--metal-platinum)!important}

/* Engineering / developer content gets a subtle warm retrotech note. */
html:not([data-theme="light"]) .service-kicker,
html:not([data-theme="light"]) .phase2-micro,
html:not([data-theme="light"]) .tech-label,
html:not([data-theme="light"]) .code-label,
[data-theme="dark"] .service-kicker,[data-theme="dark"] .phase2-micro,
[data-theme="dark"] .tech-label,[data-theme="dark"] .code-label{
  color:#C7B98A!important;
}
html:not([data-theme="light"]) .phase3-live-pill,
html:not([data-theme="light"]) [class*="eyebrow"],
[data-theme="dark"] .phase3-live-pill,[data-theme="dark"] [class*="eyebrow"]{
  color:var(--terminal-stone)!important;
}

/* Chips and metadata use glacier silver rather than white. */
html:not([data-theme="light"]) .section-chip,[data-theme="dark"] .section-chip{
  color:#BAE6FD!important;
  background:rgba(56,189,248,.045)!important;
  border-color:rgba(125,211,252,.14)!important;
}
html:not([data-theme="light"]) small,[data-theme="dark"] small{color:#8D98A6}

/* Primary action is an accent, not another white slab. */
html:not([data-theme="light"]) .btn-primary,[data-theme="dark"] .btn-primary{
  background:#E07A5F!important;
  color:#08111C!important;
  border-color:#E07A5F!important;
}
html:not([data-theme="light"]) .btn-primary:hover,[data-theme="dark"] .btn-primary:hover{
  background:#7DD3FC!important;
  border-color:#7DD3FC!important;
}

/* Dark conversion/contact areas also avoid stark white copy. */
html:not([data-theme="light"]) .phase3-conversion-shell,
[data-theme="dark"] .phase3-conversion-shell,
html:not([data-theme="light"]) .phase3-contact-side,
[data-theme="dark"] .phase3-contact-side{color:var(--metal-platinum)!important}
html:not([data-theme="light"]) .phase3-conversion-shell p,
[data-theme="dark"] .phase3-conversion-shell p,
html:not([data-theme="light"]) .phase3-contact-side p,
[data-theme="dark"] .phase3-contact-side p{color:var(--terminal-stone)!important}

/* Light mode keeps strong contrast but avoids clinical pure-white typography in dark hero/CTA islands. */
[data-theme="light"] .home-hero h2,[data-theme="light"] .home-hero h3,
[data-theme="light"] .phase3-conversion-shell h2,[data-theme="light"] .phase3-conversion-shell h3{
  color:var(--metal-platinum)!important;
}
[data-theme="light"] .home-hero p,[data-theme="light"] .phase3-conversion-shell p{color:#AAB8C8!important}

/* =========================================================
   Light Mode 2.0 — premium editorial / engineering palette
   Alabaster -> Slate -> Linen -> Contrast CTA
   ========================================================= */
[data-theme="light"] {
    --bg-base: #FDFDFC;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F1F5F9;
    --border: rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.17);
    --text-primary: #1A1D20;
    --text-secondary: #4A4F54;
    --text-muted: #64748B;
}

[data-theme="light"] body,
[data-theme="light"] main {
    background: #FDFDFC;
    color: #1A1D20;
}

/* Section family 1 — warm gallery / introduction */
[data-theme="light"] .home-hero,
[data-theme="light"] .phase2-architecture,
[data-theme="light"] .phase2-web-stage,
[data-theme="light"] .service-page-shell > section:first-child,
[data-theme="light"] .phase3-contact {
    background-color: #FDFDFC !important;
    color: #1A1D20 !important;
}

/* Let the hero video remain as texture, not as a dark-mode canvas. */
[data-theme="light"] .home-hero video {
    opacity: .18;
    filter: saturate(.7) contrast(.9) brightness(1.18);
}
[data-theme="light"] .home-hero-overlay {
    background: linear-gradient(100deg, rgba(253,253,252,.98) 0%, rgba(253,253,252,.91) 48%, rgba(241,245,249,.80) 100%) !important;
}
[data-theme="light"] .home-hero-title { color:#1A1D20 !important; text-shadow:none !important; }
[data-theme="light"] .home-hero-lead,
[data-theme="light"] .home-hero-muted { color:#4A4F54 !important; }
[data-theme="light"] .home-hero-eyebrow { color:#334155 !important; }
[data-theme="light"] .home-hero-proof span { color:#4A4F54 !important; }
[data-theme="light"] .home-hero-proof b { color:#0F172A !important; }
[data-theme="light"] .home-hero-panel > div {
    background: rgba(255,255,255,.86) !important;
    border-color: rgba(15,23,42,.11) !important;
    box-shadow: 0 26px 70px rgba(15,23,42,.12) !important;
}
[data-theme="light"] .home-hero-panel .text-white { color:#0F172A !important; }
[data-theme="light"] .home-hero-bar { background-color:#334155 !important; opacity:.80; }
[data-theme="light"] .home-hero a.bg-white {
    background:#0F172A !important;
    color:#F8FAFC !important;
}
[data-theme="light"] .home-hero a.bg-white\/10 {
    background:#FFFFFF !important;
    color:#0F172A !important;
    border-color:rgba(15,23,42,.14) !important;
}

/* Section family 2 — cool engineering slate */
[data-theme="light"] #crm-pin-section,
[data-theme="light"] .phase2-integration-stage,
[data-theme="light"] .phase2-process-stage,
[data-theme="light"] #marketing,
[data-theme="light"] .saas-signal-rail,
[data-theme="light"] .service-page-shell > section:nth-of-type(3n + 2) {
    background-color:#F1F5F9 !important;
    color:#0F172A !important;
}
[data-theme="light"] #crm-pin-section h1,
[data-theme="light"] #crm-pin-section h2,
[data-theme="light"] #crm-pin-section h3,
[data-theme="light"] #crm-pin-section h4,
[data-theme="light"] .phase2-integration-stage h2,
[data-theme="light"] .phase2-process-stage h2,
[data-theme="light"] #marketing h2,
[data-theme="light"] .service-page-shell > section:nth-of-type(3n + 2) h1,
[data-theme="light"] .service-page-shell > section:nth-of-type(3n + 2) h2,
[data-theme="light"] .service-page-shell > section:nth-of-type(3n + 2) h3 {
    color:#0F172A !important;
}
[data-theme="light"] #crm-pin-section p,
[data-theme="light"] .phase2-integration-stage p,
[data-theme="light"] .phase2-process-stage p,
[data-theme="light"] #marketing p,
[data-theme="light"] .service-page-shell > section:nth-of-type(3n + 2) p {
    color:#334155 !important;
}

/* Section family 3 — warm editorial / proof */
[data-theme="light"] .phase2-bento-stage,
[data-theme="light"] .phase3-case-stage,
[data-theme="light"] #portfolio,
[data-theme="light"] .service-page-shell > section:nth-of-type(3n) {
    background-color:#F7F4EF !important;
    color:#1C1917 !important;
}
[data-theme="light"] .phase2-bento-stage h2,
[data-theme="light"] .phase3-case-stage h2,
[data-theme="light"] #portfolio h2,
[data-theme="light"] .service-page-shell > section:nth-of-type(3n) h1,
[data-theme="light"] .service-page-shell > section:nth-of-type(3n) h2,
[data-theme="light"] .service-page-shell > section:nth-of-type(3n) h3 {
    color:#1C1917 !important;
}
[data-theme="light"] .phase2-bento-stage p,
[data-theme="light"] .phase3-case-stage p,
[data-theme="light"] #portfolio p,
[data-theme="light"] .service-page-shell > section:nth-of-type(3n) p {
    color:#44403C !important;
}

/* Cards should visibly lift off the light sections. */
[data-theme="light"] .dark-card,
[data-theme="light"] .saas-interactive-card,
[data-theme="light"] .clay-glass-card,
[data-theme="light"] .crm-scroll-card,
[data-theme="light"] .phase2-bento,
[data-theme="light"] .phase3-case-card,
[data-theme="light"] .service-page-shell [class*="rounded-"][class*="border"] {
    background-color:#FFFFFF !important;
    border-color:rgba(15,23,42,.10) !important;
    box-shadow:0 12px 34px rgba(15,23,42,.07) !important;
}

/* Light sections need dark copy even when legacy Tailwind classes say white. */
[data-theme="light"] main section:not(.home-dark-section):not(.phase3-conversion) .text-white {
    color:#1A1D20 !important;
}
[data-theme="light"] main section:not(.home-dark-section):not(.phase3-conversion) [class*="text-white/"] {
    color:#4A4F54 !important;
}

/* Keep the deliberate conversion punch dark in light mode. */
[data-theme="light"] .phase3-conversion,
[data-theme="light"] .home-dark-section {
    background:#0F172A !important;
    color:#F8FAFC !important;
}
[data-theme="light"] .phase3-conversion h1,
[data-theme="light"] .phase3-conversion h2,
[data-theme="light"] .phase3-conversion h3,
[data-theme="light"] .home-dark-section h1,
[data-theme="light"] .home-dark-section h2,
[data-theme="light"] .home-dark-section h3,
[data-theme="light"] .home-dark-section .text-white {
    color:#F8FAFC !important;
}
[data-theme="light"] .phase3-conversion p,
[data-theme="light"] .home-dark-section p,
[data-theme="light"] .home-dark-section [class*="text-white/"] {
    color:#94A3B8 !important;
}

/* More editorial section boundaries — no giant gradients or washed-out slabs. */
[data-theme="light"] main > section,
[data-theme="light"] .service-page-shell > section {
    border-color:rgba(15,23,42,.08) !important;
}
[data-theme="light"] .section-chip {
    color:#334155 !important;
    background:rgba(255,255,255,.74) !important;
    border-color:rgba(15,23,42,.12) !important;
}
[data-theme="light"] .home-dark-section .section-chip,
[data-theme="light"] .phase3-conversion .section-chip {
    color:#CBD5E1 !important;
    background:rgba(255,255,255,.05) !important;
    border-color:rgba(255,255,255,.12) !important;
}

/* Footer remains the visual anchor in both modes. */
[data-theme="light"] footer {
    background:#0F172A !important;
    color:#F8FAFC !important;
}

/* Navigation gets a crisp gallery-like light treatment. */
[data-theme="light"] header nav,
[data-theme="light"] nav {
    background-color:rgba(253,253,252,.88);
    border-color:rgba(15,23,42,.08);
}
[data-theme="light"] nav a:not([class*="bg-"]) { color:#334155; }
[data-theme="light"] nav a:hover { color:#0F172A; }

/* Mobile: retain the color rhythm without oversized color blocks. */
@media (max-width: 767px) {
    [data-theme="light"] .home-hero-overlay {
        background:rgba(253,253,252,.94) !important;
    }
}

/* =========================================================
   AISCALEON DARK MODE — TAILORED PREMIUM TYPOGRAPHY
   User-approved palette: alabaster / champagne / warm stone / clay
   ========================================================= */
:root,
[data-theme="dark"] {
    --as-heading: #F4F4F5;
    --as-subheading: #E7E5E4;
    --as-body: #A8A29E;
    --as-meta: #78716C;
}

/* Main display hierarchy */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] .display-title,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .text-white.text-4xl,
[data-theme="dark"] .text-white.text-5xl,
[data-theme="dark"] .text-white.text-6xl,
[data-theme="dark"] .text-white.text-7xl {
    color: var(--as-heading) !important;
}

/* Subheadings, navigation links, card titles and editorial labels */
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] nav a,
[data-theme="dark"] .subheading,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .section-kicker,
[data-theme="dark"] .card-title,
[data-theme="dark"] .service-title,
[data-theme="dark"] a:not(.btn-primary):not(.primary-cta):not([class*="bg-"]) {
    color: var(--as-subheading) !important;
}

/* Long-form and supporting copy */
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] .body-copy,
[data-theme="dark"] .section-copy,
[data-theme="dark"] .card-copy,
[data-theme="dark"] .text-slate-300,
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-gray-300,
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] [class*="text-white/"] {
    color: var(--as-body) !important;
}

/* Small metadata should recede rather than compete */
[data-theme="dark"] .section-chip,
[data-theme="dark"] .pill,
[data-theme="dark"] .badge,
[data-theme="dark"] .meta,
[data-theme="dark"] .meta-text,
[data-theme="dark"] .tech-label,
[data-theme="dark"] .tech-chip,
[data-theme="dark"] .text-xs,
[data-theme="dark"] .text-sm.text-slate-400,
[data-theme="dark"] .text-sm.text-gray-400 {
    color: var(--as-meta) !important;
}

/* Preserve deliberate CTA contrast without returning to stark white everywhere. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .primary-cta,
[data-theme="dark"] button[class*="bg-"] {
    color:#F4F4F5 !important;
}

/* Footer follows the same tonal hierarchy. */
[data-theme="dark"] footer h2,
[data-theme="dark"] footer h3,
[data-theme="dark"] footer h4 {
    color:var(--as-heading) !important;
}
[data-theme="dark"] footer p,
[data-theme="dark"] footer li {
    color:var(--as-body) !important;
}
[data-theme="dark"] footer a {
    color:var(--as-subheading) !important;
}
[data-theme="dark"] footer a:hover {
    color:var(--as-heading) !important;
}

/* Keep intentionally functional accent links accented, but not neon. */
[data-theme="dark"] a.text-sky-400,
[data-theme="dark"] a.text-indigo-400,
[data-theme="dark"] .accent-link {
    color:#BAE6FD !important;
}

/* =========================================================
   AISCALEON — CHAMPAGNE & EDITORIAL STONE SYSTEM v3.0
   Production visual system: engineered, restrained, human.
   ========================================================= */
:root,
[data-theme="dark"] {
    --bg-base: #0B0F19;
    --bg-surface: #121826;
    --bg-elevated: #161D2C;
    --bg-soft: #0F1420;
    --text-h1: #F4F4F5;
    --text-h2-h3: #E7E5E4;
    --text-body: #A8A29E;
    --text-muted: #78716C;
    --text-primary: var(--text-h1);
    --text-secondary: var(--text-body);
    --border: rgba(244, 244, 245, 0.05);
    --border-strong: rgba(244, 244, 245, 0.09);
    --accent-coral: #E07A5F;
    --accent-moss: #52B788;
    --accent-sand: #C7A97A;
    --accent-ink: #0B0F19;
    --brand-orange: var(--accent-coral);
    --brand-purple: var(--accent-moss);
    --brand-gradient: linear-gradient(135deg, #E07A5F 0%, #C7A97A 100%);
}

body {
    font-family: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--text-body);
    line-height: 1.625;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[data-theme="dark"] main,
[data-theme="dark"] body { background:#0B0F19 !important; }

[data-theme="dark"] h1,
[data-theme="dark"] h2 {
    color: var(--text-h1) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.08;
    font-weight: 700 !important;
}
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] nav a,
[data-theme="dark"] .card-title,
[data-theme="dark"] .service-title {
    color:var(--text-h2-h3) !important;
    letter-spacing:-0.01em;
    font-weight:600;
}
[data-theme="dark"] p,
[data-theme="dark"] li { color:var(--text-body) !important; }
[data-theme="dark"] .section-chip,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .meta,
[data-theme="dark"] .tech-label,
[data-theme="dark"] .tech-chip { color:var(--text-muted) !important; }

/* Remove generic cyberpunk / glass-template language. */
[data-theme="dark"] .dark-card,
[data-theme="dark"] [class*="rounded-3xl"],
[data-theme="dark"] [class*="rounded-2xl"] {
    border-color:rgba(244,244,245,.05) !important;
}
[data-theme="dark"] .dark-card {
    background:#121826;
    box-shadow:0 20px 54px rgba(0,0,0,.18);
}
[data-theme="dark"] .dark-card:hover {
    transform:translateY(-2px);
    box-shadow:0 24px 58px rgba(0,0,0,.25);
    border-color:rgba(224,122,95,.22) !important;
}

/* Section rhythm: depth through tone, not neon effects. */
[data-theme="dark"] main > section:not(.home-hero):nth-of-type(4n+1) { background-color:#0B0F19; }
[data-theme="dark"] main > section:not(.home-hero):nth-of-type(4n+2) { background-color:#0F1420; }
[data-theme="dark"] main > section:not(.home-hero):nth-of-type(4n+3) { background-color:#111824; }
[data-theme="dark"] main > section:not(.home-hero):nth-of-type(4n) { background-color:#0C111B; }
[data-theme="dark"] .home-dark-section,
[data-theme="dark"] .phase3-conversion,
[data-theme="dark"] .phase3-contact { background:#0D121D !important; }

/* Quiet architectural backdrop. */
[data-theme="dark"] .saas-section {
    position:relative;
    isolation:isolate;
}
[data-theme="dark"] .saas-section::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.36;
    background-image:
      linear-gradient(rgba(244,244,245,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(244,244,245,.018) 1px, transparent 1px);
    background-size:48px 48px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
}

/* Editorial dividers */
[data-theme="dark"] main > section + section { border-top-color:rgba(244,244,245,.045) !important; }
[data-theme="dark"] .saas-section::after {
    content:"";
    position:absolute;
    left:max(24px, calc((100vw - 1400px)/2));
    right:max(24px, calc((100vw - 1400px)/2));
    bottom:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(231,229,228,.08) 18%,rgba(231,229,228,.08) 82%,transparent);
    pointer-events:none;
}

/* HERO — editorial engineering */
.home-hero {
    min-height:min(900px,100svh) !important;
    background:#0B0F19;
}
.home-hero video { opacity:.16 !important; filter:saturate(.35) contrast(1.08) brightness(.72); }
.home-hero-overlay {
    background:
      linear-gradient(90deg,rgba(11,15,25,.98) 0%,rgba(11,15,25,.91) 48%,rgba(11,15,25,.66) 100%),
      linear-gradient(180deg,rgba(11,15,25,.15),rgba(11,15,25,.92)) !important;
}
.home-hero-copy { max-width:760px !important; }
.home-hero-title {
    color:#F4F4F5 !important;
    font-family:'Plus Jakarta Sans',Inter,sans-serif !important;
    font-weight:700 !important;
    letter-spacing:-.045em !important;
    text-wrap:balance;
}
.home-hero-lead { color:#A8A29E !important; max-width:660px !important; }
.home-hero-eyebrow {
    color:#C8C3BD !important;
    letter-spacing:.11em !important;
    text-transform:uppercase;
    font-size:11px !important;
}
.home-hero-eyebrow span { background:#E07A5F !important; box-shadow:none !important; }
.home-hero-proof {
    display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 30px;
    color:#78716C;font-size:13px;
}
.home-hero-proof span { position:relative;padding-left:14px; }
.home-hero-proof span::before { content:"";position:absolute;left:0;top:.65em;width:4px;height:4px;border-radius:50%;background:#52B788; }
.home-hero-proof b { color:#E7E5E4;font-weight:600; }
.editorial-btn {
    min-height:50px;padding:14px 21px;border-radius:10px;font-size:14px;font-weight:700;
    letter-spacing:-.01em;transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.editorial-btn:hover { transform:translateY(-1px); }
.editorial-btn-primary { background:#E07A5F;color:#0B0F19 !important;border:1px solid #E07A5F;box-shadow:0 10px 28px rgba(224,122,95,.14); }
.editorial-btn-primary:hover { background:#E98A71; }
.editorial-btn-secondary { background:rgba(18,24,38,.78);color:#E7E5E4 !important;border:1px solid rgba(244,244,245,.08);backdrop-filter:none !important; }
.editorial-btn-secondary:hover { border-color:rgba(199,169,122,.24);background:#161D2C; }

/* Hero architecture panel */
.editorial-architecture { position:relative; }
.architecture-frame {
    padding:18px;border-radius:18px;background:rgba(18,24,38,.92);
    border:1px solid rgba(244,244,245,.07);box-shadow:0 36px 80px rgba(0,0,0,.34);
}
.architecture-topline { display:flex;justify-content:space-between;gap:12px;padding:2px 2px 15px;color:#78716C;font-size:11px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid rgba(244,244,245,.05); }
.architecture-status { color:#A8A29E;display:inline-flex;align-items:center;gap:7px; }
.architecture-status i { width:6px;height:6px;border-radius:50%;background:#52B788;box-shadow:0 0 0 4px rgba(82,183,136,.08); }
.architecture-core { padding:24px 22px;margin:16px 0;background:#0E1420;border:1px solid rgba(244,244,245,.05);border-radius:13px; }
.architecture-core-kicker { display:block;color:#C7A97A;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px; }
.architecture-core strong { display:block;color:#F4F4F5;font-size:24px;letter-spacing:-.025em; }
.architecture-core small { display:block;color:#78716C;margin-top:6px; }
.architecture-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.architecture-node { min-height:112px;padding:16px;border-radius:12px;background:#111824;border:1px solid rgba(244,244,245,.045); }
.architecture-node span { display:block;color:#78716C;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:19px; }
.architecture-node b { display:block;color:#E7E5E4;font-size:14px;margin-bottom:5px; }
.architecture-node small { color:#78716C;font-size:11px;line-height:1.45; }
.architecture-node:nth-child(1) { border-top-color:rgba(224,122,95,.38); }
.architecture-node:nth-child(2) { border-top-color:rgba(82,183,136,.34); }
.architecture-node:nth-child(3) { border-top-color:rgba(199,169,122,.34); }
.architecture-node:nth-child(4) { border-top-color:rgba(231,229,228,.15); }
.architecture-stack { display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(244,244,245,.05); }
.architecture-stack span { color:#78716C;background:#0D131E;border:1px solid rgba(244,244,245,.045);border-radius:7px;padding:7px 9px;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Signal rail */
.saas-signal-rail { background:#0D131E !important;border-color:rgba(244,244,245,.05) !important; }
.saas-signal-track span { color:#A8A29E !important; }
.saas-signal-track i { background:#52B788 !important;box-shadow:none !important; }
.saas-signal-track b { color:#3C414B !important; }

/* CRM / service cards */
.crm-services-compact { background:#0F1420 !important; }
.crm-services-heading { max-width:760px; }
.crm-services-heading h2 { max-width:720px; }
.crm-services-primary { gap:12px !important; }
.crm-service-card {
    background:#121826 !important;border:1px solid rgba(244,244,245,.05) !important;
    border-radius:14px !important;box-shadow:none !important;
}
.crm-service-card:hover { transform:translateY(-2px) !important;border-color:rgba(224,122,95,.2) !important; }
.crm-service-card .material-symbols-outlined { color:#C7A97A !important;background:rgba(199,169,122,.08) !important; }
.crm-service-card--featured { background:#151C2A !important;border-color:rgba(82,183,136,.14) !important; }
.crm-services-more span { background:#0D131E !important;border:1px solid rgba(244,244,245,.045) !important;color:#78716C !important; }

/* Generic image / product frames */
[data-theme="dark"] .visual-showcase,
[data-theme="dark"] .phase2-visual-shell,
[data-theme="dark"] [class*="visual-shell"],
[data-theme="dark"] [class*="image-shell"] {
    background:#111824 !important;border:1px solid rgba(244,244,245,.055) !important;
    box-shadow:0 28px 60px rgba(0,0,0,.22) !important;
}

/* Compact conversion CTA — no giant decorative empty space */
.phase3-conversion { padding:54px 0 !important;min-height:0 !important; }
.phase3-conversion-shell { min-height:0 !important;padding:34px !important;border-radius:18px !important;background:#121826 !important;border:1px solid rgba(244,244,245,.055) !important; }
.phase3-conversion-copy h2 { max-width:640px;margin-bottom:12px !important; }
.phase3-conversion-copy p { max-width:610px;margin-bottom:22px !important; }
.phase3-conversion-grid,.phase3-conversion-orb { display:none !important; }
.phase3-system-map { min-height:250px !important;height:250px !important; }
.phase3-live-pill { color:#C7A97A !important;background:rgba(199,169,122,.06) !important;border-color:rgba(199,169,122,.14) !important; }
.phase3-btn-primary { background:#52B788 !important;color:#0B0F19 !important;box-shadow:none !important; }
.phase3-btn-ghost { color:#E7E5E4 !important;border-color:rgba(244,244,245,.08) !important; }

/* Buttons and chips sitewide */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .primary-cta,
[data-theme="dark"] a[class*="bg-[#8B5E83]"],
[data-theme="dark"] button[class*="bg-[#8B5E83]"] {
    background:#E07A5F !important;color:#0B0F19 !important;box-shadow:none !important;
}
[data-theme="dark"] .section-chip {
    background:rgba(199,169,122,.045) !important;border-color:rgba(199,169,122,.13) !important;
    color:#A8A29E !important;border-radius:999px;
}

/* Navigation */
[data-theme="dark"] header nav,
[data-theme="dark"] nav { background:rgba(11,15,25,.88) !important;border-color:rgba(244,244,245,.055) !important; }
[data-theme="dark"] nav a:hover { color:#F4F4F5 !important; }

/* Avoid pure-white Tailwind remnants in dark mode. */
[data-theme="dark"] .text-white { color:#F4F4F5 !important; }
[data-theme="dark"] [class*="text-white/"] { color:#A8A29E !important; }
[data-theme="dark"] [class*="border-white/"] { border-color:rgba(244,244,245,.055) !important; }
[data-theme="dark"] [class*="bg-white/"] { background-color:rgba(244,244,245,.035) !important; }

@media (max-width: 1024px) {
    .home-hero { min-height:auto !important; }
    .editorial-architecture { max-width:760px !important; }
}
@media (max-width: 640px) {
    .architecture-grid { grid-template-columns:1fr; }
    .architecture-frame { padding:13px; }
    .architecture-core { padding:18px; }
    .architecture-core strong { font-size:20px; }
    .phase3-conversion-shell { padding:24px 18px !important; }
    .phase3-system-map { height:220px !important;min-height:220px !important; }
}

/* ==========================================================================
   AISCALEON PREMIUM DARK COLOR SYSTEM — STYLING-ONLY OVERRIDE LAYER
   This block intentionally changes ONLY colors, border colors and font-family.
   No spacing, sizing, positioning, display, grid, flex or layout rules.
   ========================================================================== */

:root {
    --ais-bg-base: #0B0F19;
    --ais-bg-surface: #121826;
    --ais-text-primary: #F4F4F5;
    --ais-text-secondary: #E7E5E4;
    --ais-text-body: #A8A29E;
    --ais-text-muted: #78716C;
    --ais-border: rgba(244, 244, 245, 0.05);
    --ais-cta: #E07A5F;
    --ais-cta-text: #0B0F19;
}

/* Core page canvas. */
html[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] #page,
[data-theme="dark"] .site,
[data-theme="dark"] .site-content,
[data-theme="dark"] main,
[data-theme="dark"] .wp-site-blocks {
    background-color: var(--ais-bg-base) !important;
    color: var(--ais-text-body) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* WordPress / builder / theme surface containers. */
[data-theme="dark"] .dark-card,
[data-theme="dark"] .card,
[data-theme="dark"] .premium-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] [class*="-card"],
[data-theme="dark"] [class*="card-"],
[data-theme="dark"] [class*="bg-surface"],
[data-theme="dark"] .wp-block-group,
[data-theme="dark"] .wp-block-column,
[data-theme="dark"] .wp-block-cover,
[data-theme="dark"] .elementor-section,
[data-theme="dark"] .elementor-container,
[data-theme="dark"] .elementor-widget-container,
[data-theme="dark"] .brxe-container,
[data-theme="dark"] .brxe-block {
    background-color: var(--ais-bg-surface) !important;
    border-color: var(--ais-border) !important;
}

/* Normalize bright/white utility surfaces only in dark mode. */
[data-theme="dark"] [class~="bg-white"],
[data-theme="dark"] [class*="bg-white/"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"] {
    background-color: var(--ais-bg-surface) !important;
}

/* Primary heading hierarchy. */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h1 *,
[data-theme="dark"] h2 *,
[data-theme="dark"] .entry-title,
[data-theme="dark"] .page-title,
[data-theme="dark"] .wp-block-post-title,
[data-theme="dark"] .elementor-heading-title {
    color: var(--ais-text-primary) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Secondary headings, navigation and structural links. */
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h3 *,
[data-theme="dark"] h4 *,
[data-theme="dark"] header a,
[data-theme="dark"] nav a,
[data-theme="dark"] .nav-item,
[data-theme="dark"] .nav-link,
[data-theme="dark"] .wp-block-navigation-item__content,
[data-theme="dark"] .elementor-nav-menu a {
    color: var(--ais-text-secondary) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Narrative/body copy. */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] p *,
[data-theme="dark"] li *,
[data-theme="dark"] .entry-content,
[data-theme="dark"] .entry-content p,
[data-theme="dark"] .wp-block-post-excerpt,
[data-theme="dark"] .elementor-widget-text-editor,
[data-theme="dark"] .elementor-widget-text-editor * {
    color: var(--ais-text-body) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Muted technical details, placeholders and metadata. */
[data-theme="dark"] small,
[data-theme="dark"] time,
[data-theme="dark"] caption,
[data-theme="dark"] .meta,
[data-theme="dark"] .meta-data,
[data-theme="dark"] .muted,
[data-theme="dark"] .label,
[data-theme="dark"] .tag,
[data-theme="dark"] [class*="meta"],
[data-theme="dark"] [class*="label"],
[data-theme="dark"] [class*="badge"],
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] select:disabled,
[data-theme="dark"] input:disabled,
[data-theme="dark"] textarea:disabled {
    color: var(--ais-text-muted) !important;
    border-color: var(--ais-border) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Neutralize raw white utility text without touching layout. */
[data-theme="dark"] .text-white,
[data-theme="dark"] [class*="text-white/"],
[data-theme="dark"] [style*="color: white"],
[data-theme="dark"] [style*="color:#fff"],
[data-theme="dark"] [style*="color: #fff"],
[data-theme="dark"] [style*="color:#ffffff"],
[data-theme="dark"] [style*="color: #ffffff"] {
    color: var(--ais-text-primary) !important;
}

/* Transparent premium borders across common containers and fields. */
[data-theme="dark"] .dark-card,
[data-theme="dark"] .card,
[data-theme="dark"] [class*="border-white"],
[data-theme="dark"] [class*="border-slate"],
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .wp-block-separator,
[data-theme="dark"] hr {
    border-color: var(--ais-border) !important;
}

/* Primary CTA treatment. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .button-primary,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] button.btn-primary,
[data-theme="dark"] .primary-cta,
[data-theme="dark"] .wp-block-button__link,
[data-theme="dark"] .elementor-button,
[data-theme="dark"] a[class*="bg-secondary"],
[data-theme="dark"] button[class*="bg-secondary"] {
    background-color: var(--ais-cta) !important;
    color: var(--ais-cta-text) !important;
    border-color: var(--ais-cta) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

[data-theme="dark"] .btn-primary *,
[data-theme="dark"] .button-primary *,
[data-theme="dark"] .primary-cta *,
[data-theme="dark"] .wp-block-button__link *,
[data-theme="dark"] .elementor-button * {
    color: var(--ais-cta-text) !important;
}

/* Icon-font protection: prevents ligature names from rendering as raw words. */
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-icons-two-tone,
.material-symbols,
.material-symbols-outlined,
[class*="material-icons"],
[class*="material-symbols"],
[class*="icon"] {
    font-family: 'Material Icons', 'Material Symbols Outlined' !important;
}


/* ==========================================================================\n   AISCALEON HUMAN ACCENT SYSTEM — NO GENERIC TECH BLUE\n   Section-specific accent colors only. Layout intentionally untouched.\n   ========================================================================== */
:root {
  --accent-terracotta:#E07A5F;
  --accent-coral:#D96C75;
  --accent-aubergine:#8B5E83;
  --accent-champagne:#D6A85F;
  --accent-sage:#7A9E7E;
  --accent-moss:#6F8F63;
  --accent-stone:#A8A29E;
  --accent-clay:#78716C;
}

/* Default brand accent: warm rather than blue. */
[data-theme="dark"] a:not(.btn-primary):hover,
[data-theme="dark"] button:not(.btn-primary):hover { color:var(--accent-champagne)!important; }
[data-theme="dark"] ::selection { background-color:rgba(224,122,95,.28)!important;color:#F4F4F5!important; }

/* Section personalities. */
.service-ai { --section-accent:var(--accent-aubergine);--section-accent-2:var(--accent-coral); }
.service-cloud { --section-accent:var(--accent-sage);--section-accent-2:var(--accent-moss); }
.service-product,.service-web { --section-accent:var(--accent-terracotta);--section-accent-2:var(--accent-champagne); }
.service-commerce { --section-accent:var(--accent-coral);--section-accent-2:var(--accent-champagne); }
.service-marketing { --section-accent:var(--accent-coral);--section-accent-2:var(--accent-aubergine); }
.service-app { --section-accent:var(--accent-sage);--section-accent-2:var(--accent-champagne); }
.service-dubai { --section-accent:var(--accent-champagne);--section-accent-2:var(--accent-terracotta); }
.service-about { --section-accent:var(--accent-aubergine);--section-accent-2:var(--accent-champagne); }

[data-theme="dark"] .service-page-shell .material-symbols-outlined,
[data-theme="dark"] .service-page-shell [class*="icon"] { color:var(--section-accent,var(--accent-terracotta))!important; }
[data-theme="dark"] .service-page-shell .section-chip,
[data-theme="dark"] .service-page-shell [class*="badge"] {
  color:var(--section-accent-2,var(--accent-champagne))!important;
  border-color:color-mix(in srgb,var(--section-accent,var(--accent-terracotta)) 22%, transparent)!important;
  background-color:color-mix(in srgb,var(--section-accent,var(--accent-terracotta)) 7%, #121826)!important;
}
[data-theme="dark"] .service-page-shell .btn-primary,
[data-theme="dark"] .service-page-shell .primary-cta {
  background-color:var(--section-accent,var(--accent-terracotta))!important;
  border-color:var(--section-accent,var(--accent-terracotta))!important;
  color:#0B0F19!important;
}
[data-theme="dark"] .service-page-shell .btn-primary *,
[data-theme="dark"] .service-page-shell .primary-cta * { color:#0B0F19!important; }
[data-theme="dark"] .service-page-shell [class*="border-t-"] { border-top-color:color-mix(in srgb,var(--section-accent,var(--accent-terracotta)) 48%, transparent)!important; }

/* Homepage: different families by major content groups, without recoloring neutral copy. */
[data-theme="dark"] .crm-services-compact { --section-accent:var(--accent-champagne); }
[data-theme="dark"] .crm-services-compact .material-symbols-outlined { color:var(--accent-champagne)!important; }
[data-theme="dark"] .phase3-conversion { --section-accent:var(--accent-sage); }
[data-theme="dark"] .phase3-conversion .phase3-btn-primary { background-color:var(--accent-sage)!important;border-color:var(--accent-sage)!important;color:#0B0F19!important; }

/* Explicitly neutralize common blue/cyan/indigo utilities left by old templates. */
[data-theme="dark"] [class*="text-blue-"],
[data-theme="dark"] [class*="text-cyan-"],
[data-theme="dark"] [class*="text-sky-"],
[data-theme="dark"] [class*="text-indigo-"] { color:var(--section-accent,var(--accent-terracotta))!important; }
[data-theme="dark"] [class*="border-blue-"],
[data-theme="dark"] [class*="border-cyan-"],
[data-theme="dark"] [class*="border-sky-"],
[data-theme="dark"] [class*="border-indigo-"] { border-color:color-mix(in srgb,var(--section-accent,var(--accent-terracotta)) 18%, transparent)!important; }
[data-theme="dark"] [class*="bg-blue-"],
[data-theme="dark"] [class*="bg-cyan-"],
[data-theme="dark"] [class*="bg-sky-"],
[data-theme="dark"] [class*="bg-indigo-"] { background-color:color-mix(in srgb,var(--section-accent,var(--accent-terracotta)) 8%, #121826)!important; }

/* Light mode keeps the premium neutral section system but uses the same human accents. */
[data-theme="light"] a:hover { color:#9C5A47!important; }
[data-theme="light"] .btn-primary,
[data-theme="light"] .primary-cta { background-color:#E07A5F!important;border-color:#E07A5F!important;color:#0B0F19!important; }
[data-theme="light"] .service-page-shell .material-symbols-outlined { color:var(--section-accent,#9C5A47)!important; }

/* ==========================================================================\n   AISCALEON — SELECTIVE EDITORIAL HEADING ACCENTS + HOMEPAGE MEDIA SCALE\n   Warm gradients are intentionally limited to key phrases, never full pages.\n   ========================================================================== */
.heading-accent{
  display:inline;
  color:inherit;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.heading-accent-terracotta{background-image:linear-gradient(100deg,#E7E5E4 0%,#E07A5F 42%,#D96C75 100%)}
.heading-accent-coral{background-image:linear-gradient(100deg,#E7E5E4 0%,#D96C75 48%,#8B5E83 100%)}
.heading-accent-aubergine{background-image:linear-gradient(100deg,#E7E5E4 0%,#B77AA5 44%,#8B5E83 100%)}
.heading-accent-gold{background-image:linear-gradient(100deg,#E7E5E4 0%,#D6A85F 52%,#B8894F 100%)}
.heading-accent-sage{background-image:linear-gradient(100deg,#E7E5E4 0%,#7A9E7E 50%,#6F8F63 100%)}

/* Keep light mode equally refined without low-contrast pale gradients. */
[data-theme="light"] .heading-accent-terracotta{background-image:linear-gradient(100deg,#4A4F54 0%,#B85F49 46%,#A94F5A 100%)}
[data-theme="light"] .heading-accent-coral{background-image:linear-gradient(100deg,#4A4F54 0%,#B95761 48%,#75506F 100%)}
[data-theme="light"] .heading-accent-aubergine{background-image:linear-gradient(100deg,#4A4F54 0%,#8B5E83 55%,#66455F 100%)}
[data-theme="light"] .heading-accent-gold{background-image:linear-gradient(100deg,#4A4F54 0%,#A9782E 55%,#876026 100%)}
[data-theme="light"] .heading-accent-sage{background-image:linear-gradient(100deg,#4A4F54 0%,#607F67 52%,#4D6B52 100%)}

/* Homepage media should support the story, not dominate it. */
.home .visual-showcase,
body.home .visual-showcase{
  width:min(100%,1040px);
  margin-left:auto;
  margin-right:auto;
}
.home .visual-showcase--crm,
body.home .visual-showcase--crm{max-width:900px}
.home .visual-showcase--wide,
body.home .visual-showcase--wide{max-width:980px}
.home .visual-showcase--marketing,
body.home .visual-showcase--marketing{max-width:920px}
.home .visual-showcase--global,
body.home .visual-showcase--global{max-width:1040px}

.home .visual-showcase img,
body.home .visual-showcase img{
  display:block;
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:contain!important;
}
.home .visual-showcase--crm img,
body.home .visual-showcase--crm img{max-height:540px}
.home .visual-showcase--marketing img,
body.home .visual-showcase--marketing img{max-height:560px}
.home .visual-showcase--global img,
body.home .visual-showcase--global img{max-height:595px}

/* Two-column product visuals receive restrained maximums as well. */
.home .phase2-code-stage,
body.home .phase2-code-stage{max-width:680px;margin-inline:auto;min-height:390px}
.home .phase2-code-image,
body.home .phase2-code-image{width:100%;height:auto;max-height:440px;min-height:0;object-fit:contain!important}
.home .phase2-phone-stage,
body.home .phase2-phone-stage{max-width:650px;margin-inline:auto;min-height:500px}
.home .phase2-phone-image,
body.home .phase2-phone-image{height:auto;max-height:455px;max-width:86%;object-fit:contain!important}
.home .phase2-cover-image,
body.home .phase2-cover-image{height:auto;max-height:470px;min-height:0;object-fit:contain!important}
.home .phase2-roadmap-image,
body.home .phase2-roadmap-image{max-width:960px;margin-left:auto;margin-right:auto;max-height:540px;object-fit:contain!important}
.home .home-tech-visual,
.home .home-advanced-visual,
.home .home-why-visual,
body.home .home-tech-visual,
body.home .home-advanced-visual,
body.home .home-why-visual{max-width:1040px;margin-left:auto;margin-right:auto}
.home .home-tech-visual img,
.home .home-advanced-visual img,
.home .home-why-visual img,
body.home .home-tech-visual img,
body.home .home-advanced-visual img,
body.home .home-why-visual img{height:auto;max-height:600px;min-height:0;object-fit:contain!important}

@media(max-width:767px){
  .home .visual-showcase img,body.home .visual-showcase img{max-height:none}
  .home .phase2-code-stage,body.home .phase2-code-stage{min-height:0}
  .home .phase2-phone-stage,body.home .phase2-phone-stage{min-height:430px}
  .home .phase2-phone-image,body.home .phase2-phone-image{max-height:390px}
}

/* ========================================================================== 
   AISCALEON — FINAL RHYTHM + LIGHTWEIGHT AMBIENT MOTION PASS
   2026-08-31
   Native scrolling only. No GSAP / ScrollTrigger / WebGL dependencies.
   ========================================================================== */

/* 1) Remove the excessive transition gap before Mobile Products. */
.phase2-process-stage{
  padding-bottom:44px !important;
}
.phase2-process-step{
  min-height:132px !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
}
.phase2-process-list::before{
  top:22px !important;
  bottom:22px !important;
}
#solutions.home-dark-section{
  padding-top:62px !important;
  padding-bottom:62px !important;
}
#solutions .max-w-container-max > .grid:first-child{
  margin-bottom:64px !important;
}
@media(max-width:767px){
  .phase2-process-step{min-height:0 !important;padding-top:16px !important;padding-bottom:16px !important;}
  .phase2-process-stage{padding-bottom:38px !important;}
  #solutions.home-dark-section{padding-top:48px !important;padding-bottom:48px !important;}
  #solutions .max-w-container-max > .grid:first-child{margin-bottom:48px !important;}
}

/* 2) Hero video: visible atmosphere in BOTH themes, but always behind readable content. */
.home-hero video{
  opacity:.38 !important;
  filter:saturate(.62) contrast(1.04) brightness(.78) !important;
}
.home-hero-overlay{
  background:
    linear-gradient(90deg,rgba(11,15,25,.91) 0%,rgba(11,15,25,.76) 48%,rgba(11,15,25,.45) 100%),
    linear-gradient(180deg,rgba(11,15,25,.08),rgba(11,15,25,.78)) !important;
}
[data-theme="light"] .home-hero{
  background:#FDFDFC !important;
}
[data-theme="light"] .home-hero video{
  opacity:.30 !important;
  filter:saturate(.58) contrast(.96) brightness(1.03) !important;
}
[data-theme="light"] .home-hero-overlay{
  background:
    linear-gradient(90deg,rgba(253,253,252,.91) 0%,rgba(253,253,252,.78) 48%,rgba(247,244,239,.52) 100%),
    linear-gradient(180deg,rgba(253,253,252,.06),rgba(253,253,252,.70)) !important;
}
[data-theme="light"] .home-hero-title{color:#1A1D20 !important;}
[data-theme="light"] .home-hero-lead{color:#4A4F54 !important;}
[data-theme="light"] .home-hero-eyebrow{color:#44403C !important;}
[data-theme="light"] .home-hero-proof span{color:#4A4F54 !important;}
[data-theme="light"] .home-hero-proof b{color:#1C1917 !important;}

/* 3) One restrained background-effect system: animated editorial gradient + dot field.
      It only animates background-position, never element geometry or scroll position. */
.saas-section,
.phase2-section,
.service-page-shell > section,
#solutions.home-dark-section{
  position:relative;
  isolation:isolate;
}
.saas-section::before,
.phase2-section::before,
.service-page-shell > section::before,
#solutions.home-dark-section::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  display:block !important;
  opacity:.34 !important;
  background-image:
    radial-gradient(circle,rgba(231,229,228,.08) 0 1px,transparent 1.25px),
    linear-gradient(118deg,transparent 8%,rgba(224,122,95,.055) 31%,transparent 53%),
    linear-gradient(302deg,transparent 18%,rgba(82,183,136,.038) 47%,transparent 72%),
    linear-gradient(145deg,transparent 34%,rgba(139,94,131,.045) 57%,transparent 78%) !important;
  background-size:24px 24px,165% 165%,170% 170%,155% 155% !important;
  background-position:0 0,0% 20%,100% 80%,35% 50% !important;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent) !important;
  mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent) !important;
}
@media(prefers-reduced-motion:no-preference){
  .saas-section::before,
  .phase2-section::before,
  .service-page-shell > section::before,
  #solutions.home-dark-section::before{
    animation:aisEditorialAmbient 24s ease-in-out infinite alternate !important;
  }
}
@keyframes aisEditorialAmbient{
  0%{background-position:0 0,0% 18%,100% 82%,30% 50%;}
  100%{background-position:12px 8px,32% 32%,68% 60%,76% 44%;}
}

/* Remove old circular/orbit decoration from this homepage transition. */
#solutions > .absolute.rounded-full,
#solutions .abstract-ring,
#solutions .phase2-phone-stage::after,
#solutions .phase2-orbit{
  display:none !important;
}
#solutions .phase2-phone-stage{
  background:
    linear-gradient(145deg,rgba(18,24,38,.86),rgba(15,20,32,.94)) !important;
  border-color:rgba(231,229,228,.07) !important;
}

/* 4) Light mode receives its own quiet texture and readable surfaces. */
[data-theme="light"] .saas-section::before,
[data-theme="light"] .phase2-section::before,
[data-theme="light"] .service-page-shell > section::before,
[data-theme="light"] #solutions.home-dark-section::before{
  opacity:.26 !important;
  background-image:
    radial-gradient(circle,rgba(68,64,60,.12) 0 1px,transparent 1.25px),
    linear-gradient(118deg,transparent 8%,rgba(224,122,95,.095) 31%,transparent 53%),
    linear-gradient(302deg,transparent 18%,rgba(122,158,126,.075) 47%,transparent 72%),
    linear-gradient(145deg,transparent 34%,rgba(139,94,131,.055) 57%,transparent 78%) !important;
}
[data-theme="light"] #solutions.home-dark-section{
  background:#F7F4EF !important;
  color:#1C1917 !important;
  --text-primary:#1C1917;
  --text-secondary:#44403C;
  --text-muted:#78716C;
  --border:rgba(68,64,60,.12);
  --border-strong:rgba(68,64,60,.18);
}
[data-theme="light"] #solutions.home-dark-section h2,
[data-theme="light"] #solutions.home-dark-section h3,
[data-theme="light"] #solutions.home-dark-section h4,
[data-theme="light"] #solutions.home-dark-section .text-white{
  color:#1C1917 !important;
}
[data-theme="light"] #solutions.home-dark-section p,
[data-theme="light"] #solutions.home-dark-section [class*="text-white/"]{
  color:#44403C !important;
}
[data-theme="light"] #solutions .phase2-phone-stage{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(68,64,60,.12) !important;
  box-shadow:0 20px 55px rgba(68,64,60,.08) !important;
}
[data-theme="light"] #solutions .phase2-phone-card{
  background:rgba(255,255,255,.90) !important;
  border-color:rgba(68,64,60,.12) !important;
  color:#1C1917 !important;
  backdrop-filter:none !important;
}
[data-theme="light"] #solutions .phase2-phone-card small{color:#78716C !important;}

/* Keep no-JS and reduced-motion states fully visible. */
@media(prefers-reduced-motion:reduce){
  .saas-section::before,.phase2-section::before,.service-page-shell > section::before,#solutions.home-dark-section::before{animation:none !important;}
}


/* =========================================================
   FINAL PRODUCTION PASS — theme parity + accessible light hero
   Keeps layout and native scrolling unchanged.
   ========================================================= */

/* Light hero: keep video visible while preserving readable contrast. */
[data-theme="light"] .home-hero{
  background:#FDFDFC !important;
}
[data-theme="light"] .home-hero video{
  opacity:.34 !important;
  filter:saturate(.72) contrast(1.04) brightness(.97) !important;
}
[data-theme="light"] .home-hero-overlay{
  background:
    linear-gradient(90deg,rgba(253,253,252,.91) 0%,rgba(253,253,252,.78) 44%,rgba(253,253,252,.40) 72%,rgba(253,253,252,.16) 100%),
    linear-gradient(180deg,rgba(253,253,252,.06),rgba(253,253,252,.58)) !important;
}
[data-theme="light"] .home-hero-title{color:#1A1D20 !important;text-shadow:none !important;}
[data-theme="light"] .home-hero-lead{color:#4A4F54 !important;}
[data-theme="light"] .home-hero-eyebrow{color:#5E554F !important;}
[data-theme="light"] .home-hero-proof{color:#675F59 !important;}
[data-theme="light"] .home-hero-proof b{color:#1A1D20 !important;}
[data-theme="light"] .architecture-frame{background:rgba(255,255,255,.92) !important;border-color:rgba(28,25,23,.09) !important;box-shadow:0 28px 70px rgba(28,25,23,.12) !important;}
[data-theme="light"] .architecture-topline{color:#78716C !important;border-bottom-color:rgba(28,25,23,.08) !important;}
[data-theme="light"] .architecture-status{color:#57534E !important;}
[data-theme="light"] .architecture-core{background:#F7F4EF !important;border-color:rgba(28,25,23,.08) !important;}
[data-theme="light"] .architecture-core strong{color:#1C1917 !important;}
[data-theme="light"] .architecture-core small{color:#57534E !important;}
[data-theme="light"] .architecture-node{background:#FDFDFC !important;border-color:rgba(28,25,23,.08) !important;}
[data-theme="light"] .architecture-node b{color:#292524 !important;}
[data-theme="light"] .architecture-node span,[data-theme="light"] .architecture-node small{color:#78716C !important;}
[data-theme="light"] .architecture-stack{border-top-color:rgba(28,25,23,.08) !important;}
[data-theme="light"] .architecture-stack span{background:#F1F5F9 !important;color:#57534E !important;border-color:rgba(28,25,23,.07) !important;}

/* Service/supporting pages inherit the same mature typography and surface language. */
.service-page-shell,
.page-about-shell,
.page-contact-shell{font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
[data-theme="dark"] .service-page-shell,[data-theme="dark"] .page-about-shell,[data-theme="dark"] .page-contact-shell{background:#0B0F19 !important;}
[data-theme="dark"] .service-page-shell h1,[data-theme="dark"] .service-page-shell h2,[data-theme="dark"] .page-about-shell h1,[data-theme="dark"] .page-about-shell h2,[data-theme="dark"] .page-contact-shell h1,[data-theme="dark"] .page-contact-shell h2{color:#F4F4F5 !important;}
[data-theme="dark"] .service-page-shell h3,[data-theme="dark"] .service-page-shell h4,[data-theme="dark"] .page-about-shell h3,[data-theme="dark"] .page-contact-shell h3{color:#E7E5E4 !important;}
[data-theme="dark"] .service-page-shell p,[data-theme="dark"] .service-page-shell li,[data-theme="dark"] .page-about-shell p,[data-theme="dark"] .page-contact-shell p{color:#A8A29E !important;}
[data-theme="dark"] .service-page-shell [class*="bg-white"],[data-theme="dark"] .service-page-shell [class*="bg-slate-50"],[data-theme="dark"] .service-page-shell [class*="bg-gray-50"]{background-color:#121826 !important;}
[data-theme="dark"] .service-page-shell [class*="border-white"],[data-theme="dark"] .service-page-shell [class*="border-slate"]{border-color:rgba(244,244,245,.05) !important;}

[data-theme="light"] .service-page-shell,[data-theme="light"] .page-about-shell,[data-theme="light"] .page-contact-shell{background:#FDFDFC !important;color:#4A4F54 !important;}
[data-theme="light"] .service-page-shell h1,[data-theme="light"] .service-page-shell h2,[data-theme="light"] .page-about-shell h1,[data-theme="light"] .page-about-shell h2,[data-theme="light"] .page-contact-shell h1,[data-theme="light"] .page-contact-shell h2{color:#1A1D20 !important;}
[data-theme="light"] .service-page-shell h3,[data-theme="light"] .service-page-shell h4,[data-theme="light"] .page-about-shell h3,[data-theme="light"] .page-contact-shell h3{color:#292524 !important;}
[data-theme="light"] .service-page-shell p,[data-theme="light"] .service-page-shell li,[data-theme="light"] .page-about-shell p,[data-theme="light"] .page-contact-shell p{color:#4A4F54 !important;}
[data-theme="light"] .service-page-shell>section:nth-of-type(4n+1){background:#FDFDFC !important;}
[data-theme="light"] .service-page-shell>section:nth-of-type(4n+2){background:#F1F5F9 !important;}
[data-theme="light"] .service-page-shell>section:nth-of-type(4n+3){background:#F7F4EF !important;}
[data-theme="light"] .service-page-shell>section:nth-of-type(4n){background:#FDFDFC !important;}
[data-theme="light"] .service-page-shell .bg-\[var\(--bg-surface\)\],[data-theme="light"] .service-page-shell .dark-card{background:#FFFFFF !important;border-color:rgba(28,25,23,.08) !important;box-shadow:0 12px 32px rgba(28,25,23,.055) !important;}

/* Editorial SEO expansion blocks. */
.service-depth-section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.service-depth-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:48px;align-items:start;}
.service-depth-copy{max-width:760px;}
.service-depth-copy p+p{margin-top:16px;}
.service-depth-list{display:grid;gap:10px;}
.service-depth-item{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:18px;}
.service-depth-item strong{display:block;color:var(--text-h2-h3);margin-bottom:5px;font-size:14px;}
.service-depth-item span{color:var(--text-body);font-size:13px;line-height:1.55;}
[data-theme="light"] .service-depth-item{background:#fff;border-color:rgba(28,25,23,.08);}
[data-theme="light"] .service-depth-item strong{color:#292524;}
[data-theme="light"] .service-depth-item span{color:#57534E;}
@media(max-width:900px){.service-depth-grid{grid-template-columns:1fr;gap:28px;}}


/* Unified service conversion panels — predictable contrast in both themes. */
.service-cta{background:#0F172A !important;background-image:linear-gradient(120deg,rgba(224,122,95,.12),transparent 38%),linear-gradient(300deg,rgba(82,183,136,.08),transparent 40%) !important;border-top:1px solid rgba(244,244,245,.05) !important;}
.service-cta h2{color:#F4F4F5 !important;}
.service-cta p{color:#A8A29E !important;}
.service-cta a{border-color:rgba(244,244,245,.10);}
[data-theme="light"] .service-cta{background:#0F172A !important;background-image:linear-gradient(120deg,rgba(224,122,95,.14),transparent 38%),linear-gradient(300deg,rgba(82,183,136,.08),transparent 42%) !important;}
[data-theme="light"] .service-cta h2{color:#F4F4F5 !important;}
[data-theme="light"] .service-cta p{color:#A8A29E !important;}
[data-theme="light"] .service-cta .text-white,[data-theme="light"] .service-cta a.text-white{color:#F4F4F5 !important;}

/* Final light hero contrast guard — comes after all legacy overrides. */
html[data-theme="light"] .home-hero .home-hero-title{color:#1A1D20 !important;-webkit-text-fill-color:#1A1D20 !important;background:none !important;}
html[data-theme="light"] .home-hero .home-hero-lead{color:#4A4F54 !important;opacity:1 !important;}
html[data-theme="light"] .home-hero .home-hero-eyebrow{color:#5C534D !important;opacity:1 !important;}
html[data-theme="light"] .home-hero video{display:block !important;visibility:visible !important;opacity:.40 !important;filter:saturate(.78) contrast(1.06) brightness(.98) !important;}
html[data-theme="light"] .home-hero .home-hero-overlay{background:linear-gradient(90deg,rgba(253,253,252,.88) 0%,rgba(253,253,252,.70) 46%,rgba(253,253,252,.28) 76%,rgba(253,253,252,.08) 100%),linear-gradient(180deg,rgba(253,253,252,.03),rgba(253,253,252,.46)) !important;}

/* ============================================================
   FIX: LIGHT-MODE NAVBAR — SCROLLED STATE TEXT VISIBILITY
   Nav link text was white/transparent on the cream background.
   This block ensures dark readable text after scroll in light mode.
   ============================================================ */

/* Base nav links in light mode — always readable dark colour */
[data-theme="light"] #main-navbar a,
[data-theme="light"] #main-navbar button {
  color: #292524 !important;
}

/* After scroll: frosted cream background needs dark text */
[data-theme="light"] .navbar-scrolled {
  background-color: rgba(255, 253, 249, 0.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(30, 41, 59, 0.08) !important;
}

/* All text elements inside the scrolled navbar — dark in light mode */
[data-theme="light"] .navbar-scrolled a,
[data-theme="light"] .navbar-scrolled button,
[data-theme="light"] .navbar-scrolled span.material-symbols-outlined,
[data-theme="light"] #main-navbar.navbar-scrolled a,
[data-theme="light"] #main-navbar.navbar-scrolled button {
  color: #1c1917 !important;
}

/* Hover state — keep accent coral readable */
[data-theme="light"] #main-navbar.navbar-scrolled a:hover,
[data-theme="light"] #main-navbar.navbar-scrolled button:hover {
  color: #E07A5F !important;
}

/* Mobile menu button icon — also needs dark colour in light mode */
[data-theme="light"] #mobile-menu-btn span {
  color: #1c1917 !important;
}

/* ============================================================
   SECTION BACKGROUND EFFECTS — ULTRALIGHT CSS ONLY
   Pure CSS animations + SVG data-URI dot-grid patterns.
   Zero JavaScript, zero extra requests, zero layout shift.
   Respects prefers-reduced-motion and is hidden in dark mode.
   ============================================================ */

/* --- Shared keyframes (defined once, reused by all sections) --- */
@keyframes sg-drift-a {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes sg-drift-b {
  0%   { background-position: 100% 0%; }
  50%  { background-position: 0% 100%; }
  100% { background-position: 100% 0%; }
}

/* --- Utility: pseudo layer base --- */
.sg-fx { position: relative; isolation: isolate; overflow: hidden; }
.sg-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Content must sit above the decorative pseudo layer */
.sg-fx > * { position: relative; z-index: 1; }

/* ── 1. Digital Marketing section (#marketing)
       Effect: slow animated warm-coral/amber gradient wash           ── */
[data-theme="light"] #marketing.sg-fx::before {
  background:
    linear-gradient(
      135deg,
      rgba(224,122,95,.13) 0%,
      rgba(240,180,77,.09) 34%,
      rgba(255,255,255,0)  60%,
      rgba(142,90,139,.06) 88%,
      rgba(255,255,255,0)  100%
    );
  background-size: 280% 280%;
  animation: sg-drift-a 22s ease-in-out infinite;
}

/* ── 2. Why Choose AIScaleon section
       Effect: teal/sage + dot-grid overlay                           ── */
[data-theme="light"] .sg-why::before {
  background:
    /* dot grid */
    radial-gradient(circle, rgba(30,41,59,.055) 1px, transparent 1px),
    /* animated colour wash */
    linear-gradient(
      125deg,
      rgba(63,152,147,.09)  0%,
      rgba(255,255,255,0)   45%,
      rgba(121,165,141,.07) 75%,
      rgba(255,255,255,0)   100%
    );
  background-size: 28px 28px, 300% 300%;
  animation: sg-drift-b 26s ease-in-out infinite;
}

/* ── 3. Global Expertise section
       Effect: coral/gold diagonal gradient wash only                 ── */
[data-theme="light"] .sg-global::before {
  background:
    linear-gradient(
      155deg,
      rgba(214,168,95,.11) 0%,
      rgba(255,255,255,0)  40%,
      rgba(224,122,95,.08) 70%,
      rgba(255,255,255,0)  100%
    );
  background-size: 260% 260%;
  animation: sg-drift-a 30s ease-in-out infinite;
}

/* ── 4. Advanced Solutions / Connected Capabilities section
       Effect: purple/plum dot-grid + gentle gradient                 ── */
[data-theme="light"] .sg-advanced::before {
  background:
    radial-gradient(circle, rgba(30,41,59,.048) 1px, transparent 1px),
    linear-gradient(
      140deg,
      rgba(124,92,231,.08)  0%,
      rgba(255,255,255,0)   50%,
      rgba(214,168,95,.06)  80%,
      rgba(255,255,255,0)   100%
    );
  background-size: 24px 24px, 280% 280%;
  animation: sg-drift-b 24s ease-in-out infinite;
}

/* ── 5. Process section (phase2-process-stage)
       Effect: sage/green diagonal gradient                           ── */
[data-theme="light"] .sg-process::before {
  background:
    linear-gradient(
      115deg,
      rgba(121,165,141,.10) 0%,
      rgba(255,255,255,0)   45%,
      rgba(63,152,147,.07)  80%,
      rgba(255,255,255,0)   100%
    );
  background-size: 280% 280%;
  animation: sg-drift-a 28s ease-in-out infinite;
}

/* ── 6. CRM Bento / Business Outcomes section
       Effect: amber/coral diagonal + subtle dot grid                 ── */
[data-theme="light"] .sg-bento::before {
  background:
    radial-gradient(circle, rgba(30,41,59,.042) 1px, transparent 1px),
    linear-gradient(
      130deg,
      rgba(240,180,77,.10)  0%,
      rgba(255,255,255,0)   42%,
      rgba(215,90,135,.055) 76%,
      rgba(255,255,255,0)   100%
    );
  background-size: 32px 32px, 290% 290%;
  animation: sg-drift-b 20s ease-in-out infinite;
}

/* Dark mode: remove all decorative layers (they're for light only) */
html:not([data-theme="light"]) .sg-fx::before { display: none !important; }


/* Respect prefers-reduced-motion: keep the pattern but stop animation */
@media (prefers-reduced-motion: reduce) {
  .sg-fx::before {
    animation: none !important;
    background-size: 28px 28px, auto !important;
  }
}

/* ============================================================
   FIX: "WE DEAL IN" CARD HEADINGS — LIGHT MODE
   home-dark-section forces --text-primary:#fff but in light mode
   the card backgrounds become #ffffff (--bg-surface light value).
   White text on a white card = invisible headings.
   This block hard-codes dark ink on the white cards.
   ============================================================ */
[data-theme="light"] #solutions .grid h4 {
  color: #1c1917 !important;
}
[data-theme="light"] #solutions .grid p {
  color: #57534e !important;
}
[data-theme="light"] #solutions .grid > div {
  background-color: #ffffff !important;
  border-color: rgba(30,41,59,0.10) !important;
}

/* ============================================================
   CANVAS NET — z-index stacking for canvas-injected sections.
   The JS injects a canvas as the FIRST child of each section.
   Make sure the canvas stays BELOW real content.
   ============================================================ */
.sg-fx > canvas[aria-hidden],
#solutions > canvas[aria-hidden] {
  z-index: 0 !important;
  position: absolute !important;
}
.sg-fx > *:not(canvas) {
  position: relative;
  z-index: 1;
}
#solutions > div {
  position: relative;
  z-index: 1;
}

/* ================================================================
   COMPREHENSIVE LIGHT-MODE FIX PASS — Final override block
   Placed last so it beats every previously-set rule.
   Covers: home-dark-section, phase3 case cards, phone stage,
           tech stack boxes, visual-showcase dark edges, service pages.
   ================================================================ */

/* ── 1. home-dark-section: switch to light bg in light mode ─────────────
   Overrides the earlier rule (line ~2323) that kept it #0F172A.          */
[data-theme="light"] .home-dark-section {
  background: #f5f3ef !important;
  background-image: linear-gradient(135deg,rgba(224,122,95,.07),transparent 40%),
                    linear-gradient(315deg,rgba(121,165,141,.05),transparent 45%) !important;
  color: #1c1917 !important;
  /* re-pin CSS variables for child elements */
  --text-primary: #1c1917;
  --text-secondary: rgba(15,23,42,0.68);
  --text-muted:    rgba(15,23,42,0.44);
  --border:        rgba(30,41,59,0.08);
  --border-strong: rgba(30,41,59,0.14);
  --bg-surface:    #ffffff;
  --bg-elevated:   #f0ecf7;
}
[data-theme="light"] .home-dark-section h2,
[data-theme="light"] .home-dark-section h3,
[data-theme="light"] .home-dark-section h4 { color: #1c1917 !important; }
[data-theme="light"] .home-dark-section p,
[data-theme="light"] .home-dark-section small { color: #57534e !important; }
[data-theme="light"] .home-dark-section .text-white,
[data-theme="light"] .home-dark-section [class*="text-white"] { color: #1c1917 !important; }
[data-theme="light"] .home-dark-section [class*="text-white/60"],
[data-theme="light"] .home-dark-section [class*="text-white/70"] { color: #57534e !important; }
/* Section chip inside dark section — now light bg, dark text */
[data-theme="light"] .home-dark-section .section-chip {
  color: #334155 !important;
  background: rgba(255,255,255,0.74) !important;
  border-color: rgba(15,23,42,0.12) !important;
}
/* Cards inside home-dark-section: white surface */
[data-theme="light"] .home-dark-section .rounded-3xl,
[data-theme="light"] .home-dark-section .rounded-2xl,
[data-theme="light"] .home-dark-section .rounded-xl {
  background-color: #ffffff !important;
  border-color: rgba(30,41,59,0.09) !important;
}
[data-theme="light"] .home-dark-section .rounded-3xl h3,
[data-theme="light"] .home-dark-section .rounded-3xl h4,
[data-theme="light"] .home-dark-section .rounded-2xl h3,
[data-theme="light"] .home-dark-section .rounded-2xl h4 { color: #1c1917 !important; }
[data-theme="light"] .home-dark-section .rounded-3xl p,
[data-theme="light"] .home-dark-section .rounded-2xl p,
[data-theme="light"] .home-dark-section .rounded-xl p { color: #57534e !important; }
/* Tech grid tag pills */
[data-theme="light"] .home-dark-section .rounded-xl span { color: #292524 !important; }

/* ── 2. phase2-phone-stage: light glass card look in light mode ─────── */
[data-theme="light"] .phase2-phone-stage {
  background: linear-gradient(145deg,rgba(30,41,59,.04),rgba(121,165,141,.06)) !important;
  border-color: rgba(30,41,59,0.10) !important;
}
[data-theme="light"] .phase2-phone-stage::after {
  background: radial-gradient(circle,rgba(121,165,141,.18),transparent 68%) !important;
}
/* Orbit rings: softer in light mode */
[data-theme="light"] .phase2-orbit {
  border-color: rgba(30,41,59,.10) !important;
}
/* Floating phone cards: white glass */
[data-theme="light"] .phase2-phone-card {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(30,41,59,0.10) !important;
  color: #1c1917 !important;
}
[data-theme="light"] .phase2-phone-card b { color: #1c1917 !important; }
[data-theme="light"] .phase2-phone-card small { color: #78716c !important; }
[data-theme="light"] .phase2-phone-card .material-symbols-outlined { color: #7c5cff !important; }

/* ── 3. phase2-dark-points: remove dark box look in light mode ─────── */
[data-theme="light"] .phase2-dark-points > div {
  background: rgba(15,23,42,.035) !important;
  border-color: rgba(30,41,59,0.09) !important;
  backdrop-filter: none !important;
}
[data-theme="light"] .phase2-dark-points b { color: #1c1917 !important; }
[data-theme="light"] .phase2-dark-points small { color: #78716c !important; }
[data-theme="light"] .phase2-dark-points .material-symbols-outlined { color: #7c5cff !important; }

/* ── 4. home-tech-visual tag pills: readable in light mode ─────────── */
[data-theme="light"] .home-tech-visual > div span {
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(30,41,59,0.12) !important;
  color: #292524 !important;
}

/* ── 5. phase3-case-card: fix h3 + copy colour in light mode ───────── */
[data-theme="light"] .phase3-case-card { color: #1c1917 !important; }
[data-theme="light"] .phase3-case-card h3 { color: #1c1917 !important; }
[data-theme="light"] .phase3-case-card p  { color: #57534e !important; }
[data-theme="light"] .phase3-case-chips span {
  background: rgba(15,23,42,.06) !important;
  color: #292524 !important;
  border-color: rgba(30,41,59,.12) !important;
}
[data-theme="light"] .phase3-case-float {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(30,41,59,.14) !important;
  color: #1c1917 !important;
}
[data-theme="light"] .phase3-case-float i { background: #22c55e !important; }
[data-theme="light"] .phase3-text-link { color: #1c1917 !important; }

/* phase3 trust console */
[data-theme="light"] .phase3-trust-console {
  background: #ffffff !important;
  border-color: rgba(30,41,59,.09) !important;
}
[data-theme="light"] .phase3-trust-copy h3 { color: #1c1917 !important; }
[data-theme="light"] .phase3-trust-copy p  { color: #57534e !important; }
[data-theme="light"] .phase3-trust-signals > div {
  background: #f8f7f4 !important;
  border-color: rgba(30,41,59,.08) !important;
}
[data-theme="light"] .phase3-trust-signals b     { color: #1c1917 !important; }
[data-theme="light"] .phase3-trust-signals small { color: #78716c !important; }

/* ── 6. visual-showcase: remove dark purple tint in light mode ──────── */
[data-theme="light"] .visual-showcase {
  background: #ffffff !important;
  border-color: rgba(30,41,59,.10) !important;
  box-shadow: 0 22px 70px rgba(15,23,42,.08), inset 0 1px 0 rgba(0,0,0,.04) !important;
}

/* ── 7. Service pages — black side columns fix ──────────────────────── */
/* The service-page-shell sections can have dark bg bleeds on the sides.
   Force the section and its direct layout containers to light bg.       */
[data-theme="light"] .service-page-shell > section {
  background-color: var(--bg-base) !important;
}
/* Sections that inherit dark overrides explicitly */
[data-theme="light"] .service-page-shell > section.home-dark-section,
[data-theme="light"] .service-page-shell > section[class*="bg-[#17"] {
  background: #f5f3ef !important;
}

/* phase2-code-stage dark bg in light mode */
[data-theme="light"] .phase2-code-stage {
  background: linear-gradient(145deg,rgba(30,41,59,.04),rgba(121,165,141,.05)) !important;
  border-color: rgba(30,41,59,.10) !important;
}
[data-theme="light"] .phase2-code-stage::after { opacity: 0 !important; }

/* visual-shell dark bg in light mode */
[data-theme="light"] .phase2-visual-shell {
  background: linear-gradient(145deg,rgba(30,41,59,.04),rgba(121,165,141,.04)) !important;
  border-color: rgba(30,41,59,.09) !important;
}
[data-theme="light"] .phase2-visual-shell::after { opacity: 0 !important; }

/* Float cards inside visual-shell */
[data-theme="light"] .phase2-float-card {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(30,41,59,.10) !important;
  color: #1c1917 !important;
}
[data-theme="light"] .phase2-float-card b     { color: #1c1917 !important; }
[data-theme="light"] .phase2-float-card small { color: #78716c !important; }
[data-theme="light"] .phase2-float-card .material-symbols-outlined { color: #7c5cff !important; }

/* ── 8. phase2-bento-large: hardcoded dark gradient → light in light mode */
[data-theme="light"] .phase2-bento-large {
  background: linear-gradient(150deg,#e8f4fd,#f0e8ff) !important;
  color: #1c1917 !important;
}
[data-theme="light"] .phase2-bento-large p   { color: #57534e !important; }
[data-theme="light"] .phase2-bento-large .phase2-bento-kicker { color: #7c5cff !important; }
[data-theme="light"] .phase2-bento-large .phase2-metric strong { color: #1c1917 !important; }
[data-theme="light"] .phase2-bento-large .phase2-metric span   { color: #57534e !important; }
[data-theme="light"] .phase2-mini-chart i { background: linear-gradient(to top,#7c5cff,#e07a5f) !important; }

/* ── 9. phase2-browser-chrome: dark chrome header → light in light mode */
[data-theme="light"] .phase2-browser-chrome {
  background: rgba(30,41,59,0.06) !important;
  border-bottom-color: rgba(30,41,59,0.08) !important;
  color: #78716c !important;
}
[data-theme="light"] .phase2-browser-chrome i {
  background: rgba(30,41,59,0.18) !important;
}

/* ── 10. phase2-scanline: hide in light mode (dark-only effect) */
[data-theme="light"] .phase2-scanline { display: none !important; }

/* ── 11. phase2-status-pill: dark pill → light readable in light mode */
[data-theme="light"] .phase2-status-pill {
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(30,41,59,0.12) !important;
  color: #292524 !important;
}

/* ── 12. home-dark-section "We Deal In" border-t color fix */
[data-theme="light"] #solutions .border-t { border-color: rgba(30,41,59,0.10) !important; }

/* ── 13. phase2-dark-points — hide the box style entirely in light mode:
         show as simple clean list instead */
[data-theme="light"] .phase2-dark-points > div {
  border: none !important;
  background: transparent !important;
  padding: 8px 0 !important;
}

/* ================================================================
   GLOBAL LIGHT MODE HARDCODED DARK OVERRIDES
   Target hardcoded bg-[#0a0d1a], bg-[#080a14], bg-[#161b23] and
   associated text-white/text-slate classes across all templates.
   ================================================================ */

/* Hardcoded dark cards / boxes in service pages & subpages */
[data-theme="light"] [class*="bg-[#0a0d1a]"],
[data-theme="light"] [class*="bg-[#080a14]"],
[data-theme="light"] [class*="bg-[#161b23]"],
[data-theme="light"] [class*="bg-[#111318]"],
[data-theme="light"] .service-cta {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: rgba(30, 41, 59, 0.12) !important;
  color: #1c1917 !important;
}

/* Hardcoded text-white inside light mode */
[data-theme="light"] [class*="bg-[#0a0d1a]"] h1,
[data-theme="light"] [class*="bg-[#0a0d1a]"] h2,
[data-theme="light"] [class*="bg-[#0a0d1a]"] h3,
[data-theme="light"] [class*="bg-[#0a0d1a]"] h4,
[data-theme="light"] [class*="bg-[#0a0d1a]"] p,
[data-theme="light"] [class*="bg-[#0a0d1a]"] span,
[data-theme="light"] [class*="bg-[#0a0d1a]"] div,
[data-theme="light"] .service-cta h1,
[data-theme="light"] .service-cta h2,
[data-theme="light"] .service-cta h3,
[data-theme="light"] .service-cta p {
  color: #1c1917 !important;
}

[data-theme="light"] [class*="bg-[#0a0d1a]"] p,
[data-theme="light"] .service-cta p {
  color: #57534e !important;
}

/* Service CTA section background in light mode */
[data-theme="light"] .service-cta {
  background: linear-gradient(135deg, #fbfaf7 0%, #f3f0f7 100%) !important;
}

/* Dark CTA buttons inside service pages */
[data-theme="light"] a[class*="bg-[#0a0d1a]"] {
  background-color: var(--brand-orange) !important;
  color: #ffffff !important;
}
[data-theme="light"] a[class*="bg-[#0a0d1a]"]:hover {
  background-color: #d04a2f !important;
  color: #ffffff !important;
}

/* Header dropdowns & mobile menu panel in light mode */
[data-theme="light"] .absolute.top-full,
[data-theme="light"] [class*="w-[640px]"],
[data-theme="light"] [class*="w-[340px]"],
[data-theme="light"] .mobile-menu-panel {
  background-color: #ffffff !important;
  border-color: rgba(30, 41, 59, 0.12) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10) !important;
}
[data-theme="light"] .absolute.top-full .text-white,
[data-theme="light"] [class*="w-[640px]"] .text-white,
[data-theme="light"] [class*="w-[340px]"] .text-white,
[data-theme="light"] [class*="absolute top-full"] div[class*="text-white"],
[data-theme="light"] [class*="absolute top-full"] span[class*="text-white"],
[data-theme="light"] [class*="w-[640px]"] div[class*="text-white"],
[data-theme="light"] [class*="w-[640px]"] span[class*="text-white"] {
  color: #1e293b !important;
}
[data-theme="light"] .absolute.top-full .text-white\/60,
[data-theme="light"] .absolute.top-full .text-white\/70,
[data-theme="light"] [class*="w-[640px]"] .text-white\/60,
[data-theme="light"] [class*="w-[640px]"] .text-white\/70,
[data-theme="light"] [class*="w-[340px]"] .text-white\/60,
[data-theme="light"] [class*="w-[340px]"] .text-white\/70 {
  color: #64748b !important;
}
[data-theme="light"] .absolute.top-full a:hover,
[data-theme="light"] [class*="w-[640px]"] a:hover,
[data-theme="light"] [class*="w-[340px]"] a:hover {
  background-color: rgba(15, 23, 42, 0.05) !important;
}
[data-theme="light"] nav button {
  color: #334155 !important;
}
[data-theme="light"] nav button:hover {
  color: #0f172a !important;
}
[data-theme="light"] .mobile-menu-panel * {
  color: #1c1917 !important;
}
[data-theme="light"] .mobile-menu-panel .text-white\/60,
[data-theme="light"] .mobile-menu-panel .text-white\/70 {
  color: #57534e !important;
}

/* ================================================================
   FINAL OVERRIDE FOR CONVERSION, CONTACT FORM & FOOTER IN LIGHT MODE
   Convert all remaining dark blocks (Phase 3 conversion, contact panel,
   and footer) to light theme styling.
   ================================================================ */

/* Phase 3 Conversion ("Turn your digital stack into a growth system") */
[data-theme="light"] .phase3-conversion,
[data-theme="light"] .phase3-conversion-shell,
[data-theme="light"] .phase3-conversion-node {
  background: #f5f3ef !important;
  background-image: none !important;
  color: #1c1917 !important;
  border-color: rgba(30, 41, 59, 0.12) !important;
}
[data-theme="light"] .phase3-conversion h1,
[data-theme="light"] .phase3-conversion h2,
[data-theme="light"] .phase3-conversion h3,
[data-theme="light"] .phase3-conversion-copy h2,
[data-theme="light"] .phase3-conversion-copy h3,
[data-theme="light"] .phase3-conversion-shell h2,
[data-theme="light"] .phase3-conversion-shell h3,
[data-theme="light"] .phase3-conversion .text-white {
  color: #1c1917 !important;
}
[data-theme="light"] .phase3-conversion p,
[data-theme="light"] .phase3-conversion-copy p,
[data-theme="light"] .phase3-conversion-shell p,
[data-theme="light"] .phase3-conversion [class*="text-white"] {
  color: #57534e !important;
}

/* Phase 3 Contact Section & Brief Form ("Ready to scale your vision?") */
[data-theme="light"] .phase3-contact,
[data-theme="light"] .phase3-contact-shell,
[data-theme="light"] .phase3-contact-side,
[data-theme="light"] .phase3-form-panel {
  background: #ffffff !important;
  background-image: linear-gradient(135deg, #fbfaf7 0%, #f3f0f7 100%) !important;
  color: #1c1917 !important;
  border-color: rgba(30, 41, 59, 0.12) !important;
}
[data-theme="light"] .phase3-contact h1,
[data-theme="light"] .phase3-contact h2,
[data-theme="light"] .phase3-contact h3,
[data-theme="light"] .phase3-contact-side h2,
[data-theme="light"] .phase3-contact-side h3,
[data-theme="light"] .phase3-contact-side b,
[data-theme="light"] .phase3-form-panel label,
[data-theme="light"] .phase3-contact .text-white {
  color: #1c1917 !important;
}
[data-theme="light"] .phase3-contact p,
[data-theme="light"] .phase3-contact-side p,
[data-theme="light"] .phase3-contact-side small,
[data-theme="light"] .phase3-contact [class*="text-white"] {
  color: #57534e !important;
}
[data-theme="light"] .phase3-form-panel input,
[data-theme="light"] .phase3-form-panel textarea,
[data-theme="light"] .phase3-form-panel select {
  background-color: #ffffff !important;
  border-color: rgba(30, 41, 59, 0.18) !important;
  color: #1c1917 !important;
}

/* Footer Section ("AiScaleon - Scaling brands globally...") */
[data-theme="light"] footer,
[data-theme="light"] footer.bg-\[\#0d0f12\] {
  background-color: #f8f7f4 !important;
  background-image: none !important;
  color: #1c1917 !important;
  border-top-color: rgba(30, 41, 59, 0.12) !important;
}
[data-theme="light"] footer h1,
[data-theme="light"] footer h2,
[data-theme="light"] footer h3,
[data-theme="light"] footer h4,
[data-theme="light"] footer a,
[data-theme="light"] footer .text-white {
  color: #1c1917 !important;
}
[data-theme="light"] footer p,
[data-theme="light"] footer span,
[data-theme="light"] footer li,
[data-theme="light"] footer div {
  color: #57534e !important;
}
[data-theme="light"] footer a:hover {
  color: #e07a5f !important;
}


/* ================================================================
   PUBLIC PRODUCTION AUDIT OVERRIDES (LIGHT MODE COMPREHENSIVE)
   Protects all remaining hardcoded elements from dark-bleed.
   ================================================================ */

[data-theme="light"] .phase3-system-core {
  background: linear-gradient(145deg, rgba(224, 122, 95, 0.12), rgba(255, 255, 255, 0.95)) !important;
  border-color: rgba(30, 41, 59, 0.14) !important;
  color: #1c1917 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .phase3-system-core b {
  color: #1c1917 !important;
}
[data-theme="light"] .phase3-system-core small {
  color: #57534e !important;
}

[data-theme="light"] .phase3-system-node {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(30, 41, 59, 0.12) !important;
  color: #1c1917 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .phase3-live-pill {
  border-color: rgba(30, 41, 59, 0.15) !important;
  color: #1c1917 !important;
}

[data-theme="light"] .phase3-btn-ghost {
  border-color: rgba(30, 41, 59, 0.20) !important;
  color: #1c1917 !important;
  background: rgba(30, 41, 59, 0.04) !important;
}
[data-theme="light"] .phase3-btn-ghost:hover {
  background: rgba(30, 41, 59, 0.08) !important;
}

[data-theme="light"] .phase3-conversion-grid {
  background-image: linear-gradient(rgba(30, 41, 59, 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(30, 41, 59, 0.04) 1px, transparent 1px) !important;
}


/* ================================================================
   FINAL AUDIT & HARDENING: PHASE 3 CASE CARDS & MEDIA PLATES
   Fixes phase3-case-card inner media background bleeds in light mode
   ================================================================ */

[data-theme="light"] .phase3-case-media {
  background: #f0ecf7 !important;
}
[data-theme="light"] .phase3-case-media:after {
  background: linear-gradient(180deg, transparent 55%, rgba(245, 243, 239, 0.45)) !important;
}

[data-theme="light"] .phase3-contact-visual {
  background: #f0ecf7 !important;
  border-color: rgba(30, 41, 59, 0.12) !important;
}
[data-theme="light"] .phase3-contact-visual:after {
  background: linear-gradient(180deg, transparent, rgba(245, 243, 239, 0.55)) !important;
}

[data-theme="light"] .phase3-contact-status {
  background: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(30, 41, 59, 0.12) !important;
  color: #1c1917 !important;
}

[data-theme="light"] .phase3-case-eyebrow,
[data-theme="light"] .phase3-kicker {
  color: #7c5cff !important;
}


/* ================================================================
   SITE-WIDE WARM TYPOGRAPHY & LIGHT THEME CONTRAST GUARANTEE
   Replaces all white/pale text on light surfaces with warm dark ink,
   warm slate, and rich warm accents across every page.
   ================================================================ */

[data-theme="light"] {
  --text-primary: #1c1917 !important;
  --text-secondary: #4a4f54 !important;
  --text-muted: #64748b !important;
  --eng-heading: #1c1917 !important;
  --eng-body: #4a4f54 !important;
  --metal-platinum: #1c1917 !important;
  --ice-heading: #1c1917 !important;
}

/* Headings and display titles across all main content sections */
[data-theme="light"] main h1,
[data-theme="light"] main h2,
[data-theme="light"] main h3,
[data-theme="light"] main h4,
[data-theme="light"] main h5,
[data-theme="light"] main h6,
[data-theme="light"] main .font-display-xl,
[data-theme="light"] main .font-display-lg,
[data-theme="light"] main .font-headline-lg,
[data-theme="light"] main .font-headline-md,
[data-theme="light"] main [class*="font-display"],
[data-theme="light"] main [class*="font-headline"] {
  color: #1c1917 !important;
}

/* Paragraphs, list items, and body text */
[data-theme="light"] main p,
[data-theme="light"] main li,
[data-theme="light"] main .font-body-lg,
[data-theme="light"] main .font-body-md {
  color: #4a4f54 !important;
}

/* Override all legacy white text classes on light surfaces */
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-white,
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-\[\#F4F4F5\],
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-\[\#E7E5E4\],
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-slate-100,
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-slate-200,
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-gray-100,
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-gray-200 {
  color: #1c1917 !important;
}

[data-theme="light"] main section:not(#contact):not(.phase3-conversion) [class*="text-white/"],
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-\[\#A8A29E\],
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-\[\#78716C\],
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-slate-300,
[data-theme="light"] main section:not(#contact):not(.phase3-conversion) .text-slate-400 {
  color: #4a4f54 !important;
}

/* Warm, high-contrast gradient accents for highlighted heading spans */
[data-theme="light"] .heading-accent-terracotta {
  background-image: linear-gradient(100deg, #1c1917 0%, #d0694e 45%, #e07a5f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

[data-theme="light"] .heading-accent-coral {
  background-image: linear-gradient(100deg, #1c1917 0%, #d96c75 45%, #e07a5f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

[data-theme="light"] .heading-accent-aubergine {
  background-image: linear-gradient(100deg, #1c1917 0%, #8b5e83 45%, #6f3a78 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

[data-theme="light"] .heading-accent-gold {
  background-image: linear-gradient(100deg, #1c1917 0%, #c4974f 45%, #d6a85f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

[data-theme="light"] .heading-accent-sage {
  background-image: linear-gradient(100deg, #1c1917 0%, #4e6e53 45%, #7a9e7e 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Cards & Bento items in light mode */
[data-theme="light"] .clay-glass-card,
[data-theme="light"] .dark-card,
[data-theme="light"] .crm-service-card,
[data-theme="light"] .phase2-bento,
[data-theme="light"] .phase2-feature-card,
[data-theme="light"] .phase2-process-step {
  background: #ffffff !important;
  color: #1c1917 !important;
  border-color: rgba(30, 41, 59, 0.12) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .clay-glass-card h1,
[data-theme="light"] .clay-glass-card h2,
[data-theme="light"] .clay-glass-card h3,
[data-theme="light"] .clay-glass-card h4,
[data-theme="light"] .dark-card h1,
[data-theme="light"] .dark-card h2,
[data-theme="light"] .dark-card h3,
[data-theme="light"] .dark-card h4,
[data-theme="light"] .phase2-process-step h3 {
  color: #1c1917 !important;
}

[data-theme="light"] .clay-glass-card p,
[data-theme="light"] .dark-card p,
[data-theme="light"] .phase2-process-step p {
  color: #4a4f54 !important;
}

[data-theme="light"] .phase2-process-step > span {
  background: #ffffff !important;
  color: #e07a5f !important;
  border-color: rgba(224, 122, 95, 0.3) !important;
}

[data-theme="light"] .phase2-process-step small {
  color: #d0694e !important;
}

/* Section chips & pill badges in light mode */
[data-theme="light"] .section-chip,
[data-theme="light"] .service-kicker,
[data-theme="light"] .phase2-micro,
[data-theme="light"] .phase3-eyebrow,
[data-theme="light"] .tech-label,
[data-theme="light"] .code-label {
  color: #d0694e !important;
  background: rgba(224, 122, 95, 0.10) !important;
  border-color: rgba(224, 122, 95, 0.22) !important;
}