/* ============================================================
   Yesh — Landing site styles  ·  "Make it Yesh."
   AI-native energetic redesign — layered on yesh.css.
   Loaded ONLY by index.html, so the :root overrides below
   re-skin the landing page WITHOUT touching the product app.
   yesh.css derives its lime scale from --accent via live var(),
   so swapping --accent here electrifies every accent surface.
   ============================================================ */

/* ---------- Energetic landing palette ---------- */
:root {
  --yesh-lime:     #D7FF2F;
  --yesh-green:    #B6F500;
  --deep-black:    #07090A;
  --carbon:        #0C100C;
  --carbon-2:      #121711;
  --soft-cream:    #F6F3E8;
  --fresh-white:   #FFFFFF;
  --electric-mint: #7DFFC4;
  --signal-coral:  #FF5C5C;
  --soft-gray:     #D8D6CC;

  /* Re-map the shared accent to the brighter landing lime. */
  --accent:    #D7FF2F;
  --on-accent: #0B0E06;

  /* Section text system — flipped per-section by .sec-light.
     Base (no modifier) = dark surface, light text. */
  --l-bg:       var(--deep-black);
  --l-text:     #ECEFE3;
  --l-mute:     #A0A593;
  --l-faint:    #6C7160;
  --l-card:     rgba(255,255,255,.045);
  --l-card-2:   rgba(255,255,255,.07);
  --l-border:   rgba(255,255,255,.10);
  --l-border-2: rgba(255,255,255,.20);
  --l-glow:     rgba(215,255,47,.18);

  /* Module color-coding (pillars / agents) */
  --t-rev:  #D7FF2F;   /* revenue / core   */
  --t-rel:  #7DFFC4;   /* relationships    */
  --t-grow: #FF8A5C;   /* growth / market  */
  --t-sys:  #B9A8FF;   /* system / build   */

  --glass-blur: saturate(150%) blur(14px);
}

/* Light "fresh" sections flip the whole text + surface system. */
.sec-light {
  --l-bg:       var(--soft-cream);
  --l-text:     #14160E;
  --l-mute:     #5A5E50;
  --l-faint:    #8A8E7E;
  --l-card:     #FFFFFF;
  --l-card-2:   #FCFBF4;
  --l-border:   #E6E2D2;
  --l-border-2: #D6D1BD;
  --l-glow:     rgba(132,180,0,.18);
  background: var(--l-bg);
  color: var(--l-text);
}
.sec-light.sec-fresh { --l-bg: var(--fresh-white); background: var(--fresh-white); }

/* ---------- Base overrides (scoped to the landing body) ---------- */
.landing {
  background: var(--deep-black);
  color: var(--l-text);
  -webkit-font-smoothing: antialiased;
}
.landing h1, .landing h2, .landing h3, .landing h4 { color: var(--l-text); }
.landing p { color: var(--l-mute); }
.landing .muted { color: var(--l-faint); }
.landing .section { position: relative; z-index: 1; }
.landing ::selection { background: rgba(215,255,47,.28); color: #0B0E06; }

/* ---------- Yesh logo size modifiers ---------- */
.ylogo.lg { width: 46px; height: 46px; }
.ylogo.xl { width: 78px; height: 78px; filter: drop-shadow(0 8px 30px rgba(215,255,47,.30)); }
.ms-logo  { display: block; width: 22px; height: 22px; }

/* ---------- Brand-word + dark/light helpers ---------- */
.grad {
  color: var(--yesh-lime);
  text-shadow: 0 0 30px rgba(215,255,47,.45), 0 0 8px rgba(215,255,47,.35);
  font-style: normal;
}
.sec-light .grad { color: #5C8A00; text-shadow: none; }
.on-dark { color: #F4F1E8; }
.on-dark-sub { color: #B4B8A6; }

/* Eyebrow — bright on dark, deep olive-lime on cream */
.eyebrow { color: var(--yesh-lime); }
.eyebrow::before { background: linear-gradient(90deg, var(--yesh-lime), var(--electric-mint)); height: 2px; }
.sec-light .eyebrow { color: #4E7A00; }
.eyebrow.light { color: var(--yesh-lime); }
.eyebrow.light::before { background: linear-gradient(90deg, var(--yesh-lime), var(--electric-mint)); }

/* ---------- Button restyles for the electric system ---------- */
.btn-primary {
  background: var(--yesh-lime); color: var(--on-accent);
  box-shadow: 0 0 0 1px rgba(215,255,47,.55), 0 10px 30px rgba(182,245,0,.30);
}
.btn-primary:hover {
  background: #E4FF55;
  box-shadow: 0 0 0 1px rgba(215,255,47,.7), 0 14px 42px rgba(182,245,0,.45);
  transform: translateY(-1px);
}
.btn-ghost {
  background: rgba(255,255,255,.05); color: var(--l-text);
  border-color: var(--l-border-2); backdrop-filter: var(--glass-blur);
}
.btn-ghost:hover { border-color: var(--yesh-lime); background: rgba(215,255,47,.10); color: #F4FFD6; }
.sec-light .btn-ghost { background: #fff; color: #14160E; border-color: var(--l-border-2); }
.sec-light .btn-ghost:hover { border-color: #9CC400; background: #F7FBE6; color: #355200; }
.btn-soft { background: rgba(215,255,47,.12); color: var(--yesh-lime); }
.btn-soft:hover { background: rgba(215,255,47,.20); }
.sec-light .btn-soft { background: rgba(132,180,0,.14); color: #4E7A00; }
.btn-quiet { color: var(--l-text); opacity: .82; }
.btn-quiet:hover { background: rgba(255,255,255,.07); opacity: 1; }

/* ---------- Badge restyles (work on dark + light) ---------- */
.badge {
  background: rgba(215,255,47,.12); color: var(--yesh-lime);
  border: 1px solid rgba(215,255,47,.24); backdrop-filter: var(--glass-blur);
}
.sec-light .badge { background: rgba(132,180,0,.12); color: #3F6300; border-color: rgba(132,180,0,.28); }
.badge.gold { background: rgba(125,255,196,.12); color: var(--electric-mint); border-color: rgba(125,255,196,.26); }
.sec-light .badge.gold { background: rgba(20,150,110,.10); color: #0C8A62; border-color: rgba(20,150,110,.22); }
.badge.neg { background: rgba(255,92,92,.14); color: #FF8585; border-color: rgba(255,92,92,.30); }
.badge.gray { background: rgba(255,255,255,.06); color: var(--l-mute); border-color: var(--l-border); }
.sec-light .badge.gray { background: #EEEADB; color: #6E6B60; border-color: #E2DDCE; }
.badge.pos { background: rgba(110,230,140,.14); color: #7DEBA0; border-color: rgba(110,230,140,.28); }
.sec-light .badge.pos { background: rgba(47,143,91,.12); color: #2F8F5B; border-color: rgba(47,143,91,.24); }

/* ============================================================
   NAV — dark glass, always
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,10,9,.55);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.nav.scrolled {
  border-bottom-color: rgba(255,255,255,.08);
  background: rgba(8,10,9,.80);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.nav-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.nav .brand .name { color: var(--l-text); }
.nav .brand .name b { color: var(--yesh-lime); }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: 10px; }
.nav-links a { font-size: .93rem; font-weight: 500; color: #B7BBAB; transition: color .14s ease; }
.nav-links a:hover { color: var(--yesh-lime); }
.nav-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-burger { display: none; font-size: 1.4rem; line-height: 1; padding: 6px 10px; border-radius: var(--r-sm); color: var(--l-text); }
.nav-burger:hover { background: rgba(255,255,255,.08); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; padding: 86px 0 56px; isolation: isolate; }
.hero::before {                    /* faint futuristic grid */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(125% 85% at 50% 0%, #000 32%, transparent 76%);
  mask-image: radial-gradient(125% 85% at 50% 0%, #000 32%, transparent 76%);
}
.hero-glow {
  position: absolute; inset: -12% -8% auto -8%; height: 820px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(640px 440px at 16% 6%, rgba(215,255,47,.22), transparent 60%),
    radial-gradient(560px 440px at 88% 2%, rgba(125,255,196,.14), transparent 62%),
    radial-gradient(760px 560px at 62% 116%, rgba(182,245,0,.10), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: center;
}
.hero-copy .badge { margin-bottom: 22px; }
.hero-copy h1 { margin-bottom: 20px; font-size: clamp(2.7rem, 5.6vw, 4.7rem); line-height: 1.04; }
.lede { font-size: 1.17rem; color: #C6CAB8; max-width: 48ch; margin-bottom: 26px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.hero-micro { font-size: .92rem; color: var(--l-faint); max-width: 50ch; margin-bottom: 14px; }
.hero-note { font-size: 1rem; color: #8C9079; }

/* --- Product preview mock (bright glass screen on dark) --- */
.hero-mock { position: relative; z-index: 2; }
.mock-win {
  position: relative; z-index: 3;
  background: var(--surface); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(215,255,47,.10),
    0 40px 90px -20px rgba(0,0,0,.75),
    0 18px 40px -18px rgba(182,245,0,.22);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.hero-mock:hover .mock-win { transform: translateY(-4px); }
.mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-2);
}
.mock-bar .tl { width: 11px; height: 11px; border-radius: 50%; background: #E2E6EF; }
.mock-bar .tl:nth-child(1) { background: #F2B8B5; }
.mock-bar .tl:nth-child(2) { background: #F7DFA6; }
.mock-bar .tl:nth-child(3) { background: #B7E0C2; }
.mock-url { margin-left: 10px; font-size: .76rem; color: var(--faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mock-body { display: grid; grid-template-columns: 132px 1fr; min-height: 322px; }
.mock-body.mock-ss { display: block; min-height: 0; }
.mock-body.mock-ss img { width: 100%; height: auto; display: block; }
.mock-side { background: var(--surface-2); border-right: 1px solid var(--line-2); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.ms-brand { padding: 2px 6px 12px; }
.ms-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); padding: 7px 9px; border-radius: var(--r-xs); font-weight: 500; }
.ms-item .ic { font-size: 1rem; }
.ms-item.active { background: var(--brand-50); color: var(--brand-ink); font-weight: 600; }
.ms-item.gold { color: var(--ink-2); }
.mock-main { padding: 18px; }
.mock-h { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; color: var(--ink); margin-bottom: 14px; letter-spacing: -.01em; }
.mock-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.mk { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 11px; background: var(--surface); }
.mk span { display: block; font-size: .68rem; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.mk b { display: block; font-size: 1.04rem; color: var(--ink); margin: 3px 0 1px; letter-spacing: -.01em; }
.mk i { font-style: normal; font-size: .7rem; color: var(--muted); }
.mk i.up { color: var(--pos); }
.mock-cards { display: grid; grid-template-columns: 1fr .92fr; gap: 10px; }
.mc { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px; background: var(--surface); }
.mc-h { display: flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: var(--ink-2); margin-bottom: 9px; }
.mc-h .ic { font-size: .95rem; }
.mc-kanban { display: flex; gap: 5px; margin-bottom: 10px; }
.kchip { font-size: .64rem; font-weight: 600; padding: 3px 8px; border-radius: var(--pill); background: var(--line-2); color: var(--muted); }
.kchip.kwon { background: var(--pos-bg); color: var(--pos); }
.kdeal { border-top: 1px solid var(--line-2); padding-top: 8px; margin-top: 6px; }
.kdeal b { display: block; font-size: .78rem; color: var(--ink); }
.kdeal span { font-size: .68rem; color: var(--muted); }
.gold-card { background: linear-gradient(160deg, #F2FFD4, #fff); border-color: #DCEFA6; }
.mc-p { font-size: .8rem; color: var(--ink-2); font-style: italic; line-height: 1.4; }
.mc-act { margin-top: 10px; font-size: .72rem; font-weight: 700; color: var(--brand-ink); }
.mock-spark {
  position: absolute; z-index: 1; right: -40px; bottom: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(215,255,47,.45), transparent 68%);
  filter: blur(14px); animation: sparkle 5s ease-in-out infinite;
}

/* --- Floating orbit proof points --- */
.hero-orbit { position: absolute; inset: -34px -46px; z-index: 4; pointer-events: none; }
.orb {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px 8px 10px; border-radius: var(--pill);
  background: rgba(14,18,12,.74); border: 1px solid var(--l-border-2);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
  font-size: .8rem; font-weight: 600; color: #EDF1E2; white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.orb .ic { font-size: 1rem; color: var(--yesh-lime); }
.orb .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--electric-mint); box-shadow: 0 0 8px var(--electric-mint); animation: pulse 2.4s ease-in-out infinite; }
.orb:nth-child(1) { top: 4%;  left: -6%;  animation-delay: 0s; }
.orb:nth-child(2) { top: -3%; right: 2%;  animation-delay: .8s; }
.orb:nth-child(3) { top: 38%; left: -11%; animation-delay: 1.6s; }
.orb:nth-child(4) { top: 30%; right: -9%; animation-delay: .4s; }
.orb:nth-child(5) { bottom: 16%; left: -8%; animation-delay: 2.1s; }
.orb:nth-child(6) { bottom: -2%; right: 6%; animation-delay: 1.2s; }
.orb:nth-child(7) { bottom: 30%; right: -11%; animation-delay: 2.6s; }

/* heritage strip */
.heritage { position: relative; z-index: 2; margin-top: 52px; text-align: center; }
.heritage-label { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--l-faint); margin-bottom: 14px; }
.heritage-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.heritage-logos span { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: #6F7363; opacity: .8; transition: color .15s ease, opacity .15s ease; }
.heritage-logos span:hover { color: var(--electric-mint); opacity: 1; }
.heritage-logos i { color: rgba(255,255,255,.16); font-style: normal; }

/* ============================================================
   SECTION HEADS + surfaces
   ============================================================ */
.sec-head { max-width: 780px; margin: 0 auto 48px; }
.sec-head .eyebrow { margin-bottom: 16px; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.sec-sub { font-size: 1.1rem; margin-top: 14px; color: var(--l-mute); }

.sec-light { border-top: 1px solid rgba(0,0,0,.05); border-bottom: 1px solid rgba(0,0,0,.05); }
.sec-dark {
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(215,255,47,.10), transparent 60%),
    radial-gradient(700px 460px at 85% 110%, rgba(125,255,196,.07), transparent 62%),
    linear-gradient(180deg, var(--carbon-2), var(--deep-black));
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ============================================================
   PROBLEM — chaotic "before" → glowing "after"
   ============================================================ */
#problem {
  background:
    radial-gradient(700px 460px at 14% 12%, rgba(255,92,92,.07), transparent 58%),
    radial-gradient(680px 500px at 88% 88%, rgba(215,255,47,.10), transparent 60%),
    linear-gradient(180deg, var(--deep-black), var(--carbon));
}
.problem-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: stretch; }
.ps-card {
  background: var(--l-card); border: 1px solid var(--l-border);
  border-radius: var(--r-xl); padding: 26px; backdrop-filter: var(--glass-blur);
}
.ps-before { position: relative; overflow: hidden; }
.ps-before .badge { margin-bottom: 18px; }
.chaos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chaos span {
  font-size: .82rem; color: #C9CBBE; background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.20); border-radius: var(--r-xs); padding: 6px 10px;
  transform: rotate(-1.5deg);
}
.chaos span:nth-child(even) { transform: rotate(1.6deg); }
.chaos span:nth-child(3n) { transform: rotate(-2.4deg); border-color: rgba(255,92,92,.30); color: #E9B6B6; }
.worries { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.worry { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: #D6D8CC; }
.worry::before {
  content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  color: #2A0C0C; background: var(--signal-coral); box-shadow: 0 0 12px rgba(255,92,92,.5);
}
.ps-cost { font-size: .9rem; color: #FF8585; font-weight: 700; }
.ps-arrow {
  align-self: center; font-size: 1.7rem; color: var(--yesh-lime); font-weight: 700;
  filter: drop-shadow(0 0 12px rgba(215,255,47,.5)); animation: nudge 2.4s ease-in-out infinite;
}
.ps-after {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  border-color: rgba(215,255,47,.30);
  box-shadow: 0 0 0 1px rgba(215,255,47,.18), 0 30px 70px -28px rgba(182,245,0,.40);
  background:
    radial-gradient(360px 240px at 30% 0%, rgba(215,255,47,.12), transparent 62%),
    var(--l-card);
}
.ps-after .badge { margin-bottom: 6px; }
.after-core { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; }
.after-core .core-ring {
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg, var(--yesh-lime), var(--yesh-green));
  box-shadow: 0 0 0 1px rgba(215,255,47,.5), 0 0 40px rgba(182,245,0,.55);
}
.after-core .core-ring img { width: 34px; height: 34px; }
.after-core b { font-family: var(--font-display); font-size: 1.7rem; color: var(--l-text); }
.ps-after-p { margin: 8px 0 16px; color: var(--l-mute); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 6px; margin-bottom: 18px; }
.flow .step {
  font-size: .76rem; font-weight: 600; color: #DDE7C4; padding: 5px 10px; border-radius: var(--pill);
  background: rgba(215,255,47,.10); border: 1px solid rgba(215,255,47,.22);
}
.flow .arrow { color: var(--electric-mint); font-size: .8rem; opacity: .8; }

/* ============================================================
   PILLARS — fresh "operating control center"
   ============================================================ */
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar {
  position: relative; background: var(--l-card); border: 1px solid var(--l-border);
  border-radius: var(--r-lg); padding: 24px 22px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,18,12,.05);
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.pillar::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--tone, var(--t-rev)); opacity: .9;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -18px rgba(0,0,0,.20), 0 0 0 1px var(--l-border-2); border-color: transparent; }
.pillar:hover::after { transform: scaleX(1); }
.pillar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.p-ico {
  width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: 1.3rem; color: var(--tone, var(--t-rev));
  background: color-mix(in srgb, var(--tone, var(--t-rev)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, var(--t-rev)) 34%, transparent);
  transition: transform .2s ease;
}
.pillar:hover .p-ico { transform: translateY(-2px) rotate(-4deg); }
.p-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--l-faint); opacity: .5; letter-spacing: -.02em; }
.p-name { font-size: 1.05rem; font-weight: 700; color: var(--l-text); margin-bottom: 7px; letter-spacing: -.01em; }
.p-desc { font-size: .9rem; color: var(--l-mute); line-height: 1.55; }
.p-status { margin-top: 16px; }

/* ============================================================
   LAYERS — architectural, dark
   ============================================================ */
#layers { background: linear-gradient(180deg, var(--deep-black), var(--carbon)); }
#layers::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 80%);
}
.layers-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.layer {
  background: var(--l-card); border: 1px solid var(--l-border); border-radius: var(--r-lg);
  padding: 24px 18px; text-align: center; backdrop-filter: var(--glass-blur);
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.layer:hover { transform: translateY(-4px); border-color: rgba(215,255,47,.35); background: var(--l-card-2); box-shadow: 0 24px 50px -22px rgba(182,245,0,.30); }
.l-letter {
  width: 50px; height: 50px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  background: rgba(215,255,47,.10); color: var(--yesh-lime);
  border: 1px solid rgba(215,255,47,.3); box-shadow: 0 0 24px rgba(182,245,0,.25), inset 0 0 14px rgba(215,255,47,.10);
}
.l-name { font-size: .98rem; font-weight: 700; color: var(--l-text); margin-bottom: 6px; }
.l-desc { font-size: .84rem; color: var(--l-mute); line-height: 1.5; }

/* ============================================================
   AI AGENTS — neon, command orb
   ============================================================ */
#agents { overflow: hidden; }
.agents-orb {
  position: relative; width: 120px; height: 120px; margin: 0 auto 30px;
  display: grid; place-items: center;
}
.agents-orb .orb-core {
  width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  font-size: 2rem; color: var(--on-accent);
  background: radial-gradient(circle at 35% 30%, #ECFFA6, var(--yesh-lime) 55%, var(--yesh-green));
  box-shadow: 0 0 0 1px rgba(215,255,47,.6), 0 0 50px rgba(182,245,0,.6);
  z-index: 2; animation: bob 4.5s ease-in-out infinite;
}
.agents-orb .orb-ring {
  position: absolute; inset: 0; margin: auto; width: 70px; height: 70px; border-radius: 50%;
  border: 1px solid rgba(215,255,47,.5); animation: ringPulse 3.2s ease-out infinite;
}
.agents-orb .orb-ring.r2 { animation-delay: 1.05s; }
.agents-orb .orb-ring.r3 { animation-delay: 2.1s; }
.agents-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 38px; }
.agent {
  position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-lg); padding: 22px; backdrop-filter: blur(6px);
  transition: transform .16s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.agent:hover {
  transform: translateY(-4px); border-color: rgba(215,255,47,.45); background: rgba(255,255,255,.07);
  box-shadow: 0 26px 54px -24px rgba(182,245,0,.4);
}
.a-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.a-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.a-ico {
  width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 1.3rem;
  color: var(--cat, var(--yesh-lime));
  background: color-mix(in srgb, var(--cat, var(--yesh-lime)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat, var(--yesh-lime)) 34%, transparent);
}
.a-cat { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cat, var(--yesh-lime)); opacity: .9; }
.a-live { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--yesh-lime); display: inline-flex; align-items: center; gap: 5px; }
.a-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yesh-green); box-shadow: 0 0 10px var(--yesh-green); animation: pulse 2.2s ease-in-out infinite; }
.a-soon { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8C9079; display: inline-flex; align-items: center; gap: 5px; }
.a-soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6C7160; }
.a-name { font-size: 1.04rem; font-weight: 700; color: #fff; margin: 4px 0 7px; letter-spacing: -.01em; }
.a-desc { font-size: .88rem; color: #ADB19F; line-height: 1.5; }
.agents-cta { margin-top: 6px; }

/* ============================================================
   DIFFERENTIATORS — fresh
   ============================================================ */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.diff {
  position: relative; background: var(--l-card); border: 1px solid var(--l-border);
  border-radius: var(--r-lg); padding: 26px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,18,12,.05);
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.diff:hover { transform: translateY(-4px); box-shadow: 0 22px 46px -20px rgba(0,0,0,.22); border-color: var(--l-border-2); }
.d-ico {
  font-size: 1.55rem; margin-bottom: 16px; display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--r-sm);
  color: var(--tone, var(--t-rev));
  background: color-mix(in srgb, var(--tone, var(--t-rev)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, var(--t-rev)) 32%, transparent);
}
.d-title { font-size: 1.1rem; font-weight: 700; color: var(--l-text); margin-bottom: 9px; letter-spacing: -.01em; }
.d-desc { font-size: .92rem; color: var(--l-mute); line-height: 1.6; }

/* ============================================================
   PRICING — fresh, glowing featured plan
   ============================================================ */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; max-width: 860px; margin: 0 auto 40px; }
.compare .cmp {
  border-radius: var(--r-lg); padding: 20px 22px; border: 1px solid var(--l-border); background: var(--l-card);
}
.compare .cmp.bad { border-color: rgba(192,71,63,.30); background: color-mix(in srgb, var(--signal-coral) 7%, var(--l-card)); }
.compare .cmp.good { border-color: rgba(132,180,0,.35); background: color-mix(in srgb, var(--yesh-green) 9%, var(--l-card)); box-shadow: 0 0 0 1px rgba(132,180,0,.18); }
.cmp-k { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--l-faint); }
.cmp-amt { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--l-text); margin: 6px 0 4px; letter-spacing: -.01em; }
.cmp-amt.bad { color: #B5483F; }
.cmp-amt.good { color: #4E7A00; }
.cmp p { font-size: .86rem; color: var(--l-mute); }
.compare .vs { align-self: center; font-family: var(--font-display); font-weight: 700; color: var(--l-faint); }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.price {
  display: flex; flex-direction: column; background: var(--l-card); border: 1px solid var(--l-border);
  border-radius: var(--r-lg); padding: 28px 22px; box-shadow: 0 1px 2px rgba(20,18,12,.05); position: relative;
  transition: transform .16s ease, box-shadow .2s ease;
}
.price:hover { transform: translateY(-4px); box-shadow: 0 22px 46px -20px rgba(0,0,0,.2); }
.price.featured {
  border-color: rgba(132,180,0,.5);
  box-shadow: 0 0 0 2px rgba(182,245,0,.5), 0 30px 60px -24px rgba(182,245,0,.5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--yesh-green) 8%, var(--l-card)), var(--l-card));
}
.price-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--yesh-lime); color: var(--on-accent); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 13px; border-radius: var(--pill);
  box-shadow: 0 6px 18px rgba(182,245,0,.45);
}
.price-tier { font-family: var(--font-display); font-size: 1.14rem; font-weight: 700; color: var(--l-text); }
.price-for { font-size: .82rem; color: var(--l-mute); margin-top: 2px; min-height: 34px; }
.price-amt { margin: 16px 0 4px; }
.price-amt b { font-size: 2.2rem; font-weight: 800; color: var(--l-text); letter-spacing: -.02em; }
.price-amt span { font-size: .9rem; color: var(--l-mute); }
.price-feats { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 22px; }
.price-feats li { font-size: .88rem; color: var(--l-mute); display: flex; gap: 9px; align-items: flex-start; }
.price-feats li::before { content: "✓"; color: #4E7A00; font-weight: 800; flex: none; }
.price .btn { margin-top: auto; }

/* ============================================================
   ECOSYSTEM — connected diagram, dark
   ============================================================ */
#ecosystem { background: linear-gradient(180deg, var(--carbon), var(--deep-black)); }
.eco-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; }
.eco {
  text-align: left; position: relative; background: var(--l-card); border: 1px solid var(--l-border);
  border-radius: var(--r-lg); padding: 24px; backdrop-filter: var(--glass-blur);
  transition: transform .16s ease, border-color .2s ease;
}
.eco:hover { transform: translateY(-3px); border-color: var(--l-border-2); }
.eco-k { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--l-faint); }
.eco-k.gold { color: var(--electric-mint); }
.eco h3 { margin: 10px 0 8px; color: var(--l-text); }
.eco p { font-size: .92rem; color: var(--l-mute); }
.eco p i { font-family: var(--font-serif); }
.eco-active {
  border-color: rgba(215,255,47,.4);
  box-shadow: 0 0 0 1px rgba(215,255,47,.22), 0 30px 64px -26px rgba(182,245,0,.45);
  background: radial-gradient(300px 200px at 50% 0%, rgba(215,255,47,.12), transparent 60%), var(--l-card);
}
.eco-link { align-self: center; font-size: 1.5rem; color: var(--electric-mint); font-weight: 300; text-align: center; filter: drop-shadow(0 0 10px rgba(125,255,196,.5)); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  position: relative; overflow: hidden; text-align: center; padding: 104px 0;
  background:
    radial-gradient(820px 460px at 50% 116%, rgba(215,255,47,.16), transparent 60%),
    radial-gradient(620px 420px at 50% -10%, rgba(125,255,196,.10), transparent 60%),
    linear-gradient(180deg, var(--deep-black), var(--carbon));
}
.final-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 100%, #000 20%, transparent 72%);
  mask-image: radial-gradient(80% 80% at 50% 100%, #000 20%, transparent 72%);
}
.final-cta .wrap { position: relative; z-index: 1; }
.final-cta .ylogo.xl { margin: 0 auto 24px; animation: bob 5s ease-in-out infinite; }
.final-cta h2 { margin-bottom: 6px; font-size: clamp(2rem, 4vw, 3rem); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--carbon); color: #8E9180; padding: 60px 0 30px; border-top: 1px solid rgba(255,255,255,.06); }
.foot-inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer .brand .name { color: #F4F1E8; }
.footer .brand .name b { color: var(--yesh-lime); }
.foot-tag { margin-top: 12px; color: #74786A; font-size: 1.02rem; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot-cols h4 { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: #C6C9BC; margin-bottom: 12px; font-weight: 700; }
.foot-cols a { display: block; font-size: .9rem; color: #84887A; padding: 4px 0; transition: color .14s ease; }
.foot-cols a:hover { color: var(--yesh-lime); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; font-size: .84rem; color: #62665A; }
.foot-bottom .serif { color: var(--electric-mint); }

/* ============================================================
   Motion
   ============================================================ */
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-16px,0) scale(1.03); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(182,245,0,.6); } 70% { box-shadow: 0 0 0 7px rgba(182,245,0,0); } 100% { box-shadow: 0 0 0 0 rgba(182,245,0,0); } }
@keyframes ringPulse { 0% { transform: scale(.65); opacity: .85; } 100% { transform: scale(2); opacity: 0; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-copy, .hero-mock { min-width: 0; }
  .mock-win { max-width: 100%; }
  .lede, .hero-micro { max-width: none; }
  .hero-orbit { display: none; }
  .pillars-grid, .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .layers-row { grid-template-columns: repeat(2, 1fr); }
  .agents-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .eco-row { grid-template-columns: 1fr; }
  .eco-link { transform: rotate(90deg); }
  .problem-split, .compare { grid-template-columns: 1fr; }
  .ps-arrow, .compare .vs { transform: rotate(90deg); justify-self: center; }
  .foot-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 68px; left: 0; right: 0;
    background: rgba(12,16,12,.96); backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 40px rgba(0,0,0,.5);
    padding: 14px 24px;
  }
  .nav.open .nav-links a { color: #D4D8C8; }
  .nav.open .nav-cta { display: flex; position: absolute; top: 100%; left: 0; right: 0; padding: 0 24px 16px; background: rgba(12,16,12,.96); }
}
@media (max-width: 560px) {
  .hero { padding: 60px 0 44px; }
  .pillars-grid, .diff-grid, .layers-row, .agents-grid, .pricing-grid { grid-template-columns: 1fr; }
  .mock-body { grid-template-columns: 96px 1fr; }
  .mock-kpis { grid-template-columns: 1fr 1fr; }
  .mock-cards { grid-template-columns: 1fr; }
  .mock-kpis > *, .mock-cards > * { min-width: 0; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; }
}