/* Indigo + pink theme for the home page. Loaded after styles.css and only re-colors it. */
:root {
    --bg: #fbfbfe;
    --soft: #f5f6f8;
    --soft-2: #ecedfb;
    --ink: #000000;
    --ink-2: #0a0a0a;
    --ink-3: #000000;
    --text: #0a0a0a;
    --muted: #4e4e6c;
    --muted-dark: #9d9db8;
    --line: #e4e5ef;
    --line-dark: rgba(179, 184, 240, 0.14);
    --brand: #2f39ba;
    --brand-2: #ff5ec4;
    --pink: #ff5ec4;
    --orchid: #f092dd;
    --blush: #ffc8eb;
    --periwinkle: #b3b8f0;
    --grad: linear-gradient(135deg, #2f39ba 0%, #ff5ec4 100%);
    --grad-text: linear-gradient(90deg, #2f39ba 10%, #e64db8 90%);
    --grad-text-dark: linear-gradient(90deg, #b3b8f0 0%, #ffc8eb 50%, #ff5ec4 100%);
    --glow-indigo: rgba(47, 57, 186, 0.5);
    --glow-pink: rgba(255, 94, 196, 0.22);
    --shadow-sm: 0 4px 16px rgba(19, 17, 37, 0.06);
    --shadow-lg: 0 24px 60px rgba(21, 25, 79, 0.16);
}

::selection {
    background: #ffc8eb;
    color: #0a0a0a;
}

/* Buttons */
.btn-primary {
    background: var(--grad);
    background-size: 160% 160%;
    background-position: 0% 50%;
    box-shadow: 0 10px 30px rgba(47, 57, 186, 0.4), 0 2px 0 rgba(255, 255, 255, 0.12) inset;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease;
}

.btn-primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 14px 38px rgba(255, 94, 196, 0.42);
}

.btn-ghost {
    border-color: rgba(179, 184, 240, 0.28);
    background: rgba(179, 184, 240, 0.06);
}

.btn-ghost:hover {
    border-color: rgba(255, 200, 235, 0.6);
    background: rgba(255, 94, 196, 0.1);
}

.btn-white {
    color: var(--brand);
}

.btn-white:hover {
    box-shadow: 0 14px 34px rgba(255, 94, 196, 0.35);
}

/* Header */
.site-header {
    background: rgba(0, 0, 0, 0.86);
    border-bottom-color: rgba(179, 184, 240, 0.12);
}

.site-nav>a:hover,
.site-nav>a.active {
    color: #ffc8eb;
}

/* Hero */
.hero {
    background:
        radial-gradient(ellipse 50% 45% at 86% 28%, var(--glow-pink), transparent 70%),
        linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
}

.hero::before {
    display: none;
}

.hero-badge {
    border-color: rgba(255, 200, 235, 0.22);
    background: rgba(255, 94, 196, 0.06);
}

.hero-note strong {
    color: #ffc8eb;
}

.hero-media::before {
    opacity: 0.55;
}

.hero-frame {
    border-color: rgba(179, 184, 240, 0.2);
    background: linear-gradient(135deg, rgba(47, 57, 186, 0.25), rgba(255, 94, 196, 0.15));
}

.float-chip {
    border-color: #ecedfb;
}

.float-chip i,
.icon,
.ca-avatar {
    background: linear-gradient(135deg, #ecedfb, #ffe6f5);
}

/* Sections: light sections share one tinted ground, dark ones share the hero's glow */
.section.after-hero {
    background:
        radial-gradient(ellipse 50% 40% at 0% 30%, rgba(179, 184, 240, 0.28), transparent 70%),
        radial-gradient(ellipse 45% 40% at 100% 70%, rgba(255, 200, 235, 0.35), transparent 70%),
        var(--bg);
}

.section-soft {
    background:
        radial-gradient(ellipse 45% 35% at 100% 0%, rgba(255, 200, 235, 0.32), transparent 70%),
        radial-gradient(ellipse 45% 35% at 0% 100%, rgba(179, 184, 240, 0.3), transparent 70%),
        var(--soft);
}

.dark {
    background:
        radial-gradient(ellipse 45% 55% at 92% 92%, rgba(255, 94, 196, 0.18), transparent 70%),
        var(--ink);
}

/* Glowing seams where a dark section meets a light one */
.dark::before,
.dark::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #2f39ba 25%, #ff5ec4 75%, transparent);
    box-shadow: 0 0 18px 1px rgba(255, 94, 196, 0.45);
    pointer-events: none;
}

.dark::before {
    top: 0;
}

.dark::after {
    bottom: 0;
}

.dark .eyebrow {
    color: #ffc8eb;
}

.eyebrow::before {
    width: 28px;
    height: 3px;
}

/* Cards */
.card:hover {
    border-color: #c9ccf5;
    box-shadow: 0 24px 60px rgba(47, 57, 186, 0.14), 0 6px 18px rgba(255, 94, 196, 0.1);
}

.dark .card {
    border-color: rgba(179, 184, 240, 0.14);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.4));
}

.dark .card:hover {
    border-color: rgba(255, 94, 196, 0.5);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 94, 196, 0.08));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 94, 196, 0.15);
}

.dark .icon {
    background: rgba(179, 184, 240, 0.12);
}

.icon.solid {
    background: var(--grad);
    box-shadow: 0 10px 24px rgba(255, 94, 196, 0.28);
}

/* Audience cards: indigo, pink, midnight, blush */
.persona-grid .card::before {
    background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.35), transparent 45%);
}

.persona-grid .card:nth-child(1) {
    --pg: linear-gradient(150deg, #2f39ba 0%, #15194f 100%);
    --ps: rgba(47, 57, 186, 0.38);
}

.persona-grid .card:nth-child(2) {
    --pg: linear-gradient(150deg, #c2389e 0%, #ff5ec4 100%);
    --ps: rgba(255, 94, 196, 0.36);
}

.persona-grid .card:nth-child(3) {
    --pg:
        radial-gradient(circle at 100% 100%, rgba(255, 94, 196, 0.45), transparent 60%),
        linear-gradient(150deg, #0a0a0a 0%, #2f39ba 100%);
    --ps: rgba(19, 17, 37, 0.35);
}

.persona-grid .card:nth-child(4) {
    --pg: linear-gradient(150deg, #ffdcff 0%, #ffc8eb 55%, #f092dd 100%);
    --ps: rgba(240, 146, 221, 0.4);
    color: #0a0a0a;
}

.persona-grid .card:nth-child(4) h3 {
    color: #0a0a0a;
}

.persona-grid .card:nth-child(4) p {
    color: rgba(19, 17, 37, 0.78);
}

.persona-grid .card:nth-child(4) .icon {
    background: rgba(255, 255, 255, 0.55);
}

/* Tool / Connect cards: every accent comes from the same palette */
.tool-grid .card:nth-child(1),
.connect-grid .card:nth-child(1) { --c: 47, 57, 186; }
.tool-grid .card:nth-child(2),
.connect-grid .card:nth-child(2) { --c: 255, 94, 196; }
.tool-grid .card:nth-child(3),
.connect-grid .card:nth-child(3) { --c: 21, 25, 79; }
.tool-grid .card:nth-child(4),
.connect-grid .card:nth-child(4) { --c: 194, 56, 158; }
.tool-grid .card:nth-child(5),
.connect-grid .card:nth-child(5) { --c: 85, 96, 224; }
.tool-grid .card:nth-child(6),
.connect-grid .card:nth-child(6) { --c: 240, 146, 221; }

/* Checklists and dots */
.checks li::before {
    box-shadow: 0 4px 10px rgba(255, 94, 196, 0.3);
}

/* Video gallery */
.vcard:hover {
    border-color: #c9ccf5;
}

.vcard-thumb::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
}

.vcard:hover .vcard-thumb::after {
    background: linear-gradient(180deg, rgba(47, 57, 186, 0.3) 0%, rgba(255, 94, 196, 0.25) 100%);
}

.vcard-tag {
    color: var(--brand);
}

.vcard-link:hover {
    color: #c2389e;
}

.vmodal::backdrop {
    background: rgba(0, 0, 0, 0.85);
}

.video-placeholder {
    background:
        radial-gradient(ellipse at 80% 80%, rgba(255, 94, 196, 0.4), transparent 60%),
        var(--ink-2);
}

.showcase-frame,
.caption-demo {
    border-color: rgba(179, 184, 240, 0.18);
    background: linear-gradient(135deg, rgba(47, 57, 186, 0.2), rgba(255, 94, 196, 0.08));
}

/* AI captions demo */
.demo-screen {
    background:
        radial-gradient(ellipse at 85% 90%, rgba(255, 94, 196, 0.4), transparent 60%),
        #0a0a0a;
}

.demo-summary-head span {
    background: #ffe6f5;
    color: #c2389e;
}

/* Bozu Connect mockup */
.ca-avatar {
    color: var(--brand);
}

.ca-item.active {
    background: linear-gradient(90deg, #ecedfb, #fff0f9);
}

.ca-dot {
    background: var(--pink);
}

/* Download */
.download-panel {
    border-color: #e4e5ef;
    background:
        radial-gradient(ellipse 60% 80% at 0% 0%, rgba(47, 57, 186, 0.12), transparent 70%),
        radial-gradient(ellipse 60% 80% at 100% 100%, rgba(255, 94, 196, 0.14), transparent 70%),
        #ffffff;
}

/* CTA */
.cta-band {
    background:
        radial-gradient(ellipse 55% 80% at 90% 100%, rgba(255, 94, 196, 0.35), transparent 70%),
        var(--ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(179, 184, 240, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(179, 184, 240, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 80%);
    pointer-events: none;
}

.cta-band>* {
    position: relative;
}

.cta-contact a:hover {
    color: #ffc8eb;
}

/* Footer */
.site-footer {
    position: relative;
    background:
        var(--ink-3);
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad);
}

.footer-col a:hover,
.footer-bottom a:hover {
    color: #ffc8eb;
}