/* ══════════════════════════════════════════════════════════════════════
   A1 TECH — UI PRO LAYER  ·  "Machine floor at night"
   Loaded LAST (after style.css and polish.css) so it wins every tie.

   Direction: the site should feel like the factory floor it sells into —
   deep machine navy, engineering blueprint lines, machined type, and one
   borrowed detail from the real world: the amber/black hazard stripe that
   marks moving machinery. Amber is the accent of ATTENTION only: live
   states, active nav, stock ticks, dividers. Blue stays the brand.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── surfaces ─────────────────────────────────────────────────────────
     THE THREE COLOURS THAT SET HOW DARK THE SITE FEELS.
     Everything dark on the site (hero, footer, banners) is built from these.
     Want it lighter still? Raise the numbers. Darker? Lower them.
     Previous, near-black values were: #070C1B / #0C1428 / #16234a          */
  --ink:#15294E;              /* main dark surface — hero stage, footer */
  --ink2:#1C3866;
  --navy:#1E3D78;             /* brand navy, lifted toward the logo blue */
  --navy2:#27509A;
  --navy3:#3568B8;
  --bone:#F1F5FA;
  --paper:#FFFFFF;
  --steel:#5b6a80;
  --steel-light:#9fb0c6;

  /* ── brand + signal ── */
  --accent:#3f8fce;
  --accent-hi:#63b0ea;
  --accent2:#2a6ea6;
  --signal:#FFB524;           /* hazard amber — used sparingly */
  --signal-dim:rgba(255,181,36,.14);
  --green:#2fbf7a;

  /* ── type ── */
  --font-ar:'Tajawal','IBM Plex Sans Arabic',sans-serif;
  --font-display:'IBM Plex Sans Arabic','Tajawal',sans-serif;
  --font-en:'IBM Plex Mono','Rajdhani',ui-monospace,monospace;

  /* ── geometry & depth ── */
  --radius:14px;
  --r-sm:10px;
  --r-xs:7px;
  --r-pill:999px;
  --container:1280px;
  --sh-1:0 1px 2px rgba(7,12,27,.06),0 3px 10px rgba(7,12,27,.05);
  --sh-2:0 8px 20px rgba(7,12,27,.08),0 18px 40px rgba(7,12,27,.07);
  --sh-3:0 16px 34px rgba(7,12,27,.12),0 34px 70px rgba(7,12,27,.14);
  --glow:0 0 0 1px rgba(63,143,206,.35),0 14px 40px rgba(63,143,206,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ── Page canvas ─────────────────────────────────────────────────────── */
/* clip, not hidden: `overflow-x:hidden` on the root silently breaks
   position:sticky, and the header depends on it. */
html{overflow-x:clip}
body{overflow-x:clip;
  background:
    radial-gradient(900px 500px at 88% -6%,rgba(63,143,206,.10),transparent 60%),
    radial-gradient(700px 420px at 4% 8%,rgba(22,35,74,.07),transparent 62%),
    var(--bone);
  color:#0f1730;
  font-family:var(--font-ar);
  letter-spacing:-.005em;
}

h1,h2,h3,h4,.logo-text,.price,.hero-stat b,.admin-stat b{font-family:var(--font-display)}
h1,h2{letter-spacing:-.02em}

/* Machined utility type: labels, SKUs, numbers, English micro-copy */
.dim-label,.cat-tag,.product-cat,.blog-meta,.cert-item,.breadcrumb,
.stock-pill,.offer-pill,.feature-item .num,.process-num,.admin-table th{
  font-family:var(--font-en);
  font-feature-settings:"tnum" 1;
}

/* ── The hazard stripe: this site's one borrowed object ──────────────── */
.hazard{
  height:6px;border-radius:99px;
  background:repeating-linear-gradient(135deg,var(--signal) 0 9px,#101a33 9px 18px);
  opacity:.85;
}

/* Eyebrow labels get a live amber tick instead of a plain dash */
.dim-label{
  font-size:.7rem;letter-spacing:.22em;color:var(--accent-hi);
  font-weight:600;gap:10px;margin-bottom:16px;
}
.dim-label::before{
  width:8px;height:8px;border-radius:2px;background:var(--signal);
  box-shadow:0 0 0 4px var(--signal-dim);
  animation:tick 2.6s var(--ease) infinite;
}
@keyframes tick{0%,100%{box-shadow:0 0 0 4px var(--signal-dim)}50%{box-shadow:0 0 0 8px rgba(255,181,36,0)}}
.section:not(.section-dark) .dim-label{color:var(--accent2)}

/* ── Blueprint stage ─────────────────────────────────────────────────── */
.blueprint-bg{
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(170,205,245,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(170,205,245,.05) 1px,transparent 1px),
    linear-gradient(rgba(170,205,245,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(170,205,245,.10) 1px,transparent 1px);
  background-size:22px 22px,22px 22px,110px 110px,110px 110px;
}
.blueprint-bg::before{
  /* a wash of the logo's own blue across the top-right of the stage */
  background:
    radial-gradient(820px 460px at 74% 10%,rgba(93,171,232,.30),transparent 64%),
    radial-gradient(560px 320px at 6% 86%,rgba(63,143,206,.16),transparent 62%);
}
.section-dark{background:var(--ink)}

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header{background:transparent;border-bottom:none}
.site-header::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--ink) 30%,rgba(21,41,78,.88) 100%);
  transition:opacity .32s var(--ease);
}
.site-header.floating::before{opacity:0}
.site-header.floating .nav-wrap{
  background:rgba(24,45,86,.82);
  border-color:rgba(159,176,198,.18);
  box-shadow:0 18px 46px rgba(4,8,20,.5),inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
}
.logo-text{font-weight:700;letter-spacing:-.01em}
.logo-sub{font-family:var(--font-en);font-size:.52rem;letter-spacing:.22em;color:var(--steel-light)}
.nav-links{gap:28px}
.nav-links a{font-size:.88rem;font-weight:500;color:#cfdcec;transition:color .2s var(--ease)}
.nav-links a::after{height:2px;background:var(--signal);border-radius:2px;box-shadow:0 0 10px rgba(255,181,36,.6)}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-icon-btn{border-radius:9px;border-color:rgba(159,176,198,.2);transition:.2s var(--ease)}
.nav-icon-btn:hover{background:rgba(63,143,206,.14);border-color:var(--accent)}
.btn-quote{
  background:linear-gradient(135deg,var(--accent-hi),var(--accent2));
  border-radius:9px;letter-spacing:-.01em;
  box-shadow:0 6px 18px rgba(63,143,206,.32),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);
}
.btn-quote:hover{background:linear-gradient(135deg,var(--accent-hi),var(--accent2));filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 10px 26px rgba(63,143,206,.42)}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  border-radius:11px;font-weight:700;letter-spacing:-.01em;
  padding:15px 30px;position:relative;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent-hi) 0%,var(--accent2) 100%);
  box-shadow:0 10px 26px rgba(63,143,206,.34),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 48%,transparent 72%);
  transform:translateX(-130%);transition:transform .8s var(--ease-out);
}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 34px rgba(63,143,206,.44)}
.btn-outline{
  border:1px solid rgba(159,176,198,.34);color:#e8eff8;
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn-outline:hover{border-color:var(--signal);color:var(--signal);background:rgba(255,181,36,.07);transform:translateY(-2px)}
.btn-outline-dark{border:1.5px solid rgba(22,35,74,.22);border-radius:11px}
.btn-outline-dark:hover{background:var(--navy);border-color:var(--navy)}

/* ══════════════════════════════════════════════════════════════════════
   HERO — the 3D stage
   ══════════════════════════════════════════════════════════════════════ */
.hero{padding:96px 0 92px;overflow:hidden}
/* Two columns ONLY on wide screens. This used to be unconditional, which
   silently overrode the single-column mobile rule in style.css (same
   specificity, later file) and squeezed the phone layout into two halves. */
@media(min-width:981px){
  .hero-grid{grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.3rem,4.6vw,3.85rem);
  font-weight:700;line-height:1.08;letter-spacing:-.035em;
  margin-bottom:22px;
}
.hero h1 span{
  background:linear-gradient(120deg,var(--accent-hi),#9ad2ff 55%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;
}
.hero p{color:#a9bbd0;font-size:1.06rem;line-height:1.85;max-width:540px}
.hero-badges{gap:8px}
.hero-badge{
  border-color:rgba(159,176,198,.22);background:rgba(255,255,255,.035);
  color:#c2d1e2;border-radius:9px;font-weight:500;font-size:.76rem;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* 3D stage container */
.hero-3d{
  position:relative;width:100%;aspect-ratio:1/.86;min-height:340px;
  border-radius:20px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 70% 15%,rgba(93,171,232,.22),transparent 62%),
    linear-gradient(180deg,rgba(30,58,110,.55),rgba(21,41,78,.28));
  border:1px solid rgba(159,176,198,.14);
  box-shadow:0 40px 80px rgba(3,7,18,.55),inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-3d canvas{display:block;width:100%;height:100%}
.hero-3d .stage-tag{
  position:absolute;bottom:14px;inset-inline-start:16px;z-index:2;
  font-family:var(--font-en);font-size:.62rem;letter-spacing:.18em;
  color:rgba(159,176,198,.75);direction:ltr;
  display:flex;align-items:center;gap:8px;
}
.hero-3d .stage-tag::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:tick 2s infinite;
}
.hero-3d .stage-hint{
  position:absolute;top:14px;inset-inline-end:16px;z-index:2;
  font-family:var(--font-en);font-size:.58rem;letter-spacing:.16em;
  color:rgba(159,176,198,.5);direction:ltr;
}
.hero-3d.is-loading::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(159,176,198,.07) 50%,transparent 70%);
  background-size:220% 100%;animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.hero-video{border-radius:20px;min-height:380px}

/* Live spec counters under the hero */
.hero-stats{
  border-top:1px solid rgba(159,176,198,.14);gap:0;
  display:grid;grid-template-columns:repeat(3,1fr);padding-top:0;margin-top:6px;
}
/* the phone layout for these figures lives at the end of this file, after
   the desktop .hero-stat rules it has to override */
.hero-stat{padding:20px 22px;border-inline-start:1px solid rgba(159,176,198,.12)}
.hero-stat:first-child{padding-inline-start:0;border-inline-start:none}
.hero-stat b{font-family:var(--font-en);font-size:1.85rem;font-weight:600;color:#fff;letter-spacing:-.02em}
/* The counting number sits in a <span> inside the <b>. A generic
   `.hero-stat span` rule was shrinking it to caption size and greying it out,
   so the unit looked like the headline and the figure looked like a footnote. */
.hero-stat b span{font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit;font-family:inherit}
.hero-stat b em{font-style:normal;color:var(--signal)}
.hero-stat span{font-size:.75rem;color:var(--steel-light);letter-spacing:.02em}

/* ══════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════ */
.section{padding:92px 0}
.section-head{max-width:700px;margin-bottom:52px}
.section-head h2{
  font-size:clamp(1.6rem,2.9vw,2.35rem);font-weight:700;
  line-height:1.22;letter-spacing:-.03em;
}
.section-head p{font-size:1rem;line-height:1.85;margin-top:12px;color:var(--steel)}

/* ── "What are you moving?" tiles ── */
.app-grid{gap:12px}
.app-card{
  background:var(--paper);border:1px solid rgba(22,35,74,.07);
  border-radius:var(--radius);padding:26px 12px 20px;
  box-shadow:var(--sh-1);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .3s var(--ease);
  transform-style:preserve-3d;
}
.app-card .app-icon{
  font-size:1.7rem;margin-bottom:12px;
  filter:drop-shadow(0 6px 10px rgba(22,35,74,.18));
  transition:transform .35s var(--ease-out);
}
.app-card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:rgba(63,143,206,.4)}
.app-card:hover .app-icon{transform:translateY(-3px) scale(1.08)}
.app-card span{font-size:.83rem;letter-spacing:-.01em}

/* ── Category cards ── */
.cat-grid{gap:22px}
.cat-card{
  background:var(--paper);border:1px solid rgba(22,35,74,.07);
  border-radius:18px;padding:24px;box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s var(--ease);
}
.cat-card:hover{transform:translateY(-7px);box-shadow:var(--sh-3);border-color:rgba(63,143,206,.35)}
.cat-card h3{font-size:1.08rem;letter-spacing:-.02em;margin-bottom:10px}
.cat-card p{font-size:.87rem;line-height:1.8;color:var(--steel)}
.cat-ico[style*="transparent"]{
  border-radius:12px;background:linear-gradient(160deg,var(--navy),var(--ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.cat-tag{font-size:.63rem;letter-spacing:.14em;color:var(--accent2);font-weight:600}
.cat-count{
  font-size:.6rem;letter-spacing:.1em;color:var(--steel);
  background:rgba(22,35,74,.05);padding:4px 9px;border-radius:99px;
}

/* ── Why us / feature strip ── */
.feature-strip{
  border-radius:18px;border-color:rgba(159,176,198,.14)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.feature-item{padding:32px 26px;border-color:rgba(159,176,198,.12)!important}
.feature-item .num{
  font-size:.68rem;letter-spacing:.14em;color:var(--signal);
  display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
}
.feature-item .num::after{content:'';width:20px;height:1px;background:linear-gradient(90deg,var(--signal),transparent)}
.feature-item h4{font-size:1rem;letter-spacing:-.02em}
.feature-item p{line-height:1.8;font-size:.84rem}

/* ── Process (a real sequence, so the numbers stay) ── */
.process-grid{gap:20px}
.process-step{padding-top:20px;border-top:1px solid rgba(159,176,198,.16);position:relative}
.process-step::before{
  content:'';position:absolute;top:-1px;inset-inline-start:0;width:34px;height:2px;
  background:var(--signal);box-shadow:0 0 10px rgba(255,181,36,.5);
}
.process-num{font-size:1.05rem;font-weight:600;color:var(--accent-hi);opacity:1;letter-spacing:.06em}
.process-step h4{font-size:.98rem;letter-spacing:-.02em;margin-bottom:8px}
.process-step p{line-height:1.8}

/* ── Markets ── */
.market-pill{
  border-radius:99px;border-color:rgba(22,35,74,.1);
  box-shadow:var(--sh-1);font-weight:600;padding:11px 22px;
  transition:.25s var(--ease);
}
.market-pill:hover{border-color:var(--accent);color:var(--accent2);transform:translateY(-2px)}

/* ── Product cards ── */
.product-grid{gap:20px}
.product-card{
  border-radius:16px;border-color:rgba(22,35,74,.07);box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s var(--ease);
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:rgba(63,143,206,.35)}
.product-thumb{background:linear-gradient(155deg,var(--navy2),var(--ink))}
.product-thumb img{transition:transform .6s var(--ease-out)}
.product-card:hover .product-thumb img{transform:scale(1.06)}
.stock-pill,.offer-pill{border-radius:7px;font-size:.6rem;letter-spacing:.08em;padding:5px 10px}
.offer-pill{background:var(--signal);color:#1a1204;font-weight:700;box-shadow:0 6px 16px rgba(255,181,36,.35)}
.product-body h3{font-size:.94rem;letter-spacing:-.015em;line-height:1.5}
.product-spec{font-family:var(--font-en);font-size:.7rem;letter-spacing:.02em;color:var(--steel)}
.price{font-family:var(--font-en);font-weight:600;letter-spacing:-.02em}
.add-btn{border-radius:9px;background:linear-gradient(140deg,var(--navy),var(--ink));color:var(--accent-hi)}
.add-btn:hover{background:linear-gradient(140deg,var(--accent-hi),var(--accent2));color:#fff;transform:translateY(-1px)}

/* ── Certifications strip ── */
.cert-strip{border-color:rgba(22,35,74,.1);gap:34px}
.cert-item{font-size:.72rem;letter-spacing:.1em;color:var(--steel)}
.cert-item svg{color:var(--accent)}

/* ── Testimonials ── */
.test-card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(159,176,198,.13);border-radius:18px;padding:30px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  position:relative;
}
.test-card::before{
  content:'”';position:absolute;top:6px;inset-inline-end:22px;
  font-family:var(--font-display);font-size:4.5rem;line-height:1;
  color:rgba(255,181,36,.18);
}
.test-card p{font-size:.92rem;line-height:1.95}
.test-avatar{background:linear-gradient(140deg,var(--accent),var(--accent2));border:none;color:#fff}

/* ── Blog ── */
.blog-card{border-radius:16px;border-color:rgba(22,35,74,.07);box-shadow:var(--sh-1)}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:rgba(63,143,206,.35)}
.blog-thumb{background:linear-gradient(150deg,var(--navy2),var(--ink));position:relative;overflow:hidden}
.blog-thumb span{position:relative;z-index:2}
.blog-thumb::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,12,27,0) 40%,rgba(7,12,27,.62))}
.blog-card:hover .blog-thumb img{transform:scale(1.05)}
.blog-thumb img{transition:transform .6s var(--ease-out)}

/* upload feedback from direct-upload.js */
.upload-status{font-size:.78rem;margin-top:7px;font-weight:600}
.upload-status[data-tone="busy"]{color:var(--accent2)}
.upload-status[data-tone="ok"]{color:var(--green)}
.upload-status[data-tone="warn"]{color:#b8791a}

/* storage/database status banner in the admin */
.env-banner{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:14px;
  margin-bottom:20px;font-size:.85rem;line-height:1.7;border:1px solid transparent}
.env-banner b{display:block;margin-bottom:2px}
.env-ok{background:rgba(47,191,122,.09);border-color:rgba(47,191,122,.3);color:#146c44}
.env-warn{background:rgba(255,181,36,.12);border-color:rgba(255,181,36,.4);color:#7a5200}
.env-banner ul{margin:6px 0 0;padding-inline-start:18px;list-style:disc}
.blog-thumb span{background:var(--signal);color:#1a1204;font-family:var(--font-en);font-size:.6rem;letter-spacing:.1em}
.blog-body h3{font-size:.97rem;letter-spacing:-.02em;line-height:1.55}
.blog-meta{font-size:.65rem;letter-spacing:.1em}

/* ── CTA banner ── */
.cta-banner{
  background:linear-gradient(135deg,var(--navy) 0%,var(--ink) 55%,#22447f 100%);
  border-radius:22px;padding:56px 60px;position:relative;overflow:hidden;
  border:1px solid rgba(159,176,198,.14);
  box-shadow:0 30px 70px rgba(7,12,27,.28);
}
.cta-banner::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(500px 260px at 82% 8%,rgba(63,143,206,.3),transparent 62%),
    linear-gradient(90deg,rgba(255,181,36,.08),transparent 40%);
  pointer-events:none;
}
.cta-banner::after{
  content:'';position:absolute;top:0;inset-inline-start:0;width:100%;height:5px;
  background:repeating-linear-gradient(135deg,var(--signal) 0 10px,transparent 10px 20px);
  opacity:.6;
}
.cta-banner>*{position:relative;z-index:1}
.cta-banner h2{font-size:1.7rem;letter-spacing:-.03em;line-height:1.35}
.cta-banner p{color:#a9bbd0;opacity:1}

/* ── Page hero (inner pages) ── */
.page-hero{padding:70px 0 60px}
.page-hero h1{font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.03em}
.breadcrumb{font-size:.68rem;letter-spacing:.16em;color:var(--steel-light)}
.breadcrumb b{color:var(--signal);font-weight:600}

/* ── Filters / forms ── */
.filters-bar{border-radius:16px;box-shadow:var(--sh-1);border-color:rgba(22,35,74,.07);padding:16px 20px}
.filter-chip{border-radius:99px;border-color:rgba(22,35,74,.12);transition:.2s var(--ease)}
.filter-chip.active,.filter-chip:hover{background:linear-gradient(135deg,var(--navy),var(--ink));border-color:transparent;box-shadow:0 8px 18px rgba(22,35,74,.22)}
.search-input,.form-field input,.form-field select,.form-field textarea{
  border-radius:11px;border-color:rgba(22,35,74,.12);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.search-input:focus{
  border-color:var(--accent);box-shadow:0 0 0 4px rgba(63,143,206,.14);outline:none;
}
.form-field label{font-size:.8rem;letter-spacing:-.01em}

/* ── Offers ── */
.offer-card{
  background:linear-gradient(150deg,var(--navy),var(--ink));border-radius:18px;
  border:1px solid rgba(159,176,198,.14);box-shadow:var(--sh-2);
}
.offer-badge{background:var(--signal);color:#1a1204;font-family:var(--font-en);border-radius:0 0 0 14px}
.offer-new{font-family:var(--font-en);color:var(--signal);font-weight:600}

/* ── Flash ── */
.flash{border-radius:12px;box-shadow:var(--sh-1)}

/* ── Footer ── */
.site-footer{
  background:var(--ink);padding-top:72px;position:relative;
  background-image:
    linear-gradient(rgba(150,190,235,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,190,235,.04) 1px,transparent 1px);
  background-size:110px 110px;
}
.site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:repeating-linear-gradient(135deg,var(--signal) 0 10px,#0d1730 10px 20px);
  opacity:.55;
}
.footer-grid h4{font-size:.72rem;letter-spacing:.16em;font-family:var(--font-en);color:var(--accent-hi);text-transform:uppercase}
.footer-grid li{font-size:.83rem;line-height:1.7}
.footer-grid a{transition:color .2s var(--ease),padding .2s var(--ease)}
.footer-grid a:hover{color:var(--signal)}
.footer-bottom{font-family:var(--font-en);font-size:.68rem;letter-spacing:.08em;color:var(--steel)}

/* ── Floating widgets ── */
.chatbot-bubble{
  background:linear-gradient(140deg,var(--accent-hi),var(--accent2));
  box-shadow:0 10px 28px rgba(63,143,206,.45),inset 0 1px 0 rgba(255,255,255,.3);
}
.chatbot-panel{border-radius:18px;box-shadow:0 30px 70px rgba(7,12,27,.4)}
.chatbot-head{background:linear-gradient(140deg,var(--navy),var(--ink))}
.msg{border-radius:14px}
.msg-user{background:linear-gradient(135deg,var(--accent-hi),var(--accent2))}
.fab{box-shadow:0 8px 22px rgba(7,12,27,.28)}

/* ══════════════════════════════════════════════════════════════════════
   3D DEPTH — pointer-tilt cards (desktop only, driven by motion.js)
   ══════════════════════════════════════════════════════════════════════ */
@media(hover:hover) and (pointer:fine){
  .tilt-scene{perspective:1000px}
  .tilt{
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
    transform-style:preserve-3d;
    transition:transform .5s var(--ease-out),box-shadow .4s var(--ease-out);
    will-change:transform;
  }
  .tilt.is-tilting{transition:transform .08s linear,box-shadow .4s var(--ease-out)}
  .tilt>*{transform:translateZ(18px)}
  .tilt .cat-ico,.tilt .app-icon{transform:translateZ(40px)}
  /* the pointer spotlight from polish.css stays, tuned warmer at the edges */
  .cat-card::before,.product-card::before,.blog-card::before,.app-card::before{
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(63,143,206,.16),transparent 70%);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ADMIN PANEL
   ══════════════════════════════════════════════════════════════════════ */
.admin-body{background:#eef2f8}
.admin-sidebar{
  background:linear-gradient(180deg,var(--navy) 0%,var(--ink) 100%);
  border-inline-end:1px solid rgba(159,176,198,.1);
}
.admin-nav a{border-radius:0;font-size:.86rem;transition:.2s var(--ease)}
.admin-nav a.active{
  background:linear-gradient(90deg,rgba(63,143,206,.2),transparent);
  color:#fff;border-color:var(--signal);
}
.admin-topbar h1{font-family:var(--font-display);letter-spacing:-.02em}
.admin-stat{
  border-radius:16px;border-color:rgba(22,35,74,.06);box-shadow:var(--sh-1);
  position:relative;overflow:hidden;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.admin-stat::after{
  content:'';position:absolute;top:0;inset-inline-start:0;width:38px;height:3px;background:var(--accent);
}
.admin-stat:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.admin-stat b{font-family:var(--font-en);font-weight:600;letter-spacing:-.02em;color:var(--navy)}
.admin-card{border-radius:16px;border-color:rgba(22,35,74,.06);box-shadow:var(--sh-1)}
.admin-table th{font-size:.66rem;letter-spacing:.12em}
.admin-table tr:hover{background:rgba(63,143,206,.045)}
.badge{border-radius:99px;font-size:.68rem;padding:4px 11px}
.badge-orange{background:var(--signal-dim);color:#a06c00}
.login-wrap{background:var(--ink)}
.login-box{border-radius:20px;box-shadow:0 40px 90px rgba(0,0,0,.5)}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:980px){
  .hero{padding:64px 0 60px}
  .hero-grid{gap:34px}
  .hero-3d{aspect-ratio:16/11;min-height:290px}
  .section{padding:68px 0}
  .section-head{margin-bottom:36px}
}
@media(max-width:600px){
  .hero{padding:40px 0 44px}
  .hero h1{font-size:2.05rem;line-height:1.16}
  .hero p{font-size:.96rem}
  .hero-3d{aspect-ratio:4/3;min-height:230px;border-radius:16px}
  .hero-3d .stage-hint{display:none}
  /* The three-column version of the figures used to be re-applied here, after
     the single-column phone rule further up the file — so it won and the
     captions went back to wrapping one word per line. The stacked layout is
     defined once, in the (max-width:700px) block above, and nothing overrides
     it now. */
  .section{padding:48px 0}
  .section-head{margin-bottom:26px}
  .cta-banner{padding:32px 22px;border-radius:18px}
  .cta-banner h2{font-size:1.25rem}
  .feature-item{padding:22px 20px}
  .app-card{padding:18px 8px 14px}
  .cat-card{padding:20px}
  .test-card{padding:22px}
  .btn{padding:14px 24px}
}

@media(prefers-reduced-motion:reduce){
  .dim-label::before,.hero-3d .stage-tag::before{animation:none}
  .btn-primary::after{display:none}
  .tilt{transform:none!important}
}


/* ── result count + pagination ───────────────────────────────────────── */
.result-count{
  font-family:var(--font-en);font-size:.74rem;letter-spacing:.1em;
  color:var(--steel);margin:22px 0 18px;
}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:44px}
.pager-btn{
  padding:11px 22px;border-radius:11px;font-weight:700;font-size:.86rem;
  border:1px solid rgba(22,35,74,.14);background:var(--paper);color:var(--navy);
  box-shadow:var(--sh-1);transition:.22s var(--ease);
}
.pager-btn:hover{background:linear-gradient(135deg,var(--navy),var(--ink));color:#fff;border-color:transparent;transform:translateY(-2px)}
.pager-info{font-family:var(--font-en);font-size:.8rem;color:var(--steel);letter-spacing:.08em}


/* ══════════════════════════════════════════════════════════════════════
   PERFORMANCE
   The page felt heavy to scroll. These are the fixes, in order of impact.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. The progress bar is now driven by transform instead of width. Animating
      width forces a layout pass on every frame; transform does not. */
.progress-bar{
  width:100%;transform:scaleX(0);transform-origin:left center;
  transition:none;will-change:transform;
}
[dir="rtl"] .progress-bar{transform-origin:right center}

/* 2. backdrop-filter is the single most expensive thing a fixed header can do:
      the browser re-blurs everything behind it on every scroll frame. The
      header keeps its glass look through a solid translucent fill instead. */
.site-header.floating .nav-wrap{
  background:rgba(24,45,86,.95);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.feature-strip,.test-card,.btn-outline,.hero-badge{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.feature-strip{background:rgba(255,255,255,.04)}
.test-card{background:rgba(255,255,255,.045)}

/* 3. will-change permanently promotes an element to its own GPU layer. On a
      page with dozens of cards that is a lot of memory for an effect that only
      runs while the pointer is actually over one — so it is applied on hover. */
@media(hover:hover) and (pointer:fine){
  .tilt{will-change:auto}
  .tilt:hover{will-change:transform}
}

/* 4. content-visibility was tried here and removed on purpose: it skips
      rendering for off-screen sections, but the browser then has to guess
      their height, and a wrong guess makes the scrollbar jump while you
      scroll — trading one kind of jank for a worse one. */


/* ── Spam trap ───────────────────────────────────────────────────────── */
/* Hidden from people and screen readers without moving anything off-screen. */
.honeypot{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ── Phone refinements ───────────────────────────────────────────────── */
@media(max-width:600px){
  /* the floating rail sat on top of the 3D stage */
  .floating-social{gap:7px}
  .fab-icon-circle{width:34px;height:34px}
  .floating-social .fab{box-shadow:0 4px 12px rgba(7,12,27,.3)}

  /* the header pill was carrying four items across a 360px screen */
  .nav-wrap{padding:8px 10px}
  .logo-sub{display:none}
  .btn-quote{padding:9px 14px;font-size:.78rem}
  .nav-icon-btn{width:34px;height:34px}

  .hero-3d .stage-tag{font-size:.55rem;bottom:10px;inset-inline-start:12px}
  .section-head h2{font-size:1.4rem}
  .pager-btn{padding:10px 16px;font-size:.8rem}
  .result-count{margin:16px 0 14px}
}


/* ══════════════════════════════════════════════════════════════════════
   PHONE — restoring what this file was accidentally cancelling
   Every rule below already existed for phones in style.css. Because this
   file loads last with the same specificity, its unconditional values were
   winning at ALL widths — so small print stayed small, grid gaps stayed
   desktop-sized, and the phone layout drifted. These put the phone values
   back, in a media query, where they can't be overridden by accident.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  /* readable small print — the desktop sizes were far too small on a phone */
  .cat-tag{font-size:.7rem}
  .cat-count{font-size:.72rem}
  .stock-pill,.offer-pill{font-size:.68rem;padding:4px 10px}
  .blog-thumb span,.blog-meta{font-size:.72rem}
  .hero-badge{font-size:.72rem}
  .section-head p{font-size:.9rem;margin-top:8px}

  /* tighter rhythm so cards aren't separated by desktop-sized gaps */
  .cat-grid,.product-grid{gap:14px}
  .app-grid,.process-grid{gap:10px}
  .hero-badges{gap:8px}
  .market-pill{padding:8px 15px}
  .site-footer{padding-top:40px}

  .page-hero{padding:34px 0 30px}
  .page-hero h1{font-size:1.6rem}
  .hero-video{min-height:200px;border-radius:14px}
  .chatbot-panel{border-radius:18px}
}

/* Lift effects belong to pointers, not fingers. On a touch screen a :hover
   transform sticks after a tap and the card stays lifted until you tap
   elsewhere, which reads as a glitch. */
@media(hover:none){
  .cat-card:hover,.product-card:hover,.blog-card:hover,.app-card:hover,
  .market-pill:hover,.pager-btn:hover,.btn:hover,.btn-primary:hover,
  .btn-outline:hover,.admin-stat:hover{
    transform:none;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   ARABIC TYPOGRAPHY
   Two habits borrowed from Latin design that damage Arabic:

   1. letter-spacing. Arabic is a connected script — adding space between
      letters pulls the joins apart, so a word stops reading as a word. It is
      correct on the Latin labels, wrong on every Arabic one.
   2. the mono/Latin display face. Arabic text set in it falls back to
      whatever the device happens to have, so those labels rendered in a
      different typeface from the rest of the page.

   Latin labels (SKUs, specs, figures, the English pages) keep both.
   ══════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .dim-label,
[dir="rtl"] .cat-tag,
[dir="rtl"] .cat-count,
[dir="rtl"] .blog-meta,
[dir="rtl"] .stock-pill,
[dir="rtl"] .offer-pill,
[dir="rtl"] .cert-item,
[dir="rtl"] .breadcrumb,
[dir="rtl"] .result-count,
[dir="rtl"] .footer-bottom,
[dir="rtl"] .admin-table th,
[dir="rtl"] .hero-stat span,
[dir="rtl"] .product-cat{
  font-family:var(--font-ar);
  letter-spacing:normal;
}
/* keep the machined look where the content really is Latin or numeric */
[dir="rtl"] .product-spec,
[dir="rtl"] .price,
[dir="rtl"] .hero-stat b,
[dir="rtl"] .feature-item .num,
[dir="rtl"] .process-num,
[dir="rtl"] .pager-info,
[dir="rtl"] .logo-sub,
[dir="rtl"] .stage-tag{
  font-family:var(--font-en);
}
/* the 3D hint is the one overlay that carries Arabic wording */
[dir="rtl"] .hero-3d .stage-hint{
  font-family:var(--font-ar);letter-spacing:normal;font-size:.68rem;
}


/* ── Hero figures on a phone ─────────────────────────────────────────── */
/* Three long Arabic captions in three narrow columns collided and clipped.
   One per row instead, with the figure beside its caption. This lives at the
   end of the file on purpose: a media query carries no extra weight, so it
   has to come after the desktop .hero-stat rules to win. */
@media(max-width:700px){
  .hero-stats{grid-template-columns:1fr}
  .hero-stat{
    display:flex;align-items:baseline;gap:12px;
    padding:13px 0;border-inline-start:none;
    border-top:1px solid rgba(159,176,198,.10);
  }
  .hero-stat:first-child{border-top:none}
  .hero-stat b{font-size:1.3rem;flex:0 0 auto}
  .hero-stat span{font-size:.8rem;line-height:1.55}
}


/* ── Small-phone header ──────────────────────────────────────────────── */
/* style.css already intended to drop the quote button below 400px — the burger
   menu and the hero both carry the same call to action — but a later rule was
   switching it back on, so four items were fighting over a 360px-wide bar. */
@media(max-width:400px){
  .btn-quote{display:none}
}
@media(max-width:600px){
  .site-header.floating .nav-wrap{padding:6px 10px}
}


/* ══════════════════════════════════════════════════════════════════════
   3D SHOWROOM
   ══════════════════════════════════════════════════════════════════════ */
.showroom-grid{
  display:grid;grid-template-columns:1.55fr .95fr;gap:26px;align-items:stretch;
}
.showroom-stage{position:relative}

.viewer3d{
  position:relative;width:100%;height:100%;min-height:400px;
  border-radius:20px;overflow:hidden;cursor:grab;touch-action:pan-y;
  background:
    radial-gradient(120% 90% at 68% 12%,rgba(93,171,232,.22),transparent 62%),
    linear-gradient(180deg,rgba(30,58,110,.55),rgba(21,41,78,.3));
  border:1px solid rgba(159,176,198,.16);
  box-shadow:0 34px 70px rgba(6,14,32,.45),inset 0 1px 0 rgba(255,255,255,.06);
}
.viewer3d.is-dragging{cursor:grabbing}
.viewer3d canvas{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%}
.viewer3d.is-loading::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(159,176,198,.08) 50%,transparent 70%);
  background-size:220% 100%;animation:shimmer 1.4s linear infinite;
}
.viewer3d .drag-hint{
  position:absolute;top:14px;inset-inline-end:16px;z-index:2;pointer-events:none;
  font-family:var(--font-en);font-size:.58rem;letter-spacing:.16em;
  color:rgba(159,176,198,.55);direction:ltr;
  padding:5px 10px;border-radius:99px;border:1px solid rgba(159,176,198,.14);
}
.viewer3d .stage-tag{
  position:absolute;bottom:14px;inset-inline-start:16px;z-index:2;
  display:flex;align-items:center;gap:9px;
  font-size:.8rem;font-weight:600;color:#dbe7f5;
}
.viewer3d .stage-tag::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 9px var(--green);
}
.viewer3d-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:28px;text-align:center;color:var(--steel-light);font-size:.88rem;
}

/* the category picker beside the stage */
.showroom-pick{display:flex;flex-direction:column;gap:8px}
.showroom-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:14px 18px;border-radius:12px;cursor:pointer;text-align:start;
  background:rgba(255,255,255,.035);border:1px solid rgba(159,176,198,.14);
  color:#cfdcec;font-family:inherit;font-size:.9rem;font-weight:600;
  transition:background .22s var(--ease),border-color .22s var(--ease),
             color .22s var(--ease),transform .22s var(--ease);
}
.showroom-btn:hover{background:rgba(63,143,206,.16);color:#fff;border-color:rgba(93,171,232,.42)}
.showroom-btn.active{
  background:linear-gradient(120deg,rgba(63,143,206,.3),rgba(63,143,206,.08));
  border-color:var(--accent-hi);color:#fff;
}
.showroom-btn.active .showroom-btn-name{position:relative;padding-inline-start:14px}
.showroom-btn.active .showroom-btn-name::before{
  content:'';position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:2px;background:var(--signal);
  box-shadow:0 0 0 4px var(--signal-dim);
}
.showroom-btn-count{
  font-family:var(--font-en);font-size:.7rem;color:var(--steel-light);
  background:rgba(255,255,255,.06);padding:3px 9px;border-radius:99px;
}
.showroom-all{
  margin-top:6px;padding:13px 18px;border-radius:12px;text-align:center;
  font-weight:700;font-size:.88rem;color:var(--signal);
  border:1px dashed rgba(255,181,36,.4);transition:.22s var(--ease);
}
.showroom-all:hover{background:rgba(255,181,36,.09);border-style:solid}

/* ── product page: photo / 3D model tabs ─────────────────────────────── */
.product-media{display:flex;flex-direction:column;gap:12px}
.product-media-panes{position:relative}
.product-media .pane{display:none}
.product-media .pane.is-active{display:block}
.product-media .viewer3d{min-height:0;border-radius:14px}
.media-tabs{display:flex;gap:8px}
.media-tab{
  flex:1;padding:11px 14px;border-radius:11px;cursor:pointer;
  font-family:inherit;font-size:.84rem;font-weight:700;color:var(--steel);
  background:var(--paper);border:1px solid rgba(22,35,74,.12);
  transition:.2s var(--ease);
}
.media-tab:hover{border-color:var(--accent);color:var(--accent2)}
.media-tab.is-active{
  background:linear-gradient(135deg,var(--navy),var(--ink));
  border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(22,35,74,.24);
}

@media(max-width:980px){
  .showroom-grid{grid-template-columns:1fr;gap:18px}
  .viewer3d{min-height:330px}
  .showroom-pick{
    display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  }
  .showroom-all{grid-column:1/-1}
}
@media(max-width:600px){
  .viewer3d{min-height:270px;border-radius:16px}
  .viewer3d .drag-hint{font-size:.52rem;top:10px;inset-inline-end:12px}
  .showroom-btn{padding:11px 13px;font-size:.8rem}
  .showroom-pick{grid-template-columns:1fr}
}


/* ══════════════════════════════════════════════════════════════════════
   INDUSTRIES STRIP
   A single transform animation on one element — GPU-composited, so it costs
   nothing on scroll. Doubling the list in the markup is what makes the loop
   seamless: the second copy arrives exactly as the first leaves.
   ══════════════════════════════════════════════════════════════════════ */
.industries{
  overflow:hidden;padding:22px 0;
  background:linear-gradient(180deg,var(--ink),var(--ink2));
  border-block:1px solid rgba(159,176,198,.12);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.industries-track{
  display:flex;gap:14px;width:max-content;
  animation:industry-scroll 42s linear infinite;
}
.industries:hover .industries-track{animation-play-state:paused}
.industry-chip{
  flex:0 0 auto;padding:9px 20px;border-radius:99px;
  font-size:.83rem;font-weight:600;color:#c2d1e2;white-space:nowrap;
  background:rgba(255,255,255,.04);border:1px solid rgba(159,176,198,.16);
}
@keyframes industry-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
[dir="rtl"] .industries-track{animation-name:industry-scroll-rtl}
@keyframes industry-scroll-rtl{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
@media(prefers-reduced-motion:reduce){.industries-track{animation:none}}
@media(max-width:600px){
  .industries{padding:16px 0}
  .industry-chip{font-size:.75rem;padding:7px 15px}
}

/* Cards in a grid reveal one after another instead of all at once. */
.cat-grid .reveal,.product-grid .reveal,.app-grid .reveal{transition-delay:0ms}
.cat-grid > :nth-child(2),.product-grid > :nth-child(2){transition-delay:60ms}
.cat-grid > :nth-child(3),.product-grid > :nth-child(3){transition-delay:120ms}
.cat-grid > :nth-child(4),.product-grid > :nth-child(4){transition-delay:180ms}


/* The still image that stands in for a 3D scene: it should look like a
   deliberate photo panel, not a failure state. */
.viewer3d-fallback img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.viewer3d.no-3d .drag-hint{display:none}
.viewer3d.no-3d{cursor:default}
.viewer3d.no-3d::after{content:none}
.hero-3d.no-3d::after{content:none}


/* ══════════════════════════════════════════════════════════════════════
   3D FALLBACK — the still image is the DEFAULT, not the error state
   The drawing/photo underneath is visible from the moment the page loads and
   is hidden only once a scene is confirmed running. Any failure — a refused
   context, a lost context, a blocked file, an error nobody predicted — leaves
   the picture on screen instead of an empty dark box.
   ══════════════════════════════════════════════════════════════════════ */
.viewer3d-fallback,
.hero-3d-fallback{display:block}
.viewer3d.is-ready .viewer3d-fallback,
.hero-3d.is-ready .hero-3d-fallback{display:none}
.hero-3d-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px}
.hero-3d-fallback svg{width:100%;height:100%}
.viewer3d canvas,.hero-3d canvas{position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════════════════
   3D MOBILE HARDENING
   Keep the 3D stage bounded on phones and make the still image a real,
   guaranteed fallback when a mobile GPU refuses or loses WebGL.
   ══════════════════════════════════════════════════════════════════════ */

/* Blueprint vignettes are decoration, never a veil over real content. */
.blueprint-bg > .container{position:relative;z-index:1}

/* A lost/refused WebGL context can leave a black canvas behind on Android.
   Remove that canvas entirely in fallback mode so the photo/drawing cannot be
   covered by stale GPU pixels. */
.viewer3d.no-3d canvas,
.hero-3d.no-3d canvas{display:none!important}
.viewer3d.no-3d .viewer3d-fallback,
.hero-3d.no-3d .hero-3d-fallback{display:flex!important;z-index:2}
.viewer3d-fallback,
.hero-3d-fallback{z-index:0}

/* On mobile the stage is deliberately given a definite pixel-bounded height.
   `aspect-ratio + height:100%` still participates in intrinsic grid sizing on
   some Android Chromium versions; keeping the canvas absolute and the stage
   bounded prevents the runaway blank section seen on real phones. */
@media(max-width:980px){
  .showroom{height:auto;min-height:0;overflow:visible}
  .showroom-grid{
    display:flex;flex-direction:column;align-items:stretch;gap:18px;
    height:auto;min-height:0;
  }
  .showroom-stage{
    position:relative;flex:0 0 auto;width:100%;
    height:clamp(280px,68vw,420px);min-height:280px;max-height:420px;
    overflow:hidden;
  }
  .showroom-stage .viewer3d{
    width:100%;height:100%;min-height:0;max-height:100%;aspect-ratio:auto;
  }
  .showroom-stage .viewer3d canvas{
    position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;
  }
  .showroom-pick{position:relative;flex:0 0 auto;height:auto;min-height:0}
}
@media(max-width:600px){
  .showroom-grid{gap:14px}
  .showroom-stage{
    height:clamp(250px,72vw,340px);min-height:250px;max-height:340px;
  }
  .viewer3d .stage-tag{bottom:10px;inset-inline-start:12px;font-size:.72rem}
  .showroom .section-head{margin-bottom:20px}
}

/* ══════════════════════════════════════════════════════════════════════
   V7 — FIRST-SCROLL STABILITY
   Never change sticky-header geometry after scroll starts. The old floating
   state changed both the outer header padding and the inner row padding, so
   the sticky element itself changed height at scrollY=24. That reflowed the
   page under the user's finger and showed up as the obvious first-scroll
   "jump". Floating is now a paint-only state: same box, different skin.
   ══════════════════════════════════════════════════════════════════════ */
.site-header,
.site-header.floating{
  padding:0!important;
}
.nav-wrap,
.site-header.floating .nav-wrap{
  padding:12px 24px;
  transition:background-color .22s var(--ease),border-color .22s var(--ease),
             border-radius .22s var(--ease),box-shadow .22s var(--ease);
}
.nav-wrap{max-width:var(--container)}
.site-header.floating .nav-wrap{max-width:1140px}

/* Small fixed controls are promoted once instead of being repainted together
   with the page on every touch-scroll frame. */
.floating-social,.chatbot-wrap{
  transform:translateZ(0);
  backface-visibility:hidden;
}

@media(max-width:980px), (pointer:coarse){
  /* Cosmetic paint animations are not worth competing with a live WebGL scene
     on a phone. 3D quality is deliberately untouched. */
  .dim-label::before,.hero-3d .stage-tag::before,.chatbot-ping{
    animation:none!important;
  }
}

@media(max-width:600px){
  .nav-wrap,
  .site-header.floating .nav-wrap{
    padding:8px 10px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO VIDEO — preserve the source frame at every viewport
   Desktop used to inherit height:100% + min-height from style.css. In the
   two-column hero that made the video match the text column's height, then
   object-fit:cover cropped the source. Keep one stable 16:9 frame instead.
   ══════════════════════════════════════════════════════════════════════ */
.schematic-wrap > .hero-video{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:16 / 9;
  object-fit:contain;
  object-position:center center;
  background:#0b2344;
}
@media(max-width:600px){
  .schematic-wrap > .hero-video{
    height:auto;
    min-height:0;
    aspect-ratio:16 / 9;
  }
}