/* ============================================================
   SHARRY — DESIGN TOKENS
   Palette derives from the logo: two blue arcs, one emerald arc,
   slate ground, light wordmark.
   ============================================================ */
:root{
  /* — brand ————————————————————————— */
  --brand-50:#EFF4FE;
  --brand-100:#DCE7FC;
  --brand-200:#BBCEF8;
  --brand-400:#5A87DE;
  --brand-500:#3B6FD4;   /* logo arc blue */
  --brand-600:#2F5FCB;
  --brand-700:#24499E;
  --emerald-50:#E8F8F1;
  --emerald-300:#7FDCB4;
  --emerald-400:#3ECD90;  /* logo arc green */
  --emerald-600:#0E9F6E;
  --emerald-700:#0A7D56;

  /* — neutrals ——————————————————————— */
  --ink:#0B1220;
  --ink-2:#1B2740;
  --ink-3:linear-gradient(to bottom, #3572DF, #1F4FBC);
  --body:#4A5A70;
  --muted:#64718B;   /* 4.77:1 on --bg — AA for normal text */
  --faint:#8592A6;   /* decorative labels only, never body copy */
  --ghost:#C6D0DC;
  --line:#E5EBF3;
  --line-2:#EFF3F8;
  --bg:#FAFBFD;
  --surface:#FFFFFF;
  --surface-2:#F4F7FB;
  --surface-3:#EDF2F8;

  /* — semantic ——————————————————————— */
  --success:#0E9F6E;  --success-bg:#E8F8F1;  --success-line:#BCE9D4;
  --warn:#B0761B;     --warn-bg:#FCF4E5;     --warn-line:#F0DCB4;
  --error:#C33B34;    --error-bg:#FCEDEC;    --error-line:#F3CFCC;
  --info:#2F5FCB;     --info-bg:#EFF4FE;     --info-line:#C9DBFA;

  /* — elevation ————————————————————— */
  --e1:0 1px 2px rgba(11,18,32,.04), 0 1px 3px rgba(11,18,32,.03);
  --e2:0 2px 4px rgba(11,18,32,.03), 0 8px 24px rgba(11,18,32,.06);
  --e3:0 4px 10px rgba(11,18,32,.04), 0 20px 44px rgba(16,28,50,.09);
  --e4:0 8px 18px rgba(11,18,32,.05), 0 44px 88px rgba(16,28,50,.14);
  --ring:0 0 0 4px rgba(59,111,212,.28);

  /* — shape (8pt) ———————————————————— */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-full:999px;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px; --s-6:48px;
  --s-8:64px; --s-10:80px; --s-12:96px; --s-15:120px; --s-20:160px;

  /* — layout ————————————————————————— */
  --container:1240px;
  --gutter:32px;
  --sec:var(--s-20);

  /* — type ——————————————————————————— */
  --ar:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif;
  --lat:"Inter","IBM Plex Sans Arabic",system-ui,sans-serif;

  /* — motion ————————————————————————— */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --fast:.18s; --mid:.32s; --slow:.6s;
}

/* dark-mode scaffold: the token layer is the only thing that swaps.
   Art-directed for surfaces + text; not a finished dark theme. */
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --ink:#F2F6FA; --ink-2:#DCE5EF; --body:#A8B8CB; --muted:#7F8FA5; --faint:#5E6E85; --ghost:#42536B;
    --line:#1E2C42; --line-2:#182438;
    --bg:#080F1A; --surface:#0D1626; --surface-2:#111C2E; --surface-3:#16233A;
    --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 8px 24px rgba(0,0,0,.45);
    --e3:0 20px 44px rgba(0,0,0,.5); --e4:0 44px 88px rgba(0,0,0,.55);
  }
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--ar);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  letter-spacing:0;               /* never track Arabic */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* Latin + numerals ride Inter and take the tracking Arabic must not */
.lat,[dir="ltr"]{font-family:var(--lat);letter-spacing:-.011em}
.num{font-family:var(--lat);font-variant-numeric:tabular-nums;letter-spacing:-.014em}

::selection{background:var(--brand-100);color:var(--brand-700)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}

.skip{
  position:absolute;inset-inline-start:-9999px;top:12px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r-xs);font-size:15px;
}
.skip:focus{inset-inline-start:12px}

/* visually hidden but read by screen readers */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec);position:relative}
.sec--tight{padding-block:var(--s-12)}
.sec--flush{padding-block:var(--s-15)}

/* The signature: a hairline lens-arc that divides sections.
   It is the logo's curve used structurally, not as ornament. */
.lens-rule{display:block;width:100%;height:34px;color:var(--line);overflow:hidden}
.lens-rule svg{width:100%;height:100%}

/* ============================================================
   TYPE SCALE — Arabic needs more leading than Latin at every step
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;color:var(--brand-600);
  margin-bottom:20px;
  background-color:#DCE7FC;
  padding:5px 15px;
  border-radius:50px;
  font-weight:900;
}
/* .eyebrow::before{
  content:"";width:22px;height:11px;flex:none;
  border:1.5px solid currentColor;border-bottom:0;
  border-radius:22px 22px 0 0;opacity:.75;
} */
.d1{font-size:clamp(38px,5.6vw,72px);line-height:1.28;font-weight:600;color:var(--ink)}
.h2{font-size:clamp(30px,3.9vw,50px);line-height:1.34;font-weight:600;color:var(--ink)}
.h3{font-size:clamp(24px,2.5vw,34px);line-height:1.4;font-weight:600;color:var(--ink)}
.h4{font-size:21px;line-height:1.5;font-weight:600;color:var(--ink)}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.72;color:var(--body);font-weight:300}
.p{font-size:17px;line-height:1.8;color:var(--body)}
.small{font-size:15px;line-height:1.7;color:var(--muted)}
.tiny{font-size:13px;line-height:1.6;color:var(--muted)}
.measure{max-width:58ch}
.measure-sm{max-width:46ch}

.sec-head{max-width:720px;justify-self:center;text-align:center;}
.sec-head .lede{margin-top:20px;}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head .btns{justify-content:center}
/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ar);font-size:16px;font-weight:600;line-height:1;
  padding:16px 30px;border-radius:var(--r-full);
  border:1.5px solid transparent;position:relative;overflow:hidden;
  transition:transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease),
             background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
  will-change:transform;
}
.btn:active{transform:translateY(1px)}
.btn__ic{width:18px;height:18px;flex:none;transition:transform var(--mid) var(--ease-out)}
.btn:hover .btn__ic{transform:translateX(-4px)}   /* RTL: forward is leftward */

.btn--primary{background:var(--ink-3);color:#fff;box-shadow:var(--e2)}
.btn--primary:hover{background:var(--ink-2);box-shadow:var(--e3);transform:translateY(-2px)}
/* soft glow bloom on hover — the "expensive" microinteraction, used sparingly */
.btn--primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 70%);
  opacity:0;transition:opacity var(--mid) var(--ease);
}
.btn--primary:hover::after{opacity:1}

.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ghost);box-shadow:var(--e2);transform:translateY(-2px)}

.btn--onblue{background:var(--brand-600);color:#fff}
.btn--onblue:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.btn--lineblue{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--lineblue:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}

.btn--sm{padding:11px 20px;font-size:15px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}

.link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:600;color:var(--brand-50);background-color:var(--brand-500);padding:5px 20px;border-radius:50px;
  transition:gap var(--mid) var(--ease-out),color var(--fast) var(--ease);
}
.link_bg{background-color: transparent ;color: var(--brand-600);padding: 0;}
.link:hover{gap:13px;background-color:white;color:var(--brand-700)}
.link svg{width:17px;height:17px}

/* ============================================================
   MOTION — scroll reveal + stagger. All of it opt-out.
   ============================================================ */
.rv{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
.rv.in{opacity:1;transform:none;filter:none}

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

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:100;transition:background var(--mid) var(--ease),box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease);
  border-bottom:1px solid transparent}
.nav.stuck{background:rgba(250,251,253,.72);backdrop-filter:blur(18px) saturate(1.8);-webkit-backdrop-filter:blur(18px) saturate(1.8);
  border-bottom-color:var(--line)}
.nav__in{max-width:var(--container);margin-inline:auto;padding:18px var(--gutter);display:flex;align-items:center;gap:40px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{width:32px;height:32px;flex:none}
.brand__name{font-size:22px;font-weight:600;color:var(--ink);line-height:1}
.nav__menu{display:flex;align-items:center;gap:6px;margin-inline:auto}
.nav__menu a{
  position:relative;font-size:16px;font-weight:500;color:var(--body);
  padding:9px 14px;border-radius:var(--r-xs);transition:color var(--fast) var(--ease)
}
.nav__menu a::after{
  content:"";position:absolute;inset-inline:14px;bottom:2px;height:1.5px;
  background:var(--brand-500);transform:scaleX(0);transform-origin:inline-end;
  transition:transform var(--mid) var(--ease-out);border-radius:2px;
}
#drawer li ,
.nav__menu li {list-style: none;}
#drawer li a{font-size:22px;}
.nav .logo_webp{width:90px;}
.nav__menu a:hover{color:var(--ink)}
.nav__menu a:hover::after{transform:scaleX(1);transform-origin:inline-start}
.nav__act{display:flex;align-items:center;gap:10px;flex:none;flex-direction:row-reverse}
.nav__login{font-size:16px;font-weight:500;color:var(--ink);padding:9px 8px}
.nav__login:hover{color:var(--brand-600)}
.navtoggle{display:none;width:44px;height:44px;border-radius:var(--r-xs);align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:120;background:var(--bg);
  transform:translateY(-100%);transition:transform .42s var(--ease-out);
  padding:24px var(--gutter);overflow-y:auto;display:none}
.drawer.open{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px}
.drawer nav{display:flex;flex-direction:column;gap:4px}
.drawer nav a{font-size:26px;font-weight:600;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line-2)}
.drawer .btns{margin-top:32px;flex-direction:column}
.drawer .btn{width:100%}
[aria-label="التنقّل للجوال"] {gap:25px !important;}
[aria-label="التنقّل للجوال"] a {font-size:16px !important;}
/* ============================================================
   1 — HERO
   ============================================================ */
.hero{padding-block:clamp(56px,7vw,104px) clamp(80px,9vw,132px);position:relative;overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
/* ambient lens — the logo geometry at architectural scale */
.hero__lens{position:absolute;top:-22%;inset-inline-start:-16%;width:min(1180px,105vw);height:auto;opacity:.5}
.hero__wash{position:absolute;top:-30%;inset-inline-end:-10%;width:820px;height:820px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,111,212,.10),rgba(62,205,144,.05) 42%,transparent 68%);filter:blur(10px)}
.hero__in{position:relative;z-index:1}
.hero__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,5vw,88px);align-items:center}
.hero h1{margin-bottom:26px;font-size:58px;}
.hero h1 .accent{
  background:#0E9F6E;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.hero .lede{max-width:44ch}
.hero__trust{display:flex;align-items:center;gap:14px;margin-top:30px;font-size:15px;color:var(--muted)}
.hero__trust .dot{width:5px;height:5px;border-radius:50%;background:var(--ghost);flex:none}
.hero__trust b{color:var(--emerald-600);font-weight:600}
.hero__trust .av{display:flex}
.hero__trust .av span{
  width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);
  margin-inline-start:-9px;background:var(--surface-3);
  display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--brand-700);
}
.hero__trust .av span:first-child{margin-inline-start:0}

/* — the floating dashboard stage — */
.stage{position:relative;perspective:1600px;min-height:clamp(420px,46vw,560px)}
.stage__inner{position:relative;transform-style:preserve-3d;transition:transform .5s var(--ease-out)}
.pl{will-change:transform}
.stage__main{
  position:relative;z-index:2;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--e4);overflow:hidden;
}
.dashbar{display:flex;align-items:center;gap:8px;padding:15px 20px;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.dashbar i{width:9px;height:9px;border-radius:50%;background:var(--ghost);display:block}
.dashbar span{margin-inline-start:12px;font-size:12.5px;color:var(--muted)}
.dashbody{padding:24px}

.kpirow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.kpi{border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.kpi__l{font-size:12.5px;color:var(--muted);margin-bottom:7px}
.kpi__v{font-size:26px;font-weight:600;color:var(--ink);line-height:1.15}
.kpi__v em{font-style:normal;font-size:13px;font-weight:500;color:var(--muted);margin-inline-start:4px}
.kpi__d{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;margin-top:8px;color:var(--emerald-600)}
.kpi__d svg{width:12px;height:12px}
.kpi--hero{background:linear-gradient(160deg,var(--brand-600),var(--brand-700));border-color:transparent}
.kpi--hero .kpi__l{color:rgba(255,255,255,.72)}
.kpi--hero .kpi__v{color:#fff}
.kpi--hero .kpi__v em{color:rgba(255,255,255,.72)}
.kpi--hero .kpi__d{color:var(--emerald-300)}

.chartcard{border:1px solid var(--line);border-radius:var(--r-md);padding:18px}
.chartcard__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.chartcard__t{font-size:14px;font-weight:600;color:var(--ink)}
.seg{display:flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:var(--r-xs)}
.seg span{font-size:11.5px;padding:5px 11px;border-radius:6px;color:var(--muted);font-family:var(--lat)}
.seg span.on{background:var(--surface);color:var(--ink);box-shadow:var(--e1);font-weight:600}
.chart{position:relative;height:132px;margin-top:10px}
.chart svg{width:100%;height:100%;overflow:visible}
.chart .grid line{stroke:var(--line-2);stroke-width:1}
.chart .area{opacity:0;transition:opacity .9s var(--ease) .35s}
.chart.drawn .area{opacity:1}
.chart .line{stroke:url(#arcgrad);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.5s var(--ease-out) .1s}
.chart.drawn .line{stroke-dashoffset:0}
.chart .pt{opacity:0;transition:opacity .4s var(--ease) 1.1s}
.chart.drawn .pt{opacity:1}
.chart__x{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--faint)}

/* floating satellites */
.sat{position:absolute;background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--e3);border-radius:var(--r-lg);padding:14px 16px;z-index:3}
.sat--order{inset-inline-start:-5%;top:-3%;width:245px}
.sat--stock{inset-inline-end:-5%;bottom:-4%;width:232px}
.float{animation:float 7s ease-in-out infinite}
.float--b{animation-duration:8.5s;animation-delay:-2.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.sat__row{display:flex;align-items:center;gap:11px}
.sat__ic{width:34px;height:34px;border-radius:var(--r-xs);display:grid;place-items:center;flex:none}
.sat__ic svg{width:17px;height:17px}
.sat__ic--ok{background:var(--success-bg);color:var(--success)}
.sat__ic--warn{background:var(--warn-bg);color:var(--warn)}
.sat__t{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4}
.sat__s{font-size:12px;color:var(--muted);margin-top:1px}
.sat__amt{font-size:14px;font-weight:600;color:var(--ink);margin-inline-start:auto}
.bar{height:5px;border-radius:99px;background:var(--surface-3);margin-top:11px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--warn),#E0A93C);width:0;transition:width 1.2s var(--ease-out)}
.bar.go i{width:14%}

/* ============================================================
   2 — INTEGRATIONS (dual marquee)
   ============================================================ */
.marq{position:relative;overflow:hidden;padding-block:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:14px;width:max-content;animation:marq 46s linear infinite}
.marquee__track--rev{animation-direction:reverse;animation-duration:56s}
.marq:hover .marquee__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(50%)}}
.plogo{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);
  padding:13px 24px;font-size:15.5px;font-weight:500;color:var(--muted);
  transition:color var(--fast) var(--ease),filter var(--fast) var(--ease),
    border-color var(--fast) var(--ease),box-shadow var(--mid) var(--ease),transform var(--fast) var(--ease);
}
.plogo img{width:20px;height:20px;flex:none}
.plogo.img img{width:100px;height:40px; object-fit:contain;}
.plogo svg{width:20px;height:20px;flex:none}
.plogo:hover{filter:none;color:var(--ink);border-color:var(--brand-200);box-shadow:var(--e2);transform:translateY(-2px)}

/* ============================================================
   3 — STORE BUILDER (overlapping composition + step rail)
   ============================================================ */
.builder__stage{position:relative;margin-top:var(--s-8);padding-bottom:56px}
.browser{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--e4);overflow:hidden;max-width:880px;margin-inline-start:auto}
.browser__bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.browser__url{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);
  padding:7px 16px;font-size:12.5px;color:var(--muted);text-align:center;margin-inline:10px}
.shopnav{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;border-bottom:1px solid var(--line-2)}
.shopnav__b{font-size:17px;font-weight:600;color:var(--ink)}
.shopnav__m{display:flex;gap:20px;font-size:13.5px;color:var(--muted)}
.shophero{padding:34px 26px;display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;
  background:linear-gradient(115deg,var(--surface-2),var(--brand-50))}
.shophero h4{font-size:clamp(20px,2.4vw,29px);line-height:1.4;font-weight:600;color:var(--ink)}
.shophero p{font-size:14px;color:var(--body);margin-top:9px}
.shophero .pillbtn{display:inline-block;margin-top:16px;background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:600;padding:11px 22px;border-radius:var(--r-full)}
.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:22px 26px 28px}
.prod{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  transition:transform var(--mid) var(--ease-out),box-shadow var(--mid) var(--ease)}
.prod:hover{transform:translateY(-5px);box-shadow:var(--e3)}
.prod__img{height:182px;background:center;background-size:cover;position:relative}
.prod__img.img_1{background-image:url("https://gosharry.com/wp-content/uploads/2026/08/converted-Frame-7.webp");}
.prod__img.img_2{background-image:url("https://gosharry.com/wp-content/uploads/2026/08/converted-Frame-8.webp");}
.prod__img.img_3{background-image:url("https://gosharry.com/wp-content/uploads/2026/08/converted-Frame-9.webp");}
/* .prod__img::after{content:"";position:absolute;inset-inline-start:12px;top:12px;width:26px;height:11px;
  border:1.5px solid var(--ghost);border-bottom:0;border-radius:26px 26px 0 0;opacity:.85} */
.prod__b{padding:11px 13px}
.prod__n{font-size:12.5px;font-weight:500;color:var(--ink)}
.prod__p{font-size:12.5px;color:var(--muted);margin-top:3px}

.tplpick{position:absolute;inset-inline-start:0;bottom:0;width:min(378px,86%);z-index:3;top:115px;bottom:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e4);padding:20px}
.tplpick__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.tplpick__t{font-size:14.5px;font-weight:600;color:var(--ink)}
.tpls{display:grid;direction:ltr;grid-template-columns:repeat(3,1fr);gap:10px}
.tpl{border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;
  transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.tpl:hover{transform:translateY(-3px)}
.tpl.on{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-50)}
.tpl__v{height:52px;background-position:center;background-size:cover;border-bottom:solid 1px #E5EBF3;}
.tpl.on .tpl__v{background-image:url("https://gosharry.com/wp-content/uploads/2026/08/converted-Frame-16.webp")}
.tpl__v_2{background-image:url("https://gosharry.com/wp-content/uploads/2026/08/converted-Frame-17.webp")}
.tpl__v_3{background-image:url("https://gosharry.com/wp-content/uploads/2026/08/converted-Frame-18.webp")}

.tpl__n{font-size:11px;padding:7px 9px;color:var(--muted);font-family:var(--lat)}
.tpl.on .tpl__n{color:var(--brand-700);font-weight:600}

.steprail{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--s-8);
  border-top:1px solid var(--line);padding-top:var(--s-6)}
.stepc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  display:flex;flex-direction:column;
  transition:transform var(--mid) var(--ease-out),box-shadow var(--mid) var(--ease),border-color var(--fast) var(--ease)}
.stepc:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--brand-200)}
.stepc__vis{height:260px;background:#DCE7FC;border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:16px;margin-bottom:20px;min-height:158px;display:flex;flex-direction:column;justify-content:center;gap:12px;overflow:hidden; position: relative;}
.stepc__vis.plant{padding:0;background-color:#BBCEF8;justify-content:end;}
.stepc__n{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.stepc__n b{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--brand-600);
  font-family:var(--lat);flex:none;background:var(--surface)}
.stepc__n i{flex:1;height:1px;background:var(--line);font-style:normal}
.stepc h4{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:7px}
.stepc p{font-size:15px;color:var(--muted);line-height:1.7}

/* — step 1 · template picker — */
.tpl3{position:absolute;top:10px;left:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items: end ;}
.tpl3__c{width:100px;position:relative;border:1.5px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface);transition:transform var(--fast) var(--ease)}
.stepc:hover .tpl3__c.on{transform:translateY(-2px)}
.tpl3__c.on{width:164px;height:137px;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-50)}
.tpl3__v{display:block;height:56px;position:relative;background:center;background-size:cover;}
.tpl3__c.on .tpl3__v{height:70%;background-image:url("https://gosharry.com/wp-content/uploads/2026/08/converted-Frame-16.webp")}
.tpl3__c.on .tpl3__n {font-size:16px;}
.tpl3__v_2{background-image:url("https://gosharry.com/wp-content/uploads/2026/08/converted-Frame-17.webp");}
.tpl3__v_1{background-image:url("https://gosharry.com/wp-content/uploads/2026/08/converted-Frame-18.webp");}

.tpl3__n{display:block;font-size:10.5px;padding:6px 8px;color:var(--muted);text-align:end}
.tpl3__c.on .tpl3__n{color:var(--brand-700);font-weight:600}
.tpl3__ck{position:absolute;top:6px;inset-inline-end:6px;width:18px;height:18px;border-radius:50%;
  background:var(--brand-500);display:grid;place-items:center;box-shadow:0 2px 5px rgba(47,95,203,.4)}
.tpl3__ck svg{width:10px;height:10px}
.swatch{width:164px;margin: auto auto 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center;background-color:white;padding:10px;border-radius:8px;}
.swatch i{width:25px;height:25px;border-radius:4px;display:block;flex:none;
  box-shadow:0 0 0 1px rgba(11,18,32,.08) inset}
.swatch i.on{box-shadow:0 0 0 0px var(--brand-500) inset,0 0 0 1.5px var(--brand-500);color:var(--brand-500);text-align:center;font-family:-webkit-body;font-weight:900;line-height:26px;}
.swatch span{text-align:center;width:100%;font-size:14px;color:var(--ink);margin-inline-start:auto}

/* — step 2 · Excel import — */
.upl__row{display:flex;justify-content:space-between;align-items:center;gap:11px}
.upl__ic{max-width:73px;min-width:40px;height:121px;border:solid ;border-width:1px 0px 1px 1px;border-radius:9px 0px 0px 9px;background:#CBDAFA;color:var(--brand-50);
  font-size:32px;font-family:fangsong;display:grid;place-items:center;flex:none}
.upl__pct {max-width:63px;min-width:40px;height:121px;border:solid ;border-width:1px 1px 1px 0px;border-radius:0px 9px 9px 0px;background:#CBDAFA;color:var(--brand-50);
  font-size:32px;font-family:fangsong;display:grid;place-items:center;flex:none}
.upl__meta{max-width:185px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px;text-align:center;background-color:white;border-radius:10px;min-width:0}
.upl__meta img{box-shadow:0px 4px 10px #00000029;width:160px;border-radius:10px;margin-top:-20px;margin-bottom:5px;}
.upl__sel{display:flex; justify-content:center;gap:8px;}
.upl__meta b{display:block;font-size:10.5px;color:var(--ink);font-weight:600}
.upl__meta span{padding:2px 10px;border:solid 1px #D1D6DB;border-radius:50px;display:block;font-size:8.5px;color:var(--muted);margin-top:1px}
.upl__sel span{font-size:9px;padding:0px 13px;border:solid 1px;border-radius:50px;color:#06A86C !important;}
.upl__bar{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.upl__bar i{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--brand-600),var(--emerald-400));
  transition:width 1.4s var(--ease-out)}
.upl__bar.go i{width:78%}
.upl__rows{display:flex;flex-direction:column;gap:6px}
.upl__r{display:flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.upl__r>span:first-child{font-size:12px;color:var(--ink);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.szchip{font-size:10.5px;font-weight:600;color:var(--brand-700);background:var(--brand-50);
  border:1px solid var(--brand-100);border-radius:5px;padding:2px 7px;flex:none}
.szchip--n{color:var(--muted);background:var(--surface-2);border-color:var(--line)}

/* — step 3 · activate payment + shipping — */
.swrow{position:relative;max-width:210px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:0px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.swrow__el{display:flex;justify-content:space-between; align-items:center;width:100%;border:solid 1px #E3E3E3;border-width: 0 0px 1px 0; padding:8px 0;}
.swrow__el div{display:flex;align-items:center;gap:10px;}
.swrow__el img{width:25px;}
.swrow.el_1{top:12px;z-index:5;}
.swrow.el_2{bottom:15px;right:80px;}
.swrow__t{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink);font-weight:500}
.swrow__t svg{width:15px;height:15px;color:var(--muted);flex:none}
/* RTL-aware switch: ON pushes the knob to the inline-end (left in RTL) */
.tgl{width:34px;height:20px;border-radius:99px;background:var(--emerald-600);position:relative;flex:none}
.tgl::after{content:"";position:absolute;top:3px;inset-inline-end:3px;width:14px;height:14px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(11,18,32,.25);
  transition:inset-inline-end var(--mid) var(--ease-out)}
.tgl--off{background:var(--ghost)}
.tgl--off::after{inset-inline-end:17px}
.ordtoast{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--success-line);border-radius:10px;padding:10px 13px}
.ordtoast__ic{width:24px;height:24px;border-radius:50%;background:var(--success-bg);color:var(--success);
  display:grid;place-items:center;flex:none}
.ordtoast__ic svg{width:12px;height:12px}
.ordtoast__t{font-size:12.5px;color:var(--ink);font-weight:600;flex:1}
.ordtoast__a{font-size:12.5px;font-weight:600;color:var(--ink);flex:none}

/* ============================================================
   4 — INVENTORY (asymmetric, table bleeds, overlapping alert)
   ============================================================ */
.inv__grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,.85fr) ;gap:clamp(32px,5vw,72px);align-items:center}
.invpanel{position:relative;background:var(--surface);border:1px solid var(--line);margin-top:50px;
  border-radius:var(--r-xl);box-shadow:var(--e3);}
.invpanel__h{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line-2)}
.invpanel__t{font-size:15px;font-weight:600;color:var(--ink)}
.thead,.trow{display:grid;grid-template-columns:1.7fr .7fr .7fr .9fr;gap:16px;align-items:center;padding:14px 24px}
.thead{background:var(--surface-2);font-size:12.5px;color:var(--muted);font-weight:500}
.trow{border-bottom:1px solid var(--line-2);transition:background var(--fast) var(--ease)}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--surface-2)}
.trow--low{background:var(--warn-bg)}
.trow--low:hover{background:#FAEFDB}
.tprod{display:flex;align-items:center;gap:12px;min-width:0}
.tprod__i{width:38px;height:38px;border-radius:var(--r-xs);flex:none;
  background:linear-gradient(140deg,var(--surface-3),var(--surface-2));display:grid;place-items:center;color:var(--faint)}
.tprod__i svg{width:17px;height:17px}
.tprod__n{font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tprod__s{font-size:12px;color:var(--faint)}
.tnum{font-size:14.5px;font-weight:600;color:var(--ink);text-align:end;}
.tnum--low{color:var(--warn)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:5px 12px;border-radius:var(--r-full);border:1px solid transparent;white-space:nowrap}
.tag--ok{background:var(--success-bg);color:var(--success);border-color:var(--success-line);margin-right: 30px;}
.tag--low{background:#fff;color:var(--warn);border-color:var(--warn-line);margin-right: 30px;
}
.tag--info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.tag--idle{color:black;font-weight: 600;}
.tspark{display:flex;align-items:flex-end;gap:3px;height:26px}
.tspark i{width:5px;border-radius:2px;background:var(--brand-200);display:block}

.invside .statbig{font-size:clamp(44px,5vw,64px);line-height:1.1;font-weight:600;color:var(--ink)}
.invside h2{font-size:48px;}
.invside .statlbl{font-size:15px;color:var(--muted);margin-top:8px}
.invcallout{max-width:390px;position:absolute;top:-100px;right:-50px;margin-top:var(--s-4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:12px;box-shadow:var(--e2)}
.invcallout__h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.invcallout__ic{width:36px;height:36px;border-radius:var(--r-xs);background:var(--warn-bg);color:var(--warn);
  display:grid;place-items:center;flex:none}
.invcallout__ic svg{width:18px;height:18px}
.invcallout h4{font-size:15.5px;font-weight:600;color:var(--ink)}
.invcallout p{font-size:14.5px;color:var(--muted);line-height:1.7}

/* ============================================================
   5 — ACCOUNTING (document composition)
   ============================================================ */
.link.account{background-color:transparent; color:var( --info);margin-top:20px;border:solid 1px;}
#acc-h{font-size:46px;}
.acct__stage{position:relative;margin-top:var(--s-8);display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,5vw,64px);align-items:center}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--e4);padding:30px;max-width:520px;transform:rotate(1.1deg);
  transition:transform var(--slow) var(--ease-out)}
.doc:hover{transform:rotate(0deg)}
.doc__h{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.doc__t{font-size:17px;font-weight:600;color:var(--ink)}
.doc__m{font-size:12.5px;color:var(--muted);margin-top:5px}
.qr{width:66px;height:66px;border-radius:var(--r-xs);flex:none;border:1px solid var(--line);
  background:
    linear-gradient(90deg,var(--surface-3) 2px,transparent 2px) 0 0/10px 10px,
    linear-gradient(180deg,var(--surface-3) 2px,transparent 2px) 0 0/10px 10px,var(--surface-2);}
.doc__lines{padding-block:6px}
.dline{display:flex;justify-content:space-between;align-items:center;padding-block:11px;font-size:14.5px}
.dline span:first-child{color:var(--muted)}
.dline span:last-child{color:var(--ink);font-weight:500}
.dline--tot{border-top:1px solid var(--line);margin-top:8px;padding-top:16px}
.dline--tot span{font-size:19px;font-weight:600;color:var(--ink)}
.doc__f{display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.zbadge{display:inline-flex;align-items:center;gap:8px;background:var(--success-bg);color:var(--success);
  border:1px solid var(--success-line);border-radius:var(--r-full);padding:7px 14px;font-size:12.5px;font-weight:600}
.zbadge svg{width:14px;height:14px}
.vatcard{position:absolute;inset-inline-end:0%;bottom:-8%;width:min(320px,78%);z-index:3;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e4);padding:20px}
.vatcard__t{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.vrow{display:flex;align-items:center;padding-block:9px;font-size:13.5px;
  border-bottom:1px solid var(--line-2)}
.vrow:last-child{border-bottom:0}
.vrow span:last-child{font-weight:600;color:var(--ink)}
.acct__list{margin-top:var(--s-4);display:flex;flex-direction:column;gap:18px}
.acct__li{display:flex;gap:14px;align-items:flex-start}
.acct__li .ck{width:24px;height:24px;border-radius:50%;background:var(--success-bg);color:var(--success);
  display:grid;place-items:center;flex:none;margin-top:3px}
.acct__li .ck svg{width:13px;height:13px}
.acct__li p{font-size:16px;color:var(--body);line-height:1.7}
.acct__li b{color:var(--ink);font-weight:600}

/* ============================================================
   6 — FEATURES (bento)
   ============================================================ */
.features{justify-self:start;text-align:start;}
.features{max-width:100% !important;}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:var(--s-8)}
.cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  position:relative;overflow:hidden;
  transition:transform var(--mid) var(--ease-out),box-shadow var(--mid) var(--ease),border-color var(--fast) var(--ease)}
.cell:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--brand-200)}
.cell--wide{grid-column:span 4}
.cell--half{grid-column:span 3}
.cell--third{grid-column:span 2}
.cell__ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--brand-50);color:var(--brand-600);
  display:grid;place-items:center;margin-bottom:18px;transition:transform var(--mid) var(--ease-out)}
.cell:hover .cell__ic{transform:translateY(-2px) scale(1.06)}
.cell__ic svg{width:20px;height:20px}
.cell h4{font-size:19px;font-weight:600;color:var(--ink);margin-bottom:9px}
.cell p{font-size:15px;line-height:1.7;color:var(--muted)}
.cell__vis{margin-top:20px}
.cell__phone img{max-width:180px;position:absolute;top:50px;left:20px;transform: rotate(-16deg);transition: .3s ease;}
.cell__phone:hover img{top:10px;transform: rotate(0deg);}
.cell__phone p{width:60%;}
.cell_support{grid-column: span 4}
/* mini-UIs inside bento cells */
.paylist{display:flex;flex-wrap:wrap;gap:8px}
.paychip{display:inline-flex;align-items:center;gap:7px;background:#EEF3FD;border:1px solid var(--line);
  border-radius:var(--r-xs);padding:8px 13px;font-size:12.5px;color:var(--body);font-weight:500}
.paychip svg{width:15px;height:15px;color:var(--muted)}
.shiptl{display:flex;align-items:center;gap:0}
.shiptl__n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--success-bg);color:var(--success);border:1px solid var(--success-line)}
.shiptl__n svg{width:12px;height:12px}
.shiptl__n--idle{background:var(--surface-2);color:var(--faint);border-color:var(--line)}
.shiptl__l{flex:1;height:1.5px;background:var(--success-line)}
.shiptl__l--idle{background:var(--line);
  background-image:linear-gradient(90deg,var(--line) 50%,transparent 50%);background-size:7px 1.5px}
.shiptl__lbl{display:flex;justify-content:space-between;margin-top:9px;font-size:11.5px;color:var(--faint)}
.appmock{display:flex;gap:10px;align-items:flex-end}
.phone{width:64px;height:104px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface-2);
  padding:7px 6px;display:flex;flex-direction:column;gap:4px}
.phone i{display:block;height:6px;border-radius:2px;background:var(--surface-3)}
.phone i:first-child{height:16px;background:var(--brand-100)}
.phone--b{height:86px;opacity:.62}
.heat{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.heat i{aspect-ratio:1;border-radius:8px;background:var(--brand-50);display:block}
.funnel{display:flex;flex-direction:column;gap:7px}
.funnel i{height:19px;border-radius:5px;background:linear-gradient(90deg,var(--brand-500),var(--brand-400));display:block;
  transform-origin:inline-start;transform:scaleX(0);transition:transform 1s var(--ease-out) var(--fd,0ms)}
.funnel.go i{transform:scaleX(1)}

/* ============================================================
   7 — CUSTOMER TYPES (tab switcher)
   ============================================================ */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s-6);padding:6px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-full);width:fit-content;max-width:100%}
.tab{font-size:15.5px;font-weight:600;color:var(--muted);padding:13px 26px;border-radius:var(--r-full);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),box-shadow var(--mid) var(--ease);white-space:nowrap}
.tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--e2)}
.tab:hover{color:var(--ink)}
.panels{margin-top:var(--s-5)}
.panel{display:none}
.panel.on{display:block;animation:panelin .45s var(--ease-out)}
@keyframes panelin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,60px);
  align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,3.6vw,52px);box-shadow:var(--e2)}
.panel h3{margin-bottom:16px}
.panel__list{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.panel__list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--body)}
.panel__list .ck{width:22px;height:22px;border-radius:50%;background:var(--brand-50);color:var(--brand-600);
  display:grid;place-items:center;flex:none;margin-top:3px}
.panel__list .ck svg{width:12px;height:12px}
.panelvis{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.chklist{display:flex;flex-direction:column;gap:12px}
.chkrow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px 16px}
.chkrow .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--success-bg);color:var(--success)}
.chkrow .n svg{width:13px;height:13px}
.chkrow .n--idle{background:var(--surface-2);color:var(--faint);border:1px solid var(--line)}
.chkrow p{font-size:14.5px;color:var(--ink);font-weight:500}
.chkrow .tag{margin-inline-start:auto}

/* ============================================================
   8 — DASHBOARD SHOWCASE (full-bleed, elevated)
   ============================================================ */
.showcase .sec-head h2{color:white;}
.showcase .sec-head p.eyebrow{color:#7FB0FF;background:transparent;}
.showcase .sec-head p.lede{color:#A9C2E2;font-size:18px;}


.showcase{position:relative;overflow:hidden;background:var(--surface-2);
  border-block:1px solid var(--line);padding-block:var(--s-20) 0}
.showcase__lens{position:absolute;bottom:-46%;inset-inline-start:50%;transform:translateX(50%);
  width:min(1500px,142vw);opacity:.45;pointer-events:none}
.showcase__in{position:relative;z-index:1}
.bigdash{margin-top:var(--s-8);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;box-shadow:var(--e4);overflow:hidden;
  display:grid;grid-template-columns:232px minmax(0,1fr)}
.bd__side{border-inline-start:1px solid var(--line-2);background:var(--surface);padding:24px 16px}
.bd__brand{display:flex;align-items:center;gap:10px;padding:0 10px 22px;margin-bottom:14px;border-bottom:1px solid var(--line-2)}
.bd__brand span{font-size:17px;font-weight:600;color:var(--ink)}
.bd__nav{display:flex;flex-direction:column;gap:2px}
.bd__nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-xs);
  font-size:14.5px;color:var(--muted);transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.bd__nav a svg{width:17px;height:17px;flex:none}
.bd__nav a:hover{background:var(--surface-2);color:var(--ink)}
.bd__nav a.on{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.bd__main{padding:28px;min-width:0}
.bd__top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.bd__hi{font-size:22px;font-weight:600;color:var(--ink)}
.bd__sub{font-size:14px;color:var(--muted);margin-top:3px}
.bd__search{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-full);padding:10px 18px;font-size:13.5px;color:var(--faint);min-width:230px}
.bd__search svg{width:15px;height:15px}
.bdkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.bdk{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:var(--surface)}
.bdk__l{font-size:12.5px;color:var(--muted)}
.bdk__v{font-size:25px;font-weight:600;color:var(--ink);margin-top:8px;line-height:1.15}
.bdk__v em{font-style:normal;font-size:12.5px;color:var(--muted);font-weight:500;margin-inline-start:4px}
.bdk__d{font-size:12.5px;font-weight:600;margin-top:7px;display:inline-flex;align-items:center;gap:4px}
.bdk__d svg{width:12px;height:12px}
.up{color:var(--emerald-600)}.down{color:var(--error)}
.bdgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px}
.bdcard{border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:var(--surface)}
.bdcard__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.bdcard__t{font-size:15px;font-weight:600;color:var(--ink)}
.bars2{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,15px);height:172px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end;min-width:0}
.bwrap{display:flex;align-items:flex-end;gap:4px;height:100%;width:100%;justify-content:center}
.bcol b{width:34%;max-width:17px;border-radius:5px 5px 0 0;display:block;height:0;
  background:linear-gradient(180deg,var(--brand-500),var(--brand-400));
  transition:height 1.1s var(--ease-out) var(--bd,0ms)}
.bcol b.g{background:linear-gradient(180deg,var(--surface-3),var(--surface-2))}
.bars2.go .bcol b{height:var(--h)}
.bcol span{font-size:11.5px;color:var(--faint);white-space:nowrap}
.toplist{display:flex;flex-direction:column;gap:3px}
.toprow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--line-2)}
.toprow:last-child{border-bottom:0}
.toprow__i{width:34px;height:34px;border-radius:var(--r-xs);background:var(--surface-2);
  display:grid;place-items:center;color:var(--faint)}
.toprow__i svg{width:16px;height:16px}
.toprow__n{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toprow__b{height:5px;border-radius:99px;background:var(--surface-3);margin-top:7px;overflow:hidden}
.toprow__b i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-600),var(--brand-400));
  width:0;transition:width 1.1s var(--ease-out) var(--bd,0ms)}
.toplist.go .toprow__b i{width:var(--w)}
.toprow__v{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.ordtable{margin-top:16px}
.othead,.otrow{display:grid;grid-template-columns:1fr 1.2fr 1fr .9fr .8fr;gap:14px;align-items:center;padding:13px 0}
.othead{font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.otrow{border-bottom:1px solid var(--line-2);font-size:14px;color:var(--body)}
.otrow:last-child{border-bottom:0}
.otrow b{font-weight:600;color:var(--ink)}
.otid{color:var(--brand-600);font-weight:600}

/* ============================================================
   9 — TESTIMONIALS (magazine: one featured + two)
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:var(--s-8)}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  display:flex;flex-direction:column;
  transition:transform var(--mid) var(--ease-out),box-shadow var(--mid) var(--ease)}
.quote:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.quote--feat{grid-column:span 4;background:linear-gradient(150deg,var(--ink),#16233C);border-color:transparent}
.quote_2{grid-column:span 2;}
.quote_3{grid-column:span 3;}
.quote_4{grid-column:span 3;}
.quote__mark{width:30px;height:30px;color:var(--brand-200);margin-bottom:18px}
.quote--feat .quote__mark{color:rgba(255,255,255,.28)}
.quote p{font-size:18px;line-height:1.75;color:var(--ink-2);font-weight:400}
.quote--feat p{font-size:clamp(20px,2.2vw,26px);line-height:1.62;color:#fff;font-weight:300}
.quote__metrics{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.metric{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px}
.quote--feat .metric{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.metric b{display:block;font-size:20px;font-weight:600;color:var(--emerald-600);line-height:1.2}
.quote--feat .metric b{color:var(--emerald-400)}
.metric span{font-size:12.5px;color:var(--muted)}
.quote--feat .metric span{color:rgba(255,255,255,.62)}
.quote__by{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:26px}
.av{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:16px;font-weight:600;color:var(--brand-700);background:linear-gradient(140deg,var(--brand-100),var(--emerald-50));
  border:1px solid var(--line)}
.quote--feat .av{background:linear-gradient(140deg,rgba(59,111,212,.5),rgba(62,205,144,.32));
  color:#fff;border-color:rgba(255,255,255,.2)}
.quote__n{font-size:15.5px;font-weight:600;color:var(--ink)}
.quote--feat .quote__n{color:#fff}
.quote__r{font-size:13.5px;color:var(--muted)}
.quote--feat .quote__r{color:rgba(255,255,255,.6)}

/* ============================================================
   10 — PRICING
   ============================================================ */
#pricing .sec-head {max-width:968px ;}
.plans__switch{height:100px ;display: flex;justify-content: space-between;align-items: end;}
.plans__switch{
    .switch{position: relative;display: inline-block;width: 60px;height: 29px;}
    .switch input{display: none;}
    .slider{position: absolute;inset: 0;background: #17E99B;border-radius: 24px;cursor: pointer;transition: .3s;}
    .slider::before{content: "";position: absolute;width: 22px;height: 22px;left: 4px;top: 4px;background: #fff;border-radius: 50%;transition: .3s;}
    input:checked + .slider{background: #64718B;}
    input:checked + .slider::before{transform: translateX(26px);}
    .btns{margin: 0;}
    .btns a{background-color: transparent;color: #2BC48B;}
}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;align-items:start}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 30px;
  display:flex;flex-direction:column;position:relative;height: 100%;
  transition:transform var(--mid) var(--ease-out),box-shadow var(--mid) var(--ease)}
.plan:hover{transform:translateY(-5px);box-shadow:var(--e3)}
.plan--feat{border-color:var(--brand-200);box-shadow:var(--e3)}
/* the subtle glow the brief asks for — one plan only */
.plan--feat::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(59,111,212,.16),rgba(62,205,144,.10) 46%,transparent 72%);
  opacity:.9;
}
.plan>*{position:relative}
.plan__tag{align-self:flex-start;background:var(--ink-3);color:#fff;font-size:12.5px;font-weight:600;
  padding:6px 15px;border-radius:var(--r-full);}
.plan__n{font-size:22px;font-weight:600;color:var(--ink)}
.plan__for{font-size:14.5px;color:var(--muted);line-height:1.65;margin-top:8px;min-height:46px}
.plan__p{margin-top:26px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.plan__amt{font-size:46px;font-weight:600;color:var(--ink);line-height:1}
.plan__per{font-size:15px;color:var(--muted)}
.plan__save{min-height:34px;display:flex;align-items:center;margin-top:12px}
.plan__head{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.savepill{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#0A8058 0%,#066146 100%);color:white;
  border:1px solid var(--success-line);border-radius:var(--r-full);padding:6px 14px;font-size:13px;font-weight:600}
.plan .btn{width:100%;margin-block:22px 26px}
.plan__inc{font-size:13.5px;color:var(--muted);font-weight:500;margin-bottom:16px}
.feats{display:flex;flex-direction:column;gap:14px}
.feats li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--body);line-height:1.6}
.feats .ck{width:20px;height:20px;border-radius:50%;background:var(--success-bg);color:var(--success);
  display:grid;place-items:center;flex:none;margin-top:2px}
.feats .ck svg{width:11px;height:11px}
.table_cmp{margin-top:var(--s-10);}
.cmp{width:100%;border-collapse:collapse;margin-top:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cmp caption{text-align:start;font-size:15px;color:var(--muted);padding-bottom:16px;caption-side:top}
.cmp th,.cmp td{padding:16px 22px;text-align:start;font-size:15px;border-bottom:1px solid var(--line-2)}
.cmp thead th{background:var(--surface-2);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.cmp tbody th{font-weight:400;color:var(--body)}
.cmp thead {overflow: hidden !important;}
.cmp td{text-align:center;color:var(--ink);font-weight:500}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover{background:var(--surface-2)}
.cmp .yes{color:var(--success)}
.cmp .no{color:var(--ghost)}
.cmp svg{width:17px;height:17px;display:inline-block;vertical-align:middle}
.pricenote{margin-top:22px;font-size:14.5px;color:var(--muted);text-align:center}

/* ============================================================
   11 — MIGRATION (timeline)
   ============================================================ */
.tl{margin-top:var(--s-8);position:relative}
.tl__line{position:absolute;top:23px;inset-inline:44px;height:1.5px;background:var(--line)}
.tl__line i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-500),var(--emerald-400));
  width:0;transition:width 1.6s var(--ease-out)}
.tl.go .tl__line i{width:100%}
.tl__items{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.tli{text-align:center}
.tli__n{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);
  display:grid;place-items:center;margin-inline:auto;margin-bottom:20px;position:relative;z-index:1;
  font-size:15px;font-weight:600;color:var(--brand-600);
  transition:border-color var(--mid) var(--ease),box-shadow var(--mid) var(--ease),transform var(--mid) var(--ease-out)}
.tli:hover .tli__n{border-color:var(--brand-500);box-shadow:0 0 0 5px var(--brand-50);transform:translateY(-3px)}
.tli h4{font-size:17.5px;font-weight:600;color:var(--ink);margin-bottom:9px}
.tli p{font-size:15px;color:var(--muted);line-height:1.7;max-width:30ch;margin-inline:auto}
.migbar{margin-top:var(--s-8);background:var(--brand-200);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;box-shadow:var(--e2)}
.migbar p{font-size:17px;color:var(--ink);font-weight:500}
.migbar span{font-size:14.5px;color:var(--muted);display:block;margin-top:5px}

/* ============================================================
   12 — FAQ
   ============================================================ */
.faq{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(32px,5vw,72px);align-items:start}
.faq__list{display:flex;flex-direction:column}
.faqg{font-size:13.5px;font-weight:600;color:var(--brand-600);margin-block:32px 10px}
.faqg:first-child{margin-top:0}
.qa{border-bottom:1px solid var(--line)}
.qa__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:24px 0;font-family:var(--ar);font-size:18px;font-weight:600;color:var(--ink);text-align:start;
  transition:color var(--fast) var(--ease)}
.qa__q:hover{color:var(--brand-600)}
.qa__ic{width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;margin-top:2px;transition:transform var(--mid) var(--ease-out),
  border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.qa__ic svg{width:13px;height:13px;color:var(--muted)}
.qa[open] .qa__ic,.qa.open .qa__ic{transform:rotate(180deg);border-color:var(--brand-500);background:var(--brand-50)}
.qa.open .qa__ic svg{color:var(--brand-600)}
/* grid-rows trick: animates height with no JS measurement */
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease-out)}
.qa.open .qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden}
.qa__a p{font-size:16.5px;line-height:1.8;color:var(--body);padding-bottom:26px;max-width:62ch}

/* ============================================================
   13 — FINAL CTA
   ============================================================ */
.cta{position:relative;overflow:hidden;border-radius:var(--r-2xl);
  background: linear-gradient(135deg,#0C1D38,#0A1730,#081420);
  padding:clamp(52px,7vw,104px) clamp(28px,5vw,80px);text-align:center;box-shadow:var(--e4)}
.cta__lens{position:absolute;bottom:-58%;inset-inline-start:50%;transform:translateX(50%);
  width:min(760px,116%);opacity:.16;pointer-events:none}
.cta__in{position:relative;z-index:1;max-width:660px;margin-inline:auto}
.cta h2{color:#fff}
.cta p{font-size:clamp(17px,1.6vw,20px);color:rgba(255,255,255,.82);margin-top:20px;font-weight:300}
.cta .btns{justify-content:center}
.cta__fine{margin-top:26px;font-size:14.5px;color:rgba(255,255,255,.62)}
.cta__p{color:#64718B !important;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--surface);border-top:1px solid var(--line);padding-block:var(--s-12) var(--s-5);margin-top:var(--s-20)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);
  padding-bottom:var(--s-8);border-bottom:1px solid var(--line)}
.foot__brand p{font-size:15px;color:var(--muted);line-height:1.75;margin-top:18px;max-width:32ch}
.foot h4{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:18px}
.foot ul{display:flex;flex-direction:column;gap:11px}
.foot ul a{font-size:14.5px;color:var(--muted);transition:color var(--fast) var(--ease)}
.foot ul a:hover{color:var(--brand-600)}
.news{margin-top:var(--s-8);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  align-items:center;padding-bottom:var(--s-8);border-bottom:1px solid var(--line)}
.news h4{font-size:19px;margin-bottom:8px}
.news p{font-size:15px;color:var(--muted)}
.newsform{display:flex;gap:10px;flex-wrap:wrap}
.newsform input{flex:1;min-width:210px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-full);padding:15px 22px;font-size:15.5px;color:var(--ink);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.newsform input::placeholder{color:var(--faint)}
.newsform input:focus{outline:none;border-color:var(--brand-500);background:var(--surface);box-shadow:var(--ring)}
.foot__base{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding-top:var(--s-4)}
.foot__legal{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.foot__legal a:hover{color:var(--brand-600)}
.selects{display:flex;gap:10px;flex-wrap:wrap}
.sel{display:inline-flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-full);padding:10px 17px;font-size:14px;color:var(--body);cursor:pointer;
  transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.sel:hover{border-color:var(--ghost);color:var(--ink)}
.sel svg{width:15px;height:15px;color:var(--muted)}
.social{display:flex;gap:9px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),
  transform var(--fast) var(--ease),background var(--fast) var(--ease)}
.social a:hover{color:var(--brand-600);border-color:var(--brand-200);background:var(--brand-50);transform:translateY(-2px)}
.social svg{width:17px;height:17px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  :root{--sec:var(--s-15);--gutter:28px}
  .nav__menu,.nav__login{display:none}
  .navtoggle{display:flex}
  .drawer{display:block}
  .hero__grid{grid-template-columns:1fr;gap:56px}
  .stage{min-height:auto}
  .sat--order{inset-inline-end:0;top:2%}
  .sat--stock{inset-inline-start:0;bottom:2%}
  .inv__grid,.acct__stage,.panel__grid,.faq,.news{grid-template-columns:1fr}
  .acct__stage{gap:72px}
  .vatcard{position:relative;inset:auto;width:100%;margin-top:20px;box-shadow:var(--e2)}
  .doc{max-width:none;transform:none}
  .bigdash{grid-template-columns:1fr}
  .bd__side{display:none}
  .bento{grid-template-columns:repeat(4,1fr)}
  .cell--wide{grid-column:span 4}
  .cell--half{grid-column:span 2}
  .cell--third{grid-column:span 2}
  .quotes{grid-template-columns:1fr 1fr}
  .quote--feat{grid-column:span 2}
  .tl__items{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .tl__line{display:none}
  .foot__top{grid-template-columns:1fr 1fr 1fr}
  .browser{max-width:none}
  .tplpick{position:relative;inset:auto;width:100%;margin-top:20px}
  .builder__stage{padding-bottom:0}
  .tpl__v{height:160px !important}
  .tpl__n{font-size:20px ;}
  .invcallout{top:-65px;right:1px !important;}
  .cell__phone img{max-width:150px;top:100px;left:19px;}
}
@media (max-width:820px){
  
  .kpirow,.bdkpis{grid-template-columns:1fr 1fr}
  .bdgrid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .steprail{grid-template-columns:1fr;gap:34px}
  .cmp{overflow-x:auto}
  .thead,.trow{grid-template-columns:1.5fr .7fr .9fr;gap:12px;padding-inline:18px}
  .thead>:nth-child(3),.trow>:nth-child(3){display:none}
  .othead,.otrow{grid-template-columns:1fr 1fr .9fr;gap:10px}
  .othead>:nth-child(3),.otrow>:nth-child(3),
  .othead>:nth-child(4),.otrow>:nth-child(4){display:none}
  .stepc__vis{height:260px}
  .cell__phone img{max-width:130px;top:100px;left:19px;}
  
}
@media (max-width:640px){
  :root{--sec:var(--s-10);--gutter:20px}
  body{font-size:16px}
  .bento,.quotes{grid-template-columns:1fr}
  .cell--wide,.cell--half,.cell--third,.quote--feat{grid-column:span 1}
  .kpirow,.bdkpis,.prodgrid,.tpls{grid-template-columns:1fr 1fr}
  .shophero{grid-template-columns:1fr}
  .tl__items{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr 1fr}
  .btns .btn{width:100%}
  .tabs{width:100%;justify-content:stretch}
  .tabs button{font-size:12px; padding:10px;}
  .tab{flex:1;padding-inline:14px;font-size:14.5px}
  .sat{display:none}
  .heat{grid-template-columns:repeat(8,1fr)}
  .hero h1{font-size:39px}
  .cell__phone img{max-width:170px;top:20px;left:39px;}
  .quote{grid-column:span 1;}
  .container.table_cmp{padding-inline:unset;}
}
@media (max-width:480px){
  .tpl__v{height:100px !important}
  .tpl__n{font-size:16px ;}
  .cell__phone img{max-width:40%;top:70px;left:20px;}
  .cmp th ,.cmp td {font-size:9px ;padding: 10px;}
  .cmp thead th {font-size:12px ;}
  .invcallout {width:250px;top:-90px;text-align:ce;}
  #acc-h,#inv-h{font-size:30px;}
  .foot__brand {grid-column: 1 / 3 !important;display:flex;flex-direction:column;justify-content:center;align-items:center;}
  .foot__top{text-align:center;}
}


/* ============================================================
   SUB-PAGE PATTERNS
   ============================================================ */
.subhero{padding-block:clamp(56px,6vw,92px) clamp(40px,5vw,72px)}
.subhero .sec-head{max-width:1000px}
.subhero .btns{margin-top:32px}
.caps{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.cap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);
  padding:11px 20px;font-size:15px;font-weight:500;color:var(--body)}

.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--s-8)}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:var(--s-8)}
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.split2--wide{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.split2 .s-txt .lede{margin-top:16px}
.split2 .s-txt .p{margin-top:16px}
.split2 .s-vis_phone {position: relative;overflow: hidden;height: 315px;}
.split__img{position: absolute;width: 240px;top:0;right: 19%;}
.split__3_img{width: 450px;position:absolute;top:20px;z-index: 1;left: 0px;}

/* generic mock window reused across sub-pages */
.mock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--e3);overflow:hidden}
.mock__bar{display:flex;justify-content:end;align-items:center;gap:8px;padding:14px 18px;background:var(--brand-50);
  border-bottom:1px solid var(--line-2)}
.mock__bar i{width:9px;height:9px;border-radius:50%;background:var(--ghost);display:block}
.mock__bar span{margin-inline-start:10px;font-size:12px;color:var(--muted)}
.mock__b{padding:20px;display:flex;flex-direction:column;gap:0px}
.sectors_section_3 .mock__b{height:100%;}
.sectors_vis {height: auto !important;}

.rowline{display:flex;align-items:center;gap:12px;padding-block:13px;border-bottom:1px solid var(--line-2)}
.rowline__2{display:flex;align-items:center;gap:12px;padding-block:13px;border:2px solid #E5EBF3;background:var(--brand-50);padding:10px 20px;border-radius:15px;margin: 5px 0;}
.rowline:last-child{border-bottom:none}
.rowline__t{flex:1;min-width:0;font-size:14.5px;color:var(--ink);font-weight:500}
.rowline__s{font-size:12px;color:var(--muted);display:block;font-weight:400;margin-top:2px}
.rowline_dot{width: 15px;height: 15px;border-radius: 20px;}
/* sector cards */
.sector{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  transition:transform var(--mid) var(--ease-out),box-shadow var(--mid) var(--ease),border-color var(--fast) var(--ease)}
.sector:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--brand-200)}
.sector__ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--brand-50);color:var(--brand-600);
  display:grid;place-items:center;margin-bottom:18px}
.sector__ic svg{width:20px;height:20px}
.sector h3{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:9px}
.sector p{font-size:15px;line-height:1.7;color:var(--muted)}
.sector__svg{width: 42px; height: 42px; background: linear-gradient(135deg, #3E7CE8 0%, #2151BE 100%); border-radius: 12px; justify-content: center; align-items: center; display: inline-flex}

/* variant picker (sectors worked example) */
.vrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vrow__l{font-size:13px;color:var(--muted);width:100%}
.vsz{border:1px solid var(--line);border-radius:10px;padding:5px 12px;font-size:14px;font-weight:500;
  color:var(--body);background:var(--surface)}
.vsz.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.vcol{width:32px;height:32px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(11,18,32,.1) inset}
.vcol.on{box-shadow:0 0 0 2px var(--surface) inset,0 0 0 3px var(--brand-500)}
.sector_con{display: flex;gap: 20px;justify-content: center;}
.sector_con .img_3{width:100% ;max-width: 220px;margin: 10px;border-radius: 8px;}

/* contact form */
/* .form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,3vw,40px);box-shadow:var(--e2)}
.form h3{font-size:24px;font-weight:600;color:var(--ink);margin-bottom:24px}
.fldrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.fld label{font-size:14px;font-weight:500;color:var(--ink)}
.fld input,.fld select,.fld textarea{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px 18px;font-size:15.5px;color:var(--ink);font-family:var(--ar);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.fld textarea{min-height:120px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand-500);
  background:var(--surface);box-shadow:var(--ring)} */
.contact.split2--wide {
    grid-template-columns: minmax(0,0.7fr) minmax(0,.9fr);
}
.form form{
  width:100% !important;
  gap:10px;
}
.form label{
  font-size:14px!important;
  font-weight:500!important;
  color:var(--ink)!important;
}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:0px;box-shadow:var(--e2);padding:clamp(26px,3vw,40px);}
.form h3{font-size:24px;font-weight:600;color:var(--ink);margin-bottom:24px}
.form  .forminator-textarea ,
.form  input {
  border:none !important;
  background:#EEF3FD;
  padding:15px !important;
  border-radius:12px !important;
}
.forminator-select .selection .select2-selection {
  border:none !important;
  background:#EEF3FD;
  padding:7px !important;
  border-radius:12px !important;
}



.form .forminator-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--brand-50) !important;
  background: var(--ink-3) !important;
  padding: 15px 25px !important;
  border-radius: 50px !important;
  transition: background .3s ease, color .3s ease, gap .3s ease !important;
}

.form .forminator-button::after {
  content: "";
  font-size: 18px;
  display: inline-block;
  transition: transform .3s ease;
  background-image:url("https://darkviolet-heron-106561.hostingersite.com/wp-content/uploads/2026/08/Vector-5.png");
  height:14px;
  width:14px;
  background-size:contain;
  background-repeat:no-repeat;
}

.form .forminator-button:hover {
  background: var(--ink-2) !important;
  gap: 12px !important;
}

.form .forminator-button:hover::after {
  transform: translateX(-5px);
}
.cinfo{display:flex;flex-direction:column;gap:14px}
.cinfo__r{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.cinfo__r span{display:block;font-size:13px;color:var(--muted)}
.cinfo__r b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-top:4px}
.cinfo__r b.ph{color:var(--ghost);font-weight:500}

/* blog */
.catrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;justify-content:center}
.cat{transition: all 0.1s linear;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-full);
  padding:10px 20px;font-size:15px;font-weight:500;color:var(--body);}
.cat:hover{background:var(--ink-3);color:white;}
.cat.on{background:var(--ink-3);color:#fff;border-color:var(--ink)}
.featpost{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--e3);align-items:stretch}
.featpost__img{min-height:300px;background:linear-gradient(140deg,var(--brand-100),var(--emerald-50))}
.featpost__b{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center}
.featpost__b h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;color:var(--ink);
  line-height:1.42;margin-block:18px 14px}
.featpost__b p{font-size:17px;line-height:1.8;color:var(--body)}
.pmeta{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:14px;color:var(--muted)}
.pmeta i{width:4px;height:4px;border-radius:50%;background:var(--ghost);display:block}
.postcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--mid) var(--ease-out),box-shadow var(--mid) var(--ease)}
.postcard:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.postcard__img{height:168px}
.postcard__b{padding:24px}
.postcard__b h3{font-size:18px;font-weight:600;color:var(--ink);margin-block:14px 8px;line-height:1.5}
.postcard__b p{font-size:15px;color:var(--muted);line-height:1.7}
.ph-txt{color:var(--ghost)}
.newsbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(36px,4vw,56px);text-align:center;box-shadow:var(--e2)}
.newsbox h3{font-size:clamp(24px,2.6vw,30px);font-weight:600;color:var(--ink)}
.newsbox p{font-size:17px;color:var(--body);margin-top:12px}
.newsbox form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px;margin:28px auto 0}
.newsbox input{flex:1;min-width:220px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-full);padding:15px 22px;font-size:15.5px;color:var(--ink);font-family:var(--ar)}
.newsbox input:focus{outline:none;border-color:var(--brand-500);background:var(--surface);box-shadow:var(--ring)}

/* principles */
.principle{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.principle__n{width:40px;height:40px;border-radius:50%;background:var(--brand-50);color:var(--brand-600);
  display:grid;place-items:center;font-size:16px;font-weight:600;font-family:var(--lat);margin-bottom:18px}
.principle h3{font-size:21px;font-weight:600;color:var(--ink);margin-bottom:10px}
.principle p{font-size:16px;line-height:1.8;color:var(--muted)}

@media (max-width:980px){
  .split2,.split2--wide,.featpost{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr 1fr}
  .featpost__img{min-height:220px}
  .split__3_img{top:20px;right: 30%;}
  .page-template-page-blog .g2 {grid-template-columns: repeat(3, 1fr) !important;}
}
@media(max-width:820px){
  .container.contact{
   display:flex !important;
   flex-direction:column !important;
  }
  .container.contact > div{
   width:100%;
  }
    .page-template-page-blog .g2 {grid-template-columns: repeat(2, 1fr) !important;}

}
@media (max-width:640px){
  .g3,.g2,.fldrow{grid-template-columns:1fr}
  .caps .cap{font-size:14px;padding:9px 16px}
  .sector_con{flex-direction: column;align-items:center ;width:100% ;}
  .sector_con .prod__img{width:100% ;max-width: 320px;margin: 10px;}
}
@media (max-width:480px){
  .split2 .s-vis {height: auto;}
  .split2 .s-vis_phone {height: 215px;}

  .split__img{width: 200px;}
  .split__3_img{width: 350px;}
  .page-template-page-blog .g2 {grid-template-columns: repeat(1, 1fr) !important;}
}