:root{--coal:#1E1F22;--coal2:#2A2C30;--line:#3C3F45;--orange:#FF6A13;--orange-d:#E55A06;--white:#fff;--mute:#BCC0C7;--ink:#1E1F22;--sub:#4A4E56;--r:14px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;background:var(--coal);color:var(--white);line-height:1.85;font-size:18px}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.light :focus-visible{outline-color:var(--orange-d)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--orange);color:var(--coal);padding:10px 16px;border-radius:10px;font-weight:700;z-index:30}
.skip:focus{top:10px}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}
section{padding:56px 0}
@media(min-width:760px){section{padding:80px 0}}
h1,h2,h3{line-height:1.4;font-weight:700}
h1{font-size:clamp(2.1rem,8vw,3.4rem)}
h2{font-size:clamp(1.65rem,5.5vw,2.3rem);margin-bottom:12px}
h3{font-size:1.2rem}
.lead{color:var(--mute);max-width:60ch}
.light{background:var(--white);color:var(--ink)}
.light .lead{color:var(--sub)}
header.top{position:sticky;top:0;z-index:20;background:var(--coal);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.2rem}
.brand img{width:36px;height:36px}
.brand small{color:var(--mute);font-weight:400;font-size:.72rem;display:block;line-height:1.2;letter-spacing:.08em}
.desk{display:none}
.menu-btn{display:none;align-items:center;gap:10px;min-height:48px;padding:0 16px;background:var(--coal2);color:var(--white);border:1px solid var(--line);border-radius:12px;font:inherit;font-weight:600;cursor:pointer}
.js .menu-btn{display:inline-flex}
.burger,.burger::before,.burger::after{display:block;width:20px;height:2px;background:var(--orange);border-radius:2px;position:relative}
.burger::before,.burger::after{content:"";position:absolute;inset-inline-start:0}
.burger::before{top:-6px}.burger::after{top:6px}
.menu{border-top:1px solid var(--line);background:var(--coal)}
.menu a{display:flex;align-items:center;min-height:56px;padding:0 4px;text-decoration:none;font-size:1.1rem;border-bottom:1px solid var(--line)}
.menu a:last-child{border-bottom:0;color:var(--mute)}
.menu a:hover{color:var(--orange)}
.menu .wrap{display:grid;padding-block:4px 12px}
@media(min-width:820px){
  .desk{display:flex;align-items:center;gap:22px}
  .desk a:not(.btn){text-decoration:none;color:var(--mute);font-size:.98rem;padding:8px 2px}
  .desk a:not(.btn):hover{color:var(--white)}
  .js .menu-btn,.menu{display:none}
}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;background:var(--orange);color:var(--coal);font:inherit;font-weight:700;text-decoration:none;border:2px solid var(--orange);cursor:pointer}
.btn:hover{background:var(--orange-d);border-color:var(--orange-d)}
.btn.ghost{background:transparent;color:inherit;border-color:var(--line)}
.btn.ghost:hover{border-color:var(--orange)}
.btn.sm{min-height:44px;padding:0 18px;font-size:.95rem}
.btn:disabled{background:transparent;border:2px dashed var(--line);color:var(--mute);cursor:not-allowed}
.btn:disabled:hover{background:transparent;border-color:var(--line)}
.status{margin-top:14px;padding:12px 16px;border-inline-start:4px solid var(--orange);background:var(--coal);border-radius:8px;color:var(--mute);font-size:.98rem;line-height:1.7}
.row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media(max-width:559px){.row .btn{width:100%}}
.hero{padding:40px 0 64px}
.hero .wrap{display:grid;gap:40px}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.1fr .9fr;align-items:center}}
.hero .lead{margin-top:16px;font-size:1.1rem}
.lane{height:6px;margin-top:40px;background:repeating-linear-gradient(to left,var(--orange) 0 36px,transparent 36px 64px);border-radius:3px}
.demo{background:var(--coal2);border:1px solid var(--line);border-radius:20px;padding:22px}
.demo-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;font-weight:700}
.tag{border:1px dashed var(--orange);color:var(--orange);border-radius:99px;padding:0 12px;font-size:.85rem;font-weight:400}
.demo dl{display:grid;grid-template-columns:1fr auto}
.demo dt,.demo dd{padding:12px 0;border-bottom:1px solid var(--line)}
.demo dd{font-weight:700;text-align:end}
.demo .net{color:var(--orange);font-size:1.2rem;border-bottom:0}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.choices span{text-align:center;padding:12px 4px;border-radius:10px;border:1px solid var(--line);font-weight:600}
.choices .on{background:var(--orange);border-color:var(--orange);color:var(--coal)}
.demo p{margin-top:14px;font-size:.9rem;color:var(--mute);line-height:1.7}
.flist{margin-top:28px;padding:0;border-top:1px solid #d5d7db}
.flist li{list-style:none;display:grid;gap:4px;padding:22px 0;border-bottom:1px solid #d5d7db}
.flist p{color:var(--sub)}
@media(min-width:760px){.flist li{grid-template-columns:270px 1fr;gap:32px}}
.flist h3::before{content:"";display:inline-block;width:10px;height:10px;background:var(--orange);border-radius:50%;margin-inline-end:10px}
.steps{margin-top:28px;display:grid;gap:14px;counter-reset:s;padding:0}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
.steps li{list-style:none;counter-increment:s;background:var(--coal2);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--orange);color:var(--coal);font-weight:700;margin-bottom:8px}
.steps p{color:var(--mute)}
.dl{background:var(--coal2);border-block:1px solid var(--line)}
.facts{display:grid;gap:0;margin-top:24px;max-width:520px;border:1px solid var(--line);border-radius:var(--r);background:var(--coal);padding:4px 18px}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--mute)}
.facts dd{font-weight:700}
.facts dd.empty{color:var(--mute);font-weight:400}
details{border-bottom:1px solid #d5d7db}
summary{cursor:pointer;font-weight:700;padding:18px 0;min-height:56px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--orange-d);font-size:1.5rem;line-height:1}
details[open] summary::after{content:"−"}
details p{padding-bottom:18px;color:var(--sub)}
footer{padding:36px 0;border-top:1px solid var(--line);color:var(--mute);font-size:.95rem}
footer .wrap{display:grid;gap:16px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 22px}
footer nav a{display:inline-flex;align-items:center;min-height:44px}
.prose{padding:40px 0 56px}
.prose h2{margin-top:32px;font-size:1.45rem}
.prose p{color:var(--mute);margin-top:8px;max-width:65ch}
.warn{border:2px dashed var(--orange);border-radius:var(--r);padding:16px 18px;margin-top:20px;font-weight:600}
.nf{min-height:calc(100vh - 140px);display:grid;align-content:center;padding:48px 0}
.nf .big{font-size:clamp(5rem,28vw,10rem);font-weight:700;line-height:1;color:var(--orange)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ASPHALT cinematic redesign — v2 */
:root{--coal:#080a10;--coal2:#111722;--line:#273244;--orange:#ff343d;--orange-d:#d91e32;--cyan:#19c8ff;--mute:#b8c4d5;--ink:#10141c;--sub:#4e5969;--r:18px}
body{background:#080a10;color:#f7f9ff;overflow-x:hidden}
.top{background:rgba(7,9,15,.94)!important;border-bottom:1px solid rgba(38,200,255,.18)!important;backdrop-filter:blur(16px)}
.brand img{filter:drop-shadow(0 0 8px rgba(255,45,58,.55))}
.brand small{letter-spacing:.12em;color:#9eacc1}
.desk a:not(.btn):hover{color:var(--cyan)!important}
.btn{background:linear-gradient(110deg,#ff283c,#ff6338);border:1px solid #ff5960;color:white;box-shadow:0 8px 28px rgba(255,40,60,.2);transition:transform .2s,box-shadow .2s,filter .2s}
.btn:hover{background:linear-gradient(110deg,#e91d32,#f14d31);border-color:#ff6670;transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,40,60,.32)}
.btn.ghost{background:rgba(10,15,24,.55);border:1px solid rgba(36,197,255,.42);color:#eaf8ff;box-shadow:none}
.btn.ghost:hover{border-color:var(--cyan);background:rgba(18,44,60,.7)}
.btn:disabled{box-shadow:none;color:#aeb8c8;border-color:#465166}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:58px 0 28px;background:radial-gradient(ellipse at 8% 20%,rgba(255,25,45,.18),transparent 42%),radial-gradient(ellipse at 92% 28%,rgba(0,167,255,.19),transparent 42%),#080a10}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.22;background:linear-gradient(90deg,transparent 49.8%,rgba(24,194,255,.3) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(255,40,58,.18) 50%,transparent 50.2%);background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent 85%)}
.hero-wrap{display:grid;gap:30px;align-items:center}
.hero-copy{position:relative;z-index:2;max-width:620px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid rgba(255,65,76,.38);border-radius:99px;background:rgba(255,40,55,.08);color:#ffb1b7;font-size:.9rem;margin-bottom:18px}
.eyebrow i{width:8px;height:8px;background:#ff3947;border-radius:50%;box-shadow:0 0 14px #ff3947}
h1{font-size:clamp(2.35rem,7vw,4.4rem);letter-spacing:-.035em;text-shadow:0 5px 28px rgba(0,0,0,.45)}
h1 em{font-style:normal;color:#ff4b55;text-shadow:0 0 28px rgba(255,42,58,.28)}
.hero .lead{margin-top:18px;color:#c1cada;font-size:1.12rem;max-width:56ch}
.hero-actions{margin-top:28px;gap:12px}.hero-actions .btn{min-height:58px;padding-inline:24px}
.btn-download{position:relative}.btn-download span{font-size:1.25rem;margin-inline-end:8px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;color:#aab9cc;font-size:.92rem}.hero-points span:first-letter{color:var(--cyan)}
.hero-art-wrap{position:relative;min-width:0;max-width:780px;margin-inline:auto}
.art-glow{position:absolute;inset:12% 8%;border-radius:50%;background:linear-gradient(90deg,rgba(255,24,42,.3),rgba(0,174,255,.28));filter:blur(55px);z-index:-1}
.hero-art{display:block;width:100%;height:auto;max-height:590px;object-fit:contain;border-radius:22px;border:1px solid rgba(130,174,220,.2);box-shadow:0 22px 80px rgba(0,0,0,.55),0 0 36px rgba(0,160,255,.12);mask-image:linear-gradient(to bottom,black 88%,transparent 100%)}
.art-caption{display:block;text-align:center;color:#9eabc0;font-size:.82rem;letter-spacing:.16em;margin-top:-8px}.art-caption b{color:#ff4652;padding-inline:8px}
.hero-bottom{display:flex;align-items:center;justify-content:center;gap:14px;color:#8190a7;font-size:.86rem;letter-spacing:.08em;margin-top:26px}.hero-bottom span{height:1px;width:min(18vw,150px);background:linear-gradient(90deg,transparent,var(--cyan))}.hero-bottom span:last-child{background:linear-gradient(90deg,var(--orange),transparent)}
section{padding:64px 0}h2{color:#fff;margin-bottom:14px}section:not(.hero):not(.dl){background:#0b1019}
section.light{background:linear-gradient(135deg,#111a27,#0c111a)!important;color:#f4f7ff!important;border-block:1px solid #202c3c}
.light .lead{color:#b7c4d6}.flist{border:0;display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px}
.flist li{border:1px solid #26364a;background:linear-gradient(145deg,rgba(21,31,46,.95),rgba(11,16,25,.95));border-radius:16px;padding:20px;box-shadow:0 10px 26px rgba(0,0,0,.15)}
.flist li h3{color:#f4f8ff}.flist li p{color:#aebbd0}.flist h3::before{background:var(--orange);box-shadow:0 0 12px rgba(255,45,60,.55)}
.steps{gap:16px}.steps li{background:linear-gradient(145deg,#151f2d,#0e141e);border:1px solid #293a50;box-shadow:0 10px 28px rgba(0,0,0,.15)}.steps li::before{background:linear-gradient(135deg,#ff293e,#ff7046);color:white;box-shadow:0 0 18px rgba(255,40,60,.25)}.steps p{color:#b5c1d2}
.dl{background:radial-gradient(ellipse at 10% 20%,rgba(255,40,55,.14),transparent 45%),radial-gradient(ellipse at 90% 80%,rgba(0,166,255,.14),transparent 45%),#101722;border-block:1px solid #27384c}
.facts{background:rgba(5,9,15,.65);border-color:#2c3e55;max-width:650px}.facts div{border-color:#29384c}.facts dt{color:#9faec3}.facts dd{color:#f4f7ff}
.status{background:rgba(5,9,15,.55);border-inline-start-color:var(--cyan);color:#aebbd0}
#support{background:radial-gradient(ellipse at 50% 0%,rgba(0,164,255,.12),transparent 55%),#0b1019}
#support .lead{color:#b9c6d8}
details{border-color:#26364a}summary{color:#f4f7ff}summary::after{color:var(--cyan)}details p{color:#b5c1d2}
footer{background:#07090e;border-color:#26364a;color:#9daec4}footer nav a{text-decoration:none}footer nav a:hover{color:var(--cyan)}
@media(min-width:760px){.hero{padding:66px 0 34px}.hero-wrap{grid-template-columns:.88fr 1.12fr;gap:38px}.hero-art-wrap{grid-column:2;grid-row:1}.hero-copy{grid-column:1;grid-row:1}.flist{grid-template-columns:repeat(2,minmax(0,1fr))}.flist li{min-height:150px}}
@media(min-width:1120px){.hero-wrap{grid-template-columns:.82fr 1.18fr}.hero-art{max-height:640px}}
@media(max-width:759px){.hero{padding-top:38px}.hero-copy{text-align:center}.hero .lead{margin-inline:auto}.hero-actions{justify-content:center}.hero-points{justify-content:center}.hero-art-wrap{margin-top:4px}.hero-art{border-radius:14px}.hero-bottom{margin-top:8px}.flist li{padding:18px}}
@media(prefers-reduced-motion:no-preference){.hero-art{animation:artFloat 7s ease-in-out infinite}@keyframes artFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}}
