/* KAMALIG landing + login (combined) styles — Phase 7 redesign */
:root{
  /* aliased onto the dashboard's tokens (assets/dashboard.css, loaded just
     before this file) so the landing page shares one visual system with
     the Users Dashboard: olive green + gold accent + rice-beige surfaces. */
  --black:#1C1A10;
  --ink:#2E3A17;
  --forest:var(--kg-green-dark, #506A1A);
  --leaf:var(--kg-green, #6B8E23);
  --paddy:var(--kg-gold, #D4AF37);
  --paddy-pale:var(--kg-green-light, #EEF1E2);
  --white:#FFFFFF;
  --paper:var(--kg-bg, #F8F6F0);
  --amber:var(--kg-gold-dark, #8A6D1D);
  --danger:var(--kg-red, #DC2626);
  --max-w:1180px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--black);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* subtle film-grain texture used behind dark panels */
.grain{ position:absolute; inset:0; opacity:0.5; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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.35'/%3E%3C/svg%3E");
}

/* reveal-on-scroll (used by more than module-card/step now) */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

h1,h2,h3{ font-family:'Poppins','Inter',sans-serif; font-weight:700; letter-spacing:-0.01em; }
.mono{ font-family:'IBM Plex Mono', monospace; }

a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 20px; }

:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; }

/* NAV */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.88); backdrop-filter:blur(10px); border-bottom:1px solid rgba(28,26,16,0.08); transition:height .25s var(--ease), background .25s ease, box-shadow .25s ease; }
.nav.is-scrolled{ box-shadow:0 8px 24px rgba(28,26,16,0.06); }
.nav__row{ display:flex; align-items:center; justify-content:space-between; height:64px; transition:height .25s var(--ease); }
.nav.is-scrolled .nav__row{ height:56px; }
.nav__brand{ display:flex; align-items:center; gap:10px; font-family:'Poppins','Inter',sans-serif; font-weight:800; font-size:1.25rem; }
.nav__mark{ width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.nav__mark img{ width:100%; height:100%; object-fit:contain; }
.nav__links{ display:flex; gap:36px; font-size:0.92rem; font-weight:500; color:var(--ink); }
.nav__links a{ position:relative; opacity:0.75; transition:opacity .2s ease; padding-bottom:2px; }
.nav__links a::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background:var(--forest); transition:right .25s var(--ease); }
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ right:0; }
.nav__actions{ display:flex; gap:12px; align-items:center; }
.nav__cta{ padding:10px 20px; border-radius:100px; background:var(--forest); color:var(--white); font-size:0.88rem; font-weight:600; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; }
.nav__cta:hover{ background:#173d24; transform:translateY(-1px); box-shadow:0 8px 18px rgba(80,106,26,0.25); }
.nav__cta--ghost{ background:transparent; color:var(--forest); border:1.5px solid rgba(80,106,26,0.35); }
.nav__cta--ghost:hover{ background:var(--forest); color:var(--white); border-color:var(--forest); }
@media (max-width:820px){ .nav__links{ display:none; } }

/* HERO */
.hero{ padding:64px 0 0; position:relative; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; transition:transform .3s ease-out; }
.hero__blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0.35; animation:drift 22s ease-in-out infinite; }
.hero__blob--1{ width:420px; height:420px; top:-160px; right:-80px; background:radial-gradient(circle, var(--leaf), transparent 70%); }
.hero__blob--2{ width:320px; height:320px; bottom:-140px; left:-60px; background:radial-gradient(circle, var(--paddy), transparent 70%); animation-delay:-9s; }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(24px,-18px) scale(1.06); } }

/* Rice field motif -- swaying stalks along the hero baseline, driven purely
   by CSS (no imagery needed) so it stays lightweight. .hero__field and
   .hero__blob get a tiny parallax offset from landing.js on mousemove. */
.hero__field{ position:absolute; left:0; right:0; bottom:-6px; height:230px; display:flex; align-items:flex-end; justify-content:flex-end; gap:-6px; padding-right:2%; opacity:0.9; transition:transform .3s ease-out; }
.stalk{ width:42px; height:190px; flex-shrink:0; margin-left:-10px; transform-origin:bottom center; animation:sway 6.5s ease-in-out infinite; opacity:0.85; }
.stalk__stem{ fill:none; stroke:var(--leaf); stroke-width:2.4; stroke-linecap:round; opacity:0.55; }
.stalk__grain ellipse{ fill:var(--paddy); opacity:0.8; }
.stalk--1{ height:150px; animation-delay:-1.2s; opacity:0.55; }
.stalk--2{ height:210px; animation-delay:-3.4s; }
.stalk--3{ height:170px; animation-delay:-0.6s; opacity:0.7; }
.stalk--4{ height:230px; animation-delay:-4.8s; }
.stalk--5{ height:185px; animation-delay:-2.1s; opacity:0.6; }
.stalk--6{ height:205px; animation-delay:-5.6s; opacity:0.75; }
@keyframes sway{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3.5deg); } }
@media (max-width:820px){ .hero__field{ height:140px; opacity:0.6; } .stalk{ width:30px; } }
@media (max-width:520px){ .hero__field{ display:none; } }

/* Drifting grain particles -- tiny gold specks rising through the hero,
   generated in landing.js and purely decorative (aria-hidden). */
.hero__grains{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.grain-particle{ position:absolute; bottom:-10px; width:5px; height:8px; border-radius:50% 50% 50% 4%; background:linear-gradient(160deg, var(--paddy), var(--leaf)); opacity:0; animation:grain-rise linear infinite; }
@keyframes grain-rise{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
  8%{ opacity:0.65; }
  92%{ opacity:0.45; }
  100%{ transform:translateY(-320px) translateX(var(--drift, 24px)) rotate(140deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .stalk{ animation:none; } .grain-particle{ display:none; } }
.hero__grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:center; padding-bottom:48px; }
.eyebrow{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono', monospace; font-size:0.73rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--forest); background:var(--paddy-pale); padding:6px 10px; border-radius:100px; margin-bottom:18px; }
.eyebrow__dot{ width:6px; height:6px; border-radius:50%; background:var(--leaf); box-shadow:0 0 0 0 rgba(107,142,35,0.6); animation:pulse-dot 2s ease-out infinite; }
@keyframes pulse-dot{ 0%{ box-shadow:0 0 0 0 rgba(107,142,35,0.55); } 70%{ box-shadow:0 0 0 7px rgba(107,142,35,0); } 100%{ box-shadow:0 0 0 0 rgba(107,142,35,0); } }
.hero h1{ font-size:clamp(2.4rem, 5.4vw, 4.1rem); line-height:1.03; color:var(--black); animation:rise .8s var(--ease) both; }
.hero h1 em{ font-style:italic; color:var(--forest); }
.hero h3{ font-weight:500; font-size:1rem; color:#4A4A43; line-height:1.4; margin-bottom:10px; max-width:52ch; }
.hero h3 em{ font-style:italic; color:var(--forest); font-weight:600; }
.hero p{ margin-top:16px; font-size:1.02rem; line-height:1.5; color:#3B3B35; max-width:48ch; animation:rise .8s var(--ease) .08s both; }
.hero__actions{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; animation:rise .8s var(--ease) .16s both; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.btn{ position:relative; padding:14px 26px; border-radius:100px; font-weight:600; font-size:0.95rem; display:inline-flex; align-items:center; gap:8px; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; cursor:pointer; border:none; font-family:inherit; }
.btn--primary{ background:var(--forest); color:var(--white); }
.btn--primary:hover{ background:#173d24; transform:translateY(-2px); box-shadow:0 10px 24px rgba(80,106,26,0.28); }
.btn--ghost{ background:transparent; color:var(--black); border:1.5px solid rgba(28,26,16,0.18); }
.btn--ghost:hover{ border-color:var(--black); }
.btn--block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:0.65; cursor:progress; }

/* AI insight chip */
.ai-chip{ display:flex; align-items:flex-start; gap:10px; background:var(--paddy-pale); border:1px solid rgba(80,106,26,0.14); border-radius:14px; padding:12px 14px; margin-top:22px; max-width:52ch; animation:rise .8s var(--ease) .24s both; }
.ai-chip__icon{ flex-shrink:0; width:26px; height:26px; border-radius:8px; background:var(--forest); display:flex; align-items:center; justify-content:center; color:var(--white); font-family:'IBM Plex Mono', monospace; font-size:0.62rem; font-weight:700; letter-spacing:0.02em; }
.ai-chip__body{ font-size:0.85rem; line-height:1.5; color:var(--ink); }
.ai-chip__body strong{ display:block; font-size:0.68rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--forest); margin-bottom:3px; font-family:'IBM Plex Mono', monospace; }
.ai-chip--critical .ai-chip__icon{ background:var(--danger); }
.ai-chip--critical{ background:#FBECE8; border-color:rgba(220,38,38,0.2); }
.ai-chip--recommendation .ai-chip__icon{ background:var(--amber); }
.ai-chip--recommendation{ background:#FBF1DF; border-color:rgba(212,175,55,0.22); }

/* HERO VISUAL -- animated rice-terrace-at-sunset scene (pure SVG/CSS, no
   image assets) replacing the old inline access card on the right side of
   the hero. A small glass "live snapshot" card floats over it, fed by the
   same live stock data as the ticker. */
.hero__visual{ position:relative; border-radius:22px; overflow:hidden; aspect-ratio:6/5; box-shadow:0 30px 70px -24px rgba(28,26,16,0.45); animation:rise .9s var(--ease) .1s both; }
.hero__scene{ position:absolute; inset:0; background:linear-gradient(180deg, #FCEBC0 0%, #F2C879 22%, #D98A4E 46%, #7A5A3A 72%, #3E4A22 100%); overflow:hidden; }
.hero__sun{ position:absolute; left:50%; top:34%; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%; background:radial-gradient(circle, #FFF6DD 0%, #FFE29A 45%, rgba(255,226,154,0) 72%); animation:sun-pulse 5s ease-in-out infinite; }
@keyframes sun-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.08); opacity:0.92; } }
.hero__sky-glow{ position:absolute; inset:0; background:radial-gradient(circle at 50% 30%, rgba(255,255,255,0.35), transparent 60%); mix-blend-mode:overlay; pointer-events:none; }
.hero__terrace{ position:absolute; inset:0; width:100%; height:100%; }
.hero__terrace-layer{ transition:transform .3s ease-out; }
.hero__terrace-layer--1{ fill:#5C6B2A; opacity:0.92; animation:terrace-drift 14s ease-in-out infinite; }
.hero__terrace-layer--2{ fill:#465420; opacity:0.95; animation:terrace-drift 18s ease-in-out infinite reverse; }
.hero__terrace-layer--3{ fill:#2E3A17; animation:terrace-drift 22s ease-in-out infinite; }
@keyframes terrace-drift{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-14px); } }
.hero__terrace-water{ fill:none; stroke:rgba(255,226,154,0.55); stroke-width:2; opacity:0.7; }
.hero__terrace-water--1{ animation:terrace-drift 14s ease-in-out infinite; }
.hero__terrace-water--2{ animation:terrace-drift 18s ease-in-out infinite reverse; }
.hero__terrace-water--3{ animation:terrace-drift 22s ease-in-out infinite; }
.hero__scene-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero__scene-particles .grain-particle{ background:linear-gradient(160deg, #FFE29A, #8FB33B); }
@media (prefers-reduced-motion: reduce){
  .hero__sun{ animation:none; }
  .hero__terrace-layer, .hero__terrace-water{ animation:none; }
}

.hero__floatcard{ position:absolute; left:18px; right:18px; bottom:18px; background:rgba(28,26,16,0.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.14); border-radius:16px; padding:16px 18px; color:var(--white); box-shadow:0 20px 40px -18px rgba(0,0,0,0.5); animation:float-bob 5s ease-in-out infinite; }
@keyframes float-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.hero__floatcard-head{ display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--paddy); margin-bottom:10px; }
.hero__floatcard-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:0.88rem; }
.hero__floatcard-row b{ font-family:'IBM Plex Mono', monospace; white-space:nowrap; }
.hero__floatcard-foot{ display:flex; gap:18px; margin-top:12px; padding-top:12px; border-top:1px dashed rgba(255,255,255,0.2); font-size:0.74rem; color:rgba(255,255,255,0.7); }
.hero__floatcard-foot b{ color:var(--white); font-family:'IBM Plex Mono', monospace; margin-right:4px; }
@media (prefers-reduced-motion: reduce){ .hero__floatcard{ animation:none; } }
@media (max-width:820px){ .hero__visual{ aspect-ratio:16/10; } }

/* FLOATING AUTH MODAL -- login + register now live in a fixed-position
   overlay (triggered from the nav, hero, and CTA-band buttons via
   data-open-tab) instead of an inline hero column, per the redesign: it
   floats over the whole page with a dimmed/blurred backdrop and never
   navigates away from this one page. */
.auth-overlay{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(18,17,10,0.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.auth-overlay.is-open{ opacity:1; pointer-events:auto; }
.auth-overlay__scrim{ position:absolute; inset:0; cursor:pointer; }
body.modal-open{ overflow:hidden; }

.access{ position:relative; z-index:1; width:100%; max-width:440px; max-height:88vh; overflow-y:auto; background:var(--white); border-radius:20px; box-shadow:0 40px 90px -20px rgba(28,26,16,0.45); transform:translateY(28px) scale(0.94); opacity:0; transition:transform .45s var(--ease-spring), opacity .3s ease; }
.auth-overlay.is-open .access{ transform:translateY(0) scale(1); opacity:1; }
.access__close{ position:absolute; top:14px; right:14px; z-index:2; width:32px; height:32px; border-radius:50%; border:none; background:var(--paddy-pale); color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease; }
.access__close:hover{ background:rgba(28,26,16,0.1); transform:rotate(90deg); }
.access__logo{ position:relative; z-index:1; display:flex; justify-content:center; padding:32px 0 4px; }
.access__logo img{ width:48px; height:48px; border-radius:12px; box-shadow:0 12px 26px -10px rgba(80,106,26,0.5); }
.access__panels{ position:relative; z-index:1; overflow:hidden; transition:height .4s var(--ease); }
.access__track{ display:flex; width:200%; transition:transform .5s var(--ease); }
.access__panel{ width:50%; flex:0 0 50%; padding:10px 30px 30px; opacity:0.35; transition:opacity .4s ease; }
.access__panel.is-active{ opacity:1; }
/* login=0, register=1 -- track slides so the active panel sits in view */
.access[data-tab="register"] .access__track{ transform:translateX(-50%); }
@media (prefers-reduced-motion: reduce){
  .access__track{ transition:none; }
  .access__panels{ transition:none; }
  .access{ transition:none; }
  .auth-overlay{ transition:none; }
}
@media (max-width:520px){ .access__panel{ padding:10px 20px 24px; } }

.live-dot{ width:7px; height:7px; border-radius:50%; background:#5FD07A; box-shadow:0 0 0 0 rgba(143,179,59,0.6); animation:pulse-dot-g 1.8s ease-out infinite; flex-shrink:0; }
@keyframes pulse-dot-g{ 0%{ box-shadow:0 0 0 0 rgba(143,179,59,0.55); } 70%{ box-shadow:0 0 0 6px rgba(143,179,59,0); } 100%{ box-shadow:0 0 0 0 rgba(143,179,59,0); } }

.stat-row__label{ color:rgba(255,255,255,0.85); font-size:0.86rem; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.badge{ font-family:'IBM Plex Mono', monospace; font-size:0.65rem; padding:3px 8px; border-radius:5px; }
.badge--local{ background:rgba(143,179,59,0.3); color:#EAF3D8; }
.badge--imported{ background:rgba(255,255,255,0.18); color:var(--white); }

/* Login / register form -- white card, per the provided design (Welcome
   Back / Create Account modals): dark headings, light-grey inputs, a
   solid forest-green button, centered helper link underneath. */
.access-login{ text-align:center; }
.access-login h2{ color:var(--black); font-family:'Poppins','Inter',sans-serif; font-weight:700; font-size:1.5rem; }
.access-login__lead{ color:#6B6A60; font-size:0.86rem; margin-top:6px; margin-bottom:22px; line-height:1.5; }
.access-login .form-group{ margin-bottom:16px; text-align:left; }
.access-login label{ display:block; font-size:0.82rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.access-login .form-group > label{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.access-login .form-group > label .field-hint-link{ font-weight:500; font-size:0.78rem; color:var(--forest); }
.access-login .form-group > label .field-hint-link:hover{ text-decoration:underline; }
.access-login__field{ position:relative; }
.access-login input, .access-login select{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(28,26,16,0.14); background:var(--paper); color:var(--black); font-size:0.92rem; font-family:inherit; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.access-login input::placeholder{ color:#9B9A8E; }
.access-login input:focus, .access-login select:focus{ outline:none; border-color:var(--forest); background:var(--white); box-shadow:0 0 0 3px rgba(80,106,26,0.14); }
.access-login select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232E3A17' fill-opacity='0.55'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:32px; }
.access-login select option{ background:var(--white); color:var(--black); }
.access-login__toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:#8C8A7C; cursor:pointer; padding:4px; font-size:0.72rem; font-family:'IBM Plex Mono', monospace; letter-spacing:0.03em; }
.access-login__toggle:hover{ color:var(--forest); }
.access-login__row{ text-align:center; margin-top:18px; font-size:0.86rem; color:#6B6A60; }
.access-login__row a, .access-login__link-btn{ color:var(--forest); font-weight:600; }
.access-login__row a:hover, .access-login__link-btn:hover{ text-decoration:underline; }
.access-login__link-btn{ background:none; border:none; padding:0; font:inherit; font-size:inherit; cursor:pointer; }
.access-login__alert{ font-size:0.84rem; padding:11px 14px; border-radius:10px; margin-bottom:16px; text-align:left; }
.access-login__alert--error{ background:#FDECEA; color:#B3261E; border:1px solid #F5C2BE; }
.access-login__divider{ border:none; border-top:1px solid rgba(28,26,16,0.1); margin:22px 0 16px; }
.access-login .muted{ color:#8C8A7C; font-size:0.78rem; }
.access-login input[type="file"]{ padding:9px 12px; cursor:pointer; }
.access-login__alert--success{ background:var(--paddy-pale); color:var(--forest); border:1px solid rgba(80,106,26,0.25); }
.access-login__hint{ text-align:center; font-size:0.78rem; color:#8C8A7C; margin-top:18px; }

/* Google Sign-In addition: "or" divider between the password form and the
   Google button, plus a secondary button style since only --primary and
   --ghost existed before this. */
.access-login__divider-row{ display:flex; align-items:center; gap:12px; margin:18px 0; color:#8C8A7C; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; }
.access-login__divider-row::before, .access-login__divider-row::after{ content:""; flex:1; height:1px; background:rgba(28,26,16,0.12); }
.btn--secondary{ background:var(--white); color:var(--black); border:1.5px solid rgba(28,26,16,0.18); }
.btn--secondary:hover{ border-color:var(--forest); color:var(--forest); }
.access-login .btn--secondary{ border-radius:10px; padding:13px 26px; font-size:0.95rem; }
.access-login .btn--primary{ border-radius:10px; padding:13px 26px; font-size:0.95rem; }

/* Register panel has more fields than sign-in -- tighten vertical rhythm so it doesn't tower over the other tabs */
.access__panel[data-panel="register"] .form-group{ margin-bottom:13px; }
.access__panel[data-panel="register"] label{ margin-bottom:5px; }
.access__panel[data-panel="register"] input, .access__panel[data-panel="register"] select{ padding:10px 14px; }

/* TICKER */
.ticker{ background:var(--black); border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); overflow:hidden; white-space:nowrap; padding:10px 0; }
.ticker__track{ display:inline-flex; animation:scroll-left 38s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{ display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono', monospace; font-size:0.82rem; color:var(--white); padding:0 28px; border-right:1px solid rgba(255,255,255,0.12); }
.ticker__item .tag{ color:var(--paddy); font-weight:500; }
.ticker__item .price{ color:var(--white); }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

/* SECTION HEADS */
.section{ padding:64px 0; }
.section--tight{ padding:48px 0; }
.section-head{ max-width:640px; margin-bottom:36px; }
.section-head .eyebrow{ background:transparent; padding:0; color:var(--forest); }
.section-head h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-top:14px; color:var(--black); }
.section-head p{ margin-top:16px; font-size:1.02rem; color:#4A4A43; line-height:1.6; }

/* PROBLEM BAND */
.problem{ background:var(--forest); color:var(--white); }
.problem .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.problem h2{ color:var(--white); font-size:clamp(1.7rem,3.2vw,2.35rem); line-height:1.25; }
.problem-stats{ display:grid; gap:22px; }
.problem-stat{ border-left:2px solid rgba(255,255,255,0.3); padding-left:18px; }
.problem-stat__num{ font-family:'Poppins','Inter',sans-serif; font-weight:800; font-size:2.1rem; color:var(--paddy); }
.problem-stat__label{ font-size:0.92rem; color:rgba(255,255,255,0.75); margin-top:4px; }
@media (max-width:860px){ .problem .wrap{ grid-template-columns:1fr; } }

/* MODULES */
.modules-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:rgba(28,26,16,0.06); border:1px solid rgba(28,26,16,0.06); border-radius:12px; overflow:hidden; }
.module-card{ background:var(--white); padding:20px; opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease, background .2s ease; position:relative; }
.module-card.is-visible{ opacity:1; transform:translateY(0); }
.module-card:hover{ background:var(--paddy-pale); }
.module-card:hover .module-card__num{ transform:translateX(3px); }
.module-card__num{ font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--leaf); display:inline-block; transition:transform .2s var(--ease); }
.module-card h3{ font-size:1.08rem; margin-top:14px; color:var(--black); font-weight:600; }
.module-card p{ margin-top:10px; font-size:0.9rem; color:#57574F; line-height:1.55; }
@media (max-width:900px){ .modules-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .modules-grid{ grid-template-columns:1fr; } }

/* HOW IT WORKS */
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; }
.step{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.step.is-visible{ opacity:1; transform:translateY(0); }
.step__num{ font-family:'Poppins','Inter',sans-serif; font-weight:800; font-size:2.6rem; color:var(--paddy); line-height:1; }
.step h3{ font-size:1.02rem; margin-top:14px; color:var(--black); }
.step p{ margin-top:8px; font-size:0.9rem; color:#57574F; line-height:1.55; }
.step__line{ height:2px; background:linear-gradient(90deg, var(--leaf), transparent); margin:18px 0 0; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.step.is-visible .step__line{ transform:scaleX(1); }
@media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* AUDIENCES */
.audiences{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.audience-card{ border-radius:12px; padding:20px; background:var(--paper); border:1px solid rgba(28,26,16,0.06); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.audience-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -16px rgba(28,26,16,0.18); }
.audience-card--dark{ background:var(--black); color:var(--white); }
.audience-card--dark:hover{ box-shadow:0 20px 40px -16px rgba(80,106,26,0.5); }
.audience-card--dark p{ color:rgba(255,255,255,0.7); }
.audience-card h3{ font-size:1.2rem; }
.audience-card p{ margin-top:12px; font-size:0.92rem; line-height:1.6; color:#57574F; }
.audience-card ul{ margin-top:18px; list-style:none; display:grid; gap:10px; }
.audience-card li{ font-size:0.87rem; display:flex; gap:10px; align-items:flex-start; }
.audience-card li::before{ content:'—'; color:var(--leaf); flex-shrink:0; }
.audience-card--dark li::before{ color:var(--paddy); }
@media (max-width:900px){ .audiences{ grid-template-columns:1fr; } }

/* CTA BAND */
.cta{ background:var(--black); color:var(--white); text-align:center; }
.cta h2{ color:var(--white); font-size:clamp(1.9rem,4vw,2.8rem); max-width:18ch; margin:0 auto; }
.cta p{ color:rgba(255,255,255,0.65); margin-top:18px; font-size:1.02rem; }
.cta .hero__actions{ justify-content:center; margin-top:34px; }
.cta .btn--ghost{ border-color:rgba(255,255,255,0.3); color:var(--white); }
.cta .btn--ghost:hover{ border-color:var(--white); }

/* FOOTER */
.footer{ padding:36px 0 28px; border-top:1px solid rgba(28,26,16,0.06); }
.footer__row{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:18px; }
.footer__brand{ font-family:'Poppins','Inter',sans-serif; font-weight:700; font-size:1rem; }
.footer__meta{ font-size:0.82rem; color:#6B6B62; margin-top:8px; max-width:34ch; line-height:1.45; }
.footer__cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer__col h4{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:#8A8A80; margin-bottom:14px; }
.footer__col a{ display:block; font-size:0.87rem; color:#3B3B35; margin-bottom:9px; opacity:0.85; }
.footer__col a:hover{ opacity:1; text-decoration:underline; }

/* STAT STRIP -- 4-up real-data band directly under the hero */
.stats-strip{ padding:34px 0; background:var(--paddy-pale); border-top:1px solid rgba(28,26,16,0.06); border-bottom:1px solid rgba(28,26,16,0.06); }
.stats-strip__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.stat-block{ text-align:left; border-left:2px solid rgba(80,106,26,0.25); padding-left:16px; }
.stat-block__num{ font-family:'Poppins','Inter',sans-serif; font-weight:800; font-size:clamp(1.7rem, 3vw, 2.3rem); color:var(--forest); font-variant-numeric:tabular-nums; }
.stat-block__label{ font-size:0.82rem; color:#4A4A43; margin-top:4px; line-height:1.4; }
@media (max-width:860px){ .stats-strip__grid{ grid-template-columns:1fr 1fr; row-gap:22px; } }
@media (max-width:480px){ .stats-strip__grid{ grid-template-columns:1fr; } }

/* CAPABILITIES -- compact icon-card summary (Core System Capabilities) */
.cap-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.cap-card{ background:var(--white); border:1px solid rgba(28,26,16,0.07); border-radius:14px; padding:22px 20px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease; }
.cap-card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px -20px rgba(28,26,16,0.2); border-color:rgba(80,106,26,0.2); }
.cap-card__icon{ width:42px; height:42px; border-radius:11px; background:var(--paddy-pale); color:var(--forest); display:flex; align-items:center; justify-content:center; margin-bottom:14px; transition:background .3s ease, transform .3s ease; }
.cap-card__icon svg{ width:22px; height:22px; }
.cap-card:hover .cap-card__icon{ background:var(--forest); color:var(--white); transform:scale(1.08) rotate(-4deg); }
.cap-card h3{ font-size:1.02rem; color:var(--black); font-weight:600; }
.cap-card__tag{ display:inline-block; margin-top:6px; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.03em; color:var(--forest); background:var(--paddy-pale); padding:3px 8px; border-radius:100px; }
.cap-card p{ margin-top:12px; font-size:0.87rem; color:#57574F; line-height:1.55; }
@media (max-width:900px){ .cap-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cap-grid{ grid-template-columns:1fr; } }

/* small responsive tweaks */
@media (max-width:820px){ .hero__grid{ grid-template-columns:1fr; } .hero__visual{ order:-1; max-width:460px; margin:0 auto 8px; } }
@media (max-width:640px){
  :root{ --max-w:980px; }
  .wrap{ padding:0 14px; }
  .nav__row{ height:56px; }
  .hero{ padding:36px 0 0; }
  .hero__grid{ gap:18px; }
  .hero h1{ font-size:clamp(1.6rem, 6vw, 2.4rem); }
  .hero p{ font-size:0.98rem; }
  .ai-chip{ padding:10px 12px; }
  .modules-grid{ gap:12px; }
  .module-card{ padding:16px; }
  .audience-card{ padding:14px; }
  .section{ padding:40px 0; }
  .footer{ padding:24px 0 18px; }
  .stats-strip{ padding:26px 0; }
  .cap-card{ padding:18px 16px; }
}
@media (max-width:400px){
  .nav__brand{ font-size:1.05rem; gap:7px; }
  .nav__mark{ width:28px; height:28px; }
  .nav__cta{ padding:8px 13px; font-size:0.8rem; }
  .nav__actions{ gap:7px; }
  .access__panel{ padding:8px 16px 20px; }
  .footer__cols{ gap:32px; }
}

/* count-up numbers ready state (avoid flash of 0 before JS fires) */
.count-up{ font-variant-numeric:tabular-nums; }