/* ============================================================================
   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, electric indigo→violet→fuchsia gradient + a warm amber "spark"
   counter-accent. Headings use the self-hosted Bricolage Grotesque display face.
   ============================================================================ */
: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:#5A32E8; --accent-2:#8B3DF5; --accent-3:#C026D3; --accent-ink:#ffffff;
  --accent-soft:#E9E1FD; --accent-softer:#F4F0FE; --accent-line:#D9CCFA;
  /* Accent used AS TEXT on the surface (links, eyebrows, prices). Defaults to --accent, but a theme whose
     --accent is tuned for a button BACKGROUND (dark accent + white ink) and therefore too low-contrast as
     text on its own surface overrides this with an AA-on-surface variant (MEDIUM-05). */
  --link:var(--accent);
  /* Warm "spark" counter-accent — the editorial pop the AGMS brand uses sparingly (eyebrow glyphs, key
     numbers, hero underline). Amber is illegible as small text on white, so it is decorative / on-dark only. */
  --spark:#F59E0B; --spark-2:#FB7A1E; --spark-ink:#3A2600; --spark-soft:#FEF1D6; --spark-line:#F6DFA6;
  --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);
  /* Accent-tinted elevation — was hardcoded to the brand violet, so every non-violet theme cast a violet
     glow. color-mix ties the tint to each theme's --accent (MEDIUM-05); the neutral drop layers stay fixed. */
  --shadow-lg:0 32px 64px -24px color-mix(in srgb,var(--accent) 32%,transparent),0 12px 28px -14px rgba(16,24,40,.14);
  --shadow-xl:0 48px 90px -32px color-mix(in srgb,var(--accent) 44%,transparent),0 20px 44px -20px rgba(16,24,40,.20);
  --shadow-glow:0 0 0 1px color-mix(in srgb,var(--accent) 6%,transparent),0 24px 60px -22px color-mix(in srgb,var(--accent) 42%,transparent);
  --ring:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);
  --grad:linear-gradient(118deg,#5A32E8 0%,#8B3DF5 44%,#C026D3 100%);
  --grad-text:linear-gradient(100deg,#5A32E8,#8B3DF5 52%,#C026D3);
  --grad-spark:linear-gradient(100deg,#F59E0B,#FB7A1E);
  /* 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:'Bricolage Grotesque',var(--font);
  /* Semantic surfaces themes reskin (defaults = the AGMS look). */
  --nav-bg:rgba(255,255,255,.72); --footer-bg:#0C0A14; --footer-ink:rgba(255,255,255,.62); --hero-glow:rgba(139,61,245,.18);
  --bs-primary:#5A32E8; --bs-primary-rgb:90,50,232;
  --bs-body-color:#16181D; --bs-body-font-family:var(--font); --bs-border-color:var(--line);
  --bs-link-color:#5A32E8; --bs-link-hover-color:#4A22C8;
  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}
/* Sticky footer: the page shell is a full-height column so the footer sits at the viewport bottom even
   when the content is short (e.g. an empty store), instead of floating mid-page. */
.body{display:flex;flex-direction:column;min-height:100vh}
.main{flex:1 0 auto}
/* 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:color-mix(in srgb,var(--accent) 20%,transparent)}
/* Form controls + buttons render in the platform font, not the browser default, so the search box and
   language menu stay in sync with the theme (Noto Sans / Noto Sans Arabic). */
input,button,select,textarea,.dropdown-item,.dropdown-toggle{font-family:var(--font)}
a{color:var(--link);text-underline-offset:2px}
h1,h2,h3,h4,h5{color:var(--ink);letter-spacing:-.025em;font-weight:700;font-family:var(--font-display);text-wrap:balance}
/* The two largest heading levels carry the theme's display personality (a preset can make them
   uppercase / wider-tracked); smaller headings (h3–h5) stay sentence-case for legibility. On the
   default (unthemed) look both tokens fall back to the current values, so nothing changes there. */
h1,h2{letter-spacing:var(--display-tracking,-.025em);text-transform:var(--display-transform,none)}
.text-muted{color:var(--muted)!important}
/* Bootstrap's .text-success/.text-danger are fixed hues that fall ~4.3:1 on the near-white ground (below AA
   1.4.3) and don't follow the theme — remap them to the AA-tuned tokens (stock status + inline errors use them). */
.text-success{color:var(--ok)!important}
.text-danger{color:var(--bad)!important}
/* Bootstrap's .text-dark is a FIXED near-black — invisible on the dark storefront themes (which set --bg
   near-black). Map it to the theme's ink token so it stays legible on every theme (mirrors the console). */
.text-dark{color:var(--ink)!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:800;letter-spacing:.14em;text-transform:uppercase;color:var(--link);
  background:var(--accent-softer);border:1px solid var(--accent-line);padding:.34rem .85rem;border-radius:var(--radius-pill)}
.eyebrow [aria-hidden]{color:var(--spark);font-size:.95em;line-height:1}
.section-title{font-size:clamp(1.85rem,3.8vw,2.85rem);line-height:1.06;font-weight:700;letter-spacing:var(--display-tracking,-.035em);text-transform:var(--display-transform,none)}
.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:box-shadow .2s ease,background .2s ease,color .2s ease,opacity .15s ease;padding:.55rem 1.2rem}
/* Feedback is opacity only — never a position shift: a subtle dim on hover, a firmer one on press. */
.btn:not(:disabled):hover{opacity:.92}
.btn:not(:disabled):active{opacity:.82}
.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 color-mix(in srgb,var(--accent) 55%,transparent);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);box-shadow:0 18px 34px -10px color-mix(in srgb,var(--accent) 62%,transparent)}
.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-outline-dark{--bs-btn-color:var(--ink);--bs-btn-border-color:var(--line);--bs-btn-hover-bg:var(--ink);--bs-btn-hover-border-color:var(--ink);--bs-btn-hover-color:var(--surface);background:var(--surface)}
.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 color-mix(in srgb,var(--accent) 70%,transparent);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(--link);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;font-family:var(--font)}
.navbar .dropdown-item{border-radius:8px;font-size:.9rem;padding:.45rem .7rem;font-family:var(--font)}
.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-inline-start:.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)}
/* Accessibility: a visible keyboard-focus ring on every interactive element (keyboard nav only, via
   :focus-visible) so shoppers navigating by keyboard can always see their position. */
a:focus-visible,button:focus-visible,.btn:focus-visible,[role=button]:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form-label{font-weight:600;font-size:.85rem;color:var(--ink-2)}

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Hero wash tied to the theme's accent trio + the fixed warm spark — was hardcoded to the brand violet/
   magenta so every non-violet theme's hero glowed the wrong colour (MEDIUM-05). */
.hero{position:relative;overflow:hidden;padding:6.5rem 0 5.5rem;background:
    radial-gradient(58rem 32rem at 82% -10%,color-mix(in srgb,var(--accent-3) 20%,transparent),transparent 60%),
    radial-gradient(50rem 32rem at 4% 4%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 56%),
    radial-gradient(30rem 22rem at 90% 6%,color-mix(in srgb,var(--spark) 12%,transparent),transparent 58%),
    radial-gradient(42rem 28rem at 52% 124%,color-mix(in srgb,var(--accent-2) 16%,transparent),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 20% 32%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 60%),radial-gradient(26rem 20rem at 84% 18%,color-mix(in srgb,var(--accent-3) 28%,transparent),transparent 60%),radial-gradient(18rem 14rem at 62% 6%,color-mix(in srgb,var(--spark) 16%,transparent),transparent 62%);
  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.55rem,5.6vw,4.2rem);line-height:1.02;font-weight:800;letter-spacing:var(--display-tracking,-.045em);text-transform:var(--display-transform,none);margin-bottom:1.15rem}
/* Dual-tone headline highlight: violet-gradient word (outer keeps a warm amber underline that follows wraps). */
.hero h1 .hl{background:var(--grad-spark);background-size:100% .13em;background-position:0 96%;background-repeat:no-repeat;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:2px;animation:hldraw .9s .35s cubic-bezier(.2,.8,.3,1) both}
.hero h1 .hl > i{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@keyframes hldraw{from{background-size:0 .13em}to{background-size:100% .13em}}
.hero .lead{font-size:1.2rem;line-height:1.55;color:var(--ink-2);max-width:37rem}
.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(--link)}

/* 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-inline-start:.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:color-mix(in srgb,var(--accent) 55%,transparent)}
.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,color-mix(in srgb,var(--accent) 5%,transparent),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 color-mix(in srgb,var(--accent) 55%,transparent)}
.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%,color-mix(in srgb,var(--accent-3) 50%,transparent),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,#B79BFF,#8B3DF5)}
@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:var(--accent-ink);background:var(--grad);box-shadow:0 10px 20px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.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,color-mix(in srgb,var(--accent-3) 50%,transparent),transparent 60%)}
.statband .v{font-size:2.9rem;font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(120deg,#FFD37A,#FB7A1E);-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:var(--accent-ink);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:var(--accent-ink);font-size:clamp(1.6rem,3.2vw,2.3rem);position:relative}
.cta p{color:var(--accent-ink);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:var(--accent-ink);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(--link);font-weight:800}

/* ── Marketplace / store / part cards ──────────────────────────────────── */
/* .sl-card is the STATIC panel primitive (matches the admin console's .sl-card). The interactive product tile
   adds .sl-prodcard, whose hover feedback is shadow + border only — never a position lift (house no-hover-lift
   rule). This keeps the static store/evhc panels from reacting to hover and stops the two consoles' .sl-card
   from meaning two different things. */
.sl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;display:flex;flex-direction:column}
.sl-prodcard{transition:box-shadow .2s,border-color .2s}
.sl-prodcard:hover{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)}
/* isolate keeps a price's currency symbol + digits laid out LTR even inside Arabic (RTL) flow, so the
   symbol and trailing punctuation don't jump to the wrong side. */
.sl-price{color:var(--link);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;unicode-bidi:isolate}
.sl-badge{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.badge-soft{background:var(--accent-softer);color:var(--link);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;padding:0;overflow:hidden;border-radius:10px;border:1.5px solid var(--line);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;background:var(--surface-3);display:block}
.pgallery .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pgallery .thumb:hover{border-color:var(--accent)}
.pgallery .thumb.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pgallery .thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Skip-to-content: off-screen until focused, then a visible pill at the top-left (WCAG 2.4.1). */
.sl-skip{position:absolute;inset-inline-start:8px;top:-48px;z-index:1080;background:var(--accent);color:#fff;padding:.5rem .9rem;border-radius:8px;font-weight:600;transition:top .15s}
.sl-skip:focus{top:8px;color:#fff}
.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 ────────────────────────────────────────────────────────────── */
/* Sticky mobile Buy bar (part page) — the CTA stays reachable on a long page. */
.sl-buybar{position:fixed;left:0;right:0;bottom:0;z-index:1040;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;background:var(--surface,#fff);border-top:1px solid var(--line,#e5e7eb);box-shadow:0 -6px 20px -12px rgba(0,0,0,.25)}
.sl-buybar .sl-price{font-size:1.15rem;font-weight:700}
/* WCAG 2.5.8 touch target: the sticky mobile Buy CTA is comfortably tappable with gloves/on a phone. */
.sl-buybar .btn{min-height:44px;display:inline-flex;align-items:center}
/* Reserve space for the sticky mobile buy bar ONLY on pages that actually render it (the part page) — the padding
   used to apply to every storefront page, leaving a dead ~72px strip on home/listing/cart/order-status. */
@media (max-width:991.98px){body:has(.sl-buybar){padding-bottom:72px}}
.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-prodcard{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)}

/* Order-status progress tracker + note (Phase 2 UX M4) — self-contained, token-based, RTL-safe. */
.sl-track{display:flex;list-style:none;padding:0;margin:0 0 1.1rem;gap:.5rem}
.sl-track-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;position:relative;color:var(--muted);font-size:.8rem}
.sl-track-step:not(:first-child)::before{content:"";position:absolute;top:14px;inset-inline-start:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.sl-track-step.done::before{background:var(--accent)}
.sl-track-dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;background:var(--surface);color:var(--muted);border:2px solid var(--line)}
.sl-track-step.done .sl-track-dot{background:var(--accent);color:#fff;border-color:var(--accent)}
.sl-track-step.done .sl-track-label{color:var(--ink)}
.sl-note{background:var(--accent-softer);border:1px solid var(--accent-line);border-radius:var(--radius,12px);padding:12px 14px;color:var(--ink-2);font-size:.9rem}
/* sl-pill / sl-table share the admin token contract but the storefront layout doesn't load admin.css — give the
   order-status page a minimal fallback so the status pill and line-items table are styled here too. */
.sl-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:var(--radius-pill,999px);font-size:.72rem;font-weight:600;background:var(--surface);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.sl-pill.ok{background:color-mix(in srgb,var(--ok,#0a7d3b) 12%,transparent);color:var(--ok,#0a7d3b);border-color:color-mix(in srgb,var(--ok,#0a7d3b) 32%,transparent)}
.sl-pill.warn{background:color-mix(in srgb,var(--warn,#b26a00) 12%,transparent);color:var(--warn,#b26a00);border-color:color-mix(in srgb,var(--warn,#b26a00) 32%,transparent)}
.sl-pill.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,transparent)}
table.sl-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}
.sl-table td{padding:11px 12px;border-bottom:1px solid var(--line)}

/* ── Marketing footer: "coming soon" app badges + Razorpay-secured note ───── */
.app-badge{display:inline-flex;flex-direction:column;line-height:1.05;gap:2px;padding:.42rem .8rem;border:1px solid rgba(255,255,255,.22);border-radius:.6rem;color:rgba(255,255,255,.82);font-weight:600;font-size:.82rem;background:rgba(255,255,255,.04);cursor:default;user-select:none}
.app-badge .sm{font-size:.6rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;opacity:.6}

/* ── Cookie-consent banner (platform host) ───────────────────────────────── */
.cookie-consent{position:fixed;inset-inline:0;bottom:0;z-index:1080;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;justify-content:center;padding:.9rem 1.1rem;background:#12131a;color:#e8e9ee;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -6px 24px rgba(0,0,0,.22)}
.cookie-consent p{margin:0;font-size:.86rem;line-height:1.55;max-width:46rem}
.cookie-consent a{color:#b9a7ff;text-decoration:underline;text-underline-offset:2px}
.cookie-consent .cc-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie-consent .btn{white-space:nowrap}
@media (max-width:575.98px){.cookie-consent{justify-content:stretch}.cookie-consent .cc-actions{width:100%}.cookie-consent .cc-actions .btn{flex:1}}