:root{
    --navy-950:#071422;
    --navy-900:#0e1f33;
    --navy-850:#122943;
    --sunset:#e8734a;
    --sunset-dim:#c85f39;
    --signal:#2ec4c4;
    --sand:#d9b776;
    --paper:#f6f3ec;
    --muted:#9fb0c3;
    --line: rgba(159,176,195,0.16);
    --radius: 14px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--navy-950);
    color:var(--paper);
    font-family:'Tajawal', sans-serif;
    font-weight:400;
    line-height:1.7;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display{ font-family:'Cairo', sans-serif; }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
  ::selection{ background:var(--sunset); color:var(--navy-950); }

  /* ---------- NAV ---------- */
  .nav{
    position:sticky; top:0; z-index:50;
    background:rgba(7,20,34,0.86);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; max-width:1180px; margin:0 auto;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Cairo',sans-serif; font-weight:800; font-size:1.2rem;
  }
  .brand-mark{
    width:38px; height:38px; border-radius:10px;
    background:linear-gradient(135deg, var(--signal), var(--sunset));
    display:flex; align-items:center; justify-content:center;
  }
  .nav-actions{ display:flex; gap:10px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:999px;
    font-family:'Cairo',sans-serif; font-weight:700; font-size:0.92rem;
    border:1px solid transparent; cursor:pointer; white-space:nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-call{ background:transparent; border-color:var(--line); color:var(--paper); }
  .btn-call:hover{ border-color:var(--signal); }
  .btn-whatsapp{ background:#1fae6b; color:#fff; }
  .btn-whatsapp:hover{ box-shadow:0 8px 22px rgba(31,174,107,0.35); }
  .btn-primary{ background:var(--sunset); color:var(--navy-950); }
  .btn-primary:hover{ box-shadow:0 8px 24px rgba(232,115,74,0.4); }
  .btn-ghost{ background:transparent; border-color:var(--muted); color:var(--paper); }

  @media (max-width: 720px){
    .nav-actions .btn span.lbl{ display:none; }
    .nav-actions .btn{ padding:10px 14px; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:72px 0 90px;
    overflow:hidden;
    background:
      radial-gradient(ellipse at 85% -10%, rgba(46,196,196,0.16), transparent 55%),
      radial-gradient(ellipse at -10% 90%, rgba(232,115,74,0.14), transparent 50%),
      var(--navy-950);
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.1fr 0.9fr;
    gap:48px; align-items:center;
  }
  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; }
    .radar-stage{ order:-1; margin:0 auto 12px; }
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 16px; border-radius:999px;
    background:rgba(217,183,118,0.1); border:1px solid rgba(217,183,118,0.35);
    color:var(--sand); font-size:0.85rem; font-weight:700; margin-bottom:22px;
  }
  .hero h1{
    font-size:clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight:900; line-height:1.25; letter-spacing:-0.5px;
  }
  .hero h1 .accent{ color:var(--sunset); }
  .hero p.lead{
    margin-top:20px; color:var(--muted); font-size:1.08rem; max-width:520px;
  }
  .hero-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
  .btn-lg{ padding:15px 28px; font-size:1rem; }

  .signal-strip{
    display:flex; align-items:center; gap:22px; margin-top:44px;
    padding-top:26px; border-top:1px solid var(--line);
    flex-wrap:wrap;
  }
  .signal-item{ display:flex; align-items:center; gap:10px; }
  .bars{ display:flex; align-items:flex-end; gap:3px; height:20px; }
  .bars span{ width:4px; background:var(--signal); border-radius:2px; opacity:.35; }
  .bars span:nth-child(1){ height:6px; } .bars span:nth-child(2){ height:11px; }
  .bars span:nth-child(3){ height:15px; } .bars span:nth-child(4){ height:20px; opacity:1;}
  .signal-item b{ font-family:'Cairo',sans-serif; font-size:0.95rem; display:block; }
  .signal-item small{ color:var(--muted); font-size:0.8rem; }

  /* radar / dish signature element */
  .radar-stage{
    position:relative; width:340px; height:340px; margin-inline-start:auto;
    display:flex; align-items:center; justify-content:center;
  }
  @media (max-width:900px){ .radar-stage{ width:260px; height:260px; } }
  .ring{
    position:absolute; border-radius:50%;
    border:1px solid rgba(46,196,196,0.35);
  }
  .ring.r1{ width:100%; height:100%; animation: pulse 3.6s ease-out infinite; }
  .ring.r2{ width:100%; height:100%; animation: pulse 3.6s ease-out infinite 1.2s; }
  .ring.r3{ width:100%; height:100%; animation: pulse 3.6s ease-out infinite 2.4s; }
  @keyframes pulse{
    0%{ transform:scale(0.35); opacity:0.9; border-color:rgba(46,196,196,0.55); }
    100%{ transform:scale(1); opacity:0; border-color:rgba(46,196,196,0); }
  }
  .dish-core{
    position:relative; z-index:2; width:132px; height:132px; border-radius:50%;
    background:linear-gradient(160deg, var(--navy-850), var(--navy-900));
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  }
  .dish-core svg{ width:64px; height:64px; }

  /* ---------- DISH SHOWCASE ---------- */
  .showcase{
    padding:88px 0;
    background:
      radial-gradient(ellipse at 15% 20%, rgba(46,196,196,0.1), transparent 45%),
      var(--navy-900);
  }
  .showcase-grid{
    display:grid; grid-template-columns: 0.95fr 1.05fr; gap:56px; align-items:center;
  }
  @media (max-width:900px){ .showcase-grid{ grid-template-columns:1fr; } }
  .dish-illustration{
    position:relative; border-radius:20px; overflow:hidden;
    background: linear-gradient(160deg, var(--navy-850), var(--navy-950));
    border:1px solid var(--line);
    padding:30px;
    aspect-ratio: 4/3.2;
    display:flex; align-items:center; justify-content:center;
  }
  .dish-illustration svg{ width:100%; height:100%; }
  .showcase-copy h2{ font-size:clamp(1.6rem,2.8vw,2.1rem); font-weight:800; margin-bottom:16px; }
  .showcase-copy p{ color:var(--muted); margin-bottom:14px; }
  .showcase-points{ margin-top:20px; display:flex; flex-direction:column; gap:14px; }
  .showcase-point{ display:flex; align-items:flex-start; gap:12px; }
  .showcase-point .dot{
    width:24px; height:24px; border-radius:50%; flex-shrink:0; margin-top:2px;
    background:rgba(232,115,74,0.15); display:flex; align-items:center; justify-content:center;
  }
  .showcase-point .dot svg{ width:13px; height:13px; stroke:var(--sunset); }
  .showcase-point b{ font-family:'Cairo',sans-serif; display:block; margin-bottom:2px; }
  .showcase-point span{ color:var(--muted); font-size:0.9rem; }

  /* ---------- WHY US ---------- */
  .section{ padding:88px 0; }
  .section-head{ text-align:center; max-width:640px; margin:0 auto 52px; }
  .section-head .eyebrow{ margin-bottom:16px; }
  .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; }
  .section-head p{ color:var(--muted); margin-top:12px; }

  .cards-4{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  }
  @media (max-width:960px){ .cards-4{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .cards-4{ grid-template-columns:1fr; } }

  .card{
    background:var(--navy-900); border:1px solid var(--line);
    border-radius:var(--radius); padding:28px 24px;
    transition: border-color .2s ease, transform .2s ease;
  }
  .card:hover{ border-color: rgba(46,196,196,0.4); transform:translateY(-4px); }
  .icon-box{
    width:52px; height:52px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(46,196,196,0.12); margin-bottom:18px;
  }
  .icon-box svg{ width:26px; height:26px; stroke:var(--signal); }
  .card h3{ font-size:1.08rem; font-weight:700; margin-bottom:8px; }
  .card p{ color:var(--muted); font-size:0.92rem; }

  /* ---------- SERVICES ---------- */
  .services{ background:var(--navy-900); }
  .services-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  }
  @media (max-width:960px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .services-grid{ grid-template-columns:1fr; } }
  .service-card{
    background:var(--navy-950); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 22px; position:relative; overflow:hidden;
  }
  .service-card::before{
    content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
    background:linear-gradient(var(--sunset), var(--signal));
  }
  .service-card .icon-box{ background:rgba(232,115,74,0.12); }
  .service-card .icon-box svg{ stroke:var(--sunset); }
  .service-card h3{ font-weight:700; margin-bottom:6px; font-size:1.05rem; }
  .service-card p{ color:var(--muted); font-size:0.88rem; }

  /* ---------- FORM ---------- */
  .form-eyebrow{ text-align:center; }
  .form-shell{
    max-width:760px; margin:0 auto;
    background:var(--navy-900); border:1px solid var(--line);
    border-radius:20px; padding:40px;
  }
  @media (max-width:640px){ .form-shell{ padding:26px 20px; } }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
  @media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
  .field label{
    display:block; font-family:'Cairo',sans-serif; font-size:0.9rem; font-weight:700;
    margin-bottom:8px; color:var(--paper);
  }
  .field label .req{ color:var(--sunset); }
  .field input, .field select, .field textarea{
    width:100%; background:var(--navy-950); border:1px solid var(--line);
    border-radius:10px; padding:13px 14px; color:var(--paper);
    font-family:'Tajawal',sans-serif; font-size:0.95rem;
  }
  .field input::placeholder, .field textarea::placeholder{ color:#5c7086; }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--signal); box-shadow:0 0 0 3px rgba(46,196,196,0.15);
  }
  .field{ margin-bottom:18px; }
  textarea{ resize:vertical; min-height:110px; }
  .submit-btn{
    width:100%; justify-content:center; padding:16px; font-size:1.02rem;
    background:var(--sunset); color:var(--navy-950); border-radius:12px; margin-top:8px;
  }
  .submit-btn:hover{ box-shadow:0 10px 26px rgba(232,115,74,0.35); }
  .form-note{ text-align:center; color:var(--muted); font-size:0.85rem; margin-top:14px; }

  /* ---------- CONTACT CTA ---------- */
  .contact-cta{
    background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
    border-top:1px solid var(--line);
    padding:80px 0;
  }
  .contact-box{
    max-width:620px; margin:0 auto; text-align:center;
    background:var(--navy-850); border:1px solid var(--line);
    border-radius:20px; padding:48px 32px;
  }
  .contact-box .dish-mini{
    width:64px; height:64px; border-radius:50%; margin:0 auto 20px;
    background:rgba(46,196,196,0.12); display:flex; align-items:center; justify-content:center;
  }
  .contact-box .dish-mini svg{ width:30px; height:30px; stroke:var(--signal); }
  .contact-box h3{ font-size:1.4rem; font-weight:800; margin-bottom:24px; }
  .contact-links{ display:flex; flex-direction:column; gap:12px; }
  .contact-link{
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:15px; border-radius:12px; font-family:'Cairo',sans-serif; font-weight:700;
    font-size:1.05rem; direction:ltr;
  }
  .contact-link.wa{ background:#1fae6b; color:#fff; }
  .contact-link.call{ background:var(--navy-950); border:1px solid var(--line); color:var(--paper); }

  .qr-wrap{
    margin-top:28px; padding-top:28px; border-top:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; gap:12px;
  }
  .qr-box{
    background:#fff; padding:12px; border-radius:14px; line-height:0;
  }
  .qr-wrap small{ color:var(--muted); font-size:0.85rem; }

  /* ---------- FOOTER ---------- */
  footer{ padding:36px 0; border-top:1px solid var(--line); text-align:center; }
  footer .brand{ justify-content:center; margin-bottom:10px; }
  footer p{ color:var(--muted); font-size:0.85rem; }

  /* floating whatsapp */
  .float-wa{
    position:fixed; bottom:24px; inset-inline-start:24px; z-index:60;
    width:56px; height:56px; border-radius:50%;
    background:#1fae6b; display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px rgba(31,174,107,0.4);
  }
  .float-wa svg{ width:28px; height:28px; fill:#fff; }