/* ===========================================================
   DONTECH — dontechiq.com
   Identity: Deep Navy grounds · DON Navy · Signal Blue + Logic Violet
   Brand rule: the blue→violet gradient appears ONLY on the signal
   line and its nodes — never on backgrounds or large text.
   =========================================================== */

:root{
  --navy-deep: #071C2E;   /* grounds, covers      */
  --navy:      #0B3B5C;   /* logo, headlines      */
  --blue:      #2F6BFF;   /* accent               */
  --violet:    #7A5CFA;   /* accent               */
  --mist:      #EEF2F7;   /* light grounds        */

  --navy-800:  #0A2238;
  --navy-700:  #0E2C47;
  --line-dark: rgba(255,255,255,.09);
  --line:      #DCE3EC;

  --on-dark:       #F3F7FB;
  --on-dark-soft:  rgba(243,247,251,.72);
  --on-dark-faint: rgba(243,247,251,.52);

  --on-light:       #0B2136;
  --on-light-soft:  #42576D;
  --on-light-faint: #6B7F94;

  --r:    14px;
  --r-lg: 22px;

  --wrap: 1140px;

  --latin: "Poppins", system-ui, sans-serif;
  --ar:    "Tajawal", "Poppins", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.8,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:92px; }

body{
  margin:0;
  background:var(--navy-deep);
  color:var(--on-dark);
  font-family:var(--ar);
  font-weight:300;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body[data-lang="en"]{ font-family:var(--latin); line-height:1.7; }

/* Arabic needs its own weights: Tajawal has no 600, negative tracking hurts
   joined script, and a 300 weight goes thin on a dark ground. */
body[data-lang="ar"]{ font-weight:400; }
body[data-lang="ar"] .h1{ font-weight:700; line-height:1.32; letter-spacing:0; }
body[data-lang="ar"] .h2{ font-weight:700; line-height:1.4;  letter-spacing:0; }
body[data-lang="ar"] .card-title,
body[data-lang="ar"] .svc-item h3,
body[data-lang="ar"] .steps h3,
body[data-lang="ar"] .why-item h3{ font-weight:700; letter-spacing:0; }
body[data-lang="ar"] .lede,
body[data-lang="ar"] .sec-sub,
body[data-lang="ar"] .card-text,
body[data-lang="ar"] .svc-item p,
body[data-lang="ar"] .steps p,
body[data-lang="ar"] .why-item p,
body[data-lang="ar"] .feats li{ font-weight:400; }
body[data-lang="ar"] .btn{ font-weight:500; }

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* .mono is for Latin-only content (numerals, ©) — JetBrains Mono has no
   Arabic glyphs, so Arabic never uses it. */
.mono{ font-family:var(--mono); font-weight:500; letter-spacing:.08em; text-transform:uppercase; }

/* .label is the small caps label: mono in English, the Arabic face in Arabic. */
.label{ font-family:var(--mono); font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
body[data-lang="ar"] .label{
  font-family:var(--ar); font-weight:500; letter-spacing:0; text-transform:none;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px; }

.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:300;
  background:var(--blue); color:#fff; padding:10px 16px; border-radius:0 0 var(--r) var(--r);
}
.skip:focus{ inset-inline-start:16px; }

/* ---------- scroll progress = the signal line ---------- */
.progress{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:200;
  height:2px; width:0;
  background:linear-gradient(90deg, var(--blue), var(--violet));
  box-shadow:0 0 12px rgba(47,107,255,.55);
  transition:width .08s linear;
}

/* ---------------- NAV ---------------- */
.nav{
  position:sticky; inset-block-start:0; z-index:150;
  background:rgba(7,28,46,.72);
  backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.stuck{ border-bottom-color:var(--line-dark); background:rgba(7,28,46,.92); }

.nav-inner{ display:flex; align-items:center; gap:18px; height:76px; }

.brand img{ height:30px; width:auto; transition:opacity .2s; }
.brand:hover img{ opacity:.82; }

.nav-links{ display:flex; align-items:center; gap:2px; margin-inline-start:auto; }
.nav-links a{
  position:relative; padding:9px 15px; border-radius:999px;
  font-size:15px; font-weight:400; color:var(--on-dark-soft);
  transition:color .2s;
}
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; inset-block-end:4px; inset-inline-start:15px; inset-inline-end:15px;
  height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, var(--blue), var(--violet));
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s var(--ease);
}
.nav-links a:hover{ color:var(--on-dark); }
.nav-links a:hover:not(.nav-cta)::after{ transform:scaleX(1); }

.nav-links .nav-cta{
  background:var(--blue); color:#fff; font-weight:500; margin-inline-start:10px;
  transition:background .2s, box-shadow .2s, transform .15s;
}
.nav-links .nav-cta:hover{ background:#1d57eb; box-shadow:0 8px 24px rgba(47,107,255,.34); }

.nav-tools{ display:flex; align-items:center; gap:8px; }

.lang{
  font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.08em;
  background:transparent; border:1px solid var(--line-dark); color:var(--on-dark-soft);
  min-width:46px; height:36px; border-radius:999px; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.lang:hover{ border-color:var(--blue); color:#fff; background:rgba(47,107,255,.14); }

.menu{
  display:none; width:40px; height:36px; border:1px solid var(--line-dark); background:transparent;
  border-radius:11px; cursor:pointer; padding:9px;
}
.menu span{ display:block; height:1.7px; background:var(--on-dark); border-radius:2px; transition:transform .28s var(--ease), opacity .2s; }
.menu span + span{ margin-top:4.5px; }
.menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.2px) rotate(45deg); }
.menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.2px) rotate(-45deg); }

/* ---------------- SIGNAL PATTERN ---------------- */
/* The identity says the pattern goes quietly behind covers — never behind
   body text. So it fades out across the half the copy sits in. */
.signal{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
  --fade:to right;
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%),
    linear-gradient(var(--fade), #000 0%, #000 26%, rgba(0,0,0,.18) 56%, transparent 78%);
  mask-composite:intersect;
  -webkit-mask-composite:source-in;
}
[dir="rtl"] .signal{ --fade:to left; }
.signal .sig-base path{ stroke:rgba(122,92,250,.20); stroke-width:1.4; }
.signal .sig-pulse path{
  stroke:url(#sig); stroke-width:2.2;
  stroke-dasharray:120 2000; stroke-dashoffset:2120;
  animation:flow 7s linear infinite; animation-delay:var(--d,0s);
  filter:drop-shadow(0 0 6px rgba(47,107,255,.55));
}
.signal .sig-node circle{
  fill:var(--violet); stroke:none;
  transform-origin:center; transform-box:fill-box;
  animation:node 3.4s ease-in-out infinite; animation-delay:var(--d,0s);
}

@keyframes flow{ to{ stroke-dashoffset:0; } }
@keyframes node{
  0%,100%{ opacity:.45; transform:scale(.85); }
  50%    { opacity:1;   transform:scale(1.25); }
}

/* the contact block reuses the pattern without its own gradient def */
.signal-sm .sig-pulse path{ stroke:var(--blue); }

/* ---------------- HERO ---------------- */
.hero{ position:relative; padding:96px 0 0; overflow:hidden; }
.hero::after{
  content:""; position:absolute; inset-block-start:-20%; inset-inline-end:-10%;
  width:60vw; height:60vw; max-width:760px; max-height:760px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,107,255,.16), transparent 68%);
  pointer-events:none; z-index:0;
}
.hero-inner{ position:relative; z-index:1; padding-bottom:84px; }

.eyebrow{
  display:inline-block; margin:0 0 22px; font-size:11.5px;
  color:var(--blue);
  border:1px solid rgba(47,107,255,.3); background:rgba(47,107,255,.09);
  padding:7px 15px; border-radius:999px;
}

.h1{
  margin:0 0 24px;
  font-size:clamp(38px, 7vw, 76px);
  line-height:1.14; font-weight:600; letter-spacing:-.02em;
  color:#fff; max-width:15ch;
}
body[data-lang="en"] .h1{ font-family:var(--latin); font-weight:600; }

.h1 .line{ display:block; overflow:hidden; }
.h1 .line > span{
  display:block;
  transform:translateY(105%);
  animation:riseIn .95s var(--ease) forwards;
}
.h1 .line:nth-child(2) > span{ animation-delay:.14s; }
@keyframes riseIn{ to{ transform:translateY(0); } }

.lede{
  margin:0 0 34px; max-width:56ch;
  font-size:clamp(16px, 2vw, 19px); font-weight:300;
  color:var(--on-dark-soft);
  opacity:0; animation:fadeUp .9s var(--ease) .34s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.hero-cta{
  display:flex; flex-wrap:wrap; gap:12px;
  opacity:0; animation:fadeUp .9s var(--ease) .46s forwards;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px;
  font-size:15px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .25s;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 28px rgba(47,107,255,.3); }
.btn-primary:hover{ background:#1d57eb; box-shadow:0 14px 38px rgba(47,107,255,.44); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--on-dark); border:1px solid var(--line-dark); }
.btn-ghost:hover{ border-color:var(--violet); color:#fff; background:rgba(122,92,250,.12); transform:translateY(-2px); }

/* hero strip */
.strip{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-dark);
}
.strip-item{ padding:26px 26px 30px; border-inline-start:1px solid var(--line-dark); }
.strip-item:first-child{ border-inline-start:0; padding-inline-start:0; }
.strip-k{ display:block; font-size:10.5px; color:var(--blue); margin-bottom:6px; }
.strip-item strong{ font-size:16px; font-weight:400; color:var(--on-dark); }

/* ---------------- SECTIONS ---------------- */
.section{ position:relative; padding:104px 0; }

.section-light{
  background:var(--mist);
  color:var(--on-light);
}
.section-light .h2{ color:var(--navy); }
.section-light .sec-sub{ color:var(--on-light-soft); }
.section-light .tag{ color:var(--blue); }

.sec-head{ max-width:60ch; margin-bottom:52px; }

.tag{ display:block; font-size:11px; color:var(--violet); margin-bottom:14px; }

.h2{
  margin:0 0 16px;
  font-size:clamp(28px, 4.2vw, 44px);
  line-height:1.26; font-weight:600; letter-spacing:-.015em; color:#fff;
}
body[data-lang="en"] .h2, body[data-lang="en"] .card-title, body[data-lang="en"] .svc-item h3,
body[data-lang="en"] .steps h3, body[data-lang="en"] .why-item h3{ font-family:var(--latin); }

.sec-sub{ margin:0; font-size:17px; font-weight:300; color:var(--on-dark-soft); }

/* ---------------- PRODUCT CARDS ---------------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:20px; }

.card{
  position:relative; isolation:isolate;
  background:var(--navy-800);
  border:1px solid var(--line-dark); border-radius:var(--r-lg);
  padding:30px 28px; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .35s, background .35s;
}
/* cursor spotlight */
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(47,107,255,.16), transparent 62%);
  opacity:0; transition:opacity .35s;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(122,92,250,.42); background:var(--navy-700); }
.card:hover::before{ opacity:1; }

.card-live{ border-color:rgba(47,107,255,.34); }

.pill{
  align-self:flex-start; font-size:10.5px;
  padding:6px 12px; border-radius:999px; margin-bottom:18px;
  background:rgba(255,255,255,.05); color:var(--on-dark-faint); border:1px solid var(--line-dark);
}
.pill-live{
  background:rgba(47,107,255,.14); color:#7FA6FF; border-color:rgba(47,107,255,.36);
}

.card-title{ margin:0 0 12px; font-size:22px; font-weight:500; color:#fff; line-height:1.45; }
.card-text{ margin:0; font-size:15px; font-weight:300; color:var(--on-dark-soft); }

.feats{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.feats li{ position:relative; padding-inline-start:22px; font-size:14.5px; color:var(--on-dark-soft); }
.feats li::before{
  content:""; position:absolute; inset-inline-start:0; top:.72em;
  width:7px; height:7px; border-radius:50%;
  background:linear-gradient(90deg, var(--blue), var(--violet));
}

.card-link{
  margin-top:auto; padding-top:24px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:500; color:#7FA6FF;
}
.card-link svg{ width:16px; height:16px; transition:transform .22s var(--ease); }
.card-link:hover{ color:#fff; }
[dir="rtl"] .card-link svg{ transform:scaleX(-1); }
.card-link:hover svg{ transform:translate(3px,-3px); }
[dir="rtl"] .card-link:hover svg{ transform:scaleX(-1) translate(3px,-3px); }

/* ---------------- SERVICES ---------------- */
.svc{ display:grid; grid-template-columns:repeat(2,1fr); gap:38px 44px; }
.svc-item h3{ margin:0 0 9px; font-size:20px; font-weight:500; color:var(--navy); }
.svc-item p{ margin:0; font-size:15px; font-weight:300; color:var(--on-light-soft); }

.svc-ico{
  width:50px; height:50px; border-radius:15px; margin-bottom:18px;
  display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); color:var(--blue);
  box-shadow:0 4px 16px rgba(11,33,54,.07);
  transition:transform .3s var(--ease), box-shadow .3s, color .3s;
}
.svc-item:hover .svc-ico{ transform:translateY(-4px) rotate(-4deg); color:var(--violet); box-shadow:0 12px 28px rgba(11,33,54,.12); }
.svc-ico svg{ width:23px; height:23px; }

/* ---------------- STEPS ---------------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
.steps li{ position:relative; padding:28px 28px 8px; border-inline-start:1px solid var(--line-dark); }
.steps li:first-child{ border-inline-start:0; padding-inline-start:0; }
.steps li::before{
  content:""; position:absolute; inset-block-start:0; inset-inline-start:0; inset-inline-end:0;
  height:2px; background:linear-gradient(90deg, var(--blue), var(--violet));
  transform:scaleX(0); transform-origin:inline-start;
  transition:transform .8s var(--ease);
}
.steps li.in::before{ transform:scaleX(1); }
.steps li:nth-child(2)::before{ transition-delay:.12s; }
.steps li:nth-child(3)::before{ transition-delay:.24s; }

.step-n{ display:block; font-size:12px; color:var(--blue); margin-bottom:12px; }
.steps h3{ margin:0 0 10px; font-size:20px; font-weight:500; color:#fff; }
.steps p{ margin:0; font-size:15px; font-weight:300; color:var(--on-dark-soft); }

/* ---------------- WHY ---------------- */
.why{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.why-item{ background:#fff; padding:34px 30px; transition:background .3s; }
.why-item:hover{ background:#FAFCFF; }
.why-item h3{ margin:0 0 11px; font-size:18.5px; font-weight:500; color:var(--navy); line-height:1.5; }
.why-item p{ margin:0; font-size:15px; font-weight:300; color:var(--on-light-soft); }

/* ---------------- CONTACT ---------------- */
.contact{ padding-bottom:110px; }
.contact-box{
  position:relative; overflow:hidden;
  background:var(--navy-800);
  border:1px solid var(--line-dark); border-radius:28px;
  padding:72px 40px;
}
.contact-inner{ position:relative; z-index:1; text-align:center; }
.contact-inner .sec-sub{ margin-inline:auto; max-width:54ch; }

.contact-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:34px 0 26px; }
.contact-meta{ margin:0; font-size:13px; color:var(--on-dark-faint); }
.contact-meta a:hover{ color:#fff; }

/* ---------------- FOOTER ---------------- */
.foot{ border-top:1px solid var(--line-dark); padding:44px 0; }
.foot-inner{ display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between; }
.foot-brand img{ height:46px; width:auto; }
.foot-brand p{ margin:10px 0 0; font-size:14px; font-weight:300; color:var(--on-dark-faint); }
.foot-links{ display:flex; flex-wrap:wrap; gap:22px; font-size:15px; color:var(--on-dark-soft); }
.foot-links a:hover{ color:#fff; }
.foot-copy{ margin:0; font-size:11.5px; color:var(--on-dark-faint); }

/* ---------------- TO TOP ---------------- */
.to-top{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:140;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--blue); color:#fff; box-shadow:0 10px 30px rgba(47,107,255,.4);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .2s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--violet); }
.to-top svg{ width:19px; height:19px; }

/* ---------------- REVEAL ---------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-i="1"]{ transition-delay:.08s; }
.reveal[data-i="2"]{ transition-delay:.16s; }
.reveal[data-i="3"]{ transition-delay:.24s; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 920px){
  .menu{ display:block; }

  .nav-links{
    position:fixed; inset-block-start:76px; inset-inline:0;
    background:rgba(7,28,46,.98); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line-dark);
    flex-direction:column; align-items:stretch; gap:2px;
    padding:14px 22px 22px; margin:0;
    transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-links.open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav-links a{ padding:13px 14px; border-radius:11px; font-size:16px; }
  .nav-links a:not(.nav-cta)::after{ display:none; }
  .nav-links .nav-cta{ margin:10px 0 0; text-align:center; }

  .hero{ padding-top:64px; }
  .hero-inner{ padding-bottom:60px; }
  .strip{ grid-template-columns:1fr; }
  .strip-item{ border-inline-start:0; border-top:1px solid var(--line-dark); padding-inline:0; }
  .strip-item:first-child{ border-top:0; }

  .section{ padding:72px 0; }
  .svc, .why{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .steps li{ border-inline-start:0; border-top:1px solid var(--line-dark); padding-inline:0; padding-top:24px; }
  .steps li:first-child{ border-top:0; }
  .steps li::before{ inset-inline-end:auto; width:64px; }

  .contact-box{ padding:52px 22px; }
  .foot-inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 430px){
  .wrap{ padding-inline:18px; }
  .btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .h1 .line > span{ transform:none; animation:none; }
  .lede, .hero-cta{ opacity:1; animation:none; }
  .signal .sig-pulse path, .signal .sig-node circle{ animation:none; }
  .signal .sig-pulse path{ stroke-dasharray:none; stroke-dashoffset:0; opacity:.5; }
  .steps li::before{ transform:scaleX(1); transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}