/* =========================================================================
   Vision Guard — styles.css
   Dark, editorial, one accent. Bilingual AR (RTL, default) / EN (LTR).
   Depth comes from lighting, hairlines and type — never from extra colour.
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  --bg:        #08090B;
  --bg-1:      #0B0D10;
  --bg-2:      #101318;
  --bg-3:      #151A20;

  --ink:       #F2F5F7;
  --ink-2:     rgba(242,245,247,.64);
  --ink-3:     rgba(242,245,247,.40);
  --ink-4:     rgba(242,245,247,.22);

  --line:      rgba(255,255,255,.085);
  --line-2:    rgba(255,255,255,.16);

  /* THE accent — the azure from the Vision Guard logo.
     Change --accent-rgb alone and every hairline, glow, button and the
     canvas hero follows. Nothing else on the page is chromatic. */
  --accent-rgb: 27, 157, 217;              /* #1B9DD9 */
  --accent:     rgb(var(--accent-rgb));
  --accent-ink: #04121B;
  --accent-dim: rgba(var(--accent-rgb), .14);

  /* the logo's secondary grey, kept for de-emphasis */
  --steel: #58595B;

  /* catalogue photography is shot on a white studio ground, so it sits on a
     light plate rather than fighting the dark page. The logo does not —
     it has a proper dark-mode variant instead. */
  --plate: #F4F6F8;

  --latin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --arabic: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --sans: var(--arabic);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --gut:  clamp(20px, 4.4vw, 56px);
  --maxw: 1320px;
  --sect: clamp(88px, 12vw, 180px);

  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io:  cubic-bezier(.65, 0, .35, 1);
}
html[lang="en"]{ --sans: var(--latin); }
html[lang="ar"]{ --sans: var(--arabic); }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  font-weight:400;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,canvas{ display:block; max-width:100%; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:var(--accent-ink); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip{
  position:fixed; inset-block-start:12px; inset-inline-start:12px; z-index:200;
  padding:10px 16px; background:var(--accent); color:var(--accent-ink);
  font-size:.8125rem; font-weight:700; border-radius:6px;
  transform:translateY(-160%);
}
.skip:focus{ transform:none; }

/* ---------- Latin runs inside Arabic copy ---------- */
html[lang="ar"] .prod__name,
html[lang="ar"] .pgroup__title i,
html[lang="ar"] [dir="ltr"]{ font-family:var(--latin); }

/* Arabic must never be letter-spaced, and needs more leading */
html[lang="ar"] .display,
html[lang="ar"] .h2,
html[lang="ar"] .lede,
html[lang="ar"] .eyebrow,
html[lang="ar"] .step__title,
html[lang="ar"] .statement__text,
html[lang="ar"] .cat__name,
html[lang="ar"] .brand__word,
html[lang="ar"] .menu__inner > a{ letter-spacing:normal; }
html[lang="ar"] .display{ line-height:1.18; }
html[lang="ar"] .h2{ line-height:1.24; }
html[lang="ar"] .statement__text{ line-height:1.26; }
html[lang="ar"] .step__title{ line-height:1.2; }
html[lang="ar"] .hero__title{ max-width:16ch; }

/* ---------- primitives ---------- */
.shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sect); position:relative; }

.display{
  font-size:clamp(2.7rem, 7.6vw, 6.6rem);
  line-height:.96; letter-spacing:-.042em; font-weight:700;
  text-wrap:balance;
}
.h2{
  font-size:clamp(1.9rem, 4.4vw, 3.7rem);
  line-height:1.05; letter-spacing:-.035em; font-weight:700;
  text-wrap:balance;
}
.lede{
  font-size:clamp(1.02rem, .94rem + .5vw, 1.26rem);
  line-height:1.62; color:var(--ink-2); letter-spacing:-.012em;
  text-wrap:pretty;
}
.eyebrow{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:.6em; font-weight:500;
}
html[lang="ar"] .eyebrow{ font-family:var(--arabic); font-size:.8125rem; text-transform:none; font-weight:600; }

.dot{
  width:5px; height:5px; border-radius:50%; background:var(--accent);
  animation:pulse 2.6s var(--e-io) infinite; flex:none;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45); }
  60%    { box-shadow:0 0 0 7px rgba(var(--accent-rgb),0); }
}

/* ---------- buttons ---------- */
.btn{
  --pad: 15px 26px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:var(--pad);
  background:var(--accent); color:var(--accent-ink);
  font-size:.9rem; font-weight:700;
  border:1px solid var(--accent); border-radius:999px;
  isolation:isolate; overflow:hidden; text-align:center;
  transition:transform .45s var(--e-out), box-shadow .45s var(--e-out);
  will-change:transform;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#fff; opacity:0; transition:opacity .3s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -10px rgba(var(--accent-rgb),.55); }
.btn:hover::after{ opacity:.14; }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink-3); box-shadow:none; background:rgba(255,255,255,.03); }
.btn--sm{ --pad:10px 18px; font-size:.8125rem; }

.link{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.95rem; font-weight:600; color:var(--accent); padding-bottom:2px;
  box-shadow:inset 0 -1px 0 0 rgba(var(--accent-rgb),.32);
  transition:box-shadow .35s var(--e-out);
}
.link i{ font-style:normal; transition:transform .45s var(--e-out); }
.link:hover{ box-shadow:inset 0 -1px 0 0 var(--accent); }
.link:hover i{ transform:translateX(-5px); }
[dir="ltr"] .link:hover i{ transform:translateX(5px); }

/* ---------- boot curtain (pure CSS, JS-independent) ---------- */
.boot{
  position:fixed; inset:0; z-index:150; background:var(--bg);
  display:grid; place-content:center; justify-items:center; gap:24px;
  animation:bootOut .7s var(--e-out) 1.05s forwards;
}
.boot__mark{ opacity:0; animation:bootIn .5s var(--e-out) .1s forwards; }
.boot__mark img{ width:150px; height:auto; }
.boot__bar{ width:132px; height:1px; background:var(--line-2); overflow:hidden; }
.boot__bar i{
  display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  animation:bootLoad .95s var(--e-io) .1s forwards;
}
[dir="rtl"] .boot__bar i{ transform-origin:right; }
@keyframes bootIn  { to{ opacity:1; } }
@keyframes bootLoad{ to{ transform:scaleX(1); } }
@keyframes bootOut { to{ opacity:0; visibility:hidden; } }

/* ---------- grain + progress ---------- */
.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.progress{ position:fixed; inset-block-start:0; inset-inline:0; height:1px; z-index:120; pointer-events:none; }
.progress i{
  display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.7);
}
[dir="rtl"] .progress i{ transform-origin:right; }

/* =========================================================================
   TOP CONTACT STRIP
   ========================================================================= */
.strip{
  position:relative; z-index:101;
  background:var(--bg-2); border-bottom:1px solid var(--line);
  font-size:.75rem;
}
.strip__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 26px;
  padding-block:9px;
}
.strip__item{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-3); }
.strip a.strip__item{ transition:color .3s ease; }
.strip a.strip__item:hover{ color:var(--accent); }
.strip__wa{ color:var(--ink-2); }
.strip__hours{ margin-inline-start:auto; }

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:sticky; inset-block-start:0; z-index:100;
  transition:background .5s var(--e-out), border-color .5s var(--e-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,9,11,.78);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; }

/* Dark-mode logo: VISION keeps its azure, GUARD and the swoosh are white.
   Sits directly on the page — no plate. See assets/logo-dark.png. */
.brand{ display:inline-flex; align-items:center; flex:none; }
.brand__logo{
  width:auto; height:44px;
  transition:filter .4s var(--e-out), opacity .4s var(--e-out);
}
.brand:hover .brand__logo{ filter:drop-shadow(0 4px 18px rgba(var(--accent-rgb),.45)); }

.nav__links{ display:flex; gap:2px; }
.nav__links a{
  position:relative; padding:8px 14px;
  font-size:.875rem; font-weight:500; color:var(--ink-2);
  transition:color .3s ease; white-space:nowrap;
}
.nav__links a::before{
  content:""; position:absolute; inset-inline:14px; inset-block-end:2px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--e-out);
}
[dir="rtl"] .nav__links a::before{ transform-origin:right; }
.nav__links a:hover,.nav__links a.is-active{ color:var(--ink); }
.nav__links a.is-active::before{ transform:scaleX(1); }

.nav__end{ display:flex; align-items:center; gap:12px; }
.lang{
  width:44px; height:36px; border:1px solid var(--line-2); border-radius:999px;
  font-family:var(--latin); font-size:.75rem; font-weight:700; letter-spacing:.06em;
  color:var(--ink-2);
  transition:color .3s, border-color .3s, background .3s;
}
.lang:hover{ color:var(--accent); border-color:rgba(var(--accent-rgb),.6); background:var(--accent-dim); }

.burger{
  display:none; width:42px; height:42px; padding:0;
  border:1px solid var(--line); border-radius:50%; position:relative;
}
.burger span{
  position:absolute; inset-inline-start:50%; width:15px; height:1.5px; background:var(--ink);
  transform:translateX(-50%);
  transition:transform .4s var(--e-out);
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ bottom:17px; }
.is-menu .burger span:nth-child(1){ transform:translate(-50%,4px) rotate(45deg); }
.is-menu .burger span:nth-child(2){ transform:translate(-50%,-4px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:99;
  background:rgba(8,9,11,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:grid; align-content:center; padding:0 var(--gut);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--e-out), visibility .45s;
}
.menu[hidden]{ display:grid; }
.is-menu .menu{ opacity:1; visibility:visible; }
.menu__inner{ display:grid; gap:4px; max-width:var(--maxw); margin-inline:auto; width:100%; }
.menu__inner > a{
  display:flex; align-items:baseline; gap:18px; padding:13px 0;
  font-size:clamp(1.8rem,8vw,2.7rem); font-weight:700; letter-spacing:-.04em;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out);
}
.is-menu .menu__inner > a{ opacity:1; transform:none; }
.is-menu .menu__inner > a:nth-child(1){ transition-delay:.06s; }
.is-menu .menu__inner > a:nth-child(2){ transition-delay:.12s; }
.is-menu .menu__inner > a:nth-child(3){ transition-delay:.18s; }
.is-menu .menu__inner > a:nth-child(4){ transition-delay:.24s; }
.is-menu .menu__inner > a:nth-child(5){ transition-delay:.30s; }
.menu__inner > a i{
  font-family:var(--mono); font-style:normal; font-size:.75rem;
  color:var(--accent); letter-spacing:.1em;
}
.menu__foot{
  display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:32px;
  font-family:var(--latin); font-size:.8125rem; color:var(--ink-3);
  opacity:0; transition:opacity .5s var(--e-out) .34s;
}
.is-menu .menu__foot{ opacity:1; }
.menu__foot a:hover{ color:var(--accent); }

/* =========================================================================
   HERO — scroll-scrubbed sensor field
   ========================================================================= */
.hero{ position:relative; }
.hero__track{ height:340vh; }
.hero__stage{
  position:sticky; inset-block-start:0;
  height:100vh; height:100svh;
  overflow:hidden; display:grid; isolation:isolate;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero__vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 75% at 50% 42%, transparent 30%, rgba(8,9,11,.72) 78%, var(--bg) 100%),
    linear-gradient(to bottom, rgba(8,9,11,.92) 0%, transparent 26%, transparent 62%, var(--bg) 97%);
}
.hero__content{
  position:relative; z-index:3; align-self:center; padding-top:40px;
  max-width:min(100%,1180px); will-change:transform, opacity;
}
.hero__eyebrow{ margin-bottom:clamp(16px,2.2vw,28px); }
.hero__title{ max-width:14ch; margin-bottom:clamp(20px,2.6vw,32px); }
.hero__lede{ max-width:50ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3.4vw,42px); }

.hud{
  position:absolute; z-index:3;
  inset-inline-end:var(--gut); inset-block-start:50%; transform:translateY(-50%);
  width:215px;
  border-inline-start:1px solid var(--line);
  padding-inline-start:18px;
}
.hud__title{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-4); margin-bottom:14px;
}
html[lang="ar"] .hud__title{ font-family:var(--arabic); font-size:.75rem; letter-spacing:normal; text-transform:none; }
.hud__list{ display:grid; gap:11px; }
.hud__list li{
  display:flex; align-items:baseline; gap:10px;
  font-size:.75rem; color:var(--ink-4);
  transition:color .5s var(--e-out);
}
.hud__list li i{ font-family:var(--mono); font-style:normal; opacity:.7; }
.hud__list li.is-on{ color:var(--ink-2); }
.hud__list li.is-cur{ color:var(--accent); }

.hero__cue{
  position:absolute; z-index:3; inset-inline-start:50%; inset-block-end:24px;
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:9px;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-4);
  transition:opacity .5s var(--e-out);
}
html[lang="ar"] .hero__cue{ font-family:var(--arabic); letter-spacing:normal; font-size:.75rem; }
.hero__cue i{
  display:block; width:1px; height:34px;
  background:linear-gradient(to bottom, var(--accent), transparent);
  animation:cue 2.2s var(--e-io) infinite; transform-origin:top;
}
@keyframes cue{
  0%   { transform:scaleY(0); opacity:0; }
  35%  { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1) translateY(34px); opacity:0; }
}

/* =========================================================================
   TICKER
   ========================================================================= */
.ticker{
  border-block:1px solid var(--line); background:var(--bg-1);
  overflow:hidden; padding-block:13px; position:relative; z-index:2;
}
.ticker__row{ display:flex; width:max-content; animation:marq 46s linear infinite; }
.ticker__set{ display:flex; flex:none; }
.ticker__set > span{
  display:inline-flex; align-items:center; gap:9px; padding-inline:24px;
  font-size:.75rem; color:var(--ink-3); white-space:nowrap;
}
.ticker__set b{ width:4px; height:4px; border-radius:50%; background:var(--accent); flex:none; }
@keyframes marq{ to{ transform:translateX(-50%); } }
[dir="rtl"] .ticker__row{ animation-name:marqRtl; }
@keyframes marqRtl{ to{ transform:translateX(50%); } }

/* =========================================================================
   SECTION HEADS
   ========================================================================= */
.sechead{ display:grid; gap:20px; margin-bottom:clamp(48px,6.5vw,88px); max-width:1000px; }
.sechead .h2{ max-width:19ch; }
.sechead__note{ color:var(--ink-2); max-width:56ch; font-size:1.02rem; }

/* =========================================================================
   CATEGORIES
   ========================================================================= */
.cats{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.cat{
  grid-column:span 2;
  display:grid; gap:0;
  border:1px solid var(--line); border-radius:14px;
  background:var(--bg-1); overflow:hidden;
  transition:border-color .5s var(--e-out), transform .6s var(--e-out);
}
.cat--wide{ grid-column:span 3; }
.cat:hover{ border-color:rgba(var(--accent-rgb),.45); transform:translateY(-3px); }

/* catalogue photography is shot on white, so it gets a light plate too */
.cat__plate{
  display:grid; place-items:center;
  background:var(--plate);
  aspect-ratio:16/10; padding:22px;
  overflow:hidden;
}
.cat__plate img{
  width:auto; max-height:100%; object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .8s var(--e-out);
}
.cat:hover .cat__plate img{ transform:scale(1.045); }

.cat__meta{ display:grid; gap:9px; padding:clamp(20px,2.4vw,30px); }
.cat__idx{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em; color:var(--ink-4); }
.cat__name{ font-size:1.18rem; font-weight:700; letter-spacing:-.025em; line-height:1.3; }
.cat__desc{ font-size:.875rem; color:var(--ink-3); line-height:1.6; }

/* =========================================================================
   PRODUCT PRICE LIST
   ========================================================================= */
.products{ background:linear-gradient(to bottom, var(--bg), var(--bg-1) 40%, var(--bg)); }
.plist{ display:grid; gap:clamp(38px,4.6vw,64px); }
.pgroup__title{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:12px;
  font-size:1.06rem; font-weight:700; letter-spacing:-.02em;
  padding-bottom:14px; margin-bottom:4px;
  border-bottom:1px solid var(--line-2);
}
.pgroup__title i{
  font-family:var(--latin); font-style:normal; font-size:.75rem; font-weight:500;
  letter-spacing:.08em; color:var(--ink-4); text-transform:uppercase;
}
.prods{ display:grid; }
.prod{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;
  align-items:baseline; gap:14px 24px;
  padding-block:17px;
  border-bottom:1px solid var(--line);
  transition:background .35s ease;
}
.prod:hover{ background:rgba(255,255,255,.022); }
.prod__name{ font-size:.98rem; font-weight:600; letter-spacing:-.015em; }
.prod__spec{ font-size:.8125rem; color:var(--ink-3); }
.prod__price{
  display:inline-flex; align-items:baseline; gap:8px;
  font-family:var(--latin); justify-self:end; white-space:nowrap;
}
.prod__price b{ font-size:1.06rem; font-weight:700; letter-spacing:-.02em; color:var(--accent); }
.prod__price s{ font-size:.8125rem; color:var(--ink-4); text-decoration-thickness:1px; }
.prod__price em{ font-style:normal; font-size:.75rem; color:var(--ink-3); font-family:var(--sans); }

.plist__cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px;
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--line-2);
}
.plist__note{ font-size:.8125rem; color:var(--ink-4); }

/* =========================================================================
   HOW TO ORDER — sticky viz + scrolling steps
   ========================================================================= */
.process{
  padding-block:var(--sect);
  background:linear-gradient(to bottom, var(--bg), var(--bg-1) 18%, var(--bg-1) 82%, var(--bg));
  border-block:1px solid var(--line);
}
.process__grid{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(40px,7vw,120px); align-items:start;
}
.process__sticky{ position:sticky; top:clamp(96px,16vh,168px); display:grid; gap:24px; }
.stepviz{ position:relative; width:min(100%,300px); aspect-ratio:1; }
.stepviz__num{
  position:absolute; inset-inline-start:0; top:-6px; z-index:2;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; color:var(--accent);
}
.stepviz__art{ width:100%; height:100%; color:var(--ink-4); }
.sv{ opacity:0; transition:opacity .6s var(--e-out); }
.sv.is-on{ opacity:1; }
.sv__lock,.sv__sweep,.sv__pulse{ stroke:var(--accent); }
.sv__lock{ stroke-width:1.4; }
.sv.is-on .sv__sweep{ animation:sweep 4.5s linear infinite; transform-origin:100px 100px; }
@keyframes sweep{ to{ transform:rotate(360deg); } }
.sv.is-on .sv__pulse{ animation:pulseline 2.4s var(--e-io) infinite; }
@keyframes pulseline{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
.process__stickynote{ font-size:.9375rem; color:var(--ink-2); max-width:36ch; transition:opacity .4s var(--e-out); }

.steps{ display:grid; gap:clamp(60px,9vw,140px); }
.step{ border-top:1px solid var(--line); padding-top:26px; opacity:.34; transition:opacity .6s var(--e-out); }
.step.is-cur{ opacity:1; }
.step__kicker{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}
html[lang="ar"] .step__kicker{ font-family:var(--arabic); letter-spacing:normal; font-size:.8125rem; text-transform:none; }
.step__title{
  font-size:clamp(2rem,5vw,3.6rem); font-weight:700;
  letter-spacing:-.042em; line-height:1; margin-bottom:18px;
}
.step__body{ color:var(--ink-2); max-width:48ch; font-size:1.02rem; }
.step__list{ display:grid; gap:11px; margin-top:24px; }
.step__list li{ position:relative; padding-inline-start:22px; font-size:.875rem; color:var(--ink-3); }
.step__list li::before{
  content:""; position:absolute; inset-inline-start:0; top:.68em;
  width:9px; height:1px; background:var(--accent); opacity:.7;
}

/* =========================================================================
   STATEMENT
   ========================================================================= */
.statement{ position:relative; overflow:hidden; padding-block:clamp(110px,18vw,240px); text-align:center; }
.statement__bg{
  position:absolute; inset:-20% 0;
  background:
    radial-gradient(58% 46% at 50% 50%, rgba(var(--accent-rgb),.11), transparent 68%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 4px);
  will-change:transform;
}
.statement__text{
  position:relative; font-size:clamp(2.1rem,5.8vw,4.9rem);
  max-width:21ch; margin-inline:auto; font-weight:700; line-height:1.06;
}
.statement__by{ position:relative; margin-top:30px; font-size:.8125rem; color:var(--ink-4); }

/* =========================================================================
   WHY US
   ========================================================================= */
.trust{ border-top:1px solid var(--line); }
.trust__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(44px,6.5vw,100px); align-items:start;
}
.trust__lead{ display:grid; gap:22px; justify-items:start; }
.trust__lead .h2{ max-width:14ch; }
.trust__copy{ color:var(--ink-2); max-width:50ch; }

.pillars{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-inline-start:1px solid var(--line); }
.pillar{
  padding:clamp(22px,2.5vw,32px);
  border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative;
}
.pillar::before{
  content:""; position:absolute; inset-inline-start:-1px; inset-block:0; width:1px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .6s var(--e-out);
}
.pillar:hover::before{ transform:scaleY(1); }
.pillar h3{ font-size:1.0625rem; font-weight:700; letter-spacing:-.022em; margin-bottom:9px; }
.pillar p{ font-size:.875rem; color:var(--ink-3); line-height:1.62; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact{ border-top:1px solid var(--line); background:linear-gradient(to bottom, var(--bg), var(--bg-1)); }
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(44px,6.5vw,100px); align-items:start;
}
.contact__lead{ display:grid; gap:22px; justify-items:start; }
.contact__lead .h2{ max-width:15ch; }
.contact__copy{ color:var(--ink-2); max-width:46ch; }
.contact__actions{ display:flex; flex-wrap:wrap; gap:12px; }

.contact__meta{
  display:grid; grid-template-columns:1fr 1fr; gap:28px 32px;
  padding:clamp(26px,3vw,38px);
  border:1px solid var(--line); border-radius:14px; background:var(--bg-2);
}
.contact__meta dt{ font-size:.75rem; color:var(--ink-4); margin-bottom:7px; }
.contact__meta dd{ font-size:.9375rem; color:var(--ink-2); line-height:1.55; }
.contact__meta a{ color:var(--ink); box-shadow:inset 0 -1px 0 0 var(--line-2); transition:box-shadow .3s, color .3s; }
.contact__meta a:hover{ color:var(--accent); box-shadow:inset 0 -1px 0 0 var(--accent); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ border-top:1px solid var(--line); padding-top:clamp(60px,7.5vw,100px); background:var(--bg); overflow:hidden; }
.footer__grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(34px,4vw,60px);
}
.footer__brand{ display:grid; gap:16px; align-content:start; justify-items:start; }
.footer__tag{ font-size:.875rem; color:var(--ink-3); max-width:36ch; line-height:1.65; }
.footer__status{ display:flex; align-items:center; gap:8px; font-size:.75rem; color:var(--ink-3); }
.footer__col{ display:grid; gap:11px; align-content:start; }
.footer__col h4{ font-size:.75rem; color:var(--ink-4); font-weight:600; margin-bottom:5px; }
.footer__col a,.footer__col p{ font-size:.875rem; color:var(--ink-2); line-height:1.55; }
.footer__col a{ width:fit-content; transition:color .3s ease; }
.footer__col a:hover{ color:var(--accent); }

.footer__word{
  margin-top:clamp(56px,8vw,110px);
  font-family:var(--latin);
  font-size:clamp(3.2rem,15.2vw,14.6rem);
  font-weight:700; letter-spacing:-.055em; line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.085);
  text-align:center; user-select:none; white-space:nowrap; direction:ltr;
}
.footer__word span{ -webkit-text-stroke:1px rgba(var(--accent-rgb),.34); }

.footer__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 26px;
  border-top:1px solid var(--line);
  margin-top:clamp(32px,4vw,52px); padding-block:24px 28px;
  font-size:.8125rem; color:var(--ink-4);
}
.totop{ display:inline-flex; gap:8px; align-items:center; transition:color .3s; }
.totop:hover{ color:var(--ink-2); }
.totop i{ font-style:normal; transition:transform .45s var(--e-out); }
.totop:hover i{ transform:translateY(-3px); }

/* =========================================================================
   FLOATING WHATSAPP
   ========================================================================= */
.wafab{
  position:fixed; z-index:95;
  inset-inline-end:clamp(16px,3vw,30px); inset-block-end:clamp(16px,3vw,30px);
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 12px 32px -10px rgba(var(--accent-rgb),.7);
  transform:translateY(90px) scale(.85); opacity:0;
  transition:transform .6s var(--e-out), opacity .5s var(--e-out), box-shadow .4s;
}
.wafab.is-on{ transform:none; opacity:1; }
.wafab:hover{ box-shadow:0 16px 40px -10px rgba(var(--accent-rgb),.9); }

/* =========================================================================
   REVEALS (only when JS is present)
   ========================================================================= */
.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--e-out) var(--d,0ms), transform .85s var(--e-out) var(--d,0ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

.js [data-split] .w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.12em; margin-bottom:-.12em;
}
html[lang="ar"].js [data-split] .w{ padding-bottom:.26em; margin-bottom:-.26em; }
.js [data-split] .wi{
  display:inline-block; transform:translateY(108%);
  transition:transform .95s var(--e-out) var(--d,0ms);
}
.js [data-split].is-in .wi{ transform:none; }

/* rescued content (the viewport jumped past it) simply appears */
.js .no-anim,
.js .no-anim .wi{ transition:none !important; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .cats{ grid-template-columns:repeat(4,1fr); }
  .cat,.cat--wide{ grid-column:span 2; }
  .hud{ display:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__end .btn{ display:none; }
  .burger{ display:block; }
  .process__grid{ grid-template-columns:1fr; gap:48px; }
  .process__sticky{ position:static; }
  .stepviz{ width:min(100%,200px); }
  .trust__grid,.contact__grid{ grid-template-columns:1fr; }
  .hero__track{ height:290vh; }
  .strip__hours{ display:none; }
}

@media (max-width:640px){
  .cats{ grid-template-columns:1fr; }
  .cat,.cat--wide{ grid-column:span 1; }
  .pillars{ grid-template-columns:1fr; }
  .contact__meta{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bar{ justify-content:flex-start; }
  .grain{ display:none; }
  .hero__track{ height:250vh; }
  .brand__logo{ height:30px; padding:5px 10px; }
  .nav__inner{ height:64px; }

  /* price rows stack: name over spec, price on its own line */
  .prod{ grid-template-columns:1fr auto; gap:4px 16px; }
  .prod__name{ grid-column:1; }
  .prod__price{ grid-column:2; grid-row:1 / span 2; align-self:center; }
  .prod__spec{ grid-column:1; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .boot{ display:none; }
  .js .reveal{ opacity:1; transform:none; }
  .js [data-split] .wi{ transform:none; }
  .hero__track{ height:130vh; }
  .hero__cue{ display:none; }
  .step{ opacity:1; }
  .wafab{ opacity:1; transform:none; }
}