/* ============================================================================
   QUATRON TECHNOLOGIES — Corporate Website (quatron.tech)
   Consumes the certified Quatron Brand Tokens V1.0 (single source of truth).
   Marketing-surface components only — NOT a second design system.
============================================================================ */
:root{
  --qt-ink:#0D1420;--qt-blue:#2E5FE8;--qt-halo:#A8C2F5;
  --qt-neutral-50:#FBFCFE;--qt-neutral-100:#F3F5F9;--qt-neutral-200:#E5E9F0;
  --qt-neutral-300:#C9D0DC;--qt-neutral-400:#9AA4B5;--qt-neutral-500:#6B7689;
  --qt-neutral-600:#444E60;--qt-neutral-700:#2A3344;--qt-neutral-800:#171E2C;--qt-neutral-900:#0D1420;
  --qt-status-verified:#1E9E77;--qt-status-info:#2E5FE8;--qt-status-warning:#B9821D;--qt-status-destructive:#C63F3F;
  --qt-product-platform:#2E5FE8;--qt-product-identity:#1E9E77;--qt-product-hcm:#C25573;--qt-product-finance:#3B6FE0;
  --qt-product-gold:#C2812A;--qt-product-crm:#8A63D2;--qt-product-manufacturing:#5B8DB8;--qt-product-pos:#23A08A;
  --qt-product-bi:#3FA5C4;--qt-product-ai:#96A83B;--qt-product-developer:#6B7689;
  --qt-font-latin:'IBM Plex Sans',system-ui,sans-serif;--qt-font-arabic:'Tajawal',sans-serif;--qt-font-mono:'IBM Plex Mono',monospace;
  --qt-font-ui:'IBM Plex Sans','Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;
  --qt-radius-control:10px;--qt-radius-card:18px;--qt-radius-lg:24px;--qt-radius-pill:980px;
  --qt-shadow-ambient:0 1px 2px rgba(13,20,32,.04),0 12px 32px -12px rgba(13,20,32,.10);
  --qt-shadow-lift:0 2px 8px rgba(13,20,32,.05),0 40px 80px -32px rgba(13,20,32,.22);
  --qt-motion-curve:cubic-bezier(.2,.8,.2,1);--qt-motion-fast:150ms;--qt-motion-base:300ms;--qt-motion-reveal:600ms;
  /* Motion system tokens (consume the brand curve; centralized — do not hardcode timings)
     Tuned for a premium, clearly-perceptible-yet-calm entrance (Apple-grade: longer,
     smoother, larger travel — one-shot, never looping). */
  --qt-dur-instant:120ms;--qt-dur-fast:200ms;--qt-dur-standard:480ms;--qt-dur-emphasis:720ms;--qt-dur-hero:1150ms;
  --qt-ease-standard:cubic-bezier(.2,.8,.2,1);--qt-ease-enter:cubic-bezier(.16,.84,.3,1);--qt-ease-exit:cubic-bezier(.4,0,.7,.2);--qt-ease-emphasis:cubic-bezier(.2,.7,.2,1);
  --qt-stagger-tight:60ms;--qt-stagger-standard:100ms;--qt-stagger-section:150ms;
  --qt-dist-sm:12px;--qt-dist-md:26px;--qt-dist-lg:44px;--qt-scale-enter:.965;
  /* spacing rhythm (Apple-grade generous whitespace) */
  --qt-space-section:clamp(80px,12vw,168px);--qt-space-section-tight:clamp(52px,7vw,96px);
  /* surfaces */
  --bg:var(--qt-neutral-50);--surface:#FFFFFF;--surface-2:var(--qt-neutral-100);
  --text:var(--qt-neutral-800);--text-2:var(--qt-neutral-600);--muted:var(--qt-neutral-500);
  --border:var(--qt-neutral-200);--border-strong:var(--qt-neutral-300);
  --accent:var(--qt-blue);--accent-ink:#173FBF;--on-accent:#FFFFFF;
  --maxw:1180px;
}
html[lang="ar"]{--qt-font-ui:'Tajawal','IBM Plex Sans',system-ui,'Segoe UI',Tahoma,sans-serif}
@media (prefers-color-scheme:dark){
  :root{--bg:var(--qt-ink);--surface:var(--qt-neutral-800);--surface-2:#111826;--text:var(--qt-neutral-100);--text-2:var(--qt-neutral-400);--muted:var(--qt-neutral-400);--border:var(--qt-neutral-700);--border-strong:#33405A;--accent-ink:#7CA0FF}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--qt-font-ui);background:var(--bg);color:var(--text);line-height:1.6;
  font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{line-height:1.1;font-weight:600;color:var(--text);margin:0 0 .5em;letter-spacing:-.022em}
h1{font-size:clamp(42px,6.4vw,78px);font-weight:600;line-height:1.04;letter-spacing:-.035em}
h2{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.028em;line-height:1.07}
h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.018em}
p{margin:0 0 1em;color:var(--text-2)}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{letter-spacing:0}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px;border-radius:4px}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;top:-48px;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;transition:top .2s}
.skip:focus{top:12px;text-decoration:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);
  background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:999px;padding:7px 15px}
html[lang="ar"] .eyebrow{text-transform:none;letter-spacing:0}
.muted{color:var(--muted)}
.mono{font-family:var(--qt-font-mono)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  padding:13px 26px;border-radius:var(--qt-radius-pill);border:1px solid transparent;cursor:pointer;transition:transform var(--qt-dur-fast) var(--qt-ease-standard),background var(--qt-dur-fast),box-shadow var(--qt-dur-standard) var(--qt-ease-standard),border-color var(--qt-dur-fast);text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1.5px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 28px -8px color-mix(in srgb,var(--accent) 55%,transparent)}
.btn-primary:hover{background:var(--accent-ink);box-shadow:0 16px 38px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--qt-shadow-ambient)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{color:var(--accent-ink)}
.btn-lg{padding:16px 34px;font-size:16.5px}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border)}
.header-row{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none}
.brand img{height:26px;width:auto;display:block}
.brand:hover{text-decoration:none}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:8px;flex:1}
.nav a{color:var(--text-2);font-weight:500;font-size:15px;padding:9px 12px;border-radius:8px}
.nav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.lang-switch{color:var(--text-2);font-weight:600;font-size:14px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface)}
.lang-switch:hover{border-color:var(--accent);color:var(--accent-ink);text-decoration:none}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);align-items:center;justify-content:center;cursor:pointer}
.menu-toggle svg{width:22px;height:22px}
/* Mobile nav */
/* The header uses backdrop-filter, which makes it the containing block for this
   position:fixed panel — so `bottom` would resolve against the 68px header, not the
   viewport. Anchor to the header bottom and size by viewport height explicitly. */
.mobile-nav{display:none;position:fixed;top:68px;inset-inline:0;bottom:auto;height:calc(100vh - 68px);height:calc(100dvh - 68px);z-index:99;background:var(--bg);padding:20px 24px;overflow-y:auto;flex-direction:column;gap:6px}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:14px 12px;border-radius:10px;color:var(--text);font-weight:600;font-size:18px;border-bottom:1px solid var(--border)}
.mobile-nav .btn{margin-top:10px;justify-content:center}
body.menu-open{overflow:hidden}

/* Sections */
.section{padding:var(--qt-space-section) 0}
.section-tight{padding:var(--qt-space-section-tight) 0}
.section-head{max-width:760px;margin-bottom:clamp(44px,5vw,64px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-alt{background:var(--surface-2)}
.lead{font-size:clamp(18px,2.1vw,22px);color:var(--text-2);line-height:1.5}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(80px,11vw,152px) 0 clamp(64px,9vw,116px);
  background:radial-gradient(120% 82% at 82% 4%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 58%)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(40px,5vw,72px);align-items:center}
.hero h1{margin-bottom:.32em}
.hero .lead{max-width:32ch}
.hero-tagline{font-size:clamp(21px,2.6vw,29px);color:var(--text);font-weight:500;margin-bottom:.5em;letter-spacing:-.02em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero-visual{display:grid;place-items:center;position:relative;min-height:clamp(340px,40vw,500px)}
/* soft focal glow behind the ring — depth, not decoration */
.hero-visual::before{content:"";position:absolute;inset:0;margin:auto;width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%);filter:blur(44px);z-index:0;pointer-events:none}
.ring-wrap{width:min(460px,92%);aspect-ratio:1;position:relative;z-index:1;display:grid;place-items:center}
.ring-wrap img{width:100%;height:100%}
.hero-watermark{position:absolute;inset-inline-end:-6%;top:-10%;width:64%;opacity:.05;pointer-events:none;z-index:0}

/* ── V2 · Q-core convergence stage ─────────────────────────────────────────
   The approved Q ring at the centre; six enterprise concerns orbit and connect
   to it. The ring geometry is untouched — only the surrounding composition is new. */
.qt-core-stage{position:relative;width:min(500px,96%);aspect-ratio:1;display:grid;place-items:center;z-index:1}
.qt-core-stage .ring-wrap{width:44%}
.qt-core-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
.qt-core-links [data-link]{stroke:color-mix(in srgb,var(--accent) 42%,transparent);stroke-width:.6;fill:none;stroke-linecap:round}
.qt-core-orbit{position:absolute;inset:11%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 22%,transparent);z-index:0;pointer-events:none}
/* fragment chip positioned on the orbit via build-time --x/--y (parent-relative %) */
.qt-frag{position:absolute;left:var(--x);top:var(--y);z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px 8px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--border-strong);
  box-shadow:var(--shadow-sm);white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--text);
  transform:translate(-50%,-50%)}
.qt-frag-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-ink);flex:none}
.qt-frag-ic i,.qt-frag-ic svg{width:15px;height:15px}
.qt-core-evi{position:absolute;bottom:-3%;inset-inline:0;margin-inline:auto;width:max-content;max-width:92%;z-index:2;
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--qt-status-verified) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--qt-status-verified) 32%,var(--border));
  font-size:12.5px;font-weight:600;color:var(--text-2);letter-spacing:.01em}
.qt-core-evi i,.qt-core-evi svg{width:15px;height:15px;color:var(--qt-status-verified);flex:none}
html[lang="ar"] .qt-core-evi{letter-spacing:0}

/* motion (js-motion only): fragments drift in from outside + settle onto the orbit;
   links draw toward each node. All gated — no-JS / reduced-motion see the assembled state. */
html.js-motion .qt-frag{animation:qt-frag-in var(--qt-dur-hero,.9s) var(--qt-ease-emphasis,cubic-bezier(.2,.7,.2,1)) backwards;
  animation-delay:calc(var(--s,0) * 100ms + 360ms)}
@keyframes qt-frag-in{from{opacity:0;transform:translate(calc(-50% + var(--ox,0px)),calc(-50% + var(--oy,0px))) scale(.9)}}
html.js-motion .qt-core-links [data-link]{stroke-dasharray:60;stroke-dashoffset:60;
  animation:qt-link-draw .7s var(--qt-ease-standard,ease) forwards;animation-delay:calc(var(--s,0) * 100ms + 300ms)}
@keyframes qt-link-draw{to{stroke-dashoffset:0}}
html.js-motion .qt-core-evi{animation:qt-rise var(--qt-dur-hero,.9s) var(--qt-ease-enter,ease) backwards;animation-delay:calc(var(--s,0) * 100ms + 200ms)}
html.js-motion [data-hero] .qt-frag{will-change:transform,opacity}

/* Foundations (ring) */
.foundations{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.foundation{background:var(--surface);border:1px solid var(--border);border-radius:var(--qt-radius-card);padding:32px 26px;position:relative;overflow:hidden;box-shadow:var(--qt-shadow-ambient);transition:transform var(--qt-dur-standard) var(--qt-ease-standard),box-shadow var(--qt-dur-standard) var(--qt-ease-standard)}
.foundation:hover{transform:translateY(-4px);box-shadow:var(--qt-shadow-lift)}
.foundation::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:3px;background:var(--seg,var(--accent))}
.foundation .fnum{font-family:var(--qt-font-mono);font-size:13px;color:var(--muted)}
.foundation h3{margin:.5em 0 .35em}
.foundation p{font-size:15px;margin:0}

/* Product family grid */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--qt-radius-card);padding:28px;box-shadow:var(--qt-shadow-ambient);transition:border-color var(--qt-dur-standard) var(--qt-ease-standard),box-shadow var(--qt-dur-standard) var(--qt-ease-standard),transform var(--qt-dur-standard) var(--qt-ease-standard);text-decoration:none;color:inherit}
.product-card:hover{text-decoration:none;transform:translateY(-5px);border-color:color-mix(in srgb,var(--p,var(--accent)) 40%,transparent);box-shadow:var(--qt-shadow-lift)}
.product-tile{width:60px;height:60px;border-radius:14px;display:block;margin-bottom:18px}
.product-card h3{font-size:19px;margin:0 0 .35em}
.product-card p{font-size:14.5px;margin:0 0 14px;color:var(--text-2)}
.product-meta{display:flex;align-items:center;gap:10px;font-size:13px}
.status-pill{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--border-strong);color:var(--muted)}
.status-pill.available{color:var(--qt-status-verified);border-color:color-mix(in srgb,var(--qt-status-verified) 40%,transparent);background:color-mix(in srgb,var(--qt-status-verified) 10%,transparent)}
.status-pill.preview{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.readmore{color:color-mix(in srgb,var(--p,var(--accent)) 78%,var(--qt-ink));font-weight:600;font-size:14px}

/* Feature / capability lists */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--qt-radius-card);padding:30px 28px;box-shadow:var(--qt-shadow-ambient);transition:transform var(--qt-dur-standard) var(--qt-ease-standard),box-shadow var(--qt-dur-standard) var(--qt-ease-standard)}
.feature:hover{transform:translateY(-4px);box-shadow:var(--qt-shadow-lift)}
.feature .ficon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,transparent);margin-bottom:16px}
.feature .ficon svg{width:22px;height:22px;color:var(--accent-ink)}
.feature h3{font-size:17px;margin:0 0 .3em}
.feature p{font-size:14.5px;margin:0}

/* Built for Saudi enterprises — regional readiness band.
   A subtle accent-tinted band between Evidence and Products; reuses the .feature
   card + .ficon halo for a native feel, with original inline line icons. */
.saudi-section{position:relative;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--surface)) 0%,var(--surface) 62%)}
.saudi-section::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 32%,transparent) 20%,color-mix(in srgb,var(--accent) 32%,transparent) 80%,transparent)}
.saudi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.saudi-card{display:flex;flex-direction:column;height:100%}
.saudi-card .ficon{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.saudi-card .qt-line-icon{width:23px;height:23px;color:var(--accent-ink)}
.saudi-card h3{font-size:17px;line-height:1.35;text-wrap:balance}
.saudi-note{display:flex;gap:9px;align-items:flex-start;justify-content:center;text-align:center;
  max-width:640px;margin:clamp(26px,3.4vw,40px) auto 0;font-size:13px;line-height:1.6;color:var(--text-2)}
.saudi-note svg{width:16px;height:16px;flex:none;margin-top:2px;opacity:.75}
@media (max-width:1366px){.saudi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.saudi-grid{grid-template-columns:1fr}.saudi-note{text-align:start;justify-content:flex-start}}

.cap-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px}
.cap-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--text-2)}
.cap-list li svg{width:18px;height:18px;color:var(--qt-status-verified);flex:none;margin-top:3px}

/* Trust / seals */
.trust-band{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center}
.trust-seal{display:flex;flex-direction:column;align-items:center;gap:10px;width:124px;text-align:center;transition:transform var(--qt-dur-standard) var(--qt-ease-standard)}
.trust-seal:hover{transform:translateY(-3px)}
.trust-seal img{width:66px;height:66px}
.trust-seal small{font-size:12px;color:var(--muted)}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--qt-ink),#16233F);color:#fff;border-radius:28px;padding:clamp(44px,6vw,80px);text-align:center;box-shadow:var(--qt-shadow-lift)}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 130% at 50% -25%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 62%);pointer-events:none}
.cta-band > *{position:relative}
.cta-band h2{color:#fff}
.cta-band p{color:var(--qt-neutral-300)}
.cta-band .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.cta-band .btn-secondary:hover{border-color:#fff;color:#fff}

/* Forms */
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--qt-radius-lg);padding:clamp(28px,4vw,48px);box-shadow:var(--qt-shadow-lift)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:600;color:var(--text)}
.field .req{color:var(--qt-status-destructive)}
.field input,.field select,.field textarea{font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--text);width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.field .err{font-size:12.5px;color:var(--qt-status-destructive);min-height:0}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--qt-status-destructive)}
.field.invalid .err{min-height:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-2)}
.consent input{width:18px;height:18px;margin-top:2px;flex:none}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.form-status{margin-top:16px;padding:14px 16px;border-radius:10px;font-weight:600;font-size:14.5px;display:none}
.form-status.ok{display:block;background:color-mix(in srgb,var(--qt-status-verified) 12%,transparent);color:#16785A;border:1px solid color-mix(in srgb,var(--qt-status-verified) 30%,transparent)}
.form-status.bad{display:block;background:color-mix(in srgb,var(--qt-status-destructive) 10%,transparent);color:#A5372E;border:1px solid color-mix(in srgb,var(--qt-status-destructive) 28%,transparent)}
.form-status.info{display:block;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.form-hint{display:flex;align-items:center;gap:8px;font-size:13.5px;margin:12px 0 0}
.form-hint svg{width:16px;height:16px;flex:none;opacity:.8}
.form-hint a{color:var(--accent-ink);font-weight:600}

/* Login gateway */
.gateway{max-width:520px;margin-inline:auto;text-align:center}
.gateway .brand-mark{width:64px;height:64px;background:var(--accent);border-radius:16px;display:grid;place-items:center;margin:0 auto 20px}
.gateway .brand-mark img{width:38px;height:38px}

/* Footer */
.site-footer{background:var(--qt-ink);color:var(--qt-neutral-300);padding:56px 0 32px;margin-top:12px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.footer-logo{display:inline-flex;align-items:center;margin-bottom:16px;border-radius:6px;padding:2px;margin-inline-start:-2px}
.footer-logo img{height:26px;width:auto;display:block}
.footer-logo:hover{opacity:.85}
.footer-logo:focus-visible{outline:2px solid var(--qt-halo);outline-offset:3px}
.footer-brand p{color:var(--qt-neutral-400);font-size:14px;max-width:280px;line-height:1.6}
.footer-col h4{color:#fff;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.footer-col a{display:block;color:var(--qt-neutral-300);font-size:14px;padding:5px 0}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:var(--qt-neutral-400)}
.footer-bottom a{color:var(--qt-neutral-400)}

/* Breadcrumb */
.crumbs{font-size:13px;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent-ink)}

/* Page hero (interior) */
.page-hero{padding:clamp(48px,7vw,88px) 0 clamp(24px,4vw,40px)}
.page-hero .eyebrow{margin-bottom:16px}

/* Legal / prose */
.prose{max-width:760px}
.prose h2{margin-top:1.6em}
.prose ul{color:var(--text-2)}
.prose li{margin-bottom:.4em}

/* Fragmentation (problem) */
.feature.frag .ficon.frag-ic{background:color-mix(in srgb,var(--qt-status-warning) 12%,transparent)}
.feature.frag .ficon.frag-ic svg{color:var(--qt-status-warning)}

/* Philosophy statement */
.philosophy{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--surface-2),var(--bg))}
.philosophy::before{content:"";position:absolute;inset:0;margin:auto;width:min(760px,84%);height:64%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);pointer-events:none}
.philosophy .container{position:relative}
.philo-lines{margin:22px 0 6px;font-size:clamp(28px,4.4vw,52px);font-weight:600;line-height:1.12;letter-spacing:-.02em;color:var(--text);display:flex;flex-wrap:wrap;gap:.35em .6em;justify-content:center}
.philo-lines span{color:var(--text)}
.philo-close{font-size:clamp(19px,2.4vw,26px);font-weight:500;color:var(--accent-ink);margin:0 0 .4em}
.philo-caption{max-width:640px;margin:14px auto 0}

/* Architecture stack (interactive) */
.arch-stack{display:grid;gap:14px;max-width:940px;margin-inline:auto}
.arch-layer{background:var(--surface);border:1px solid var(--border);border-radius:var(--qt-radius-card);overflow:hidden;position:relative;box-shadow:var(--qt-shadow-ambient)}
.arch-layer::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--p,var(--accent))}
.arch-head{display:flex;align-items:center;gap:16px;width:100%;padding:20px 22px;background:none;border:0;cursor:pointer;font:inherit;color:var(--text);text-align:start}
.arch-head:hover{background:color-mix(in srgb,var(--p,var(--accent)) 5%,transparent)}
.arch-index{font-family:var(--qt-font-mono);font-size:14px;font-weight:500;color:var(--p,var(--accent));min-width:26px}
.arch-titles{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.arch-title{font-size:18px;font-weight:600}
.arch-summary{font-size:14px;color:var(--text-2)}
.arch-chev{color:var(--muted);flex:none;transition:transform var(--qt-motion-base) var(--qt-motion-curve)}
.arch-chev svg{width:20px;height:20px}
.arch-head[aria-expanded="true"] .arch-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.arch-chev{transition:none}}
.arch-body{padding:0 22px 22px calc(22px + 4px)}
.arch-detail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px}
.arch-detail li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--text-2)}
.arch-detail li svg{width:17px;height:17px;color:var(--p,var(--accent));flex:none;margin-top:3px}

/* Product Explorer (interactive) */
.explorer{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
.exp-tabs{display:flex;flex-direction:column;gap:8px}
.exp-tab{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;cursor:pointer;font:inherit;color:var(--text);text-align:start;transition:border-color var(--qt-dur-fast),background var(--qt-dur-fast)}
.exp-tab img{width:34px;height:34px;border-radius:8px;flex:none}
.exp-tab-name{flex:1;font-weight:600;font-size:15px;min-width:0}
.exp-tab:hover{border-color:color-mix(in srgb,var(--p,var(--accent)) 40%,transparent)}
.exp-tab[aria-selected="true"]{border-color:var(--p,var(--accent));background:color-mix(in srgb,var(--p,var(--accent)) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p,var(--accent)) 30%,transparent)}
.exp-tab .status-pill{font-size:11px;padding:2px 7px}
.exp-panels{min-width:0}
.exp-panel{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--p,var(--accent));border-radius:var(--qt-radius-card);padding:clamp(24px,3vw,36px);box-shadow:var(--qt-shadow-ambient)}
.exp-panel-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.exp-panel-head img{width:48px;height:48px;border-radius:11px}
.exp-panel-head h3{margin:0 0 4px;font-size:22px}
.exp-field{margin-bottom:20px}
.exp-field h4{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:600}
.exp-field p{margin:0;color:var(--text-2)}
.exp-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.exp-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.exp-list li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--text-2)}
.exp-list li svg{width:17px;height:17px;color:var(--p,var(--accent));flex:none;margin-top:3px}
.exp-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:860px){
  .explorer{grid-template-columns:1fr}
  .exp-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
  .exp-tab{flex:0 0 auto;min-width:210px}
  .exp-cols{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
  .arch-detail{grid-template-columns:1fr}
  .philo-lines{font-size:clamp(24px,7vw,34px)}
}

/* ============================================================================
   MOTION SYSTEM — premium, calm, enterprise. transform/opacity only.
   Content is fully visible by default; hidden-until-revealed states apply ONLY
   under html.js-motion (added by site.js when JS runs AND reduced-motion is off).
   → no-JS, reduced-motion and crawlers always see the final content.
============================================================================ */
/* Entrance vocabulary — FAIL-SAFE: content is ALWAYS visible by default; the
   entrance is an animation that only PLAYS motion. If JS never adds .in, or
   animations don't run, content is fully visible. Never hidden by default. */
@keyframes qt-rise{from{opacity:0;transform:translateY(var(--qt-dist-md)) scale(var(--qt-scale-enter))}to{opacity:1;transform:none}}
html.js-motion .reveal.in{animation:qt-rise var(--qt-dur-emphasis) var(--qt-ease-enter) both}
/* Staggered groups: children play in sequence when the group enters view */
html.js-motion [data-stagger].in > *{animation:qt-rise var(--qt-dur-emphasis) var(--qt-ease-enter) backwards;animation-delay:calc(var(--i,0) * var(--qt-stagger-standard))}

/* Hero orchestration — one-shot on load, non-blocking; content readable even if
   animations don't run (default visible; backwards fill only during the delay). */
html.js-motion .hero [data-seq]{animation:qt-rise var(--qt-dur-hero) var(--qt-ease-enter) backwards;animation-delay:calc(var(--s,0) * 115ms + 140ms)}

/* Quatron Ring — one-time assembly + settle (NOT a spinner). Inline SVG in hero. */
.qt-ring{display:block;width:100%;height:100%}
.qt-ring [data-seg],.qt-ring [data-tail]{fill:none;stroke:var(--qt-blue);stroke-width:14}
.qt-ring [data-tail]{stroke-linecap:round}
html.js-motion .qt-ring [data-seg]{stroke-dasharray:120;stroke-dashoffset:120;opacity:0;
  animation:qt-ring-seg var(--qt-dur-hero) var(--qt-ease-emphasis) forwards;animation-delay:calc(var(--s,0) * 130ms + 220ms)}
html.js-motion .qt-ring [data-tail]{stroke-dasharray:26;stroke-dashoffset:26;stroke-linecap:round;
  animation:qt-ring-seg var(--qt-dur-emphasis) var(--qt-ease-emphasis) forwards;animation-delay:760ms}
html.js-motion .qt-ring{animation:qt-ring-settle var(--qt-dur-hero) var(--qt-ease-emphasis)}
@keyframes qt-ring-seg{from{stroke-dashoffset:120;opacity:0}60%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes qt-ring-settle{from{transform:rotate(-9deg)}to{transform:rotate(0)}}

/* Header — elevate on scroll */
.site-header{transition:box-shadow var(--qt-dur-standard) var(--qt-ease-standard),background var(--qt-dur-standard) var(--qt-ease-standard),border-color var(--qt-dur-standard) var(--qt-ease-standard)}
html.scrolled .site-header{box-shadow:0 1px 0 var(--border),0 6px 24px rgba(13,20,32,.06)}

/* Buttons/links — restrained; arrow nudge (RTL-aware) */
.btn svg{transition:transform var(--qt-dur-fast) var(--qt-ease-standard)}
.btn-primary:hover svg,.btn-secondary:hover svg,.readmore:hover svg{transform:translateX(3px)}
[dir="rtl"] .btn-primary:hover svg,[dir="rtl"] .btn-secondary:hover svg,[dir="rtl"] .readmore:hover svg{transform:translateX(-3px)}
.btn:focus-visible svg{transform:translateX(3px)}
[dir="rtl"] .btn:focus-visible svg{transform:translateX(-3px)}

/* Mobile menu — staggered items, inline-start origin, calm */
.mobile-nav{transform:translateX(-8px);opacity:0;transition:opacity var(--qt-dur-fast) var(--qt-ease-enter),transform var(--qt-dur-fast) var(--qt-ease-enter)}
[dir="rtl"] .mobile-nav{transform:translateX(8px)}
.mobile-nav.open{opacity:1;transform:none}
html.js-motion .mobile-nav.open a,html.js-motion .mobile-nav.open .btn{animation:qt-menu-item var(--qt-dur-standard) var(--qt-ease-enter) both;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
@keyframes qt-menu-item{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Product Explorer — crossfade panel switch, accent transition */
.exp-panel{transition:opacity var(--qt-dur-standard) var(--qt-ease-enter),transform var(--qt-dur-standard) var(--qt-ease-enter)}
html.js-motion .exp-panel.switching{opacity:0;transform:translateY(6px)}
.exp-tab,.exp-panel{transition:border-color var(--qt-dur-standard) var(--qt-ease-standard),background var(--qt-dur-standard) var(--qt-ease-standard),box-shadow var(--qt-dur-standard) var(--qt-ease-standard),opacity var(--qt-dur-standard) var(--qt-ease-enter),transform var(--qt-dur-standard) var(--qt-ease-enter)}
.exp-panel-head img{transition:transform var(--qt-dur-emphasis) var(--qt-ease-emphasis)}
html.js-motion .exp-panel:not(.switching) .exp-panel-head img{animation:qt-glyph-in var(--qt-dur-emphasis) var(--qt-ease-emphasis)}
@keyframes qt-glyph-in{from{transform:scale(.94)}to{transform:scale(1)}}

/* Architecture — sequential connector between layers */
.arch-stack{position:relative}
.arch-layer{position:relative}
html.js-motion .arch-stack.in .arch-layer{animation:qt-rise var(--qt-dur-standard) var(--qt-ease-enter) backwards;animation-delay:calc(var(--i,0) * var(--qt-stagger-section))}
.arch-layer:not(:last-child)::after{content:"";position:absolute;inset-inline-start:calc(4px + 22px);bottom:-12px;width:2px;height:12px;background:color-mix(in srgb,var(--p,var(--accent)) 45%,transparent);transform-origin:top;transition:transform var(--qt-dur-standard) var(--qt-ease-standard)}
html.js-motion .arch-stack:not(.in) .arch-layer:not(:last-child)::after{transform:scaleY(0)}

/* Form — Ring success confirmation (draw, not a spinner) */
.form-success-ring{width:44px;height:44px;display:none;margin:0 auto 8px}
.form-status.ok .form-success-ring{display:block}
.form-success-ring circle,.form-success-ring path{fill:none;stroke:var(--qt-status-verified);stroke-width:6;stroke-linecap:round}
html.js-motion .form-status.ok .form-success-ring circle{stroke-dasharray:126;stroke-dashoffset:126;animation:qt-draw var(--qt-dur-emphasis) var(--qt-ease-emphasis) forwards}
html.js-motion .form-status.ok .form-success-ring path{stroke-dasharray:36;stroke-dashoffset:36;animation:qt-draw var(--qt-dur-standard) var(--qt-ease-emphasis) .35s forwards}
@keyframes qt-draw{to{stroke-dashoffset:0}}
/* Error text: fade in, never shake */
.field.invalid .err{animation:qt-fade var(--qt-dur-fast) var(--qt-ease-enter)}
@keyframes qt-fade{from{opacity:0}to{opacity:1}}

/* Reduced motion — show final state, disable all staged/looping/transform motion */
@media (prefers-reduced-motion:reduce){
  html.js-motion .reveal:not(.in),html.js-motion [data-stagger] > *,html.js-motion .hero [data-seq]{opacity:1;transform:none;animation:none}
  .qt-ring [data-seg],.qt-ring [data-tail]{stroke-dashoffset:0;opacity:1;animation:none}
  .qt-ring{animation:none}
  html.js-motion .arch-stack.in .arch-layer,html.js-motion .mobile-nav.open a,html.js-motion .mobile-nav.open .btn{animation:none}
  html.js-motion .exp-panel.switching{opacity:1;transform:none}
  .form-success-ring circle,.form-success-ring path{stroke-dashoffset:0;animation:none}
  *{scroll-behavior:auto!important}
}

/* Responsive */

/* Responsive */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-visual{order:-1;min-height:240px}
  .qt-core-stage{width:min(400px,80%)}
  .qt-frag{font-size:12.5px;padding:6px 11px 6px 7px}
  .qt-frag-ic{width:23px;height:23px}
  /* stacked hero: the core stage carries the visual — drop the redundant watermark */
  .hero-watermark{display:none}
  .foundations{grid-template-columns:repeat(2,1fr)}
  .product-grid,.grid-3{grid-template-columns:repeat(2,1fr)}
  .cap-list{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:1104px){
  /* The full inline English nav needs ~1105px; below that it would push the header
     actions off-screen. Collapse the links into the menu, but keep the full header
     actions (language, Login, Request Demo) on tablet and small-laptop widths. */
  .nav{display:none}
  .menu-toggle{display:inline-flex}
  .header-actions{margin-inline-start:auto}
}
@media (max-width:820px){
  .nav{display:none}
  /* Brand hard-left, actions (Login + menu) hard-right; bigger wordmark. */
  .header-row{height:64px;justify-content:space-between;gap:12px}
  .header-actions{margin-inline-start:auto;gap:10px}
  .brand img{height:30px}
  /* Keep Login reachable on mobile even if the menu never opens; move the rest into the menu. */
  .header-actions .lang-switch,.header-actions .btn-primary{display:none}
  .header-actions .btn-secondary{display:inline-flex}
  .menu-toggle{display:inline-flex}
  .mobile-nav{top:64px;height:calc(100vh - 64px);height:calc(100dvh - 64px)}
}
@media (max-width:380px){
  .header-actions .btn-secondary{padding-inline:14px;font-size:14px}
  .brand img{height:28px}
}
@media (max-width:640px){
  .container{padding-inline:18px}
  .foundations,.product-grid,.grid-2,.grid-3,.cap-list,.form-grid,.footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  /* Hero: lead with the message; ring becomes a compact centred accent above it. */
  .hero{padding:30px 0 48px;text-align:center}
  .hero-grid{gap:18px}
  .hero-visual{min-height:0}
  .hero-visual::before{width:216px;height:216px}
  .ring-wrap{width:168px}
  .hero-watermark{display:none}
  /* Mobile: the orbit would crowd 360px — lead with the copy + a clean, compact Q. */
  .qt-core-stage{width:196px}
  .qt-core-stage .ring-wrap{width:84%}
  .qt-frag,.qt-core-links,.qt-core-orbit,.qt-core-evi{display:none}
  .hero .eyebrow{margin-inline:auto}
  .hero h1{font-size:clamp(36px,10vw,50px)}
  .hero .lead{max-width:38ch;margin-inline:auto}
  .hero-cta{margin-top:26px;gap:12px;flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;justify-content:center}
}
@media (max-width:380px){
  .hero{padding-top:24px}
  .ring-wrap{width:150px}
  .hero-visual::before{width:190px;height:190px}
  .hero h1{font-size:34px}
}

/* ============================================================================
   QUATRON — CINEMATIC EXPERIENCE (v1.7)
   New homepage sections + scroll storytelling. transform/opacity only.
   Hidden-until-revealed states apply ONLY under html.js-motion; everything is
   fully visible + readable with no JS, reduced motion, or on mobile.
============================================================================ */

/* ---- Hero: signals, scroll cue, scroll-linked ring ------------------------ */
.hero-copy{position:relative;z-index:1}
.hero-signals{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.hero-signals li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--text-2)}
.hero-signals li svg{width:17px;height:17px;color:var(--qt-status-verified);flex:none}
.hero-scrollcue{position:absolute;inset-inline:0;bottom:clamp(14px,3vw,26px);margin-inline:auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);pointer-events:none}
html[lang="ar"] .hero-scrollcue{text-transform:none;letter-spacing:0}
.hero-scrollcue-track{width:22px;height:34px;border:1.5px solid var(--border-strong);border-radius:12px;display:flex;justify-content:center;padding-top:6px}
.hero-scrollcue-dot{width:4px;height:7px;border-radius:3px;background:var(--accent)}
html.js-motion .hero-scrollcue-dot{animation:qt-scrollcue 1.8s var(--qt-ease-standard) infinite}
@keyframes qt-scrollcue{0%{transform:translateY(0);opacity:1}60%{transform:translateY(10px);opacity:.2}100%{transform:translateY(0);opacity:0}}
/* Scroll-linked ring: JS sets --hp (0 at top → 1 leaving hero) on [data-hero] */
html.js-motion .hero[data-hero]{--hp:0}
html.js-motion [data-hero-ring]{transform:translateY(calc(var(--hp,0) * -34px)) scale(calc(1 - var(--hp,0) * .06));opacity:calc(1 - var(--hp,0) * .55);will-change:transform,opacity}
html.js-motion [data-hero] .hero-watermark{transform:translateY(calc(var(--hp,0) * 26px)) rotate(calc(var(--hp,0) * 8deg));will-change:transform}

/* ---- Foundations: subtle connective spine (desktop) ----------------------- */
@media (min-width:1025px){
  .foundations{position:relative}
  .foundations::before{content:"";position:absolute;top:0;inset-inline:8%;height:1px;
    background:linear-gradient(90deg,transparent,var(--border-strong) 12%,var(--border-strong) 88%,transparent);opacity:.7}
}

/* ---- Platform preview (illustrative interface) ---------------------------- */
.preview-section{overflow:hidden}
.pv-frame{max-width:1020px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--qt-radius-lg);
  box-shadow:var(--qt-shadow-lift);overflow:hidden;transform:perspective(1600px) rotateX(0deg);transition:transform var(--qt-dur-emphasis) var(--qt-ease-emphasis),box-shadow var(--qt-dur-emphasis) var(--qt-ease-emphasis)}
html.js-motion .pv-frame:not(.in){transform:perspective(1600px) rotateX(7deg) translateY(20px)}
.pv-chrome{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.pv-dots{display:inline-flex;gap:7px}
.pv-dots i{width:11px;height:11px;border-radius:50%;background:var(--border-strong);display:block}
.pv-url{display:inline-flex;align-items:center;gap:7px;font-family:var(--qt-font-mono);font-size:13px;color:var(--text-2);
  background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:5px 14px;margin-inline:auto}
.pv-url svg{width:13px;height:13px;color:var(--qt-status-verified)}
.pv-body{display:grid;grid-template-columns:210px 1fr;min-height:340px}
.pv-side{background:var(--surface-2);border-inline-end:1px solid var(--border);padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.pv-side-brand{display:flex;align-items:center;gap:9px}
.pv-side-brand span{height:9px;width:74px;border-radius:5px;background:var(--border-strong)}
.pv-side-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
html[lang="ar"] .pv-side-label{letter-spacing:0;text-transform:none}
.pv-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.pv-nav li{font-size:14px;color:var(--text-2);padding:9px 12px;border-radius:9px;font-weight:500}
.pv-nav li.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-ink);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.pv-main{padding:22px clamp(18px,3vw,30px);display:flex;flex-direction:column;gap:18px}
.pv-main-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pv-main-head strong{display:block;font-size:19px;color:var(--text);letter-spacing:-.01em}
.pv-main-head span{font-size:13px;color:var(--muted)}
.pv-verified{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--qt-status-verified);
  background:color-mix(in srgb,var(--qt-status-verified) 12%,transparent);border:1px solid color-mix(in srgb,var(--qt-status-verified) 30%,transparent);border-radius:999px;padding:4px 11px;white-space:nowrap}
.pv-verified svg{width:15px;height:15px}
.pv-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pv-tile{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 16px;font-size:14.5px;font-weight:500;color:var(--text)}
.pv-tile-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
html.js-motion .pv-frame.in .pv-tile{animation:qt-rise var(--qt-dur-standard) var(--qt-ease-enter) backwards;animation-delay:calc(var(--d,0) * 90ms + 260ms)}
.pv-evi{display:flex;align-items:center;gap:10px;margin-top:auto;padding:13px 16px;border-radius:12px;font-size:13.5px;color:var(--text-2);
  background:linear-gradient(90deg,color-mix(in srgb,var(--qt-status-verified) 8%,transparent),transparent);border:1px dashed color-mix(in srgb,var(--qt-status-verified) 34%,transparent)}
.pv-evi svg{width:18px;height:18px;color:var(--qt-status-verified);flex:none}
.pv-note{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;color:var(--muted);padding:11px 18px;border-top:1px solid var(--border);background:var(--surface-2)}
.pv-note svg{width:14px;height:14px}

/* ---- Evidence chain -------------------------------------------------------- */
.evidence-chain{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:900px;margin:0 auto clamp(36px,5vw,56px);padding-top:6px}
.evi-line{position:absolute;top:33px;inset-inline:11%;height:2px;background:color-mix(in srgb,var(--qt-status-verified) 42%,transparent);transform-origin:left;border-radius:2px}
[dir="rtl"] .evi-line{transform-origin:right}
html.js-motion .evidence-chain:not(.in) .evi-line{transform:scaleX(0)}
html.js-motion .evi-line{transition:transform var(--qt-dur-hero) var(--qt-ease-emphasis) .1s}
.evi-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;position:relative;z-index:1}
.evi-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid color-mix(in srgb,var(--qt-status-verified) 40%,transparent);color:var(--qt-status-verified);box-shadow:var(--qt-shadow-ambient)}
.evi-ic svg{width:22px;height:22px}
.evi-h{font-size:15px;font-weight:600;color:var(--text)}
.evi-p{font-size:12.5px;color:var(--muted);max-width:16ch}
html.js-motion .evidence-chain.in .evi-node{animation:qt-rise var(--qt-dur-standard) var(--qt-ease-enter) backwards;animation-delay:calc(var(--d,0) * 130ms + 200ms)}

/* ---- Product ecosystem (one core, featured + roadmap) --------------------- */
.ecosystem{display:flex;flex-direction:column;align-items:center;gap:26px}
.eco-core{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;color:var(--accent-ink);
  background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:999px;padding:9px 20px;position:relative}
.eco-core::after{content:"";position:absolute;top:100%;inset-inline:0;margin-inline:auto;width:1px;height:26px;background:linear-gradient(var(--border-strong),transparent)}
.feat-grid{width:100%}
.product-grid.feat-grid{grid-template-columns:repeat(3,1fr)}
.product-card.feat{display:flex;flex-direction:column;gap:2px}
.product-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.product-card.feat .product-tile{margin-bottom:0}
.product-card.feat h3{font-size:20px}
.product-open{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;font-size:14px;color:color-mix(in srgb,var(--p,var(--accent)) 80%,var(--qt-ink))}
.product-open svg{width:16px;height:16px;transition:transform var(--qt-dur-fast) var(--qt-ease-standard)}
.product-card.feat:hover .product-open svg{transform:translateX(3px)}
[dir="rtl"] .product-card.feat:hover .product-open svg{transform:translateX(-3px)}
.roadmap{width:100%;max-width:900px;margin:8px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;justify-content:center;
  padding-top:26px;border-top:1px solid var(--border)}
.roadmap-label{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
html[lang="ar"] .roadmap-label{letter-spacing:0;text-transform:none}
.roadmap-label svg{width:16px;height:16px}
.roadmap-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.roadmap-chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--text-2);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 14px 7px 8px;transition:border-color var(--qt-dur-fast),color var(--qt-dur-fast),transform var(--qt-dur-fast) var(--qt-ease-standard)}
[dir="rtl"] .roadmap-chip{padding:7px 8px 7px 14px}
.roadmap-chip img{width:22px;height:22px;border-radius:6px}
.roadmap-chip:hover{text-decoration:none;transform:translateY(-2px);border-color:color-mix(in srgb,var(--p,var(--accent)) 45%,transparent);color:var(--text)}
.eco-caption{text-align:center;font-size:14px;margin:22px auto 0;max-width:60ch}

/* ---- Architecture scroll storytelling (centerpiece) ----------------------- */
/* NOTE: never put overflow:clip/hidden on .arch-section or any sticky ancestor —
   it makes the section the sticky containing block and breaks viewport pinning.
   Horizontal clipping is scoped to .arch-viz only. */
.arch-section{position:relative}
/* Default / no-JS / reduced-motion / mobile: stable stacked layout (NOT pinned). */
.arch-scroll{position:relative}
.arch-sticky{}
.arch-stage{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.06fr);gap:clamp(28px,5vw,64px);align-items:center}
.arch-viz{position:relative;min-height:340px;display:grid;place-items:center;overflow:hidden}
.arch-slabs{position:relative;width:min(440px,92%);aspect-ratio:1/.92;transform-style:preserve-3d}
.arch-slab{position:absolute;inset-inline:0;top:50%;height:78px;border-radius:16px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--p) 90%,#fff 4%),color-mix(in srgb,var(--p) 74%,var(--qt-ink)));
  color:#fff;box-shadow:0 18px 40px -20px color-mix(in srgb,var(--p) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateY(calc(-50% + (var(--i) - 1.5) * -84px));
  display:flex;align-items:center}
.arch-slab-face{display:flex;align-items:center;gap:13px;padding-inline:20px;width:100%;min-width:0}
.arch-slab-index{font-family:var(--qt-font-mono);font-size:13px;font-weight:500;opacity:.7;flex:none}
.arch-slab-title{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-panels{position:relative}
.arch-dots{display:flex;gap:8px;margin-bottom:22px}
.arch-dot{width:26px;height:4px;border-radius:3px;background:var(--border-strong);transition:background var(--qt-dur-standard) var(--qt-ease-standard)}
.arch-dot.on{background:var(--p,var(--accent))}
.arch-panel{border-inline-start:3px solid var(--p,var(--accent));padding-inline-start:22px;margin-bottom:26px}
.arch-panel-index{font-family:var(--qt-font-mono);font-size:13px;color:var(--p,var(--accent));font-weight:500}
.arch-panel h3{font-size:clamp(21px,2.4vw,28px);margin:6px 0 .4em}
.arch-panel-summary{font-size:16.5px;color:var(--text-2);margin-bottom:16px}
.arch-panel .arch-detail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px}
.arch-panel .arch-detail li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--text-2)}
.arch-panel .arch-detail li svg{width:17px;height:17px;color:var(--p,var(--accent));flex:none;margin-top:3px}

/* PINNED cinematic mode — desktop + JS + motion only (class added by site.js). */
html.js-motion .arch-section.arch-cinema .arch-scroll{height:calc(var(--arch-n,4) * 68vh + 26vh)}
html.js-motion .arch-section.arch-cinema .arch-sticky{position:sticky;top:0;height:100vh;display:grid;align-items:center}
html.js-motion .arch-section.arch-cinema .arch-slabs{transform:perspective(1500px) rotateX(46deg) rotateZ(0deg);transform-origin:center 60%}
html.js-motion .arch-section.arch-cinema .arch-slab{opacity:0;transform:translateY(calc(-50% + (var(--i) - 1.5) * -84px)) translateZ(-40px) scale(.96);
  transition:opacity var(--qt-dur-emphasis) var(--qt-ease-emphasis),transform var(--qt-dur-emphasis) var(--qt-ease-emphasis)}
html.js-motion .arch-section.arch-cinema .arch-slab.built{opacity:1;transform:translateY(calc(-50% + (var(--i) - 1.5) * -84px)) translateZ(0) scale(1)}
html.js-motion .arch-section.arch-cinema .arch-slab.current{box-shadow:0 26px 54px -18px color-mix(in srgb,var(--p) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.3),0 0 0 2px color-mix(in srgb,#fff 55%,transparent)}
html.js-motion .arch-section.arch-cinema .arch-slab:not(.current).built{opacity:.72}
html.js-motion .arch-section.arch-cinema .arch-panel{position:absolute;inset-inline:0;top:0;z-index:1;opacity:0;transform:translateY(16px);pointer-events:none;
  background:var(--bg);padding-block:2px 8px;transition:opacity var(--qt-dur-fast) var(--qt-ease-enter),transform var(--qt-dur-fast) var(--qt-ease-enter)}
html.js-motion .arch-section.arch-cinema .arch-panels{min-height:clamp(300px,46vh,380px)}
html.js-motion .arch-section.arch-cinema .arch-panel[data-active]{z-index:2;opacity:1;transform:none;pointer-events:auto}
html.js-motion .arch-section.arch-cinema .arch-dots{position:relative;z-index:2}

/* ---- Section transition mask (light↔dark seam under CTA) ------------------- */
.cta-band{isolation:isolate}

/* ---- Responsive: new components ------------------------------------------- */
@media (max-width:1024px){
  .product-grid.feat-grid{grid-template-columns:repeat(2,1fr)}
  .arch-stage{grid-template-columns:1fr;gap:34px}
  .arch-viz{order:-1;min-height:280px}
}
@media (max-width:820px){
  /* Mobile: never pin the architecture (stable touch scroll). site.js also skips cinema. */
  .pv-body{grid-template-columns:1fr}
  .pv-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;border-inline-end:0;border-bottom:1px solid var(--border)}
  .pv-side-label{display:none}
  .pv-nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .pv-nav li{padding:6px 11px;font-size:13px}
}
@media (max-width:680px){
  .evidence-chain{grid-template-columns:repeat(2,1fr);gap:26px 14px}
  .evi-line{display:none}
  .product-grid.feat-grid{grid-template-columns:1fr}
  .arch-viz{min-height:230px}
  .arch-slabs{width:min(340px,94%)}
  .arch-slab{height:64px}
  .arch-panel .arch-detail{grid-template-columns:1fr}
  .hero-signals{gap:8px 16px}
}

/* ---- Reduced motion: freeze everything to final, readable state ----------- */
@media (prefers-reduced-motion:reduce){
  html.js-motion [data-hero-ring],html.js-motion [data-hero] .hero-watermark{transform:none!important;opacity:1!important}
  .hero-scrollcue-dot{animation:none}
  html.js-motion .pv-frame:not(.in),html.js-motion .pv-frame.in .pv-tile{transform:none;opacity:1;animation:none}
  html.js-motion .evidence-chain:not(.in) .evi-line{transform:none}
  html.js-motion .evidence-chain.in .evi-node{animation:none}
  html.js-motion .arch-section.arch-cinema .arch-slab{opacity:1;transform:translateY(calc(-50% + (var(--i) - 1.5) * -84px));transition:none}
  html.js-motion .arch-section.arch-cinema .arch-panel{position:static;opacity:1;transform:none;pointer-events:auto}
}

/* ---- Form submit busy spinner --------------------------------------------- */
.btn-spinner{display:inline-block;width:16px;height:16px;border:2px solid color-mix(in srgb,#fff 45%,transparent);border-top-color:#fff;border-radius:50%;vertical-align:-2px;animation:qt-spin .7s linear infinite}
@keyframes qt-spin{to{transform:rotate(360deg)}}
.btn[aria-busy="true"]{opacity:.85;cursor:progress}
@media (prefers-reduced-motion:reduce){.btn-spinner{animation-duration:1.4s}}