/* Darkm × Khatwa — 90-day plan microsite. Dark cinematic canvas, Khatwa yellow as light, the step as motif. */
:root {
  --ink: #0A0B0A; --ink2: #111411; --ink3: #181C19; --ink4: #222823;
  --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.16);
  --fg: #F4F5F0; --mut: #A4ABA4; --mut2: #6F776F;
  --y: #E2E419; --y2: #F2F37A; --ysoft: rgba(226,228,25,.12);
  --g: #2A6646; --g2: #3DBE6E; --gsoft: rgba(61,190,110,.14);
  --paper: #F1F2EC; --paper2: #E6E8E0; --ink-on-paper: #0E100E; --mut-on-paper: #5C635C;
  --fd: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --fb: 'IBM Plex Sans Arabic', 'Alexandria', system-ui, sans-serif;
  --ease: cubic-bezier(.16,.84,.24,1);
  --wrap: min(1240px, calc(100% - 48px));
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { background: var(--ink); -webkit-text-size-adjust: 100% }
html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }
body { font-family: var(--fb); color: var(--fg); background: var(--ink); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
::selection { background: var(--y); color: var(--ink) }
.wrap { width: var(--wrap); margin-inline: auto }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block }
.num { font-variant-numeric: tabular-nums }
.ic { width: 1em; height: 1em; display: inline-block; flex: none }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

/* grain over everything */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--ink); display: grid; place-items: center }
.loader-in { display: flex; flex-direction: column; align-items: center; gap: 28px }
.loader .lg { width: 150px; height: auto }
.ld-steps { display: flex; align-items: flex-end; gap: 6px; height: 46px; direction: ltr }
.ld-steps i { width: 18px; background: var(--ink4); border-radius: 3px; transition: background .3s }
.ld-steps i.on { background: var(--y); box-shadow: 0 0 18px rgba(226,228,25,.5) }
.ld-count { font: 700 13px var(--fd); color: var(--mut); letter-spacing: 2px; direction: ltr }
.loader.done { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease) }

/* ---------- cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(226,228,25,.7); border-radius: 50%; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s; mix-blend-mode: difference }
.cursor.big { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(226,228,25,.9) }
@media (hover: none) { .cursor { display: none } }

/* ---------- header ---------- */
.hdr { position: fixed; top: 0; inset-inline: 0; z-index: 60; padding: calc(18px + env(safe-area-inset-top,0px)) 0 18px; transition: background .4s, backdrop-filter .4s, padding .4s }
.hdr.solid { background: rgba(10,11,10,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-block: 12px; border-bottom: 1px solid var(--line) }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px }
.brand { display: flex; align-items: center; gap: 14px }
.brand svg { height: 40px; width: auto }
.brand .x { font: 500 14px var(--fd); color: var(--mut) }
.brand .x b { color: var(--fg); font-weight: 700 }
.nav { display: flex; gap: 4px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 40px; padding: 4px }
.nav a { font: 500 13px var(--fd); color: var(--mut); padding: 7px 14px; border-radius: 30px; transition: color .3s, background .3s }
.nav a:hover, .nav a.on { color: var(--ink); background: var(--y) }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 14px var(--fd); padding: 13px 22px; border-radius: 14px; transition: transform .4s var(--ease), box-shadow .4s, background .3s; will-change: transform }
.btn .ic { font-size: 18px }
.btn-y { background: var(--y); color: var(--ink); box-shadow: 0 10px 34px -12px rgba(226,228,25,.6) }
.btn-y:hover { box-shadow: 0 16px 44px -12px rgba(226,228,25,.8) }
.btn-o { border: 1px solid var(--line2); color: var(--fg); background: rgba(255,255,255,.03) }
.btn-o:hover { border-color: var(--y); color: var(--y) }
.btn-sm { padding: 9px 16px; font-size: 13px; border-radius: 12px }
@media (max-width: 980px) { .nav { display: none } .brand .x { display: none } }

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: #000 }
.hero canvas, .hero .fallback { position: absolute; inset: 0; width: 100%; height: 100% }
.hero .fallback { object-fit: cover; opacity: .55 }
.hero-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,11,10,.55) 0%, rgba(10,11,10,0) 28%, rgba(10,11,10,.05) 55%, rgba(10,11,10,.92) 100%),
              linear-gradient(270deg, rgba(10,11,10,.88) 0%, rgba(10,11,10,.55) 38%, rgba(10,11,10,0) 72%) }
.hero-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding-top: 40px }
.hero-txt { max-width: 760px }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 13px var(--fd); color: var(--y); border: 1px solid rgba(226,228,25,.4); background: rgba(226,228,25,.06); border-radius: 40px; padding: 6px 16px; backdrop-filter: blur(6px) }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--y); box-shadow: 0 0 12px var(--y) }
.hero h1 { font: 800 clamp(48px, 7.4vw, 116px)/1.05 var(--fd); letter-spacing: -2px; margin-top: 22px; text-shadow: 0 6px 40px rgba(0,0,0,.35) }
.hero h1 .l2 { display: block; font-size: .4em; letter-spacing: -.5px; margin-top: 12px; color: var(--y); font-weight: 700 }
.hero p { font-size: clamp(15px, 1.25vw, 18px); color: #C9CEC8; max-width: 520px; margin-top: 22px }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px }
.hero-stats { position: absolute; bottom: 0; inset-inline: 0; border-top: 1px solid var(--line); background: linear-gradient(0deg, rgba(10,11,10,.85), rgba(10,11,10,.25)); backdrop-filter: blur(8px) }
.hero-stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr) }
.hs { padding: 20px 0; padding-inline-start: 22px; border-inline-start: 1px solid var(--line) }
.hs:first-child { border: 0; padding-inline-start: 0 }
.hs b { display: block; font: 800 clamp(22px, 2.4vw, 34px)/1.15 var(--fd) }
.hs b .y { color: var(--y) }
.hs > span { font-size: 13px; color: var(--mut) }
.slide-ix { position: absolute; top: 50%; inset-inline-end: 34px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; direction: ltr }
.slide-ix button { width: 3px; height: 26px; background: rgba(255,255,255,.25); border-radius: 3px; transition: background .4s, height .4s }
.slide-ix button.on { background: var(--y); height: 46px }
.scroll-cue { position: absolute; bottom: 120px; inset-inline-end: 40px; font: 500 11px var(--fd); color: var(--mut); letter-spacing: 3px; writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px }
.scroll-cue::after { content: ""; width: 1px; height: 54px; background: linear-gradient(var(--y), transparent); animation: cue 2s var(--ease) infinite }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }
@media (max-width: 760px) {
  .hero-stats .wrap { grid-template-columns: repeat(2, 1fr) }
  .hs:nth-child(3) { border: 0; padding-inline-start: 0 }
  .hs { padding: 12px 0 12px 0; padding-inline-start: 14px }
  .slide-ix, .scroll-cue { display: none }
  .hero-in { justify-content: flex-start; padding-top: 120px }
}

/* ---------- sections ---------- */
section { position: relative }
.sec { padding: clamp(80px, 10vw, 150px) 0 }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 600 13px var(--fd); color: var(--y); letter-spacing: .5px; margin-bottom: 20px }
.eyebrow .n { font: 800 13px var(--fd); color: var(--ink); background: var(--y); border-radius: 8px; padding: 2px 9px; direction: ltr }
.h2 { font: 800 clamp(34px, 5vw, 72px)/1.12 var(--fd); letter-spacing: -1px; max-width: 16ch; text-wrap: balance }
.h2 em { font-style: normal; color: var(--y) }
.lead { font-size: clamp(16px, 1.35vw, 19px); color: var(--mut); max-width: 58ch; margin-top: 22px }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em }
.split .w > span { display: inline-block; transform: translateY(105%) }
.paper { background: var(--paper); color: var(--ink-on-paper) }
.paper .lead { color: var(--mut-on-paper) }
.paper .eyebrow { color: #4B5E0A }
.paper .h2 em { color: var(--ink-on-paper); background: linear-gradient(transparent 62%, var(--y) 62%, var(--y) 92%, transparent 92%) }

/* manifesto */
.manifesto { padding: clamp(120px, 16vw, 220px) 0 }
.manifesto p { font: 700 clamp(30px, 4.4vw, 64px)/1.38 var(--fd); letter-spacing: -.5px; max-width: 22ch }
.manifesto p .w { opacity: .14; transition: opacity .2s }
.manifesto p .w.y { color: var(--y) }

/* summary */
.sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 64px }
.sum { position: relative; border: 1px solid var(--line); border-radius: 24px; padding: 28px 24px 30px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)); overflow: hidden; min-height: 300px; display: flex; flex-direction: column }
.sum::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(226,228,25,.18), transparent); opacity: 0; transition: opacity .5s }
.sum:hover::after { opacity: 1 }
.sum .ix { font: 800 13px var(--fd); color: var(--mut2); direction: ltr; text-align: end }
.sum .icw { width: 54px; height: 54px; border-radius: 16px; background: var(--ysoft); color: var(--y); display: grid; place-items: center; font-size: 26px; margin-top: 10px }
.sum h3 { font: 700 22px var(--fd); margin-top: 64px }
.sum p { font-size: 14.5px; color: var(--mut); margin-top: 10px }
@media (max-width: 980px) { .sum-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .sum-grid { grid-template-columns: 1fr } .sum { min-height: 0 } }

/* audit (paper) */
.audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 60px }
.acol { background: #fff; border-radius: 26px; padding: 34px 34px 26px; border: 1px solid var(--paper2) }
.acol.gap { background: var(--ink-on-paper); color: var(--fg); border-color: var(--ink-on-paper) }
.acol h3 { font: 700 22px var(--fd); display: flex; align-items: center; gap: 12px; margin-bottom: 18px }
.acol h3 .badge { font-size: 20px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--gsoft); color: #1E6B45 }
.acol.gap h3 .badge { background: rgba(226,228,25,.14); color: var(--y) }
.acol li { list-style: none; display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--paper2); font-size: 15.5px; font-weight: 500 }
.acol.gap li { border-color: rgba(255,255,255,.1); color: #D9DDD8 }
.acol li .ic { font-size: 20px; margin-top: 3px; color: #1E6B45 }
.acol.gap li .ic { color: var(--y) }
.src { font-size: 12.5px; color: var(--mut-on-paper); margin-top: 18px }
@media (max-width: 860px) { .audit-grid { grid-template-columns: 1fr } }

/* personas */
.per-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 60px; perspective: 1200px }
.per { position: relative; border-radius: 26px; overflow: hidden; min-height: 520px; background: var(--ink3); transform-style: preserve-3d; transition: transform .5s var(--ease); display: flex; flex-direction: column; justify-content: flex-end }
.per img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease) }
.per:hover img { transform: scale(1.06) }
.per::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,11,10,.05) 20%, rgba(10,11,10,.88) 62%, rgba(10,11,10,.97)) }
.per-in { position: relative; z-index: 2; padding: 28px; transform: translateZ(40px) }
.per .tag { display: inline-block; font: 700 12px var(--fd); background: var(--y); color: var(--ink); border-radius: 30px; padding: 3px 12px }
.per h3 { font: 800 28px var(--fd); margin-top: 12px }
.per dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 16px; font-size: 14px }
.per dt { color: var(--mut2); font-weight: 600 }
.per dd { color: #E3E6E1 }
.per .hook { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line2); font: 600 15px/1.6 var(--fd); color: var(--y) }
@media (max-width: 980px) { .per-grid { grid-template-columns: 1fr } .per { min-height: 440px } }

/* website (sticky) */
.web-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 6vw, 90px); margin-top: 70px; align-items: start }
.web-sticky { position: sticky; top: 110px }
.ba { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line2); background: var(--ink2); aspect-ratio: 4 / 5; user-select: none; touch-action: pan-y }
.ba-pane { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px }
.ba-before { background: #EEF0F2; color: #333 }
.ba-after { background: var(--ink2); clip-path: inset(0 0 0 var(--cut, 50%)) }
.ba-tag { position: absolute; top: 16px; z-index: 3; font: 700 12px var(--fd); padding: 5px 12px; border-radius: 30px }
.ba-tag.b { inset-inline-end: 16px; background: #fff; color: #333; border: 1px solid #ddd }
.ba-tag.a { inset-inline-start: 16px; background: var(--y); color: var(--ink) }
.ba-img { flex: 1; border-radius: 14px; background-size: cover; background-position: center; min-height: 0 }
.ba-before .ba-img { filter: saturate(.55) contrast(.92); border-radius: 6px }
.ba-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px }
.ba-before h4 { font: 700 15px var(--fb) }
.ba-before .dense { font-size: 10.5px; line-height: 1.5; color: #777 }
.ba-before .nums { font: 600 13px var(--fb); color: #444; letter-spacing: 3px }
.ba-before .wa { background: #25D366; color: #fff; text-align: center; border-radius: 6px; padding: 8px; font-size: 12px; font-weight: 600 }
.ba-after h4 { font: 700 18px var(--fd); color: #fff }
.spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.spec div { background: var(--ink4); border-radius: 10px; padding: 8px 10px; font-size: 11.5px; color: var(--mut) }
.spec b { display: block; font: 700 15px var(--fd); color: #fff }
.price { display: flex; align-items: baseline; gap: 10px }
.price b { font: 800 22px var(--fd); color: var(--y) }
.price s { color: var(--mut2); font-size: 13px }
.mini-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.mini-form span { background: var(--ink4); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 11.5px; color: var(--mut2) }
.mini-form .go { grid-column: 1 / -1; background: var(--y); color: var(--ink); font: 700 13px var(--fd); text-align: center; border: 0 }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: var(--y); z-index: 4; transform: translateX(-1px); cursor: ew-resize }
.ba-handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: var(--y); color: var(--ink); display: grid; place-items: center; font-size: 20px; font-weight: 700; box-shadow: 0 0 0 8px rgba(226,228,25,.18) }
.ba-note { font-size: 13px; color: var(--mut2); margin-top: 12px; text-align: center }
.web-list { display: flex; flex-direction: column }
.wl { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 30px 0; border-top: 1px solid var(--line) }
.wl .k { font: 800 15px var(--fd); color: var(--mut2); direction: ltr; text-align: end; padding-top: 4px }
.wl h3 { font: 700 23px var(--fd) }
.wl p { color: var(--mut); margin-top: 8px; font-size: 15.5px }
.wl.on .k { color: var(--y) }
@media (max-width: 900px) { .web-grid { grid-template-columns: 1fr } .web-sticky { position: relative; top: 0 } .ba { aspect-ratio: 4 / 4.6 } }

/* tracking network */
.trk { margin-top: 70px; position: relative }
.trk-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 84px; position: relative; z-index: 2 }
.trk-col h4 { font: 600 13px var(--fd); color: var(--y); margin-bottom: 14px }
.node { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line2); background: rgba(17,20,17,.92); border-radius: 14px; padding: 13px 14px; margin-bottom: 12px; font: 600 14px var(--fd); position: relative }
.node::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--g2); box-shadow: 0 0 10px var(--g2); flex: none }
.trk svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible }
.trk path { fill: none; stroke: rgba(226,228,25,.22); stroke-width: 1.2 }
.trk path.flow { stroke: var(--y); stroke-width: 2; stroke-dasharray: 6 220; animation: flow 3.2s linear infinite }
@keyframes flow { to { stroke-dashoffset: -226 } }
@media (max-width: 860px) { .trk-cols { grid-template-columns: 1fr 1fr; gap: 22px } .trk svg { display: none } }

/* content pillars */
.pil-track { display: flex; gap: 18px; margin-top: 64px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; scrollbar-width: none }
.pil-track::-webkit-scrollbar { display: none }
.pil { flex: 0 0 min(360px, 82vw); scroll-snap-align: start; border-radius: 24px; overflow: hidden; background: var(--ink3); border: 1px solid var(--line) }
.pil .im { aspect-ratio: 4 / 3; overflow: hidden }
.pil .im img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease) }
.pil:hover .im img { transform: scale(1.07) }
.pil-in { padding: 22px 24px 26px }
.pil-in .k { font: 800 12px var(--fd); color: var(--y); direction: ltr; text-align: end }
.pil h3 { font: 700 21px var(--fd) }
.pil p { color: var(--mut); font-size: 14.5px; margin-top: 8px }
.cad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 50px; border: 1px solid var(--line); border-radius: 24px; overflow: hidden }
.cad div { padding: 26px 24px; border-inline-start: 1px solid var(--line) }
.cad div:first-child { border: 0 }
.cad small { color: var(--mut); font: 600 13px var(--fd) }
.cad b { display: block; font: 800 46px/1.1 var(--fd); color: var(--y); margin-top: 6px }
.cad span { display: block; font: 600 14px var(--fd) }
.cad em { font-style: normal; font-size: 13px; color: var(--mut2) }
@media (max-width: 860px) { .cad { grid-template-columns: 1fr 1fr } .cad div:nth-child(3) { border: 0 } .cad div:nth-child(n+3) { border-top: 1px solid var(--line) } }

/* ads */
.ads-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px }
.adp { border-radius: 28px; padding: 34px; background: var(--ink2); border: 1px solid var(--line); position: relative; overflow: hidden }
.adp-h { display: flex; align-items: center; justify-content: space-between; gap: 14px }
.adp-h .pl { display: flex; align-items: center; gap: 14px }
.adp-h .lg { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: #000; border: 1px solid var(--line2) }
.adp h3 { font: 800 26px var(--fd) }
.adp .bud { text-align: end }
.adp .bud b { display: block; font: 800 30px/1 var(--fd); color: var(--y) }
.adp .bud small { color: var(--mut); font-size: 12.5px }
.adp .obj { margin-top: 22px; font: 600 14px var(--fd); color: #D7DBD6; background: rgba(255,255,255,.04); border-radius: 12px; padding: 12px 14px }
.adp h4 { font: 700 15px var(--fd); color: var(--y); margin: 26px 0 10px }
.grp { display: grid; gap: 8px }
.grp div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px }
.grp b { font: 700 14px var(--fd) }
.grp span { color: var(--mut) }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { font-size: 13px; border: 1px solid var(--line2); border-radius: 30px; padding: 6px 12px; color: #D9DCD7 }
.chip.neg { border-color: rgba(255,107,107,.4); color: #FF9C9C; text-decoration: line-through; text-decoration-color: rgba(255,107,107,.6) }
.marq { overflow: hidden; margin-top: 60px; border-block: 1px solid var(--line); padding: 22px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.marq-t { display: flex; gap: 40px; width: max-content; animation: marq 40s linear infinite; direction: rtl }
.marq-t span { font: 700 clamp(22px, 3vw, 40px) var(--fd); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35); white-space: nowrap; display: flex; align-items: center; gap: 40px }
.marq-t span::after { content: ""; width: 10px; height: 10px; background: var(--y); transform: rotate(45deg) }
@keyframes marq { to { transform: translateX(50%) } }
@media (max-width: 900px) { .ads-grid { grid-template-columns: 1fr } .adp { padding: 24px } .grp div { grid-template-columns: 1fr } .adp h3 { font-size: 22px } .adp .bud b { font-size: 24px } .adp-h .lg { width: 46px; height: 46px; font-size: 24px } }

/* budget */
.bud-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; margin-top: 60px; align-items: center }
.coins { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.coin { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; text-align: center; position: relative; background: radial-gradient(circle at 50% 30%, rgba(226,228,25,.14), transparent 60%) }
.coin::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(226,228,25,.35); animation: spin 30s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.coin b { display: block; font: 800 clamp(34px, 4vw, 56px)/1 var(--fd); direction: ltr }
.coin small { color: var(--mut); font: 600 13px var(--fd) }
.coin .pl { font: 700 15px var(--fd); color: var(--y); margin-bottom: 8px }
.bud-rows div { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line) }
.bud-rows div:last-child { border-bottom: 1px solid var(--line) }
.bud-rows span { color: var(--mut); font-weight: 500 }
.bud-rows b { font: 800 26px var(--fd) }
.bud-rows .tot b { color: var(--y); font-size: 34px }
.bud-note { font-size: 13.5px; color: var(--mut2); margin-top: 16px }
@media (max-width: 900px) { .bud-wrap { grid-template-columns: 1fr } }

/* forecast */
.fc { display: grid; grid-template-columns: 380px 1fr; gap: 22px; margin-top: 60px }
.fc-ctrl { background: #fff; border-radius: 26px; padding: 30px; border: 1px solid var(--paper2) }
.fc-ctrl h3 { font: 700 19px var(--fd) }
.sl { margin-top: 26px }
.sl label { display: flex; justify-content: space-between; font: 600 14px var(--fd) }
.sl label b { direction: ltr; color: var(--ink-on-paper) }
.sl input { width: 100%; margin-top: 12px; accent-color: #1E6B45; height: 30px }
.fc-ctrl .note { font-size: 12.5px; color: var(--mut-on-paper); margin-top: 24px; line-height: 1.7 }
.fc-ctrl .reset { margin-top: 14px; font: 600 13px var(--fd); color: #1E6B45; border-bottom: 1.5px solid #1E6B45 }
.fc-out { background: var(--ink-on-paper); color: var(--fg); border-radius: 26px; padding: 30px; display: flex; flex-direction: column; gap: 24px }
.fc-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.fc-top div { background: rgba(255,255,255,.05); border-radius: 16px; padding: 16px 18px }
.fc-top small { color: var(--mut); font: 600 12.5px var(--fd) }
.fc-top b { display: block; font: 800 clamp(22px, 2.3vw, 30px)/1.25 var(--fd); direction: ltr; text-align: end; white-space: nowrap }
.fc-top b.y { color: var(--y) }
.fc-chart { position: relative; height: 260px }
.fc-chart svg { width: 100%; height: 100%; overflow: visible }
.legend { display: flex; gap: 18px; font-size: 13px; color: var(--mut) }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px }
.funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.funnel div { border-radius: 14px; padding: 14px 14px; background: rgba(255,255,255,.05); position: relative }
.funnel div:nth-child(4) { background: var(--y); color: var(--ink) }
.funnel small { font: 600 12px var(--fd); opacity: .8 }
.funnel b { display: block; font: 800 24px/1.3 var(--fd); direction: ltr; text-align: end; white-space: nowrap }
.roi { font: 600 14.5px/1.8 var(--fd); color: #CDD2CC; border-top: 1px solid var(--line); padding-top: 18px }
.roi b { color: var(--y) }
.fc-table { width: 100%; min-width: 760px; border-collapse: collapse; margin-top: 30px; font-size: 14.5px; background: #fff; border-radius: 20px; overflow: hidden }
.fc-table th, .fc-table td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--paper2) }
.fc-table th { font: 600 13px var(--fd); color: var(--mut-on-paper); background: #FAFBF8 }
.fc-table td { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap }
.fc-table td.b { font-weight: 700 }
.fc-table tr:last-child td { border-bottom: 0; background: var(--ink-on-paper); color: #fff; font-weight: 700 }
.tbl-wrap { overflow-x: auto; border-radius: 20px }
@media (max-width: 980px) { .fc { grid-template-columns: 1fr } .fc-top { grid-template-columns: 1fr 1fr } .funnel { grid-template-columns: 1fr 1fr } }

/* roadmap */
.road { height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; position: relative }
.road-head { width: var(--wrap); margin-inline: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px }
.road-prog { font: 700 13px var(--fd); color: var(--mut); direction: ltr }
.road-prog b { color: var(--y); font-size: 28px }
.road-track { display: flex; gap: 16px; padding-inline: max(24px, calc((100vw - 1240px) / 2)); margin-top: 50px; width: max-content; align-items: flex-end; will-change: transform }
.mth { display: flex; flex-direction: column; gap: 14px }
.mth-h { display: flex; align-items: baseline; gap: 12px; padding-inline-start: 4px }
.mth-h b { font: 800 22px var(--fd) }
.mth-h span { color: var(--y); font: 600 14px var(--fd) }
.weeks { display: flex; gap: 16px; align-items: flex-end }
.wk { width: 270px; border-radius: 22px; padding: 22px; background: var(--ink2); border: 1px solid var(--line); position: relative; display: flex; flex-direction: column }
.wk::before { content: ""; position: absolute; inset-inline: 22px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--y); opacity: .25; transition: opacity .5s }
.wk { transition: border-color .5s, background .5s }
.wk.on { border-color: rgba(226,228,25,.32); background: linear-gradient(180deg, rgba(226,228,25,.07), var(--ink2) 60%) }
.wk.on::before { opacity: 1 }
.wk .w { font: 800 13px var(--fd); color: var(--mut2); direction: ltr; text-align: end }
.wk .w b { color: var(--y); font-size: 34px; display: block; line-height: 1 }
.wk h4 { font: 700 18px var(--fd); margin-top: 18px }
.wk p { color: var(--mut); font-size: 14px; margin-top: 8px }
@media (max-width: 860px) {
  .road { height: auto; padding: 110px 0 }
  .road-track { width: auto; flex-direction: column; align-items: stretch; padding-inline: 24px; transform: none !important }
  .weeks { flex-direction: column; align-items: stretch }
  .wk { width: auto; min-height: 0 !important }
}

/* kpis + reporting */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 60px }
.kpi { border-radius: 22px; padding: 24px 20px; border: 1px solid var(--line); background: var(--ink2) }
.kpi small { font: 600 13px/1.5 var(--fd); color: var(--mut); display: block; min-height: 40px }
.kpi b { display: block; font: 800 24px/1.35 var(--fd); color: var(--y); margin-top: 10px }
.kpi span { font-size: 12.5px; color: var(--mut2) }
.rep-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 30px }
.rep { border-radius: 26px; padding: 32px; background: var(--ink2); border: 1px solid var(--line) }
.rep h3 { font: 700 22px var(--fd); margin-bottom: 14px }
.rep li { list-style: none; display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px }
.rep li b { font: 700 14px var(--fd); color: var(--y) }
.rep li span { color: #D2D6D1 }
.needs li { grid-template-columns: 30px 1fr }
.needs li .ic { font-size: 20px; color: var(--g2); margin-top: 2px }
@media (max-width: 1080px) { .kpi-grid { grid-template-columns: repeat(2, 1fr) } .rep-grid { grid-template-columns: 1fr } }

/* gallery */
.gal { padding: 40px 0 120px; overflow: hidden }
.gal-row { display: flex; gap: 16px; width: max-content; margin-bottom: 16px; will-change: transform }
.gal-row img { height: clamp(180px, 22vw, 300px); width: auto; border-radius: 18px; object-fit: cover }

/* cta */
.cta { min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 120px 0 }
.cta-bg { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 60%, rgba(42,102,70,.55), transparent 70%), radial-gradient(30% 30% at 50% 45%, rgba(226,228,25,.18), transparent 70%) }
.cta-stairs { position: absolute; inset-inline: 0; bottom: 0; height: 46%; display: flex; align-items: flex-end; justify-content: center; gap: 0; opacity: .5 }
.cta-stairs i { flex: 1; max-width: 160px; background: linear-gradient(180deg, #1B211C, #0A0B0A); border-top: 2px solid rgba(226,228,25,.55) }
.cta-in { position: relative; z-index: 2 }
.cta .lg { display: block; width: 150px; height: auto; margin: 0 auto 30px }
.cta h2 { font: 800 clamp(40px, 7vw, 104px)/1.08 var(--fd); letter-spacing: -1.5px; max-width: 14ch; margin-inline: auto }
.cta h2 em { font-style: normal; color: var(--y) }
.cta p { color: var(--mut); font-size: 18px; margin-top: 22px }
.cta .hero-cta { justify-content: center }
.foot { border-top: 1px solid var(--line); padding: 26px 0 calc(26px + env(safe-area-inset-bottom,0px)); font-size: 13px; color: var(--mut2) }
.foot .wrap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap }

/* reveal helpers */
.rv { opacity: 0; transform: translateY(40px) }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .rv, .split .w > span { opacity: 1 !important; transform: none !important }
  .manifesto p .w { opacity: 1 }
}
.no-js .rv, .no-js .split .w > span { opacity: 1; transform: none }