:root{
    --bg:#07090D; --card:#0E1218; --card-2:#121821; --line:#1C2330; --grid:rgba(255,255,255,.045);
    --text:#EEF2F7; --muted:#8A94A6; --accent:#6EE7B7; --accent-2:#60A5FA; --violet:#A78BFA;
    --radius:24px; --gap:16px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    min-height:100vh; font-family:"Geist", system-ui, sans-serif; color:var(--text);
    background-color:var(--bg);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:48px 48px;
  }
  .container{max-width:1200px;margin:0 auto;padding:0 16px}
  .card{transition:transform .3s, border-color .3s}
  .card:hover{border-color:#2A3446;transform:translateY(-2px)}
  .card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(110,231,183,.08),transparent 40%);opacity:0;transition:opacity .3s}
  .card:hover::before{opacity:1}
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
  .reveal.is-visible{opacity:1;transform:none}
  
  
  
  /* NAV */
  .nav{display:flex;align-items:center;justify-content:space-between;padding:28px 0}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em}
  .logo-mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
  .nav-links{display:flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:999px;background:rgba(14,18,24,.8)}
  .nav-links a{font-size:14px;color:var(--muted);padding:8px 16px;border-radius:999px;text-decoration:none}
  .nav-links a.active{background:var(--card-2);color:var(--text)}
  .btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:12px 20px;border-radius:999px;text-decoration:none}
  .btn-primary{background:var(--text);color:#07090D}
  .btn-ghost{border:1px solid var(--line);color:var(--text);background:var(--card)}
  .nav-actions{display:flex;align-items:center;gap:10px}
  .lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .2s}
  .lang-switch:hover{border-color:var(--accent)}
  .lang-switch__short{display:none}
  /* Mobile menu (hamburger) */
  .nav{position:relative}
  .menu-btn{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:44px;height:44px;border:1px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer;transition:border-color .2s}
  .menu-btn:hover{border-color:var(--accent)}
  .menu-btn span{width:16px;height:1.5px;border-radius:2px;background:var(--text);transition:transform .25s, opacity .2s}
  .nav.is-open .menu-btn span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav.is-open .menu-btn span:nth-child(2){opacity:0}
  .nav.is-open .menu-btn span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .nav-links__cta{display:none}
  
  
  
  /* BENTO */
  .section{padding:40px 0}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
  .eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
  .h2{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
  .sub{font-size:16px;color:var(--muted);line-height:1.6;max-width:420px}
  .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);gap:var(--gap)}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden;display:flex;flex-direction:column}
  .span-2{grid-column:span 2}.row-2{grid-row:span 2}
  .card-title{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
  .card-text{font-size:14px;color:var(--muted);line-height:1.6}
  .muted{color:var(--muted)}
  .push{margin-top:auto}
  
  
  
  /* HERO */
  .hero{background:linear-gradient(160deg,#101826 0%,#0B0F15 60%);}
  .badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--card-2);width:max-content}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
  .h1{font-size:clamp(44px,4.6vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1.02;margin:22px 0 16px}
  .grad{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero-actions{display:flex;gap:12px}
  .stat{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card-2);color:var(--text)}
  .k{color:var(--violet)}.s{color:var(--accent)}.c{color:#4B5565}.f{color:var(--accent-2)}
  .glow{position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(70px);opacity:.35}
  .avail{background:linear-gradient(135deg,#0F2A22,#0E1218 70%)}
  
  
  
  /* SERVICES */
  .icon{width:44px;height:44px;border-radius:12px;background:var(--card-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:auto}
  .bars{display:flex;align-items:flex-end;gap:8px;height:80px;margin-top:16px}
  .bars div{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--accent-2),rgba(96,165,250,.15))}
  
  
  
  /* PROCESS */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
  .step-num{font-size:13px;font-weight:600;color:var(--accent);font-family:"Geist Mono",Menlo,monospace}
  
  
  
  /* WORK */
  .thumb{border-radius:16px;height:240px;margin-bottom:20px}
  .work{grid-auto-rows:auto}
  .tag{font-size:12px;color:var(--muted)}
  
  
  
  /* CTA */
  .cta{background:linear-gradient(120deg,#0F2A22 0%,#0E1A2E 55%,#1A1530 100%);padding:56px;align-items:center;text-align:center}
  .footer{display:flex;justify-content:space-between;padding:32px 0 48px;border-top:1px solid var(--line);margin-top:40px;font-size:14px;color:var(--muted)}
  .footer-links{display:flex;gap:24px}
  .footer-links a{color:inherit;text-decoration:none}
  .footer-links a:hover{color:var(--text)}

/* Terminal card (red theme) */
.terminal{padding:0;background:#1B2838;border-color:#334155;font-family:"JetBrains Mono","Geist Mono",Menlo,monospace;font-size:15px}
.term-bar{display:flex;gap:8px;padding:18px 24px;border-bottom:1px solid #334155}
.term-bar span{width:12px;height:12px;border-radius:50%;background:#4B5B6E}
.term-code{list-style:none;counter-reset:ln;margin:auto 0;padding:18px 24px;color:#FF7B72;line-height:30px;white-space:nowrap;overflow-x:auto}
.term-code li{counter-increment:ln}
.term-code li::before{content:counter(ln);color:#4B5B6E;display:inline-block;width:12px;margin-inline-end:20px}
.t-comment{color:#8B9BB0;font-style:italic}.t-num{color:#F9E27D}.t-ok{color:#E6EDF3}

/* Certifications & partners marquee */
.marquee{overflow:hidden;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee + .marquee{margin-top:16px}
.marquee__track{display:flex;gap:16px;width:max-content;animation:marquee var(--duration,35s) linear infinite}
.marquee--reverse .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 8px))}}
.logo-card{display:flex;align-items:center;gap:14px;height:88px;padding-block:0;padding-inline:20px 28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);white-space:nowrap;transition:border-color .3s}
.logo-card:hover{border-color:#2A3446}
.logo-card__icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line);flex-shrink:0}
.logo-card b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}
.logo-card small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ===== Final design updates ===== */
.logo{color:var(--text);text-decoration:none}
.logo__img{height:44px;width:auto;object-fit:contain}
.logo__text{font-family:"Bangers",system-ui,sans-serif;font-weight:400;font-size:24px;letter-spacing:.06em;text-transform:uppercase}
.logo--sm .logo__img{height:31px}.logo--sm .logo__text{font-size:18px}

/* Image cells in the hero bento */
.media-card{padding:20px;align-items:center;justify-content:center;gap:8px}
.media-card .card-text{align-self:flex-start}
.media-card__img{max-width:100%;max-height:100%;flex:1;min-height:0;object-fit:contain}

/* Full-bleed image cell */
.card--image{padding:0}
.card--image img{width:100%;height:100%;object-fit:cover;display:block}

/* Reseller brand logo */
.brand-logo{height:30px;width:auto;border-radius:999px;background:#fff;padding:4px 10px;object-fit:contain}

/* Projects */
.bento.work{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}
.project__thumb{width:100%;height:240px;object-fit:cover;border-radius:16px;margin-bottom:20px;background:var(--card-2)}
.project .card-title{margin-top:6px}

/* Missing image placeholder (until you add the files) */
.is-missing{visibility:hidden}
.has-missing-img{background:var(--card-2)}

/* Wide card (Authorized Reseller) */
.card--row{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
.card--row__main{display:flex;align-items:center;gap:16px}
.cta__title{font-size:48px;margin-bottom:14px}

/* ===== Contact page ===== */
.contact-head{text-align:center;padding-top:48px}
.contact-head__title{font-size:52px;margin-bottom:16px}
.contact-head__sub{margin:0 auto;max-width:560px}
.contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:start}
.contact-form{gap:20px}
.contact-form:hover{transform:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;border:0;min-width:0}
.field > span,.field legend{font-size:14px;font-weight:500;color:var(--text)}
.field legend{margin-bottom:12px}
.field input,.field textarea,.phone{width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .2s, box-shadow .2s}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:#5B6578}
.field input:focus,.field textarea:focus,.phone:focus-within{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(110,231,183,.15)}
.field .is-invalid{border-color:#F87171}
.phone{display:flex;align-items:center;gap:10px;padding:0 14px}
.dial{position:relative;flex-shrink:0}
.dial__btn{display:flex;align-items:center;gap:6px;font:inherit;font-size:15px;color:var(--text);background:none;border:0;padding:12px 0;cursor:pointer;white-space:nowrap}
.dial__btn::after{content:"";width:6px;height:6px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
.dial__menu{position:absolute;top:calc(100% + 6px);inset-inline-start:-15px;z-index:20;width:280px;max-width:calc(100vw - 48px);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.phone .dial__search{padding:10px 12px;font-size:14px;margin-bottom:6px;background:var(--card-2);border:1px solid var(--line);border-radius:10px}
.phone .dial__search:focus{border-color:var(--accent)}
.dial__list{list-style:none;max-height:240px;overflow-y:auto}
.dial__list li{display:flex;gap:12px;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--muted);cursor:pointer}
.dial__list li b{min-width:48px;color:var(--text);font-weight:600}
.dial__list li:hover,.dial__list li.is-active{background:var(--card-2);color:var(--text)}
.dial__list .dial__empty{cursor:default;justify-content:center}
.contact-form{overflow:visible}
.phone input{border:0;background:transparent;padding:12px 0;box-shadow:none!important}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checks label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);cursor:pointer}
.checks input{width:18px;height:18px;accent-color:var(--accent);color-scheme:dark}
.contact-form__submit{justify-content:center;border:0;cursor:pointer;font:inherit;font-weight:600;padding:14px 20px}
.form-note{font-size:14px;color:var(--accent)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.contact-form__submit:disabled{opacity:.6;cursor:wait}
.form-note.is-error{color:#F87171}
.contact-info{display:flex;flex-direction:column;gap:40px;padding-top:8px}
.info-block .card-text{margin-bottom:16px}
.info-links{list-style:none;display:flex;flex-direction:column;gap:12px}
.info-links li{display:flex;align-items:center;gap:12px}
.info-links svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.info-links a{color:var(--text);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.info-links a:hover{text-decoration-color:var(--accent)}
.info-links a{position:relative}
.info-links a.is-copied::after{content:"Copied ✓";position:absolute;inset-inline-start:calc(100% + 10px);top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:#07090D;background:var(--accent);padding:3px 8px;border-radius:999px;white-space:nowrap}

/* ===== Arabic (RTL) ===== */
/* Latin words keep Geist; Arabic letters fall through to IBM Plex Sans Arabic */
html[lang="ar"] body{font-family:"Geist","IBM Plex Sans Arabic",system-ui,sans-serif}
/* Negative tracking breaks joined Arabic letters, and Arabic needs taller lines */
html[lang="ar"] :is(.h1,.h2,.card-title,.stat,.logo-card b,.eyebrow){letter-spacing:0}
html[lang="ar"] .h1{font-size:clamp(40px,4vw,50px);line-height:1.28;margin:18px 0 14px}
/* Each brand name picks its own direction (Latin names LTR, Arabic names RTL) */
html[lang="ar"] :is(.logo-card b,.chip,.tag,.card-title){unicode-bidi:plaintext}
html[lang="ar"] .h2{line-height:1.35}
html[lang="ar"] .eyebrow{font-size:14px}
html[lang="ar"] :is(.card-text,.sub){line-height:1.85}
html[lang="ar"] .terminal{text-align:left}
html[lang="ar"] .info-links a.is-copied::after{content:"تم النسخ ✓"}
html[lang="ar"] input[dir="ltr"]{text-align:right}
/* Marquee scrolls the other way in RTL so the loop stays seamless */
[dir="rtl"] .marquee__track{animation-name:marquee-rtl}
@keyframes marquee-rtl{to{transform:translateX(calc(50% + 8px))}}

/* ===== Responsive (keep at the end so it overrides the rules above) ===== */

/* Tablet: 2 columns */
@media (max-width:1024px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(200px,auto)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .bento.work{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu-btn{display:inline-flex}
  .nav-links{position:absolute;top:calc(100% - 8px);inset-inline:0;z-index:50;flex-direction:column;gap:2px;padding:10px;border-radius:20px;background:rgba(14,18,24,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 48px rgba(0,0,0,.55);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s, transform .2s, visibility .2s}
  .nav.is-open .nav-links{visibility:visible;opacity:1;transform:none}
  .nav-links a{padding:14px 16px;font-size:16px;border-radius:12px}
  .nav-links a.nav-links__cta{display:flex;justify-content:center;margin-top:8px;padding:14px;border-radius:999px;background:var(--text);color:#07090D;font-size:15px;font-weight:600}
  .h1{font-size:48px}
  .h2,.cta__title{font-size:34px}
  .media-card{height:200px}
  .contact{grid-template-columns:minmax(0,1fr);gap:40px}
  .contact-head__title{font-size:42px}
  html[lang="ar"] .h1{font-size:46px}
}

/* Phone: 1 column */
@media (max-width:640px){
  :root{--radius:20px}
  .nav{padding:20px 0;gap:12px}
  .logo__img{height:36px}
  .logo__text{font-size:17px}
  .nav .btn{padding:10px 14px;font-size:13px}
  .nav-actions{gap:8px}
  .lang-switch{min-width:38px;height:38px;padding:0 10px}
  .menu-btn{width:38px;height:38px}
  .lang-switch__full{display:none}
  .lang-switch__short{display:inline}

  .section{padding:28px 0}
  .section-head{flex-direction:column;align-items:flex-start;gap:12px}

  .bento,.bento.work,.steps{grid-template-columns:minmax(0,1fr)}
  .span-2,.row-2{grid-column:auto;grid-row:auto}
  .card{padding:22px}

  .h1{font-size:38px;margin:18px 0 14px}
  html[lang="ar"] .h1{font-size:36px}
  .h2,.cta__title{font-size:28px}
  .hero-actions{flex-wrap:wrap}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}

  .card--image{min-height:220px}
  .card--image img{position:absolute;inset:0}

  .terminal{font-size:13px}
  .term-code{line-height:26px;padding:16px 20px}

  .card--row{flex-direction:column;align-items:flex-start}
  .card--row__main{align-items:flex-start}

  .logo-card{height:76px;padding-inline:16px 20px}
  .cta{padding:36px 22px}

  .contact-head{text-align:start;padding-top:16px}
  .contact-head__title{font-size:34px}
  .field-row,.checks{grid-template-columns:1fr}

  .footer{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-links{flex-wrap:wrap;gap:16px}
}

/* Very small phones */
@media (max-width:419px){
  .nav-actions .btn{display:none}
}
@media (max-width:359px){
  .h1,html[lang="ar"] .h1{font-size:32px}
}