/* ============================================================
   IDENTITY B — "Claro"  ·  light, clean, approachable tech
   ============================================================ */
[data-theme="b"] {
  --font-head: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --bg: #FFFFFF;
  --bg-2: #F1F6FC;
  --surface: #FFFFFF;
  --surface-2: #F5F9FE;
  --text: #102844;
  --text-dim: #51668A;
  --text-faint: #93A6C4;

  --accent: #00B0F0;
  --accent-2: #1A3C6B;
  --accent-ink: #0A82C4;          /* deeper cyan for legible text on white */
  --accent-on: #FFFFFF;           /* text on accent fill */
  --accent-soft: rgba(0,176,240,.16);
  --accent-border: rgba(0,176,240,.5);

  --warn-ink: #C77A14;
  --icon-warn-bg: rgba(230,150,30,.12);
  --icon-bg: rgba(0,176,240,.10);

  --border: rgba(20,50,90,.10);
  --border-strong: rgba(20,50,90,.18);

  --nav-bg: rgba(255,255,255,.82);
  --chip-bg: rgba(20,60,110,.04);
  --float-bg: rgba(255,255,255,.86);
  --float-shadow: 0 24px 55px rgba(20,50,90,.16);
  --switch-bg: rgba(255,255,255,.92);
  --footer-bg: #0C2444;            /* dark footer anchors the light page */

  --mark-bg: linear-gradient(135deg, #00B0F0, #1A3C6B);
  --glow-btn: 0 12px 30px rgba(0,176,240,.28);
  --glow-btn-hover: 0 16px 40px rgba(0,176,240,.4);

  --visual-panel: linear-gradient(155deg, #15396a 0%, #0e2b54 55%, #0a2murky 100%);
  --visual-panel: linear-gradient(155deg, #15396a 0%, #0e2b54 60%, #0a2147 100%);
  --visual-shadow: 0 40px 90px rgba(20,50,90,.28);
  --card-sheen: linear-gradient(135deg, rgba(0,176,240,.06), transparent 55%);
  --card-hover-shadow: 0 28px 55px rgba(20,50,90,.14);
  --step-line: linear-gradient(90deg, transparent, rgba(0,176,240,.45), transparent);
  --step-dot-bg: linear-gradient(135deg, #00B0F0, #1A3C6B);

  --cta-bg: radial-gradient(130% 150% at 50% -30%, #1a4274 0%, #0f2c57 50%, #0a2147 100%);
  --cta-border: rgba(0,176,240,.3);
  --cta-shadow: 0 40px 100px rgba(20,50,90,.3);
  --cta-text: #F4FAFF;
  --cta-text-dim: #A9C2E0;
  --cta-btn: #00B0F0;
  --cta-btn-on: #FFFFFF;

  --ph-a: #e8f0fa;
  --ph-b: #f3f8fd;
  --ph-label: rgba(255,255,255,.85);
}

/* light footer text overrides (dark footer block) */
[data-theme="b"] .footer { --text-dim: #A9C2E0; --text-faint: #6E87AC; --border: rgba(255,255,255,.10); }
[data-theme="b"] .footer h4 { color: #6E87AC; }
[data-theme="b"] .footer .footer-brand .brand { color: #F4FAFF; }
[data-theme="b"] .footer .footer-brand .brand span { color: #4FD6FF; }

/* section rhythm */
[data-theme="b"] .alt { background: var(--bg-2); }
[data-theme="b"] .hero { background:
  radial-gradient(55% 50% at 85% 8%, rgba(0,176,240,.12), transparent 70%),
  radial-gradient(45% 55% at 0% 95%, rgba(26,60,107,.07), transparent 70%),
  var(--bg);
}
[data-theme="b"] .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(20,60,110,.10) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: radial-gradient(70% 70% at 60% 35%, #000 25%, transparent 72%);
}
[data-theme="b"] .hero-orb.o1 { width: 55%; height: 55%; top: -6%; right: -4%; background: radial-gradient(circle, rgba(0,176,240,.28), transparent 60%); }
[data-theme="b"] .hero-orb.o2 { width: 42%; height: 42%; bottom: 2%; left: 6%; background: radial-gradient(circle, rgba(26,60,107,.14), transparent 60%); }

/* on the dark hero panel, net + chips read on light bg */
[data-theme="b"] .hero-net line { stroke: #4FD6FF; opacity: .4; }
[data-theme="b"] .hero-net circle { fill: #4FD6FF; }
[data-theme="b"] .hero-chip { color: #F4FAFF; --text: #F4FAFF; background: rgba(16,40,75,.7); border-color: rgba(255,255,255,.16); }
[data-theme="b"] .hero-chip svg { color: #4FD6FF; }
[data-theme="b"] .founder-badge { background: rgba(255,255,255,.9); }