/* ==========================================================================
   vibrant.css — the bright, colourful layer over site.css + landing.css.
   Loaded last on every page. Colours only: layout stays in the base sheets.
   ========================================================================== */

:root {
  --bg: #0F0A24;
  --surface: #1A1238;
  --raised: #241A4A;
  --hairline: #3B2E6E;
  --divider: #2A2056;
  --text: #FFFFFF;
  --text2: #DCD5F5;
  --muted: #ADA2D6;
  --accent: #B9A6FF;
  --primary: #7C5CFF;

  --violet: #7C5CFF;
  --pink: #FF4FA3;
  --orange: #FF8A3D;
  --yellow: #FFD23F;
  --cyan: #22D3EE;
  --green: #34E3A4;
  --grad: linear-gradient(100deg, var(--violet) 0%, var(--pink) 55%, var(--orange) 100%);
  --grad-cool: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 100%);
}

/* --- Background: colour blobs behind everything ---------------------------- */

body {
  background:
    radial-gradient(900px 700px at 85% -5%, rgba(255, 79, 163, .35), transparent 60%),
    radial-gradient(800px 650px at -10% 10%, rgba(34, 211, 238, .25), transparent 60%),
    radial-gradient(1000px 800px at 50% 40%, rgba(124, 92, 255, .22), transparent 65%),
    radial-gradient(900px 700px at 100% 75%, rgba(255, 138, 61, .18), transparent 60%),
    radial-gradient(900px 700px at 0% 95%, rgba(52, 227, 164, .14), transparent 60%),
    var(--bg);
}

/* --- Header ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(15, 10, 36, .72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.brand__mark {
  background: var(--grad) !important;
  color: #fff !important;
}

/* --- Buttons and accents --------------------------------------------------- */

.btn-primary,
.plan__cta--primary {
  background: var(--grad);
  border: 0;
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(255, 79, 163, .55);
}

.btn-primary:hover,
.plan__cta--primary:hover {
  color: #fff;
  filter: brightness(1.08);
}

.btn-ghost {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
}

.eyebrow {
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__title-em,
.section__title em {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Hero phone: a glow behind it ------------------------------------------ */

.phone-wrap {
  position: relative;
}

.phone-wrap::before {
  content: "";
  position: absolute;
  inset: 8% -6% 4% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 79, 163, .55), rgba(124, 92, 255, .35) 55%, transparent);
  filter: blur(30px);
}

.phone {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 120px -20px rgba(124, 92, 255, .65);
}

.phone__rec-btn {
  background: var(--grad) !important;
}

.wave__bar {
  background: var(--grad-cool) !important;
}

/* --- Trust band: a full gradient strip ------------------------------------- */

.trust {
  background: var(--grad);
  border: 0;
}

.trust__inner,
.trust__x {
  color: #fff;
}

/* --- How it works: a colour per step --------------------------------------- */

.steps {
  border-top: 0;
  gap: 16px;
}

.step {
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: 4px solid var(--c, var(--violet));
}

.step__n {
  color: var(--c, var(--violet));
}

.step:nth-child(1) { --c: var(--cyan); }
.step:nth-child(2) { --c: var(--violet); }
.step:nth-child(3) { --c: var(--pink); }
.step:nth-child(4) { --c: var(--orange); }
.step:nth-child(5) { --c: var(--green); }

/* --- Cards: rounder, lighter ----------------------------------------------- */

.privacy,
.quantum__card,
.compare,
.plan,
.feature,
.faq__item {
  border-radius: 20px;
}

.privacy {
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(34, 211, 238, .18), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(255, 79, 163, .18), transparent 60%),
    var(--surface);
  border-color: rgba(255, 255, 255, .12);
}

.blob {
  border-color: rgba(34, 211, 238, .35) !important;
  background: rgba(34, 211, 238, .06) !important;
}

.masterkey {
  border-color: var(--pink) !important;
  box-shadow: 0 0 40px -10px rgba(255, 79, 163, .7);
}

.chip {
  border-color: rgba(34, 211, 238, .5);
  color: var(--cyan);
}

/* --- Comparison: VoiceJots column glows ------------------------------------ */

.compare__head-cell--vj,
.compare__cell--vj {
  background: linear-gradient(180deg, rgba(124, 92, 255, .22), rgba(255, 79, 163, .14));
}

.compare__head-title--vj {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.compare__mark--good { color: var(--green); }
.compare__mark--warn { color: var(--yellow); }
.compare__mark--bad { color: var(--pink); }

/* --- Features: a light section, full width --------------------------------- */

.section--features {
  --text: #1B1238;
  --text2: #4A3F6B;
  --muted: #6E6491;
  --surface: #FFFFFF;
  --hairline: #E6DEFF;
  color: var(--text);
  background: #F6F1FF;
  box-shadow: 0 0 0 100vmax #F6F1FF;
  clip-path: inset(0 -100vmax);
  padding-block: 112px;
}

.section--features .eyebrow {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
}

.feature {
  box-shadow: 0 12px 30px -18px rgba(76, 52, 160, .45);
  border-color: transparent;
}

.feature__icon {
  border: 0;
  color: #fff;
  background: var(--c, var(--violet));
  box-shadow: 0 8px 20px -8px var(--c, var(--violet));
}

.feature:nth-child(8n+1) { --c: var(--violet); }
.feature:nth-child(8n+2) { --c: var(--pink); }
.feature:nth-child(8n+3) { --c: var(--orange); }
.feature:nth-child(8n+4) { --c: #0EA5C6; }
.feature:nth-child(8n+5) { --c: #16B981; }
.feature:nth-child(8n+6) { --c: #E0A800; }
.feature:nth-child(8n+7) { --c: #E2368C; }
.feature:nth-child(8n+8) { --c: #5B3FE0; }

/* --- Audience: coloured labels --------------------------------------------- */

.audience__label { color: var(--c); }
.audience__item:nth-child(1) { --c: var(--cyan); }
.audience__item:nth-child(2) { --c: var(--pink); }
.audience__item:nth-child(3) { --c: var(--orange); }

/* --- Pricing: Pro gets a gradient border ----------------------------------- */

.plan {
  background: rgba(255, 255, 255, .04);
}

.plan--pro {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 30px 80px -30px rgba(255, 79, 163, .6);
}

.plan__label--pro {
  color: var(--pink);
}

.plan__badge {
  background: var(--grad) !important;
  color: #fff !important;
  border: 0 !important;
}

.plan__check {
  color: var(--green);
}

/* --- Closing banner -------------------------------------------------------- */

.closing {
  border-radius: 28px;
  background:
    radial-gradient(500px 300px at 90% 10%, rgba(255, 210, 63, .45), transparent 60%),
    var(--grad);
  box-shadow: 0 40px 100px -40px rgba(255, 79, 163, .8);
}

.closing__cta {
  border-radius: 999px;
  color: var(--violet);
}

.closing__cta:hover {
  color: var(--pink);
}

/* --- Legal pages: tinted table of contents --------------------------------- */

.doc__toc {
  background: rgba(124, 92, 255, .12);
  border-color: rgba(124, 92, 255, .35);
  border-radius: 16px;
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .2);
}

/* The step cards need air under the section head (the base sheet had a rule line there). */
.section--how .steps {
  margin-top: 40px;
}


/* --- Logo: the app icon ------------------------------------------------------ */

.brand__logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 14px -4px rgba(124, 92, 255, .8);
}