:root{
    --navy-deep:#0A2A4D;
    --navy-mid:#123B6B;
    --blue:#1C7FC4;
    --blue-light:#4FB3E8;
    --orange:#F2822A;
    --orange-light:#FFA85C;
    --bg:#F5F8FC;
    --bg-alt:#EDF3FA;
    --ink:#0F1B2D;
    --muted:#5B6B80;
    --line:#DCE6F0;
    --white:#FFFFFF;
    --radius-s:10px;
    --radius-m:16px;
    --shadow-soft: 0 20px 45px -25px rgba(10,42,77,.35);
    --container:1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Tajawal', sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Almarai', sans-serif;
    margin:0;
    color:var(--navy-deep);
  }
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  ul{margin:0; padding:0; list-style:none;}
  img{max-width:100%; display:block;}
  button{font-family:inherit; cursor:pointer;}
  input,select{font-family:inherit;}

  ::selection{background:var(--orange-light); color:var(--navy-deep);}

  :focus-visible{
    outline:3px solid var(--orange);
    outline-offset:3px;
  }

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding:0 28px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  /* ---------- Header ---------- */
  header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(245,248,252,.88);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:78px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand img{width:42px; height:auto;}
  .brand-text{
    font-family:'Almarai', sans-serif;
    font-weight:800;
    font-size:1.32rem;
    color:var(--navy-deep);
    letter-spacing:.2px;
  }
  .brand-text span{color:var(--orange);}

  nav.main-nav{
    display:flex;
    align-items:center;
    gap:36px;
  }
  nav.main-nav a{
    font-size:1rem;
    font-weight:500;
    color:var(--navy-mid);
    position:relative;
    padding:6px 0;
  }
  nav.main-nav a::after{
    content:"";
    position:absolute;
    right:0; left:0; bottom:0;
    height:2px;
    background:var(--orange);
    transform:scaleX(0);
    transition:transform .25s ease;
    transform-origin:right;
  }
  nav.main-nav a:hover::after{transform:scaleX(1);}

  .header-actions{display:flex; align-items:center; gap:18px;}

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 28px;
    border-radius:999px;
    font-weight:700;
    font-size:.98rem;
    border:none;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn-primary{
    background:linear-gradient(95deg, var(--orange) 0%, var(--orange-light) 100%);
    color:#fff;
    box-shadow:0 14px 30px -12px rgba(242,130,42,.55);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(242,130,42,.65);}
  .btn-outline{
    background:transparent;
    border:1.5px solid var(--navy-mid);
    color:var(--navy-mid);
  }
  .btn-outline:hover{background:var(--navy-mid); color:#fff;}
  .btn-block{width:100%;}
  .btn-lg{padding:16px 30px; font-size:1.05rem;}

  .burger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    padding:6px;
  }
  .burger span{width:26px; height:2.5px; background:var(--navy-deep); border-radius:2px;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    padding:86px 0 70px;
    background:
      radial-gradient(1100px 550px at 85% -10%, rgba(28,127,196,.10), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(242,130,42,.08), transparent 60%);
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:60px;
    align-items:center;
  }
  .hero-copy h1{
    font-size:clamp(2.1rem, 3.4vw, 3.05rem);
    line-height:1.32;
    font-weight:800;
  }
  .hero-copy p.lead{
    margin-top:22px;
    font-size:1.14rem;
    color:var(--muted);
    max-width:52ch;
  }
  .hero-cta{
    display:flex;
    gap:16px;
    margin-top:34px;
    flex-wrap:wrap;
  }
  .hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .hero-visual .ring{
    position:absolute;
    inset:0;
    margin:auto;
    width:88%;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, rgba(79,179,232,.25), rgba(10,42,77,.02) 65%);
  }
  .hero-visual img{
    position:relative;
    width:min(78%, 380px);
    filter:drop-shadow(0 30px 45px rgba(10,42,77,.28));
  }
  .hero-visual svg.orbit{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  .stat-strip{
    margin-top:64px;
    padding-top:34px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
  }
  .stat-strip .stat{
    text-align:center;
    padding:0 12px;
    border-left:1px solid var(--line);
  }
  .stat-strip .stat:last-child{border-left:none;}
  .stat-strip .num{
    font-family:'Almarai', sans-serif;
    font-weight:800;
    font-size:1.9rem;
    color:var(--navy-deep);
  }
  .stat-strip .num span{color:var(--orange);}
  .stat-strip .label{
    margin-top:6px;
    font-size:.92rem;
    color:var(--muted);
  }

  /* ---------- Section shared ---------- */
  .section-head{
    max-width:640px;
    margin-bottom:56px;
  }
  .section-head h2{
    font-size:clamp(1.7rem, 2.6vw, 2.35rem);
    font-weight:800;
    line-height:1.4;
  }
  .section-head p{
    margin-top:16px;
    color:var(--muted);
    font-size:1.05rem;
  }
  .section-head.center{
    margin-left:auto; margin-right:auto;
    text-align:center;
  }

  /* ---------- Services ---------- */
  #services{padding:100px 0 40px;}

  .service-row{
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:64px;
    align-items:center;
    padding:64px 0;
    border-top:1px solid var(--line);
  }
  .service-row:first-of-type{border-top:none;}
  .service-row.reverse{grid-template-columns:1.08fr .92fr;}
  .service-row.reverse .service-visual{order:2;}
  .service-row.reverse .service-copy{order:1;}

  .service-visual{
    position:relative;
    background:linear-gradient(160deg, var(--navy-deep), var(--navy-mid) 70%);
    border-radius:28px;
    padding:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:300px;
    box-shadow:var(--shadow-soft);
  }
  .service-visual svg{width:100%; max-width:230px; height:auto;}

  .service-visual img{border-radius:5%;}

  .service-copy .tag{
    display:inline-block;
    font-size:.86rem;
    font-weight:700;
    color:var(--blue);
    background:rgba(28,127,196,.09);
    padding:6px 16px;
    border-radius:999px;
    margin-bottom:18px;
  }
  .service-copy h3{
    font-size:1.7rem;
    font-weight:800;
    line-height:1.4;
  }
  .service-copy > p{
    margin-top:14px;
    color:var(--muted);
    font-size:1.03rem;
  }
  .feature-list{
    margin-top:26px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .feature-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:.99rem;
    color:var(--ink);
  }
  .feature-list li svg{
    flex:none;
    width:22px; height:22px;
    margin-top:2px;
  }
  .service-copy .btn{margin-top:32px;}

  /* ---------- Why us ---------- */
  #why{
    padding:90px 0;
    background:var(--bg-alt);
  }
  .why-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;
  }
  .why-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:32px 26px;
  }
  .why-card .icn{
    width:50px; height:50px;
    border-radius:14px;
    background:linear-gradient(135deg, var(--blue), var(--navy-mid));
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
  }
  .why-card .icn svg{width:26px; height:26px;}
  .why-card .icn i{color: white;font-size: 20px;}
  .why-card h4{font-size:1.08rem; font-weight:700;}
  .why-card p{margin-top:10px; color:var(--muted); font-size:.94rem;}

  /* ---------- Payment ---------- */
  #payment{
    padding:100px 0 110px;
    background:linear-gradient(180deg, var(--navy-deep), #071B33 100%);
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  #payment::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(700px 400px at 90% 0%, rgba(28,127,196,.35), transparent 60%),
      radial-gradient(600px 400px at 0% 100%, rgba(242,130,42,.18), transparent 60%);
    pointer-events:none;
  }
  #payment .section-head h2, #payment .section-head p{color:#fff;}
  #payment .section-head p{color:rgba(255,255,255,.72);}

  .pay-grid{
    position:relative;
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:36px;
    align-items:start;
  }

  .pay-card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius-m);
    padding:34px;
    backdrop-filter:blur(6px);
  }
  .pay-card h3{
    color:#fff;
    font-size:1.2rem;
    margin-bottom:22px;
  }

  .field{margin-bottom:20px;}
  .field label{
    display:block;
    font-size:.92rem;
    font-weight:500;
    margin-bottom:8px;
    color:rgba(255,255,255,.85);
  }
  .pay-card select, .pay-card input{
    width:100%;
    padding:13px 16px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:.98rem;
  }
  .pay-card select option{color:#111;}
  .pay-card select:focus, .pay-card input:focus{
    border-color:var(--blue-light);
    background:rgba(255,255,255,.11);
  }
  .pay-card input::placeholder{color:rgba(255,255,255,.4);}

  .pkg-options{display:flex; flex-direction:column; gap:12px;}
  .pkg-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1.5px solid rgba(255,255,255,.16);
    border-radius:12px;
    padding:14px 18px;
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease;
  }
  .pkg-option:hover{border-color:rgba(255,255,255,.35);}
  .pkg-option.active{
    border-color:var(--orange);
    background:rgba(242,130,42,.12);
  }
  .pkg-option .pkg-name{font-weight:700; font-size:.98rem;}
  .pkg-option .pkg-desc{font-size:.82rem; color:rgba(255,255,255,.6); margin-top:3px;}
  .pkg-option .pkg-price{font-family:'Almarai',sans-serif; font-weight:800; font-size:1.05rem; color:var(--orange-light); white-space:nowrap;}
  .pkg-option input[type=radio]{width:auto; accent-color:var(--orange);}

  .total-row{
    margin-top:24px;
    padding-top:20px;
    border-top:1px dashed rgba(255,255,255,.2);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .total-row .lbl{color:rgba(255,255,255,.75); font-size:.95rem;}
  .total-row .amount{font-family:'Almarai',sans-serif; font-weight:800; font-size:1.5rem;}
  .total-row .amount span{font-size:.95rem; color:rgba(255,255,255,.6); font-weight:500;}

  .checkout-card{
    background:#fff;
    color:var(--ink);
    border-radius:var(--radius-m);
    padding:38px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
  }
  .checkout-card h3{font-size:1.2rem; margin-bottom:6px;}
  .checkout-card .sub{color:var(--muted); font-size:.92rem; margin-bottom:26px;}
  .checkout-card label{
    display:block; font-size:.88rem; font-weight:600; color:var(--navy-mid); margin-bottom:7px;
  }
  .checkout-card input{
    width:100%;
    padding:13px 15px;
    border-radius:10px;
    border:1.5px solid var(--line);
    background:#fbfdff;
    font-size:.98rem;
    color:var(--ink);
    transition:border-color .15s ease;
  }
  .checkout-card input:focus{border-color:var(--blue);}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .row3{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:16px;}

  .card-number-wrap{position:relative;}
  .card-brand{
    position:absolute;
    top:50%; left:14px; transform:translateY(-50%);
    display:flex; gap:4px; align-items:center;
    opacity:.85;
  }
  .card-brand svg{height:20px; width:auto;}

  .lock-note{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
    color:var(--muted);
    margin-top:22px;
  }
  .lock-note svg{width:16px; height:16px; flex:none;}

  .stripe-note{
    margin-top:14px;
    font-size:.8rem;
    color:var(--muted);
    text-align:center;
  }

  #pay-success{
    display:none;
    text-align:center;
    padding:20px 6px 4px;
  }
  #pay-success .check{
    width:62px; height:62px;
    border-radius:50%;
    background:#E8F7EE;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px;
  }
  #pay-success .check svg{width:30px; height:30px;}
  #pay-success h3{color:var(--ink);}
  #pay-success p{color:var(--muted); margin-top:8px; font-size:.95rem;}

  .field-error{
    color:#E0533D;
    font-size:.8rem;
    margin-top:6px;
    display:none;
  }

  /* ---------- Footer ---------- */
  footer{
    background:#071B33;
    color:rgba(255,255,255,.72);
    padding:70px 0 0;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    gap:40px;
    padding-bottom:50px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .footer-brand .brand-text{color:#fff;}
  .footer-brand p{margin-top:16px; font-size:.92rem; line-height:1.9; max-width:34ch; color:rgba(255,255,255,.6);}
  footer h5{
    color:#fff; font-family:'Almarai',sans-serif; font-size:1rem; margin-bottom:20px;
  }
  footer .flinks{display:flex; flex-direction:column; gap:12px;}
  footer .flinks a{font-size:.92rem; color:rgba(255,255,255,.65); transition:color .15s ease;}
  footer .flinks a:hover{color:#fff;}
  .social-row{display:flex; gap:12px; margin-top:20px;}
  .social-row a{
    width:40px; height:40px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center;
    transition:background .18s ease, transform .18s ease;
  }
  .social-row a:hover{background:var(--orange); transform:translateY(-3px);}
  .social-row svg{width:18px; height:18px;}

  .bottom-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px 0;
    font-size:.86rem;
    color:rgba(255,255,255,.5);
    flex-wrap:wrap;
    gap:10px;
  }
  .bottom-bar .legal-links{display:flex; gap:22px;}

  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    nav.main-nav{display:none;}
    .burger{display:flex;}
    .hero .wrap{grid-template-columns:1fr; text-align:center;}
    .hero-copy p.lead{margin-inline:auto;}
    .hero-cta{justify-content:center;}
    .stat-strip{grid-template-columns:repeat(2,1fr); row-gap:28px;}
    .stat-strip .stat:nth-child(2){border-left:none;}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .service-row, .service-row.reverse{grid-template-columns:1fr; text-align:center;}
    .service-row.reverse .service-visual, .service-row.reverse .service-copy{order:initial;}
    .feature-list li{text-align:right;}
    .pay-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    .why-grid{grid-template-columns:1fr;}
    .row2, .row3{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .bottom-bar{flex-direction:column; text-align:center;}
    .checkout-card, .pay-card{padding:24px;}
  }

  /* Mobile nav drawer */
  .mobile-drawer{
    position:fixed; inset:0;
    background:var(--navy-deep);
    z-index:200;
    display:flex; flex-direction:column;
    padding:28px;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  .mobile-drawer.open{transform:translateX(0);}
  .mobile-drawer .close-drawer{
    align-self:flex-start;
    background:none; border:none; color:#fff; font-size:1.6rem; margin-bottom:30px;
  }
  .mobile-drawer a{
    color:#fff; font-size:1.2rem; font-weight:700; padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }