/* ==========================================================================
   KLINEA — premium elevation layer.
   Loaded after styles.css. Adds depth, material richness, confident scale,
   and cinematic motion without touching the token architecture or themes.
   Restraint over decoration: no glows, no gradients-as-color, no glass.
   ========================================================================== */

/* ---------- Refined material system: softer, deeper, layered ---------- */
:root {
  --shadow-sm: 0 1px 2px rgba(6,20,22,.05), 0 2px 6px -1px rgba(6,20,22,.05);
  --shadow-md: 0 2px 6px rgba(6,20,22,.04), 0 14px 30px -10px rgba(6,20,22,.13), 0 30px 60px -28px rgba(6,20,22,.10);
  --shadow-lg: 0 3px 8px rgba(6,20,22,.05), 0 26px 52px -18px rgba(6,20,22,.17), 0 64px 110px -50px rgba(6,20,22,.22);
  --shadow-float: 0 4px 10px rgba(6,20,22,.04), 0 34px 60px -22px rgba(6,20,22,.20), 0 80px 140px -70px rgba(8,90,80,.28);
  --ring: 0 0 0 1px rgba(6,20,22,.05);
  --band: #042420;              /* deeper jewel teal for expensive depth */
  --band-2: #0A3B34;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45), 0 18px 44px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.5), 0 50px 100px -40px rgba(0,0,0,.7);
  --shadow-float: 0 12px 34px rgba(0,0,0,.55), 0 70px 130px -60px rgba(0,0,0,.8), 0 0 0 1px rgba(92,228,209,.08);
  --ring: 0 0 0 1px rgba(236,245,243,.06);
  --band: #041d1a;
  --band-2: #062a26;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.ro-num, .amt, .t-count, .ro-label, .readout, .stat, td, .num-in input) { font-variant-numeric: tabular-nums; }

/* ---------- Typography: more confident display ---------- */
h1 { letter-spacing: -0.042em; }
.hero-copy h1 { font-size: clamp(46px, 5.6vw, 86px); line-height: 0.99; }
h2 { letter-spacing: -0.034em; }
.lede { color: var(--ink-soft); }

/* ---------- Header: crisper, more substantial when stuck ---------- */
.header { background: color-mix(in srgb, var(--bg) 72%, transparent); }
.header.stuck { background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 1px 0 var(--line), 0 12px 40px -24px rgba(8,25,27,0.35); }
.logo-mark { border-radius: 10px; box-shadow: var(--shadow-sm); }

/* ---------- Buttons: quiet depth, confident motion ---------- */
.btn { border-radius: 12px; padding: 16px 28px; transition: background 220ms var(--ease-expo), border-color 220ms var(--ease-expo), color 220ms var(--ease-expo), transform 220ms var(--ease-expo), box-shadow 220ms var(--ease-expo); }
.btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 2px 6px -1px rgba(8,90,80,.35), 0 12px 30px -12px rgba(8,90,80,.5); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 6px 14px -2px rgba(8,90,80,.4), 0 22px 44px -14px rgba(8,90,80,.55); }
.btn-outline { border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-sm { padding: 11px 18px; border-radius: 10px; }

/* ---------- Hero: cinematic, the palette floats as the centrepiece ---------- */
.hero { position: relative; padding-top: calc(var(--header-h) + clamp(64px, 9vw, 120px)); }
.hero-grid { align-items: center; gap: clamp(40px, 5.5vw, 88px); padding-bottom: clamp(60px, 7vw, 104px); }
.hero-copy .lede { margin-top: 28px; font-size: clamp(18px, 1.45vw, 21px); max-width: 52ch; }
.hero-ctas { margin-top: 40px; gap: 14px; }
/* soft ambient shelf beneath the palette — depth, not glow */
.palette { position: relative; border-radius: 20px; box-shadow: var(--shadow-float); border-color: color-mix(in srgb, var(--line-strong) 60%, transparent); }
.palette::after { content: ""; position: absolute; inset: auto 8% -22px 8%; height: 40px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(8,90,80,.16), transparent 70%); filter: blur(10px); z-index: -1; }
:root[data-theme="dark"] .palette::after, :root:not([data-theme="light"]) .palette::after { background: radial-gradient(ellipse at center, rgba(45,212,191,.12), transparent 70%); }
.palette-bar { padding: 19px 20px; }
.palette-query { font-size: 16px; }
.result-ic { box-shadow: var(--ring); }

/* ---------- Readout: larger, quietly luxurious ---------- */
.ro-num { font-size: clamp(48px, 5.2vw, 76px); letter-spacing: -0.045em; }
.ro-label { font-size: 12.5px; letter-spacing: 0; }
.readout-grid .ro { position: relative; }

/* ---------- Deep band: real material — subtle grain + inner light ---------- */
.band { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 15% 0%, var(--band-2), var(--band) 62%); }
.band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.band > .container { position: relative; z-index: 1; }

/* ---------- Product frames: float with depth ---------- */
.mod-view img, .frame-shot { border-radius: 16px; }
.mod-view { border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--line); }
.frame { border-radius: 18px; }
.frame .frame-shot { box-shadow: var(--shadow-lg); }

/* ---------- Pricing: the recommended plan has real presence ---------- */
.plan { border-radius: 18px; transition: transform 260ms var(--ease-expo), box-shadow 260ms var(--ease-expo); }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan.hi { box-shadow: var(--shadow-float); transform: translateY(-6px); }
.plan.hi:hover { transform: translateY(-10px); }
.amt { letter-spacing: -0.03em; }

/* ---------- App parity: elevate the working surfaces too ---------- */
.result-panel { border-radius: 16px; box-shadow: var(--shadow-md); }
.ix-card, .result-block { border-radius: 16px; }
.tile, .feat { }
.home-search { border-radius: 14px; box-shadow: var(--shadow-sm); }
.home-search:hover { box-shadow: var(--shadow-md); }

/* ---------- Motion: slower, cinematic reveals ---------- */
.js .reveal.in { transition: opacity 780ms var(--ease-expo), transform 780ms var(--ease-expo); }
.js .reveal.armed { transform: translateY(30px); }
@keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { animation: heroRise 900ms var(--ease-expo) both; }
  .js .hero-copy > *:nth-child(1) { animation-delay: 40ms; }
  .js .hero-copy > *:nth-child(2) { animation-delay: 130ms; }
  .js .hero-copy > *:nth-child(3) { animation-delay: 220ms; }
  .js .hero-copy > *:nth-child(4) { animation-delay: 300ms; }
  .js .hero .palette { animation: heroRise 1000ms var(--ease-expo) both; animation-delay: 240ms; }
}