:root {
  --ink: #0c1612;
  --ink-2: #13231c;
  --paper: #f3f1e9;
  --paper-2: #e9e7dd;
  --white: #fff;
  --lime: #a6f02d;
  --green: #42b957;
  --mint: #dfffc4;
  --muted: #68736d;
  --line: rgba(12, 22, 18, .14);
  --radius: 22px;
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { padding-block: 120px; }
.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

.site-nav { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(12,22,18,.88); backdrop-filter: blur(18px); }
.nav-inner { width: min(1320px, calc(100% - 48px)); height: 76px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand img { width: 148px; max-height: 44px; object-fit: contain; object-position: left; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 14px; transition: color .2s; }
.nav-links a:hover { color: var(--white); }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; border-radius: 999px; padding: 15px 24px; color: var(--ink); background: var(--lime); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); background: #b5ff42; box-shadow: 0 14px 34px rgba(166,240,45,.2); }
.button-small { padding: 11px 18px; font-size: 14px; }
.menu-button { display: none; padding: 5px; color: white; background: none; border: 0; }

.hero { position: relative; min-height: 920px; padding-top: 76px; overflow: hidden; color: var(--white); background: var(--ink); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero-glow { position: absolute; width: 700px; height: 700px; right: -180px; top: 30px; border-radius: 50%; background: rgba(80,190,89,.16); filter: blur(90px); }
.hero-grid { position: relative; min-height: 735px; padding-top: 112px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 64px; align-items: center; }
.eyebrow, .section-label { color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--lime); }
.eyebrow span { width: 24px; height: 1px; background: currentColor; }
h1, h2, h3 { margin-top: 0; font-family: var(--display); letter-spacing: -.045em; }
h1 { margin: 25px 0; font-size: clamp(62px, 7vw, 104px); line-height: .92; font-weight: 700; }
h1 em { color: var(--lime); font-style: normal; }
.hero-lead { max-width: 600px; margin: 0; color: rgba(255,255,255,.68); font-size: 20px; line-height: 1.55; }
.hero-actions { margin-top: 38px; display: flex; align-items: center; gap: 28px; }
.text-link { color: var(--white); text-decoration: none; font-weight: 600; }
.text-link span { margin-left: 8px; color: var(--lime); }
.hero-proof { display: flex; gap: 32px; margin-top: 62px; }
.hero-proof div { min-width: 96px; padding-right: 28px; border-right: 1px solid rgba(255,255,255,.15); }
.hero-proof div:last-child { border: 0; }
.hero-proof strong, .hero-proof span { display: block; }
.hero-proof strong { color: var(--lime); font: 700 24px var(--display); }
.hero-proof span { margin-top: 4px; color: rgba(255,255,255,.5); font-size: 12px; }
.hero-visual { position: relative; height: 560px; }
.dashboard-frame { position: absolute; width: 610px; right: -80px; top: 62px; z-index: 2; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: white; box-shadow: 0 40px 90px rgba(0,0,0,.48); transform: perspective(1500px) rotateY(-8deg) rotateX(2deg); }
.browser-bar { height: 35px; display: flex; align-items: center; gap: 6px; padding: 0 12px; color: #7b857f; background: #eef1ee; font-size: 9px; }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c7cec9; }
.browser-bar span { margin-left: 8px; }
.dashboard-frame img { width: 100%; min-height: 340px; object-fit: cover; object-position: left top; }
.metric-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 14px; color: var(--ink); border: 1px solid rgba(255,255,255,.5); border-radius: 13px; background: rgba(255,255,255,.94); box-shadow: 0 20px 45px rgba(0,0,0,.25); backdrop-filter: blur(10px); }
.metric-vpd { left: -16px; bottom: 55px; }
.metric-trace { right: 0; top: 10px; }
.metric-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--green); background: #e7f9e7; }
.metric-card small, .metric-card strong { display: block; }
.metric-card small { color: var(--muted); font-size: 10px; }
.metric-card strong { font: 700 16px var(--display); }
.metric-card strong b { font-size: 9px; }
.metric-status { padding: 5px 8px; color: #278238; background: #e5f9e2; border-radius: 99px; font-size: 9px; font-weight: 700; }
.orbit { position: absolute; border: 1px solid rgba(166,240,45,.16); border-radius: 50%; }
.orbit-one { width: 540px; height: 540px; left: 15px; top: 5px; }
.orbit-two { width: 400px; height: 400px; left: 85px; top: 75px; }
.hero-footer { position: relative; height: 108px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; }
.capabilities { display: flex; gap: 38px; color: rgba(255,255,255,.72); }
.capabilities b { font-weight: 500; }

h2 { margin-bottom: 0; font-size: clamp(42px, 5vw, 68px); line-height: 1.04; font-weight: 600; }
.intro-grid { display: grid; grid-template-columns: 1.1fr .75fr; gap: 110px; margin-top: 32px; }
.intro-grid p { color: var(--muted); line-height: 1.65; }
.intro-grid .large-copy { margin-top: 3px; color: var(--ink); font-size: 21px; }
.outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 76px; }
.outcome-card { position: relative; min-height: 330px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.34); transition: transform .25s, background .25s; }
.outcome-card:hover { transform: translateY(-6px); background: white; }
.outcome-card.featured { color: white; background: var(--ink-2); }
.outcome-card > .material-symbols-outlined { margin-top: 76px; color: var(--green); font-size: 36px; }
.outcome-card.featured > .material-symbols-outlined { color: var(--lime); }
.card-index { position: absolute; right: 28px; top: 28px; color: var(--muted); font-size: 12px; }
.outcome-card h3 { margin: 20px 0 10px; font-size: 25px; }
.outcome-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.featured p { color: rgba(255,255,255,.56); }

.platform { color: white; background: var(--ink); }
.section-heading { display: grid; grid-template-columns: 1.15fr .6fr; align-items: end; gap: 100px; margin-bottom: 64px; }
.section-heading .section-label { margin-bottom: 22px; }
.section-heading > p { margin: 0 0 8px; color: var(--muted); line-height: 1.65; }
.light-heading > p { color: rgba(255,255,255,.52); }
.product-stage { min-height: 650px; display: grid; grid-template-columns: 360px 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: #14221c; }
.stage-copy { padding: 34px; border-right: 1px solid rgba(255,255,255,.1); }
.stage-tabs { display: grid; }
.stage-tab { display: flex; gap: 15px; padding: 16px 0; color: rgba(255,255,255,.38); border: 0; border-bottom: 1px solid rgba(255,255,255,.08); background: none; text-align: left; cursor: pointer; }
.stage-tab span { color: rgba(255,255,255,.22); font-size: 11px; }
.stage-tab.active { color: var(--lime); }
.stage-detail { margin-top: 100px; }
.stage-detail > span { color: var(--lime); font-size: 38px; }
.stage-detail h3 { margin: 20px 0 14px; font-size: 29px; line-height: 1.12; }
.stage-detail p { color: rgba(255,255,255,.5); line-height: 1.6; }
.stage-detail a { display: inline-block; margin-top: 24px; color: white; text-decoration: none; font-size: 11px; font-weight: 700; }
.stage-detail a span { color: var(--lime); }
.stage-screen { position: relative; min-width: 0; overflow: hidden; padding: 78px 46px 42px; background: radial-gradient(circle at 50% 38%, #244b34, #0e1914 70%); }
.stage-screen::before { content: ""; position: absolute; width: 560px; height: 560px; right: -90px; top: -180px; border: 1px solid rgba(166,240,45,.09); border-radius: 50%; }
.visual-disclaimer { position: absolute; z-index: 3; left: 46px; top: 30px; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.36); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.visual-disclaimer span { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.platform-visual { position: relative; z-index: 2; display: none; min-height: 500px; color: var(--ink); border: 1px solid rgba(255,255,255,.65); border-radius: 20px; background: #f7f8f4; box-shadow: 0 30px 70px rgba(0,0,0,.35); animation: visual-in .35s both; }
.platform-visual.active { display: block; }
@keyframes visual-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.visual-topline { height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #dfe4df; }
.visual-topline > div { display: flex; align-items: center; gap: 9px; }.visual-topline > div span { color: var(--green); }.visual-topline b { font: 700 14px var(--display); }
.live-state, .period-chip { display: flex; align-items: center; gap: 7px; padding: 6px 9px; color: #267b36; border-radius: 999px; background: #e5f4e3; font-size: 9px; font-weight: 700; }
.live-state i { width: 6px; height: 6px; border-radius: 50%; background: #3daf4d; box-shadow: 0 0 0 3px rgba(61,175,77,.14); }

/* Platform visual: environment */
.environment-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18px 20px 12px; }
.environment-kpis > div { position: relative; min-width: 0; padding: 13px; border: 1px solid #e0e5e0; border-radius: 12px; background: white; }
.environment-kpis > div > span { color: var(--green); font-size: 18px; }.environment-kpis small, .environment-kpis strong, .environment-kpis em { display: block; }
.environment-kpis small { margin-top: 10px; color: var(--muted); font-size: 8px; }.environment-kpis strong { margin-top: 3px; font: 700 18px var(--display); }.environment-kpis strong b { font-size: 9px; }
.environment-kpis em { margin-top: 5px; color: #2c8b3d; font-size: 8px; font-style: normal; }.environment-kpis .primary-kpi { color: white; border-color: #1c3829; background: #183324; }.environment-kpis .primary-kpi small { color: rgba(255,255,255,.48); }.environment-kpis .primary-kpi > span, .environment-kpis .primary-kpi em { color: var(--lime); }
.environment-chart { margin: 0 20px; padding: 16px 18px 10px; border: 1px solid #e0e5e0; border-radius: 13px; background: white; }
.chart-heading { display: flex; justify-content: space-between; align-items: start; }.chart-heading small, .chart-heading strong { display: block; }.chart-heading small { color: var(--muted); font-size: 8px; }.chart-heading strong { margin-top: 3px; font-size: 11px; }.chart-heading > span { padding: 5px 7px; color: #297b38; border-radius: 99px; background: #e8f5e6; font-size: 8px; }
.environment-chart svg { width: 100%; height: 118px; overflow: visible; }.environment-chart .target-zone { fill: rgba(66,185,87,.06); }.environment-chart .area-line { fill: url(#vpd-fill); }.environment-chart .data-line { fill: none; stroke: #55bf57; stroke-width: 3; stroke-linecap: round; }.environment-chart circle { fill: var(--lime); stroke: #193423; stroke-width: 3; }
.chart-axis { display: flex; justify-content: space-between; color: #929b95; font-size: 7px; }
.environment-status { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; margin: 12px 20px 18px; padding: 11px 13px; border-radius: 11px; background: #edf5eb; }
.environment-status > span { color: var(--green); }.environment-status strong, .environment-status small { display: block; }.environment-status strong { font-size: 10px; }.environment-status small { color: var(--muted); font-size: 8px; }.environment-status > b { color: var(--muted); font-size: 8px; }

/* Platform visual: production */
.production-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 20px; }.production-summary > div { padding: 15px; border: 1px solid #e0e5e0; border-radius: 12px; background: white; }.production-summary small, .production-summary strong, .production-summary span { display: block; }.production-summary small { color: var(--muted); font-size: 8px; }.production-summary strong { margin-top: 5px; font: 700 20px var(--display); }.production-summary span { margin-top: 3px; color: #2a833a; font-size: 8px; }
.cycle-timeline { margin: 0 20px; padding: 20px; border: 1px solid #e0e5e0; border-radius: 14px; background: white; }.timeline-heading { display: flex; justify-content: space-between; }.timeline-heading small { color: var(--muted); }.timeline-heading strong { color: var(--green); }.timeline-line { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); height: 4px; margin: 32px 7% 0; background: #dce2dc; }.timeline-line span { position: relative; background: #dce2dc; }.timeline-line span::after { content: ""; position: absolute; right: -5px; top: -4px; width: 11px; height: 11px; border: 2px solid white; border-radius: 50%; background: #c8d0ca; box-shadow: 0 0 0 1px #c8d0ca; }.timeline-line .complete, .timeline-line .current { background: var(--green); }.timeline-line .complete::after { background: var(--green); box-shadow: 0 0 0 1px var(--green); }.timeline-line .current::after { background: var(--lime); box-shadow: 0 0 0 3px rgba(166,240,45,.25); }
.timeline-labels { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 16px; text-align: center; }.timeline-labels i { display: grid; width: 22px; height: 22px; margin: 0 auto 8px; place-items: center; color: white; border-radius: 50%; background: #b9c2bc; font-size: 12px; font-style: normal; }.timeline-labels b, .timeline-labels small { display: block; }.timeline-labels b { font-size: 8px; }.timeline-labels small { margin-top: 3px; color: var(--muted); font-size: 7px; }.timeline-labels .current i { color: var(--ink); background: var(--lime); font-size: 8px; }.timeline-labels .current b { color: #278239; }
.production-tasks { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; align-items: center; margin: 12px 20px 20px; }.production-tasks > div { display: flex; gap: 9px; align-items: center; padding: 10px; border-radius: 10px; background: #edf2ed; }.production-tasks > div > span { color: var(--green); font-size: 20px; }.production-tasks p { margin: 0; }.production-tasks strong, .production-tasks small { display: block; }.production-tasks strong { font-size: 8px; }.production-tasks small { color: var(--muted); font-size: 7px; }.production-tasks > span { color: #2b803a; font-size: 8px; font-weight: 700; }

/* Platform visual: costs */
.cost-overview { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: center; padding: 28px 32px 22px; }.cost-donut { width: 185px; height: 185px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--lime) 0 48%, #45b957 48% 80%, #5a9cc7 80% 92%, #c9d1ca 92%); }.cost-donut::before { content: ""; grid-area: 1/1; width: 125px; height: 125px; border-radius: 50%; background: white; }.cost-donut div { position: relative; z-index: 1; grid-area: 1/1; text-align: center; }.cost-donut strong, .cost-donut small { display: block; }.cost-donut strong { font: 700 16px var(--display); }.cost-donut small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.cost-legend { display: grid; gap: 8px; }.cost-legend > div { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #e2e6e2; }.cost-legend i { width: 8px; height: 8px; border-radius: 50%; }.cost-legend .energy { background: var(--lime); }.cost-legend .supplies { background: #45b957; }.cost-legend .water { background: #5a9cc7; }.cost-legend .other { background: #c9d1ca; }.cost-legend b, .cost-legend small { display: block; }.cost-legend b { font-size: 9px; }.cost-legend small { color: var(--muted); font-size: 7px; }.cost-legend strong { font-size: 9px; }
.cost-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 20px 20px; }.cost-kpis > div { padding: 15px; border: 1px solid #e0e5e0; border-radius: 11px; background: white; }.cost-kpis small, .cost-kpis strong, .cost-kpis em { display: block; }.cost-kpis small { color: var(--muted); font-size: 8px; }.cost-kpis strong { margin-top: 5px; font: 700 14px var(--display); }.cost-kpis em { margin-top: 5px; color: #278239; font-size: 7px; font-style: normal; }

/* Platform visual: reports */
.report-flow { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr; gap: 8px; align-items: center; margin: 20px; }.report-flow > div { padding: 13px; border: 1px solid #dfe4df; border-radius: 11px; background: white; }.report-flow > div.active { border-color: #75c578; background: #eef8ec; }.report-flow > div > span { color: var(--green); font-size: 20px; }.report-flow b, .report-flow small { display: block; }.report-flow b { margin-top: 9px; font-size: 9px; }.report-flow small { margin-top: 3px; color: var(--muted); font-size: 7px; }.report-flow > i { color: #aeb7b1; font-size: 17px; }
.report-documents { display: grid; grid-template-columns: .75fr 1.25fr; gap: 16px; margin: 0 20px 20px; }.report-preview { min-height: 285px; padding: 23px; border-radius: 12px; color: #1b2720; background: white; box-shadow: 0 12px 28px rgba(12,22,18,.1); }.report-logo { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 35px; color: var(--ink); background: var(--lime); font: 800 18px var(--display); }.report-preview > span { color: var(--green); font-size: 7px; font-weight: 800; letter-spacing: .08em; }.report-preview h4 { margin: 8px 0; font: 700 16px var(--display); }.report-preview p { margin: 0 0 22px; color: var(--muted); font-size: 8px; }.report-preview > i { display: block; width: 100%; height: 5px; margin-top: 7px; border-radius: 9px; background: #e5e9e5; }.report-preview > i.short { width: 63%; }
.report-list { display: grid; align-content: start; gap: 9px; }.report-list article { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 13px; border: 1px solid #e0e5e0; border-radius: 11px; background: white; }.report-list article > span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--green); border-radius: 8px; background: #eaf6e8; font-size: 18px; }.report-list p { margin: 0; }.report-list strong, .report-list small { display: block; }.report-list strong { font-size: 9px; }.report-list small { color: var(--muted); font-size: 7px; }.report-list article > b { padding: 5px 7px; color: #287f38; border-radius: 99px; background: #e7f3e5; font-size: 7px; }

/* Real product screens */
.real-platform-screen { position: relative; z-index: 2; display: none; width: 100%; min-height: 500px; margin: 0; overflow: hidden; flex-direction: column; justify-content: center; border: 1px solid rgba(255,255,255,.65); border-radius: 18px; background: #eef1ee; box-shadow: 0 30px 70px rgba(0,0,0,.35); animation: visual-in .35s both; }
.real-platform-screen.active { display: flex; }
.real-platform-screen > img { display: block; width: 100%; height: auto; max-height: 430px; object-fit: contain; object-position: center top; background: #f2f3f2; }
.real-platform-screen figcaption { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; min-height: 70px; padding: 13px 18px; color: var(--ink); border-top: 1px solid #dce1dc; background: white; }
.real-platform-screen figcaption > span { display: grid; width: 38px; height: 38px; place-items: center; color: #278239; border-radius: 10px; background: #e8f6e6; }
.real-platform-screen figcaption strong, .real-platform-screen figcaption small { display: block; }.real-platform-screen figcaption strong { font: 700 12px var(--display); }.real-platform-screen figcaption small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.report-catalog-screen > img { max-height: 365px; }

.bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.bento-card { position: relative; min-height: 520px; overflow: hidden; padding: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: #ecebe3; }
.bento-card h3 { max-width: 530px; margin: 18px 0 12px; font-size: 31px; line-height: 1.12; }
.bento-card p { max-width: 540px; color: var(--muted); line-height: 1.55; }
.bento-wide { grid-column: span 2; min-height: 440px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 50px; }
.chip { display: inline-flex; padding: 7px 11px; color: #207c34; border-radius: 99px; background: #d9f5d5; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.trace-card img { position: absolute; width: 58%; right: -4%; bottom: -30px; border: 8px solid white; border-radius: 14px; box-shadow: 0 30px 60px rgba(12,22,18,.18); }
.ai-card { color: white; background: var(--ink-2); }
.ai-card p { color: rgba(255,255,255,.55); }
.ai-mark { position: absolute; right: 34px; top: 34px; color: var(--lime); font-size: 42px; }
.ai-suggestions { display: grid; gap: 8px; margin-top: 24px; }
.ai-suggestions button { width: max-content; max-width: 100%; padding: 8px 12px; color: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(255,255,255,.045); font-size: 11px; text-align: left; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.ai-suggestions button:nth-child(2) { margin-left: 20px; }.ai-suggestions button:nth-child(3) { margin-left: 7px; }
.ai-suggestions button:hover, .ai-suggestions button.active { color: var(--ink); border-color: var(--lime); background: var(--lime); }
.ai-prompt { position: absolute; inset: auto 38px 38px; display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 64px; padding: 13px 14px 13px 20px; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: rgba(255,255,255,.06); font-size: 13px; }
.ai-prompt #ai-prompt-text { transition: opacity .16s, transform .16s; }.ai-prompt #ai-prompt-text.changing { opacity: 0; transform: translateY(4px); }
.ai-prompt span { display: grid; width: 30px; height: 30px; place-items: center; color: var(--ink); border-radius: 50%; background: var(--lime); font-size: 18px; }
.ai-prompt #ai-prompt-text { display: block; width: auto; height: auto; color: rgba(255,255,255,.72); border-radius: 0; background: none; font-size: 13px; }
.costs-card img { position: absolute; width: 84%; left: 8%; bottom: -30px; border: 7px solid white; border-radius: 13px; box-shadow: 0 25px 55px rgba(12,22,18,.16); }
.compliance-card { align-items: center; background: var(--mint); }
.compliance-list { display: grid; gap: 12px; }
.compliance-list div { display: grid; grid-template-columns: 32px 1fr; padding: 17px; border-radius: 13px; background: rgba(255,255,255,.66); }
.compliance-list span { grid-row: span 2; color: var(--green); }
.compliance-list b, .compliance-list small { display: block; }.compliance-list small { color: var(--muted); }

.associations { color: white; background: #0d1c16; }
.association-heading { display: grid; grid-template-columns: 1.1fr .65fr; gap: 100px; align-items: end; }
.association-heading .section-label { margin-bottom: 24px; }
.association-intro p { margin: 0 0 25px; color: rgba(255,255,255,.57); font-size: 18px; line-height: 1.65; }
.association-intro .dark-link { color: white; }
.association-showcase { position: relative; margin-top: 70px; padding: 46px 46px 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: radial-gradient(circle at 70% 20%, rgba(80,190,89,.2), transparent 46%), #14271e; }
.association-showcase::before { content: ""; position: absolute; width: 480px; height: 480px; right: -110px; top: -210px; border: 1px solid rgba(166,240,45,.15); border-radius: 50%; }
.association-screen { position: relative; z-index: 2; width: 88%; margin: auto; overflow: hidden; border: 7px solid #e7ebe8; border-bottom: 0; border-radius: 17px 17px 0 0; background: white; box-shadow: 0 35px 75px rgba(0,0,0,.4); }
.screen-window-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; color: #87908b; background: #edf0ed; font-size: 9px; }
.screen-window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #cbd1cd; }
.screen-window-bar span { margin-left: 8px; }
.association-screen img { width: 100%; }
.association-metric { position: absolute; z-index: 3; right: 4%; top: 34%; display: grid; grid-template-columns: 42px 1fr; gap: 1px 12px; min-width: 220px; padding: 15px; color: var(--ink); border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 24px 50px rgba(0,0,0,.3); }
.association-metric > span { grid-row: span 2; display: grid; width: 42px; height: 42px; place-items: center; color: #278238; border-radius: 11px; background: #e7f9e7; }
.association-metric small { align-self: end; color: var(--muted); font-size: 10px; }.association-metric strong { font: 700 14px var(--display); }
.association-features { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; }
.association-features article { min-height: 235px; padding: 26px; border-right: 1px solid rgba(255,255,255,.1); }
.association-features article:last-child { border: 0; }
.association-features span { color: var(--lime); font-size: 31px; }
.association-features h3 { margin: 45px 0 10px; font-size: 20px; }
.association-features p { margin: 0; color: rgba(255,255,255,.48); font-size: 14px; line-height: 1.55; }
.association-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.association-detail-grid > div { position: relative; min-height: 520px; overflow: hidden; padding: 34px; color: var(--ink); border-radius: 20px; background: var(--paper); }
.association-detail-grid h3 { margin: 52px 0 10px; font-size: 28px; }.association-detail-grid p { max-width: 450px; color: var(--muted); }
.association-detail-grid img { position: absolute; width: 88%; left: 6%; bottom: -25px; border: 6px solid white; border-radius: 12px; box-shadow: 0 25px 55px rgba(12,22,18,.16); }
.detail-number { position: absolute; right: 28px; top: 28px; color: var(--green); font-size: 12px; }
.delivery-flow { position: absolute; inset: auto 34px 30px; padding: 22px; border: 1px solid #dce2dc; border-radius: 15px; background: white; box-shadow: 0 22px 50px rgba(12,22,18,.1); }
.delivery-flow-label { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; color: var(--muted); border-bottom: 1px solid #e6e9e6; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.delivery-flow-label span { color: var(--green); font-size: 18px; }
.delivery-flow-steps { display: grid; grid-template-columns: 1fr 25px 1fr 25px 1fr; gap: 8px; align-items: center; padding: 22px 0; }
.delivery-flow-steps > div { display: grid; grid-template-columns: 32px 1fr; gap: 0 9px; align-items: center; }
.delivery-flow-steps > div > span { grid-row: span 2; display: grid; width: 32px; height: 32px; place-items: center; color: #278238; border-radius: 9px; background: #e8f8e7; font-size: 18px; }
.delivery-flow-steps b, .delivery-flow-steps small { display: block; }.delivery-flow-steps b { font-size: 12px; }.delivery-flow-steps small { color: var(--muted); font-size: 9px; }
.delivery-flow-steps > i { color: #aab3ad; font-size: 17px; }
.delivery-proof { display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center; padding: 13px; border-radius: 11px; background: #f0f5ef; }
.delivery-proof > span:first-child { display: grid; width: 38px; height: 38px; place-items: center; color: var(--green); border-radius: 9px; background: white; }
.delivery-proof strong, .delivery-proof small { display: block; }.delivery-proof strong { font-size: 12px; }.delivery-proof small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.delivery-status { display: flex; align-items: center; gap: 6px; padding: 6px 9px; color: #277f38; border-radius: 999px; background: #dbf3da; font-size: 9px; font-weight: 700; }
.delivery-status i { width: 6px; height: 6px; border-radius: 50%; background: #38a64c; }

.audiences { background: #deddd4; }
.audiences h2 { margin: 24px 0 70px; }
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.audience-grid article { min-height: 310px; padding: 28px 24px; border-right: 1px solid var(--line); }
.audience-grid article:last-child { border: 0; }
.audience-grid span { color: var(--green); font-size: 12px; }
.audience-grid h3 { margin: 70px 0 14px; font-size: 24px; }
.audience-grid p { min-height: 72px; color: var(--muted); line-height: 1.55; }
.audience-grid a { font-size: 13px; font-weight: 700; text-decoration: none; }

.architecture { color: white; background: #17271f; }
.architecture-grid { display: grid; grid-template-columns: .78fr 1fr; gap: 120px; align-items: start; }
.architecture-copy { position: sticky; top: 120px; }
.architecture-copy .section-label { margin-bottom: 24px; }
.architecture-copy p { max-width: 480px; margin: 25px 0 35px; color: rgba(255,255,255,.56); font-size: 17px; line-height: 1.65; }
.onprem-badge { display: inline-flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid rgba(166,240,45,.25); border-radius: 15px; background: rgba(166,240,45,.07); }
.onprem-badge > span { color: var(--lime); font-size: 34px; }
.onprem-badge strong, .onprem-badge small { display: block; }.onprem-badge strong { color: var(--lime); font: 700 17px var(--display); }.onprem-badge small { margin-top: 2px; color: rgba(255,255,255,.45); }
.architecture-points { border-top: 1px solid rgba(255,255,255,.13); }
.architecture-points article { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 27px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.architecture-points article > span { padding-top: 4px; color: var(--lime); font-size: 12px; }
.architecture-points h3 { margin: 0 0 8px; font-size: 22px; }.architecture-points p { margin: 0; color: rgba(255,255,255,.48); line-height: 1.55; }

.implementation-grid { display: grid; grid-template-columns: .85fr 1fr; gap: 130px; }
.implementation-copy .section-label { margin-bottom: 24px; }
.implementation-copy h2 { margin-bottom: 24px; }
.implementation-copy p { max-width: 500px; color: var(--muted); line-height: 1.65; }
.dark-link { display: inline-block; margin-top: 28px; color: var(--ink); }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 62px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps > li > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--lime); font-size: 12px; font-weight: 700; }
.steps h3 { margin: 2px 0 7px; font-size: 22px; }
.steps p { margin: 0; color: var(--muted); }

.contact-section { padding-block: 120px; color: white; background: #102019; }
.contact-grid { display: grid; grid-template-columns: .8fr 1fr; gap: 100px; }
.contact-copy h2 { margin: 24px 0; }
.contact-copy > p { max-width: 460px; color: rgba(255,255,255,.56); font-size: 18px; line-height: 1.6; }
.contact-meta { display: flex; gap: 35px; margin-top: 60px; }
.contact-meta div { display: flex; gap: 12px; align-items: flex-start; }
.contact-meta span { color: var(--lime); }
.contact-meta p { margin: 0; color: rgba(255,255,255,.45); font-size: 12px; }
.contact-meta strong { display: block; margin-bottom: 3px; color: white; font-size: 14px; }
.contact-form { padding: 34px; color: var(--ink); border-radius: var(--radius); background: white; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: grid; gap: 7px; margin-bottom: 17px; color: #4b5650; font-size: 12px; font-weight: 700; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 13px 14px; color: var(--ink); border: 1px solid #d9ddd9; border-radius: 9px; outline: none; background: #fafbf9; font-weight: 400; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(66,185,87,.12); }
.contact-form textarea { resize: vertical; }
.form-submit { width: 100%; margin-top: 4px; }
.contact-form > small { display: block; margin-top: 12px; color: var(--muted); text-align: center; }

footer { padding: 56px 0; color: white; background: var(--ink); border-top: 1px solid rgba(255,255,255,.08); }
.footer-grid { display: grid; grid-template-columns: 170px 1fr auto; gap: 35px; align-items: center; }
.footer-grid img { width: 150px; }
.footer-grid p, .footer-grid > span { color: rgba(255,255,255,.4); font-size: 13px; }
.footer-grid div { display: flex; gap: 25px; }
.footer-grid a { color: rgba(255,255,255,.72); font-size: 13px; text-decoration: none; }
.footer-grid > span { grid-column: 1 / -1; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.08); }

.toast-container-custom { position: fixed; z-index: 100; top: 92px; right: 22px; }
.toast-custom { margin-bottom: 8px; padding: 13px 17px; color: white; border-radius: 10px; background: #25813a; box-shadow: 0 14px 35px rgba(0,0,0,.2); opacity: 0; transform: translateY(-8px); transition: .25s; }
.toast-custom.show { opacity: 1; transform: none; }.toast-custom.error { background: #b43a3a; }
.reveal { animation: rise .8s both; }.delay-1 { animation-delay: .14s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (max-width: 1020px) {
  .nav-links { display: none; position: absolute; inset: 76px 0 auto; padding: 24px; flex-direction: column; background: var(--ink); }
  .nav-links.open { display: flex; }.menu-button { display: block; }
  .hero { min-height: auto; }.hero-grid { grid-template-columns: 1fr; padding-top: 90px; }.hero-visual { height: 530px; }.dashboard-frame { right: 4%; width: 82%; }
  .hero-footer { margin-top: 20px; }.intro-grid, .section-heading, .association-heading, .architecture-grid, .implementation-grid, .contact-grid { grid-template-columns: 1fr; gap: 45px; }
  .product-stage { grid-template-columns: 300px 1fr; }.audience-grid { grid-template-columns: repeat(2, 1fr); }.audience-grid article:nth-child(2) { border-right: 0; }
  .association-features { grid-template-columns: repeat(2, 1fr); }.association-features article:nth-child(2) { border-right: 0; }.association-features article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .architecture-copy { position: static; }
}

@media (max-width: 700px) {
  .shell, .nav-inner { width: min(100% - 28px, 1180px); }.section, .contact-section { padding-block: 80px; }.nav-actions .button { display: none; }
  h1 { font-size: 55px; }.hero-grid { padding-top: 70px; gap: 20px; }.hero-lead { font-size: 17px; }.hero-actions { align-items: stretch; flex-direction: column; }.hero-actions .text-link { padding-left: 6px; }
  .hero-proof { gap: 14px; margin-top: 42px; }.hero-proof div { min-width: 0; padding-right: 13px; }.hero-proof strong { font-size: 19px; }
  .hero-visual { height: 385px; }.dashboard-frame { width: 95%; right: -8%; top: 45px; }.dashboard-frame img { min-height: 235px; }.metric-vpd { left: 0; bottom: 17px; }.metric-trace { display: none; }.orbit-one { width: 360px; height: 360px; }
  .hero-footer { height: auto; padding-block: 25px; align-items: flex-start; flex-direction: column; gap: 18px; }.capabilities { gap: 16px; flex-wrap: wrap; }
  h2 { font-size: 40px; }.intro-grid { margin-top: 25px; }.outcome-grid, .bento-grid, .audience-grid { grid-template-columns: 1fr; }.outcome-card { min-height: 270px; }.outcome-card > .material-symbols-outlined { margin-top: 40px; }
  .product-stage { min-height: auto; grid-template-columns: 1fr; }.stage-copy { border-right: 0; }.stage-detail { margin-top: 45px; }.stage-screen { min-height: 430px; padding: 70px 14px 24px; }.visual-disclaimer { left: 18px; top: 27px; }.real-platform-screen { min-height: 340px; }.real-platform-screen > img { max-height: 280px; }.real-platform-screen figcaption { min-height: 72px; padding-inline: 12px; }.report-catalog-screen > img { max-height: 235px; }
  .section-heading { margin-bottom: 45px; }.bento-wide { grid-column: auto; min-height: 570px; display: block; }.trace-card img { width: 92%; }.bento-card { min-height: 500px; padding: 27px; }.compliance-card { min-height: auto; }.compliance-list { margin-top: 35px; }
  .association-showcase { margin-top: 45px; padding: 22px 12px 0; }.association-screen { width: 100%; }.association-metric { display: none; }.association-features, .association-detail-grid { grid-template-columns: 1fr; }.association-features article { min-height: 210px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }.association-features article:last-child { border-bottom: 0; }.association-features h3 { margin-top: 28px; }.association-detail-grid > div { min-height: 500px; padding: 27px; }.delivery-flow { inset: auto 18px 20px; padding: 17px; }.delivery-flow-steps { grid-template-columns: 1fr; gap: 9px; }.delivery-flow-steps > i { display: none; }.delivery-proof { grid-template-columns: 38px 1fr; }.delivery-status { grid-column: 1 / -1; width: max-content; }
  .audience-grid article { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }.audience-grid h3 { margin-top: 45px; }.audience-grid p { min-height: auto; }
  .implementation-grid { gap: 55px; }.contact-meta { flex-direction: column; }.form-row { grid-template-columns: 1fr; gap: 0; }.contact-form { padding: 24px 19px; }.footer-grid { grid-template-columns: 1fr; }.footer-grid div { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { animation: none; }.button { transition: none; } }