/* ==========================================================================
   Smart Way — Design System
   Palette + motifs derived from the SW coin logo (deep navy, electric blue
   rim, cyan circuit traces, signal arcs).
   Built with CSS logical properties so Arabic (RTL) and English (LTR)
   share one stylesheet.
   ========================================================================== */

:root{
  /* --- Brand ------------------------------------------------------------ */
  --rim:       #1478E0;   /* the coin rim — primary brand blue */
  --rim-deep:  #0B4D96;
  --arc:       #1E7FD4;   /* signal blue, readable on light */
  --trace:     #7EE0FF;   /* circuit cyan — dark zones only */
  --gold:      #D9A233;   /* warm accent for the main call to action */
  --gold-2:    #EBB945;

  --void:      #04070E;   /* deep ground, used by the dark bands */
  --void-2:    #070C17;
  --deck:      #0A1220;
  --deck-2:    #0E1A2E;

  /* --- Semantic surfaces ------------------------------------------------
     Components read these, never raw colours. A `.dark` container
     re-declares them, so every component flips automatically.          */
  --page:      #FFFFFF;   /* page ground */
  --page-2:    #F3F7FC;   /* alternating band */
  --card:      #FFFFFF;   /* raised card */
  --card-2:    #F7FAFD;
  --plate:     #EEF3F9;   /* image plate */

  --text:      #0D1B30;   /* headings and body */
  --muted:     #55677F;
  --dim:       #7B8CA5;

  --line:      rgba(13,27,48,.12);
  --line-soft: rgba(13,27,48,.07);
  --glow:      rgba(20,120,224,.28);
  --shadow:    0 18px 40px -28px rgba(13,27,48,.45);
  --shadow-lg: 0 26px 60px -34px rgba(13,27,48,.5);

  /* --- Type ------------------------------------------------------------- */
  --f-ar:   "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-en:   "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-body: var(--f-ar);

  /* --- Layout ----------------------------------------------------------- */
  --wrap: 1220px;
  --gut: 24px;
  --nav-h: 78px;
  --r: 14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Dark zones
   The header, hero, page headers, feature bands, CTA and footer keep the
   deep navy. Redeclaring the surface tokens flips every nested component
   without a single component-level override.
   ========================================================================== */
.dark{
  --page:      var(--void);
  --page-2:    var(--void-2);
  --card:      rgba(14,26,46,.9);
  --card-2:    rgba(8,13,24,.9);
  --plate:     #E7ECF3;

  --arc:       #4FB4FF;
  --text:      #E7F0FF;
  --muted:     #8DA2C0;
  --dim:       #5C749B;

  --line:      rgba(103,168,255,.15);
  --line-soft: rgba(103,168,255,.08);
  --shadow:    0 20px 44px -26px rgba(0,0,0,.9);
  --shadow-lg: 0 26px 56px -30px rgba(0,0,0,.95);

  background:var(--page);
  color:var(--text);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* `clip` contains the off-canvas drawer without creating a scroll port,
     so position:sticky on the header keeps working (overflow:hidden would
     break it). */
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] body{ --f-body: var(--f-en); line-height:1.7; }

img,svg{ max-width:100%; height:auto; display:block; }
/* <picture> wraps most images here. Left as a box it becomes the grid/flex
   item, so height:100% on the <img> resolves against an auto-height parent
   and the image overflows its frame. display:contents removes the wrapper
   box so the <img> itself is the item. */
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; line-height:1.28; font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--rim); color:#fff; }

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

/* Page-wide ambient field: the coin's glow bleeding into the ground */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  background:var(--page);
}
/* Faint PCB grid */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1000px 700px at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(1000px 700px at 50% 0%, #000 30%, transparent 78%);
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.wrap{ width:min(var(--wrap), 100% - (var(--gut)*2)); margin-inline:auto; }
.section{ padding-block:104px; position:relative; }
.section--tight{ padding-block:72px; }
.section--alt{ background:var(--page-2); }
/* A dark band. `.dark` supplies the surface tokens; this only adds the
   faint circuit grid that belongs to the deep-navy zones. */
.section--dark{ position:relative; overflow:hidden; }
.section--dark::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(760px 460px at 50% 50%, #000 20%, transparent 76%);
  -webkit-mask-image:radial-gradient(760px 460px at 50% 50%, #000 20%, transparent 76%);
}
.section--dark > *{ position:relative; z-index:1; }

.grid{ display:grid; gap:22px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

/* ==========================================================================
   Type components
   ========================================================================== */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--arc);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-block-end:16px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:linear-gradient(90deg, transparent, var(--arc));
  flex:none;
}
html[dir="rtl"] .eyebrow::before{ background:linear-gradient(270deg, transparent, var(--arc)); }

.h-xl{ font-size:clamp(2.1rem, 5.2vw, 3.9rem); line-height:1.14; letter-spacing:-.025em; }
.h-lg{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing:-.02em; }
.h-md{ font-size:clamp(1.25rem, 2vw, 1.55rem); }
.lead{ font-size:clamp(1rem, 1.5vw, 1.13rem); color:var(--muted); max-width:66ch; }
.muted{ color:var(--muted); }

.sec-head{ max-width:760px; margin-block-end:56px; }
.sec-head .h-lg{ margin-block-end:14px; }

/* Gradient word — used once per heading, max */
.hi{
  background:linear-gradient(100deg, var(--arc), var(--trace) 55%, var(--rim));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600; font-size:15px;
  border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform .25s var(--ease); }
html[dir="rtl"] .btn svg{ transform:scaleX(-1); }

/* Primary CTA uses the warm accent so it separates from the blue imagery.
   Swap --gold/--gold-2 back to --rim/#2C93F5 for an all-blue treatment. */
.btn--primary{
  background:linear-gradient(135deg, var(--gold), var(--gold-2));
  color:#241703;
  box-shadow:0 8px 24px -10px rgba(217,162,51,.7), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(217,162,51,.85), inset 0 1px 0 rgba(255,255,255,.5); }
.btn--primary:hover svg{ transform:translateX(3px); }
html[dir="rtl"] .btn--primary:hover svg{ transform:scaleX(-1) translateX(3px); }

.btn--ghost{ border-color:var(--line); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--arc); color:var(--arc); background:rgba(20,120,224,.07); transform:translateY(-2px); }
.dark .btn--ghost{ background:rgba(4,7,14,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.dark .btn--ghost:hover{ background:rgba(79,180,255,.16); }

.btn--sm{ padding:10px 20px; font-size:14px; }

/* ==========================================================================
   Header
   ========================================================================== */
/* Skip link — visually hidden until focused.
   An off-canvas `inset-inline-start:-9999px` resolves to the RIGHT in RTL and
   stretches the document sideways, so clip the element instead of moving it. */
.skip{
  position:fixed;
  inset-block-start:0; inset-inline-start:0;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.skip:focus{
  position:fixed;
  inset-block-start:12px; inset-inline-start:12px;
  width:auto; height:auto; margin:0; padding:12px 22px;
  clip-path:none;
  z-index:200;
}

.topbar{
  border-block-end:1px solid var(--line-soft);
  background:var(--void);
  font-size:13px;
  color:var(--muted);
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:42px; flex-wrap:wrap; }
.topbar a{ display:inline-flex; align-items:center; gap:7px; transition:color .2s; }
.topbar a:hover{ color:var(--arc); }
.topbar svg{ width:14px; height:14px; opacity:.7; }
.topbar__set{ display:flex; align-items:center; gap:22px; }

.site-head{
  position:sticky; top:0; z-index:80;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:rgba(4,7,14,.9);
  border-block-end:1px solid var(--line-soft);
  transition:box-shadow .3s, background .3s;
}
.site-head.is-stuck{ box-shadow:0 12px 40px -22px rgba(0,0,0,.95); background:rgba(4,7,14,.95); }

.nav{ display:flex; align-items:center; gap:26px; min-height:var(--nav-h); }

.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand img{ width:46px; height:46px; filter:drop-shadow(0 0 14px rgba(79,180,255,.45)); }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{ font-weight:700; font-size:19px; letter-spacing:-.01em; }
.brand__tag{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--arc); }
html[dir="rtl"] .brand__tag{ letter-spacing:0; font-family:var(--f-ar); font-size:11px; }

.nav__links{ display:flex; align-items:center; gap:4px; margin-inline-start:auto; }
.nav__links a{
  position:relative;
  padding:9px 14px;
  border-radius:8px;
  font-size:15px; font-weight:500;
  color:var(--muted);
  transition:color .2s, background .2s;
}
.nav__links a:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.nav__links a.is-active{ color:var(--text); }
.nav__links a.is-active::after{
  content:"";
  position:absolute; inset-inline:14px; bottom:2px; height:2px;
  background:linear-gradient(90deg, var(--rim), var(--trace));
  border-radius:2px;
}

.nav__act{ display:flex; align-items:center; gap:10px; flex:none; }

.lang-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--f-mono);
  font-size:12.5px; font-weight:600; letter-spacing:.06em;
  color:var(--text);
  transition:border-color .2s, background .2s, color .2s;
}
.lang-btn:hover{ border-color:var(--arc); background:rgba(79,180,255,.1); color:var(--arc); }
.lang-btn svg{ width:14px; height:14px; }

.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:11px; }
.burger span{ display:block; width:19px; height:2px; background:var(--text); border-radius:2px; position:relative; transition:.3s var(--ease); }
.burger span::before,.burger span::after{ content:""; position:absolute; inset-inline-start:0; width:19px; height:2px; background:var(--text); border-radius:2px; transition:.3s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger.is-open span{ background:transparent; }
.burger.is-open span::before{ top:0; transform:rotate(45deg); }
.burger.is-open span::after{ top:0; transform:rotate(-45deg); }

/* Mobile drawer */
.drawer{
  position:fixed; inset-block:0; inset-inline-end:0;
  width:min(340px, 86vw);
  background:linear-gradient(180deg, var(--deck), var(--void));
  border-inline-start:1px solid var(--line);
  z-index:95;
  padding:26px 24px;
  transition:transform .38s var(--ease);
  overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
}
/* Slide direction lives on <html> so only two rules ever touch `transform`.
   Previously `html[dir="rtl"] .drawer` (0,2,1) outranked `.drawer.is-open`
   (0,2,0), so the drawer could never open in Arabic. */
html{ --drawer-dir: 1; }
html[dir="rtl"]{ --drawer-dir: -1; }
.drawer{ transform:translateX(calc(110% * var(--drawer-dir))); }
.drawer.is-open{ transform:translateX(0); }
.drawer a{ padding:14px 12px; border-radius:10px; font-size:16px; font-weight:500; border-block-end:1px solid var(--line-soft); transition:background .2s, color .2s; }
.drawer a:not(.btn):hover,
.drawer a:not(.btn).is-active{ color:var(--arc); background:rgba(79,180,255,.07); }
.drawer .btn{ margin-block-start:16px; justify-content:center; }
.scrim{ position:fixed; inset:0; background:rgba(2,4,9,.72); backdrop-filter:blur(3px); z-index:90; opacity:0; visibility:hidden; transition:.34s; }
.scrim.is-open{ opacity:1; visibility:visible; }

/* ==========================================================================
   SIGNATURE — the live circuit field
   PCB traces with light pulses travelling along them, echoing the logo.
   ========================================================================== */
.circuit{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
  mask-image:linear-gradient(180deg, #000 55%, transparent);
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent);
}
.circuit svg{ width:100%; height:100%; }
.circuit .t{ fill:none; stroke:var(--line); stroke-width:1.2; }
.circuit .node{ fill:var(--void); stroke:rgba(103,168,255,.35); stroke-width:1.2; }
.circuit .pulse{
  fill:none;
  stroke:var(--trace);
  stroke-width:2;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px var(--glow));
  stroke-dasharray:34 1200;
  animation:flow 4.2s linear infinite;
}
@keyframes flow{
  from{ stroke-dashoffset:1234; }
  to  { stroke-dashoffset:0; }
}
.circuit .pulse:nth-of-type(2){ animation-duration:5.6s; animation-delay:-1.4s; stroke:var(--arc); }
.circuit .pulse:nth-of-type(3){ animation-duration:6.8s; animation-delay:-3.1s; }
.circuit .pulse:nth-of-type(4){ animation-duration:5.1s; animation-delay:-2.2s; stroke:var(--arc); }

/* Signal arcs from the logo, reused as a section rhythm marker */
.arcs{ display:inline-flex; align-items:flex-end; gap:4px; height:16px; }
.arcs i{ display:block; width:3px; border-radius:2px; background:var(--rim); opacity:.35; animation:sig 1.9s var(--ease) infinite; }
.arcs i:nth-child(1){ height:5px;  animation-delay:0s; }
.arcs i:nth-child(2){ height:9px;  animation-delay:.18s; }
.arcs i:nth-child(3){ height:13px; animation-delay:.36s; }
.arcs i:nth-child(4){ height:16px; animation-delay:.54s; }
@keyframes sig{ 0%,70%,100%{ opacity:.28; } 22%{ opacity:1; background:var(--trace); } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; padding-block:clamp(66px, 9vw, 116px) clamp(70px, 8vw, 108px); overflow:hidden; }
.hero__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }

.hero h1{ margin-block-end:22px; }
.hero .lead{ margin-block-end:34px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* legacy stat strip — still used on inner pages */
.hero__stat b{ display:block; direction:ltr; unicode-bidi:isolate; font-family:var(--f-mono); font-size:clamp(1.5rem,3vw,2rem); font-weight:600; color:var(--text); line-height:1.2; }
.hero__stat span{ font-size:13px; color:var(--muted); }

/* The coin: logo floating in its own light */
.coin{ position:relative; display:grid; place-items:center; }
.coin__glow{
  position:absolute; width:120%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(20,120,224,.34), rgba(20,120,224,.07) 45%, transparent 68%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.09); opacity:1; } }
.coin__ring{
  position:absolute; width:88%; aspect-ratio:1; border-radius:50%;
  border:1px dashed rgba(103,168,255,.22);
  animation:spin 46s linear infinite;
}
.coin__ring--2{ width:106%; border-style:solid; border-color:rgba(103,168,255,.1); animation-duration:70s; animation-direction:reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.coin img{
  position:relative; z-index:2;
  width:min(380px, 76%);
  filter:drop-shadow(0 26px 54px rgba(0,0,0,.75)) drop-shadow(0 0 34px rgba(79,180,255,.28));
  animation:float 8s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.page-head{ position:relative; padding-block:clamp(58px,7vw,88px) clamp(44px,5vw,64px); overflow:hidden; border-block-end:1px solid var(--line-soft); }
.page-head__in{ position:relative; z-index:2; }
.page-head h1{ margin-block-end:14px; }
.crumbs{ font-family:var(--f-mono); font-size:12px; color:var(--dim); display:flex; gap:9px; align-items:center; margin-block-start:20px; letter-spacing:.05em; }
.crumbs a:hover{ color:var(--arc); }
.crumbs span{ opacity:.45; }
html[dir="rtl"] .crumbs{ font-family:var(--f-ar); font-size:13px; }

/* ==========================================================================
   Photography
   Real data-centre imagery sits UNDER the circuit field and a dark veil, so
   the traces still read and text keeps contrast. Layering, back to front:
   photo (0) → veil (1) → circuit (1) → content (2)
   ========================================================================== */
/* Oversized on purpose: the parallax shifts this layer vertically, and the
   extra height keeps its edges outside the section at every scroll offset. */
.bg-photo{
  position:absolute;
  inset-inline:0;
  inset-block-start:-14%;
  width:100%; height:128%;
  object-fit:cover;
  z-index:0;
  opacity:.52;
  filter:saturate(.85) contrast(1.04);
  pointer-events:none;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .bg-photo{ inset-block-start:0; height:100%; transform:none !important; }
}
.veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,7,14,.55), rgba(4,7,14,.42) 45%, var(--void)),
    linear-gradient(to var(--veil-dir, left), rgba(4,7,14,.92) 8%, rgba(4,7,14,.42) 55%, rgba(4,7,14,.08));
}
html[dir="ltr"] .veil{ --veil-dir: right; }
.hero .circuit,
.page-head .circuit{ z-index:1; }
.hero__in,
.page-head__in{ z-index:2; }

/* Framed photo — a thin lit rim echoing the coin */
.shot{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-lg);
}
.shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.shot::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,120,224,.1), transparent 40%, rgba(4,7,14,.55));
  pointer-events:none;
}
.shot--tall img{ aspect-ratio:4/5; }
.shot--wide img{ aspect-ratio:16/9; }
.shot:hover img{ transform:scale(1.04); }

/* Always sits on a dark gradient over the photo, so its colours are fixed
   rather than inherited — otherwise it turns dark-on-dark in light sections. */
.shot__cap{
  position:absolute; inset-block-end:0; inset-inline:0;
  z-index:2;
  padding:20px 22px;
  font-size:14px;
  color:#F2F7FF;
  background:linear-gradient(0deg, rgba(4,7,14,.94), rgba(4,7,14,.55) 55%, transparent);
}
.shot__cap b{ display:block; font-size:15.5px; margin-block-end:3px; color:#FFFFFF; }
.shot__cap span{ color:#B9C9E0; font-size:13.5px; }

/* Capability gallery — photo card per capability area */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/* Lay out sensibly while the photo library is still being filled */
.caps[data-items="1"]{ grid-template-columns:minmax(0,400px); justify-content:center; }
.caps[data-items="2"]{ grid-template-columns:repeat(2,minmax(0,440px)); justify-content:center; }
.caps[data-items="4"]{ grid-template-columns:repeat(2,1fr); }
/* Five cards: a 6-column grid lets three sit on top (2 cols each) and two
   below (3 cols each), so the final row reads as a choice rather than a
   leftover. */
.caps[data-items="5"]{ grid-template-columns:repeat(6,1fr); }
.caps[data-items="5"] > .cap{ grid-column:span 2; }
.caps[data-items="5"] > .cap:nth-child(4),
.caps[data-items="5"] > .cap:nth-child(5){ grid-column:span 3; }
.cap{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.cap:hover{ transform:translateY(-5px); border-color:rgba(20,120,224,.4); box-shadow:var(--shadow-lg); }
.cap .shot{ border:0; border-radius:0; box-shadow:none; }
.cap .shot img{ aspect-ratio:16/10; }
.cap__body{ padding:22px 24px 26px; }
.cap__body h3{ font-size:1.06rem; margin-block-end:9px; }
.cap__body p{ font-size:14.5px; color:var(--muted); line-height:1.7; }

@media (max-width:960px){
  .caps,.caps[data-items="5"]{ grid-template-columns:repeat(2,1fr); }
  .caps[data-items="5"] > .cap,
  .caps[data-items="5"] > .cap:nth-child(4),
  .caps[data-items="5"] > .cap:nth-child(5){ grid-column:auto; }
}
@media (max-width:600px){
  .caps,.caps[data-items="5"]{ grid-template-columns:1fr; }
  .caps[data-items="5"] > .cap{ grid-column:auto; }
}

/* Showcase strip */
.showcase{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:20px; }
.showcase .shot img{ aspect-ratio:1/1; }
.showcase .shot:first-child img{ aspect-ratio:auto; height:100%; min-height:320px; }

@media (max-width:960px){
  .showcase{ grid-template-columns:1fr 1fr; }
  .showcase .shot:first-child{ grid-column:1 / -1; }
  .showcase .shot:first-child img{ min-height:240px; aspect-ratio:16/9; }
}
@media (max-width:600px){
  .showcase{ grid-template-columns:1fr; }
  .bg-photo{ opacity:.4; }
}

/* ==========================================================================
   Smart-home products
   Vendor shots come on a light plate. Rather than fight that, the tile keeps
   a light surface so the product reads correctly, set into a dark card.
   ========================================================================== */
.prod-group{ margin-block-end:72px; }
.prod-group:last-child{ margin-block-end:0; }
.prod-group__head{ max-width:720px; margin-block-end:32px; }
.prod-group__head h2{ margin-block-end:12px; }

.prods{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* A group with only one or two products would leave most of the row empty,
   so its heading sits alongside the cards instead of above them. */
.prod-group[data-count="1"],
.prod-group[data-count="2"]{
  display:grid;
  grid-template-columns:1fr auto;
  gap:48px;
  align-items:center;
}
.prod-group[data-count="1"] .prod-group__head,
.prod-group[data-count="2"] .prod-group__head{ margin-block-end:0; }
.prod-group[data-count="1"] .prods,
.prod-group[data-count="2"] .prods{ grid-template-columns:repeat(auto-fit, minmax(0,290px)); }

.prod{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow);
  color:inherit; text-decoration:none;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.prod:hover{
  transform:translateY(-4px);
  border-color:rgba(20,120,224,.4);
  box-shadow:var(--shadow-lg);
}
/* The plate's height comes from aspect-ratio. Sizing the image with
   height:100% against an auto grid row is cyclic, so browsers fall back to
   auto and tall products overflow. Absolute positioning inside a
   position:relative box gives the image a definite containing block. */
.prod__plate{
  position:relative;
  background:var(--plate);
  aspect-ratio:4/3;
  overflow:hidden;
}
.prod__plate img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  padding:6%;
  transition:transform .5s var(--ease);
}
.prod:hover .prod__plate img{ transform:scale(1.05); }
.prod__body{ padding:16px 18px 20px; }
/* The card is a link now: shot and name only. Tagline, description and the
   vendor feature shots live on the product's own page under smart-home/. */
.prod__body{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.prod__body h3{ font-size:.98rem; margin:0; letter-spacing:0; }
.prod__more{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
  flex:none;
  opacity:0; transform:translateX(-4px);
  transition:opacity .25s, transform .25s;
}
html[dir="rtl"] .prod__more{
  font-family:var(--f-ar); letter-spacing:0; font-size:12.5px; text-transform:none;
  transform:translateX(4px);
}
.prod:hover .prod__more,
.prod:focus-visible .prod__more{ opacity:1; transform:none; }
/* Touch has no hover, so the cue stays visible there rather than never showing. */
@media (hover:none){ .prod__more{ opacity:1; transform:none; } }

@media (max-width:1080px){ .prods{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:960px){
  .prod-group[data-count="1"],
  .prod-group[data-count="2"]{ grid-template-columns:1fr; gap:28px; }
  .prod-group[data-count="1"] .prod-group__head,
  .prod-group[data-count="2"] .prod-group__head{ margin-block-end:0; }
}
@media (max-width:760px){
  .prods{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .prod-group[data-count="2"] .prods{ grid-template-columns:repeat(2,1fr); }
  /* One product in a two-column grid left an empty half beside it and squeezed
     the description into a ribbon. A lone card takes the full width. */
  .prod-group[data-count="1"] .prods{ grid-template-columns:1fr; }
  .prod__body{ padding:14px 14px 18px; }
  .prod-group{ margin-block-end:54px; }
}

/* ==========================================================================
   Partner logo marquee
   Sits directly under the hero. The track holds the logo set twice, so
   translating it by exactly -50% loops seamlessly.
   ========================================================================== */
.logos{ padding-block:38px 34px; background:var(--page-2); border-block-end:1px solid var(--line-soft); }
.logos__label{
  display:block; text-align:center;
  font-family:var(--f-mono);
  font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim);
  margin-block-end:24px;
}
html[dir="rtl"] .logos__label{ font-family:var(--f-ar); letter-spacing:0; font-size:13.5px; }

.logos__viewport{
  /* The strip is laid out LTR in both languages. Brand marks carry no reading
     order, and an RTL viewport right-aligns the over-wide track so it hangs off
     the left edge — the -50% scroll then walks it further left and empties the
     right-hand side. Setting the direction here, not on the track, is what
     actually anchors it. */
  direction:ltr;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.logos__track{
  display:flex;
  align-items:center;
  width:max-content;
  /* Duration scales with the number of marks so the strip keeps the same
     pixels-per-second however many partners the list grows to. */
  animation:logo-scroll 165s linear infinite;
}
/* Every mark gets the same box and is fitted inside it. Sizing on height
   alone made wide wordmarks (Sophos, Lenovo) tower over square partner
   badges (Milestone, Palo Alto), which read as a broken strip. */
.logos__tile{
  flex:none;
  position:relative;
  width:132px; height:48px;
  /* Spacing lives on the tile rather than as a flex gap: with a gap, the track
     is 64 tiles + 63 gaps, so -50% lands half a gap short and the loop jumps. */
  margin-inline-end:clamp(22px, 3vw, 44px);
}
.logos__tile img{
  /* Absolutely positioned so the 132x48 box is a definite containing block:
     a percentage height on a centred grid item collapses back to the image's
     own ratio, which let tall marks overflow the strip. */
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:.62;
  filter:saturate(.9);
  transition:opacity .3s, filter .3s;
}
.logos__tile:hover img{ opacity:1; filter:none; }
.logos__viewport:hover .logos__track{ animation-play-state:paused; }

@keyframes logo-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }


@media (max-width:600px){
  .logos{ padding-block:30px 26px; }
  .logos__tile{ width:104px; height:38px; margin-inline-end:20px; }
}

/* No motion: hold still and let the visitor scroll the strip by hand */
@media (prefers-reduced-motion:reduce){
  .logos__track{ animation:none; }
  .logos__viewport{ overflow-x:auto; }
}

/* ==========================================================================
   Services — listing grid and detail layout
   ========================================================================== */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

.svc-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.svc-card:hover{ transform:translateY(-5px); border-color:rgba(20,120,224,.4); box-shadow:var(--shadow-lg); }
.svc-card__media{ aspect-ratio:16/9; overflow:hidden; background:var(--plate); }
.svc-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc-card:hover .svc-card__media img{ transform:scale(1.05); }
/* fallback tile for services still waiting on a photo */
.svc-card__media--icon{ display:grid; place-items:center; background:linear-gradient(150deg, rgba(20,120,224,.12), rgba(20,120,224,.03)); }
.svc-card__media--icon .card__ico{ margin:0; }
.svc-card__body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.svc-card__body h3{ font-size:1.02rem; margin-block-end:9px; }
.svc-card__body p{ font-size:14px; color:var(--muted); line-height:1.65; flex:1; }
.svc-card__more{
  display:inline-block;
  margin-block-start:14px;
  font-size:13.5px; font-weight:600;
  color:var(--arc);
}
.svc-card__more::after{ content:" →"; }
html[dir="rtl"] .svc-card__more::after{ content:" ←"; }

/* --- detail page ---------------------------------------------------------- */
.page-head--slim{ padding-block:clamp(46px,5vw,68px) clamp(34px,4vw,48px); }

.svc-layout{ display:grid; grid-template-columns:1fr 330px; gap:56px; align-items:start; }

.svc-hero{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  margin-block-end:30px;
  background:var(--plate);
}
.svc-hero img{ width:100%; height:auto; display:block; }

.svc-title{ font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.02em; margin-block-end:14px; }
.svc-title::after{
  content:"";
  display:block; width:58px; height:3px; border-radius:2px;
  background:var(--gold);
  margin-block-start:14px;
}
.svc-lead{
  font-size:clamp(1.05rem,1.7vw,1.25rem);
  font-weight:600;
  line-height:1.55;
  color:var(--text);
  margin-block:22px 20px;
}
.svc-main > p{ color:var(--muted); font-size:15.5px; line-height:1.85; margin-block-end:16px; }

.svc-points{ margin-block:26px 0; display:grid; gap:2px; }
.svc-points li{
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card-2);
  margin-block-end:10px;
}
.svc-points h3{ font-size:.98rem; margin-block-end:6px; }
.svc-points p{ font-size:14.5px; color:var(--muted); line-height:1.7; margin:0; }

.svc-foot{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-block-start:36px;
  padding-block-start:28px;
  border-block-start:1px solid var(--line);
}

/* --- sidebar -------------------------------------------------------------- */
.svc-side{ position:sticky; inset-block-start:100px; }
.svc-side__title{
  font-family:var(--f-mono);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
  margin-block-end:18px;
}
html[dir="rtl"] .svc-side__title{ font-family:var(--f-ar); letter-spacing:0; font-size:14px; }
.svc-side__list{ border-block-start:1px solid var(--line); }
.svc-side__list li{ border-block-end:1px solid var(--line-soft); }
.svc-side__list a{
  display:block;
  padding:10px 2px;
  font-size:14.5px;
  color:var(--muted);
  transition:color .2s, padding .2s;
}
.svc-side__list a:hover{ color:var(--arc); padding-inline-start:6px; }
.svc-side__list a.is-current{ color:var(--gold); font-weight:600; }
.svc-side__cta{ display:grid; gap:10px; margin-block-start:26px; }
.svc-side__cta .btn{ justify-content:center; }

@media (max-width:1080px){
  .svc-grid{ grid-template-columns:repeat(3,1fr); }
  .svc-layout{ grid-template-columns:1fr 290px; gap:40px; }
}
@media (max-width:900px){
  .svc-layout{ grid-template-columns:1fr; gap:44px; }
  .svc-side{ position:static; }
}
@media (max-width:760px){ .svc-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:520px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc-card__body{ padding:16px 16px 18px; }
}

/* ==========================================================================
   Solutions — vendor cards grouped by category
   ========================================================================== */
.sol-group{ margin-block-end:72px; }
.sol-group:last-child{ margin-block-end:0; }
.sol-group__head{ max-width:760px; margin-block-end:30px; }
.sol-group__head h2{ margin-block-end:12px; }

.sol-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

.sol-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.sol-card:hover{ transform:translateY(-5px); border-color:rgba(20,120,224,.4); box-shadow:var(--shadow-lg); }

/* Vendor marks sit on a light plate, contained rather than cropped. */
.sol-card__logo{
  position:relative;
  aspect-ratio:16/7;
  background:var(--plate);
  overflow:hidden;
}
.sol-card__logo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  padding:12% 16%;
  transition:transform .4s var(--ease);
}
.sol-card:hover .sol-card__logo img{ transform:scale(1.04); }
.sol-card__logo--none{ display:grid; place-items:center; }
.sol-card__logo--none .card__ico{ margin:0; }

.sol-card__body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.sol-card__body h3{ font-size:1rem; margin-block-end:8px; }
.sol-card__body p{ font-size:13.5px; color:var(--muted); line-height:1.65; flex:1; }

/* Photo-led items (where the subject is a capability, not a single vendor) */
.sol-card__photo{
  position:relative;
  aspect-ratio:16/9;
  background:var(--plate);
  overflow:hidden;
}
.sol-card__photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.sol-card:hover .sol-card__photo img{ transform:scale(1.05); }

.sol-photo{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--plate);
}
.sol-photo img{ width:100%; height:auto; display:block; }

/* Vendor marks beneath a photo hero */
.sol-vendors{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:26px;
  padding:18px 22px;
  margin-block-end:30px;
  border:1px solid var(--line);
  border-block-start:0;
  border-end-start-radius:var(--r-lg);
  border-end-end-radius:var(--r-lg);
  background:var(--card-2);
}
.sol-vendors img{ height:26px; width:auto; opacity:.7; }
.sol-photo{ border-end-start-radius:0; border-end-end-radius:0; }

/* Detail page hero holds a logo, so keep it small and centred */
.sol-hero{
  display:grid; place-items:center;
  background:var(--plate);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:38px 30px;
  margin-block-end:30px;
}
.sol-hero img{ max-height:74px; width:auto; }

/* --------------------------------------------------------------------------
   Vendor product rows
   Used on a solution detail page when the vendor line is long enough that a
   card grid would crop the copy. Photo on one side, full description on the
   other; the plate stays light so vendor shots read correctly in both zones.
   -------------------------------------------------------------------------- */
.vprod-group{ margin-block-start:44px; }
.vprod-group__head{
  display:flex; align-items:baseline; gap:14px;
  padding-block-end:14px;
  border-block-end:1px solid var(--line);
  margin-block-end:8px;
}
.vprod-group__head h3{ font-size:1.18rem; margin:0; }
.vprod-group__head span{
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim);
}
html[dir="rtl"] .vprod-group__head span{ font-family:var(--f-ar); letter-spacing:0; font-size:13px; }

.vprod{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:28px;
  align-items:start;
  padding-block:26px;
  border-block-end:1px solid var(--line-soft);
}
.vprod:last-child{ border-block-end:0; }
.vprod__plate{
  position:relative;
  background:var(--plate);
  border:1px solid var(--line);
  border-radius:var(--r);
  aspect-ratio:1/1;
  overflow:hidden;
}
.vprod__plate img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  padding:12%;
}
/* Shown until a vendor photo is dropped into assets/img/products/ */
.vprod__plate--none{ display:grid; place-items:center; }
.vprod__plate--none .card__ico{ margin:0; }

.vprod__body h4{ font-size:1.02rem; margin:0 0 8px; letter-spacing:0; }
/* Model names are Latin in both languages. Left to the paragraph direction,
   a trailing ™ is a neutral character and jumps to the far side of the word
   ("™cnReach"), so the heading gets its own direction and is realigned. */
html[dir="rtl"] .vprod__body h4{ direction:ltr; text-align:right; }
.vprod__body p{ font-size:14.5px; color:var(--muted); line-height:1.75; margin:0; }
/* Cambium prints the leading letters of ePMP and cnReach in lower case */
.vprod__body h4 i{ font-style:normal; text-transform:lowercase; }

@media (max-width:640px){
  .vprod{ grid-template-columns:110px 1fr; gap:18px; padding-block:20px; }
}
/* On a narrow phone the copy column matters more than the shot, so the plate
   gives up width rather than squeezing the description into a ribbon. */
@media (max-width:480px){
  .vprod{ grid-template-columns:84px 1fr; gap:14px; }
  .vprod-group__head{ flex-wrap:wrap; gap:6px 12px; }
}

/* sidebar grouping */
.sol-side__group > a{ font-weight:600; color:var(--text); }
.sol-side__item > a{ padding-inline-start:16px; font-size:14px; }
html[dir="rtl"] .sol-side__item > a{ padding-inline-start:0; padding-inline-end:16px; }

@media (max-width:1080px){ .sol-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .sol-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:520px){ .sol-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  position:relative;
  padding:30px 26px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
/* trace that lights along the top edge on hover */
.card::before{
  content:"";
  position:absolute; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--trace), transparent);
  opacity:0; transition:opacity .35s;
}
.card:hover{ transform:translateY(-5px); border-color:rgba(20,120,224,.4); box-shadow:var(--shadow-lg); }
.card:hover::before{ opacity:1; }

.card__ico{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(150deg, rgba(20,120,224,.14), rgba(20,120,224,.05));
  border:1px solid rgba(20,120,224,.2);
  color:var(--arc);
  margin-block-end:20px;
  transition:transform .3s var(--ease), color .3s;
}
.card__ico svg{ width:24px; height:24px; }
.card:hover .card__ico{ transform:scale(1.06); color:var(--trace); }
.card h3{ font-size:1.08rem; margin-block-end:10px; }
.card p{ font-size:14.5px; color:var(--muted); line-height:1.7; }

/* Compact service tile */
.tile{
  display:flex; align-items:center; gap:14px;
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
  font-size:14.5px; font-weight:500;
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.tile:hover{ border-color:rgba(20,120,224,.4); background:rgba(20,120,224,.07); transform:translateX(4px); }
html[dir="rtl"] .tile:hover{ transform:translateX(-4px); }
.tile__d{ width:7px; height:7px; border-radius:50%; background:var(--rim); flex:none; box-shadow:0 0 9px var(--glow); }

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat{ background:var(--card); padding:34px 22px; text-align:center; }
.stat b{ display:block; direction:ltr; unicode-bidi:isolate; font-family:var(--f-mono); font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:600; color:var(--arc); line-height:1.15; letter-spacing:-.02em; }
.stat span{ font-size:13.5px; color:var(--muted); display:block; margin-block-start:7px; }

/* ==========================================================================
   Process — a real sequence, so numbering earns its place
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.step{ padding:0 22px; position:relative; }
.step:not(:last-child)::after{
  content:""; position:absolute; inset-block-start:19px; inset-inline-end:0;
  width:1px; height:calc(100% - 30px); background:var(--line);
}
.step__n{
  font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.12em;
  color:var(--gold);
  display:flex; align-items:center; gap:10px;
  margin-block-end:16px;
}
.step__n::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent); }
html[dir="rtl"] .step__n::after{ background:linear-gradient(270deg, var(--line), transparent); }
.step h3{ font-size:1.02rem; margin-block-end:9px; }
.step p{ font-size:14px; color:var(--muted); }

/* ==========================================================================
   Split feature
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.checks li{ display:flex; gap:13px; align-items:flex-start; padding-block:11px; border-block-end:1px solid var(--line-soft); font-size:15px; }
.checks li:last-child{ border-block-end:0; }
.checks svg{ width:19px; height:19px; color:var(--arc); flex:none; margin-block-start:4px; }

/* ==========================================================================
   Partners
   ========================================================================== */
.partners{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.partner{
  background:var(--card);
  min-height:96px;
  display:grid; place-items:center;
  padding:16px;
  font-family:var(--f-mono); font-size:14px; font-weight:600; letter-spacing:.02em;
  color:var(--dim);
  text-align:center;
  transition:color .28s, background .28s;
}
.partner:hover{ color:var(--arc); background:rgba(20,120,224,.07); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta{
  position:relative;
  padding:clamp(44px,6vw,68px) clamp(28px,5vw,60px);
  border:1px solid rgba(79,180,255,.24);
  border-radius:var(--r-lg);
  background:
    radial-gradient(700px 300px at 82% 0%, rgba(20,120,224,.3), transparent 66%),
    linear-gradient(150deg, #0E1A2E, #060B14);
  overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap;
}
.cta__txt{ max-width:600px; }
.cta h2{ margin-block-end:12px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start; }

.info{ display:flex; gap:16px; padding:20px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); margin-block-end:14px; transition:border-color .25s; }
.info:hover{ border-color:rgba(79,180,255,.35); }
.info__ico{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:11px; background:rgba(20,120,224,.12); border:1px solid rgba(20,120,224,.2); color:var(--arc); }
.info__ico svg{ width:19px; height:19px; }
.info h4{ font-size:14px; margin-block-end:4px; }
.info p,.info a{ font-size:14.5px; color:var(--muted); line-height:1.6; word-break:break-word; }
.info a:hover{ color:var(--arc); }

.form{ padding:32px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow); }
.field{ margin-block-end:18px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-block-end:8px; color:var(--text); }
.field label i{ color:var(--arc); font-style:normal; }
.field input,.field select,.field textarea{
  width:100%;
  padding:13px 15px;
  background:var(--page-2);
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--text);
  font-family:inherit; font-size:15px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--arc);
  background:var(--card);
  box-shadow:0 0 0 3px rgba(79,180,255,.13);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--dim); }
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--card); color:var(--text); }
.hp{ position:absolute; inset-inline-start:-9999px; opacity:0; height:0; overflow:hidden; }

.note{ display:none; padding:14px 16px; border-radius:11px; font-size:14px; margin-block-end:18px; }
.note.ok{ display:block; background:rgba(28,180,120,.12); border:1px solid rgba(28,180,120,.35); color:#66E0AE; }
.note.err{ display:block; background:rgba(224,60,60,.1); border:1px solid rgba(224,60,60,.32); color:#FF9090; }

.map{ margin-block-start:14px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.85); }
.map iframe{ width:100%; height:320px; border:0; display:block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{ border-block-start:1px solid var(--line); background:var(--void); margin-block-start:0; }
.foot__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:44px; padding-block:64px 46px; }
.foot__brand .brand{ margin-block-end:18px; }
.foot__brand p{ font-size:14.5px; color:var(--muted); max-width:34ch; }
.foot h5{ font-size:13px; font-family:var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text); margin-block-end:20px; }
html[dir="rtl"] .foot h5{ font-family:var(--f-ar); letter-spacing:0; font-size:15px; }
.foot ul li{ margin-block-end:11px; }
.foot ul a{ font-size:14.5px; color:var(--muted); transition:color .2s, padding .2s; }
.foot ul a:hover{ color:var(--arc); padding-inline-start:5px; }

.social{ display:flex; gap:10px; margin-block-start:20px; }
.social a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:11px; color:var(--muted); transition:.25s var(--ease); }
.social a:hover{ color:var(--trace); border-color:var(--arc); background:rgba(79,180,255,.1); transform:translateY(-2px); }
.social svg{ width:17px; height:17px; }

.foot__bar{
  border-block-start:1px solid var(--line-soft);
  padding-block:22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13.5px; color:var(--dim);
}
.iwt{ color:var(--muted); }
.iwt a{
  color:var(--arc);
  font-weight:600;
  border-block-end:1px solid rgba(79,180,255,.35);
  padding-block-end:1px;
  transition:color .2s, border-color .2s;
}
.iwt a:hover{ color:var(--trace); border-color:var(--trace); }

/* Back to top */
.to-top{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:70;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--rim), #2C93F5);
  color:#fff;
  box-shadow:0 10px 26px -8px rgba(20,120,224,.8);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:.32s var(--ease);
}
.to-top.is-on{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ transform:translateY(-3px); }
.to-top svg{ width:18px; height:18px; }

/* WhatsApp quick action */
.wa{
  position:fixed; inset-block-end:24px; inset-inline-start:24px; z-index:70;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:#22B455; color:#fff;
  box-shadow:0 10px 26px -8px rgba(34,180,85,.8);
  transition:transform .28s var(--ease);
}
.wa:hover{ transform:translateY(-3px) scale(1.05); }
.wa svg{ width:26px; height:26px; }

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

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .foot__top{ grid-template-columns:1fr 1fr; gap:38px; }
  .partners{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:38px; }
  .step:nth-child(2)::after{ display:none; }
}

@media (max-width:960px){
  :root{ --nav-h:70px; }
  .nav__links{ display:none; }
  .burger{ display:flex; margin-inline-start:auto; }
  .nav__act .btn{ display:none; }
  .hero__in{ grid-template-columns:1fr; gap:44px; }
  .coin{ order:-1; }
  .coin img{ width:min(280px,58%); }
  .split{ grid-template-columns:1fr; gap:38px; }
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .section{ padding-block:76px; }
}

@media (max-width:720px){
  .g-3,.g-2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .topbar__set:first-child{ display:none; }
  .topbar__in{ justify-content:center; }
  .hero__stat{ display:flex; align-items:baseline; gap:12px; }
  .cta{ flex-direction:column; align-items:flex-start; text-align:start; }
}

@media (max-width:600px){
  :root{ --gut:18px; }
  body{ font-size:15.5px; }
  /* The English tagline is wide in letterspaced mono — it would push the
     header past the viewport, so drop it from the bar (it stays in the footer). */
  .site-head .brand__tag{ display:none; }
  .site-head .brand{ min-width:0; }
  .site-head .brand__name{ font-size:17px; white-space:nowrap; }
  .nav{ gap:12px; }
  .section{ padding-block:62px; }
  .sec-head{ margin-block-end:38px; }
  .g-4{ grid-template-columns:1fr; }
  .partners{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; row-gap:30px; }
  .step{ padding:0; } .step::after{ display:none !important; }
  .foot__top{ grid-template-columns:1fr; gap:32px; padding-block:48px 34px; }
  .form{ padding:22px; }
  .brand img{ width:40px; height:40px; }
  .hero__cta .btn{ flex:1 1 100%; justify-content:center; }
  .foot__bar{ justify-content:center; text-align:center; }
  .wa{ width:46px; height:46px; inset-block-end:20px; inset-inline-start:20px; }
  .to-top{ inset-block-end:20px; inset-inline-end:20px; }
}

/* ==========================================================================
   Motion & print
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
}

@media print{
  body::before,body::after,.circuit,.to-top,.wa,.site-head,.topbar{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ==========================================================================
   Smart-home product pages
   One page per unit: hero (shot + copy), the vendor's feature shots, then the
   rest of its group. Reached by clicking a catalogue card.
   ========================================================================== */
.phero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
}
.phero__plate{
  background:var(--plate);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  aspect-ratio:4/3;
  display:grid; place-items:center;
  overflow:hidden;
}
.phero__plate img{ width:100%; height:100%; object-fit:contain; padding:8%; }
.phero__tag{ color:var(--muted); font-size:1.02rem; margin-block:10px 18px; }
.phero__desc{ color:var(--muted); line-height:1.85; }
.phero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-block-start:28px; }

.pfeats{ display:flex; flex-direction:column; gap:clamp(48px, 7vw, 88px); }
.pfeat__head{ text-align:center; max-width:760px; margin-inline:auto; }
.pfeat__head h2{ font-size:clamp(1.25rem, 2.4vw, 1.7rem); margin-block-end:10px; }
.pfeat__head p{ color:var(--muted); }
.pfeat__media{
  margin-block-start:28px;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  /* A portrait or half-width vendor crop shouldn't be stretched past its own
     pixels — it just goes soft. The frame shrinks to the artwork instead. */
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}
.pfeat__media img{ display:block; width:auto; max-width:100%; height:auto; }

.psibs{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.psib{
  display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit;
  transition:transform .3s var(--ease);
}
.psib:hover{ transform:translateY(-4px); }
.psib__plate{
  background:var(--plate);
  border:1px solid var(--line);
  border-radius:var(--r);
  aspect-ratio:1/1;
  display:grid; place-items:center;
  overflow:hidden;
}
.psib__plate img{ width:100%; height:100%; object-fit:contain; padding:12%; }
.psib__name{ font-size:12.5px; color:var(--muted); text-align:center; line-height:1.5; }
.psib:hover .psib__name{ color:var(--text); }

@media (max-width:960px){
  .phero{ grid-template-columns:1fr; gap:28px; }
  .psibs{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:600px){
  .psibs{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .pfeat__media{ margin-block-start:18px; }
}

/* Vendor spec tiles — plain claims, set as text rather than shipped as an
   image of text, so they translate, select and stay sharp when zoomed. */
.pspecs{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.pspecs li{
  display:grid; place-items:center; text-align:center;
  min-height:132px; padding:22px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.82);
  font-size:15px; line-height:1.6;
}
@media (max-width:860px){ .pspecs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){
  .pspecs{ grid-template-columns:1fr; gap:12px; }
  .pspecs li{ min-height:0; padding:16px; }
}

/* Specification sheet — label/value rows for products the vendor documents
   with a datasheet rather than marketing artwork. */
.psheets{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap:clamp(24px, 4vw, 48px);
  align-items:start;
}
.psheet__group h3{
  font-size:1.02rem;
  padding-block-end:12px;
  border-block-end:1px solid var(--line);
  margin-block-end:4px;
}
.psheet{ width:100%; border-collapse:collapse; }
.psheet th,
.psheet td{
  padding:11px 0;
  font-size:14px;
  font-weight:400;
  text-align:start;
  vertical-align:top;
  border-block-end:1px solid var(--line-soft);
}
.psheet th{ color:var(--muted); width:52%; padding-inline-end:16px; }
/* Figures keep their own direction so a leading sign or unit is not moved to
   the wrong end of the value in Arabic. */
.psheet td{ color:var(--text); direction:ltr; unicode-bidi:isolate; }
html[dir="rtl"] .psheet td{ text-align:right; }
.psheet tr:last-child th,
.psheet tr:last-child td{ border-block-end:0; }