/* ============================================================
   BBE Buddy — PREMIUM POLISH LAYER
   Loaded last. Elevates the base brand without changing its
   colours, fonts, sizes or structure. Governing principles:

   1. DEPTH IS LAYERED, NEVER FLAT — every elevated surface uses
      a two-part shadow (a tight contact shadow + a soft ambient
      one) plus a 1px top inner highlight, so cards feel lit.
   2. SURFACES HAVE TEXTURE — saturated colour fields carry a
      barely-there grain so they read as printed matter, not flat
      digital fills.
   3. TYPE IS OPTICALLY TUNED — balanced wrapping, kerning and
      ligatures; headlines never leave orphans.
   4. MOTION IS PHYSICAL — hover lifts and settles on press with
      a soft spring curve; nothing snaps.
   5. EDGES ARE CRISP — hairlines do the framing; borders gain a
      faint warm inner light rather than a hard grey line.
   ============================================================ */

:root{
  --ease-spring: cubic-bezier(.2,.8,.2,1);
  --shadow-1: 0 1px 2px rgba(28,43,39,.06), 0 8px 20px -12px rgba(28,43,39,.18);
  --shadow-2: 0 2px 4px rgba(28,43,39,.07), 0 22px 44px -24px rgba(28,43,39,.30);
  --shadow-3: 0 3px 6px rgba(28,43,39,.08), 0 40px 80px -40px rgba(28,43,39,.42);
  --hl-top: inset 0 1px 0 0 rgba(255,255,255,.7);
}

/* 3 · optical type ------------------------------------------------ */
body{ font-feature-settings:"kern" 1,"liga" 1,"calt" 1; }
h1,h2,h3{ text-wrap:balance; }
p,.lead,.sub{ text-wrap:pretty; }

/* 2 · grain on colour fields -------------------------------------- */
.hero, .page-hero, .cta, .proof, .belief,
.band[style*="var(--ink)"], .auth-aside{ position:relative; }
.hero::before, .page-hero::before, .cta::before, .proof::before,
.belief::before, .band[style*="var(--ink)"]::before, .auth-aside::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:soft-light;
  background-image: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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
/* keep real content above the grain */
.hero > *, .page-hero > *, .cta > *, .proof > *, .belief > *,
.auth-aside > *{ position:relative; z-index:1; }
.hero .stripe, .page-hero .stripe, .cta .stripe{ z-index:2; }

/* 1 · layered depth on resting cards ------------------------------ */
.who-card, .price-card, .sec-card:not(.proof .sec-card),
.side .box, .servermap, .price-note, .stepper .st, .catalogue span,
.cockpit .col, .source-card{
  box-shadow: var(--shadow-1), var(--hl-top);
}
.price-card.feature{ box-shadow: var(--shadow-3), var(--hl-top); }
.chat-shell{ box-shadow: var(--shadow-3), var(--hl-top); }

/* hover: deepen + lift on the spring curve */
.who-card{ transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring); }
.who-card:hover{ box-shadow: var(--shadow-3), var(--hl-top); }
.source-card{ transition: border-color .2s, box-shadow .3s var(--ease-spring), transform .3s var(--ease-spring); }
.source-card:hover{ box-shadow: var(--shadow-2), var(--hl-top); transform:translateY(-2px); }

/* 4 · physical motion on interactive elements --------------------- */
.btn{ transition: transform .25s var(--ease-spring), background .2s, color .2s, box-shadow .25s var(--ease-spring); }
.btn:active{ transform:translateY(0) scale(.985); }
.prod-cell, .followup, .sso button, .interest label, .chip,
.flow-block, .bene .b{ transition: all .25s var(--ease-spring); }

/* refine the product grid hover into a lift */
.prod-cell:hover{ box-shadow: var(--shadow-2), var(--hl-top); transform:translateY(-3px); border-radius:14px; }

/* 5 · crisp, warm-lit edges --------------------------------------- */
.field input, .field select, .field textarea,
.auth-card input, .composer textarea{ box-shadow: var(--hl-top); }

/* nav gains a hair more presence once it sticks over content */
header.nav:not(.on-color){ box-shadow:0 1px 0 var(--line), 0 10px 30px -26px rgba(28,43,39,.5); }

/* belief band: lift the quote with a refined warm field */
.belief{ background:
  radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,#fff 22%, var(--gold)) 0%, var(--gold) 46%); }

/* hero: richer teal field with subtle vertical depth */
.hero, .page-hero{ background:
  linear-gradient(178deg, color-mix(in srgb,#fff 4%, var(--teal)) 0%, var(--teal) 42%, var(--teal-d) 100%); }

/* proof / ink sections: add depth gradient */
.proof{ background:
  radial-gradient(120% 90% at 90% 0%, color-mix(in srgb,var(--teal) 22%, var(--ink)) 0%, var(--ink) 60%); }

/* stat numbers + section headings: tighten rendering */
.stats .s b, .pp .big, .price-card .amt, .tiers .ti .v{ font-feature-settings:"tnum" 1; }

/* generous focus-visible ring everywhere for polish + a11y */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 30%,transparent);
  border-radius:8px;
}