@font-face{font-family:SG;src:url(/fonts/SpaceGrotesk-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:SG;src:url(/fonts/SpaceGrotesk-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:BC;src:url(/fonts/BarlowCondensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:NN;src:url(/fonts/NotoNaskhArabic-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --ink:#1C0F47;--deep:#2A1570;--deep2:#3A1E96;--deep3:#21105E;--glow:#5430C9;--violet:#6A3CF0;
  --lilac:#C8B8FF;--tint:#F3EFFD;--tint2:#EDE6FC;--line:#DED6F5;--hot:#FF5A45;--mute:#5B5180;--paper:#FBF9FF;
  /* type: body = 1. Small steps below it, one leap to the titles. */
  --body:clamp(17px,1.25vw,19px);--small:.84em;--title:clamp(36px,5vw,68px);--hero:clamp(40px,4.9vw,76px);
  --gut:clamp(18px,5.7vw,110px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--body)/1.45 Inter,system-ui,sans-serif}
h1,h2,h3,p{margin:0}
h1,h2{font-family:SG,Inter,sans-serif;font-weight:700;letter-spacing:-.022em;line-height:1.05}
h1{font-size:var(--hero);letter-spacing:-.03em;line-height:1.02}
h2{font-size:var(--title)}
h3{font:700 1.15em/1.2 SG,Inter,sans-serif;letter-spacing:-.01em}
a{color:inherit}
.wrap{max-width:1500px;margin:0 auto;padding:0 var(--gut)}
.kick{font:600 .92em/1.1 BC,Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:.9em}
.hl{display:inline-block;background:var(--hot);color:#fff;padding:0 .16em .04em;border-radius:.14em;transform:rotate(-1deg);white-space:nowrap}
.mute{color:var(--mute)}
.btn{display:inline-flex;align-items:center;gap:.5em;font:600 1em Inter,sans-serif;text-decoration:none;border:0;cursor:pointer;border-radius:999px;padding:.85em 1.4em;background:var(--hot);color:#fff}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
:focus-visible{outline:3px solid var(--lilac);outline-offset:3px}
section{padding:clamp(64px,9vw,140px) 0}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(1500px 1000px at 88% 0%,var(--glow) 0%,var(--deep2) 48%,var(--deep3) 100%);padding:26px 0 clamp(56px,7vw,110px)}
.arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arcs circle{fill:none;stroke:rgba(200,184,255,.2);stroke-width:2;vector-effect:non-scaling-stroke}
.light .arcs circle{stroke:rgba(106,60,240,.13)}
.top{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(40px,6vw,90px)}
.logo{font:700 28px SG;letter-spacing:-.03em;display:flex;align-items:baseline;gap:.4em}
.logo i{font-style:normal;color:var(--hot)}
.logo span{font:600 .8em NN;color:var(--lilac)}
.top .btn{padding:.6em 1.1em;font-size:.9em}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,72px);align-items:center}
.hero .kick{color:var(--lilac)}
.lede{font-size:1.18em;line-height:1.4;color:#E7E0FF;max-width:30em;margin-top:1.3em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8em}
.doors-line{margin-top:2em;font:600 .92em BC;letter-spacing:.14em;text-transform:uppercase;color:var(--lilac)}
.film{position:relative;border-radius:clamp(14px,1.6vw,26px);overflow:hidden;box-shadow:0 40px 90px rgba(10,4,40,.5);background:var(--deep3);aspect-ratio:16/9}
.film video{display:block;width:100%;height:100%;object-fit:cover}
.sound{position:absolute;right:14px;bottom:14px;font:600 .8em Inter;border:0;border-radius:999px;padding:.6em 1em;background:rgba(15,11,30,.78);color:#fff;cursor:pointer;display:flex;gap:.5em;align-items:center}
.sound svg{width:16px;height:16px}

/* four ways in */
.ways{position:relative;overflow:hidden;background:var(--tint)}
.ways-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:center;margin-top:clamp(28px,4vw,56px)}
.tabs{display:grid;gap:10px}
.tab{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;padding:18px 20px;border-radius:20px;border:1px solid transparent}
.tab .n{font:600 .92em BC;letter-spacing:.14em;color:var(--violet);padding-top:.25em}
.tab b{display:block;font:700 1.15em SG;letter-spacing:-.01em}
.tab small{display:block;font-size:var(--small);color:var(--mute);margin-top:2px}
.tab[aria-selected="true"]{background:#fff;border-color:var(--line);box-shadow:0 14px 40px rgba(42,21,112,.1)}
.tab:focus-visible{outline:3px solid var(--violet)}
.stage{position:relative;height:min(600px,120vw);display:grid;place-items:center}
.surface{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
.surface.on{opacity:1;transform:none;pointer-events:auto}
/* drawn devices */
.phone{width:290px;height:580px;border-radius:44px;background:#0F0B1E;padding:8px;box-shadow:0 26px 60px rgba(42,21,112,.28),inset 0 0 0 2px #3a3550}
.phone>div{height:100%;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.phone>div:before{content:"";position:absolute;left:50%;top:10px;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#0F0B1E;z-index:2}
.wa{background:#EFE9E1}
.wa header{background:#fff;padding:46px 14px 10px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #E3DED6;font:600 15px Inter;color:#111B21}
.wa header i{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font:700 16px SG;display:grid;place-items:center;font-style:normal}
.chat{flex:1;display:flex;flex-direction:column;gap:9px;padding:14px 10px;font:500 14px/1.32 Inter;color:#111B21}
.me,.it{max-width:88%;padding:9px 11px;border-radius:13px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.me{align-self:flex-end;background:#D9FDD3;border-top-right-radius:3px}
.it{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.src{border-left:3px solid var(--violet);padding-left:8px;margin-top:8px;font-size:12.5px;color:#3B4A54}
.src b{display:flex;justify-content:space-between;color:var(--ink)}
.src b span{font-weight:500;color:var(--mute)}
.yes{display:flex;gap:6px;margin-top:9px}
.yes span{flex:1;text-align:center;border-radius:999px;padding:6px;font:600 12.5px Inter;background:var(--tint2);color:var(--ink)}
.yes span:first-child{background:var(--ink);color:#fff}
.browser{width:min(100%,560px);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 26px 60px rgba(42,21,112,.22);border:1px solid var(--line)}
.bar{background:var(--tint2);padding:10px 12px;display:flex;gap:6px;align-items:center}
.bar i{width:10px;height:10px;border-radius:50%;background:var(--lilac)}
.bar span{flex:1;margin-left:8px;background:#fff;border-radius:8px;padding:5px 10px;font:500 13px Inter;color:var(--mute)}
.app{display:grid;grid-template-columns:64px 1fr;min-height:380px}
.app nav{background:var(--ink);padding:16px 12px;color:#fff;font:700 18px SG}
.app nav u{display:block;height:8px;border-radius:4px;background:#5a4a94;margin-top:14px}
.app nav u:first-of-type{background:var(--hot);margin-top:26px}
.app main{padding:20px;font-size:14px}
.app h4{margin:0;font:700 21px/1.15 SG;letter-spacing:-.01em}
.cap{font:600 12px BC;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:18px 0 4px}
.acct{display:flex;justify-content:space-between;align-items:center;font:600 14px Inter;padding:7px 0;border-top:1px solid var(--line)}
.acct span{background:var(--ink);color:#fff;border-radius:99px;padding:4px 11px;font-size:12.5px}
.ios{background:var(--ink);color:#fff;padding:44px 18px 18px}
.ios .cap{color:var(--lilac);margin:0 0 6px}
.ios h4{margin:0;font:700 27px/1.05 SG;letter-spacing:-.02em}
.ios svg{display:block;margin:14px auto 0;width:190px;height:190px}
.need{margin-top:auto;background:var(--hot);border-radius:18px;padding:12px 15px;font:600 15px Inter}
.need .cap{color:#fff;margin:0 0 2px}
.aichat{width:min(100%,520px);border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 26px 60px rgba(42,21,112,.22);padding:22px;font-size:15px}
.aichat .q{margin-left:auto;width:fit-content;background:var(--tint2);border-radius:14px;padding:10px 14px;font-weight:500}
.tool{display:inline-flex;gap:9px;align-items:center;margin:16px 0;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font:600 13.5px Inter;color:var(--mute)}
.tool i{width:20px;height:20px;border-radius:6px;background:var(--ink);color:#fff;font:700 13px SG;display:grid;place-items:center;font-style:normal}

/* what it does */
.asks{display:grid;gap:0;margin-top:clamp(28px,4vw,56px)}
.ask{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,4vw,72px);padding:clamp(22px,3vw,40px) 0;border-top:1px solid var(--line);align-items:baseline}
.ask:last-child{border-bottom:1px solid var(--line)}
.ask q{font:700 clamp(26px,3.2vw,46px)/1.08 SG;letter-spacing:-.022em;quotes:"\201C" "\201D"}
.ask p b{display:block;font:700 1.15em SG;margin-bottom:.25em}

/* boss */
.boss{position:relative;overflow:hidden;background:var(--tint)}
.boss-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,4vw,72px);align-items:end}
.rows{display:grid;gap:12px;margin-top:clamp(28px,4vw,56px);position:relative}
.row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 22px;transition:opacity .3s}
.row small{display:block;color:var(--mute);font-size:var(--small)}
.seg{display:grid;grid-template-columns:.7fr .8fr 1.3fr .9fr .8fr;gap:4px;background:var(--tint);border-radius:999px;padding:5px}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:.7em .2em;border-radius:999px;font:700 .92em SG;color:var(--mute);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg button[aria-pressed="true"][data-m="4"]{background:var(--hot)}
.seg button:focus-visible{outline:3px solid var(--violet)}
.paused .row{opacity:.45}
.pause{display:flex;align-items:center;gap:16px;margin-top:26px;font:700 1.15em SG}
.switch{all:unset;cursor:pointer;width:68px;height:38px;border-radius:19px;background:var(--line);position:relative;flex:none;transition:background .2s}
.switch:after{content:"";position:absolute;top:5px;left:5px;width:28px;height:28px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.switch[aria-checked="true"]{background:var(--ink)}
.switch[aria-checked="true"]:after{transform:translateX(30px)}
.switch:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.pause small{display:block;font:400 var(--small) Inter;color:var(--mute)}
.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(28px,4vw,48px);font-size:var(--small);color:var(--mute)}
.legend b{display:block;font:700 1.2em SG;color:var(--ink);margin-bottom:2px}

/* join */
.join{position:relative;overflow:hidden;color:#fff;background:radial-gradient(1500px 1000px at 12% 100%,var(--glow) 0%,var(--deep2) 48%,var(--deep3) 100%)}
.offers{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(28px,4vw,56px);align-items:start}
.offer{background:#fff;color:var(--ink);border-radius:26px;padding:clamp(20px,2.4vw,36px);box-shadow:0 40px 90px rgba(10,4,40,.45)}
.offer .kick{color:var(--violet);margin-bottom:.5em}
.offer.seat{background:var(--ink);color:#fff;box-shadow:0 40px 90px rgba(10,4,40,.45),inset 0 0 0 2px var(--hot)}
.offer.seat .kick{color:var(--hot)}
.price{font:700 var(--title)/1 SG;letter-spacing:-.03em;white-space:nowrap}
.price small{font:500 .3em Inter;letter-spacing:0;color:var(--mute)}
.seat .price small{color:var(--lilac)}
.what{font-size:1.12em;line-height:1.35;margin-top:.7em}
.offer ul{list-style:none;padding:0;margin:1em 0 1.4em;display:grid;gap:.45em;font-size:var(--small)}
.offer li{padding-left:1.4em;position:relative;color:var(--mute)}
.seat li{color:#D9D0F8}
.offer li:before{content:"";position:absolute;left:0;top:.5em;width:.6em;height:.6em;border-radius:50%;background:var(--violet)}
.seat li:before{background:var(--hot)}
.seat .ch-form input,.seat .ch-form select{background:#2A1A63!important;border-color:#4a3a8c!important;color:#fff}
.seat .fine,.seat .mute{color:var(--lilac)}
.seat a{color:#fff}
.investor{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,4vw,72px);align-items:start;margin-top:clamp(28px,4vw,56px);border-top:1px solid rgba(200,184,255,.3);padding-top:clamp(24px,3vw,40px)}
.investor .kick{color:var(--lilac)}
.investor h3{font-size:1.5em;margin-bottom:.4em}
.investor p{color:#E7E0FF}
.investor .ch-form{grid-template-columns:1fr 1fr}
.investor .ch-form button,.investor .ch-msg{grid-column:1/-1}
.investor .ch-form input,.investor .ch-form select{background:#2A1A63!important;border-color:#4a3a8c!important;color:#fff}
.investor .mute,.investor .ch-thanks{color:var(--lilac)}
.investor a{color:#fff}
.fine{font-size:.74em;color:var(--mute);margin-top:14px}
.ch-form{gap:12px!important}
.ch-field label{font-size:.84em!important;font-weight:600!important}
.ch-form input,.ch-form select{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid var(--line)!important;background:var(--paper)!important;color:var(--ink)}
.ch-form button{width:100%;font:600 1em Inter,sans-serif;padding:.9em 1.2em;border:0;border-radius:999px;background:var(--hot);color:#fff;cursor:pointer}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(18px,4vw,72px)}
details{border-top:1px solid var(--line);padding:18px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:700 1.15em SG;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--violet)}
details[open] summary:after{content:"\2212"}
details p{color:var(--mute);margin-top:10px;max-width:60ch}
footer{padding:36px 0 56px;color:var(--mute);font-size:var(--small)}

.rise{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .7s cubic-bezier(.16,1,.3,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}.surface{transition:none}html{scroll-behavior:auto}}

@media (max-width:900px){
  .hero-grid,.ways-grid,.boss-head,.offers,.investor,.faq,.ask{grid-template-columns:minmax(0,1fr)}
  .investor .ch-form{grid-template-columns:1fr}
  .film{order:2}
  .tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .tab{grid-template-columns:1fr;padding:10px 6px;text-align:center;border-radius:14px}
  .tab .n,.tab small{display:none}
  .tab b{font-size:.84em}
  .tabnote{display:block}
  .stage{height:600px}
  .row{grid-template-columns:minmax(0,1fr)}
  .legend{grid-template-columns:1fr 1fr}
  .top .btn{display:none}
}
@media (max-width:430px){.seg button{font-size:.74em}.browser,.aichat{transform:scale(.92)}}

/* ---- www.fekri.app: navigation, the four pages, Arabic ---- */
.top{gap:18px;flex-wrap:wrap}
.logo{color:#fff;text-decoration:none}
.nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);flex-wrap:wrap}
.nav a{color:rgba(255,255,255,.82);text-decoration:none;font:500 .92em Inter,sans-serif}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--hot)}
.nav .lang{font-weight:600;color:var(--lilac)}
.crumbs{position:relative;font-size:var(--small);color:var(--lilac);margin:-1.5em 0 1.4em}
.crumbs a{color:inherit}
.waylinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(28px,4vw,48px)}
.waylinks a{display:block;padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;font:700 1.05em SG,Inter,sans-serif}
.waylinks a small{display:block;font:400 var(--small) Inter,sans-serif;color:var(--mute);margin-top:4px}
.waylinks a:hover{border-color:var(--violet)}
.steps{list-style:none;padding:0;margin:clamp(24px,3vw,40px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{counter-increment:s;padding-top:14px;border-top:2px solid var(--violet)}
.steps li:before{content:"0" counter(s);display:block;font:600 1em BC,Inter,sans-serif;letter-spacing:.14em;color:var(--violet);margin-bottom:.4em}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band p{color:var(--mute);max-width:46ch;margin-top:.6em}
.cta-band .btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
footer .links{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap}
footer a{color:var(--mute)}
.solo{max-width:none}
.solo .stage{height:min(600px,130vw)}

html[lang="ar"] body{font-family:"IBM Plex Sans Arabic",Inter,system-ui,sans-serif;line-height:1.7}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .ask q,html[lang="ar"] .ask p b,html[lang="ar"] .legend b,
html[lang="ar"] .waylinks a,html[lang="ar"] .seg button{font-family:"IBM Plex Sans Arabic",SG,sans-serif;letter-spacing:0;line-height:1.3}
html[lang="ar"] .kick,html[lang="ar"] .steps li:before{font-family:"IBM Plex Sans Arabic",BC,sans-serif;letter-spacing:0;text-transform:none}
html[lang="ar"] .btn,html[lang="ar"] .nav a{font-family:"IBM Plex Sans Arabic",Inter,sans-serif}
[dir="rtl"] .sound{right:auto;left:14px}
[dir="rtl"] .src{border-left:0;padding-left:0;border-right:3px solid var(--violet);padding-right:8px}
[dir="rtl"] .me{border-top-right-radius:13px;border-top-left-radius:3px}
[dir="rtl"] .it{border-top-left-radius:13px;border-top-right-radius:3px}
[dir="rtl"] .bar span{margin-left:0;margin-right:8px}
[dir="rtl"] .aichat .q{margin-left:0;margin-right:auto}
[dir="rtl"] .offer li{padding-left:0;padding-right:1.4em}
[dir="rtl"] .offer li:before{left:auto;right:0}
[dir="rtl"] .switch:after{left:auto;right:5px}
[dir="rtl"] .switch[aria-checked="true"]:after{transform:translateX(-30px)}
[dir="rtl"] .ask q{quotes:"\00AB" "\00BB"}
@media (max-width:900px){.nav a:not(.lang){display:none}.waylinks,.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:520px){.waylinks,.steps{grid-template-columns:minmax(0,1fr)}}