/* =============================================================================
   landing-refresh.css — "composed authoritative minimal" PROOF SLICE
   -----------------------------------------------------------------------------
   Everything here is scoped under `body.lv2-refresh` and loaded AFTER
   landing-v2.css, so it overrides only the landing page. Remove the <link> and
   the `lv2-refresh` body class to fully revert. Nothing else inherits this.

   The register (Infobip-style): flat surfaces, ONE accent (Sozuri indigo, used
   flat — no rebrand), one radius scale, hairline borders, restraint. The only
   motion/glow lives in the contained hero showpiece.
   ============================================================================= */

body.lv2-refresh {
    /* Slightly cooler near-black for dark surfaces + a tighter radius scale */
    --rf-ink-black: #0b0d12;
    --rf-accent: #6366f1;
    --rf-accent-press: #4f46e5;
    --rf-r-card: 16px;
    --rf-r-btn: 12px;
    --rf-r-art: 12px;
}

/* ---------- 1. FLAT ACCENT — kill gradient/shimmer buttons ---------- */
body.lv2-refresh .lv2-btn { border-radius: var(--rf-r-btn); }
body.lv2-refresh .lv2-btn-primary {
    background: var(--rf-accent);
    box-shadow: none;
}
body.lv2-refresh .lv2-btn-primary:hover {
    background: var(--rf-accent-press);
    transform: none;
    box-shadow: 0 8px 22px -10px rgba(99, 102, 241, 0.75);
}
body.lv2-refresh .lv2-btn-primary::before { display: none; } /* remove sweep shimmer */

/* ---------- 2. FLAT HEADLINE HIGHLIGHT — one accent, no tri-gradient text ---------- */
body.lv2-refresh .lv2-hero h1 .lv2-grad {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: #a5b4fc; /* single light-indigo accent on the dark hero */
}

/* ---------- 3. HERO — composed near-black, one restrained glow ---------- */
body.lv2-refresh .lv2-hero {
    background:
        radial-gradient(62% 55% at 78% 12%, rgba(99, 102, 241, 0.20) 0%, transparent 60%),
        linear-gradient(180deg, var(--rf-ink-black) 0%, #0d1017 100%);
}
body.lv2-refresh .lv2-hero::before { opacity: 0.45; background-size: 72px 72px; } /* quieter grid */
body.lv2-refresh .lv2-hero h1 {
    letter-spacing: -0.02em;
    font-weight: 400; /* ~half the weight of the base 700 — sleek, light display heading */
}
body.lv2-refresh .lv2-hero p.lv2-sub { color: rgba(255, 255, 255, 0.68); }

/* ---------- 4. SECTION INTROS — a touch larger & calmer, still centered ---------- */
body.lv2-refresh .lv2-h2 { letter-spacing: -0.028em; }
body.lv2-refresh .lv2-eyebrow { letter-spacing: 0.16em; font-size: 11.5px; }
body.lv2-refresh .lv2-section-head { margin-bottom: 60px; }
body.lv2-refresh .lv2-lead { color: var(--ink-muted); }

/* ---------- 5. "BUILD WHAT MATTERS" — reframe the loud gradient card as a
              composed DARK showpiece sitting on the white section (Infobip move) ---------- */
body.lv2-refresh .lv2-bwm {
    background: var(--rf-ink-black);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 40px 90px -50px rgba(8, 11, 25, 0.8);
}
body.lv2-refresh .lv2-bwm::before {
    /* replace the twin white radials with one faint accent glow */
    background: radial-gradient(60% 70% at 85% 25%, rgba(99, 102, 241, 0.22) 0%, transparent 60%);
}
body.lv2-refresh .lv2-bwm p { color: rgba(255, 255, 255, 0.72); }
body.lv2-refresh .lv2-bwm .lv2-btn-primary { background: var(--rf-accent); color: #fff; box-shadow: none; }
body.lv2-refresh .lv2-bwm .lv2-btn-primary:hover { background: var(--rf-accent-press); color: #fff; }
body.lv2-refresh .lv2-bwm-art {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

/* ---------- 6. PRODUCT TOOLBOX — the rebuilt "systemized card grid" band ---------- */
body.lv2-refresh #toolbox .lv2-tile {
    background: #fff;
    backdrop-filter: none;
    border: 1px solid var(--border);
    border-radius: var(--rf-r-card);
    box-shadow: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body.lv2-refresh #toolbox .lv2-tile::after { display: none; } /* remove gradient hover-border */
body.lv2-refresh #toolbox .lv2-tile:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: 0 20px 44px -26px rgba(15, 23, 42, 0.35);
}
body.lv2-refresh #toolbox .lv2-tile-art {
    background: #f5f6fb;
    border: 1px solid var(--border);
    border-radius: var(--rf-r-art);
}

/* flagship tile → flat near-black, not a purple gradient */
body.lv2-refresh #toolbox .lv2-tile.lv2-tile-hero {
    background: var(--rf-ink-black);
    border-color: var(--rf-ink-black);
}
body.lv2-refresh #toolbox .lv2-tile.lv2-tile-hero .lv2-tile-art {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
body.lv2-refresh #toolbox .lv2-tile.lv2-tile-hero .lv2-tile-link { color: #a5b4fc; }

/* accent chip flat */
body.lv2-refresh #toolbox .lv2-tile .lv2-chip.lv2-chip-accent { background: var(--rf-accent); }

/* "Learn more →" — a clean, consistent action link */
body.lv2-refresh #toolbox .lv2-tile-link { font-weight: 600; color: var(--rf-accent); }
body.lv2-refresh #toolbox .lv2-tile-link:hover { color: var(--rf-accent-press); }