/* Creative Lines — static site styles (self-contained, no build step) */
:root{
  --blue:#127de9; --violet:#5534b8; --indigo:#3b53c9;
  --ink:#0f172a; --ink-2:#1e293b; --muted:#64748b; --muted-2:#94a3b8;
  --line:#e2e8f0; --line-2:#cbd5e1; --bg:#ffffff; --bg-2:#f8fafc; --night:#020617;
  --grad:linear-gradient(135deg,var(--blue),var(--violet));
  --shadow:0 1px 2px rgba(15,23,42,.06);
  --shadow-lg:0 18px 45px -12px rgba(15,23,42,.18);
  --r:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[dir=rtl] body{font-family:"Noto Sans Arabic","Segoe UI",Tahoma,-apple-system,sans-serif}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.12}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── header ─────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.hdr.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -14px rgba(15,23,42,.25)}
.hdr-in{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand svg{height:28px;width:auto}
.nav{display:none;gap:26px;margin-inline-start:auto}
.nav a{font-size:14px;font-weight:600;color:var(--muted);transition:color .2s;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.hdr-act{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.nav + .hdr-act{margin-inline-start:0}
.lang{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--ink-2);
  cursor:pointer;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.lang:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:650;
  font-size:14px;padding:12px 22px;transition:transform .2s,box-shadow .25s,background .2s;cursor:pointer;
  border:0;font-family:inherit;white-space:nowrap}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 12px 28px -10px rgba(85,52,184,.55)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(85,52,184,.6)}
.btn-ghost{border:1px solid var(--line-2);background:rgba(255,255,255,.7);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--muted-2);color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--ink);box-shadow:var(--shadow-lg)}
.btn-white:hover{transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:13px}
.arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
[dir=rtl] .arrow{transform:rotate(180deg)}
[dir=rtl] .btn:hover .arrow{transform:rotate(180deg) translateX(3px)}
@media(min-width:900px){.nav{display:flex}}

/* ── hero ───────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:76px 0 92px}
.hero-mesh,.hero-grid{position:absolute;inset:0;pointer-events:none}
.hero-mesh{background-image:
  radial-gradient(circle at 15% 15%,rgba(18,125,233,.20) 0,transparent 42%),
  radial-gradient(circle at 85% 8%,rgba(85,52,184,.22) 0,transparent 45%),
  radial-gradient(circle at 60% 80%,rgba(18,125,233,.12) 0,transparent 40%);
  animation:breathe 9s ease-in-out infinite}
.hero-grid{opacity:.35;background-image:
  linear-gradient(to right,rgba(15,23,42,.045) 1px,transparent 1px),
  linear-gradient(to bottom,rgba(15,23,42,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 40%,transparent 75%);
  mask-image:radial-gradient(ellipse at 50% 0%,#000 40%,transparent 75%)}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:.9}}
.hero .wrap{position:relative}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-radius:999px;
  padding:7px 15px;font-size:12.5px;font-weight:650;color:var(--ink-2);box-shadow:var(--shadow)}
.hero h1{margin-top:24px;font-size:clamp(2.7rem,7.2vw,4.6rem);font-weight:850;max-width:16ch}
.hero h1 span{display:block}
.hero-sub{margin-top:26px;max-width:60ch;color:var(--muted);font-size:clamp(1rem,1.6vw,1.13rem)}
.hero-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}

/* ── sections ───────────────────────────────────────── */
section{scroll-margin-top:80px}
.sec{padding:88px 0}
.sec-alt{background:var(--bg-2)}
.sec-line{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.kicker{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin:0}
.h2{margin-top:12px;font-size:clamp(1.9rem,4.2vw,3rem);font-weight:850}
.lead{margin-top:16px;max-width:62ch;color:var(--muted);font-size:1rem}
.grid{display:grid;gap:22px;margin-top:46px}
@media(min-width:700px){.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:700px) and (max-width:999px){.g4{grid-template-columns:repeat(2,1fr)}}

/* ── cards ──────────────────────────────────────────── */
.card{position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;
  border-radius:var(--r);padding:28px;box-shadow:var(--shadow);
  transition:transform .28s,box-shadow .28s,border-color .28s}
.card:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.card-feat{border-color:transparent;background:var(--grad);color:#fff;
  box-shadow:0 18px 40px -14px rgba(85,52,184,.5)}
.ico{display:inline-flex;padding:12px;border-radius:16px;
  background:linear-gradient(135deg,rgba(18,125,233,.1),rgba(85,52,184,.1));color:var(--indigo)}
.card-feat .ico{background:rgba(255,255,255,.16);color:#fff}
.ico svg{width:22px;height:22px;stroke-width:1.8}
.card h3{margin-top:20px;font-size:17px;font-weight:750}
.card p{margin-top:9px;font-size:14px;color:var(--muted)}
.card-feat p{color:rgba(255,255,255,.86)}
.tags{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.tag{border-radius:999px;padding:5px 11px;font-size:11px;font-weight:600;background:var(--bg-2);color:var(--muted)}
.card-feat .tag{background:rgba(255,255,255,.16);color:rgba(255,255,255,.92)}
.card-link{margin-top:22px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:750;color:var(--indigo)}
.card-feat .card-link{color:#fff}
.card-why{background:linear-gradient(to bottom,#fff,var(--bg-2))}
.ico-dark{display:inline-flex;padding:12px;border-radius:16px;background:var(--ink);color:#fff}

/* ── steps ──────────────────────────────────────────── */
.steps{display:grid;gap:38px;margin-top:52px}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.step-top{display:flex;align-items:center;gap:12px}
.step-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:16px;background:var(--grad);color:#fff;box-shadow:0 8px 18px -8px rgba(85,52,184,.6)}
.step-n{font-size:30px;font-weight:900;color:#eef2f7}
.step h3{margin-top:16px;font-size:16px;font-weight:750}
.step p{margin-top:7px;font-size:14px;color:var(--muted)}

/* ── dark spotlight ─────────────────────────────────── */
.spot{position:relative;overflow:hidden;border-radius:32px;background:var(--night);color:#fff;
  padding:62px 34px;box-shadow:0 30px 70px -25px rgba(2,6,23,.7)}
@media(min-width:700px){.spot{padding:66px 56px}}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 20%,rgba(18,125,233,.42) 0,transparent 45%),
    radial-gradient(circle at 88% 75%,rgba(85,52,184,.45) 0,transparent 48%);
  animation:breathe 8s ease-in-out infinite}
.spot>*{position:relative}
.spot .pill{background:rgba(255,255,255,.1);border-color:transparent;color:#fff}
.spot h2{margin-top:20px;font-size:clamp(1.9rem,4.4vw,3rem);font-weight:850;max-width:20ch}
.spot p{margin-top:20px;max-width:58ch;color:rgba(255,255,255,.8);font-size:15px}
.spot-cta{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}

/* store badges */
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.22);
  border-radius:14px;padding:9px 16px;background:rgba(255,255,255,.06);color:#fff;font-size:12px}
.badge svg{width:19px;height:19px;flex-shrink:0}
.badge b{display:block;font-size:13px;font-weight:700;line-height:1.2}
.badge span{opacity:.7;font-size:10.5px}
.badge-light{border-color:var(--line);background:#fff;color:var(--ink)}

/* ── contact / footer ───────────────────────────────── */
.contact{border:1px solid var(--line);background:#fff;border-radius:var(--r);
  padding:44px 28px;text-align:center;box-shadow:var(--shadow)}
.contact h2{margin-top:12px;font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:850}
.contact p{margin:12px auto 0;max-width:52ch;color:var(--muted);font-size:14.5px}
.contact-row{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ftr{margin-top:88px;background:var(--night);color:#fff;padding:56px 0 28px}
.ftr-top{display:grid;gap:34px}
@media(min-width:800px){.ftr-top{grid-template-columns:1.4fr 1fr 1fr}}
.ftr svg{height:26px;width:auto}
.ftr-logo{filter:brightness(0) invert(1)}
.ftr-tag{margin-top:16px;font-size:13.5px;color:#94a3b8;max-width:38ch}
.ftr h4{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#64748b}
.ftr-links{display:flex;flex-direction:column;gap:10px}
.ftr-links a{font-size:14px;color:#cbd5e1;transition:color .2s}
.ftr-links a:hover{color:#fff}
.ftr-btm{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12.5px;color:#64748b}

/* ── app page ───────────────────────────────────────── */
.app-hero{position:relative;overflow:hidden;padding:66px 0 78px;text-align:center}
.app-icon{width:96px;height:96px;border-radius:24px;margin:0 auto;display:flex;align-items:center;
  justify-content:center;background:var(--grad);color:#fff;font-size:38px;font-weight:800;
  box-shadow:0 22px 45px -14px rgba(85,52,184,.6);letter-spacing:-.03em}
.app-hero h1{margin-top:26px;font-size:clamp(3rem,9vw,4.6rem);font-weight:850}
.app-tag{margin-top:10px;font-size:clamp(1.05rem,2.4vw,1.4rem);font-weight:650;color:var(--ink-2)}
.app-intro{margin:22px auto 0;max-width:60ch;color:var(--muted)}
.app-badges{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.notice{margin-top:26px;border:1px solid #fde68a;background:#fffbeb;border-radius:20px;padding:24px}
.notice h3{font-size:15px;font-weight:800;color:#92400e}
.notice p{margin-top:8px;font-size:14px;color:#a16207}
.soon{border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(to bottom,#fff,var(--bg-2));
  padding:44px 28px;text-align:center;box-shadow:var(--shadow)}

/* ── legal pages ────────────────────────────────────── */
.doc{max-width:760px;margin:0 auto;padding:52px 20px 20px}
.doc h1{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:850}
.doc h2{margin-top:30px;font-size:18px;font-weight:750;color:var(--indigo)}
.doc h3{margin-top:20px;font-size:15px;font-weight:700}
.doc p{margin-top:10px;color:var(--ink-2);font-size:15px}
.doc .meta{margin-top:8px;color:var(--muted);font-size:13.5px}
.doc-sep{height:1px;background:var(--line);margin:38px 0}

/* ── reveal animation ───────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-mesh,.spot::before{animation:none}
  html{scroll-behavior:auto}
}