/* ===========================================================
   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; }
}

/* ===========================================================
   MOTION — the signal, carried through the page
   Everything below is an addition to the identity above: the
   brand's blue→violet signal is the only thing that moves on
   its own, and it moves because the site is about work that
   happens without anyone watching.
   =========================================================== */

/* ---------- hero: an ordinary automated day, ticking by ---------- */
/* On a wide screen the panel sits beside the promise, so the proof of
   "while you sleep" is on screen at the same time as the claim. */
.hero-grid{ position:relative; z-index:1; }
.hero-aside{ position:relative; z-index:1; padding-bottom:26px; }

@media (min-width:1080px){
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
    align-items:center;
    column-gap:56px;
  }
  .hero-grid .hero-inner{ padding-bottom:40px; }
  .hero-aside{ padding-bottom:40px; }
  .runbox{ max-width:none; }
}

.runbox{
  max-width:560px;
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(14,44,71,.72), rgba(10,34,56,.52));
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
  overflow:hidden;
  opacity:0; animation:fadeUp .9s var(--ease) .58s forwards;
}

.runbox-top{
  display:flex; align-items:center; gap:7px;
  padding:11px 16px;
  border-bottom:1px solid var(--line-dark);
  background:rgba(7,28,46,.5);
}
.rb-dot{ width:8px; height:8px; border-radius:50%; background:rgba(243,247,251,.18); }
.rb-dot:nth-child(2){ background:rgba(47,107,255,.5); }
.rb-dot:nth-child(3){ background:rgba(122,92,250,.5); }
/* Not .mono: letter-spacing breaks Arabic joining, and this title is Arabic. */
.rb-title{ margin-inline-start:6px; font-size:11px; color:var(--on-dark-faint); }
body[data-lang="en"] .rb-title{ font-family:var(--mono); letter-spacing:.06em; }

.runlog{ list-style:none; margin:0; padding:10px 16px 16px; }
.runlog li{
  display:flex; align-items:flex-start; gap:12px;
  padding:9px 0;
  font-size:14px; line-height:1.6;
  color:var(--on-dark-soft);
  opacity:.22;
  transition:opacity .5s var(--ease), color .5s var(--ease);
}
.runlog li.on{ opacity:1; color:var(--on-dark); }
.rl-t{ flex:none; font-size:11px; color:var(--on-dark-faint); padding-top:3px; }

/* The tick draws itself when the line lands, so the eye reads it as a
   thing that just happened rather than a bullet that was always there. */
.runlog li::after{
  content:"\2713";
  flex:none; align-self:center;
  width:18px; height:18px; margin-inline-start:auto;
  display:grid; place-items:center;
  border-radius:999px;
  font-size:10px; line-height:1;
  color:transparent;
  border:1.5px solid rgba(243,247,251,.14);
  background:transparent;
  transition:color .35s var(--ease), border-color .35s var(--ease),
             background .35s var(--ease), box-shadow .35s var(--ease);
}
.runlog li.on::after{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow:0 0 0 4px rgba(47,107,255,.12);
}

/* ---------- a ground that answers the pointer ----------
   Two layers on purpose: the outer one carries the pointer, the inner one
   drifts on its own. So the light keeps breathing when nobody is touching
   the page, and follows the hand the moment somebody does. */
/* The clipping box never moves — only what is inside it does, or the edge
   of the box itself would show as a rectangle across the hero. */
.aura{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.aura span{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  width:min(76vw, 800px); aspect-ratio:1;
  margin:-38vw 0 0 -38vw;
  display:block;
  transform:translate3d(var(--ax, 0px), var(--ay, 0px), 0);
  will-change:transform;
}
.aura i{
  position:absolute; inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 38%, rgba(47,107,255,.26), transparent 62%),
    radial-gradient(circle at 66% 62%, rgba(122,92,250,.20), transparent 60%);
  filter:blur(30px);
  animation:breathe 13s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:translate3d(-4%, -3%, 0) scale(1); }
  50%    { transform:translate3d( 4%,  3%, 0) scale(1.08); }
}

/* The hero's own signal lines lean the other way, which is what makes the
   whole thing read as depth rather than a moving blob. */
.hero .signal{
  transform:translate3d(var(--sx, 0px), var(--sy, 0px), 0);
  transition:transform .6s cubic-bezier(.22,.8,.3,1);
  will-change:transform;
}

/* ---------- the spine: one line down the page, lit section by section ---- */
.spine{
  position:fixed; inset-block:0; inset-inline-start:26px;
  width:2px; z-index:5;
  pointer-events:none;
  display:none;
}
.spine::before{
  content:""; position:absolute; inset:0;
  background:var(--line-dark);
}
.spine i{
  position:absolute; inset-block-start:0; inset-inline:0;
  height:var(--p, 0%);
  background:linear-gradient(180deg, var(--blue), var(--violet));
  box-shadow:0 0 14px rgba(47,107,255,.45);
  transition:height .12s linear;
}
.spine b{
  position:absolute; inset-inline-start:-3px;
  width:8px; height:8px; border-radius:50%;
  background:var(--navy-deep);
  border:1.5px solid rgba(243,247,251,.22);
  transform:translateY(-50%);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.spine b.lit{
  background:linear-gradient(135deg, var(--blue), var(--violet));
  border-color:transparent;
  box-shadow:0 0 0 4px rgba(47,107,255,.14), 0 0 16px rgba(122,92,250,.5);
}
@media (min-width:1280px){ .spine{ display:block; } }

/* ---------- cards: a tilt that follows the pointer ---------- */
@media (hover:hover){
  [data-tilt]{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
}

@media (prefers-reduced-motion: reduce){
  .runbox{ opacity:1; animation:none; }
  .runlog li{ opacity:1; color:var(--on-dark); }
  .runlog li::after{ border-color:transparent; background-size:100% 100%; }
  .spine{ display:none; }
  .aura span{ transform:none; }
  .aura i{ animation:none; }
  .hero .signal{ transform:none; transition:none; }
  [data-tilt]{ transform:none; }
}