/* VBoarder brand refresh - "Neon Horizon" (Nov 2026)
   Load AFTER site.css and light-theme.css. Changes no markup and no PHP.
   Rollback: remove this file's <link> from the page head.
   ------------------------------------------------------------------
   Part 1 - light-theme rules re-coloured from navy/steel to ink/violet
   ------------------------------------------------------------------ */
:root {
    --void: #ffffff;
    --void-soft: #F6F4FB;
    --panel: #ffffff;
    --panel-2: #F1EEF9;
    --paper: #F6F4FB;
    --paper-2: #ECE8F6;
    --paper-ink: #140B2B;
    --white: #140B2B;
    --muted: #4A4466;
    --muted-2: #5B5378;
    --line: #D9D4EA;
    --line-soft: #E6E2F2;
    --amber: #f6a623;
    --amber-dark: #d78b14;
    --cyan: #5A2FD0;
    --magenta: #5A2FD0;
    --success: #236349;
    --danger: #a12525;
    --shadow: 0 10px 28px rgba(20, 11, 43, 0.08);
}
html, body { background: #fff; color: #2A2340; }
body { font-size: 18px; }
h1, h2, h3, .display { color: #140B2B; font-family: "Barlow", "Segoe UI", Arial, sans-serif; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
h1, .page-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.1rem); max-width: 850px; margin-bottom: 22px; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.3rem; line-height: 1.3; }
.accent, .eyebrow, .section-paper .eyebrow, .section-paper .accent,
.card-link, .service-index, .breadcrumb a, .bento-number, th, .contact-details a { color: #5A2FD0; }
.eyebrow { font-family: "Barlow", "Segoe UI", Arial, sans-serif; font-size: .875rem; letter-spacing: .08em; margin-bottom: 14px; }
.eyebrow::before, .section-paper .eyebrow::before { background: #FF2FC8; width: 24px; }
.lead { font-size: 1.15rem; line-height: 1.65; }
.section-paper .lead, .section-paper .muted { color: #4A4466; }
.fine-print, .form-note, .breadcrumb, .field label, .field legend { font-size: .9rem; }
.signal-bar { background: #EFEBF8; color: #3A2A7A; border-color: #E6E2F2; font-size: .875rem; letter-spacing: .07em; }
.signal-inner { min-height: 32px; }
.site-header, .site-footer {
    --white: #fff;
    --muted: #D9D2F0;
    --muted-2: #B9AEE0;
    --panel: #140B2B;
    --line-soft: #2A2145;
    background: #140B2B;
    color: #fff;
}
.site-header { backdrop-filter: none; border-bottom: 0; }
.header-inner { min-height: 78px; gap: 20px; }
.brand { color: #fff; }
.brand img { width: 44px; height: 44px; border: 0; border-radius: 3px; }
.brand-copy strong { font-family: "Barlow", "Segoe UI", Arial, sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; }
.brand-copy small { color: #CFC8E8; font-size: .75rem; letter-spacing: .08em; }
.primary-nav { font-family: "Barlow", "Segoe UI", Arial, sans-serif; font-size: .875rem; letter-spacing: 0; text-transform: none; gap: 18px; }
.primary-nav > a { color: #D9D2F0; }
.primary-nav > a:hover, .primary-nav > a[aria-current="page"] { color: #fff; }
.primary-nav > a.button { color: #140B2B; }
.menu-toggle { background: #1A1230; border-color: #5B4E8A; color: #fff; }
.button, .button-small { min-height: 46px; padding: 11px 20px; font-family: "Barlow", "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; border-radius: 5px; box-shadow: none; color: #140B2B; }
.button:hover { transform: none; box-shadow: none; background: #ffc05d; }
.button-ghost { border-color: #A79FC4; color: #140B2B; background: #fff; }
.button-ghost:hover { background: #F1EEF9; }
.button-light { border-color: #f6a623; background: #f6a623; color: #140B2B; }
.hero { background: #fff; }
.hero::before, .page-hero::after, .brand-panel::before, .brand-panel::after { display: none; }
.hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(270px, .65fr); gap: 54px; min-height: 0; padding-block: 54px 44px; }
.hero-copy .lead { max-width: 650px; }
.hero-actions { margin-top: 24px; gap: 12px; }
.proof-line { margin-top: 24px; padding-top: 18px; gap: 8px 20px; font-size: .875rem; letter-spacing: 0; text-transform: none; }
.proof-line span::before { border: 0; background: #D9D4EA; border-radius: 50%; }
.hero-summary { padding: 28px; background: #F6F4FB; border: 1px solid #E6E2F2; border-top: 3px solid #FF2FC8; border-radius: 6px; }
.hero-summary h2 { font-size: 1.6rem; }
.hero-summary ul { list-style: none; padding: 0; margin: 0; }
.hero-summary li { padding: 12px 0; border-top: 1px solid #E6E2F2; }
.hero-summary li strong { display: block; font-size: 1rem; color: #140B2B; }
.hero-summary li span { display: block; font-size: .95rem; color: #4A4466; }
.section { padding-block: 66px; }
.home #services { padding-top: 42px; background: #F6F4FB; }
.section-head { gap: 36px; margin-bottom: 30px; }
.section-compact { padding-block: 50px; }
.page-hero { padding-block: 54px; background: #fff; }
.page-hero .breadcrumb { margin-bottom: 22px; }
.project-cards { margin-top: 0; align-items: stretch; }
.workflow-card { background: #fff; border: 1px solid #D9D4EA; padding: 28px; border-radius: 6px; }
.workflow-card:nth-child(2), .workflow-card:nth-child(3) { border-left-color: #D9D4EA; }
.project-card .card-link { position: static; inset: auto; margin-top: auto; padding-top: 18px; font-family: "Barlow", "Segoe UI", Arial, sans-serif; text-transform: none; font-size: .95rem; letter-spacing: 0; }
.project-card p { font-size: 1rem; }
.project-card .eyebrow { font-size: .875rem; }
.project-card .eyebrow::before { display: none; }
.card-link:hover, .paper .card-link:hover, .amber-card .card-link:hover { color: #140B2B; }
.sector-links { font-size: .95rem; gap: .5rem 1.1rem; }
.bento-card, .bento-card.paper, .method-step, .sticky-card, .status-card, .contact-details { background: #fff; border-color: #D9D4EA; border-radius: 6px; }
.method-step { padding: 26px; }
.method-step::before { margin-bottom: 20px; color: #5B5378; font-size: 1.5rem; }
.ownership-band { padding: 34px; gap: 36px; border-color: #E6E2F2; background: #F6F4FB; border-radius: 6px; }
.ownership-points div { background: #fff; }
.ownership-points strong { color: #140B2B; }
.ownership-points span { font-size: .95rem; }
.brand-panel { max-width: 260px; justify-self: center; padding: 14px; background: #140B2B; border: 0; border-radius: 6px; box-shadow: none; }
.panel-label { color: #CFC8E8; border-color: #2A2145; font-size: .8rem; letter-spacing: 0; }
.hero-note, .disclosure { background: #F1EEF9; border-color: #D9D4EA; color: #4A4466; }
.disclosure strong { color: #140B2B; }
.status-pill { font-size: .875rem; border-color: #a5c7b9; color: #236349; background: #f1f8f4; }
.status-pill::before { display: none; }
.demo-shell { background: #fff; border-color: #D9D4EA; border-radius: 6px; overflow: hidden; box-shadow: none; }
.demo-head { background: #EFEBF8; color: #140B2B; font-size: .875rem; letter-spacing: .03em; }
.demo-lights { display: none; }
.demo-progress { background: #E6E2F2; }
.demo-progress span { background: #5A2FD0; }
.demo-question select, .demo-question textarea, .demo-question input[type="text"], .demo-option,
.field input, .field select, .field textarea { background: #fff; color: #2A2340; border-color: #A79FC4; border-radius: 4px; }
.demo-question legend { color: #140B2B; }
.demo-option:hover, .demo-option[aria-pressed="true"] { color: #140B2B; background: #F1EEF9; border-color: #5A2FD0; }
.demo-option:has(input:checked) { background: #EFEBF8; border-color: #5A2FD0; }
.demo-question p { color: #8f2727; font-size: .875rem; }
.demo-question-meta { font-size: .875rem; }
.demo-voice { border-color: #A79FC4; color: #5A2FD0; }
.demo-summary { background: #F1EEF9; border-color: #5A2FD0; }
.faq-list summary::after { color: #5A2FD0; }
.territory-board { background: #F1EEF9; }
.territory-board::before, .territory-board::after { border-color: #D9D4EA; }
.map-point { color: #4A4466; font-size: .875rem; }
.map-point.primary { color: #140B2B; }
.contact-form { background: #F6F4FB; box-shadow: none; border-color: #D9D4EA; border-radius: 6px; }
.form-note { color: #4A4466; }
.closing-cta { background: #EFEBF8; border-color: #E6E2F2; padding-block: 54px; }
.footer-heading { color: #f6a623; font-size: .875rem; }
.site-footer p, .footer-links a, .footer-phone, .footer-bottom { font-size: .9rem; }
.site-footer .brand-copy small { color: #CFC8E8; }
@media (max-width:1120px) { .primary-nav { gap:14px; font-size:.875rem; } }
@media (max-width:900px) {
    .hero-grid { grid-template-columns: 1fr; gap:26px; padding-block:40px; }
    .hero-summary { max-width:none; }
    .hero-summary ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
    .primary-nav { background:#140B2B; }
    .primary-nav > a:not(.button) { font-size:1rem; }
    .section-head { gap:16px; }
}
@media (max-width:620px) {
    h1, .page-hero h1 { font-size:clamp(2.1rem,9vw,3rem); }
    h2 { font-size:1.8rem; }
    .section, .page-hero { padding-block:44px; }
    .hero-summary { padding:22px; }
    .hero-summary ul { grid-template-columns:1fr; gap:0; }
    .brand-copy small { font-size:.75rem; }
    .brand img { width:40px; height:40px; }
    .button { max-width:100%; }
    .ownership-band { padding:24px; }
    .detail-grid { gap:30px; }
    .project-card .card-link { position:static; }
    .map-point { font-size:.8rem; letter-spacing:0; }
}

/* ------------------------------------------------------------------
   Part 2 - Neon Horizon brand layer (new rules)
   ------------------------------------------------------------------ */
:root {
    --vb-night: #0B0716;
    --vb-ink: #140B2B;
    --vb-violet: #5A2FD0;
    --vb-violet-bright: #8A5CFF;
    --vb-cyan: #22E4FF;
    --vb-magenta: #FF2FC8;
    --vb-sun: #FFD84A;
    --vb-sun-deep: #FF9F3D;
    --vb-lilac: #CFC8E8;
    --vb-stripe: linear-gradient(90deg, #22E4FF 0 25%, #8A5CFF 25% 50%, #FF2FC8 50% 75%, #FF8A3D 75% 100%);
    --radius: 12px;
}

/* Type: heavier condensed headlines, like the sales flyer */
h1, h2, .display {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.02;
}
h1, .page-hero h1 { font-size: clamp(2.9rem, 5.6vw, 5rem); max-width: 900px; }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); }
.hero-summary h2, .status-card h2, .sticky-card h2 { font-size: 1.9rem; }
.eyebrow { font-weight: 700; letter-spacing: .12em; }
.eyebrow::before, .section-paper .eyebrow::before { background: var(--vb-magenta); height: 3px; width: 26px; }
::selection { background: var(--vb-violet-bright); color: #fff; }

/* Header and footer: night sky with the logo lockup */
.site-header, .site-footer {
    --white: #fff;
    --muted: #D9D2F0;
    --muted-2: #B9AEE0;
    --panel: #140B2B;
    --line-soft: #2A2145;
    background: var(--vb-night);
    color: #fff;
}
.site-header {
    background: radial-gradient(42rem 12rem at 8% 130%, rgba(255, 47, 200, .24), transparent 70%), var(--vb-night);
}
.site-header::after {
    content: "";
    position: absolute;
    right: 0; bottom: -4px; left: 0;
    height: 4px;
    background: var(--vb-stripe);
}
.header-inner { min-height: 84px; }
.site-header :focus-visible, .site-footer :focus-visible, .home .hero :focus-visible, .closing-cta :focus-visible { outline-color: var(--vb-cyan); }

/* The logo is one vector lockup. The old image and text stay in the page for screen readers. */
.brand {
    position: relative;
    display: block;
    width: 259px;
    height: 60px;
    background: url("/assets/brand/vboarder-logo-horizontal.svg") left center / contain no-repeat;
}
.brand > img, .brand > .brand-copy {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.site-footer .brand { width: 300px; height: 70px; margin-bottom: 18px; }

.primary-nav > a { color: #D9D2F0; }
.primary-nav > a:not(.button)::after { background: linear-gradient(90deg, var(--vb-cyan), var(--vb-magenta)); height: 3px; }
.primary-nav > a.button { color: var(--vb-ink); }
.menu-toggle { background: #1A1230; border-color: #5B4E8A; color: #fff; border-radius: 8px; }

/* Buttons: the sun from the logo */
.button, .button-small, .button-light {
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--vb-sun) 0%, var(--vb-sun-deep) 100%);
    color: var(--vb-ink);
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 18px rgba(255, 138, 61, .28);
}
.button:hover, .button-light:hover { background: linear-gradient(180deg, #FFE270 0%, #FFB45C 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 8px 22px rgba(255, 138, 61, .36); }
.button-ghost { border: 1.5px solid #A79FC4; background: #fff; color: var(--vb-ink); box-shadow: none; }
.button-ghost:hover { background: #F1EEF9; border-color: var(--vb-violet); box-shadow: none; }

/* Home hero: dark, with the horizon grid */
.home .hero {
    background: var(--vb-night) url("/assets/brand/horizon-hero.svg") center bottom / cover no-repeat;
    border-bottom: 0;
    color: #F5F2FF;
}
.home .hero h1 { color: #fff; }
.home .hero .accent { color: var(--vb-cyan); }
.home .hero .eyebrow { color: var(--vb-cyan); }
.home .hero .lead { color: #DAD4EE; }
.home .hero .proof-line { color: #CFC8E8; border-top-color: rgba(255, 255, 255, .16); }
.home .hero .proof-line span::before { background: var(--vb-magenta); }
.home .hero .button-ghost { background: rgba(11, 7, 22, .55); border-color: rgba(255, 255, 255, .45); color: #fff; }
.home .hero .button-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.home .hero .hero-summary {
    background: rgba(20, 11, 43, .78);
    border: 1px solid rgba(255, 255, 255, .16);
    border-top: 4px solid var(--vb-sun-deep);
    border-radius: 14px;
    backdrop-filter: blur(6px);
}
.home .hero .hero-summary h2, .home .hero .hero-summary li strong { color: #fff; }
.home .hero .hero-summary .eyebrow { color: var(--vb-sun); }
.home .hero .hero-summary li { border-top-color: rgba(255, 255, 255, .14); }
.home .hero .hero-summary li span { color: #CFC8E8; }
.hero-grid { padding-block: 64px 72px; }

/* Cards and panels: rounder, lilac lines, violet on hover */
.workflow-card, .bento-card, .bento-card.paper, .method-step, .sticky-card, .status-card, .contact-details,
.demo-shell, .contact-form, .ownership-band, .hero-summary, .hero-note, .disclosure, .faq-list details { border-radius: 14px; }
.workflow-card { transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.workflow-card:hover { border-color: var(--vb-violet-bright); box-shadow: 0 14px 34px rgba(90, 47, 208, .12); transform: translateY(-2px); }
.hero-summary { border-top: 4px solid var(--vb-violet-bright); }
.method-step::before, .bento-number, .service-index { color: var(--vb-violet); font-weight: 700; }
.ownership-points div { border-radius: 10px; }
.brand-panel { background: var(--vb-night); border-radius: 16px; padding: 12px; box-shadow: 0 18px 44px rgba(20, 11, 43, .22); }
.brand-panel img { border-radius: 10px; }
.panel-label { color: #CFC8E8; border-color: #2A2145; }
.demo-question select, .demo-question textarea, .demo-question input[type="text"], .demo-option,
.field input, .field select, .field textarea { border-radius: 8px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--vb-violet); }

/* Closing call-to-action: the flyer's dark band */
.closing-cta {
    background: var(--vb-night) url("/assets/brand/horizon-band.svg") center bottom / cover no-repeat;
    border: 0;
    padding-block: 72px 84px;
    color: #F5F2FF;
}
.closing-cta h2 { color: #fff; }
.closing-cta .eyebrow { color: var(--vb-cyan); }
.closing-cta .accent { color: var(--vb-cyan); }
.closing-cta p, .closing-cta .lead, .closing-cta .muted { color: #DAD4EE; }

/* Footer */
.site-footer { background: var(--vb-night); border-top: 4px solid transparent; border-image: var(--vb-stripe) 1; }
.footer-heading { color: var(--vb-sun-deep); }
.site-footer .brand-copy small { color: #CFC8E8; }

@media (max-width: 1180px) {
    .brand { width: 216px; height: 50px; }
}
@media (max-width: 900px) {
    .primary-nav { background: var(--vb-night); border-top: 1px solid #2A2145; }
    .hero-grid { padding-block: 44px 56px; }
}
@media (max-width: 620px) {
    h1, .page-hero h1 { font-size: clamp(2.5rem, 11vw, 3.4rem); }
    h2 { font-size: 2.1rem; }
    .header-inner { min-height: 68px; }
    /* under 240 px the descriptor is unreadable: switch to the compact lockup */
    .site-header .brand { width: 208px; height: 40px; background-image: url("/assets/brand/vboarder-logo-compact.svg"); }
    .site-footer .brand { width: 259px; height: 60px; }
    .closing-cta { padding-block: 52px 64px; }
}
@media (prefers-reduced-motion: reduce) {
    .workflow-card { transition: none; }
    .workflow-card:hover { transform: none; }
}
@media print {
    .site-header, .site-footer, .home .hero, .closing-cta { background: #fff !important; color: #000 !important; }
    .brand { background-image: url("/assets/brand/vboarder-logo-horizontal-light-bg.svg"); }
}