/* ============================================================================
   AGMS storefront — modern SaaS design system (light).
   Layers on top of Bootstrap 5: overrides tokens, restyles primitives, and adds
   the marketing components (hero, feature cards, stats, CTA, pricing, product mock).
   Palette: near-white ground, ink text, indigo accent, soft violet gradients.
   ============================================================================ */
:root{
  --bg:#FAFAFC; --surface:#ffffff; --surface-2:#F6F6FB; --surface-3:#F1F1F8;
  --ink:#16181D; --ink-2:#3B404C; --muted:#666D7A; --faint:#6B7280;  /* faint text lifted to WCAG AA (~4.6:1) */
  --line:#EAEBF1; --line-2:#F1F2F7;
  --accent:#5B5BD6; --accent-2:#7C5CF6; --accent-3:#A855C7; --accent-ink:#ffffff;
  --accent-soft:#ECECFB; --accent-softer:#F5F5FE; --accent-line:#DcdcF7;
  --ok:#15803D; --ok-bg:#E7F6EC; --warn:#B45309; --warn-bg:#FBF0DE; --bad:#DC2626; --bad-bg:#FBEBEB;
  --radius:16px; --radius-sm:11px; --radius-lg:24px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 2px 6px rgba(16,24,40,.05);
  --shadow-md:0 8px 24px -8px rgba(16,24,40,.12),0 2px 6px rgba(16,24,40,.04);
  --shadow-lg:0 32px 64px -24px rgba(76,62,180,.30),0 12px 28px -14px rgba(16,24,40,.14);
  --shadow-xl:0 48px 90px -32px rgba(76,62,180,.42),0 20px 44px -20px rgba(16,24,40,.20);
  --shadow-glow:0 0 0 1px rgba(91,91,214,.05),0 24px 60px -22px rgba(91,91,214,.40);
  --ring:0 0 0 4px rgba(91,91,214,.16);
  --grad:linear-gradient(118deg,#6D5BF0 0%,#8B5CF6 46%,#B368C4 100%);
  --grad-text:linear-gradient(100deg,#5B5BD6,#8B5CF6 55%,#B368C4);
  /* Subtle fractal grain — the premium-SaaS texture (layered over gradients at low opacity). */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  --font:'Noto Sans','Noto Sans Arabic',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:var(--font);
  /* Semantic surfaces themes reskin (defaults = the AGMS look). */
  --nav-bg:rgba(255,255,255,.78); --footer-bg:#0F1116; --footer-ink:rgba(255,255,255,.62); --hero-glow:rgba(139,92,246,.16);
  --bs-primary:#5B5BD6; --bs-primary-rgb:91,91,214;
  --bs-body-color:#16181D; --bs-body-font-family:var(--font); --bs-border-color:var(--line);
  --bs-link-color:#5B5BD6; --bs-link-hover-color:#4A4AC0;
  scroll-behavior:smooth;
}
*{box-sizing:border-box}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Whisper-subtle film grain across the whole page — reads only over gradients/dark bands, adds depth. */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;background-image:var(--grain);background-size:170px 170px;opacity:.03}
::selection{background:rgba(91,91,214,.18)}
a{color:var(--accent);text-underline-offset:2px}
h1,h2,h3,h4,h5{color:var(--ink);letter-spacing:-.02em;font-weight:700;font-family:var(--font-display)}
.text-muted{color:var(--muted)!important}
.lead{color:var(--ink-2)}
hr{border-color:var(--line);opacity:1}

/* ── Container rhythm ───────────────────────────────────────────────────── */
.container{max-width:1140px}
.section{padding:5.5rem 0}
.section-sm{padding:3.5rem 0}
/* Banded section — surface ground framed by hairlines (reused by pricing + feature bands). */
.section--banded{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-softer);border:1px solid var(--accent-line);padding:.32rem .8rem;border-radius:var(--radius-pill)}
.section-title{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;font-weight:700;letter-spacing:-.03em}
.section-sub{color:var(--muted);font-size:1.05rem;max-width:38rem}
.gradient-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{border-radius:var(--radius-pill);font-weight:600;letter-spacing:-.01em;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;padding:.55rem 1.2rem}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:.8rem 1.7rem;font-size:1.02rem}
.btn-sm{padding:.4rem .9rem}
.btn-primary{--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;--bs-btn-active-border-color:transparent;
  background:var(--grad);border:0;color:var(--accent-ink);box-shadow:0 8px 20px -8px rgba(91,91,214,.6);position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent)}
.btn-primary:hover::after{animation:sheen .85s ease}
@keyframes sheen{from{left:-75%}to{left:135%}}
.btn-primary:hover,.btn-primary:focus-visible{color:var(--accent-ink);transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(91,91,214,.7)}
.btn-primary:active{background:var(--grad);color:var(--accent-ink)}
.btn-dark{--bs-btn-bg:#16181D;--bs-btn-border-color:#16181D;--bs-btn-hover-bg:#000;--bs-btn-hover-border-color:#000;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.btn-dark:hover{transform:translateY(-2px)}
.btn-outline-dark{--bs-btn-color:#16181D;--bs-btn-border-color:#D6D8E0;--bs-btn-hover-bg:#16181D;--bs-btn-hover-border-color:#16181D;--bs-btn-hover-color:#fff;background:#fff}
.btn-outline-dark:hover{transform:translateY(-2px)}
.btn-outline-light{--bs-btn-border-color:rgba(255,255,255,.5)}
.btn-outline-secondary{--bs-btn-color:#3B404C;--bs-btn-border-color:#DEE0E8;--bs-btn-hover-bg:#F3F3F9;--bs-btn-hover-border-color:#C9CCD8;--bs-btn-hover-color:#16181D;background:#fff}
.btn-light{--bs-btn-bg:#fff;--bs-btn-border-color:var(--line);--bs-btn-hover-bg:#fff;box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--ink-2);border:0}
.btn-ghost:hover{background:var(--surface-3);color:var(--ink)}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.header{position:sticky;top:0;z-index:1030}
.navbar{background:var(--nav-bg);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);padding:.6rem 0}
.navbar-brand{font-weight:800;letter-spacing:-.02em;font-size:1.3rem;color:var(--ink);display:inline-flex;align-items:center;gap:.5rem}
.navbar-brand .brand-dot{width:1.6rem;height:1.6rem;border-radius:8px;background:var(--grad);display:inline-block;box-shadow:0 6px 14px -6px rgba(91,91,214,.7);position:relative}
.navbar-brand .brand-dot::after{content:"";position:absolute;inset:5px 5px auto auto;width:.42rem;height:.42rem;border-radius:50%;background:rgba(255,255,255,.9)}
.navbar .nav-link{color:var(--ink-2);font-weight:500;font-size:.94rem;padding:.4rem .85rem;border-radius:var(--radius-pill);transition:color .15s,background .15s}
.navbar .nav-link:hover{color:var(--ink);background:var(--surface-3)}
.navbar .nav-link.active{color:var(--accent);background:var(--accent-softer)}
.navbar .btn{padding:.44rem 1.1rem}
.navbar .dropdown-menu{border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:.35rem;margin-top:.5rem}
.navbar .dropdown-item{border-radius:8px;font-size:.9rem;padding:.45rem .7rem}
.navbar .dropdown-item.active,.navbar .dropdown-item:active{background:var(--accent);color:var(--accent-ink)}
.navbar-toggler{border:1px solid var(--line);border-radius:10px;padding:.35rem .55rem}
.navbar-toggler:focus{box-shadow:var(--ring)}
.nav-search .form-control{border-radius:var(--radius-pill);background:var(--surface-2);border-color:var(--line);padding-left:.9rem;min-width:210px}
.nav-search .form-control:focus{background:var(--surface)}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-control,.form-select{border-radius:var(--radius-sm);border-color:var(--line);color:var(--ink);padding:.6rem .85rem;background:var(--surface)}
.form-control::placeholder{color:var(--faint)}
.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:var(--ring)}
.form-label{font-weight:600;font-size:.85rem;color:var(--ink-2)}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:6rem 0 5.5rem;background:
    radial-gradient(60rem 34rem at 78% -8%,rgba(139,92,246,.22),transparent 60%),
    radial-gradient(48rem 30rem at 6% 8%,rgba(91,91,214,.18),transparent 55%),
    radial-gradient(40rem 26rem at 55% 120%,rgba(179,104,196,.16),transparent 60%),
    var(--bg)}
/* Compact centred hero for the marketing sub-pages (features / how-it-works / pricing). */
.hero--sm{padding:4rem 0 3.2rem}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background-image:
    linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(62% 58% at 50% 38%,#000,transparent 76%);
  mask-image:radial-gradient(62% 58% at 50% 38%,#000,transparent 76%);opacity:.5;pointer-events:none}
/* Slow-drifting aurora behind the hero content for depth (respects reduced-motion). */
.hero .aurora{content:"";position:absolute;inset:-25% -12% auto -12%;height:80%;z-index:0;pointer-events:none;
  background:radial-gradient(30rem 22rem at 22% 34%,rgba(124,92,246,.30),transparent 60%),radial-gradient(26rem 20rem at 82% 16%,rgba(168,85,199,.26),transparent 60%);
  filter:blur(26px);opacity:.75;animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(-3%,0,0) scale(1)}100%{transform:translate3d(4%,2%,0) scale(1.09)}}
.hero .container{position:relative;z-index:1}
.hero h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.05;font-weight:800;letter-spacing:-.035em;margin-bottom:1.1rem}
.hero .lead{font-size:1.18rem;color:var(--ink-2);max-width:36rem}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;color:var(--muted);font-size:.86rem;font-weight:500}
.hero-badges span{display:inline-flex;align-items:center;gap:.4rem}
.hero-badges .tick{color:var(--accent)}

/* Product mock (stylised dashboard in a browser frame) */
.mock{border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-xl);border:1px solid var(--line);overflow:hidden;transform:perspective(1600px) rotateY(-8deg) rotateX(3deg);transition:transform .5s ease}
.mock:hover{transform:perspective(1600px) rotateY(-3deg) rotateX(1deg)}
.mock-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--surface-2)}
.mock-bar i{width:.7rem;height:.7rem;border-radius:50%;display:inline-block;background:#E0E1EA}
.mock-bar i:nth-child(1){background:#FF6058}.mock-bar i:nth-child(2){background:#FFBE2E}.mock-bar i:nth-child(3){background:#2ACB42}
.mock-bar .url{margin-left:.6rem;font-size:.7rem;color:var(--faint);background:#fff;border:1px solid var(--line);border-radius:6px;padding:.15rem .6rem}
.mock-body{display:grid;grid-template-columns:64px 1fr;min-height:270px}
.mock-side{background:#14161D;padding:.9rem .6rem;display:flex;flex-direction:column;gap:.55rem}
.mock-side b{width:26px;height:26px;border-radius:8px;background:var(--grad);margin:0 auto .4rem}
.mock-side u{height:9px;border-radius:5px;background:rgba(255,255,255,.10);display:block}
.mock-side u.on{background:rgba(139,92,246,.55)}
.mock-main{padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.mock-stat{border:1px solid var(--line);border-radius:10px;padding:.6rem}
.mock-stat s{display:block;height:7px;width:60%;border-radius:4px;background:var(--surface-3);margin-bottom:.5rem;text-decoration:none}
.mock-stat b{display:block;height:15px;width:80%;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.mock-chart{flex:1;border:1px solid var(--line);border-radius:12px;padding:.8rem;display:flex;align-items:flex-end;gap:.5rem;min-height:120px;background:
    linear-gradient(180deg,rgba(139,92,246,.05),transparent)}
.mock-chart span{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--accent-2),var(--accent));opacity:.85}
.float-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);padding:.7rem .9rem;display:flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:600}
.float-card .ic{width:2rem;height:2rem;border-radius:9px;display:grid;place-items:center;font-size:1rem}
.float-card small{display:block;color:var(--muted);font-weight:500;font-size:.7rem}
.float-1{top:1.5rem;left:-1.6rem;animation:floaty 6s ease-in-out infinite}
.float-2{bottom:1.2rem;right:-1.4rem;animation:floaty 7s ease-in-out infinite .8s}
@keyframes floaty{50%{transform:translateY(-10px)}}

/* ── Trust / logos strip ────────────────────────────────────────────────── */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.trust .lbl{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700}
.trust-item{display:flex;align-items:center;gap:.55rem;color:var(--ink-2);font-weight:700;opacity:.85;font-size:1rem}
.trust-item .ic{font-size:1.25rem}

/* ── Feature cards ──────────────────────────────────────────────────────── */
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;height:100%;transition:transform .2s ease,box-shadow .2s ease,border-color .2s;position:relative;overflow:hidden}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-line)}
.feature .fi{width:3rem;height:3rem;border-radius:13px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:1rem;
  background:var(--accent-softer);border:1px solid var(--accent-line)}
.feature h3{font-size:1.12rem;margin-bottom:.45rem;font-weight:700}
.feature p{color:var(--muted);font-size:.94rem;margin:0;line-height:1.55}
/* Bento layout + richer feature interactions */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem}
.bento .feature{height:100%;margin:0}
.b-4{grid-column:span 4}.b-5{grid-column:span 5}.b-6{grid-column:span 6}.b-8{grid-column:span 8}.b-12{grid-column:span 12}
.bento .reveal:nth-child(2){transition-delay:.05s}.bento .reveal:nth-child(3){transition-delay:.1s}
.bento .reveal:nth-child(4){transition-delay:.15s}.bento .reveal:nth-child(5){transition-delay:.2s}.bento .reveal:nth-child(6){transition-delay:.25s}
.feature>*{position:relative;z-index:1}
.feature::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(22rem 13rem at 85% -15%,var(--accent-soft),transparent 62%)}
.feature:hover::after{opacity:.75}
.feature .fi{transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease}
.feature:hover .fi{transform:translateY(-3px) scale(1.06);box-shadow:0 14px 26px -12px rgba(91,91,214,.55)}
.feature--dark{background:linear-gradient(150deg,#14161D,#241f38 68%,#2c1f44);border-color:transparent;color:#fff;box-shadow:var(--shadow-lg)}
.feature--dark h3{color:#fff}.feature--dark p{color:rgba(255,255,255,.74)}
.feature--dark .fi{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}
.feature--dark::after{background:radial-gradient(24rem 15rem at 85% -10%,rgba(139,92,246,.5),transparent 62%)}
.feature--row{display:flex;align-items:center;gap:1.3rem}
.feature--row .fi{margin:0;flex:none}
.fviz{margin-top:1.3rem;display:flex;gap:.5rem;align-items:flex-end;height:76px}
.fviz i{flex:1;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--accent-2),var(--accent));opacity:.9;display:block}
.feature--dark .fviz i{background:linear-gradient(180deg,#a78bfa,#7c5cf6)}
@media(max-width:991px){.bento{grid-template-columns:repeat(2,1fr)}.b-4,.b-5,.b-6,.b-8,.b-12{grid-column:span 1}}
@media(max-width:575px){.bento{grid-template-columns:1fr}}

/* ── Steps (how it works) ──────────────────────────────────────────────── */
.step{position:relative;padding-left:3.4rem}
.step .n{position:absolute;left:0;top:0;width:2.5rem;height:2.5rem;border-radius:13px;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--grad);box-shadow:0 10px 20px -10px rgba(91,91,214,.7)}
.step h3{font-size:1.08rem;margin-bottom:.3rem}
.step p{color:var(--muted);font-size:.93rem;margin:0}

/* ── Stats band ─────────────────────────────────────────────────────────── */
.statband{background:linear-gradient(135deg,#16181D,#221F35);border-radius:var(--radius-lg);color:#fff;padding:2.6rem;position:relative;overflow:hidden}
.statband::after{content:"";position:absolute;inset:auto -10% -60% auto;width:26rem;height:26rem;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.5),transparent 60%)}
.statband .v{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(100deg,#fff,#C9BEF7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.statband .l{color:rgba(255,255,255,.7);font-size:.9rem}

/* ── CTA band ──────────────────────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:3.4rem;text-align:center;background:var(--grad);color:#fff;box-shadow:var(--shadow-lg)}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(30rem 20rem at 15% 10%,rgba(255,255,255,.22),transparent 55%);pointer-events:none}
.cta h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.3rem);position:relative}
.cta p{color:rgba(255,255,255,.85);position:relative}
.cta .btn-light{color:var(--accent);font-weight:700}

/* ── Pricing ───────────────────────────────────────────────────────────── */
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;height:100%;transition:transform .2s,box-shadow .2s}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.price-card.pop{border-color:transparent;box-shadow:var(--shadow-lg);position:relative}
.price-card.pop::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1.5px;background:var(--grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.price-card .amt{font-size:2.6rem;font-weight:800;letter-spacing:-.03em}
.price-card .per{color:var(--muted);font-size:.9rem}
.price-tag{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .9rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-md)}
.plan-feat{list-style:none;padding:0;margin:1.2rem 0 0}
.plan-feat li{padding:.4rem 0 .4rem 1.7rem;position:relative;color:var(--ink-2);font-size:.93rem}
.plan-feat li::before{content:"✓";position:absolute;left:0;top:.4rem;color:var(--accent);font-weight:800}

/* ── Marketplace / store / part cards ──────────────────────────────────── */
.sl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column}
.sl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-line)}
.sl-card .card-body{padding:1.1rem}
.sl-thumb{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--surface-3)}
.sl-noimg{display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:.8rem;aspect-ratio:4/3;background:
  repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 12px,var(--surface-3) 12px,var(--surface-3) 24px)}
.sl-price{color:var(--accent);font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.sl-badge{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.badge-soft{background:var(--accent-softer);color:var(--accent);border:1px solid var(--accent-line);border-radius:var(--radius-pill);padding:.28rem .7rem;font-weight:600;font-size:.74rem}
.store-hero{background:
    radial-gradient(40rem 22rem at 85% -20%,var(--hero-glow),transparent 60%),
    linear-gradient(180deg,var(--surface),var(--bg));border-bottom:1px solid var(--line);padding:2.6rem 0}
.store-avatar{width:4rem;height:4rem;border-radius:18px;background:var(--grad);color:var(--accent-ink);display:grid;place-items:center;font-size:1.6rem;font-weight:800;box-shadow:var(--shadow-md)}

/* ── Part detail ───────────────────────────────────────────────────────── */
.part-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.spec-list{display:grid;grid-template-columns:1fr 1fr;gap:.1rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.spec-list div{padding:.7rem .9rem;background:var(--surface)}
.spec-list dt{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin:0}
.spec-list dd{margin:.15rem 0 0;font-weight:600;color:var(--ink)}
.buybox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.buybox::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.pgallery .thumb{width:78px;height:58px;object-fit:cover;border-radius:10px;border:1.5px solid var(--line);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;background:var(--surface-3)}
.pgallery .thumb:hover{transform:translateY(-2px)}
.pgallery .thumb.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.trust-chips{display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}
.trust-chips span{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-2);font-weight:600}
.trust-chips .ic{font-size:.95rem}
@media(min-width:992px){.part-media{position:sticky;top:5.5rem}}

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer{background:var(--footer-bg);color:var(--footer-ink);margin-top:0!important}
.footer a{color:rgba(255,255,255,.62);text-decoration:none}
.footer a:hover{color:#fff}
.footer .foot-brand{color:#fff;font-weight:800;font-size:1.15rem;display:inline-flex;align-items:center;gap:.5rem}
.footer .brand-dot{width:1.4rem;height:1.4rem;border-radius:7px;background:var(--grad);display:inline-block}

/* ── Accordion (FAQ) ───────────────────────────────────────────────────── */
.accordion{--bs-accordion-border-color:var(--line);--bs-accordion-btn-focus-box-shadow:var(--ring);--bs-accordion-active-color:var(--accent);--bs-accordion-active-bg:var(--accent-softer)}
.accordion-item{border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;margin-bottom:.7rem;overflow:hidden;background:var(--surface)}
.accordion-button{font-weight:600;color:var(--ink);border-radius:var(--radius-sm)!important;padding:1.05rem 1.2rem}
.accordion-button:not(.collapsed){color:var(--accent);background:var(--accent-softer);box-shadow:none}
.accordion-button:focus{box-shadow:var(--ring)}
.accordion-body{color:var(--muted);padding-top:.2rem}

/* ── Auth / simple pages ───────────────────────────────────────────────── */
.auth-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:3rem 0}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:2.4rem;width:100%;max-width:420px}
.prose{max-width:46rem}
.prose h1{font-size:2rem;margin-bottom:1rem}
.prose h2{font-size:1.3rem;margin:2rem 0 .6rem}
.prose p,.prose li{color:var(--ink-2);line-height:1.7}

/* ── Reveal on scroll ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.mock,.btn,.feature,.sl-card{transition:none}.float-1,.float-2,.hero .aurora{animation:none}.btn-primary:hover::after{animation:none}}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:991px){
  .section{padding:3.5rem 0}
  .mock{transform:none;margin-top:2.5rem}
  .float-card{display:none}
  .navbar{background:var(--surface)}
}
@media (max-width:575px){
  .hero{padding:3.2rem 0 2.8rem}
  .cta,.statband{padding:2rem 1.4rem}
  .spec-list{grid-template-columns:1fr}
}

/* ── RTL niceties ──────────────────────────────────────────────────────── */
[dir=rtl] .step{padding-left:0;padding-right:3.4rem}
[dir=rtl] .step .n{left:auto;right:0}
[dir=rtl] .plan-feat li{padding:.4rem 1.7rem .4rem 0}
[dir=rtl] .plan-feat li::before{left:auto;right:0}
[dir=rtl] .float-1{left:auto;right:-1.6rem}[dir=rtl] .float-2{right:auto;left:-1.4rem}
[dir=rtl] .mock{transform:perspective(1600px) rotateY(8deg) rotateX(3deg)}