/* hylosense — "Startup" direction, light variant. Loaded on top of index-startup.css. */

:root {
    --bg: #fbfaff;
    --bg-2: #f4f2fa;
    --panel: #ffffff;
    --panel-2: #f6f4fb;
    --line: rgba(24, 16, 52, .09);
    --line-2: rgba(24, 16, 52, .15);
    --text: #14101f;
    --muted: #57506a;
    --dim: #8a849b;
    --violet: #533d98;
    --lilac: #7a4bb0;
    --signal: #0d9488;
    --ok: #16a34a;
    --warn: #d97706;
}

::selection { background: rgba(142, 84, 162, .22); }

.grad {
    background: linear-gradient(92deg, #533d98 0%, #7a4bb0 50%, #8e54a2 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons */
.btn-primary {
    background: #14101f; color: #fff;
    box-shadow: 0 8px 24px -10px rgba(83, 61, 152, .55);
}
.btn-primary:hover { background: #533d98; }
.btn-ghost { background: #fff; }
.btn-ghost:hover { background: #fff; border-color: rgba(24, 16, 52, .3); }

/* Nav */
.nav.scrolled { background: rgba(251, 250, 255, .8); }
.brand img { filter: none; }

/* Hero */
.hero-glow {
    background:
        radial-gradient(closest-side at 50% 45%, rgba(142, 84, 162, .16), transparent 70%),
        radial-gradient(closest-side at 30% 60%, rgba(83, 61, 152, .14), transparent 70%),
        radial-gradient(closest-side at 72% 58%, rgba(13, 148, 136, .06), transparent 70%);
}
.hero-grid {
    background-image:
        linear-gradient(to right, rgba(24, 16, 52, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(24, 16, 52, .05) 1px, transparent 1px);
}
.pill { background: #fff; }
.pill:hover { border-color: rgba(83, 61, 152, .4); }
.pill-dot { box-shadow: 0 0 10px rgba(122, 75, 176, .5); }

/* Console */
.console {
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 16, 52, .06), 0 40px 100px -40px rgba(83, 61, 152, .35);
}
.console::before { background: linear-gradient(90deg, transparent, rgba(122, 75, 176, .5), transparent); }
.console-bar { background: var(--bg-2); }
.dots i { background: rgba(24, 16, 52, .14); }
.c-asset:hover { background: var(--bg-2); }
.c-asset.is-on { background: rgba(83, 61, 152, .07); border-color: rgba(83, 61, 152, .22); }
.lg-band { background: rgba(142, 84, 162, .22); }
.grid-lines line { stroke: rgba(24, 16, 52, .07); }
.future { fill: rgba(83, 61, 152, .035); }
.now-line { stroke: rgba(24, 16, 52, .3); }
.c-series .fc-past { stroke: rgba(83, 61, 152, .4); }
#bandG stop { stop-color: #8e54a2; }
#bandG stop:first-child { stop-opacity: .22; }
#bandG stop:last-child { stop-opacity: .08; }
#fcG stop:first-child { stop-color: #533d98; }
#fcG stop:last-child { stop-color: #8e54a2; }
.now-dot { background: #fff; }
.c-log { background: #fff; }
.log-run .log-ic { border-color: rgba(122, 75, 176, .4); }

/* Logos: dark silhouettes on light cells */
.logo-wall > span { background: #fff; }
.logo-wall img,
.inv-wall img { filter: grayscale(1) brightness(0); opacity: .5; }
.logo-wall img:hover,
.inv-wall img:hover { opacity: .85; }
.case-logo { filter: grayscale(1) brightness(0); opacity: .7; }
.logo-wall img.w { filter: grayscale(1) invert(1); opacity: .6; } /* white artwork -> dark, flag stripes stay visible */
.inv-wall img.bgw { filter: grayscale(1) contrast(1.4); mix-blend-mode: multiply; } /* white box blends into the page */

/* Sections */
.sec-alt { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.costs, .step, .cmp-col, .case, .person { box-shadow: 0 1px 2px rgba(24, 16, 52, .04); }
.costs .bi { background: rgba(220, 38, 38, .06); color: #dc2626; border-color: rgba(220, 38, 38, .18); }
.step:hover { border-color: rgba(83, 61, 152, .3); }
.step:not(:last-child)::after { background: linear-gradient(90deg, var(--line-2), rgba(83, 61, 152, .5)); }
.chips span { background: var(--bg-2); }
.cmp-hs {
    border-color: rgba(83, 61, 152, .3);
    background: radial-gradient(120% 80% at 100% 0%, rgba(142, 84, 162, .1), transparent 60%), #fff;
}
.asset { background: #fff; }
.asset:hover { background: var(--bg-2); }
.case-feature {
    border-color: rgba(83, 61, 152, .3);
    background: radial-gradient(100% 70% at 50% 0%, rgba(142, 84, 162, .1), transparent 70%), #fff;
}
.tag { background: rgba(83, 61, 152, .07); border-color: rgba(83, 61, 152, .2); }
.case-num { background: linear-gradient(180deg, #14101f 30%, #533d98); -webkit-background-clip: text; background-clip: text; color: transparent; }
.person img { filter: grayscale(.15); }

/* CTA */
.cta-card { background: linear-gradient(180deg, #fff, var(--bg-2)); }
.cta-glow { background: radial-gradient(closest-side, rgba(142, 84, 162, .2), rgba(83, 61, 152, .08) 50%, transparent 75%); }

/* Modal */
.modal { background: #fff; box-shadow: 0 40px 120px -30px rgba(24, 16, 52, .35); }
.modal::backdrop { background: rgba(20, 16, 31, .45); }

/* Full-colour logos */
.logo-wall img,
.inv-wall img,
.case-logo { filter: none; opacity: 1; }
.logo-wall img.w { filter: invert(1); opacity: .85; } /* these files are white-only artwork, so they are flipped to dark */
.inv-wall img.bgw { filter: none; mix-blend-mode: multiply; }

/* Compare highlight (light) */
.cmp-hs {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(142, 84, 162, .1), transparent 60%) padding-box,
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, #9b87ff) border-box;
    box-shadow: 0 30px 70px -30px rgba(83, 61, 152, .4);
}
.cmp-hs .bi { background: #16a34a; }
.step { box-shadow: none; }

/* Book a demo: brand purple (light) */
.btn-primary { background: linear-gradient(135deg, #533d98, #8e54a2); color: #fff; }
.btn-primary:hover { background: linear-gradient(135deg, #47338a, #7d4790); }

/* Product animation (light) */
.ops-pane > aside { background: #fff; }
.ops-modify, .ops-confirm { background: #fff; }
.ops-rows li { background: #fff; }
.ops-field { background: #fff; }
.ops-node i { border-color: #fff; }
.ops-chart.fixed .ops-fixed { stroke: #533d98; }
.ops-in { background: #fff; }
.ops-tabs { background: var(--bg-2); }
.ops-tab:hover { background: rgba(24, 16, 52, .04); }
.ops-tab.is-on { background: #fff; }