/* Rival AI site, 2026-10-21 "night ink + glass" layer, loaded after site.css on every page.
   Same language as the live demos and console (app.rivalais.com): night ink bands with a soft blue and
   cyan glow and fine grain, frosted glass cards with hairline borders and an inner highlight, Rival blue
   buttons with a soft glow. Structure, copy and images are untouched; removing this file restores the
   Mercury look exactly. Glass here is a web approximation (backdrop-filter), with solid fallbacks. */

:root {
  --ink: #070B1A;
  --glow-b: rgba(43, 89, 255, .30);
  --glow-c: rgba(92, 225, 255, .12);
  --hair: rgba(14, 20, 40, .07);
  --hair-d: rgba(255, 255, 255, .09);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sh-light: 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, .95), 0 30px 60px -36px rgba(23, 38, 99, .32);
  --sh-dark: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--hair-d), 0 40px 80px -40px rgba(0, 0, 0, .7);
}

body { background: #F4F6FD; }

/* ---------- light sections: cloud, with the faintest brand light ---------- */
.sec.light { background: linear-gradient(180deg, #F2F5FC 0%, #EDF1FA 100%); }
.sec.white {
  background:
    radial-gradient(1100px 520px at 8% 0%, rgba(43, 89, 255, .06), transparent 62%),
    radial-gradient(900px 520px at 96% 100%, rgba(92, 225, 255, .08), transparent 62%),
    #FAFBFE;
}

/* ---------- dark bands: night ink, glow and grain ---------- */
.sec.dark, .sec.navy, .foot { background-color: var(--ink); isolation: isolate; }
.sec.dark::after, .sec.navy::after, .foot::after, .hero.split::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--grain); background-size: 160px; opacity: .07; mix-blend-mode: overlay;
}
.foot { position: relative; }
.sec.dark > *, .sec.navy > *, .foot > * { position: relative; z-index: 1; }
/* the first dark band after light content gets the glow; bands that follow stay calm, so seams never show */
.sec.dark:not(.dark + .dark), .sec.navy {
  background-image:
    radial-gradient(900px 560px at 8% 38%, var(--glow-b), transparent 64%),
    radial-gradient(760px 460px at 94% 62%, var(--glow-c), transparent 64%);
}
/* closing call to action: a bloom behind the two cards */
#contact.sec.dark {
  background-image:
    radial-gradient(820px 420px at 50% 62%, rgba(43, 89, 255, .26), transparent 64%),
    radial-gradient(520px 300px at 70% 40%, rgba(92, 225, 255, .10), transparent 64%);
}
.foot {
  background-image: radial-gradient(900px 420px at 0% 100%, rgba(43, 89, 255, .16), transparent 62%);
}

/* ---------- hero: photography on night ink, a quiet blue bloom behind the words ---------- */
.hero.split { background: var(--ink); }
.hero.split .ph::after {
  background:
    linear-gradient(90deg, #070B1A 0%, rgba(7, 11, 26, .74) 16%, rgba(7, 11, 26, 0) 46%),
    linear-gradient(0deg, rgba(7, 11, 26, .78) 0%, rgba(7, 11, 26, 0) 32%),
    linear-gradient(180deg, rgba(7, 11, 26, .55) 0%, rgba(7, 11, 26, 0) 22%);
}
.hero.split::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: -10%; top: 18%; width: 70%; height: 70%;
  background:
    radial-gradient(closest-side at 40% 50%, rgba(43, 89, 255, .26), transparent 72%),
    radial-gradient(closest-side at 70% 70%, rgba(92, 225, 255, .08), transparent 70%);
}
.hero.split::after { display: block; z-index: 1; }
.hero.split .hero-in { z-index: 2; }
.hero h1 .soft { color: rgba(233, 236, 245, .62); }

/* ---------- navigation: frosted glass with a hairline ---------- */
.nav[data-on="dark"] {
  background: rgba(7, 11, 26, .66);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
}
.nav[data-on="light"] {
  background: rgba(250, 251, 254, .74);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(14, 20, 40, .07);
}

/* ---------- buttons ---------- */
.pill {
  background: linear-gradient(180deg, #4470FF 0%, #2B59FF 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 28px -12px rgba(43, 89, 255, .8);
  transition: box-shadow .3s var(--ease), transform .2s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.pill:hover { background: linear-gradient(180deg, #5580FF 0%, #3463FF 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 14px 34px -12px rgba(43, 89, 255, .9); }
.pill.ghost, .pill.quiet, .pill.line { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); background-image: none; }
.pill.ghost { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.pill.ghost:hover { background-color: rgba(255, 255, 255, .14); }
.light .pill.line, .white .pill.line, .light .pill.quiet, .white .pill.quiet { box-shadow: none; }

/* ---------- light glass cards ---------- */
.icard, .belief:not(.photo) {
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--sh-light);
}
.ui { border-color: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(14, 20, 40, .06), inset 0 1px 0 #fff, 0 24px 48px -28px rgba(23, 38, 99, .34); }
.fcard .vis, .sys .vis, .icard .im.uim {
  background:
    radial-gradient(420px 260px at 18% 0%, rgba(255, 255, 255, .85), transparent 70%),
    linear-gradient(160deg, #EAEFFB 0%, #DEE5F5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.fcard .vis.b, .sys:nth-child(4n+2) .vis, .sys:nth-child(4n+3) .vis, .icard:nth-child(2) .im.uim {
  background:
    radial-gradient(420px 260px at 82% 0%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(380px 260px at 20% 100%, rgba(92, 225, 255, .18), transparent 70%),
    linear-gradient(160deg, #E4ECF8 0%, #D6E1F2 100%);
}
.fcard .vis.g { background: radial-gradient(420px 260px at 50% 0%, rgba(43, 89, 255, .10), transparent 70%), linear-gradient(160deg, #F0F3FA, #E1E7F3); }
.fcard .vis.d, .duo .vis { background: radial-gradient(440px 280px at 30% 0%, rgba(43, 89, 255, .28), transparent 70%), linear-gradient(170deg, #1A2140, #0E1430); box-shadow: var(--sh-dark); }
.split-media { box-shadow: 0 0 0 1px var(--hair), 0 40px 80px -40px rgba(23, 38, 99, .45); }
.flow {
  background:
    radial-gradient(600px 300px at 50% 50%, rgba(43, 89, 255, .12), transparent 70%),
    linear-gradient(160deg, #E8EEFA, #DCE4F4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(255, 255, 255, .5);
}
.flow-col li { box-shadow: 0 0 0 1px rgba(14, 20, 40, .05), inset 0 1px 0 #fff, 0 12px 26px -20px rgba(23, 38, 99, .4); }
.flow-core {
  background: radial-gradient(240px 160px at 30% 0%, rgba(43, 89, 255, .35), transparent 70%), var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -24px rgba(43, 89, 255, .55);
}
.tags span { background: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px var(--hair), inset 0 1px 0 #fff; }
.leak .row { box-shadow: 0 0 0 1px rgba(14, 20, 40, .04), inset 0 1px 0 #fff; }
.steps .tag { background: rgba(43, 89, 255, .08); box-shadow: inset 0 0 0 1px rgba(43, 89, 255, .14); }

/* ---------- dark glass ---------- */
.tcard .vis {
  background: radial-gradient(320px 220px at 50% 0%, rgba(43, 89, 255, .22), transparent 70%), linear-gradient(180deg, #161D38, #0E1430);
  box-shadow: var(--sh-dark);
}
.ccard, .kpi {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  box-shadow: var(--sh-dark);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.ccard:first-child { background: radial-gradient(420px 240px at 0% 0%, rgba(43, 89, 255, .34), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); }
.belief.photo { box-shadow: var(--sh-dark); }
.dark .tags span, .navy .tags span, .duo ul.sig li, .acc-body .chips span { background: rgba(255, 255, 255, .04); }
.tabs button { transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.tabs button[aria-selected="true"] { box-shadow: 0 8px 24px -10px rgba(92, 225, 255, .45); }
.stage-glow { background: radial-gradient(closest-side, rgba(43, 89, 255, .26), rgba(92, 225, 255, .06) 60%, transparent); }
.acc-item.on .acc-btn .bul { background: var(--cyan); }
.light .acc-item.on .acc-btn .bul, .white .acc-item.on .acc-btn .bul { background: var(--blue); }

/* WhatsApp phone: a metal frame and a soft glow, like the live demo */
.phone {
  background: linear-gradient(150deg, #39405E 0%, #0B0F1F 32%, #0B0F1F 70%, #2A3150 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .18), 0 40px 90px -30px rgba(43, 89, 255, .55), 0 0 120px -40px rgba(92, 225, 255, .35);
}

/* stats: hairlines that fade at the ends */
.stats li { border-left-color: transparent; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .10), transparent) left / 1px 100% no-repeat; }
.stats li:first-child { background: none; }
.stats b small { color: #9DB1FF; }

/* ---------- calm motion: cards lift slightly on hover, desktop pointers only ---------- */
@media (hover: hover) and (pointer: fine) {
  .icard, .belief:not(.photo), .ccard, .tcard .vis, .fcard .vis, .sys .vis {
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  .icard:hover, .belief:not(.photo):hover, .fcard:hover .vis, .sys:hover .vis { transform: translateY(-3px); }
  .icard:hover, .belief:not(.photo):hover { box-shadow: 0 0 0 1px var(--hair), inset 0 1px 0 #fff, 0 40px 70px -36px rgba(23, 38, 99, .42); }
  .ccard:hover, .tcard:hover .vis { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .icard, .belief, .ccard, .tcard .vis, .fcard .vis, .sys .vis, .pill { transition: none !important; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav[data-on="dark"] { background: rgba(7, 11, 26, .97); backdrop-filter: none; }
  .nav[data-on="light"] { background: #FAFBFE; backdrop-filter: none; }
  .ccard, .kpi { backdrop-filter: none; background: #121933; }
  .icard, .belief:not(.photo), .tags span { background: #fff; }
}
/* phones: lighter glows (smaller blooms read stronger on narrow screens) */
@media (max-width: 640px) {
  .sec.dark:not(.dark + .dark), .sec.navy {
    background-image: radial-gradient(520px 420px at 0% 40%, rgba(43, 89, 255, .26), transparent 64%);
  }
  .hero.split::before { width: 120%; left: -30%; top: 30%; }
}
/* the intro "settle" zoom scales the photo past its frame; clip it so its edge never shows as a hairline */
.hero.split .ph { overflow: hidden; }