:root{
  --bg:#F1F1F6;--panel:#fff;--ink:#0F0B1A;--soft:#55516A;--line:#DCDAE6;
  --violet:#5536EE;--lilac:#CDBFFF;--mist:#E7E1FF;--night:#130E22;--on-night:#B9B4CC;
  --mint:#BFEBD8;--sun:#FFD36B;--paper:#FFFDF7;
  --disp:"Readex Pro","Sora",sans-serif;--body:"IBM Plex Sans Arabic","Inter",sans-serif;
  --out:cubic-bezier(.16,1,.3,1);--gut:clamp(16px,4vw,48px);
  --tooth:radial-gradient(circle at 8px 0,transparent 6px,var(--paper) 6.5px)
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--body);overflow-x:clip;padding-bottom:76px}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.2;text-wrap:balance}
h2{font-size:clamp(30px,5vw,52px);letter-spacing:-.01em}
.wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:var(--gut)}
.num{font-variant-numeric:tabular-nums}
[dir=rtl] .ltr{direction:ltr;unicode-bidi:isolate}

.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:16px;height:62px}
.brand{display:flex;align-items:center;gap:9px;font:700 18px var(--disp);text-decoration:none}
.brand img{width:28px;height:28px;border-radius:8px}
.bar nav{display:none;gap:22px;margin-inline-start:auto;font-size:15px}
.bar nav a{text-decoration:none;color:var(--soft)}
.bar nav a:hover{color:var(--ink)}
.lang{margin-inline-start:auto;font-size:14px;color:var(--soft);text-decoration:none;padding:8px 4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 22px;border-radius:14px;border:1.5px solid transparent;font:600 16px var(--disp);text-decoration:none;cursor:pointer;transition:translate .25s var(--out),background .2s,box-shadow .25s}
.btn svg{width:21px;height:21px;flex:none}
.btn.main{background:var(--violet);color:#fff;box-shadow:0 12px 26px -14px rgba(85,54,238,.9)}
.btn.main:hover{translate:0 -2px;background:#4527DC}
.btn.alt{background:var(--panel);color:var(--ink);border-color:var(--ink)}
.btn.alt:hover{translate:0 -2px;background:var(--mist)}

.hero{padding-block:clamp(32px,6vw,72px) 0;overflow:hidden}
.hero .wrap{display:grid;gap:34px}
.hero h1{font-size:clamp(44px,9.4vw,92px);line-height:1.06;letter-spacing:-.015em}
.hero .lead{margin-top:18px;max-width:34em;font-size:clamp(18px,2.2vw,21px);color:var(--soft)}
.cta{display:grid;gap:10px;margin-top:26px}
.fine{margin-top:12px;font-size:14px;color:var(--soft)}

.stage{position:relative;height:clamp(470px,104vw,600px);display:flex;justify-content:center}
.phone{position:relative;z-index:2;width:clamp(232px,60vw,288px);align-self:flex-start;background:#0D0A16;padding:9px;border-radius:38px;box-shadow:0 34px 60px -28px rgba(19,14,34,.65)}
.phone img{width:100%;aspect-ratio:760/1388;object-fit:cover;object-position:top;border-radius:30px}
.ticket{position:absolute;z-index:3;inset-inline-end:max(8px,calc(50% - 250px));top:88px;width:clamp(176px,46vw,226px);background:var(--paper);padding:15px 15px 22px;font-size:13px;line-height:1.45;box-shadow:0 22px 36px -18px rgba(19,14,34,.5);rotate:-2.5deg;transform-origin:top;animation:print 1.5s var(--out) .25s both}
[dir=ltr] .ticket{rotate:2.5deg}
.ticket::after{content:"";position:absolute;inset-inline:0;bottom:-7px;height:8px;background:var(--tooth) repeat-x;background-size:16px 8px}
.ticket b{display:block;text-align:center;font:700 15px var(--disp);padding-bottom:7px;border-bottom:1px dashed #BDB9CA}
.ticket ul{list-style:none;padding:0;margin:7px 0}
.ticket li{display:flex;justify-content:space-between;gap:8px;padding:2.5px 0}
.ticket li span:last-child{color:#2F7D5B;font-weight:600}
.ticket p{padding-top:7px;border-top:1px dashed #BDB9CA;font-weight:600;text-align:center}
@keyframes print{from{clip-path:inset(0 0 100% 0);translate:0 -16px}to{clip-path:inset(0 0 -12px 0);translate:0 0}}

.trades{padding-block:clamp(56px,9vw,104px)}
.trades p.note{margin-top:10px;max-width:40em;color:var(--soft)}
.tabs{display:flex;gap:8px;margin-top:24px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-block:4px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;min-height:46px;padding:9px 16px;border:1.5px solid var(--line);background:var(--panel);border-radius:999px;font:500 15px var(--body);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.tabs button:hover{border-color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.mods{display:flex;flex-wrap:wrap;gap:0;margin-top:22px;border-top:1.5px solid var(--ink)}
.mods span{flex:1 1 46%;padding:13px 0;border-bottom:1px solid var(--line);font:500 clamp(17px,2.4vw,21px) var(--disp);display:flex;gap:10px;align-items:center}
.mods span::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--line);flex:none}
.mods span.on::before{background:var(--violet)}
.mods span:not(.on){color:#8C889E}

.day{background:var(--night);color:#fff;padding-block:clamp(60px,9vw,112px)}
.day .lead{color:var(--on-night);margin-top:10px;max-width:38em}
.scenes{display:grid;gap:44px;margin-top:40px}
.scene{display:grid;gap:18px}
.scene h3{font-size:clamp(23px,3.2vw,31px)}
.scene p{color:var(--on-night);margin-top:6px;max-width:32em}
.shot{width:min(100%,312px);border-radius:24px;overflow:hidden;border:7px solid #2A2439;background:#fff}
.shot img{width:100%;aspect-ratio:9/13.2;object-fit:cover;object-position:top}

.phones{padding-block:clamp(60px,9vw,108px)}
.phones .grid{display:grid;gap:30px}
.phones .lead{color:var(--soft);margin-top:10px}
.spec{list-style:none;padding:0;border-top:1.5px solid var(--ink)}
.spec li{display:grid;gap:2px;padding:15px 0;border-bottom:1px solid var(--line)}
.spec b{font:600 19px var(--disp)}
.spec span{color:var(--soft);font-size:16px}

.both{background:var(--mist);padding-block:clamp(56px,8vw,96px)}
.both .grid{display:grid;gap:30px;margin-top:28px}
.both h3{font-size:24px}
.both p{color:#3F3A55;margin-top:4px}
.both .dl{margin-top:14px;width:100%}
.both ol{margin-top:12px;padding-inline-start:20px;color:#3F3A55;font-size:16px}
.both li+li{margin-top:5px}

.price{padding-block:clamp(60px,9vw,108px)}
.price .lead{color:var(--soft);margin-top:10px}
.bills{display:grid;gap:28px;margin-top:32px;align-items:start}
.bill{position:relative;background:var(--paper);padding:24px 22px 28px;box-shadow:0 20px 34px -22px rgba(19,14,34,.45)}
.bill::after{content:"";position:absolute;inset-inline:0;bottom:-7px;height:8px;background:var(--tooth) repeat-x;background-size:16px 8px}
.bill h3{font-size:21px}
.bill .amt{font:700 clamp(42px,6vw,56px)/1.1 var(--disp);margin-top:10px}
.bill .amt small{font:500 17px var(--body);color:var(--soft)}
.bill ul{list-style:none;padding:12px 0 0;margin-top:12px;border-top:1px dashed #BDB9CA;font-size:16px;color:var(--soft)}
.bill li{padding:3px 0}
.bill.life{background:var(--ink);color:#fff}
.bill.life::after{background:radial-gradient(circle at 8px 0,transparent 6px,var(--ink) 6.5px) repeat-x;background-size:16px 8px}
.bill.life .amt small,.bill.life ul{color:var(--on-night)}
.bill.life ul{border-top-color:#4A4460}
.pay-note{margin-top:30px;font-size:15px;color:var(--soft);max-width:44em}

.faq{padding-block:0 clamp(60px,9vw,108px)}
.faq details{border-bottom:1px solid var(--line)}
.faq h2{margin-bottom:20px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:17px 0;font:600 18px var(--disp)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:none;border-inline-end:2px solid var(--ink);border-block-end:2px solid var(--ink);rotate:45deg;transition:rotate .25s var(--out)}
.faq details[open] summary::after{rotate:225deg}
.faq details p{padding-bottom:18px;color:var(--soft);max-width:44em}

.last{background:var(--violet);color:#fff;padding-block:clamp(56px,8vw,96px);text-align:center}
.last h2{max-width:13em;margin-inline:auto}
.last .btn{margin-top:24px;background:#fff;color:var(--ink);min-width:240px}
footer{background:var(--night);color:var(--on-night);padding-block:26px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{color:#fff}

.dock{position:fixed;z-index:30;inset-inline:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line)}
.dock .btn{width:100%}

@media(min-width:720px){
  body{padding-bottom:0}
  .dock{display:none}
  .cta{grid-auto-flow:column;justify-content:start}
  .scene{grid-template-columns:minmax(0,312px) 1fr;gap:44px;align-items:center}
  .scene:nth-child(even) .shot{order:2}
  .phones .grid,.both .grid,.bills{grid-template-columns:1fr 1fr;gap:48px}
}
@media(min-width:960px){
  .bar nav{display:flex}
  .lang{margin-inline-start:0}
  .hero .wrap{grid-template-columns:1.08fr .92fr;align-items:start}
  .hero .copy{padding-top:28px}
  .stage{height:600px}
  .ticket{inset-inline-end:auto;inset-inline-start:calc(50% + 68px)}
  .mods span{flex:1 1 30%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticket{animation:none}
  .btn,.faq summary::after{transition:none}
}