:root{--wrap:1200px;--cream:#F6EEDF;--paper2:#FFFBF3;--char:#1C1814;--tomato:var(--brand)}
body.site{background:var(--cream);font-size:16.5px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.sec-t{font-size:clamp(28px,3.6vw,44px);line-height:1.25;letter-spacing:-.01em;margin-bottom:18px}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);line-height:1.85;max-width:560px}
.fine{font-size:14px;color:var(--ink-3)}

/* الهيدر */
.s-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--cream) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.s-head-in{display:flex;align-items:center;gap:28px;height:68px}
.s-nav{display:flex;gap:24px;font-size:15px}
.s-nav a,.s-link{text-decoration:none;color:var(--ink-2)}
.s-head-end{margin-inline-start:auto;display:flex;align-items:center;gap:16px}
@media (hover:hover){.s-nav a:hover,.s-link:hover{color:var(--ink)}}

/* الهيرو */
.hero{padding:56px 0 80px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(42px,6.2vw,86px);line-height:1.12;letter-spacing:-.02em;font-weight:800}
.hero h1 em{font-style:normal;color:var(--tomato);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;inset-inline:0;bottom:.04em;height:.12em;background:currentColor;opacity:.18;border-radius:2px}
.hero .lead{margin:22px 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.btn.light{background:#fff;color:#201B16;border-color:#fff}

/* المسرح الحي */
.stage{position:relative;height:560px}
.stage [data-s]{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.stage:not(.run) [data-s]{opacity:1}
.stage.run [data-s]{opacity:0}
.stage.run [data-s].on{opacity:1;transform:none}
.st-ticket{position:absolute;inset-inline-start:0;top:0;width:220px;background:#FFFBF3;z-index:2;color:#201B16;padding:18px 18px 26px;font-family:"Futura","GE SS";font-size:14.5px;transform:rotate(-4deg);box-shadow:0 18px 40px -18px rgba(60,40,20,.45);clip-path:polygon(0 0,100% 0,100% 100%,95% 97.5%,90% 100%,85% 97.5%,80% 100%,75% 97.5%,70% 100%,65% 97.5%,60% 100%,55% 97.5%,50% 100%,45% 97.5%,40% 100%,35% 97.5%,30% 100%,25% 97.5%,20% 100%,15% 97.5%,10% 100%,5% 97.5%,0 100%)}
.stage.run .st-ticket{transform:rotate(-4deg) translateY(-30px)}
.stage.run .st-ticket.on{transform:rotate(-4deg)}
.tk-top{display:flex;justify-content:space-between;border-bottom:2px dashed #B3A693;padding-bottom:8px;margin-bottom:8px}
.tk-row{display:flex;justify-content:space-between;color:#4E453C}
.tk-cut{border-top:2px dashed #B3A693;margin:10px 0}
.tk-ph{display:flex;flex-direction:column;background:#201B16;color:#fff;padding:8px 10px;border-radius:4px}
.tk-ph span{font-size:12px;color:#BDB1A2}
.tk-ph b{font-size:18px;letter-spacing:.05em}
.st-clock{position:absolute;inset-inline-start:6%;top:330px;z-index:3;display:flex;align-items:center;gap:10px;background:var(--char);color:#fff;padding:8px 16px 8px 10px;border-radius:30px;border:1px solid #4A4038;font-size:15px}
.stage.run .st-clock{transform:scale(.8)}
.clk{width:30px;height:30px;border-radius:50%;border:2px solid #fff;position:relative;flex:none}
.clk i,.clk::after{content:"";position:absolute;left:50%;bottom:50%;width:2px;background:#fff;transform-origin:bottom center;border-radius:2px}
.clk i{height:10px;margin-left:-1px}
.clk::after{height:7px;margin-left:-1px;transform:rotate(90deg)}
.stage.run .st-clock.on .clk i{animation:spin 1.2s linear 1}
@keyframes spin{to{transform:rotate(360deg)}}
.st-phone{position:absolute;inset-inline-end:0;top:60px;width:min(310px,58%);background:#EFE7DA;border-radius:26px;border:8px solid var(--char);box-shadow:0 30px 60px -24px rgba(40,25,10,.5);overflow:hidden}
.stage.run .st-phone{transform:translateY(24px)}
.ph-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#1F4D3A;color:#fff}
.ph-bar > div{display:flex;flex-direction:column;line-height:1.3}
.ph-bar b{font-size:14.5px}
.ph-bar span{font-size:12px;color:#BFDCCB}
.ph-av{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center}
.ph-av .mark{width:22px;height:22px;color:var(--tomato)}
.ph-body{padding:14px 12px 18px;display:flex;flex-direction:column;gap:9px;min-height:300px}
.b{margin:0;padding:9px 12px;border-radius:10px;font-size:14.5px;line-height:1.6;max-width:86%;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.b.in{background:#fff;color:#201B16;align-self:flex-start;border-start-start-radius:2px}
.b.out{background:#D7F1CC;color:#1D2A19;align-self:flex-end;border-start-end-radius:2px}
.b.note{background:#fff;color:#201B16;border-inline-start:4px solid var(--bad);max-width:100%}
.b u{color:#1F6FB2;text-decoration:none;font-family:"Futura";direction:ltr;unicode-bidi:isolate}
.stage.run .b{transform:translateY(10px)}
.st-alert{position:absolute;inset-inline-start:0;bottom:30px;z-index:3;width:270px;background:#fff;color:#201B16;border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;border-inline-start:5px solid var(--bad);box-shadow:0 20px 40px -20px rgba(60,20,10,.45);font-size:14.5px}
.st-alert b{color:var(--bad)}
.al-go{display:inline-flex;align-items:center;gap:6px;color:#1F4D3A;font-weight:700;margin-top:4px}
.al-go svg{width:18px;height:18px}
.stage.run .st-alert{transform:translateX(30px)}

/* الخطوات */
.how{background:var(--paper2);padding:90px 0;border-block:1px solid var(--line)}
.tape{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:3px solid var(--ink)}
.tape li{padding:26px 26px 6px 0;display:flex;gap:16px;border-inline-start:1px dashed var(--line-2)}
.tape li:first-child{border-inline-start:0;padding-inline-start:0}
.tape li + li{padding-inline-start:26px}
.tp-n{font:700 56px/1 "Futura",sans-serif;color:var(--tomato);flex:none;margin-top:-6px}
.tape h3{font-size:21px;margin-bottom:8px}
.tape p{color:var(--ink-2);margin:0}

/* جرّب */
.try{background:var(--tomato);color:#fff;padding:90px 0}
.try-in{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.try .sec-t{color:#fff}
.try p{color:#FFE4DC}
.try-opts{display:flex;flex-direction:column;gap:10px;margin:24px 0 16px;max-width:380px}
.opt{text-align:start;padding:14px 18px;border-radius:12px;border:2px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:17px;font-weight:600;cursor:pointer}
.opt[aria-pressed=true]{background:#fff;color:#201B16;border-color:#fff}
@media (hover:hover){.opt:hover{border-color:#fff}}
.try .fine{color:#FFD3C7}
.try-out{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:rgba(0,0,0,.14);border-radius:18px;padding:22px}
.to-col{display:flex;flex-direction:column;gap:10px}
.to-h{font-size:13px;color:#FFD3C7;font-weight:600}
.try-out .b{max-width:100%;min-height:96px;transition:opacity .25s}
.try-out .b.fade{opacity:.2}
.b.note.ok{border-inline-start-color:var(--good)}
.b.note.muted{border-inline-start-color:#B3A693;color:#6B6157}

/* الكمبيوتر */
.pc{background:var(--char);color:#F2EADF;padding:96px 0}
.pc-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.pc .sec-t{color:#fff}
.pc p{color:#C9BDAE}
.facts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column}
.facts li{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:16px 0;border-top:1px solid #3A322B}
.facts b{color:#fff}
.facts span{color:#C9BDAE}
.pc-win{background:#2A241F;border-radius:12px;border:1px solid #3F362E;box-shadow:0 40px 80px -30px #000;overflow:hidden}
.win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#221D19;border-bottom:1px solid #3F362E;font-size:13px;color:#A3978A}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#4A4038}
.win-bar span{margin-inline-start:8px}
.win-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.win-line{display:flex;align-items:center;gap:12px;background:#322B25;padding:12px 14px;border-radius:8px;border:1px solid #3F362E}
.win-line > div{display:flex;flex-direction:column;flex:1;line-height:1.4}
.win-line b{color:#fff;font-size:15px}
.win-line span:not(.dot){font-size:13px;color:#A3978A}
.win-line em{font-style:normal;font-size:13px;font-weight:700;color:#7FD29E}
.win-line.off{border-color:#7A2E25;background:#3A2420}
.win-line.off em{color:#FF8A7A}
.win-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:6px;border-top:1px solid #3F362E;padding-top:14px}
.win-stats div{display:flex;flex-direction:column}
.win-stats b{font:700 28px "Futura";color:#fff}
.win-stats span{font-size:12.5px;color:#A3978A}
@media (prefers-reduced-motion:no-preference){[data-blink] .dot{animation:blink 1.4s ease-in-out infinite}}
@keyframes blink{50%{opacity:.25}}

/* التحكم */
.control{padding:96px 0}
.ctl-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:0;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--paper2);margin-top:12px}
.ctl{padding:24px;display:flex;flex-direction:column;gap:8px;border-inline-start:1px solid var(--line-2)}
.ctl:first-child{border-inline-start:0;background:#FFF6E2}
.ctl .sw{width:28px;height:6px;border-radius:3px}
.ctl b{font-size:19px}
.ctl p{color:var(--ink-2);margin:0}
.ctl-note{margin-top:18px;color:var(--ink-2);max-width:720px}

/* الموزعين */
.dist{background:#25342B;color:#EAF1EA;padding:96px 0}
.dist-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.dist .sec-t{color:#fff}
.dist .lead{color:#BFD2C3}
.dist-list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0}
.dist-list div{padding:20px 20px 20px 0;border-top:1px solid #3E5245}
.dist-list div:nth-child(even){padding-inline-start:20px;border-inline-start:1px solid #3E5245}
.dist-list dt{font-weight:700;font-size:18px;color:#fff;margin-bottom:6px}
.dist-list dd{margin:0;color:#BFD2C3}

/* السعر */
.price{padding:96px 0}
.price-in{display:grid;grid-template-columns:380px 1fr;gap:60px;align-items:center}
.pr-card{background:var(--ink);color:#fff;border-radius:16px;padding:30px;display:flex;flex-direction:column;gap:12px}
.pr-k{font-size:14px;color:#BDB1A2}
.pr-v{font:700 64px/1 "Futura","GE SS";display:flex;align-items:baseline;gap:10px}
.pr-v small{font:500 17px "GE SS";color:#BDB1A2}
.pr-card p{color:#D8CDBF}
.need{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column}
.need li{padding:12px 0;border-top:1px solid var(--line-2);font-size:17px}
.need li:last-child{border-bottom:1px solid var(--line-2)}

/* الأسئلة */
.faq{padding:20px 0 96px}
.faq-in{display:grid;grid-template-columns:.6fr 1.4fr;gap:40px}
.qa details{border-top:1px solid var(--line-2);padding:18px 0}
.qa details:last-child{border-bottom:1px solid var(--line-2)}
.qa summary{font-size:18px;font-weight:700;display:flex;justify-content:space-between;gap:12px}
.qa summary::after{content:"+";font:400 26px/1 "Futura";color:var(--tomato)}
.qa details[open] summary::after{content:"−"}
.qa p{margin:10px 0 0;color:var(--ink-2)}

/* الختام */
.final{background:var(--tomato);color:#fff;padding:80px 0}
.final-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.final h2{font-size:clamp(26px,3.2vw,40px);max-width:720px;line-height:1.35}
.s-foot{background:var(--char);color:#C9BDAE;padding:44px 0}
.s-foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.s-foot .logo{color:#fff}
.s-foot p{margin:10px 0 0}
.s-foot nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.s-foot a{text-decoration:none}

/* صفحات نصية */
.doc{padding:60px 28px 90px;max-width:780px}
.doc h1{font-size:40px;margin-bottom:14px}
.doc h2{font-size:21px;margin:28px 0 8px}
.doc p{color:var(--ink-2)}
.doc-steps{padding-inline-start:22px;display:flex;flex-direction:column;gap:12px;margin:24px 0}

[data-theme=dark] body.site{--cream:#16130F;--paper2:#1F1B17}
[data-theme=dark] .ctl:first-child{background:#2A231A}
[data-theme=dark] .pr-card{background:#2A241F}

@media (max-width:1020px){
  .s-nav{display:none}
  .hero-in,.try-in,.pc-in,.dist-in,.price-in,.faq-in{grid-template-columns:1fr}
  .stage{height:540px;max-width:560px;width:100%;margin:0 auto}
  .ctl-grid{grid-template-columns:1fr}
  .ctl{border-inline-start:0;border-top:1px solid var(--line-2)}
  .ctl:first-child{border-top:0}
}
@media (max-width:720px){
  .wrap{padding:0 18px}
  .s-head-in{height:60px;gap:12px}
  .s-link{display:none}
  .hero{padding:32px 0 50px}
  .hero h1{font-size:44px}
  .stage{height:auto;display:flex;flex-direction:column;gap:14px;align-items:stretch}
  .stage > *{position:relative!important;inset:auto!important}
  .st-ticket{width:210px;font-size:13.5px;align-self:flex-start;margin-inline-start:6px}
  .st-clock{align-self:center}
  .st-phone{width:100%;max-width:360px;align-self:center}
  .ph-body{min-height:0}
  .st-alert{width:auto;max-width:330px;align-self:flex-end}
  .stage.run .st-phone,.stage.run .st-alert{transform:translateY(16px)}
  .how,.try,.pc,.control,.dist,.price{padding:64px 0}
  .tape{grid-template-columns:1fr}
  .tape li,.tape li + li{border-inline-start:0;border-top:1px dashed var(--line-2);padding:22px 0 4px}
  .tape li:first-child{border-top:0}
  .try-out{grid-template-columns:1fr;padding:16px}
  .try-out .b{min-height:0}
  .facts li{grid-template-columns:1fr;gap:4px}
  .dist-list{grid-template-columns:1fr}
  .dist-list div,.dist-list div:nth-child(even){padding:18px 0;border-inline-start:0}
  .pr-v{font-size:54px}
  .doc{padding:40px 18px 70px}
  .doc h1{font-size:32px}
}