/* ==========================================================================
   Open to the World brand overlay — loads AFTER site.css.
   Recolours the Next Digital blue/violet system to the Open to the World blue
   brand and adds the two small components this site introduces.
   ========================================================================== */

:root {
    --blue: #1188ff;
    --blue-soft: #4aa3ff;
    --violet: #0a5cd6;
    --violet-soft: #3f88ff;
    --accent: #0d78e0;
    --accent-quiet: #1188ff;

    --gradient: linear-gradient(135deg, #1188ff 0%, #0a5cd6 100%);
    --gradient-hover: linear-gradient(135deg, #0d78e0 0%, #0847a8 100%);
    --gradient-text: linear-gradient(120deg, #3f9bff 0%, #1188ff 58%, #0a5cd6 100%);
    --wash: linear-gradient(140deg, rgba(17, 136, 255, .06), rgba(10, 92, 214, .09));
    --line-strong: rgba(17, 136, 255, .30);
    --shadow-lift: 0 30px 70px rgba(17, 136, 255, .16);
}

html[data-theme="dark"] {
    --accent: #7ab8ff;
    --accent-quiet: #9ccaff;
    --wash: linear-gradient(140deg, rgba(74, 163, 255, .12), rgba(63, 136, 255, .12));
    --line-strong: rgba(63, 136, 255, .42);
    --shadow-lift: 0 30px 70px rgba(0, 0, 0, .62);
}

body {
    background:
        radial-gradient(64% 42% at 50% -6%, rgba(17, 136, 255, .10), transparent 70%),
        radial-gradient(38% 34% at 92% 8%, rgba(17, 136, 255, .08), transparent 72%),
        radial-gradient(40% 40% at 2% 58%, rgba(10, 92, 214, .06), transparent 76%),
        var(--page);
}

::selection { background: rgba(17, 136, 255, .22); }

/* Buttons: blue glow instead of the old violet glow (rest + hover). */
.btn-primary { box-shadow: 0 12px 28px rgba(17, 136, 255, .22); }
.btn-primary:hover { box-shadow: 0 16px 34px rgba(17, 136, 255, .32); }

/* Pillar card accents ("What we do") were hardcoded blue/violet — keep them on brand. */
.accent-violet { --accent: #1188ff; }
.accent-blue   { --accent: #0a5cd6; }
html[data-theme="dark"] .accent-violet { --accent: #7ab8ff; }
html[data-theme="dark"] .accent-blue   { --accent: #9cc4ff; }

/* Very mild hover motion on the cards: a soft lift with an eased icon nudge. */
.card, .pillar-card {
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .3s ease;
    will-change: transform;
}
.card .card-icon, .pillar-card .card-icon {
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), background .3s ease, color .3s ease, border-color .3s ease;
}
.card:hover .card-icon, .pillar-card:hover .card-icon { transform: translateY(-2px) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
    .card, .pillar-card, .card .card-icon, .pillar-card .card-icon { transition: none; }
    .card:hover .card-icon, .pillar-card:hover .card-icon { transform: none; }
}

/* Inline brand lockup: "OPEN TO THE" follows --ink, globe + "WORLD" stay blue. */
.brand-mark { height: 36px; width: auto; display: block; color: var(--ink); }
.mobile-menu-head .brand-mark { height: 24px; }
.footer-brand .brand-mark { height: 30px; }

/* Hero signal card (home) */
.signal-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 22px;
    display: grid;
    gap: 12px;
}
.signal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 17px;
}
.signal-head svg { width: 18px; height: 18px; color: var(--accent); }
.signal-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.signal-row svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.signal-row strong { display: block; color: var(--ink); font-size: 15px; }
.signal-row span { color: var(--muted); font-size: 13.5px; }
.signal-meter { height: 8px; border-radius: 999px; background: var(--wash); overflow: hidden; }
.signal-meter i { display: block; height: 100%; width: 78%; background: var(--gradient); border-radius: 999px; }

/* Founder block (about) */
.founder { align-items: center; gap: clamp(28px, 4vw, 56px); }
.founder-media { display: flex; justify-content: center; }
.founder-photo {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.founder-sign {
    font-family: Lora, Georgia, serif;
    color: var(--ink);
    font-size: 17px;
}
.founder-sign span { display: block; color: var(--muted); font-size: 13px; font-family: Inter, system-ui, sans-serif; letter-spacing: .04em; }

/* About intro — text left, image alone on the right */
.about-intro h2 { font-size: clamp(24px, 2.6vw, 33px); }
.about-intro .statement-rule { margin-top: 4px; }
.about-media { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.about-figure {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: #ffffff;
}