/* ================================================================
   VIOSCANS Homepage v5 Preview
   Light visual language inspired by the SI Stock Radar "Why SI?" page.
   ================================================================ */

:root {
    --vio-bg: #fff9f5;
    --vio-surface: #ffffff;
    --vio-surface-soft: #f8f4ff;
    --vio-surface-warm: #fff3e8;
    --vio-ink: #26183f;
    --vio-copy: #5c5369;
    --vio-muted: #847990;
    --vio-violet: #6f36d8;
    --vio-violet-deep: #4e1e9f;
    --vio-violet-soft: #eee6ff;
    --vio-orange: #ff7a18;
    --vio-orange-deep: #e85e00;
    --vio-gold: #d9a126;
    --vio-line: rgba(73, 45, 104, .12);
    --vio-shadow: 0 22px 70px rgba(52, 26, 77, .10);
    --vio-shadow-soft: 0 12px 34px rgba(52, 26, 77, .07);
    --vio-radius-lg: 30px;
    --vio-radius-md: 22px;
    --vio-radius-sm: 16px;
}

html { scroll-behavior: smooth; }

body.vio-site {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--vio-bg);
    color: var(--vio-ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    line-height: 1.58;
}

body.vio-site::before { display: none !important; }

.vio-page-glow {
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    filter: blur(12px);
    pointer-events: none;
}

.vio-page-glow-one {
    top: 90px;
    right: -220px;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle, rgba(125, 79, 235, .14), rgba(125, 79, 235, 0) 68%);
}

.vio-page-glow-two {
    top: 690px;
    left: -280px;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(255, 122, 24, .10), rgba(255, 122, 24, 0) 68%);
}

/* ---- Existing shared header, restyled for this preview ---- */
.vio-site .vs-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 249, 245, .92);
    color: var(--vio-ink);
    border-bottom: 1px solid rgba(73, 45, 104, .10);
    box-shadow: 0 8px 30px rgba(64, 33, 87, .05);
    backdrop-filter: blur(18px);
}

.vio-site .vs-header-inner {
    max-width: 1380px;
    min-height: 72px;
    padding: 12px 24px;
}

.vio-site .vs-brand { color: var(--vio-ink); }
.vio-site .vs-logo { color: var(--vio-violet-deep); font-size: 17px; }
.vio-site .vs-sub { color: var(--vio-copy); opacity: 1; }

.vio-site .vs-orb {
    border-color: rgba(111, 54, 216, .24);
    box-shadow: 0 7px 20px rgba(84, 38, 151, .15), 0 0 0 4px rgba(111, 54, 216, .08);
}

.vio-site .vs-link {
    color: #594d67;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 999px;
    padding: 9px 11px;
    font-weight: 800;
    font-size: 13px;
}

.vio-site .vs-link:hover {
    color: var(--vio-violet-deep);
    background: #fff;
    border-color: rgba(111, 54, 216, .12);
    box-shadow: 0 8px 20px rgba(67, 35, 94, .07);
}

.vio-site .vs-link.is-active {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border-color: transparent;
    box-shadow: 0 9px 22px rgba(91, 33, 182, .18);
}

.vio-site .vs-burger {
    border-color: rgba(111, 54, 216, .22);
    background: #fff;
}
.vio-site .vs-burger span { background: var(--vio-violet-deep); }

/* ---- Layout ---- */
.vio-main { flex: 1 0 auto; }

.vio-shell {
    width: min(1380px, calc(100% - 48px));
    margin-inline: auto;
}

.vio-section { padding: 90px 0 0; }

.vio-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--vio-orange-deep);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.vio-eyebrow::before {
    content: "";
    width: 26px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--vio-orange), #ffb566);
}

.vio-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(440px, .97fr);
    gap: clamp(36px, 6vw, 92px);
    align-items: center;
    min-height: 700px;
    padding-top: 54px;
    padding-bottom: 52px;
}

.vio-hero-copy h1 {
    max-width: 820px;
    margin: 12px 0 22px;
    color: var(--vio-ink);
    font-size: clamp(44px, 5.4vw, 76px);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 950;
}

.vio-hero-copy h1 span {
    display: block;
    background: linear-gradient(95deg, var(--vio-violet-deep), #8e4df0 64%, var(--vio-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vio-voice-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    max-width: 780px;
    margin: 0 0 22px;
    padding: 17px 18px;
    border: 1px solid rgba(111, 54, 216, .15);
    border-radius: 20px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 12px 34px rgba(71, 40, 94, .05);
}

.vio-voice-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #5b21b6);
    font-weight: 950;
    font-size: 19px;
    box-shadow: 0 8px 18px rgba(91, 33, 182, .18);
}

.vio-voice-card strong { display: block; margin-bottom: 2px; font-size: 17px; }
.vio-voice-card p { margin: 0; color: var(--vio-copy); font-size: 14px; line-height: 1.55; }

.vio-hero-lead {
    max-width: 790px;
    margin: 0;
    color: var(--vio-copy);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.72;
}

.vio-hero-lead strong { color: var(--vio-ink); }

.vio-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.vio-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 52px;
    padding: 12px 18px;
    border-radius: 15px;
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    box-shadow: 0 12px 24px rgba(63, 31, 88, .11);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.vio-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(63, 31, 88, .16); }
.vio-cta-orange { background: linear-gradient(135deg, #ff8a2e, #f26500); }
.vio-cta-violet { background: linear-gradient(135deg, #8246e9, #5c24b5); }
.vio-cta-icon { font-size: 19px; }

.vio-text-link {
    display: inline-flex;
    gap: 8px;
    margin-top: 17px;
    color: var(--vio-violet-deep);
    font-size: 13px;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-color: rgba(78, 30, 159, .22);
    text-underline-offset: 4px;
}

/* ---- Hero art ---- */
.vio-hero-art {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    isolation: isolate;
}

.vio-art-glow {
    position: absolute;
    z-index: -3;
    inset: 12% 2% 4% 8%;
    border-radius: 50% 45% 46% 44%;
    background:
        radial-gradient(circle at 45% 40%, rgba(255,255,255,.98), rgba(255,255,255,.38) 42%, transparent 68%),
        linear-gradient(145deg, rgba(239,230,255,.88), rgba(255,235,218,.78));
    filter: drop-shadow(0 28px 60px rgba(80, 38, 126, .09));
}

.vio-hero-violet {
    position: relative;
    z-index: 4;
    width: min(590px, 92%);
    height: auto;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 24px 34px rgba(48, 26, 67, .14));
}

.vio-protected-art {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.vio-orbit {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgba(111, 54, 216, .18);
    pointer-events: none;
}
.vio-orbit::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #ff9b42;
    box-shadow: 0 0 0 7px rgba(255, 155, 66, .10);
}
.vio-orbit-one { width: 490px; height: 490px; top: 58px; right: 16px; transform: rotate(-12deg); }
.vio-orbit-one::after { right: 40px; top: 70px; }
.vio-orbit-two { width: 390px; height: 390px; top: 124px; right: 110px; transform: rotate(18deg); border-color: rgba(255, 122, 24, .17); }
.vio-orbit-two::after { left: 18px; bottom: 92px; border-color: #7c3aed; }
.vio-orbit-three { width: 285px; height: 285px; top: 174px; right: 78px; border-style: dashed; opacity: .52; }
.vio-orbit-three::after { display: none; }

.vio-float-note {
    position: absolute;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 220px;
    padding: 11px 14px;
    border: 1px solid rgba(95, 55, 130, .12);
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    color: var(--vio-ink);
    font-size: 12px;
    box-shadow: 0 12px 30px rgba(57, 31, 77, .10);
    backdrop-filter: blur(10px);
}
.vio-float-note span { color: var(--vio-orange); font-size: 18px; }
.vio-float-one { top: 104px; right: 0; }
.vio-float-two { top: 245px; left: -20px; }
.vio-float-three { right: 2px; bottom: 150px; }

.vio-hand-note {
    position: absolute;
    right: 26px;
    bottom: 28px;
    color: rgba(78, 30, 159, .72);
    font-family: "Segoe Print", "Bradley Hand", cursive;
    font-size: 19px;
    line-height: 1.22;
    transform: rotate(-3deg);
}
.vio-hand-note span { font-size: 9px; vertical-align: top; }

/* ---- Ready strip ---- */
.vio-ready-strip {
    background: rgba(255,255,255,.68);
    border-top: 1px solid rgba(74, 42, 102, .08);
    border-bottom: 1px solid rgba(74, 42, 102, .08);
    box-shadow: inset 0 1px rgba(255,255,255,.7);
}

.vio-ready-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.vio-ready-grid a {
    position: relative;
    display: grid;
    grid-template-columns: 12px minmax(0,1fr);
    column-gap: 10px;
    padding: 20px 22px;
    border-right: 1px solid rgba(74, 42, 102, .09);
    transition: background .15s ease;
}
.vio-ready-grid a:first-child { border-left: 1px solid rgba(74, 42, 102, .09); }
.vio-ready-grid a:hover { background: #fff; }
.vio-ready-dot {
    grid-row: 1 / span 2;
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-radius: 50%;
    background: #27ae60;
    box-shadow: 0 0 0 6px rgba(39,174,96,.09);
}
.vio-ready-grid strong { color: var(--vio-ink); font-size: 13px; }
.vio-ready-grid small { color: var(--vio-muted); font-size: 11px; font-weight: 700; }

/* ---- Section heading ---- */
.vio-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 50px;
    align-items: end;
    margin-bottom: 28px;
}
.vio-section-heading h2,
.vio-violet-bridge h2,
.vio-how-copy h2,
.vio-why-heading h2,
.vio-final h2 {
    margin: 9px 0 0;
    color: var(--vio-ink);
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.05;
    letter-spacing: -.035em;
}
.vio-section-heading > p {
    margin: 0;
    color: var(--vio-copy);
    font-size: 16px;
}
.vio-section-heading-centered { text-align: center; grid-template-columns: 1fr; gap: 10px; max-width: 900px; margin-inline: auto; margin-bottom: 32px; }
.vio-section-heading-centered .vio-eyebrow { justify-content: center; }
.vio-section-heading-centered > p { max-width: 700px; margin-inline: auto; }

/* ---- Tool cards ---- */
.vio-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.vio-tool-card {
    position: relative;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    padding: 22px;
    overflow: hidden;
    border: 1px solid var(--vio-line);
    border-radius: var(--vio-radius-md);
    background: rgba(255,255,255,.88);
    box-shadow: var(--vio-shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vio-tool-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--tool-accent, linear-gradient(90deg, #7c3aed, #ff7a18));
}
.vio-tool-card:hover {
    transform: translateY(-5px);
    border-color: rgba(111,54,216,.22);
    box-shadow: 0 20px 45px rgba(64, 35, 88, .11);
}
.vio-tool-character { --tool-accent: linear-gradient(90deg, #ff7a18, #f5b43b); }
.vio-tool-uniques { --tool-accent: linear-gradient(90deg, #8b5cf6, #bc8cff); }
.vio-tool-sql { --tool-accent: linear-gradient(90deg, #5b21b6, #8b5cf6); }
.vio-tool-scan { --tool-accent: linear-gradient(90deg, #f97316, #dc4f54); }
.vio-tool-ssl { --tool-accent: linear-gradient(90deg, #2486d7, #7c3aed); }
.vio-tool-online { --tool-accent: linear-gradient(90deg, #20b46c, #72d697); }
.vio-tool-ip { --tool-accent: linear-gradient(90deg, #635bdb, #3796da); }
.vio-tool-more { --tool-accent: linear-gradient(90deg, #d39d27, #ff7a18); }

.vio-tool-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vio-tool-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: var(--vio-violet-deep);
    background: linear-gradient(135deg, #f4eeff, #fff4ea);
    font-size: 20px;
    font-weight: 950;
}
.vio-tool-label { color: var(--vio-muted); font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.vio-tool-card h3 { margin: 18px 0 7px; font-size: 20px; line-height: 1.12; }
.vio-tool-card p { margin: 0; color: var(--vio-copy); font-size: 13px; line-height: 1.55; }
.vio-tool-link { margin-top: auto; padding-top: 16px; color: var(--vio-violet-deep); font-size: 12px; font-weight: 900; }
.vio-tool-link b { color: var(--vio-orange); }

.vio-mini-character { display: flex; gap: 3px; margin: 17px 0 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; }
.vio-mini-character span { display: grid; place-items: center; width: 27px; height: 31px; border-radius: 8px; background: #f6f2fa; }
.vio-mini-character .vio-bad-char { color: #a23535; background: #ffe0dc; box-shadow: 0 0 0 2px rgba(218,75,66,.12); }
.vio-mini-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 17px; }
.vio-mini-pills span { padding: 5px 8px; border-radius: 999px; color: #5e4382; background: #f3edff; font-size: 10px; font-weight: 900; }
.vio-mini-code { display: grid; gap: 5px; margin-top: 18px; }
.vio-mini-code i { height: 6px; border-radius: 99px; background: #e6dcf8; }
.vio-mini-code i:nth-child(1) { width: 78%; background: #8d5fe4; }
.vio-mini-code i:nth-child(2) { width: 58%; }
.vio-mini-code i:nth-child(3) { width: 86%; }
.vio-mini-code i:nth-child(4) { width: 48%; background: #f3bb7b; }
.vio-mini-score { display: flex; align-items: baseline; gap: 8px; margin-top: 15px; }
.vio-mini-score b { color: #d75b34; font-size: 28px; }
.vio-mini-score span { color: var(--vio-muted); font-size: 10px; font-weight: 800; }
.vio-mini-cert { display: flex; justify-content: space-between; margin-top: 16px; padding: 9px 10px; border-radius: 12px; background: #f1f7ff; font-size: 10px; font-weight: 900; color: #3d5f83; }
.vio-mini-cert span:first-child { color: #218c55; }
.vio-mini-online { display: grid; grid-template-columns: 10px auto 1fr; align-items: center; gap: 7px; margin-top: 17px; }
.vio-mini-online > span { width: 9px; height: 9px; border-radius: 50%; background: #2fbd70; box-shadow: 0 0 0 5px rgba(47,189,112,.10); }
.vio-mini-online b { font-size: 11px; }
.vio-mini-online small { color: var(--vio-muted); font-size: 10px; }
.vio-mini-network { position: relative; margin-top: 17px; padding: 10px 10px 18px; border-radius: 12px; background: #f3effb; }
.vio-mini-network b { font: 800 11px/1 ui-monospace, Menlo, Consolas, monospace; color: #57417a; }
.vio-mini-network > span { display: block; width: 1px; height: 10px; margin: 6px 0 0 50%; background: #c5b1e6; }
.vio-mini-network i { position: absolute; bottom: 6px; width: 24%; height: 6px; border-radius: 6px; background: #dcd0ef; }
.vio-mini-network i:nth-of-type(1) { left: 9%; }
.vio-mini-network i:nth-of-type(2) { left: 38%; background: #8d5fe4; }
.vio-mini-network i:nth-of-type(3) { right: 9%; }
.vio-tool-more-mark { margin-top: 18px; color: rgba(78,30,159,.17); font-weight: 1000; font-size: 24px; letter-spacing: .08em; }

/* ---- Violet bridge ---- */
.vio-violet-bridge {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 44px;
    align-items: center;
    margin-top: 90px;
    padding: 24px 48px 0;
    overflow: hidden;
    border: 1px solid rgba(111,54,216,.12);
    border-radius: var(--vio-radius-lg);
    background: linear-gradient(120deg, #fff 0%, #faf6ff 55%, #fff1e7 100%);
    box-shadow: var(--vio-shadow-soft);
}
.vio-violet-bridge-art { position: relative; min-height: 380px; display: flex; align-items: flex-end; justify-content: center; }
.vio-violet-bridge-art img { position: relative; z-index: 2; width: 340px; height: auto; filter: drop-shadow(0 18px 24px rgba(50,28,68,.11)); }
.vio-bridge-halo { position: absolute; inset: 10% -5% -15%; border-radius: 50% 50% 0 0; background: radial-gradient(circle at center, rgba(126,76,226,.13), transparent 68%); }
.vio-violet-bridge-copy { padding: 34px 0 48px; }
.vio-violet-bridge-copy p { max-width: 780px; color: var(--vio-copy); font-size: 16px; }
.vio-bridge-points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.vio-bridge-points span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--vio-line); color: var(--vio-copy); font-size: 12px; font-weight: 900; }
.vio-bridge-points b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--vio-violet); font-size: 10px; }

/* ---- Demo cards ---- */
.vio-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.vio-demo-card { padding: 25px; border: 1px solid var(--vio-line); border-radius: 24px; background: #fff; box-shadow: var(--vio-shadow-soft); }
.vio-demo-kicker { color: var(--vio-orange-deep); font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.vio-demo-card h3 { margin: 7px 0 16px; font-size: 21px; line-height: 1.15; }
.vio-demo-card p { color: var(--vio-copy); font-size: 13px; }
.vio-demo-card > a { display: inline-flex; margin-top: 6px; color: var(--vio-violet-deep); font-size: 12px; font-weight: 900; }
.vio-compare-lines { display: grid; gap: 8px; }
.vio-compare-lines > div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 12px; background: #f7f5f9; }
.vio-compare-lines span { color: var(--vio-muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.vio-compare-lines code { background: transparent; border: 0; padding: 0; color: #4d4556; font-size: 12px; }
.vio-compare-found { background: #fff0ec !important; }
.vio-compare-found code span { display: inline-block; padding: 1px 3px; border-radius: 5px; color: #a33831; background: #ffc7be; font-size: inherit; text-transform: none; }
.vio-sql-before { padding: 10px; overflow: hidden; border-radius: 11px; background: #f3eff6; color: #6d6474; font: 11px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; text-overflow: ellipsis; }
.vio-transform-arrow { color: var(--vio-orange); text-align: center; font-size: 17px; font-weight: 900; }
.vio-sql-after { margin: 0; padding: 12px; border-radius: 11px; background: #28203a; color: #f5efff; font-size: 11px; line-height: 1.45; }
.vio-sql-after b { color: #c7a5ff; }
.vio-subnet-demo { margin-top: 4px; padding: 8px 8px 6px; text-align: center; }
.vio-subnet-parent { display: inline-block; padding: 8px 12px; border-radius: 10px; background: linear-gradient(135deg,#7e50d6,#5e2cb2); color: #fff; font: 800 11px/1 ui-monospace,Menlo,Consolas,monospace; }
.vio-subnet-line { width: 1px; height: 22px; margin: 0 auto; background: #bda7da; position: relative; }
.vio-subnet-line::after { content:""; position:absolute; left:-72px; bottom:0; width:144px; height:1px; background:#bda7da; }
.vio-subnet-children { display: flex; justify-content: center; gap: 16px; }
.vio-subnet-children span { min-width: 108px; padding: 7px 10px; border-radius: 9px; background: #f0e9fb; color: #654b87; font: 800 10px/1 ui-monospace,Menlo,Consolas,monospace; }
.vio-subnet-stats { display: flex; gap: 8px; margin-top: 12px; }
.vio-subnet-stats span { flex: 1; padding: 8px; border-radius: 10px; background: #faf8fc; color: var(--vio-muted); font-size: 9px; text-align: center; }
.vio-subnet-stats b { color: var(--vio-ink); font-size: 11px; }

/* ---- Quote band ---- */
.vio-quote-band { margin-top: 96px; overflow: hidden; border-top: 1px solid rgba(111,54,216,.10); border-bottom: 1px solid rgba(111,54,216,.10); background: linear-gradient(110deg,#f6efff 0%,#fff 48%,#fff0e5 100%); }
.vio-quote-inner { display: grid; grid-template-columns: minmax(0,1fr) 350px; align-items: center; min-height: 360px; }
.vio-quote-copy { padding: 60px 0; }
.vio-quote-mark { color: rgba(111,54,216,.22); font-family: Georgia, serif; font-size: 80px; line-height: .7; }
.vio-quote-copy blockquote { max-width: 900px; margin: 0; color: var(--vio-ink); font-size: clamp(31px,4vw,55px); font-weight: 950; line-height: 1.02; letter-spacing: -.035em; }
.vio-quote-copy p { margin: 16px 0 0; color: var(--vio-orange-deep); font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.vio-quote-violet { align-self: end; height: 350px; display: flex; align-items: flex-end; justify-content: center; }
.vio-quote-violet img { width: 330px; height: auto; transform: translateY(8px); filter: drop-shadow(0 18px 22px rgba(55,30,77,.10)); }

/* ---- How ---- */
.vio-how-grid { display: grid; grid-template-columns: 410px minmax(0,1fr); gap: 55px; align-items: stretch; }
.vio-how-art { position: relative; min-height: 580px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border: 1px solid var(--vio-line); border-radius: 28px; background: linear-gradient(160deg,#fff 0%,#f6efff 58%,#fff1e8 100%); box-shadow: var(--vio-shadow-soft); }
.vio-how-art img { position: relative; z-index: 2; width: 390px; height: auto; filter: drop-shadow(0 20px 28px rgba(56,31,76,.12)); }
.vio-how-halo { position: absolute; width: 420px; height: 420px; top: 50px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle,rgba(130,76,232,.17),transparent 69%); }
.vio-how-copy { padding: 18px 0; }
.vio-steps { display: grid; gap: 10px; margin-top: 24px; }
.vio-steps > div { display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-items: start; padding: 13px 14px; border: 1px solid rgba(74,42,102,.08); border-radius: 15px; background: rgba(255,255,255,.72); }
.vio-steps > div > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: linear-gradient(135deg,#7c3aed,#5b21b6); font-size: 12px; font-weight: 950; }
.vio-steps p { margin: 0; color: var(--vio-copy); font-size: 12px; line-height: 1.5; }
.vio-steps strong { color: var(--vio-ink); font-size: 13px; }

/* ---- Why ---- */
.vio-why-card { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 52px; padding: 42px; border: 1px solid var(--vio-line); border-radius: var(--vio-radius-lg); background: #fff; box-shadow: var(--vio-shadow); }
.vio-why-heading p { color: var(--vio-copy); }
.vio-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: center; }
.vio-why-grid > div { padding: 18px; border-radius: 18px; background: linear-gradient(160deg,#fbf8ff,#fff8f2); border: 1px solid rgba(111,54,216,.08); }
.vio-why-grid span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 12px; color: var(--vio-violet-deep); background: #fff; box-shadow: 0 8px 18px rgba(54,29,77,.07); font-weight: 950; }
.vio-why-grid strong { display: block; font-size: 13px; }
.vio-why-grid p { margin: 6px 0 0; color: var(--vio-copy); font-size: 11px; line-height: 1.5; }

/* ---- Final ---- */
.vio-final { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 48px; align-items: center; margin-top: 92px; padding: 40px 48px 0; overflow: hidden; border-radius: var(--vio-radius-lg); background: linear-gradient(120deg,#fff 0%,#f9f3ff 56%,#fff0e5 100%); border: 1px solid rgba(111,54,216,.12); box-shadow: var(--vio-shadow-soft); }
.vio-final-copy { padding: 24px 0 50px; }
.vio-final-copy p { max-width: 720px; color: var(--vio-copy); font-size: 15px; }
.vio-final-art { position: relative; align-self: end; min-height: 430px; display: flex; align-items: flex-end; justify-content: center; }
.vio-final-art img { position: relative; z-index: 2; width: 300px; height: auto; filter: drop-shadow(0 18px 26px rgba(54,28,76,.12)); }
.vio-final-halo { position: absolute; width: 350px; height: 350px; bottom: -30px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle,rgba(119,66,220,.16),transparent 68%); }

.vio-rights { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 22px; margin-bottom: 26px; padding: 11px 16px; color: #7d7086; font-size: 10px; text-align: center; }
.vio-rights strong { color: #554660; }

/* ---- Existing footer, restyled ---- */
.vio-site .sm-footer {
    margin-top: 20px;
    color: #564b61;
    background: #fff;
    border-top: 1px solid rgba(74,42,102,.10);
}
.vio-site .sm-footer a { color: var(--vio-violet-deep); }
.vio-site .sm-footer-inner { max-width: 1380px; min-height: 74px; margin: 0 auto; }
.vio-site .sm-footer img { filter: none; }

/* ---- Responsive ---- */
@media (max-width: 1160px) {
    .vio-hero { grid-template-columns: 1fr 470px; gap: 28px; }
    .vio-tool-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .vio-why-card { grid-template-columns: 1fr; }
    .vio-why-grid { max-width: none; }
}

@media (max-width: 900px) {
    .vio-shell { width: min(100% - 28px, 1380px); }
    .vio-section { padding-top: 68px; }
    .vio-hero { grid-template-columns: 1fr; padding-top: 42px; }
    .vio-hero-copy { text-align: center; }
    .vio-hero-copy .vio-eyebrow { justify-content: center; }
    .vio-voice-card, .vio-hero-lead { margin-inline: auto; text-align: left; }
    .vio-cta-row { justify-content: center; }
    .vio-hero-art { min-height: 560px; max-width: 620px; width: 100%; margin: 0 auto; }
    .vio-float-two { left: 10px; }
    .vio-ready-grid { grid-template-columns: repeat(2,1fr); }
    .vio-ready-grid a:nth-child(2) { border-right: 0; }
    .vio-ready-grid a:nth-child(3), .vio-ready-grid a:nth-child(4) { border-top: 1px solid rgba(74,42,102,.09); }
    .vio-section-heading { grid-template-columns: 1fr; gap: 12px; }
    .vio-violet-bridge { grid-template-columns: 300px 1fr; padding-inline: 26px; }
    .vio-violet-bridge-art img { width: 290px; }
    .vio-demo-grid { grid-template-columns: 1fr; }
    .vio-quote-inner { grid-template-columns: 1fr 280px; }
    .vio-how-grid { grid-template-columns: 330px 1fr; gap: 30px; }
    .vio-how-art img { width: 330px; }
    .vio-why-grid { grid-template-columns: 1fr; }
    .vio-final { grid-template-columns: 1fr 280px; padding-inline: 30px; }
}

@media (max-width: 760px) {
    .vio-site .vs-header-inner { padding-inline: 14px; }
    .vio-site .vs-nav {
        background: #fff;
        color: var(--vio-ink);
        border-color: rgba(111,54,216,.12);
    }
    .vio-site .vs-link,
    .vio-site .vs-link.is-active {
        width: 100%;
        color: var(--vio-ink);
        background: #f7f2ff;
        border-color: rgba(111,54,216,.10);
    }
    .vio-site .vs-link.is-active { color: #fff; background: linear-gradient(135deg,#7c3aed,#5b21b6); }

    .vio-hero { min-height: 0; padding-bottom: 34px; }
    .vio-hero-copy h1 { font-size: clamp(42px,12vw,62px); }
    .vio-hero-art { min-height: 510px; }
    .vio-hero-violet { width: min(520px, 96%); }
    .vio-float-note { max-width: 180px; font-size: 10px; }
    .vio-float-one { top: 80px; }
    .vio-float-two { top: 210px; }
    .vio-float-three { bottom: 110px; }
    .vio-hand-note { display: none; }
    .vio-ready-grid { grid-template-columns: 1fr; }
    .vio-ready-grid a, .vio-ready-grid a:first-child { border-left: 0; border-right: 0; border-top: 1px solid rgba(74,42,102,.08); }
    .vio-ready-grid a:first-child { border-top: 0; }
    .vio-tool-grid { grid-template-columns: 1fr; }
    .vio-tool-card { min-height: 280px; }
    .vio-violet-bridge { grid-template-columns: 1fr; padding: 12px 22px 0; text-align: center; }
    .vio-violet-bridge-art { min-height: 310px; }
    .vio-violet-bridge-art img { width: 280px; }
    .vio-violet-bridge-copy { padding: 0 0 32px; }
    .vio-violet-bridge-copy .vio-eyebrow { justify-content: center; }
    .vio-bridge-points { justify-content: center; }
    .vio-quote-inner { grid-template-columns: 1fr; text-align: center; }
    .vio-quote-copy { padding: 48px 0 0; }
    .vio-quote-violet { height: 260px; }
    .vio-quote-violet img { width: 250px; }
    .vio-how-grid { grid-template-columns: 1fr; }
    .vio-how-art { min-height: 450px; }
    .vio-how-art img { width: 340px; }
    .vio-why-card { padding: 28px 22px; }
    .vio-final { grid-template-columns: 1fr; padding: 32px 22px 0; text-align: center; }
    .vio-final-copy { padding-bottom: 0; }
    .vio-final-copy .vio-eyebrow { justify-content: center; }
    .vio-final-art { min-height: 360px; }
    .vio-final-art img { width: 260px; }
}

@media (max-width: 520px) {
    .vio-shell { width: min(100% - 20px, 1380px); }
    .vio-hero-copy h1 { font-size: 43px; }
    .vio-voice-card { grid-template-columns: 38px 1fr; padding: 14px; }
    .vio-voice-mark { width: 38px; height: 38px; border-radius: 12px; }
    .vio-cta { width: 100%; }
    .vio-hero-art { min-height: 450px; }
    .vio-float-note { display: none; }
    .vio-orbit-one { width: 390px; height: 390px; right: 50%; transform: translateX(50%); }
    .vio-orbit-two { width: 305px; height: 305px; right: 50%; transform: translateX(50%); }
    .vio-orbit-three { display: none; }
    .vio-hero-violet { width: 430px; max-width: 100%; }
    .vio-section-heading h2, .vio-violet-bridge h2, .vio-how-copy h2, .vio-why-heading h2, .vio-final h2 { font-size: 34px; }
    .vio-tool-card, .vio-demo-card { padding: 20px; }
    .vio-compare-lines > div { grid-template-columns: 78px 1fr; }
    .vio-subnet-children span { min-width: 92px; }
    .vio-quote-copy blockquote { font-size: 35px; }
    .vio-how-art { min-height: 390px; }
    .vio-how-art img { width: 300px; }
    .vio-rights { display: grid; gap: 3px; }
}

/* ================================================================
   V3 refinements
   - Violet gear insignia replaces the old monster/text nav item.
   - Violet_watching.png becomes the header mark with rounded corners.
   - Hero handwritten note becomes a readable glass card.
   - Footer adopts the A Smarter Tomorrow Together visual pattern.
   ================================================================ */

.vio-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.vio-site .vio-watching-mark {
    width: 46px;
    height: 46px;
    min-width: 46px;
    overflow: hidden;
    border-radius: 13px;
    background: #fff;
    border: 1px solid rgba(111,54,216,.20);
    box-shadow: 0 7px 20px rgba(84,38,151,.12), 0 0 0 4px rgba(111,54,216,.06);
}

.vio-site .vio-watching-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    transform: none;
    transition: transform .18s ease;
}

.vio-site .vs-brand:hover .vio-watching-mark img {
    transform: scale(1.035);
}

.vio-site .vio-gear-nav {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 4px !important;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(124,58,237,.11), rgba(91,33,182,.05));
    border: 1px solid rgba(111,54,216,.16);
}

.vio-site .vio-gear-nav img {
    display: block;
    width: 36px;
    height: 39px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(58,20,110,.16));
    transition: transform .16s ease, filter .16s ease;
}

.vio-site .vio-gear-nav:hover {
    background: #fff;
    border-color: rgba(111,54,216,.24);
}

.vio-site .vio-gear-nav:hover img {
    transform: translateY(-1px) scale(1.04);
    filter: drop-shadow(0 6px 10px rgba(58,20,110,.20));
}

.vio-site .vio-gear-nav.is-active {
    background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(91,33,182,.08));
    border-color: rgba(111,54,216,.30);
    box-shadow: 0 8px 20px rgba(91,33,182,.12);
}

/* The former handwritten overlay was too low-contrast over Violet's uniform. */
.vio-hand-note {
    right: 18px;
    bottom: 24px;
    max-width: 220px;
    padding: 10px 13px;
    border: 1px solid rgba(95,55,130,.13);
    border-radius: 14px;
    background: rgba(255,255,255,.95);
    color: var(--vio-violet-deep);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.3;
    transform: none;
    box-shadow: 0 12px 28px rgba(57,31,77,.10);
    backdrop-filter: blur(10px);
}
.vio-hand-note span { font-size: 8px; }

/* Footer pattern adapted from A Smarter Tomorrow Together. */
.vio-site-footer {
    margin-top: 34px;
    background: #291263;
    color: #fff;
    padding: 28px 42px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 30px;
    align-items: center;
}

.vio-footer-wordmark {
    color: #fff;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: .12em;
}

.vio-footer-brand > div:last-child {
    margin-top: 5px;
    color: #d9cff5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.vio-footer-line {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    white-space: nowrap;
}

.vio-footer-small {
    color: #d5c9f2;
    font-size: 12px;
    text-align: right;
}

@media (max-width: 820px) {
    .vio-site .vio-gear-nav {
        width: 50px;
        height: 50px;
        min-width: 50px;
        align-self: flex-start;
    }

    .vio-site .vio-gear-nav img {
        width: 39px;
        height: 42px;
    }
}

@media (max-width: 760px) {
    .vio-site-footer {
        grid-template-columns: 1fr;
        padding: 26px 20px;
        gap: 13px;
        text-align: center;
    }

    .vio-footer-small { text-align: center; }
    .vio-footer-line { white-space: normal; }
    .vio-hand-note { display: none; }
}


/* ================================================================
   V4 Enchanted Violet composition
   Uses only transparent-background Violet artwork approved for this pass.
   ================================================================ */

.vio-site .vio-watching-mark{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:13px;
    overflow:hidden;
    background:#fff;
}
.vio-site .vio-watching-mark img{
    width:100%;height:100%;object-fit:cover;border-radius:10px;transform:none;
}
.vio-site .vio-gear-nav{
    width:46px;height:42px;padding:3px 6px!important;border-radius:13px!important;
}
.vio-site .vio-gear-nav img{width:30px;height:34px;object-fit:contain;display:block;margin:auto;}
.vio-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

.vio-site .vio-hero{
    min-height:760px;
    overflow:visible;
}
.vio-site .vio-hero-art{
    position:relative;
    min-height:710px;
    align-self:stretch;
    overflow:hidden;
    border-radius:36px;
}
.vio-site .vio-hero-art::before{
    content:"";
    position:absolute;
    inset:56px 12px 18px 20px;
    border-radius:48% 52% 46% 54% / 52% 42% 58% 48%;
    background:
      radial-gradient(circle at 56% 38%, rgba(255,255,255,.98) 0 16%, rgba(238,229,255,.92) 42%, rgba(255,231,213,.70) 64%, rgba(255,255,255,0) 76%);
    z-index:0;
}
.vio-site .vio-hero-art .vio-enchanted-art{
    position:absolute;
    z-index:2;
    width:min(700px,112%);
    max-width:none;
    height:auto;
    left:50%;
    bottom:-32%;
    transform:translateX(-50%);
    filter:drop-shadow(0 28px 38px rgba(67,33,101,.16));
    user-select:none;
}
.vio-site .vio-hero-art .vio-float-note{z-index:5;}
.vio-site .vio-hero-art .vio-float-one{right:1%;top:20%;}
.vio-site .vio-hero-art .vio-float-two{left:1%;top:45%;}
.vio-site .vio-hero-art .vio-float-three{right:4%;bottom:14%;}

/* Tall cloak column: the figure establishes a vertical visual spine while the
   explanatory content runs roughly the length of the body. */
.vio-cloak-story{
    margin-top:92px;
    display:grid;
    grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);
    gap:clamp(34px,6vw,90px);
    align-items:stretch;
    padding:34px clamp(22px,4vw,54px);
    border:1px solid var(--vio-line);
    border-radius:34px;
    background:
      linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,243,255,.94) 55%,rgba(255,245,237,.94));
    box-shadow:var(--vio-shadow);
    overflow:hidden;
}
.vio-cloak-column{
    position:relative;
    min-height:1050px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    border-radius:28px;
    background:
      linear-gradient(180deg,rgba(38,14,83,.05),rgba(88,28,142,.12)),
      url('/assets/violet/home/storm-cloak-color.jpg') center center / cover no-repeat;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),0 18px 46px rgba(71,35,111,.14);
}
.vio-cloak-halo{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(72,27,116,.03) 55%,rgba(39,13,78,.16) 100%),
      radial-gradient(circle at 50% 70%,rgba(255,255,255,.16),transparent 48%);
}
.vio-cloak-full{
    position:relative;
    z-index:2;
    display:block;
    width:min(470px,112%);
    height:auto;
    margin:0 auto -18px;
    filter:drop-shadow(0 30px 38px rgba(69,33,104,.16));
    user-select:none;
}
.vio-cloak-caption{
    position:absolute;
    z-index:4;
    left:0;
    bottom:24px;
    padding:14px 17px;
    border:1px solid rgba(111,54,216,.15);
    border-radius:16px;
    background:rgba(255,255,255,.90);
    box-shadow:0 14px 36px rgba(58,31,82,.09);
    color:var(--vio-copy);
    font-size:13px;
}
.vio-cloak-caption strong{color:var(--vio-violet-deep);font-size:16px;}
.vio-cloak-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:44px 0;
}
.vio-cloak-copy h2{
    margin:12px 0 18px;
    max-width:780px;
    font-size:clamp(38px,4.4vw,66px);
    line-height:1.02;
    letter-spacing:-.045em;
}
.vio-cloak-lead{
    max-width:780px;
    margin:0 0 26px;
    color:var(--vio-copy);
    font-size:19px;
    line-height:1.7;
}
.vio-cloak-chapters{display:grid;gap:12px;max-width:820px;}
.vio-cloak-chapters article{
    display:grid;
    grid-template-columns:52px 1fr;
    gap:15px;
    align-items:start;
    padding:18px;
    border:1px solid rgba(77,46,108,.10);
    border-radius:18px;
    background:rgba(255,255,255,.78);
}
.vio-cloak-chapters article>span{
    width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
    color:#fff;font-weight:950;font-size:13px;
    background:linear-gradient(135deg,var(--vio-violet),#9a65ff);
    box-shadow:0 8px 18px rgba(111,54,216,.18);
}
.vio-cloak-chapters strong{font-size:17px;color:var(--vio-ink);}
.vio-cloak-chapters p{margin:5px 0 0;color:var(--vio-copy);line-height:1.55;font-size:14px;}
.vio-cloak-quote{
    margin:26px 0 0;
    padding:20px 24px;
    border-left:5px solid var(--vio-orange);
    border-radius:0 18px 18px 0;
    background:#fff;
    color:var(--vio-violet-deep);
    font-size:clamp(24px,2.6vw,36px);
    font-weight:900;
    line-height:1.2;
    font-style:italic;
}

/* Waist-up transparent figures */
.vio-waist-crop{position:relative;overflow:hidden;}
.vio-how-enchanted{align-items:stretch;}
.vio-how-enchanted .vio-how-art{
    min-height:660px;
    border-radius:30px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.02),rgba(54,22,97,.10)),
      url('/assets/violet/home/storm-how-violet.jpg') center center / cover no-repeat;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.46),0 18px 44px rgba(65,36,96,.12);
}
.vio-how-enchanted .vio-how-art .vio-enchanted-art{
    position:absolute;
    width:min(720px,132%);
    max-width:none;
    left:50%;
    bottom:-30%;
    transform:translateX(-50%);
    filter:drop-shadow(0 26px 34px rgba(64,28,97,.15));
}

.vio-why-layout{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);
    gap:22px;
    align-items:stretch;
}
.vio-why-layout .vio-why-card{height:100%;}
.vio-friendly-art{
    position:relative;
    min-height:590px;
    border:1px solid var(--vio-line);
    border-radius:30px;
    background:
      radial-gradient(circle at 50% 28%,#fff 0,#eee5ff 46%,#ffe7d6 78%);
    box-shadow:var(--vio-shadow-soft);
}
.vio-friendly-art .vio-enchanted-art{
    position:absolute;
    width:min(650px,132%);
    max-width:none;
    left:50%;
    bottom:-38%;
    transform:translateX(-50%);
    filter:drop-shadow(0 25px 32px rgba(60,28,91,.14));
}
.vio-friendly-note{
    position:absolute;z-index:5;right:18px;top:20px;
    padding:12px 15px;border-radius:15px;background:rgba(255,255,255,.90);
    border:1px solid rgba(111,54,216,.14);box-shadow:0 10px 26px rgba(59,31,86,.08);
    color:var(--vio-copy);font-size:13px;text-align:right;
}
.vio-friendly-note strong{color:var(--vio-violet-deep);font-size:16px;}

/* Basement vignette */
.vio-basement-band{
    margin-top:92px;
    min-height:520px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);
    align-items:center;
    gap:18px;
    overflow:hidden;
    border:1px solid rgba(95,67,55,.14);
    border-radius:32px;
    background:
      linear-gradient(125deg,#fffaf5 0,#f5f0ff 62%,#ece3da 100%);
    box-shadow:var(--vio-shadow);
}
.vio-basement-copy{padding:58px 12px 58px 58px;}
.vio-basement-copy h2{
    max-width:700px;margin:12px 0 16px;
    font-size:clamp(38px,4vw,60px);line-height:1.02;letter-spacing:-.04em;
}
.vio-basement-copy p{max-width:700px;color:var(--vio-copy);font-size:18px;line-height:1.7;}
.vio-basement-art{align-self:end;display:flex;align-items:flex-end;justify-content:flex-end;min-height:500px;}
.vio-basement-art img{display:block;width:min(690px,120%);height:auto;margin:0 -38px -10px 0;filter:drop-shadow(0 24px 36px rgba(60,43,35,.18));}

.vio-final-simple{
    margin-top:92px;
    margin-bottom:46px;
    padding:36px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    border-radius:28px;
    color:#fff;
    background:linear-gradient(135deg,#311168,#5a31ad 58%,#ff6c2e 150%);
    box-shadow:0 25px 55px rgba(53,28,90,.22);
}
.vio-final-simple .vio-eyebrow{color:#f1e9ff;}
.vio-final-simple .vio-eyebrow::before{background:#ffb56e;}
.vio-final-simple h2{margin:10px 0 8px;font-size:clamp(32px,3.3vw,50px);line-height:1.03;letter-spacing:-.035em;}
.vio-final-simple p{margin:0;color:#eee7ff;max-width:760px;}
.vio-final-simple .vio-cta-row{margin-top:0;min-width:max-content;}

/* Footer matched to A Smarter Tomorrow Together family styling */
.vio-site-footer{
    margin-top:0;
    background:#291263;
    color:#fff;
    padding:28px 42px;
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:30px;
    align-items:center;
}
.vio-footer-wordmark{font-size:25px;font-weight:950;letter-spacing:.08em;}
.vio-footer-brand div:last-child{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-top:5px;color:#d9cff5;}
.vio-footer-line{font-size:20px;font-weight:900;}
.vio-footer-small{font-size:12px;color:#d5c9f2;}

@media (max-width:1100px){
    .vio-cloak-story{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:30px;}
    .vio-cloak-column{min-height:980px;}
    .vio-why-layout{grid-template-columns:1fr;}
    .vio-friendly-art{min-height:520px;}
    .vio-basement-band{grid-template-columns:1fr 1fr;}
    .vio-final-simple{align-items:flex-start;flex-direction:column;}
    .vio-final-simple .vio-cta-row{min-width:0;}
}

@media (max-width:820px){
    .vio-site .vio-hero{grid-template-columns:1fr;min-height:auto;padding-top:34px;}
    .vio-site .vio-hero-art{min-height:580px;}
    .vio-site .vio-hero-art .vio-enchanted-art{width:min(660px,128%);bottom:-42%;}
    .vio-cloak-story{grid-template-columns:1fr;padding:24px 20px;}
    .vio-cloak-column{min-height:720px;order:2;}
    .vio-cloak-full{width:min(430px,92%);margin-bottom:-40px;}
    .vio-cloak-copy{padding:24px 0 0;}
    .vio-cloak-caption{left:12px;bottom:14px;}
    .vio-how-enchanted .vio-how-art{min-height:560px;}
    .vio-how-enchanted .vio-how-art .vio-enchanted-art{width:min(640px,145%);bottom:-43%;}
    .vio-friendly-art{min-height:500px;}
    .vio-basement-band{grid-template-columns:1fr;}
    .vio-basement-copy{padding:38px 26px 4px;}
    .vio-basement-art{min-height:430px;justify-content:center;}
    .vio-basement-art img{width:min(650px,110%);margin:0 auto -10px;}
    .vio-site-footer{grid-template-columns:1fr;text-align:center;padding:26px 20px;gap:13px;}
}

@media (max-width:560px){
    .vio-shell{width:min(100% - 24px,1380px);}
    .vio-site .vio-hero-art{min-height:480px;border-radius:24px;}
    .vio-site .vio-hero-art .vio-enchanted-art{width:150%;bottom:-47%;}
    .vio-site .vio-hero-art .vio-float-note{display:none;}
    .vio-cloak-story{margin-top:62px;border-radius:24px;}
    .vio-cloak-column{min-height:620px;}
    .vio-cloak-full{width:105%;}
    .vio-cloak-copy h2{font-size:38px;}
    .vio-cloak-lead{font-size:16px;}
    .vio-cloak-chapters article{grid-template-columns:44px 1fr;padding:14px;}
    .vio-cloak-chapters article>span{width:38px;height:38px;}
    .vio-cloak-quote{font-size:23px;}
    .vio-how-enchanted .vio-how-art{min-height:460px;}
    .vio-how-enchanted .vio-how-art .vio-enchanted-art{width:158%;bottom:-48%;}
    .vio-friendly-art{min-height:430px;}
    .vio-friendly-art .vio-enchanted-art{width:158%;bottom:-44%;}
    .vio-friendly-note{right:10px;top:10px;}
    .vio-basement-band{margin-top:62px;border-radius:24px;}
    .vio-basement-copy h2{font-size:38px;}
    .vio-basement-copy p{font-size:16px;}
    .vio-basement-art{min-height:370px;}
    .vio-basement-art img{width:130%;max-width:none;}
    .vio-final-simple{margin-top:62px;padding:28px 22px;border-radius:22px;}
    .vio-final-simple .vio-cta-row{width:100%;}
    .vio-final-simple .vio-cta{width:100%;}
}


/* =========================================================
   V6 - Smartphone Violet image scaling
   Kevin review 2026-10-01
   Keep the three large character moments comfortably inside
   their cards on phones instead of zooming/cropping them.
   ========================================================= */
@media (max-width: 560px){
    /* 1. Homepage hero sorceress */
    .vio-site .vio-hero-art{
        min-height: 430px;
    }
    .vio-site .vio-hero-art .vio-enchanted-art{
        width: min(360px, 84vw);
        max-width: 84vw;
        bottom: -14%;
    }

    /* 2. "Same data. A clearer truth." Violet */
    .vio-friendly-art{
        min-height: 390px;
    }
    .vio-friendly-art .vio-enchanted-art{
        width: min(340px, 80vw);
        max-width: 80vw;
        bottom: -12%;
    }

    /* 3. "How Violet Works" storm Violet */
    .vio-how-enchanted .vio-how-art{
        min-height: 430px;
    }
    .vio-how-enchanted .vio-how-art .vio-enchanted-art{
        width: min(350px, 82vw);
        max-width: 82vw;
        bottom: -14%;
    }
}

@media (max-width: 390px){
    .vio-site .vio-hero-art .vio-enchanted-art{
        width: min(325px, 82vw);
        max-width: 82vw;
    }
    .vio-friendly-art .vio-enchanted-art{
        width: min(305px, 78vw);
        max-width: 78vw;
    }
    .vio-how-enchanted .vio-how-art .vio-enchanted-art{
        width: min(315px, 80vw);
        max-width: 80vw;
    }
}