/* HI website v6. Dark-first premium, mint accent from the logo. */
:root{
  --bg:#05080A; --bg2:#0A1114; --surface:#0E161A; --surface2:#142026; --ink:#F2F6F4; --muted:#93A4A0; --line:rgba(255,255,255,.09);
  --mint:#62E3A8; --mint-ink:#03140D; --mint-soft:rgba(98,227,168,.12); --glow:rgba(98,227,168,.22);
  --warn:#F2B705; --rose:#F09A8C; --rose-soft:rgba(240,154,140,.12);
  --nav:rgba(5,8,10,.72); --shadow:0 30px 80px -30px rgba(0,0,0,.8);
  /* compatibility names used by shared sections */
  --plate:var(--mint); --plate-ink:var(--mint-ink); --teal:var(--mint); --teal-soft:var(--mint-soft);
  --dark:var(--surface); --dark-ink:var(--ink); --dark-muted:var(--muted); --dark-line:var(--surface2); --amber-soft:rgba(242,183,5,.12);
  --font:"IBM Plex Sans Arabic","Noto Sans Arabic",-apple-system,"Segoe UI",Tahoma,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F5F8F7; --bg2:#EAF1EE; --surface:#FFFFFF; --surface2:#EDF3F1; --ink:#0B1A16; --muted:#54655F; --line:rgba(11,26,22,.11);
  --mint:#0B8F63; --mint-ink:#FFFFFF; --mint-soft:rgba(11,143,99,.10); --glow:rgba(11,143,99,.16);
  --warn:#9A6B00; --rose:#B04A3B; --rose-soft:rgba(176,74,59,.10); --nav:rgba(245,248,247,.78); --shadow:0 30px 80px -30px rgba(11,26,22,.28); color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F5F8F7; --bg2:#EAF1EE; --surface:#FFFFFF; --surface2:#EDF3F1; --ink:#0B1A16; --muted:#54655F; --line:rgba(11,26,22,.11);
  --mint:#0B8F63; --mint-ink:#FFFFFF; --mint-soft:rgba(11,143,99,.10); --glow:rgba(11,143,99,.16);
  --warn:#9A6B00; --rose:#B04A3B; --rose-soft:rgba(176,74,59,.10); --nav:rgba(245,248,247,.78); --shadow:0 30px 80px -30px rgba(11,26,22,.28); color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.8;direction:rtl;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:20px;position:relative}
.narrow{max-width:780px;margin-inline:auto}
section{padding-block:104px;position:relative}
h1,h2,h3{margin:0;font-weight:700;line-height:1.28;text-wrap:balance}
h1{font-size:clamp(40px,8vw,88px);font-weight:800}
h2{font-size:clamp(30px,5vw,54px)}
h3{font-size:21px;font-weight:600}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:10px}
.center{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--mint);margin-bottom:16px;padding:5px 14px;border-radius:999px;background:var(--mint-soft);border:1px solid color-mix(in srgb,var(--mint) 25%,transparent)}
.lead{font-size:clamp(18px,2.2vw,22px);color:var(--muted);line-height:1.85;max-width:34em}
.center .lead{margin-inline:auto}
.grad{background:linear-gradient(100deg,var(--mint) 10%,#B8F7DB 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .grad,:root:not([data-theme="dark"]) .grad{--g2:var(--mint)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .grad{background:linear-gradient(100deg,#0B8F63,#13b57c);-webkit-background-clip:text;background-clip:text}}
:root[data-theme="light"] .grad{background:linear-gradient(100deg,#0B8F63,#13b57c);-webkit-background-clip:text;background-clip:text}
.mono{font-family:var(--mono);letter-spacing:.28em;direction:ltr}

/* ambient background */
.glow{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.glow::before{content:"";position:absolute;width:900px;height:900px;left:50%;top:-340px;translate:-50% 0;background:radial-gradient(closest-side,var(--glow),transparent 70%)}
.grid-bg{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;mask-image:radial-gradient(ellipse 60% 55% at 50% 30%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 30%,#000,transparent 75%);opacity:.55}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--nav);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:700;font-size:19px}
.logo svg{width:40px;height:40px;flex:none}
.logo .nm{display:flex;flex-direction:column;line-height:1.2}
.logo .nm small{font-size:12px;color:var(--muted);font-weight:400}
.links{display:flex;gap:2px;font-size:15px;color:var(--muted)}
.links a{text-decoration:none;padding:7px 13px;border-radius:999px;white-space:nowrap}
.links a:hover{color:var(--ink);background:var(--mint-soft)}
.links a[aria-current="page"]{color:var(--mint);font-weight:600;background:var(--mint-soft)}
.nav-end{display:flex;align-items:center;gap:10px}
details.menu{display:none;position:relative}
details.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-size:22px;border:1px solid var(--line)}
details.menu summary::-webkit-details-marker{display:none}
details.menu nav{position:absolute;inset-inline-start:0;top:52px;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:8px;display:grid;box-shadow:var(--shadow)}
details.menu nav a{padding:12px 14px;border-radius:12px;text-decoration:none;font-size:17px}
details.menu nav a[aria-current="page"]{background:var(--mint-soft);color:var(--mint);font-weight:600}
@media (max-width:1100px){.links{display:none}details.menu{display:block}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:999px;font-family:inherit;font-weight:600;font-size:17px;text-decoration:none;background:var(--mint);color:var(--mint-ink);border:0;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 36px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 44px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.sm{min-height:38px;padding:0 18px;font-size:14.5px}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.line:hover{box-shadow:inset 0 0 0 1.5px var(--mint);transform:none;color:var(--mint)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--mint);transform:none}
.btn.copy{background:var(--ink);color:var(--bg);box-shadow:none}
.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:36px}

/* hero */
.hero{padding-block:72px 40px;text-align:center;overflow:hidden}
.hero .wrap{z-index:1}
.hero-logo{width:min(220px,52vw);margin:0 auto 18px;filter:drop-shadow(0 20px 60px var(--glow))}
.hero-logo svg{width:100%;height:auto;overflow:visible}
.spin{transform-origin:100px 100px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero h1{margin-top:6px}
.hero .lead{margin:22px auto 0}
.fan{margin-top:68px;display:flex;justify-content:center;align-items:flex-end;gap:0;direction:ltr;perspective:1400px}
.fan .tile{width:min(26vw,270px);margin-inline:-2.2%;transition:transform .4s}
.fan .tile:nth-child(1){transform:rotate(-7deg) translateY(36px)}
.fan .tile:nth-child(2){transform:scale(1.1);z-index:2}
.fan .tile:nth-child(3){transform:rotate(7deg) translateY(36px)}
.fan .tile:hover{transform:translateY(-10px) scale(1.12);z-index:3}
.tile{display:block;border-radius:clamp(14px,2.4vw,30px);overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:var(--shadow);cursor:zoom-in;padding:0}
.tile img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:28px;overflow:hidden;margin-top:12px}
.stat{background:var(--surface);padding:30px 22px;text-align:center}
.stat b{display:block;font-size:clamp(32px,4.4vw,52px);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:16px}

/* statement */
.statement{text-align:center}
.statement h2{font-size:clamp(34px,6.4vw,76px);font-weight:800}
.statement .lead{margin:26px auto 0}

/* video */
.video{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;border-radius:clamp(18px,3vw,36px);overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at 30% 20%,var(--glow),transparent 60%),linear-gradient(135deg,var(--surface2),var(--bg2));box-shadow:var(--shadow),0 0 120px -30px var(--glow);background-size:cover;background-position:center;padding:0;cursor:pointer;text-decoration:none;color:var(--ink);font:inherit}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.video .play{position:relative;z-index:1;width:92px;height:92px;border-radius:50%;background:var(--mint);color:var(--mint-ink);display:grid;place-items:center;box-shadow:0 0 0 14px color-mix(in srgb,var(--mint) 22%,transparent),0 20px 60px -10px var(--glow);transition:transform .25s}
.video:hover .play{transform:scale(1.08)}
.video .play svg{width:34px;height:34px;margin-inline-start:-4px}
.video .cap{position:absolute;z-index:1;inset-inline:0;bottom:0;padding:22px 28px;text-align:start;font-weight:600;color:#fff;font-size:18px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-block:44px}
.frow:nth-child(even) .ftext{order:2}
.frow .ftext p{color:var(--muted);margin-top:14px;font-size:19px}
.frow .tile{width:min(100%,300px);margin-inline:auto}
.ico{width:52px;height:52px;border-radius:16px;background:var(--mint-soft);color:var(--mint);display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--mint) 25%,transparent);margin-bottom:18px}
.ico svg{width:26px;height:26px}

/* shared cards */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:56px;text-align:start}
.card{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 5%,transparent),transparent),var(--surface);border:1px solid var(--line);border-radius:28px;padding:34px;min-width:0;display:flex;flex-direction:column;gap:10px;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--mint) 35%,transparent)}
.card p{color:var(--muted);font-size:18px}
.card.big{grid-column:span 4}.card.mid{grid-column:span 3}.card.sm{grid-column:span 2}
.card.dark{background:var(--bg2)}
.card.yellow{background:linear-gradient(160deg,var(--mint),#9CF3CB);color:var(--mint-ink);border-color:transparent}
.card.yellow p{color:color-mix(in srgb,var(--mint-ink) 78%,transparent)}
.card h3{font-size:clamp(21px,2.4vw,27px)}
.mark{font-size:clamp(44px,6vw,64px);font-weight:800;line-height:1;color:var(--mint)}
.card.yellow .mark{color:var(--mint-ink)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;text-align:start}
.step{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:32px;min-width:0}
.step .mark{margin-bottom:14px;font-size:44px}
.step p{color:var(--muted);margin-top:8px;font-size:18px}

.band{background:linear-gradient(180deg,var(--bg2),var(--bg));border-block:1px solid var(--line)}
.band h2{font-size:clamp(32px,5.6vw,64px);font-weight:800}
.band h2 em{font-style:normal;color:var(--mint)}
.band .eyebrow{color:var(--mint)}
.band .lead{color:var(--muted)}
.titles{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px}
.title-chip{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 22px 10px 12px;font-weight:600;font-size:17px}
.title-chip i{width:30px;height:30px;border-radius:50%;background:var(--mint);display:grid;place-items:center;font-style:normal;font-size:15px;color:var(--mint-ink)}
.fine{font-size:14px;color:var(--muted);margin-top:14px}

.impact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.quote{font-size:clamp(26px,4vw,42px);font-weight:700;line-height:1.5}
.quote span{color:var(--mint)}

.letter{background:var(--surface);border:1px solid var(--line);border-radius:36px;padding:clamp(28px,6vw,64px);margin-top:48px;position:relative;overflow:hidden}
.letter::before{content:"";position:absolute;width:420px;height:420px;top:-200px;inset-inline-end:-120px;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.letter p{font-size:20px;line-height:1.95;margin-bottom:22px;position:relative}
.letter p.strong{font-weight:700;font-size:23px;line-height:1.7}
.sign{display:flex;align-items:center;gap:14px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line);position:relative}
.avatar{width:54px;height:54px;border-radius:50%;background:var(--mint);color:var(--mint-ink);display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}
.sign b{display:block;font-size:19px}
.sign small{color:var(--muted);font-size:15px}

.guide{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px;text-align:start}
.plate{background:linear-gradient(160deg,var(--mint),#9CF3CB);color:var(--mint-ink);border-radius:32px;padding:38px;min-width:0;box-shadow:0 30px 90px -40px var(--glow)}
.plate h3{font-size:30px}
.plate ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;font-size:18px}
.slots{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;margin-top:22px;direction:ltr}
.slots i{aspect-ratio:1;border-radius:3px;background:var(--mint-ink);opacity:.9}
.slotnote{font-size:15px;margin-top:10px;font-weight:600}
.stack{display:grid;gap:16px;min-width:0}
.ol{margin:14px 0 0;padding-inline-start:24px;display:grid;gap:8px;color:var(--muted);font-size:18px}
.ol li::marker{font-weight:700;color:var(--mint)}
.ol strong{color:var(--ink)}

.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;text-align:start}
.reg{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:30px;min-width:0}
.reg p{color:var(--muted);margin-top:6px;font-size:17px}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-inline-end:10px;box-shadow:0 0 14px currentColor}

.faq{margin-top:40px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:8px 32px;text-align:start}
details{border-bottom:1px solid var(--line);padding-block:22px}
details:last-child{border-bottom:0}
summary{cursor:pointer;font-weight:600;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:28px;line-height:1;color:var(--mint);font-weight:300}
details[open] summary::after{content:"−"}
details p{color:var(--muted);margin-top:10px;font-size:18px}
details.menu summary::after{content:none}

.cta{text-align:center;overflow:hidden}
.cta .hero-logo{width:120px}
.contact{max-width:560px;margin:44px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:26px;text-align:center}
.contact small{color:var(--muted);font-size:15px}
.contact .ph{display:block;margin-top:6px;font-weight:700;font-size:18px}

.badge{background:var(--mint);color:var(--mint-ink);border-radius:999px;padding:0 10px;font-size:12px;font-weight:700}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;direction:ltr}
.gallery .item{display:flex;flex-direction:column;gap:12px;direction:rtl}
.gallery .tile{width:100%}
.gallery .item p{color:var(--muted);font-size:16px;text-align:center}
.strip{display:flex;gap:18px;overflow-x:auto;padding:8px 4px 26px;margin-top:44px;scroll-snap-type:x mandatory;direction:ltr}
.strip .tile{flex:0 0 min(62vw,250px);scroll-snap-align:center}
.lb{position:fixed;inset:0;z-index:100;background:rgba(2,4,5,.92);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px;direction:ltr}
.lb.on{display:flex}
.lb img{max-height:88vh;max-width:min(92vw,520px);width:auto;border-radius:24px;border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.7)}
.lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;width:48px;height:48px;border-radius:50%;font-size:22px;cursor:pointer}
.lb .x{top:20px;inset-inline-end:20px}.lb .pv{left:20px;top:50%}.lb .nx{right:20px;top:50%}
.lb button:hover{background:var(--mint);color:var(--mint-ink)}

/* page head */
.pagehead{padding-block:92px 8px;text-align:center;overflow:hidden}
.pagehead h1{font-size:clamp(36px,7vw,68px)}
.pagehead .lead{margin:18px auto 0}
.pagehead+section{padding-top:56px}
.goals{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px;text-align:start}
.goal{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:34px;min-width:0}
.goal .mark{font-size:44px;margin-bottom:10px}
.goal p{color:var(--muted);margin-top:8px;font-size:18px}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px;text-align:start}
.value{border-top:3px solid var(--mint);padding-top:14px;min-width:0}
.value p{color:var(--muted);margin-top:6px;font-size:17px}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.cbox{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:32px;min-width:0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cbox p{color:var(--muted);font-size:18px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:28px;padding:34px;margin-top:16px}
.mail .addr{font-size:clamp(17px,4.6vw,30px);font-weight:700;direction:ltr;user-select:all;overflow-wrap:anywhere}
.mail .grow{flex:1;min-width:240px}
.mail p{color:var(--muted);font-size:17px}
.copied{font-size:15px;color:var(--mint)}

/* footer */
.foot{padding-block:64px 28px;border-top:1px solid var(--line);background:var(--bg2)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot h4{margin:0 0 12px;font-size:15px;color:var(--muted);font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:16px}
.foot a{text-decoration:none}.foot a:hover{color:var(--mint)}
.foot .brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:21px}
.foot .brand svg{width:46px;height:46px}
.foot .about{color:var(--muted);font-size:16px;margin-top:14px;max-width:26em}
.foot .copy-line{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.page[hidden]{display:none}

@media (max-width:900px){
  body{font-size:17px}
  section{padding-block:68px}
  .bento,.steps,.guide,.regions,.impact,.goals,.cgrid,.values,.foot-grid{grid-template-columns:1fr}
  .card.big,.card.mid,.card.sm{grid-column:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:1fr;gap:28px}
  .frow:nth-child(even) .ftext{order:0}
  .impact{gap:28px}
  .gallery{grid-template-columns:repeat(2,1fr);gap:14px}
  .faq{padding-inline:20px}
  .hero{padding-block:48px 24px}
  .fan{margin-top:48px}
  .fan .tile{width:30vw}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.spin{animation:none}.btn,.btn:hover,.card:hover,.fan .tile:hover{transition:none;transform:none}}

.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.vgrid figure{margin:0;display:flex;flex-direction:column;gap:12px}.vgrid figcaption{font-weight:600;text-align:center;color:var(--muted)}.vgrid .video .play{width:68px;height:68px;box-shadow:0 0 0 10px color-mix(in srgb,var(--mint) 22%,transparent),0 20px 60px -10px var(--glow)}.vgrid .video .cap{font-size:15px;padding:16px 18px}@media (max-width:820px){.vgrid{grid-template-columns:1fr}}

:root{--gold:#F5C463;--gold-ink:#2A1C03}
.btn.gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 10px 36px -8px rgba(245,196,99,.5),inset 0 1px 0 rgba(255,255,255,.4)}
/* journey */
.jr{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,5vw,72px);align-items:center}
.jr-steps{display:flex;flex-direction:column;gap:10px;order:1}
.jr-stage{order:2;display:flex;flex-direction:column;align-items:center;gap:16px}
.jstep{display:flex;gap:16px;align-items:flex-start;text-align:start;font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:22px;padding:16px 18px;cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.jstep:hover{border-color:color-mix(in srgb,var(--mint) 40%,transparent)}
.jstep .jn{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--surface2);color:var(--muted);font-family:'IBM Plex Sans',sans-serif}
.jstep .jt{display:flex;flex-direction:column;gap:4px;min-width:0}
.jstep b{font-size:19px}
.jstep small{display:none;color:var(--muted);font-size:16px;line-height:1.7}
.jstep.on{background:var(--surface);border-color:color-mix(in srgb,var(--mint) 45%,transparent);box-shadow:0 0 60px -26px var(--glow)}
.jstep.on .jn{background:var(--mint);color:var(--mint-ink)}
.jstep.on small{display:block}
.jrole{align-self:flex-start;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--mint-soft);color:var(--mint);border:1px solid color-mix(in srgb,var(--mint) 30%,transparent)}
.jrole.g{background:rgba(245,196,99,.12);color:var(--gold);border-color:rgba(245,196,99,.35)}
.jrole.b{background:var(--surface2);color:var(--ink);border-color:var(--line)}
.phone{position:relative;width:300px;aspect-ratio:9/16.4;border-radius:44px;background:#070C0F;border:1px solid #26333a;padding:10px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 120px -40px var(--glow)}
.phone .notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:99px;background:#000;z-index:3}
.screen{position:relative;height:100%;border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#0B1317,#081014);color:#EAF2EF;direction:rtl;font-size:13px}
.sc{position:absolute;inset:0;padding:48px 14px 14px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;pointer-events:none}
.sc.on{opacity:1;transform:none}
.ph-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.chipx{font-size:11px;padding:3px 9px;border-radius:99px;background:rgba(98,227,168,.14);color:#62E3A8;white-space:nowrap}
.chipx.gold{background:rgba(245,196,99,.14);color:#F5C463}
.a{opacity:0}
.sc.on .a{animation:slide .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes slide{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.field{min-height:92px;border:1.5px solid #62E3A8;border-radius:16px;padding:12px;font-size:15px;background:#0E181D;line-height:1.7}
.typed{display:inline-block;vertical-align:bottom;overflow:hidden;white-space:nowrap;max-width:0}
.sc.on .typed{animation:type 2s steps(22) .6s both}
@keyframes type{to{max-width:16em}}
.caret{display:inline-block;width:2px;height:1.1em;background:#62E3A8;vertical-align:text-bottom;margin-inline-start:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hint{font-size:12px;color:#8FA19B;text-align:center;line-height:1.7}
.sendbtn{margin-top:auto;text-align:center;padding:12px;border-radius:99px;background:#62E3A8;color:#03140D;font-weight:700;font-size:14px}
.sc.on .pulse{animation:slide .55s both var(--d,0s),glow 1.6s ease-in-out calc(var(--d,0s) + .6s) infinite}
@keyframes glow{50%{box-shadow:0 0 0 8px rgba(98,227,168,.18)}}
.notif,.ans{display:flex;gap:10px;align-items:flex-start;background:#0F1A1F;border:1px solid #1d2b31;border-radius:16px;padding:10px 12px;position:relative}
.notif b{display:block;font-size:12.5px}.notif p,.ans p{margin:2px 0 0;font-size:12.5px;line-height:1.65;color:#C9D6D1}
.notif time{margin-inline-start:auto;font-size:10.5px;color:#7F918B;white-space:nowrap}
.ans small{display:block;margin-top:4px;font-size:10.5px;color:#7F918B}
.av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#1d3b31;color:#62E3A8;font-weight:700;font-size:13px}
.av.b{background:#3a3220;color:#F5C463}.av.c{background:#22324a;color:#8DB8FF}.av.big{width:54px;height:54px;font-size:22px}
.ans.top{border-color:#62E3A8;background:#0E211C;padding-top:18px}
.badge{position:absolute;top:-9px;inset-inline-start:12px;background:#62E3A8;color:#03140D;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:99px}
.banner{display:flex;gap:10px;align-items:center;background:#16251F;border:1px solid #2a4a3c;border-radius:16px;padding:10px 12px}
.banner b{display:block;font-size:13px}.banner small{font-size:11px;color:#9FB3AC}
.bi{width:28px;height:28px;border-radius:50%;background:#62E3A8;color:#03140D;display:grid;place-items:center;font-weight:800}
.mapmini{border-radius:16px;overflow:hidden;border:1px solid #1d2b31;background:#0f1a1f}
.mapmini svg{display:block;width:100%}
.dash{stroke-dashoffset:0}.sc.on .dash{animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-60}}
.rate{background:#0F1A1F;border:1px solid #1d2b31;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.rate p{margin:0;font-size:12.5px;color:#C9D6D1}
.stars{display:flex;gap:6px}
.stars i{width:24px;height:24px;background:#2a363c;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}
.sc.on .stars i{animation:star .4s both;animation-delay:var(--s)}
@keyframes star{to{background:#F5C463;transform:scale(1.12)}}
.mapbig{border-radius:16px;overflow:hidden;border:1px solid #1d2b31;flex:1;min-height:0}
.mapbig svg{display:block;width:100%;height:100%}
.sc.on .drop{animation:pin 1s cubic-bezier(.3,1.6,.5,1) .5s both;transform-origin:130px 140px}
@keyframes pin{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
.sc.on .rip{animation:rip 1.8s ease-out 1.3s infinite;transform-origin:130px 130px}
@keyframes rip{from{transform:scale(1);opacity:.9}to{transform:scale(5);opacity:0}}
.sheet{display:flex;flex-direction:column;gap:8px}
.sheet .sendbtn{margin:0}
.added{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12px;color:#62E3A8;background:rgba(98,227,168,.1);border-radius:12px;padding:8px}
.tick{width:18px;height:18px;border-radius:50%;background:#62E3A8;color:#03140D;display:grid;place-items:center;font-size:11px;font-weight:800}
.prof{display:flex;gap:12px;align-items:center;background:#0F1A1F;border:1px solid #1d2b31;border-radius:18px;padding:12px}
.prof b{display:block;font-size:15px;margin-bottom:6px}
.badge2{font-size:11px;padding:3px 10px;border-radius:99px;background:rgba(245,196,99,.15);color:#F5C463;font-weight:700}
.meter{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12px;color:#C9D6D1}
.meter i{grid-column:1/-1;height:8px;border-radius:99px;background:#1d2b31;overflow:hidden;display:block;order:3}
.meter u{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#62E3A8,#9CF3CB);text-decoration:none}
.sc.on .meter u{animation:grow 1s ease-out both;animation-delay:var(--d)}
@keyframes grow{to{width:var(--w)}}
.meter em{font-style:normal;font-weight:700;color:#62E3A8}
.jr-ctrl{display:flex;align-items:center;gap:12px;width:100%;max-width:300px}
.jplay{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:11px}
.jbar{flex:1;height:4px;border-radius:99px;background:var(--surface2);overflow:hidden}
.jbar u{display:block;height:100%;width:0;background:var(--mint);text-decoration:none}
.jbar u.run{animation:jb var(--dur,6s) linear forwards}
.jr.paused .jbar u.run{animation-play-state:paused}
@keyframes jb{to{width:100%}}
.jnote{font-size:12.5px;color:var(--muted);margin:0;text-align:center}
/* roles */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;text-align:start}
.role{background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px}
.role.g{border-color:rgba(245,196,99,.3)}
.rhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.role ol{margin:0;padding:0;list-style:none;counter-reset:r;display:flex;flex-direction:column;gap:12px}
.role li{counter-increment:r;display:flex;gap:12px;align-items:center;font-size:18px}
.role li::before{content:counter(r);flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--mint-soft);color:var(--mint);font-weight:700;font-size:14px}
.role.g li::before{background:rgba(245,196,99,.14);color:var(--gold)}
.role .btn{margin-top:auto;align-self:flex-start}
/* questions */
.qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:48px;text-align:start}
.qcard{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px 22px;transition:transform .25s,border-color .25s}
.qcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--mint) 40%,transparent)}
.qi{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--mint-soft);color:var(--mint)}
.qi svg{width:24px;height:24px}
.qb{min-width:0}
.qtag{font-size:12.5px;font-weight:700;color:var(--mint)}
.qcard h3{font-size:19px;margin:2px 0 6px;line-height:1.5}
.qcard p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.7}
/* full-stage (video page) */
body.vid{overflow:hidden}
.jr-full{grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:900px){
 .jr{grid-template-columns:1fr}
 .jr-stage{order:1}.jr-steps{order:2}
 .roles,.qgrid{grid-template-columns:1fr}
}
@media (max-width:420px){.phone{width:272px}}
@media (prefers-reduced-motion:reduce){.sc,.a{transition:none}.sc.on .a,.sc.on .typed,.sc.on .stars i,.sc.on .meter u,.sc.on .drop{animation-duration:.01s!important}.caret,.sc.on .dash,.sc.on .rip{animation:none}}