:root{
    --bg:#070a12;
    --panel:#0d1220;
    --panel-2:#111827;
    --line:#212a3d;
    --ink:#f3f5fa;
    --ink-dim:#8d96af;
    --ink-faint:#525c76;

    --c-web:#5b8cff;
    --c-web-soft:rgba(91,140,255,.14);
    --c-net:#23d6a8;
    --c-net-soft:rgba(35,214,168,.14);
    --c-sec:#ff5c72;
    --c-sec-soft:rgba(255,92,114,.14);

    --font-display:'Sora', Arial, sans-serif;
    --font-body:'Inter', Arial, sans-serif;
    --font-mono:'JetBrains Mono', 'Courier New', monospace;
  }
  body.lang-ar{
    --font-display:'Tajawal', Tahoma, Arial, sans-serif;
    --font-body:'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  .glow{
    position:fixed; z-index:0; pointer-events:none; filter:blur(90px); opacity:.35; border-radius:50%;
  }
  html[dir="ltr"] .glow-1{ top:-180px; left:-120px; }
  html[dir="ltr"] .glow-2{ bottom:-160px; right:-140px; }
  html[dir="rtl"] .glow-1{ top:-180px; right:-120px; }
  html[dir="rtl"] .glow-2{ bottom:-160px; left:-140px; }
  .glow-1{ width:520px; height:520px; background:var(--c-web); }
  .glow-2{ width:460px; height:460px; background:var(--c-sec); opacity:.22; }

  .wrap{position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:0 24px;}

  /* ---------- lang toggle ---------- */
  .lang-toggle-row{
    position:relative; z-index:2;
    display:flex; justify-content:space-between; align-items:center;
    padding-top:24px;
  }
  .home-link{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:.78rem; color:var(--ink-dim);
    text-decoration:none;
    transition:color .15s ease;
  }
  .home-link:hover{ color:var(--ink); }
  html[dir="rtl"] .home-arrow{ display:inline-block; transform:scaleX(-1); }
  .lang-toggle{
    font-family:var(--font-mono);
    font-size:.78rem;
    color:var(--ink-dim);
    background:transparent;
    border:1px solid var(--line);
    border-radius:30px;
    padding:8px 16px;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
  }
  .lang-toggle:hover{ border-color:var(--c-web); color:var(--ink); }

  /* ---------- header ---------- */
  header{padding:56px 0 64px; text-align:center;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:.78rem; color:var(--ink-dim);
    border:1px solid var(--line); border-radius:30px; padding:7px 16px;
    margin-bottom:30px;
  }
  .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--c-net); box-shadow:0 0 10px var(--c-net);}

  h1{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(2.1rem, 4.6vw, 3.2rem);
    margin:0 0 18px;
    line-height:1.25;
    letter-spacing:-0.01em;
  }
  body.lang-ar h1{ font-weight:900; }
  header p{
    color:var(--ink-dim);
    font-size:1.08rem;
    max-width:540px;
    margin:0 auto;
  }

  /* ---------- plan grid ---------- */
  .plans{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
    margin:0 0 72px;
    align-items:stretch;
  }
  .plan{
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:20px;
    padding:0;
    display:flex;
    flex-direction:column;
    position:relative;
    transition:transform .25s ease, border-color .25s ease;
  }
  .plan:hover{ transform:translateY(-6px); }
  .plan--web:hover{ border-color:var(--c-web); }
  .plan--net:hover{ border-color:var(--c-net); }
  .plan--sec:hover{ border-color:var(--c-sec); }

  .plan-inner{ padding:32px 28px; display:flex; flex-direction:column; height:100%; }

  .icon-badge{
    width:48px; height:48px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:22px;
  }
  .plan--web .icon-badge{ background:var(--c-web-soft); }
  .plan--net .icon-badge{ background:var(--c-net-soft); }
  .plan--sec .icon-badge{ background:var(--c-sec-soft); }
  .icon-badge svg{ width:24px; height:24px; }

  .plan-kicker{
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.05em;
    color:var(--ink-faint);
    margin-bottom:10px;
  }
  .plan h2{
    font-family:var(--font-display);
    font-size:1.28rem;
    font-weight:700;
    margin:0 0 8px;
  }
  .plan .desc{
    color:var(--ink-dim);
    font-size:.9rem;
    margin:0 0 24px;
    min-height:44px;
  }

  .price-row{
    display:flex; align-items:flex-end; gap:8px;
    margin-bottom:24px;
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
  }
  .price-block{ display:flex; flex-direction:column; gap:4px; }
  .price-old{
    font-family:var(--font-mono); font-size:.95rem; font-weight:500;
    color:var(--ink-faint); text-decoration:line-through;
    direction:ltr; unicode-bidi:isolate;
  }
  /* price digits always render left-to-right and keep the same big/small
     split regardless of page language or direction */
  .price-num{
    font-family:var(--font-mono); font-size:2.6rem; font-weight:700; color:var(--ink);
    display:inline-flex; align-items:baseline;
    direction:ltr; unicode-bidi:isolate;
  }
  .price-num .price-tail{ font-size:1.05rem; font-weight:400; color:var(--ink-faint); }
  .price-unit{ font-size:.8rem; color:var(--ink-faint); }

  .features{ list-style:none; margin:0 0 28px; padding:0; flex-grow:1; }
  .features li{
    display:flex; align-items:flex-start; gap:10px;
    color:var(--ink-dim);
    font-size:.89rem;
    padding:9px 0;
  }
  .features li svg{ width:15px; height:15px; flex-shrink:0; margin-top:3px; }
  .plan--web .features li svg{ color:var(--c-web); }
  .plan--net .features li svg{ color:var(--c-net); }
  .plan--sec .features li svg{ color:var(--c-sec); }

  .cta{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 20px;
    border-radius:11px;
    text-decoration:none;
    font-weight:700;
    font-size:.95rem;
    border:1px solid transparent;
    transition:opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .plan--web .cta{ background:var(--c-web); color:#04070f; }
  .plan--net .cta{ background:var(--c-net); color:#04070f; }
  .plan--sec .cta{ background:transparent; color:var(--c-sec); border-color:var(--c-sec); }
  .plan--sec .cta:hover{ background:var(--c-sec); color:#1a0508; }
  .plan--web .cta:hover, .plan--net .cta:hover{ opacity:.88; }

  .badge{
    position:absolute; top:-12px;
    font-family:var(--font-mono);
    font-size:.68rem;
    font-weight:600;
    color:#04070f;
    background:var(--c-net);
    padding:5px 12px;
    border-radius:20px;
  }
  html[dir="ltr"] .badge{ left:28px; }
  html[dir="rtl"] .badge{ right:28px; }

  /* ---------- contact strip ---------- */
  .contact-strip{
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--panel-2);
    padding:36px 38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:60px;
  }
  .contact-strip h3{ font-family:var(--font-display); margin:0 0 6px; font-size:1.18rem; font-weight:700;}
  .contact-strip p{ margin:0; color:var(--ink-dim); font-size:.92rem; }
  .contact-strip a{
    font-family:var(--font-mono);
    font-size:.85rem;
    color:var(--ink);
    text-decoration:none;
    border:1px solid var(--line);
    padding:12px 20px;
    border-radius:11px;
    white-space:nowrap;
    transition:border-color .15s ease, color .15s ease;
  }
  .contact-strip a:hover{ border-color:var(--c-web); color:var(--c-web); }

  footer{
    text-align:center;
    color:var(--ink-faint);
    font-size:.8rem;
    padding-bottom:52px;
  }

  @media (max-width:900px){
    .plans{ grid-template-columns:1fr; }
    .contact-strip{ flex-direction:column; align-items:flex-start; }
  }