:root{
    --bg:#0f1115;           /* dark base */
    --panel:#151924;        /* cards */
    --text:#e9edf4;         /* main text */
    --muted:#a9b3c7;        /* secondary */
    --brand:#489FD1;        /* your blue */
    --brand-2:#71d1ff;
    --accent:#6ce5e8;
    --ok:#4ade80;
    --warn:#f59e0b;
    --danger:#fb7185;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body.site{
    font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
  }
  
  /* NAV */
  .nav{
    max-width:1100px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px;
  }
  .brand{font-weight:800;font-size:22px;color:#fff;text-decoration:none;letter-spacing:0.2px}
  .nav-actions{display:flex;gap:10px;align-items:center}
  .nav-link{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:12px}
  .nav-link:hover{color:#fff}
  .nav-cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b1220;text-decoration:none;padding:10px 14px;border-radius:14px;font-weight:700}
  
  /* HERO */
  .hero{position:relative;isolation:isolate}
  .hero-inner{
    max-width:1100px;margin:0 auto;display:grid;gap:30px;
    grid-template-columns:1.1fr 0.9fr;align-items:center;padding:40px 20px 60px;
  }
  .hero-copy h1{font-size:38px;line-height:1.2;margin:0 0 8px}
  .lead{color:var(--muted);font-size:18px;margin:0 0 22px}
  .accent{color:var(--brand-2)}
  .sub{color:var(--muted);font-size:12px;margin-top:8px}
  
  .store-buttons{display:flex;gap:12px;flex-wrap:wrap}
  .btn.store{
    display:inline-flex;gap:8px;align-items:center;
    padding:12px 16px;border-radius:14px;font-weight:700;text-decoration:none;
    background:#ffffff; color:#0b1220;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
  .btn.store svg{width:20px;height:20px;fill:currentColor}

  
  .hero-art .phone-mock{
    width:100%;max-width:380px;margin-inline:auto;background:var(--panel);
    padding:18px;border-radius:28px;box-shadow:0 25px 60px rgba(0,0,0,.45);
  }
  .hero-art img{width:100%;display:block;border-radius:18px}
  
  /* Fancy BG */
  .bg-gradient{
    position:absolute;inset:-20% -10% auto -10%;
    height:60vh;z-index:-2;
    background:radial-gradient(1200px 600px at 20% 10%, rgba(72,159,209,.25), transparent 60%),
               radial-gradient(900px 600px at 80% -10%, rgba(108,229,232,.18), transparent 60%);
    filter:saturate(120%);
  }
  .bg-orb{position:absolute;z-index:-1;filter:blur(40px);opacity:.55}
  .orb1{width:260px;height:260px;right:10%;top:12%;background:radial-gradient(circle at 30% 30%,var(--brand),transparent 60%)}
  .orb2{width:220px;height:220px;left:12%;top:30%;background:radial-gradient(circle at 30% 30%,var(--accent),transparent 60%)}
  
  /* Sections */
  .section{max-width:1100px;margin:0 auto;padding:60px 20px}
  .section-head{text-align:center;margin-bottom:26px}
  .section h2{font-size:28px;margin:0 0 6px}
  .section p{color:var(--muted);margin:0}
  
  /* Features grid */
  .grid{
    display:grid;gap:16px;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .card{
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
    border:1px solid rgba(122,132,158,.16);
    border-radius:16px;padding:18px;
    backdrop-filter:blur(8px);
  }
  .card h3{margin:0 0 8px;font-size:18px}
  .card p{margin:0;color:var(--muted)}
  
  /* Screens */
  .screens .swiper{width:100%;max-width:760px;margin:0 auto}
  .screens img{width:100%;border-radius:16px}
  
  /* FAQ */
  .faq .faq-list{max-width:820px;margin:0 auto}
  details{
    background:var(--panel);border-radius:14px;padding:14px 16px;margin-bottom:10px;
    border:1px solid rgba(122,132,158,.14)
  }
  summary{cursor:pointer;font-weight:700}
  details p{color:var(--muted);margin:8px 0 0}
  
  /* Footer */
  .footer{
    border-top:1px solid rgba(122,132,158,.14);margin-top:60px; padding:20px 0;
    background:rgba(255,255,255,.02)
  }
  .footer .wrap{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap}
  .footer .logo{font-weight:800}
  .foot-nav{display:flex;gap:14px}
  .foot-nav a{color:var(--muted);text-decoration:none}
  .copy{color:var(--muted)}
  
  /* Legal pages */
  main.legal{max-width:900px;margin:0 auto;padding:40px 20px}
  main.legal h1{margin-top:0}
  
  /* Responsive */
  @media (max-width:980px){
    .hero-inner{grid-template-columns:1fr}
    .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:560px){
    .grid{grid-template-columns:1fr}
    .hero-copy h1{font-size:28px}
  }