/* ============================================================
   LUMIOTAX — Polish layer (additive, override-only)
   ------------------------------------------------------------
   Loaded AFTER tokens/base/components/landing. Pure enhancements:
   monoline icons, card depth, bento toolbox, stronger light mode,
   count-up figures, trust band, micro-interactions.
   Safe by design: only overrides — never required for content.
   Pairs with js/enhance.js.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

/* ---- 1. Deventia palette — paper light base + emerald accent
   + forest inks for the dark hero/CTA bands + Sora display.
   Scoped to :not(dark); enhance.js pins data-theme="light".   */
:root:not([data-theme="dark"]) {
  /* emerald accent (replaces teal jade) */
  --jade-700:#047857; --jade-600:#059669; --jade-500:#10B981;
  --jade-400:#34D399; --jade-100:#D6F5E1; --jade-glow:rgba(16,185,129,0.32);
  /* paper light base */
  --bg:#F7F8F5; --bg-soft:#EDF1EE; --surface:#FFFFFF; --surface-2:#F2F5F2;
  --border:#E3E8E3; --border-strong:#C9D2CC;
  --text:#14271F; --text-soft:#3A4C43; --text-faint:#64736B;
  --on-accent:#03110C;
  /* forest inks for the dark hero / CTA bands & mini-panel */
  --ink-900:#0C1A14; --ink-800:#10211A; --ink-700:#193029;
  --font-display:'Sora', system-ui, -apple-system, sans-serif;
  --page-wash:
    radial-gradient(1000px 560px at 12% -8%, rgba(16,185,129,0.07), transparent 60%),
    radial-gradient(820px 480px at 100% 0%, rgba(52,230,168,0.05), transparent 55%);
  --shadow-md: 0 4px 8px rgba(6,16,12,0.07), 0 24px 48px -24px rgba(6,16,12,0.14);
  --shadow-lg: 0 12px 30px rgba(6,16,12,0.12), 0 30px 60px -30px rgba(6,16,12,0.18);
  color-scheme: light;
}

/* ---- 2. Card depth & texture ------------------------------- */
.card {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 100%, transparent),
      color-mix(in srgb, var(--surface) 92%, var(--bg)));
}
/* hairline top highlight + jade ring on hover */
.card.card-hover { position: relative; }
.card.card-hover::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  pointer-events: none; opacity: .8;
}
[data-theme="dark"] .card.card-hover::after { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.card.card-hover:hover { border-color: color-mix(in srgb, var(--jade-600) 45%, var(--border-strong)); }

/* ---- 3. Monoline icon treatment --------------------------- */
.tool-icon.has-svg { display: grid; place-items: center; }
.tool-icon.has-svg svg {
  width: 24px; height: 24px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* give the WHY icons the same rounded jade chip as tool cards */
.why-grid .tool-icon {
  width: 52px; height: 52px; border-radius: 15px;
  background: var(--jade-100); color: var(--jade-700);
  display: grid; place-items: center; font-size: 1.4rem;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
[data-theme="dark"] .why-grid .tool-icon { background: rgba(15,181,166,0.14); color: var(--jade-400); }
.why-grid .tool-icon.has-svg svg, .tool-card .tool-icon.has-svg svg { width: 25px; height: 25px; }
/* icon pop on card hover */
.card-hover:hover .tool-icon { transform: translateY(-2px) scale(1.06); }
.tool-card .tool-icon { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }

/* ---- 4. Bento toolbox ------------------------------------- */
@media (min-width: 921px) {
  .tool-grid.bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--sp-5);
  }
  .tool-grid.bento > .tool-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .tool-grid.bento > .tool-card:nth-child(2) { grid-column: span 2; }
  .tool-grid.bento > .tool-card:nth-child(5) { grid-column: span 2; }
  .tool-grid.bento > .tool-card:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 920px) {
  .tool-grid.bento > .tool-card { grid-column: auto !important; grid-row: auto !important; }
}

/* featured (first) bento card — larger, with a product preview */
.tool-card.bento-feature {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(15,181,166,0.10), transparent 55%),
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 90%, var(--bg)));
  justify-content: flex-start;
}
.tool-card.bento-feature h4 { font-size: var(--fs-lg); }
.tool-card.bento-feature p { font-size: var(--fs-base); max-width: 42ch; }
.tool-card.bento-feature .tool-icon { width: 54px; height: 54px; font-size: 1.5rem; }

/* mini product preview panel inside the featured card */
.mini-preview {
  margin-top: auto; padding-top: var(--sp-4);
  display: flex; flex-direction: column; gap: .5rem;
}
.mini-panel {
  background: linear-gradient(160deg, var(--ink-900), var(--ink-700));
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.mini-panel .mp-label {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-300);
}
.mini-panel .mp-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--jade-400); line-height: 1.1; margin-top: 2px;
}
.mini-panel .mp-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-200);
  padding: .25rem 0; border-top: 1px solid rgba(255,255,255,.07);
}
.mini-panel .mp-row:first-of-type { border-top: none; }
.mini-panel .mp-row .ok { color: var(--jade-400); }
.mini-panel .mp-row .bad { color: var(--amber-400); }
.mini-panel .mp-live {
  position: absolute; top: .7rem; right: .8rem;
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .1em;
  color: var(--amber-400); display: inline-flex; align-items: center; gap: .3rem;
}
.mini-panel .mp-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber-500); box-shadow: 0 0 0 0 var(--amber-500);
  animation: mp-pulse 2s var(--ease) infinite;
}
@keyframes mp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(244,178,62,.5); }
  70% { box-shadow: 0 0 0 7px rgba(244,178,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,178,62,0); }
}

/* ---- 5. Hero demo: subtle "alive" border shimmer ---------- */
.demo-card::before { transition: opacity var(--dur) var(--ease); }
.demo-card:hover::before { opacity: 1; }
.hero-demo .badge-pro { position: relative; }

/* ---- 6. Trust / security band ----------------------------- */
.trust-band {
  border-top: 1px solid var(--border);
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(15,181,166,0.07), transparent 60%),
    var(--bg-soft);
  padding: var(--sp-8) 0;
}
.trust-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-7); align-items: center; }
.trust-head h2 { font-size: var(--fs-2xl); }
.trust-head p { margin-top: .7rem; max-width: 40ch; }
.trust-points { display: grid; gap: var(--sp-4); }
.trust-point { display: flex; gap: var(--sp-4); align-items: flex-start; }
.trust-ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--border); color: var(--jade-700);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .trust-ico { color: var(--jade-400); }
.trust-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trust-point h4 { font-family: var(--font-sans); font-weight: 650; font-size: var(--fs-base); margin-bottom: .15rem; }
.trust-point p { font-size: var(--fs-sm); margin: 0; }
@media (max-width: 860px) { .trust-inner { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---- 7. Count-up: prevent layout shift -------------------- */
.stat-num, #demoTax { font-variant-numeric: tabular-nums; }

/* ---- 8. Tonal contrast & navigability ---------------------
   A single dark theme reads flat if every band shares one tone.
   Add rhythm: lift cards, brighten the stats band, and drop ONE
   bright panel ("How it works") mid-page as a visual breath and
   focal contrast — the Linear/Stripe move on a dark site.       */

/* cards pop a little more above the slate */
.card { border-color: var(--border-strong); }
.why-grid .card:hover, .tool-card:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--jade-600) 55%, var(--border-strong)); }

/* brighter, higher-contrast stats band */
.stats-band {
  background:
    linear-gradient(120deg, rgba(15,181,166,0.18), rgba(244,178,62,0.12)),
    var(--surface);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

/* clearer separation between the dark bands */
.tools-band { border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }

/* BRIGHT PANEL — "How it works" on soft off-white for contrast.
   :has() is supported in this browser; if not, the section simply
   stays dark (graceful). All text is re-inked for the light bg.  */
.section:has(.how-grid) {
  background: linear-gradient(180deg, #F5F8FB, #E8EEF3);
  border-top: 1px solid #DCE3EA;
  border-bottom: 1px solid #DCE3EA;
}
.section:has(.how-grid) .eyebrow { color: var(--jade-700); }
.section:has(.how-grid) h2 { color: #0C141A; }
.section:has(.how-grid) .how-num { color: var(--jade-700); }
.section:has(.how-grid) .how-step { border-left-color: #C4D2D8; }
.section:has(.how-grid) .how-step h4 { color: #0F1820; }
.section:has(.how-grid) .how-step p { color: #46555F; }

/* trust band: lift it a touch off the footer for separation */
.trust-band { border-top: 1px solid var(--border-strong); }

/* ============================================================
   DEVENTIA SKIN — landing re-themed to deventia.co's language:
   paper light base + emerald accent + forest dark hero & CTA +
   Sora display. Light page with two dark "forest" bookends so it
   reads premium without feeling heavy.
   ============================================================ */
.hero-copy h1 em, .cta-band h2 em { font-style: normal; }

/* HERO → dark forest section with emerald glow */
.hero {
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(16,185,129,.16), transparent 50%),
    linear-gradient(180deg, #0C1A14 0%, #10211A 100%);
  color:#ECF3EF;
}
.hero-glow { display:none; }
/* hero background photo (hands/desk) + forest overlay for legibility */
/* pull the hero up UNDER the sticky nav so the transparent header sits
   over the dark hero (Deventia's margin-top:-69px trick) */
.hero { position:relative; margin-top:calc(var(--nav-h) * -1); padding-top:calc(var(--sp-9) + var(--nav-h)); }
.hero.has-bg .hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero.has-bg .hero-bg img { width:100%; height:100%; object-fit:cover; object-position:72% center; }
.hero.has-bg::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(110deg,
    rgba(9,24,17,.90) 0%, rgba(10,26,19,.64) 42%,
    rgba(12,40,30,.30) 72%, rgba(12,40,30,.08) 100%);
}
.hero-inner { position:relative; z-index:2; }
@media (max-width:900px){
  .hero.has-bg::after { background:linear-gradient(160deg, rgba(8,22,16,.92) 0%, rgba(9,24,17,.80) 55%, rgba(10,40,30,.50) 100%); }
}
.hero-copy h1 { color:#ECF3EF; }
.hero-copy h1 em { color:#34D399; }
.hero-copy .lead { color:#C2D1CA; }
.hero-copy .hint { color:#8FA39B !important; }
.hero .pill { background:rgba(16,185,129,.14); color:#6EE7B7; border:1px solid rgba(16,185,129,.28); }
/* ghost CTA is invisible on dark → re-ink for the forest hero */
.hero .btn-ghost { background:rgba(16,185,129,.06); color:#ECF3EF; border-color:rgba(255,255,255,.22); }
.hero .btn-ghost:hover { border-color:#34D399; color:#fff; }

/* the white demo card floats on the dark hero — keep its text dark */
.hero .demo-card { color:var(--text); }
.hero .demo-card .kpi-value { color:var(--text); }
.hero .demo-card .kpi-value.jade { color:var(--jade-700); }

/* NAV: blends over the dark hero (light text), solidifies to paper
   on scroll — the Deventia behaviour. enhance.js toggles .scrolled. */
.nav {
  background:transparent; border-bottom-color:transparent; box-shadow:none;
  transition:background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav .brand, .nav .brand span { color:#ECF3EF; }
.nav .nav-links > a, .nav .nav-trigger { color:#C8D6CD; }
.nav .nav-links > a:hover, .nav .nav-trigger:hover { color:#fff; }
.nav .lang-toggle { border-color:rgba(255,255,255,.28); }
.nav .lang-toggle button { color:#C8D6CD; }
.nav .nav-burger { color:#ECF3EF; }
/* scrolled → solid paper, dark text */
.nav.scrolled {
  background:rgba(247,248,245,.92); border-bottom-color:var(--border);
  box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
}
.nav.scrolled .brand, .nav.scrolled .brand span { color:var(--text); }
.nav.scrolled .nav-links > a, .nav.scrolled .nav-trigger { color:var(--text-soft); }
.nav.scrolled .nav-links > a:hover, .nav.scrolled .nav-trigger:hover { color:var(--text); }
.nav.scrolled .lang-toggle { border-color:var(--border-strong); }
.nav.scrolled .lang-toggle button { color:var(--text-faint); }
.nav.scrolled .nav-burger { color:var(--text-soft); }

/* STATS band → light, emerald-tinted */
.stats-band {
  background:
    linear-gradient(120deg, rgba(16,185,129,.09), rgba(52,230,168,.05)),
    var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stat-num { color:var(--jade-700); }

/* TOOLS band → soft paper */
.tools-band {
  background:
    radial-gradient(700px 380px at 85% 0%, rgba(16,185,129,.07), transparent 60%),
    var(--bg-soft);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* "How it works" → warm paper panel (re-tint section 8's cool blue) */
.section:has(.how-grid) {
  background:linear-gradient(180deg, #FFFFFF, #EDF1EE);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.section:has(.how-grid) h2 { color:var(--text); }
.section:has(.how-grid) .how-step h4 { color:var(--text); }
.section:has(.how-grid) .how-step p { color:var(--text-soft); }
.section:has(.how-grid) .how-step { border-left-color:var(--border-strong); }

/* CTA → forest emerald bookend */
.cta-band { background:linear-gradient(150deg, #0C1A14, #10211A); }
.cta-band h2 { color:#fff; }
.cta-band h2 em { color:#34D399; }

/* buttons → emerald */
.btn-primary { background:var(--jade-600); color:#fff; box-shadow:0 0 0 1px rgba(16,185,129,.18), 0 6px 22px rgba(16,185,129,.28); }
.btn-primary:hover { background:var(--jade-700); color:#fff; }
.btn-dark { background:#0C1A14; color:#fff; }
.btn-dark:hover { background:#10211A; }

/* trust band sits on the paper base */
.trust-band { border-top:1px solid var(--border); }

/* ============================================================
   ACOMODACIÓN — tighter rhythm & denser cards so blocks read
   intentional rather than floating in empty space.
   ============================================================ */
/* WHY: 3 across on desktop, less internal air → not empty-looking */
@media (min-width:1040px){ .why-grid { grid-template-columns:repeat(3,1fr); } }
.why-grid { gap:var(--sp-4); }
.why-grid .card { padding:var(--sp-5); }
.why-grid .tool-icon { width:46px; height:46px; margin-bottom:.7rem; }
.why-grid h4 { margin-bottom:.35rem; }
.why-grid p { font-size:var(--fs-sm); }

/* section intros: a touch tighter, consistent gap to the grid below */
.section .center.narrow { margin-bottom:var(--sp-6) !important; }

/* hero copy: tighter measure + a bit more room before the buttons */
.hero-copy .lead { max-width:50ch; }
.hero-copy .flex { margin-top:1.6rem !important; }

/* stats: a little more air around the band */
.stats-band { padding-block:var(--sp-7); }

/* bento gap consistent with the why grid */
@media (min-width:921px){ .tool-grid.bento { gap:var(--sp-4); } }

/* ---- compact the hero calculator so it fits the viewport ---- */
.demo-card { padding:var(--sp-5); }
.demo-card .demo-field { margin-bottom:var(--sp-3); }
.demo-card .demo-field label { margin-bottom:.3rem; font-size:var(--fs-sm); }
.demo-card .input, .demo-card .select { padding:.55rem .8rem; }
.demo-card .demo-result { margin-top:var(--sp-4); padding-top:var(--sp-4); }
.demo-card .kpi-value { font-size:1.55rem; }
.demo-card .demo-mini { gap:var(--sp-4); margin-top:var(--sp-2); }
.demo-card .demo-mini b { font-size:var(--fs-base); }
.demo-card .btn-dark { margin-top:var(--sp-4) !important; padding:.7rem 1rem; }