/* ==========================================================================
   VYTRION "CLEAR NAVY" THEME (light, minimalist)
   Loaded AFTER style.css. To revert to the previous dark theme, remove the
   <link ... assets/theme.css> line from pages (or restore the dark backup).
   Brand: navy #0D465E + orange #FF4912 (sampled from the Vytrion logo).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');

:root{
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ink:#0f2533;          /* primary text: deep navy-slate */
  --muted:#5a6b78;        /* secondary text */
  --paper:#f6f8fa;        /* page background: cool off-white */
  --white:#ffffff;
  --line:#e2e8ee;         /* hairlines */
  --tint:#edf3f7;         /* alternate section surface */
  --navy:#0d465e;         /* brand navy */
  --navy-2:#0a3447;       /* deeper navy for footer / sidebars */
  --accent:#ff4912;       /* brand orange: active states, highlights */
  --accent-ink:#c2410c;   /* orange tuned for text on light backgrounds */
  --blue:#0d465e; --night:#0d465e;
  --r:10px;               /* single radius scale */
}

/* ---------- Typography: one modern grotesk across the site ---------- */
body{font-family:var(--font)!important;background:var(--paper)!important;color:var(--ink);font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display,.agent-col h3,.agent-step b,.article .callout,.article h2,.article h3,.article-index h3,
.authority td:first-child,.blog-count,.dir-card .water,.dir-card h3,.e2e-top h3,.fake-main h3,.feature-copy h3,
.feature-item h3,.flowx-title,.hero h1,.insight-featured h2,.l2 b,.pagehero .ghostword,.pagehero h1,.post h3,
.post-img:after,.statement blockquote,.topic h3,.uc h3,.unity-concept b,.usecase h3,.value b,.workspace-title{
  font-family:var(--font)!important;letter-spacing:-.025em}
.display{font-weight:600!important;letter-spacing:-.035em!important;color:var(--ink)}
.hero h1,.pagehero h1{font-weight:600!important;letter-spacing:-.045em!important;line-height:1!important;font-size:clamp(46px,6vw,88px)!important}
.dir-card h3,.topic h3,.feature-item h3,.usecase h3,.agent-col h3,.uc h3,.post h3,.article-index h3{font-weight:600!important;letter-spacing:-.02em}
.workspace-title,.fake-main h3,.flowx-title,.e2e-top h3{font-weight:600!important}
.lead,.topic p,.dir-card p,.feature-item p,.solution-group-head p{color:var(--muted)!important}
p{line-height:1.65}

/* ---------- Eyebrows / section labels: single accent ---------- */
.section-no,.eyebrow,.workspace-kicker,.dark .section-no,.dark .eyebrow,.dark .workspace-kicker{color:var(--accent-ink)!important}

/* ---------- Navigation: light, frosted ---------- */
.nav{background:rgba(255,255,255,.82)!important;color:var(--ink)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:saturate(160%) blur(16px)}
.nav a{color:var(--ink)}
.navlinks a{opacity:.8;transition:opacity .2s}.navlinks a:hover{opacity:1}
.navcta{background:var(--navy);color:#fff!important;border:0!important;border-radius:999px;padding:11px 20px!important;font-weight:600;transition:background .25s,transform .2s}
.navcta:hover{background:var(--accent)}
.navcta:active,.btn:active{transform:translateY(1px)}

/* ---------- Buttons ---------- */
.btn{background:var(--navy)!important;color:#fff!important;border-radius:999px;padding:14px 22px!important;font-size:14px!important;font-weight:600!important;transition:background .25s}
.btn:hover{background:var(--accent)!important}
.btn.ghost{background:transparent!important;color:var(--navy)!important;border:1px solid rgba(13,70,94,.35)!important}
.btn.ghost:hover{border-color:var(--navy)!important;background:rgba(13,70,94,.06)!important}

/* ---------- Home hero: light with soft brand wash ---------- */
.hero{background:var(--paper)!important;color:var(--ink)!important;min-height:88vh!important}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 70% at 85% 20%,rgba(13,70,94,.10),transparent 60%),radial-gradient(40% 50% at 70% 90%,rgba(255,73,18,.08),transparent 60%)}
.hero-img{opacity:1!important;left:38%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%);border-radius:0}
.hero:after{background:linear-gradient(90deg,var(--paper) 0,rgba(246,248,250,.92) 38%,rgba(246,248,250,.15) 75%,rgba(246,248,250,0) 100%),linear-gradient(0deg,var(--paper),transparent 30%)!important}
.hero p,.pagehero p{color:var(--muted)!important}
.orbit{border-color:rgba(13,70,94,.14)!important;z-index:1}
.orbit:after{background:var(--accent)!important;box-shadow:0 0 18px rgba(255,73,18,.55)!important}

/* ---------- Inner page hero ---------- */
.pagehero{background:var(--paper)!important;color:var(--ink)!important;min-height:58vh!important;padding-top:150px!important;border-bottom:1px solid var(--line)}
.pagehero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 80% at 90% 10%,rgba(13,70,94,.09),transparent 60%),radial-gradient(35% 60% at 75% 100%,rgba(255,73,18,.07),transparent 60%)}
.pagehero .ghostword{color:rgba(13,70,94,.045)!important;font-weight:700}
.modulehero{min-height:58vh!important}

/* ---------- Former "dark" bands become a soft navy tint ---------- */
.dark{background:var(--tint)!important;color:var(--ink)!important}
.dark .lead,.dark p,.stage p,.agent-col p,.usecase p,.wf-row p,.value span,.value small,.usecase .domain,
.authority th,.insight-featured .date{color:var(--muted)!important}
.dark .display,.dark h2,.dark h3{color:var(--ink)}
.usecase,.wf-row,.workflow{border-color:#d3dde5!important}
.wf-node{border-color:#c4d1db!important;background:#fff}
.chip{border-color:#c4d1db!important;border-radius:999px;color:var(--ink)}
.chip.module-link:hover{border-color:var(--navy)!important;background:var(--navy)!important;color:#fff!important}
.yes{color:var(--navy)!important}

/* ---------- Brand bands ---------- */
.marquee{background:#fff!important;color:var(--navy)!important;border-color:var(--line)!important}
.marquee i{color:var(--accent)}
.statement{background:var(--navy)!important;color:#fff!important}
.pulse{background:linear-gradient(90deg,transparent,var(--accent),transparent)!important;background-size:35% 100%!important}

/* ---------- Cards & surfaces ---------- */
.dir-card{background:#fff!important;border-radius:var(--r)}
.dir-card:hover{box-shadow:0 14px 34px rgba(13,70,94,.10)}
.dir-card .water{color:rgba(13,70,94,.08)!important;font-weight:700}
.directory{background:transparent!important;gap:14px!important}
.feature{border-radius:var(--r)}
.arch-row .label,.insight-featured .primary{background:var(--navy)!important}
.blog-count{color:rgba(13,70,94,.12)!important}

/* ---------- Module explorer ---------- */
.module-ui{background:var(--tint)!important;border-radius:var(--r)}
.fakeapp{border-radius:var(--r);overflow:hidden;box-shadow:0 20px 60px rgba(13,70,94,.10)!important}
.fake-side{background:var(--navy-2)!important}
.fake-side button.active:before{background:var(--accent)!important}
.metric{border-color:var(--line)!important;border-radius:8px}
.flowx{border-radius:var(--r);background:#fbfcfd!important}
.flowx-head span{color:var(--accent-ink)!important}
.flowx-fill{background:linear-gradient(90deg,var(--navy),var(--accent))!important}
.flowx-step.done .flowx-dot{background:#e6eff4!important;border-color:var(--navy)!important;color:var(--navy)!important}
.flowx-step.active .flowx-dot{background:var(--navy)!important;border-color:var(--navy)!important;box-shadow:0 0 0 6px rgba(255,73,18,.16)!important}
.flowx-step:hover .flowx-dot{border-color:var(--navy)!important;color:var(--navy)!important}
.flowx-detail{border-left-color:var(--accent)!important;border-radius:0 8px 8px 0}
.flowx-nav button{border-radius:999px}
.flowx-nav button:hover{background:var(--navy)!important;border-color:var(--navy)!important}

/* ---------- Contact form ---------- */
.cform{border-radius:var(--r)}
.cform input,.cform select,.cform textarea{border-radius:8px!important;background:#fff!important}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline-color:var(--navy)!important}
.cform button{background:var(--navy)!important;border-radius:999px}
.cform button:hover{background:var(--accent)!important}
.contact-aside .detail small{color:var(--accent-ink)!important}

/* ---------- Footer: deep brand navy ---------- */
footer{background:var(--navy-2)!important;color:#b7c8d4!important}
footer a{color:#dce7ee}footer a:hover{color:#fff}
.footer h4{color:#fff!important}
footer .fine{border-color:rgba(255,255,255,.12)!important;color:#8fa7b6}

/* ---------- Logo on light nav ---------- */
.brand-logo img{filter:none}

@media(prefers-reduced-motion:reduce){.hero-img,.orbit{animation:none!important}}

/* e2e labels in theme colours */
.e2e-top small,.e2e-out small,.e2e-desc small{color:var(--accent-ink)!important}
.e2e-out li::before{color:var(--navy)!important}
.e2e-detail{background:#f7fafc!important}
.pagehero .ghostword{color:rgba(13,70,94,.035)!important}
.workspace-actions a{border-radius:999px!important;border-color:#c4d1db!important;padding:10px 16px!important}
.workspace-actions a:hover{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
.section-no{text-transform:uppercase;letter-spacing:.14em}
.cta-inner .btn.cta-btn{background:var(--accent)!important;color:#fff!important;padding:16px 26px!important;font-size:15px!important}
.cta-inner .btn.cta-btn:hover{background:#fff!important;color:var(--navy)!important}
.cta-inner:after{background:radial-gradient(circle,rgba(255,73,18,.18),transparent 62%)!important}
.offices-title{color:var(--accent-ink)!important}
.feature.img-missing{background:linear-gradient(135deg,#0d465e,#0a3447 60%,#5a2a1c)!important}
.footer{grid-template-columns:1.6fr repeat(4,1fr)!important}@media(max-width:900px){.footer{grid-template-columns:1fr 1fr!important}}