/* TECHCA$H website · tokens mirror 03_Design_Tokens/tokens.css */
:root{
  --ink:#0D0D0D; --ink-2:#171615; --ink-3:#201E1C; --line:#2E2B29; --line-2:#3A3633;
  --red:#E8221B; --red-deep:#8E0E12; --paper:#F2EEE6; --paper-line:#D8D1C4; --paper-sub:#6B645A;
  --muted:#A39D93; --soft:#6E6861;
  --f-logo:"Archivo Black","Arial Black",sans-serif;
  --f-head:"Alexandria",Tahoma,sans-serif;
  --f-en:"Anton",Impact,sans-serif;
  --f-body:"IBM Plex Sans Arabic",Tahoma,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --radius:4px; --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:max(20px,env(safe-area-inset-left,0px));
  --rail-gap:0px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.8 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,figure,ol,ul,fieldset{margin:0}
ol,ul{padding:0;list-style:none}
fieldset{border:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.container{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
main .container{padding-inline-start:calc(var(--gutter) + var(--rail-gap))}
.section-pad{padding-block:clamp(96px,11vw,160px)}
.mono{font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.red{color:var(--red)}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
[dir="rtl"] .icon-flip,[dir="rtl"] .button .icon,[dir="rtl"] .text-link .icon,[dir="rtl"] .orb-core .icon{transform:scaleX(-1)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip-link{position:fixed;top:-60px;inset-inline-start:16px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:var(--radius);font-weight:600}
.skip-link:focus{top:16px}
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--red);transform-origin:right;transform:scaleX(0);z-index:60}
html[dir="ltr"] .scroll-progress{transform-origin:left}

/* buttons and links */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;background:var(--red);color:var(--paper);font:700 16px var(--f-head);transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.button:hover{background:#FF3A2F;box-shadow:0 10px 30px rgba(232,34,27,.35);transform:translateY(-2px)}
.button:active{transform:translateY(0) scale(.98)}
.button-small{min-height:42px;padding:0 18px;font-size:14px}
.button-outline{background:transparent;border:1px solid var(--line-2)}
.button-outline:hover{background:var(--ink-3);box-shadow:none}
.text-link{display:inline-flex;align-items:center;gap:10px;font:700 16px var(--f-head);padding-block:6px;position:relative}
.text-link::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:currentColor;transform-origin:right;transition:transform .3s var(--ease)}
.text-link:hover{color:var(--red)}
.text-link:hover::after{transform:scaleX(.4)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 13px var(--f-head);color:var(--paper)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(232,34,27,.18);animation:beat 2s ease-in-out infinite}
@keyframes beat{50%{box-shadow:0 0 0 8px rgba(232,34,27,0)}}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(13,13,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-header.scrolled{border-color:var(--line);background:rgba(13,13,13,.92)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand img{height:20px;width:auto}
.desktop-nav{display:flex;gap:34px;font:700 15px var(--f-head)}
.desktop-nav a{color:var(--muted);position:relative;padding-block:6px;transition:color .2s}
.desktop-nav a::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--red);transform:scaleX(0);transition:transform .3s var(--ease)}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--paper)}
.desktop-nav a.active::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:10px}
.language-toggle{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;font:500 13px var(--f-mono);transition:border-color .2s}
.language-toggle:hover{border-color:var(--paper)}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.menu-toggle span{width:16px;height:2px;background:var(--paper);transition:transform .25s var(--ease)}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-nav{display:grid;padding:8px var(--gutter) 24px;border-top:1px solid var(--line)}
.mobile-nav[hidden]{display:none}
.mobile-nav a,.mobile-nav button{padding-block:14px;border-bottom:1px solid var(--line);font:700 20px var(--f-head);text-align:start}
.mobile-nav button{color:var(--red);border:0}

/* the rail: one line that runs through every section */
main{position:relative}
.rail{display:none}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:28px 32px}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:60vw;height:60vw;max-width:820px;max-height:820px;background:radial-gradient(circle,rgba(232,34,27,.16),transparent 62%);pointer-events:none}
.hero-topline{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--muted);padding-bottom:20px;border-bottom:1px dashed var(--line)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(48px,6vw,88px)}
.hero h1{font:900 clamp(46px,7vw,100px)/1.1 var(--f-head);text-wrap:balance}
html[lang="en"] .hero h1{font-family:var(--f-en);font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:0}
.hero h1 .line{display:inline-block}
.circled{position:relative}
.hand-circle{position:absolute;inset:-14% -10% -18% -12%;width:124%;height:132%;overflow:visible;pointer-events:none}
.hand-circle path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.hero-description{font-size:clamp(18px,1.5vw,21px);color:var(--muted);max-width:46ch;margin-top:28px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:40px}
.hero-tracks{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.hero-tracks li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font:700 14px var(--f-head);color:var(--muted);background:rgba(23,22,21,.6)}
.hero-tracks .icon{width:18px;height:18px;color:var(--red)}

.hero-visual{position:relative;width:100%;max-width:520px;justify-self:center;display:grid;justify-items:center;gap:16px;perspective:1000px}
.code-dollar{width:100%;height:auto;overflow:visible;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.cd-glow{fill:url(#cd-glow)}
.cd-bg{fill:#170F0E}
.cd-lines text{font:500 13px var(--f-mono);fill:#7A736C;letter-spacing:.02em}
.cd-lines .r{fill:var(--red)}
.cd-lines .ok{fill:#C9C3B9}
.cd-lines .hit{fill:var(--red);font-weight:500}
.js .cd-lines{animation:code-up 24s linear infinite}
@keyframes code-up{to{transform:translateY(-540px)}}
.cd-sheen{fill:url(#cd-sheen);animation:sheen 6s var(--ease) infinite}
@keyframes sheen{0%,15%{translate:0 0}70%,100%{translate:900px 0}}
.cd-outline{fill:none;stroke:var(--red);stroke-width:.6;filter:drop-shadow(0 0 12px rgba(232,34,27,.6))}
.cd-ring{transform-box:view-box;transform-origin:260px 278px;animation:spin 60s linear infinite}
.cd-ring text{font:500 13px var(--f-mono);fill:var(--soft);letter-spacing:.18em}
.prompt-line{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(23,22,21,.85);font:500 15px var(--f-mono);color:var(--paper)}
.prompt-line .red{color:var(--red)}
.typed{display:inline-block;overflow:hidden;white-space:nowrap;width:18ch;animation:typing 5s steps(18) infinite}
@keyframes typing{0%{width:0}40%,90%{width:18ch}100%{width:18ch}}
.cursor{width:9px;height:18px;background:var(--red);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dollar-meaning{font:500 11px var(--f-mono);letter-spacing:.16em;color:var(--soft)}
.dollar-meaning b{color:var(--red);font-weight:500}
.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:22px}
.scroll-cue{display:flex;align-items:center;gap:12px;font:700 14px var(--f-head)}
.scroll-circle{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:border-color .2s}
.scroll-cue:hover .scroll-circle{border-color:var(--red)}
.scroll-circle .icon{width:16px;height:16px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{translate:0 4px}}
.hero-location{color:var(--soft)}

/* marquee: bridge between hero and the red band */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:20px;background:var(--ink)}
.marquee-track{display:flex;align-items:center;gap:30px;width:max-content;direction:ltr;animation:marquee 36s linear infinite}
.marquee span{font:900 clamp(24px,3vw,36px) var(--f-head);white-space:nowrap;color:var(--paper)}
.marquee span:nth-of-type(3n){color:var(--soft)}
.marquee b{color:var(--red);font-weight:400;font-size:22px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sections */
.section-meta{display:flex;align-items:center;gap:12px;font:700 13px var(--f-head);color:var(--muted);margin-bottom:28px;position:relative}
.section-number{font:500 13px var(--f-mono);color:var(--red);direction:ltr}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 64px;flex-wrap:wrap;margin-bottom:clamp(48px,6vw,72px)}
.section-heading h2,.contact-main h2{font:900 clamp(38px,5.4vw,72px)/1.12 var(--f-head);text-wrap:balance}
.section-heading > p{color:var(--muted);max-width:40ch}
.muted{color:var(--soft)}
.statement{font:900 clamp(44px,6.4vw,92px)/1.1 var(--f-head);text-wrap:balance}
html[lang="en"] .statement,html[lang="en"] .section-heading h2,html[lang="en"] .contact-main h2,html[lang="en"] .manifesto-text{font-family:var(--f-en);font-weight:400;text-transform:uppercase;line-height:1.02}

/* 01 truth: torn red band */
.truth-section{background:var(--red);position:relative;margin-block:44px}
.truth-section::before,.truth-section::after{content:"";position:absolute;left:0;right:0;height:44px;background:var(--red)}
.truth-section::before{bottom:100%;clip-path:polygon(0 100%,0 55%,4% 30%,8% 62%,13% 22%,17% 58%,22% 34%,27% 70%,31% 26%,36% 56%,41% 18%,45% 60%,50% 32%,55% 66%,59% 24%,64% 54%,69% 20%,73% 62%,78% 36%,83% 68%,87% 28%,92% 58%,96% 22%,100% 48%,100% 100%)}
.truth-section::after{top:100%;clip-path:polygon(0 0,100% 0,100% 44%,95% 70%,91% 34%,86% 74%,81% 40%,77% 78%,72% 30%,67% 64%,62% 36%,58% 76%,53% 40%,48% 70%,43% 30%,38% 72%,34% 38%,29% 78%,24% 34%,19% 66%,15% 30%,10% 72%,5% 40%,0 60%)}
.truth-section .section-meta{color:#FFD5D1}
.truth-section .section-number{color:var(--ink)}
.truth-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px 72px;align-items:end}
.statement-end{color:var(--ink)}
.truth-copy{display:grid;gap:18px;font-size:clamp(17px,1.4vw,19px);color:#FFE6E3}
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(56px,7vw,96px)}
.pain{display:grid;gap:10px;align-content:start;padding:28px;border-radius:18px;background:rgba(13,13,13,.16);border:1px solid rgba(242,238,230,.22);transition:transform .35s var(--ease),background .35s}
.pain:hover{transform:translateY(-6px);background:rgba(13,13,13,.26)}
.pain-icon{width:56px;height:56px;border-radius:16px;background:var(--ink);color:var(--red);display:grid;place-items:center;margin-bottom:8px}
.pain-icon .icon{width:28px;height:28px}
.pain .mono{color:var(--ink)}
.pain h3{font:900 24px var(--f-head)}
.pain p{color:#FFE1DE;font-size:15px}

/* 02 tracks */
.tracks-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:24px;align-items:start}
.track-tabs{display:grid;gap:10px}
.track-tab{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:18px;text-align:start;background:transparent;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.tab-icon{width:52px;height:52px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:all .25s}
.tab-icon .icon{width:26px;height:26px}
.track-tab strong{display:block;font:900 19px/1.35 var(--f-head)}
.track-tab small{display:block;color:var(--soft);font-size:14px;margin-top:2px}
.track-tab .tab-number{color:var(--soft)}
.track-tab:hover{border-color:var(--line-2);transform:translateX(-4px)}
html[dir="ltr"] .track-tab:hover{transform:translateX(4px)}
.track-tab.active{background:var(--ink-2);border-color:var(--red)}
.track-tab.active .tab-icon{background:var(--red);border-color:var(--red);color:var(--paper)}
.track-tab.active small,.track-tab.active .tab-number{color:var(--red)}
.track-panel{background:var(--ink-2);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.track-stage{position:relative;padding:44px 20px 12px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 50% 45%,rgba(232,34,27,.15),transparent 60%),linear-gradient(rgba(242,238,230,.05) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(242,238,230,.05) 1px,transparent 1px) 0 0/28px 28px}
.track-code{position:absolute;top:18px;inset-inline-start:22px;color:var(--muted);direction:ltr}
.scene{width:100%;height:auto;max-height:250px;display:block;margin-inline:auto}
.scene[hidden]{display:none}
.scene text{font:500 11px var(--f-mono);letter-spacing:.16em;fill:var(--muted);text-anchor:middle}
.sc-shield{fill:none;stroke:var(--paper);stroke-width:.8;stroke-linecap:round;stroke-linejoin:round}
.sc-scan{fill:var(--red);filter:drop-shadow(0 0 8px var(--red));animation:scan 2.2s ease-in-out infinite alternate}
@keyframes scan{to{translate:0 112px}}
.sc-dots circle{fill:var(--red);animation:fix 4.4s infinite}
.sc-dots circle:nth-child(2){animation-delay:.6s}.sc-dots circle:nth-child(3){animation-delay:1.2s}.sc-dots circle:nth-child(4){animation-delay:1.8s}
@keyframes fix{0%,45%{fill:var(--red);r:5}55%,100%{fill:var(--paper);r:3}}
.sc-window{fill:var(--ink);stroke:var(--line-2);stroke-width:1.5}
.sc-bar{stroke:var(--line-2);stroke-width:1.5}
.sc-dot{fill:var(--line-2)}
.sc-code rect{fill:var(--line-2);transform-box:fill-box;transform-origin:left center;animation:type 6s var(--ease) infinite}
.sc-code rect:nth-child(odd){fill:var(--paper);opacity:.75}
.sc-code rect:nth-child(2){animation-delay:.35s}.sc-code rect:nth-child(3){animation-delay:.7s}.sc-code rect:nth-child(4){animation-delay:1.05s}.sc-code rect:nth-child(5){animation-delay:1.4s}
@keyframes type{0%{transform:scaleX(0)}14%,82%{transform:scaleX(1);opacity:1}94%,100%{transform:scaleX(1);opacity:0}}
.sc-badge{transform-box:fill-box;transform-origin:center;animation:pop 6s var(--ease) infinite}
.sc-badge circle{fill:var(--red)}
.sc-badge text{font:400 26px var(--f-logo);fill:var(--paper);letter-spacing:0}
@keyframes pop{0%,32%{transform:scale(0)}40%{transform:scale(1.15)}46%,84%{transform:scale(1)}94%,100%{transform:scale(0)}}
.sc-waves path{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;opacity:0;animation:signal 2.4s ease-out infinite}
.sc-waves path:nth-child(3),.sc-waves path:nth-child(4){animation-delay:.4s}
.sc-waves path:nth-child(5),.sc-waves path:nth-child(6){animation-delay:.8s}
@keyframes signal{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.sc-tower{fill:none;stroke:var(--paper);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.sc-links use{fill:none;stroke:var(--line-2);stroke-width:2;stroke-dasharray:4 6}
.sc-packets{fill:var(--red);filter:drop-shadow(0 0 5px var(--red))}
.sc-nodes circle{fill:var(--ink);stroke:var(--paper);stroke-width:1.5}
.sc-hub{fill:var(--red)}
.sc-hub-label{font:400 24px var(--f-logo)!important;fill:var(--paper)!important;letter-spacing:0!important}
.track-detail{padding:clamp(24px,3vw,40px);display:grid;gap:20px;align-content:start}
.track-detail h3{font:900 clamp(24px,2.3vw,32px)/1.35 var(--f-head)}
.track-detail > p{color:var(--muted)}
.money{display:grid;gap:12px}
.money .mono{color:var(--red)}
.money ul{display:grid;gap:8px}
.money li{display:flex;align-items:center;gap:10px;font:700 15px var(--f-head)}
.money .icon{width:18px;height:18px;color:var(--red);padding:3px;box-sizing:content-box;border-radius:50%;background:rgba(232,34,27,.14)}
.track-step{display:grid;gap:6px;padding:16px 18px;border-radius:14px;background:var(--ink);border:1px dashed var(--line-2)}
.track-step .mono{color:var(--muted)}
html[lang="ar"] .money .mono,html[lang="ar"] .track-step .mono{font-family:var(--f-head);font-weight:700;letter-spacing:0;font-size:13px}
.track-detail .text-link{justify-self:start}
.track-detail > *,.scene{transition:opacity .28s var(--ease),translate .28s var(--ease)}
.track-panel.switching .track-detail > *,.track-panel.switching .scene{opacity:0;translate:0 10px}

/* 03 path: a paper sheet */
.path-section{background:var(--paper);color:var(--ink);border-radius:40px;margin-inline:clamp(8px,1.4vw,20px)}
.path-section .section-meta{color:var(--paper-sub)}
.path-section .section-heading > p,.path-section .muted{color:#8A8378}
.timeline{position:relative}
.timeline-line{position:absolute;top:32px;inset-inline:32px;height:2px;background:var(--paper-line)}
.timeline-line i{position:absolute;inset:0;background:var(--red);transform:scaleX(var(--fill,0));transform-origin:right}
html[dir="ltr"] .timeline-line i{transform-origin:left}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.step{display:grid;gap:10px;align-content:start}
.step-node{width:64px;height:64px;border-radius:50%;background:var(--paper);border:2px solid var(--paper-line);display:grid;place-items:center;color:#8A8378;margin-bottom:12px;transition:background .4s var(--ease),border-color .4s,color .4s,box-shadow .4s}
.step-node .icon{width:26px;height:26px}
.step.on .step-node{background:var(--red);border-color:var(--red);color:var(--paper);box-shadow:0 0 0 8px rgba(232,34,27,.14)}
.step-no{color:var(--red)}
.step h3{font:900 23px var(--f-head)}
.step p{color:var(--paper-sub);font-size:15px}

/* 01 belief: with JS the section grows tall and its frame stays pinned while you read */
.manifesto-section{position:relative}
.manifesto-sticky{position:relative;display:grid;align-items:center;overflow:hidden;padding-block:clamp(96px,11vw,160px)}
.js .manifesto-section{height:240vh}
.js .manifesto-sticky{position:sticky;top:72px;height:calc(100vh - 72px);min-height:520px;padding-block:0}
.manifesto-mark{position:absolute;inset-inline-end:-4%;top:50%;width:min(62vw,680px);height:auto;translate:0 -50%;rotate:calc((var(--p,0) - .5) * -14deg);scale:calc(.92 + var(--p,0) * .12);pointer-events:none}
.manifesto-mark path{fill:rgba(232,34,27,calc(max(0, var(--p,0) - .75) * .5));stroke:var(--line-2);stroke-width:.5;stroke-dasharray:1;stroke-dashoffset:max(0, calc(1 - var(--p,0) * 1.2))}
.manifesto-inner{position:relative;display:grid;gap:32px}
.manifesto-inner .section-meta{margin:0}
.manifesto-text{font:900 clamp(34px,5vw,76px)/1.3 var(--f-head);max-width:19ch;text-wrap:balance}
.manifesto-text .w{position:relative;opacity:.14;filter:blur(2px);transition:opacity .4s var(--ease),color .4s,filter .4s}
.manifesto-text .w.on{opacity:1;filter:none}
.manifesto-text .w.hot.on{color:var(--red)}
.manifesto-text .w.strike::after{content:"";position:absolute;inset-inline:-3%;top:56%;height:.09em;border-radius:4px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease) .3s}
html[dir="ltr"] .manifesto-text .w.strike::after{transform-origin:left}
.manifesto-text .w.strike.on::after{transform:scaleX(1)}
.manifesto-progress{justify-self:start;display:flex;align-items:center;gap:14px;color:var(--soft);direction:ltr}
.manifesto-progress i{width:160px;height:2px;background:var(--line);position:relative;overflow:hidden}
.manifesto-progress b{position:absolute;inset:0;background:var(--red);transform:scaleX(var(--p,0));transform-origin:left}

/* 05 faq */
.faq-section{border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px 72px;align-items:start}
.faq-grid .section-heading{margin:0}
.faq-list{display:grid;gap:12px}
.faq-list details{border:1px solid var(--line);border-radius:18px;background:var(--ink-2);transition:border-color .25s}
.faq-list details[open]{border-color:var(--line-2)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;font:900 clamp(18px,1.6vw,21px) var(--f-head)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--red);font:400 22px/1 var(--f-mono);transition:rotate .3s var(--ease),background .3s}
.faq-list details[open] summary::after{rotate:45deg;background:var(--red);color:var(--paper)}
.faq-body{padding:0 24px 24px}
.faq-body p{color:var(--muted);max-width:60ch}
.faq-list details[open] .faq-body{animation:drop .4s var(--ease)}
@keyframes drop{from{opacity:0;translate:0 -8px}}

/* 06 cta */
.contact-section{position:relative;overflow:hidden;border-top:1px solid var(--line);padding-block:clamp(96px,11vw,160px)}
.contact-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.4;mask-image:radial-gradient(ellipse at 30% 50%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 30% 50%,#000,transparent 70%)}
.contact-inner{position:relative}
.contact-main{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.contact-main h2{font-size:clamp(44px,7vw,100px)}
.contact-orb{position:relative;width:clamp(180px,18vw,230px);aspect-ratio:1;border-radius:50%;flex:none}
.orb-ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
/* SVG text inherits the page's RTL direction, which would push path text off the circle */
.code-dollar,.scene,.orb-ring{direction:ltr}
.orb-ring text{font:500 12px var(--f-mono);letter-spacing:.1em;fill:var(--muted)}
.orb-core{position:absolute;inset:20%;border-radius:50%;background:var(--red);display:grid;place-content:center;justify-items:center;gap:6px;font:900 17px var(--f-head);transition:transform .35s var(--ease),background .25s,box-shadow .35s}
.orb-core .icon{width:28px;height:28px}
.contact-orb:hover .orb-core{transform:scale(1.08);background:#FF3A2F;box-shadow:0 0 0 14px rgba(232,34,27,.15)}
.contact-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding-block:48px 28px;position:relative;z-index:4;background:var(--ink)}
.footer-top{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:24px 40px}
.footer-brand img{height:26px;width:auto}
.footer-top p{color:var(--muted);font:700 15px var(--f-head)}
.footer-links{display:flex;gap:24px;font:700 14px var(--f-head);color:var(--muted)}
.footer-links a:hover{color:var(--paper)}
.back-top{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:all .2s}
.back-top:hover{border-color:var(--red);color:var(--red)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--soft);font-size:13px}
.demo-label{font:500 11px var(--f-mono);letter-spacing:.1em}
html[lang="ar"] .demo-label{font-family:var(--f-head);font-weight:700;letter-spacing:0;font-size:12px}

/* whatsapp float */
.whatsapp-float{position:fixed;bottom:max(20px,env(safe-area-inset-bottom,0px));inset-inline-start:20px;z-index:40;width:58px;height:58px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 12px 32px rgba(232,34,27,.35);transition:transform .25s var(--ease),opacity .3s;opacity:0;pointer-events:none}
.whatsapp-float.show{opacity:1;pointer-events:auto}
.whatsapp-float:hover{transform:scale(1.07)}
.whatsapp-float .icon{width:26px;height:26px}

/* dialog */
.join-dialog{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:24px;background:var(--ink-2);color:var(--paper);overflow:auto}
.join-dialog::backdrop{background:rgba(5,5,5,.8);backdrop-filter:blur(6px)}
.join-dialog[open]{animation:dialog-in .4s var(--ease)}
@keyframes dialog-in{from{opacity:0;translate:0 24px;scale:.98}}
.dialog-close{position:absolute;top:16px;inset-inline-end:16px;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;font-size:22px;line-height:1;transition:border-color .2s}
.dialog-close:hover{border-color:var(--paper)}
.join-dialog-header{padding:clamp(28px,4vw,40px) clamp(24px,4vw,40px) 0;display:grid;gap:10px}
.join-dialog-header h2{font:900 clamp(30px,4vw,40px)/1.2 var(--f-head)}
.join-dialog-header p{color:var(--muted)}
#join-form,.message-result{padding:28px clamp(24px,4vw,40px) clamp(28px,4vw,40px);display:grid;gap:18px}
legend{font:700 14px var(--f-head);margin-bottom:12px}
.interest-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.interest-options label{position:relative}
.interest-options input{position:absolute;opacity:0;inset:0}
.interest-options span{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:all .2s}
.interest-options b{font:700 14px var(--f-head)}
.interest-options .icon{color:var(--muted)}
.interest-options input:checked + span{background:rgba(232,34,27,.12);border-color:var(--red)}
.interest-options input:checked + span .icon{color:var(--red)}
.interest-options input:focus-visible + span{outline:2px solid var(--paper);outline-offset:2px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row label{display:grid;gap:8px;font:700 14px var(--f-head)}
.form-row input{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--ink);color:var(--paper);font:400 16px var(--f-body);transition:border-color .2s}
.form-row input::placeholder{color:var(--soft)}
.form-row input:focus{border-color:var(--red);outline:none}
.form-row input[aria-invalid="true"]{border-color:#FF6A62}
.form-error{color:#FF7A73;font-size:14px}
.form-error:empty{display:none}
.form-submit{width:100%}
.form-note{color:var(--soft);font-size:13px}
.result-icon{width:52px;height:52px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.result-icon .icon{width:26px;height:26px}
.message-result h3{font:900 26px var(--f-head)}
.message-result > p{color:var(--muted)}
#message-preview{margin:0;padding:18px;background:var(--ink);border:1px solid var(--line);border-radius:14px;white-space:pre-wrap;font:400 15px/1.8 var(--f-body)}
.result-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
#copy-status{color:var(--muted);font-size:14px;min-height:1.4em}

/* motion: content is visible without JS; these only run once script.js adds .js */
.js .reveal{opacity:0;translate:0 32px;transition:opacity .8s var(--ease) calc(var(--i,0) * 90ms),translate .8s var(--ease) calc(var(--i,0) * 90ms)}
.js .reveal.in{opacity:1;translate:0 0}
.js .hand-circle path{stroke-dashoffset:1;animation:draw 1.1s 1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.js .hero h1 .line,.js .hero-description,.js .hero-actions,.js .hero-tracks,.js .hero-topline{animation:rise .9s var(--ease) both}
.js .hero h1 .line:nth-of-type(2){animation-delay:.12s}
.js .hero-description{animation-delay:.25s}.js .hero-actions{animation-delay:.35s}.js .hero-tracks{animation-delay:.45s}
.js .hero-visual{animation:zoom 1.2s var(--ease) .2s both}
@keyframes rise{from{opacity:0;translate:0 36px}}
@keyframes zoom{from{opacity:0;scale:.92}}

/* desktop: content steps aside for the rail */
@media (min-width:1001px){
  :root{--rail-gap:64px}
  .rail{display:block;position:absolute;top:0;bottom:0;z-index:3;width:2px;background:var(--line);inset-inline-start:calc(max(0px,(100% - 1240px) / 2) + var(--gutter) + 15px);pointer-events:none}
  .rail-fill{position:absolute;inset:0;background:linear-gradient(to bottom,var(--red),var(--red-deep));transform:scaleY(var(--rail,0));transform-origin:top}
  .rail-head{position:absolute;top:calc(var(--rail,0) * 100%);left:-6px;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 4px var(--red),0 0 18px var(--red)}
  main .section-meta::before{content:"";position:absolute;inset-inline-start:-55px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--ink);border:2px solid var(--line-2);transition:background .4s,border-color .4s,box-shadow .4s}
  .in .section-meta::before,.section-meta.in::before{background:var(--red);border-color:var(--red);box-shadow:0 0 0 6px rgba(232,34,27,.2)}
  .truth-section .section-meta.in::before{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 6px rgba(13,13,13,.2)}
  .path-section .section-meta::before{background:var(--paper);border-color:var(--paper-line)}
}
@media (max-width:1000px){
  .desktop-nav{display:none}
  .menu-toggle{display:flex}
  .hero-grid,.truth-main,.tracks-layout,.faq-grid{grid-template-columns:1fr}
  .hero-visual{max-width:440px}
  .track-tabs{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .timeline-line{display:none}
  .footer-top{grid-template-columns:1fr auto}
  .footer-links{grid-column:1/-1;order:3}
}
/* phone: one rhythm for every section. 20px gutter, 72px section padding,
   centered hero and CTA, start-aligned content, full-width actions, and the
   same "icon | text" row for pains, steps, and tabs. */
@media (max-width:640px){
  body{font-size:16px;line-height:1.75}
  .section-pad,.contact-section{padding-block:72px}
  .section-meta{margin-bottom:16px;font-size:12px}
  .section-heading{margin-bottom:32px;gap:12px}
  .section-heading h2{font-size:34px;line-height:1.2}
  .section-heading > p{font-size:15px}
  .header-inner{height:64px}
  .brand img{height:17px}
  .header-actions .button-small{display:none}

  /* hero: centered stack, visual follows the actions */
  .hero{padding-block:20px 8px;text-align:center}
  .hero::before{inset:-10% -40% auto auto;width:120vw;height:120vw}
  .hero-topline{justify-content:center;border:0;padding:0}
  .hero-topline .mono{display:none}
  .hero-topline .eyebrow{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12px;background:rgba(23,22,21,.7)}
  .hero-grid{padding-block:28px 8px;gap:36px}
  .hero-copy{display:grid;justify-items:center}
  .hero h1{font-size:44px;line-height:1.18}
  .hand-circle{inset:-10% -8% -16% -8%;width:116%;height:126%}
  .hero-description{font-size:16px;line-height:1.85;max-width:32ch;margin-top:18px}
  .hero-actions{flex-direction:column;align-items:stretch;width:100%;gap:12px;margin-top:28px}
  .hero-actions .text-link{justify-content:center;min-height:54px;border:1px solid var(--line-2);border-radius:999px;padding:0 24px}
  .hero-actions .text-link::after{display:none}
  .hero-tracks,.hero-bottom{display:none}
  .hero-visual{max-width:330px;gap:8px}
  .cd-ring{display:none}

  .marquee{padding-block:14px}
  .marquee span{font-size:22px}
  .marquee b{font-size:16px}

  /* 01 truth */
  .truth-section{margin-block:28px}
  .truth-section::before,.truth-section::after{height:28px}
  .truth-main{gap:20px}
  .statement{font-size:40px;line-height:1.15}
  .truth-copy{font-size:16px;gap:12px}
  .pains{grid-template-columns:1fr;gap:12px;margin-top:36px}
  .pain{grid-template-columns:48px 1fr;column-gap:16px;row-gap:2px;padding:18px;border-radius:16px}
  .pain-icon{grid-row:1/span 3;width:48px;height:48px;border-radius:14px;margin:0}
  .pain-icon .icon{width:24px;height:24px}
  .pain h3{font-size:19px}
  .pain p{font-size:14px}
  .pain:hover{transform:none}

  /* 02 tracks: tabs become a swipeable pill row */
  .tracks-layout{gap:16px}
  .track-tabs{display:flex;gap:8px;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter);scroll-snap-type:x mandatory;scrollbar-width:none}
  .track-tabs::-webkit-scrollbar{display:none}
  .track-tab{flex:none;grid-template-columns:auto auto;gap:10px;padding-block:6px;padding-inline:6px 16px;border-radius:999px;scroll-snap-align:start}
  .track-tab:hover,html[dir="ltr"] .track-tab:hover{transform:none}
  .track-tab small,.track-tab .tab-number{display:none}
  .track-tab strong{font-size:14px;white-space:nowrap}
  .tab-icon{width:36px;height:36px;border-radius:50%}
  .tab-icon .icon{width:18px;height:18px}
  .track-panel{border-radius:20px}
  .track-stage{padding:40px 8px 6px}
  .track-code{top:14px;inset-inline-start:16px;font-size:11px}
  .scene{max-height:190px}
  .track-detail{padding:22px 20px 24px;gap:16px}
  .track-detail h3{font-size:22px}
  .track-detail > p{font-size:15px}

  /* 03 path */
  .path-section{border-radius:28px;margin-inline:8px}
  .steps{grid-template-columns:1fr;row-gap:28px}
  .timeline-line{display:block;top:0;bottom:0;inset-inline:27px auto;width:2px;height:auto}
  .timeline-line i{transform:scaleY(var(--fill,0));transform-origin:top}
  html[dir="ltr"] .timeline-line i{transform-origin:top}
  .step{grid-template-columns:56px 1fr;column-gap:16px;row-gap:2px}
  .step-node{grid-row:1/span 3;width:56px;height:56px;margin:0}
  .step-node .icon{width:22px;height:22px}
  .step h3{font-size:19px}
  .step p{font-size:14px}

  /* 01 belief */
  .js .manifesto-section{height:200vh}
  .js .manifesto-sticky{top:64px;height:calc(100svh - 64px);min-height:0}
  .manifesto-text{font-size:32px;line-height:1.5}
  .manifesto-mark{width:110vw;inset-inline-end:-40%}
  .manifesto-progress i{width:96px}

  /* 05 faq */
  .faq-grid{gap:24px}
  .faq-list summary{font-size:16px;padding:18px}
  .faq-list summary::after{width:32px;height:32px}
  .faq-body{padding:0 18px 18px}
  .faq-body p{font-size:15px}

  /* 06 cta: centered like the hero */
  .contact-inner{text-align:center}
  .contact-section .section-meta{justify-content:center}
  .contact-main{flex-direction:column;gap:28px}
  .contact-main h2{font-size:42px}
  .contact-orb{width:184px}
  .contact-bottom{flex-direction:column;gap:6px;margin-top:36px;font-size:15px}

  .site-footer{padding-block:40px 96px;text-align:center}
  .footer-top{grid-template-columns:1fr;justify-items:center;gap:16px}
  .footer-links{grid-column:auto;order:0;justify-content:center}
  .back-top{display:none}
  .footer-bottom{flex-direction:column;align-items:center;gap:6px;margin-top:24px}
  .whatsapp-float{width:52px;height:52px;bottom:max(16px,env(safe-area-inset-bottom,0px));inset-inline-start:16px}

  /* dialog becomes a bottom sheet */
  .join-dialog{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0}
  .join-dialog[open]{animation:sheet .45s var(--ease)}
  .form-row,.interest-options{grid-template-columns:1fr}
}
@keyframes sheet{from{translate:0 100%}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;translate:none}
  .js .hand-circle path{stroke-dashoffset:0}
  .js .manifesto-section{height:auto}
  .js .manifesto-sticky{position:relative;height:auto;padding-block:96px}
  .manifesto-text .w{opacity:1;filter:none}
  .manifesto-text .w.strike::after{transform:scaleX(1)}
  .manifesto-mark path{stroke-dashoffset:0}
  .manifesto-progress{display:none}
  .typed{width:18ch}
}