/*
 * Diaco System — unique, animated commercial theme.
 * RTL / Persian. Brand palette sampled from the official Diaco logo.
 *   Teal #1CA79C (dominant)  ·  Orange #F9AF22 (single accent)
 * Motif: "pixel squares" lifted from the logotype's kufic detailing.
 */

/* ============ Fonts ============ */
@font-face { font-family:"Vazirmatn"; src:url("../fonts/vazirmatn-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Vazirmatn"; src:url("../fonts/vazirmatn-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Vazirmatn"; src:url("../fonts/vazirmatn-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Vazirmatn"; src:url("../fonts/vazirmatn-800.woff2") format("woff2"); font-weight:800; font-display:swap; }

/* ============ Tokens ============ */
:root {
  --teal:      #1ca79c;
  --teal-600:  #12897d;
  --teal-700:  #0e6e63;
  --teal-800:  #0a5249;
  --teal-050:  #e7f5f2;
  --orange:    #f9af22;
  --orange-600:#ed9a12;
  --orange-050:#fef2da;

  /* deep teal shells for hero/dark bands */
  --shell-950: #04211e;
  --shell-900: #07302b;
  --shell-800: #0b423b;

  /* neutrals — biased toward the teal accent */
  --ink:       #0e2a27;
  --ink-2:     #294742;
  --muted:     #5e7873;
  --muted-2:   #86a09b;
  --line:      #dcece8;
  --surface:   #ffffff;
  --surface-2: #eef7f4;
  --surface-3: #e3f1ec;
  --bg:        #f4faf8;

  --radius:    20px;
  --radius-sm: 13px;
  --radius-lg: 30px;
  --shadow-sm: 0 2px 10px rgba(10,82,73,.06);
  --shadow-md: 0 14px 40px rgba(10,82,73,.12);
  --shadow-lg: 0 30px 80px rgba(4,33,30,.22);
  --ring:      0 0 0 4px rgba(28,167,156,.22);

  --grad-teal:   linear-gradient(135deg,#1ca79c 0%,#0f9f93 55%,#12b7a0 100%);
  --grad-orange: linear-gradient(135deg,#fbbb45 0%,#f9af22 55%,#f39415 100%);

  --container: 1200px;
  --header-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Light is the default everywhere. Dark applies ONLY when the visitor
 * flips the header toggle (data-theme="dark") — never automatically. */
:root[data-theme="dark"] {
  --ink:#eafbf7; --ink-2:#bfe0d9; --muted:#93b3ac; --muted-2:#6f938c;
  --line:#173c37; --surface:#0a322d; --surface-2:#082a26; --surface-3:#0c3a34;
  --bg:#051f1c; --surface-hi:#0e433c;
  --shadow-sm:0 2px 10px rgba(0,0,0,.3); --shadow-md:0 16px 44px rgba(0,0,0,.42); --shadow-lg:0 30px 80px rgba(0,0,0,.55);
}

/* ============ Base ============ */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:clamp(13.5px, 0.55vw + 6px, 16px); scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--teal) 60%, transparent) transparent; }
/* Subtle floating scrollbar — translucent teal pill over the page background */
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--teal) 55%, transparent); border-radius:999px; border:3.5px solid transparent; background-clip:padding-box; transition:background .2s; }
::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb, var(--teal) 85%, transparent); background-clip:padding-box; }
::-webkit-scrollbar-corner { background:transparent; }
body {
  margin:0; font-family:"Vazirmatn",system-ui,"Segoe UI",Tahoma,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.85; font-size:16px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3,h4 { margin:0 0 .5em; font-weight:800; line-height:1.32; letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
p { margin:0 0 1em; color:var(--ink-2); }
a { color:var(--teal-700); text-decoration:none; transition:color .2s; }
a:hover { color:var(--teal); }
img { max-width:100%; display:block; }
ul { margin:0; padding:0; list-style:none; }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:8px; }
.tnum { font-variant-numeric:tabular-nums; }

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:22px; }

/* Scroll progress */
.progress { position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:200; background:transparent; }
.progress__bar { height:100%; width:0; background:var(--grad-orange); box-shadow:0 0 12px rgba(249,175,34,.6); transition:width .1s linear; }

/* Pixel-square motif */
.pixel { display:inline-grid; grid-template-columns:repeat(2,6px); grid-auto-rows:6px; gap:2px; vertical-align:middle; }
.pixel i { background:var(--orange); border-radius:1px; opacity:.9; }
.pixel i:nth-child(2){ background:var(--teal); } .pixel i:nth-child(3){ background:var(--teal); opacity:.5; }

/* ============ Buttons ============ */
.btn { --b:transparent; display:inline-flex; align-items:center; gap:.55rem; font-family:inherit; font-weight:700;
  font-size:.98rem; padding:.82rem 1.65rem; border-radius:999px; cursor:pointer; border:1px solid var(--b);
  transition:transform .18s var(--ease), box-shadow .22s, background .2s, color .2s; white-space:nowrap; position:relative; }
.btn:active { transform:translateY(1px) scale(.99); }
.btn svg { width:19px; height:19px; }
.btn-accent { background:var(--grad-orange); color:#fff; text-shadow:0 1px 2px rgba(120,60,0,.35); box-shadow:0 10px 26px rgba(249,175,34,.4); }
.btn-accent:hover { color:#fff; transform:translateY(-2px); box-shadow:0 16px 34px rgba(249,175,34,.52); }
.btn-teal { background:var(--grad-teal); color:#fff; box-shadow:0 10px 26px rgba(28,167,156,.4); }
.btn-teal:hover { color:#fff; transform:translateY(-2px); box-shadow:0 16px 34px rgba(28,167,156,.5); }
/* Keep button label above the shine sweep overlay so text stays readable on hover.
   isolation:isolate creates a new stacking context; the shine (::after with z-index:-1)
   sits BELOW the label (which is at z-index:auto = 0) but ABOVE the button background. */
.btn-accent, .btn-teal { isolation:isolate; position:relative; z-index:0; }
.btn > * { position:relative; z-index:2; }
.btn-ghost { background:rgba(255,255,255,.06); color:#eafbf7; border-color:rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.btn-ghost:hover { background:rgba(255,255,255,.14); color:#fff; }
.btn-outline { background:transparent; color:var(--teal-700); border-color:var(--line); }
.btn-outline:hover { border-color:var(--teal); color:var(--teal); background:var(--surface-2); }
.btn-lg { padding:1rem 2.05rem; font-size:1.05rem; }

/* Shine sweep on accent buttons — sits BEHIND the label (z:-1 inside the button's
   isolated stacking context) so text stays fully legible during the sweep. */
.btn-accent::after, .btn-teal::after { content:""; position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:-1;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%);
  background-size:220% 100%; background-position:200% 0; pointer-events:none; }
.btn-accent:hover::after, .btn-teal:hover::after { animation:shine 1s var(--ease); }
@keyframes shine { to { background-position:-60% 0; } }

/* ============ Header ============ */
.site-header { position:sticky; inset-block-start:0; z-index:100; min-height:var(--header-h); display:flex; align-items:center;
  background:var(--surface); border-block-end:1px solid var(--line); overflow:visible;
  transition:box-shadow .25s, border-color .25s, background .25s; }
.site-header.scrolled { box-shadow:var(--shadow-sm); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; width:100%; }
.brand { display:flex; align-items:center; gap:.7rem; }
.brand__logo { width:46px; height:46px; border-radius:13px; overflow:hidden; box-shadow:0 6px 16px rgba(28,167,156,.32);
  display:grid; place-items:center; background:var(--teal); flex:none; }
.brand__logo img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.brand:hover .brand__logo img { transform:rotate(-6deg) scale(1.08); }
.brand__name { font-weight:800; font-size:1.24rem; color:var(--ink); line-height:1.15; }
.brand__name small { display:block; font-size:.66rem; font-weight:500; color:var(--muted); letter-spacing:.02em; }

.nav { display:flex; align-items:center; gap:.05rem; flex:1 1 auto; justify-content:center; min-width:160px; }
.nav__list { display:flex; align-items:center; gap:.05rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:center; }
.nav__list ul { display:none; position:absolute; inset-block-start:100%; inset-inline-start:0; min-width:220px; margin:0; padding:8px; list-style:none;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-md); z-index:20; }
.nav__list > li { position:relative; margin:0; }
.nav__list > li:hover > ul, .nav__list > li:focus-within > ul { display:block; }
.nav a { color:var(--ink-2); font-weight:500; font-size:.92rem; padding:.5rem .62rem; border-radius:10px; position:relative; transition:color .2s; white-space:nowrap; }
.nav a::after { content:""; position:absolute; inset-inline:.62rem; inset-block-end:.34rem; height:2px; background:var(--orange);
  border-radius:2px; transform:scaleX(0); transform-origin:center; transition:transform .25s var(--ease); }
.nav a:hover { color:var(--teal-700); } .nav a:hover::after { transform:scaleX(1); }
.header-cta { display:flex; align-items:center; gap:.5rem; }
.header-phone { display:inline-flex; align-items:center; gap:.4rem; color:var(--ink-2); font-weight:700; font-size:.85rem; padding:.35rem .5rem; border-radius:10px; white-space:nowrap; }
.header-phone svg { width:17px; height:17px; color:var(--teal-700); }
.header-phone:hover { color:var(--teal-700); }
@media (max-width:1400px){ .header-phone { display:none; } }
.theme-toggle,.nav-toggle { width:44px; height:44px; border:1px solid var(--line); background:var(--surface); border-radius:11px; cursor:pointer;
  color:var(--ink); display:grid; place-items:center; transition:background .2s,border-color .2s; }
.theme-toggle:hover,.nav-toggle:hover { border-color:var(--teal); color:var(--teal); }
.theme-toggle svg,.nav-toggle svg { width:20px; height:20px; }
.nav-toggle { display:none; }

/* ============ Hero ============ */
.hero { position:relative; overflow:hidden; color:#eafbf7;
  min-height:calc(100svh - var(--header-h)); display:flex; align-items:center;
  padding:clamp(40px,6vw,84px) 0 clamp(72px,9vw,130px);
  background:radial-gradient(1100px 620px at 88% -12%, rgba(28,167,156,.55), transparent 60%),
             radial-gradient(760px 460px at 6% 6%, rgba(249,175,34,.20), transparent 55%),
             linear-gradient(165deg,var(--shell-950) 0%,var(--shell-900) 48%,var(--shell-800) 100%); }
.hero > .container { width:100%; }
.hero__net { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
.hero::after { content:""; position:absolute; inset-inline:0; inset-block-end:-1px; height:110px;
  background:linear-gradient(to bottom,transparent,var(--bg)); z-index:2; pointer-events:none; }
.hero .container { position:relative; z-index:3; }
.hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:3.2rem; align-items:center; }
.hero__badge { display:inline-flex; align-items:center; gap:.55rem; margin-block-end:1.4rem; padding:.42rem .5rem .42rem 1rem;
  border-radius:999px; font-size:.83rem; font-weight:600; color:#cdeee8; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); }
.hero__badge .dot { width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(249,175,34,.6); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(249,175,34,.55)} 70%{box-shadow:0 0 0 9px rgba(249,175,34,0)} 100%{box-shadow:0 0 0 0 rgba(249,175,34,0)} }
.hero h1 { color:#fff; font-size:clamp(2.05rem,4.6vw,3.5rem); line-height:1.24; margin-block-end:1.1rem; }
.hero h1 .grad { background:linear-gradient(100deg,#ffd27a,#7fe6d6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero h1 .word { display:inline-block; opacity:0; transform:translateY(26px); }
.hero__lead { font-size:clamp(1rem,1.5vw,1.16rem); color:#bfe0d9; max-width:47ch; margin-block-end:2rem; }
.hero__cta { display:flex; flex-wrap:wrap; gap:.85rem; margin-block-end:2.4rem; }
.hero__stats { display:flex; flex-wrap:wrap; gap:2rem; }
.hero__stat b { display:block; font-size:1.85rem; font-weight:800; color:#fff; }
.hero__stat span { font-size:.84rem; color:#8fb5ad; }

/* animate hero words in when body.loaded */
body.loaded .hero h1 .word { animation:wordUp .7s var(--ease) forwards; }
body.loaded .hero h1 .word:nth-child(1){animation-delay:.05s} body.loaded .hero h1 .word:nth-child(2){animation-delay:.13s}
body.loaded .hero h1 .word:nth-child(3){animation-delay:.21s} body.loaded .hero h1 .word:nth-child(4){animation-delay:.29s}
body.loaded .hero h1 .word:nth-child(5){animation-delay:.37s} body.loaded .hero h1 .word:nth-child(6){animation-delay:.45s}
body.loaded .hero h1 .word:nth-child(7){animation-delay:.53s} body.loaded .hero h1 .word:nth-child(8){animation-delay:.61s}
@keyframes wordUp { to { opacity:1; transform:none; } }

/* Hero dashboard mock */
.mock { background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(238,247,244,.98)); border-radius:22px; box-shadow:var(--shadow-lg);
  padding:18px; color:var(--ink); border:1px solid rgba(255,255,255,.6); position:relative;
  transform:perspective(1500px) rotateY(5deg) rotateX(3deg); animation:floaty 7s var(--ease) infinite; }
@keyframes floaty { 0%,100%{transform:perspective(1500px) rotateY(5deg) rotateX(3deg) translateY(0)} 50%{transform:perspective(1500px) rotateY(3deg) rotateX(2deg) translateY(-12px)} }
.mock__bar { display:flex; align-items:center; gap:.4rem; margin-block-end:14px; }
.mock__bar i { width:11px; height:11px; border-radius:50%; background:#d3e4df; }
.mock__bar i:nth-child(1){background:#ff6b6b} .mock__bar i:nth-child(2){background:#ffcf5c} .mock__bar i:nth-child(3){background:#4fd18b}
.mock__url { margin-inline-start:auto; font-size:.71rem; color:var(--muted); background:var(--surface-2); padding:.2rem .7rem; border-radius:8px; }
.mock__head { display:flex; justify-content:space-between; align-items:center; margin-block-end:12px; }
.mock__head h4 { margin:0; font-size:.98rem; }
.mock__head .live { font-size:.7rem; color:var(--teal-700); background:var(--teal-050); padding:.18rem .6rem .18rem .5rem; border-radius:999px; font-weight:700; display:inline-flex; align-items:center; gap:.35rem; }
.mock__head .live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 1.8s infinite; }
.mock__kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-block-end:14px; }
.mock__kpi { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.mock__kpi span { font-size:.67rem; color:var(--muted); }
.mock__kpi b { display:block; font-size:1.05rem; color:var(--ink); }
.mock__kpi.up b { color:var(--teal-700); }
.mock__chart { height:120px; display:flex; align-items:flex-end; gap:9px; padding:10px 4px 0; border-block-start:1px dashed var(--line); }
.mock__chart span { flex:1; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,var(--teal),var(--teal-700)); height:8%; transition:height 1.1s var(--ease); }
.mock__chart span:nth-child(3n){ background:linear-gradient(180deg,var(--orange),var(--orange-600)); }
.mock.in .mock__chart span { height:var(--h); }
.mock__float { position:absolute; background:var(--surface); border-radius:14px; box-shadow:var(--shadow-md); padding:.65rem .85rem;
  display:flex; align-items:center; gap:.55rem; font-size:.8rem; font-weight:700; color:var(--ink); }
.mock__float .fi { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; }
/* Floats sit on the OUTER edge of the dashboard so they never overlap the hero copy. */
.mock__float.a { inset-block-start:-18px; inset-inline-end:-20px; animation:floaty2 5.5s var(--ease) infinite; }
.mock__float.a .fi { background:var(--teal); }
.mock__float.b { inset-block-end:-16px; inset-inline-end:28px; animation:floaty2 6.5s var(--ease) infinite .5s; }
.mock__float.b .fi { background:var(--orange); color:#3a2400; }
@keyframes floaty2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ============ Marquee ============ */
.marquee { border-block:1px solid var(--line); background:var(--surface); overflow:hidden; padding:16px 0; }
.marquee__track { display:flex; gap:2.6rem; width:max-content; animation:marq 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
.marquee__item { display:inline-flex; align-items:center; gap:.55rem; color:var(--muted); font-weight:700; font-size:.95rem; white-space:nowrap; }
.marquee__item svg,.marquee__item .sq { width:16px; height:16px; color:var(--teal); }
.marquee__item .sq { background:var(--orange); border-radius:3px; }
@keyframes marq { to { transform:translateX(50%); } } /* RTL: content duplicated, shift +50% */

/* ============ Section shells ============ */
.section { padding:clamp(58px,8vw,100px) 0; position:relative; }
.section--muted { background:var(--surface-2); }
.section--dark { color:#eafbf7; background:radial-gradient(900px 500px at 12% 0%, rgba(28,167,156,.4), transparent 60%),
  linear-gradient(160deg,var(--shell-950),var(--shell-900)); }
.section-head { max-width:720px; margin:0 auto 3rem; text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.8rem; letter-spacing:.02em;
  color:var(--teal-700); background:var(--teal-050); padding:.4rem 1rem; border-radius:999px; margin-block-end:1rem; }
.section--dark .eyebrow { color:#a9e6dd; background:rgba(255,255,255,.08); }
.eyebrow .pixel i { width:5px; height:5px; }
.section-head h2 { font-size:clamp(1.65rem,3.3vw,2.5rem); }
.section-head p { font-size:1.05rem; color:var(--muted); }
.section--dark .section-head h2 { color:#fff; } .section--dark .section-head p { color:#bfe0d9; }

/* ============ Feature cards ============ */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:transform .28s var(--ease), box-shadow .28s, border-color .28s; }
.feature::before { content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:3px;
  background:var(--grad-teal); transform:scaleX(0); transform-origin:inline-start; transition:transform .35s var(--ease); }
.feature:hover { transform:translateY(-7px); box-shadow:var(--shadow-md); border-color:transparent; }
.feature:hover::before { transform:scaleX(1); }
.feature__ic { width:56px; height:56px; border-radius:15px; display:grid; place-items:center; margin-block-end:1.1rem;
  background:var(--teal-050); color:var(--teal-700); transition:transform .3s var(--ease); }
.feature:hover .feature__ic { transform:translateY(-3px) rotate(-4deg); }
.feature__ic svg { width:28px; height:28px; }
.feature h3 { font-size:1.16rem; margin-block-end:.5rem; }
.feature p { font-size:.95rem; margin:0; color:var(--muted); }

/* ============ Modules bento ============ */
.modules { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.module { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px 20px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.55rem; position:relative; overflow:hidden;
  transition:transform .24s var(--ease), box-shadow .24s, border-color .24s; }
.module::after { content:""; position:absolute; inset-block-start:-40%; inset-inline-end:-40%; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,rgba(28,167,156,.14),transparent 70%); opacity:0; transition:opacity .3s; }
.module:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--teal); }
.module:hover::after { opacity:1; }
.module__ic { width:56px; height:56px; border-radius:14px; background:var(--surface-2); display:grid; place-items:center; transition:transform .3s var(--ease); }
.module__ic img { width:34px; height:34px; }
.module:hover .module__ic { transform:scale(1.08) rotate(-3deg); }
.module h3 { font-size:1.02rem; margin:0; }
.module p { font-size:.85rem; margin:0; color:var(--muted); line-height:1.7; }
.module__sq { position:absolute; inset-block-start:16px; inset-inline-start:16px; width:7px; height:7px; border-radius:2px; background:var(--orange); opacity:.55; }

/* ============ Integration (orbital) ============ */
.split { display:grid; grid-template-columns:1.05fr .95fr; gap:3.2rem; align-items:center; }
.integration { position:relative; aspect-ratio:1/1; max-width:440px; margin-inline:auto; width:100%; }
.integration svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.orbit-ring { fill:none; stroke:rgba(28,167,156,.28); stroke-width:1.4; stroke-dasharray:5 7; }
.orbit-rot { transform-origin:center; animation:spin 60s linear infinite; }
.orbit-rot.rev { animation-duration:44s; animation-direction:reverse; }
@keyframes spin { to { transform:rotate(360deg); } }
.int-link { stroke:rgba(28,167,156,.35); stroke-width:1.6; }
.flow { fill:none; stroke:var(--orange); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:5 26;
  filter:drop-shadow(0 0 4px rgba(249,175,34,.7)); animation:flowin 1.8s linear infinite; }
.flow:nth-of-type(2){animation-delay:.3s} .flow:nth-of-type(3){animation-delay:.6s} .flow:nth-of-type(4){animation-delay:.9s}
.flow:nth-of-type(5){animation-delay:1.2s} .flow:nth-of-type(6){animation-delay:1.5s}
@keyframes flowin { to { stroke-dashoffset:-31; } }
.int-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:132px; height:132px;
  border-radius:26px; background:var(--surface); box-shadow:0 22px 50px rgba(4,33,30,.25); display:grid; place-items:center; text-align:center; padding:10px; z-index:3; }
.int-core .brand__logo { width:42px; height:42px; margin-inline:auto; margin-block-end:6px; }
.int-core b { color:var(--teal-700); font-size:1.02rem; display:block; }
.int-core span { font-size:.72rem; color:var(--muted); }
.int-node { position:absolute; width:60px; height:60px; transform:translate(-50%,-50%); border-radius:15px;
  background:var(--surface); box-shadow:var(--shadow-md); display:grid; place-items:center; z-index:2; }
.int-node img { width:34px; height:34px; }
.int-node::before { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(28,167,156,.4); animation:nodepulse 3s var(--ease) infinite; }
@keyframes nodepulse { 0%{box-shadow:0 0 0 0 rgba(28,167,156,.35)} 70%{box-shadow:0 0 0 12px rgba(28,167,156,0)} 100%{box-shadow:0 0 0 0 rgba(28,167,156,0)} }
.list-check { display:grid; gap:1rem; margin:1.6rem 0 2rem; }
.list-check li { display:flex; gap:.8rem; align-items:flex-start; }
.list-check .ck { flex:none; width:27px; height:27px; border-radius:8px; background:var(--teal-050); color:var(--teal-700); display:grid; place-items:center; }
.list-check .ck svg { width:16px; height:16px; }
.list-check b { display:block; color:var(--ink); }
.list-check .txt { font-size:.92rem; color:var(--muted); }

/* ============ Stats band (count-up) ============ */
.stats-band { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.stat-card { text-align:center; padding:1.5rem 1rem; border-radius:var(--radius); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.stat-card b { display:block; font-size:clamp(1.9rem,3.8vw,2.7rem); font-weight:800; color:#fff; line-height:1.1; }
.stat-card b .u { font-size:1.15rem; color:var(--orange); }
.stat-card span { color:#a9d3cb; font-size:.92rem; }

/* ============ Services (real icons) ============ */
.services { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.service { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow-sm);
  text-align:center; transition:transform .24s var(--ease), box-shadow .24s; }
.service:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.service__ic { width:78px; height:78px; margin:0 auto 1rem; border-radius:20px; background:var(--surface-2); display:grid; place-items:center; }
.service__ic img { width:46px; height:46px; }
.service h3 { font-size:1.08rem; } .service p { font-size:.9rem; color:var(--muted); margin:0; }

/* ============ Steps ============ */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.step { padding:26px 22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); position:relative; }
.step__num { width:46px; height:46px; border-radius:13px; background:var(--grad-teal); color:#fff; font-weight:800; display:grid; place-items:center; margin-block-end:.9rem; font-size:1.12rem; }
.step h3 { font-size:1.04rem; } .step p { font-size:.88rem; color:var(--muted); margin:0; }

/* ============ Testimonials ============ */
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.quote { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); }
.quote .stars { color:var(--orange); margin-block-end:.7rem; letter-spacing:2px; }
.quote p { color:var(--ink-2); font-size:.96rem; }
.quote__by { display:flex; align-items:center; gap:.7rem; margin-block-start:1rem; }
.quote__by .av { width:42px; height:42px; border-radius:50%; background:var(--grad-teal); color:#fff; display:grid; place-items:center; font-weight:700; }
.quote__by b { display:block; font-size:.92rem; } .quote__by span { font-size:.78rem; color:var(--muted-2); }

/* ============ FAQ ============ */
.faq { max-width:820px; margin-inline:auto; display:grid; gap:14px; }
.faq details { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:2px 20px; box-shadow:var(--shadow-sm); }
.faq summary { cursor:pointer; list-style:none; padding:17px 0; font-weight:700; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .chev { width:27px; height:27px; border-radius:8px; background:var(--surface-2); color:var(--teal-700); display:grid; place-items:center; transition:transform .25s var(--ease); flex:none; }
.faq details[open] summary .chev { transform:rotate(180deg); }
.faq details p { color:var(--muted); font-size:.94rem; padding-block-end:16px; margin:0; }
.faq details[open] p { animation:fadeIn .35s var(--ease); }
@keyframes fadeIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

/* ============ CTA ============ */
.cta-band { position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(42px,6vw,68px); text-align:center; color:#fff;
  background:radial-gradient(700px 380px at 80% -20%, rgba(249,175,34,.28), transparent 60%),
  linear-gradient(160deg,var(--shell-900),var(--teal-800)); box-shadow:var(--shadow-lg); }
.cta-band h2 { color:#fff; font-size:clamp(1.7rem,3.6vw,2.5rem); }
.cta-band p { color:#c9ece5; max-width:52ch; margin-inline:auto; margin-block-end:1.8rem; }
.cta-band .hero__cta { justify-content:center; margin-block-end:0; }

/* ============ Footer ============ */
.site-footer { background:var(--shell-950); color:var(--footer-fg, #a9c9c2); padding:64px 0 26px; }
.footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:2.4rem; margin-block-end:2.5rem; }
.site-footer .brand__name { color:var(--footer-fg, #fff); } .site-footer .brand__name small { color:var(--footer-fg, #7fa39b); opacity:.75; }
.footer__about { color:var(--footer-fg, #8fb3ab); font-size:.92rem; margin:1rem 0 1.2rem; max-width:34ch; }
.footer__social { display:flex; gap:.55rem; }
.footer__social a { width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.06); display:grid; place-items:center; color:#cfe4de; transition:background .2s,transform .2s; }
.footer__social a:hover { background:var(--teal); color:#fff; transform:translateY(-3px); }
.footer__social svg { width:20px; height:20px; }
.footer__col h4 { color:var(--footer-fg, #fff); font-size:1rem; margin-block-end:1rem; }
.footer__col a { display:block; color:var(--footer-fg, #9fc0b9); padding:.3rem 0; font-size:.92rem; }
.footer__col a:hover { color:var(--ink); filter:brightness(1.2); }
.footer__contact li { display:flex; gap:.6rem; align-items:flex-start; margin-block-end:.7rem; color:var(--footer-fg, #9fc0b9); font-size:.9rem; }
.footer__contact svg { width:18px; height:18px; color:var(--teal); flex:none; margin-block-start:4px; }
.footer__bottom { border-block-start:1px solid color-mix(in srgb, var(--footer-fg, #fff) 14%, transparent); padding-block-start:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:var(--footer-fg, #7fa39b); font-size:.84rem; }

/* ============ Generic pages ============ */
.page-hero { color:#fff; padding:96px 0 74px; text-align:center;
  background:radial-gradient(900px 480px at 80% -20%, rgba(28,167,156,.5), transparent 60%), linear-gradient(160deg,var(--shell-950),var(--shell-900)); }
.page-hero h1 { color:#fff; font-size:clamp(1.8rem,4vw,2.6rem); } .page-hero p { color:#bfe0d9; max-width:60ch; margin-inline:auto; }
.content-area { padding:60px 0; } .prose { max-width:760px; margin-inline:auto; }
.prose img { border-radius:var(--radius-sm); margin:1.4em 0; box-shadow:var(--shadow-sm); }

/* ============ Reveal ============ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ============ Responsive ============ */
@media (max-width:1024px) {
  .hero__grid,.split { grid-template-columns:1fr; }
  .hero__visual,.integration { max-width:520px; margin-inline:auto; }
  .features,.services,.quotes { grid-template-columns:repeat(2,1fr); }
  .modules { grid-template-columns:repeat(3,1fr); }
  .steps,.stats-band { grid-template-columns:repeat(2,1fr); }
  .footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  :root { --header-h:64px; }
  .nav { display:none; }
  .header-cta .btn-outline { display:none; }
  .nav-toggle { display:grid; }
  .nav.open { display:flex; position:absolute; inset-block-start:100%; inset-inline:0; flex-direction:column; align-items:stretch;
    background:var(--surface); padding:12px; gap:4px; border-block-end:1px solid var(--line); box-shadow:var(--shadow-md); }
  .nav.open .nav__list { flex-direction:column; align-items:stretch; }
  .nav.open .nav__list ul { position:static; display:block; box-shadow:none; border:0; padding-inline-start:12px; }
  /* Customizer preview iframe is often <680px — keep the assigned menu visible there. */
  .wp-customizer .nav { display:flex !important; flex-wrap:wrap; position:static; background:transparent; box-shadow:none; padding:0; }
  .features,.services,.quotes,.modules,.steps,.stats-band,.footer__grid { grid-template-columns:1fr; }
  .hero__stats { gap:1.3rem; } .mock__float { display:none; }
  .footer__bottom { flex-direction:column; text-align:center; }
}

/* ============ Thematic animated decor (finance motifs) ============ */
.decor { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.decor__i { position:absolute; color:var(--teal); opacity:.045; will-change:transform; }
.decor__i.orange { color:var(--orange); opacity:.055; }
.decor__i svg { width:100%; height:100%; display:block; }
.section > .container, .hero .container, .cta-band > * { position:relative; z-index:1; }
/* faint ambient marks kept to the top band and the (RTL) left edge so they
   never sit behind the reading text */
.decor .d1 { width:96px;  height:96px;  inset-block-start:6%;  inset-inline-start:4%;  animation:drift 12s var(--ease) infinite; }
.decor .d2 { width:60px;  height:60px;  inset-block-start:34%; inset-inline-start:2%;  animation:bob 8s var(--ease) infinite; }
.decor .d3 { width:70px;  height:70px;  inset-block-start:8%;  inset-inline-end:6%;    animation:swing 9s var(--ease) infinite; transform-origin:top center; }
.decor .d4 { width:54px;  height:54px;  inset-block-end:12%;   inset-inline-start:6%;   animation:coinFlip 7s linear infinite; }
.decor .d5 { width:46px;  height:46px;  inset-block-start:5%;  inset-inline-start:34%;  animation:drift 14s var(--ease) infinite reverse; }
.decor .d6 { width:64px;  height:64px;  inset-block-end:22%;   inset-inline-start:16%;  animation:bob 10s var(--ease) infinite .6s; }

@keyframes drift { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(10px,-16px) rotate(8deg)} }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes swing { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
@keyframes coinFlip { 0%{transform:rotateY(0)} 100%{transform:rotateY(360deg)} }
@keyframes wiggle { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }

/* idle loops + entrance for real icons */
.module.in .module__ic img { animation:bob 5s var(--ease) infinite; }
.modules .module:nth-child(3n) .module__ic img { animation-duration:6.2s; }
.modules .module:nth-child(3n+1) .module__ic img { animation-duration:5.6s; animation-delay:.4s; }
.service.in .service__ic img { animation:bob 5.5s var(--ease) infinite; }
.feature.in .feature__ic { animation:bob 6s var(--ease) infinite; }
.step.in .step__num { animation:swing 6s var(--ease) infinite; transform-origin:center; }
.eyebrow .pixel { animation:wiggle 3.5s var(--ease) infinite; }

/* entrance variety */
.reveal.rise { transform:translateY(34px) scale(.98); }
.reveal.in.rise { transform:none; }

/* ============ Lead form ============ */
.lead-form { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-md); display:grid; gap:14px; }
.lead-form .field { display:grid; gap:.35rem; }
.lead-form label { font-size:.86rem; font-weight:700; color:var(--ink-2); }
.lead-form input, .lead-form select, .lead-form textarea { font-family:inherit; font-size:.95rem; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; transition:border-color .2s, box-shadow .2s; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline:none; border-color:var(--teal); box-shadow:var(--ring); background:var(--surface); }
.lead-form textarea { resize:vertical; }
.form-note { font-size:.8rem; color:var(--muted); margin:.2rem 0 0; text-align:center; }
.form-note.ok { color:var(--teal-700); font-weight:700; }
.lead-form label i { color:var(--orange-600); font-style:normal; }
.lead-form .invalid { border-color:#e5484d !important; box-shadow:0 0 0 3px rgba(229,72,77,.14) !important; background:var(--surface); }
/* clickable phone / email links */
.clink { color:inherit; text-decoration:none; border-block-end:1px dashed color-mix(in srgb, currentColor 45%, transparent); transition:color .2s, border-color .2s; }
.clink:hover { color:var(--teal-700); border-block-end-color:var(--teal-700); }
.footer__contact .clink:hover { color:#fff; border-block-end-color:#fff; }

/* ============ Our location (maps) ============ */
.locmap { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch; margin-block-start:2.4rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm); }
.locmap__info { display:flex; flex-direction:column; justify-content:center; }
.locmap__info h3 { font-size:1.3rem; margin:.4rem 0 .5rem; }
.locmap__addr { color:var(--muted); font-size:.92rem; line-height:1.9; margin:0 0 1.1rem; }
.locmap__btns { display:flex; flex-wrap:wrap; gap:.6rem; }
.locmap__btns .btn { gap:.4rem; }
.locmap__btns .btn svg { width:16px; height:16px; }
.locmap__view { position:relative; overflow:hidden; min-height:240px; border-radius:var(--radius); display:block;
  background:linear-gradient(135deg, var(--surface-2), var(--teal-050)); border:1px solid var(--line); }
.locmap__grid { position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px; }
.locmap__road { position:absolute; background:color-mix(in srgb,var(--teal) 22%,transparent); border-radius:6px; }
.locmap__road.r1 { height:14px; inset-inline:0; top:38%; transform:rotate(-4deg); }
.locmap__road.r2 { width:16px; inset-block:0; left:58%; }
.locmap__road.r3 { height:10px; width:60%; bottom:22%; right:0; transform:rotate(6deg); background:color-mix(in srgb,var(--orange) 24%,transparent); }
.locmap__pin { position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); color:var(--orange-600); z-index:2; animation:segFloat 3.6s var(--ease) infinite; }
.locmap__pin svg { width:42px; height:42px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.18)); }
.locmap__pulse { position:absolute; left:50%; top:50%; width:16px; height:16px; transform:translate(-50%,-50%); border-radius:50%;
  background:color-mix(in srgb,var(--orange) 55%,transparent); z-index:1; animation:mapPulse 2.2s ease-out infinite; }
@keyframes mapPulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 45%,transparent); } 100%{ box-shadow:0 0 0 28px transparent; } }
.locmap__tag { position:absolute; left:50%; top:50%; transform:translate(-50%,16px); z-index:2; white-space:nowrap;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:.78rem; font-weight:800; color:var(--ink); padding:.25rem .7rem; border-radius:999px; }
.locmap__view:hover .locmap__tag { color:var(--teal-700); }

/* -- Live map (OpenStreetMap iframe + animated Diaco logo overlay) -- */
.locmap__view--live { min-height:340px; padding:0; background:var(--surface-2); }
.locmap__frame { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; filter:saturate(.9) contrast(.98); }
.locmap__overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:3; }
.locmap__logo { position:relative; z-index:4; width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); border-radius:50%; box-shadow:0 6px 18px rgba(30,158,142,.35), 0 2px 4px rgba(0,0,0,.15);
  animation:pinFloat 2.6s var(--ease) infinite; }
.locmap__logo img { width:38px; height:38px; object-fit:contain; display:block; border-radius:50%; }
.locmap__view--live .locmap__pulse { background:transparent; border:2px solid color-mix(in srgb, var(--teal) 55%, transparent); box-shadow:none; }
.locmap__pulse--inner { position:absolute; left:50%; top:50%; width:80px; height:80px; margin-left:-40px; margin-top:-40px; border-radius:50%; animation:mapRing 2.2s ease-out infinite; z-index:2; }
.locmap__pulse--outer { position:absolute; left:50%; top:50%; width:120px; height:120px; margin-left:-60px; margin-top:-60px; border-radius:50%; animation:mapRing 2.2s ease-out .6s infinite; z-index:2; }
.locmap__view--live .locmap__tag { top:auto; bottom:22px; transform:translate(-50%,0); z-index:4; pointer-events:auto; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.locmap__link { position:absolute; top:12px; left:12px; z-index:4; background:var(--surface); color:var(--teal-700); font-size:.78rem; font-weight:700;
  padding:.35rem .7rem; border-radius:999px; border:1px solid var(--line); text-decoration:none; box-shadow:var(--shadow-sm); }
.locmap__link:hover { background:var(--teal); color:#fff; border-color:var(--teal); }
@keyframes pinFloat { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-6px) scale(1.04); } }
@keyframes mapRing { 0% { transform:scale(.55); opacity:.9; } 100% { transform:scale(1.6); opacity:0; } }

@media (max-width:760px){ .locmap { grid-template-columns:1fr; } .locmap__view--live { min-height:280px; } }
@media (prefers-reduced-motion: reduce){ .locmap__pin, .locmap__pulse, .locmap__logo { animation:none; } }

/* ============ Article / news post layout ============ */
.container--narrow { max-width: 780px; }
.article-hero { padding-block: 3rem 3rem; }
.article-hero__grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; }
.article-hero__meta { color: rgba(255,255,255,.75); font-size: .92rem; display: inline-flex; gap: .5rem; align-items: center; margin-top: .9rem; }
.article-hero__meta svg { width: 16px; height: 16px; }
.article-hero__visual { display: flex; justify-content: center; align-items: center; }
/* Frame hugs the image tightly — no extra padding, no fixed aspect-ratio.
   Frame size = image size (dynamic). Rounded corners + feathered edges are
   painted on the image itself so they always follow the real shape. */
.article-hero__frame {
  position: relative; margin: 0; padding: 0; display: inline-block;
  background: none; border: 0; box-shadow: none;
  max-width: 100%; max-height: 360px; line-height: 0;
  animation: articleImgFloat 6s ease-in-out infinite;
}
.article-hero__frame img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 360px;   /* hard caps for hero balance */
  object-fit: contain; object-position: center;
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 60px -20px rgba(0,0,0,.35),
    0 8px 24px -12px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0  6px 10px -7px rgba(255,255,255,.35),
    inset 0 -6px 10px -7px rgba(255,255,255,.35),
    inset  6px 0 10px -7px rgba(255,255,255,.35),
    inset -6px 0 10px -7px rgba(255,255,255,.35);
  transition: transform .6s var(--ease);
}
.article-hero__frame:hover img { transform: scale(1.03); }
@keyframes articleImgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .article-hero__frame { animation: none; } }
@media (max-width: 900px) {
  .article-hero__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .article-hero__frame { max-height: 280px; }
  .article-hero__frame img { max-height: 280px; }
}

/* Body-content images (inside .prose) also get rounded corners + subtle edge fade */
.article-body .prose img {
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0  6px 8px -6px var(--surface),
    inset 0 -6px 8px -6px var(--surface),
    inset  6px 0 8px -6px var(--surface),
    inset -6px 0 8px -6px var(--surface),
    0 4px 14px -6px rgba(0,0,0,.10);
}
.article-body { padding-block: 1rem 2.4rem; }
.article-body .prose { font-size: 1.02rem; line-height: 2.1; color: var(--ink); }
.article-body .prose > * + * { margin-top: 1.1em; }
.article-body .prose h2 { font-size: 1.5rem; margin-top: 2.4rem; color: var(--teal-700); border-inline-start: 4px solid var(--teal); padding-inline-start: .8rem; }
.article-body .prose h3 { font-size: 1.2rem; margin-top: 1.8rem; color: var(--ink); }
.article-body .prose p.lead { font-size: 1.12rem; color: var(--ink); font-weight: 500; border-inline-start: 4px solid var(--orange); background: color-mix(in srgb, var(--orange) 6%, transparent); padding: 1rem 1.2rem; border-radius: 8px; }
.article-body .prose ul, .article-body .prose ol { padding-inline-start: 1.4rem; }
.article-body .prose li { margin-block: .5em; }
.article-body .prose blockquote { border-inline-start: 4px solid var(--teal); background: color-mix(in srgb, var(--teal) 6%, transparent); padding: 1rem 1.2rem; border-radius: 8px; color: var(--ink); font-style: normal; }
.article-body .prose a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; }
.article-body .prose a:hover { color: var(--orange-600); }
/* Buttons inside prose keep their own colors — never inherit prose link colors */
.article-body .prose a.btn { text-decoration: none; }
.article-body .prose a.btn-accent, .article-body .prose a.btn-accent:hover { color: #ffffff; }
.article-body .prose a.btn-teal,   .article-body .prose a.btn-teal:hover   { color: #ffffff; }
.article-body .prose a.btn-outline { color: var(--teal-700); }
.article-body .prose a.btn-outline:hover { color: var(--teal); }
.article-body .prose strong { color: var(--ink); font-weight: 700; }
.article-body .prose img { max-width: 100%; height: auto; border-radius: 12px; margin-block: 1.4rem; }
.article-body .prose .btn { text-decoration: none; }

/* Knowledge-base + News rich card (article layout with thumbnail) */
.kb-grid--rich, .news-grid--rich { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; align-items: stretch; }
.kb-card--article, .news-card--article {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.kb-card--article:hover, .news-card--article:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .kb-card--article, .news-card--article,
  .kb-card--article .kb-card__media img, .news-card--article .news-card__media img,
  .kb-card--article .kb-card__media::after, .news-card--article .news-card__media::after {
    transition: none !important; transform: none !important;
  }
}
.kb-card--article .kb-card__media, .news-card--article .news-card__media {
  display: block; overflow: hidden; aspect-ratio: 16/10; background: var(--surface);
  position: relative; margin: 14px 14px 0; border-radius: 14px;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.10);
}
.kb-card--article .kb-card__media img, .news-card--article .news-card__media img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  border-radius: 14px;
  transition: transform .7s var(--ease), filter .5s var(--ease);
  will-change: transform;
}
/* Soft feathered edges — tight to the image border, only a few px inward */
.kb-card--article .kb-card__media::after,
.news-card--article .news-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.4),      /* crisp 1px inner hairline */
    inset 0  6px 8px -6px var(--surface),      /* top edge fade  */
    inset 0 -6px 8px -6px var(--surface),      /* bottom edge fade */
    inset  6px 0 8px -6px var(--surface),      /* right edge fade (RTL) */
    inset -6px 0 8px -6px var(--surface);      /* left edge fade */
  transition: box-shadow .45s var(--ease);
}
/* Gentle hover: subtle lift + micro-tilt + soft zoom */
.kb-card--article:hover .kb-card__media img,
.news-card--article:hover .news-card__media img {
  transform: scale(1.045) translateY(-2px) rotate(.3deg);
  filter: saturate(1.08);
}
.kb-card--article:hover .kb-card__media::after,
.news-card--article:hover .news-card__media::after {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0  4px 6px -4px var(--surface),
    inset 0 -4px 6px -4px var(--surface),
    inset  4px 0 6px -4px var(--surface),
    inset -4px 0 6px -4px var(--surface);
}
.kb-card--article .kb-card__body, .news-card--article .news-card__body {
  padding: 20px 22px; display: flex; flex-direction: column; gap: .55rem; flex: 1;
}
.kb-card__meta, .news-card__top {
  display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .82rem;
}
.kb-card__meta .kb-ic, .news-card__ic {
  width: 30px; height: 30px; border-radius: 8px; background: var(--teal-050); color: var(--teal-700);
  display: grid; place-items: center; margin: 0;
}
.kb-card__meta .kb-ic svg, .news-card__ic svg { width: 16px; height: 16px; }
.kb-card__date, .news-card__date { font-weight: 600; }
.kb-card--article h3, .news-card--article h3 { margin: .35rem 0 .25rem; font-size: 1.08rem; line-height: 1.65; }
.kb-card--article h3 a, .news-card--article h3 a { color: var(--ink); text-decoration: none; }
.kb-card--article h3 a:hover, .news-card--article h3 a:hover { color: var(--teal-700); }
.kb-card--article p, .news-card--article p { color: var(--muted); font-size: .92rem; line-height: 1.9; flex: 1; margin: 0; }
.kb-card--article .kb-more, .news-card--article .kb-more { margin-top: .6rem; }

/* ============ About page blocks ============ */
.about-vision { display:flex; gap:1.1rem; align-items:flex-start; background:var(--grad-orange); color:#3a2400;
  border-radius:var(--radius-lg); padding:26px 28px; box-shadow:0 20px 46px -20px rgba(249,175,34,.55); }
.about-vision__ic { width:54px; height:54px; border-radius:15px; background:rgba(255,255,255,.35); display:grid; place-items:center; flex:none; color:#5a3a00; }
.about-vision__ic svg { width:27px; height:27px; }
.about-vision h3 { margin:0 0 .4rem; font-size:1.22rem; color:#3a2400; }
.about-vision p { margin:0; font-size:.92rem; line-height:1.95; color:#4a3200; }
.about-quote { text-align:center; font-size:clamp(1.2rem,2.4vw,1.7rem); font-weight:800; color:var(--ink); margin:1.8rem auto 0; max-width:44ch; line-height:1.7; }
.about-quote::after { content:""; display:block; width:70px; height:4px; border-radius:4px; margin:.7rem auto 0; background:var(--grad-orange); }
.about-values { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.65rem 1.8rem; }
.about-values li { display:flex; gap:.55rem; align-items:flex-start; font-size:.92rem; color:var(--ink-2); line-height:1.85; }
.about-values svg { width:18px; height:18px; color:var(--teal); flex:none; margin-block-start:5px; }
.about-why { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.about-card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px 22px 24px;
  box-shadow:var(--shadow-sm); text-align:center; transition:transform .22s var(--ease), box-shadow .22s; }
.about-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.about-card__num { position:absolute; inset-block-start:14px; inset-inline-end:18px; font-size:1.7rem; font-weight:800; color:color-mix(in srgb, var(--teal) 16%, transparent); }
.about-card__ic { width:62px; height:62px; border-radius:50%; margin:0 auto .9rem; display:grid; place-items:center; color:#fff;
  background:var(--grad-teal); box-shadow:0 12px 26px -14px var(--teal); animation:segFloat 4.8s var(--ease) infinite; }
.about-card:nth-child(even) .about-card__ic { background:var(--grad-orange); box-shadow:0 12px 26px -14px var(--orange); }
.about-card__ic svg { width:28px; height:28px; }
.about-card h3 { font-size:1.05rem; margin:0 0 .4rem; }
.about-card p { font-size:.86rem; color:var(--muted); line-height:1.85; margin:0; }
@media (max-width:900px){ .about-why { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .about-why, .about-values { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .about-card__ic { animation:none; } }

/* ============ News ============ */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.news-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:.5rem; transition:transform .22s var(--ease), box-shadow .22s; }
.news-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.news-card__top { display:flex; align-items:center; justify-content:space-between; margin-block-end:.3rem; }
.news-card__ic { width:46px; height:46px; border-radius:13px; background:var(--grad-teal); color:#fff; display:grid; place-items:center; animation:segFloat 5s var(--ease) infinite; }
.news-card:nth-child(even) .news-card__ic { background:var(--grad-orange); }
.news-card__ic svg { width:24px; height:24px; }
.news-card__date { font-size:.74rem; font-weight:800; color:var(--teal-700); background:var(--teal-050); padding:.25rem .7rem; border-radius:999px; }
.news-card h3 { font-size:1.05rem; margin:.2rem 0; line-height:1.6; }
.news-card p { font-size:.88rem; color:var(--muted); line-height:1.85; margin:0; }
.news-card .kb-more { margin-block-start:auto; padding-block-start:.6rem; }

/* ============ Catalog ============ */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.catcard { border-radius:var(--radius); padding:26px 22px; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .22s; }
.catcard:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.catcard.v1 { background:linear-gradient(150deg,#d64545,#a82a2a); }
.catcard.v2 { background:linear-gradient(150deg,#7c3aed,#5b21b6); }
.catcard.v3 { background:var(--grad-orange); color:#3a2400; }
.catcard.v4 { background:var(--grad-teal); }
.catcard__ic { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; animation:segFloat 4.6s var(--ease) infinite; }
.catcard.v3 .catcard__ic { background:rgba(255,255,255,.35); }
.catcard__ic svg { width:30px; height:30px; }
.catcard h3 { font-size:1.05rem; margin:.4rem 0 0; color:inherit; }
.catcard__sub { font-size:.8rem; opacity:.92; }
.catcard__dl { margin-block-start:.7rem; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.45); color:inherit; cursor:pointer; }
.catcard.v3 .catcard__dl { background:rgba(0,0,0,.12); border-color:rgba(0,0,0,.22); }

/* ============ Cooperation steps ============ */
.coop-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.coop-step { text-align:center; display:grid; gap:.3rem; justify-items:center; padding:8px; }
.coop-step__num { font-size:.8rem; font-weight:800; color:#fff; width:26px; height:26px; border-radius:50%; background:var(--grad-orange); display:grid; place-items:center; }
.coop-step__ic { width:58px; height:58px; border-radius:50%; background:var(--grad-teal); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 22px -12px var(--teal); animation:segFloat 4.8s var(--ease) infinite; }
.coop-step:nth-child(even) .coop-step__ic { background:var(--grad-orange); box-shadow:0 10px 22px -12px var(--orange); }
.coop-step__ic svg { width:26px; height:26px; }
.coop-step b { font-size:.95rem; margin-block-start:.3rem; }
.coop-step__d { font-size:.8rem; color:var(--muted); line-height:1.7; }
@media (max-width:1000px){ .news-grid { grid-template-columns:1fr 1fr; } .cat-grid { grid-template-columns:1fr 1fr; } .coop-steps { grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:600px){ .news-grid, .cat-grid, .coop-steps { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .news-card__ic, .catcard__ic, .coop-step__ic { animation:none; } }

/* ============ SPA routing (live preview only) ============ */
.route { display:none; }
.route.active { display:block; animation:routeIn .5s var(--ease); }
@keyframes routeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.nav a.active { color:var(--teal-700); }
.nav a.active::after { transform:scaleX(1); }

/* ============ Mega menu ============ */
.has-mega { position:relative; }
.mega-toggle { display:inline-flex; align-items:center; gap:.25rem; }
.mega-toggle .caret { width:16px; height:16px; transition:transform .25s var(--ease); }
.has-mega:hover .mega-toggle .caret, .has-mega.open .mega-toggle .caret { transform:rotate(180deg); }
/* Anchored to the toggle's start edge (RTL = right) so the panel opens toward
 * the LEFT and stays inside the viewport. */
.mega { position:absolute; inset-block-start:calc(100% + 14px); inset-inline-start:0; width:min(720px,calc(100vw - 40px)); background:var(--surface);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:18px; opacity:0; visibility:hidden;
  transform:translateY(10px) scale(.98); transform-origin:top; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index:120; }
.mega::before { content:""; position:absolute; inset-block-start:-14px; inset-inline:0; height:14px; }
.has-mega:hover .mega, .has-mega.open .mega, .mega:hover { opacity:1; visibility:visible; transform:none; }
.mega--sm { width:min(400px,calc(100vw - 40px)); }
.mega--wide { width:min(1000px,calc(100vw - 32px)); padding:16px 18px; }
.mega--w3 { width:min(680px,calc(100vw - 32px)); }
.mega__grid { display:grid; gap:10px 16px; align-items:start; }
.mega__grid--4 { grid-template-columns:repeat(4,1fr); }
.mega__grid--3 { grid-template-columns:repeat(3,1fr); }
.mega__ic--code { font-weight:800; font-size:.7rem; color:var(--teal-700); letter-spacing:.02em; }

/* Tabbed mega (rail on the right in RTL, switching panels on the left) */
.mega--tabs { display:grid; grid-template-columns:220px 1fr; padding:0; overflow:hidden; }
.mega-tabs { background:var(--surface-2); border-inline-start:1px solid var(--line); padding:14px; display:flex; flex-direction:column; gap:5px; }
.mega-tab { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.62rem .8rem; border-radius:11px; background:transparent;
  border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:.86rem; color:var(--ink-2); text-align:start; transition:background .18s, color .18s, box-shadow .18s; }
.mega-tab svg { width:16px; height:16px; opacity:.5; flex:none; }
.mega-tab:hover, .mega-tab.active { background:var(--surface); color:var(--teal-700); box-shadow:var(--shadow-sm); }
.mega-tab.active svg, .mega-tab:hover svg { opacity:1; color:var(--teal); }
.mega-tab--all { margin-block-start:auto; color:var(--teal-700); background:var(--teal-050); }
.mega-tab--all:hover { background:var(--teal); color:#fff; } .mega-tab--all:hover svg { color:#fff; }
.mega-panels { padding:16px 18px; min-height:250px; }
.mega-panel { display:none; }
.mega-panel.active { display:block; animation:fadeIn .25s var(--ease); }
.mega-panel__head { margin-block-end:12px; padding-block-end:10px; border-block-end:1px solid var(--line); }
.mega-panel__head b { display:block; color:var(--ink); font-size:1.02rem; }
.mega-panel__head span { font-size:.82rem; color:var(--muted); }
.mega__grid--2 { grid-template-columns:1fr 1fr; }
.mega__col h5 { margin:0 0 .5rem; font-size:.72rem; color:var(--muted); font-weight:700; letter-spacing:.02em; }
.mega__item { display:flex; align-items:center; gap:.5rem; padding:.36rem .45rem; border-radius:9px; color:var(--ink-2); transition:background .18s, transform .18s; }
.mega__item:hover { background:var(--surface-2); color:var(--teal-700); transform:translateX(-3px); }
.mega__ic { width:26px; height:26px; border-radius:7px; background:var(--surface-2); display:grid; place-items:center; flex:none; }
.mega__ic img { width:18px; height:18px; }
.mega__ic svg { width:15px; height:15px; color:var(--teal-700); }
.mega__t { font-size:.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mega__item--all { color:var(--teal-700); font-weight:700; }
.mega__foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-block-start:12px; padding-block-start:12px; border-block-start:1px solid var(--line); }
.mega__foot span { font-size:.82rem; color:var(--muted); } .mega__foot b { color:var(--ink); }
.btn-sm { padding:.5rem 1.1rem; font-size:.85rem; }
.mega__list { display:grid; gap:4px; }
/* Wide products mega: pin to the viewport's right edge and cap to its width so
 * it never overflows on small laptops. */
@media (min-width:901px) {
  .mega--wide {
    position:fixed; inset-block-start:calc(var(--header-h) - 4px);
    inset-inline-start:auto; inset-inline-end:auto; right:clamp(10px,2.5vw,40px); left:auto;
    width:min(880px, calc(100vw - 20px));
  }
  .mega--wide::before { inset-block-start:-10px; }
}
.mega--sm .mega__item { align-items:flex-start; }
.mega--sm .mega__ic { width:38px; height:38px; }
.mega--sm .mega__ic img { width:26px; height:26px; }
.mega--sm small { display:block; font-size:.74rem; color:var(--muted); font-weight:400; margin-block-start:2px; }
.mega__promo { background:linear-gradient(160deg,var(--shell-900),var(--teal-800)); border-radius:14px; padding:16px; color:#eafbf7; display:flex; flex-direction:column; gap:.4rem; }
.mega__promo-badge { font-size:.7rem; background:rgba(255,255,255,.14); align-self:flex-start; padding:.2rem .6rem; border-radius:999px; }
.mega__promo b { color:#fff; font-size:1rem; } .mega__promo p { color:#bfe0d9; font-size:.8rem; margin:.2rem 0 .6rem; }
.mega__promo .btn { align-self:flex-start; }

/* ============ Clients logo marquee ============ */
.clients { display:grid; gap:18px; }
.clients-row { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.clients-track { display:flex; gap:18px; width:max-content; animation:marqC 40s linear infinite; }
.clients-row.rev .clients-track { animation-direction:reverse; animation-duration:48s; }
.clients:hover .clients-track { animation-play-state:paused; }
@keyframes marqC { to { transform:translateX(50%); } }
.client { flex:none; width:150px; height:78px; border-radius:16px; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); display:grid; place-items:center; filter:grayscale(1); opacity:.7; transition:filter .3s, opacity .3s, transform .3s, box-shadow .3s; }
.client:hover { filter:none; opacity:1; transform:translateY(-4px); box-shadow:var(--shadow-md); }
.client__logo { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.client.v1 .client__logo{background:linear-gradient(135deg,#1ca79c,#0f8f80)} .client.v2 .client__logo{background:linear-gradient(135deg,#f9af22,#ed8f12)}
.client.v3 .client__logo{background:linear-gradient(135deg,#0f6e63,#0b544b)} .client.v4 .client__logo{background:linear-gradient(135deg,#2fb6a5,#178c7e)}
.client.v5 .client__logo{background:linear-gradient(135deg,#f5b45a,#e0942a)} .client.v6 .client__logo{background:linear-gradient(135deg,#0d9488,#0f766e)}
/* named clients: real customers shown as brand cards (icon badge + wordmark) */
.clients--named .client { width:auto; min-width:250px; height:84px; gap:.8rem; padding:.7rem 1.35rem;
  display:flex; align-items:center; justify-content:flex-start; filter:none; opacity:1; }
.clients--named .client__badge { width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--teal),var(--teal-700)); box-shadow:0 6px 16px -8px var(--teal); }
.clients--named .client__badge svg { width:25px; height:25px; }
.clients--named .client__name { display:flex; flex-direction:column; line-height:1.4; text-align:start; }
.clients--named .client__name b { font-size:1.02rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.clients--named .client__name span { font-size:.78rem; color:var(--muted); }
.clients--named .client .client__badge{ background:var(--grad-teal); box-shadow:0 6px 16px -8px var(--teal); }

/* ============ Plugins ============ */
.plugins { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.plugin { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm);
  display:flex; gap:.9rem; align-items:flex-start; transition:transform .22s var(--ease), box-shadow .22s, border-color .22s; }
.plugin:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--teal-300); }
.plugin__ic { width:50px; height:50px; border-radius:13px; background:var(--teal-050); color:var(--teal-700); display:grid; place-items:center; flex:none; }
.plugin__ic svg { width:26px; height:26px; }
.plugin h3 { font-size:1.05rem; margin:0 0 .3rem; } .plugin p { font-size:.88rem; color:var(--muted); margin:0; }
.plugin__body { min-width:0; }
/* rich plugins carry the full official feature list → give them the whole row */
.plugin--rich { grid-column:1 / -1; }
.plugin--rich .plugin__body { flex:1; }
.plugin__list { list-style:none; margin:.9rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem .9rem; }
.plugin__list li { display:flex; gap:.5rem; align-items:flex-start; font-size:.85rem; color:var(--ink-2); line-height:1.6; }
.plugin__list svg { width:16px; height:16px; color:var(--teal); flex:none; margin-block-start:4px; }
@media (max-width:760px){ .plugin__list { grid-template-columns:1fr; } }
.pkg__desc { font-size:.83rem; color:var(--ink-2); line-height:1.7; margin:0 0 .8rem; }

/* ============ Versions / editions ============ */
.versions { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.version { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:.5rem; overflow:hidden; transition:transform .22s var(--ease), box-shadow .22s; scroll-margin-top:100px; }
.version::before { content:attr(data-code); position:absolute; inset-block-start:-8px; inset-inline-start:-6px; font-size:3.4rem; font-weight:800; color:var(--surface-3); z-index:0; letter-spacing:-.04em; }
.version:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.version > * { position:relative; z-index:1; }
.version__badge { align-self:flex-start; font-size:.72rem; font-weight:800; color:var(--teal-700); background:var(--teal-050); padding:.24rem .7rem; border-radius:999px; }
.version h3 { font-size:1.3rem; margin:0; }
.version__tag { font-size:.9rem; color:var(--muted); margin:.1rem 0 .5rem; }
.version__list { display:grid; gap:.45rem; margin:0 0 1.1rem; }
.version__list li { display:flex; gap:.5rem; align-items:flex-start; font-size:.84rem; color:var(--ink-2); }
.version__list svg { width:15px; height:15px; color:var(--teal); flex:none; margin-block-start:3px; }
.version .btn { margin-block-start:auto; justify-content:center; }

/* package industry icon */
.pkg__ic { width:56px; height:56px; border-radius:15px; background:var(--teal-050); color:var(--teal-700); display:grid; place-items:center; margin-block-end:.4rem; }
.pkg__ic svg { width:28px; height:28px; }
.pkg__ic .module__line svg { width:28px; height:28px; }

/* mega line icons (plugins) */
.mega__ic .plugin__line svg, .mega__ic svg { color:var(--teal-700); }

@media (max-width:1024px){ .plugins { grid-template-columns:repeat(2,1fr); } .versions { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .plugins, .versions { grid-template-columns:1fr; } .client { width:130px; height:70px; } }

/* ============ Segmented tabs (packages & versions) ============ */
.segtabs { display:grid; grid-template-columns:minmax(230px,300px) 1fr; gap:26px; align-items:start; }
.segtabs__rail { display:flex; flex-direction:column; gap:12px; background:none; padding:0; border-radius:0;
  grid-column:1; grid-row:1; align-self:stretch; }
.segtab { position:relative; display:flex; align-items:center; gap:.8rem; text-align:start; width:100%; overflow:hidden;
  padding:15px 17px; border-radius:18px; border:1px solid var(--line); background:var(--surface); color:inherit; cursor:pointer;
  box-shadow:var(--shadow-sm); font-family:inherit; transition:transform .22s var(--ease), border-color .22s, box-shadow .22s, background .22s; }
.segtab::before { content:""; position:absolute; inset-block:10px; inset-inline-start:0; width:4px; border-radius:0 4px 4px 0;
  background:var(--grad-teal); transform:scaleY(0); transform-origin:center; transition:transform .25s var(--ease); }
.segtab:hover { transform:translateX(-5px); border-color:var(--teal-300); box-shadow:var(--shadow-md); }
.segtab.active { border-color:transparent; background:linear-gradient(120deg, var(--teal-050), var(--surface) 70%); box-shadow:0 18px 36px -18px var(--teal); }
.segtab.active::before { transform:scaleY(1); }
.segtab__ic { width:48px; height:48px; border-radius:14px; background:linear-gradient(145deg, var(--teal-050), var(--surface)); color:var(--teal-700);
  display:grid; place-items:center; flex:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--teal) 14%, transparent);
  transition:background .22s, color .22s, transform .22s, box-shadow .22s; }
.segtab:hover .segtab__ic { transform:scale(1.06); }
.segtab.active .segtab__ic { background:var(--grad-teal); color:#fff; box-shadow:0 8px 18px -8px var(--teal); animation:segGlow 2.6s ease-in-out infinite; }
.segtab__ic svg, .segtab__ic .module__line svg { width:24px; height:24px; }
.segtab__txt { display:flex; flex-direction:column; line-height:1.45; min-width:0; }
.segtab__txt b { font-size:1.02rem; color:var(--ink); font-weight:800; }
.segtab.active .segtab__txt b { color:var(--teal-800); }
.segtab__txt span { font-size:.77rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.segtab__flag { position:absolute; inset-block-start:-9px; inset-inline-start:14px; background:var(--grad-orange); color:#3a2400;
  font-size:.66rem; font-weight:800; padding:.2rem .6rem; border-radius:999px; box-shadow:var(--shadow-sm); }
.segtab--hot { border-color:#f6d69a; }
.segtabs .tabs__panel { grid-column:2; grid-row:1; }
.segtabs__group { display:flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:800; color:var(--muted); padding:.5rem .2rem .15rem; margin-block-start:.7rem; }
.segtabs__group:first-child { margin-block-start:0; }
.segtabs__group .cat-dot { width:9px; height:9px; }
@media (min-width:821px){ .segtabs:not(.segtabs--top) .segtabs__rail { position:sticky; inset-block-start:88px; align-self:start; } }

/* Top-tab variant (few items): centered pill row above a full-width panel */
.segtabs--top { display:block; }
.segtabs--top .segtabs__rail { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px; margin-block-end:26px; position:static; }
.segtabs--top .segtab { width:auto; flex:0 1 auto; padding:11px 18px 11px 13px; border-radius:999px; }
.segtabs--top .segtab::before { display:none; }
.segtabs--top .segtab:hover { transform:translateY(-3px); }
.segtabs--top .segtab__ic { width:38px; height:38px; border-radius:11px; }
.segtabs--top .segtab__ic svg, .segtabs--top .segtab__ic .module__line svg { width:20px; height:20px; }
.segtabs--top .segtab__txt { flex-direction:row; align-items:center; gap:.4rem; }
.segtabs--top .segtab__txt span { display:none; }
.segtabs--top .segtab__txt b { font-size:.98rem; }
.segtabs--top .tabs__panel { grid-column:auto; grid-row:auto; }
.segtabs--top .seg-panel { max-width:none; }
.segtabs--top .seg-panel .pkg__list { grid-template-columns:1fr 1fr 1fr; }
@media (max-width:900px){ .segtabs--top .seg-panel .pkg__list { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .segtabs--top .seg-panel .pkg__list { grid-template-columns:1fr; } }
.seg-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); }
.seg-panel__head { display:flex; align-items:center; gap:1rem; margin-block-end:1rem; }
.seg-panel__ic { width:60px; height:60px; border-radius:16px; background:var(--grad-teal); color:#fff; display:grid; place-items:center; flex:none;
  animation:segFloat 4.6s var(--ease) infinite; }
.seg-panel__ic svg, .seg-panel__ic .module__line svg { width:30px; height:30px; }
.seg-panel h3 { font-size:1.35rem; margin:.1rem 0; }
.seg-panel .pkg__list { grid-template-columns:1fr 1fr; }
.segtab__ic.seg-code { font-weight:800; font-size:.72rem; letter-spacing:.03em; }
.seg-panel__ic.seg-code { font-weight:800; font-size:.98rem; letter-spacing:.03em; }
.seg-sub { font-size:.82rem; font-weight:800; color:var(--teal-700); margin:1.1rem 0 .5rem; display:flex; align-items:center; gap:.45rem; }
.seg-sub::before { content:""; width:14px; height:14px; border-radius:5px; background:var(--grad-orange); flex:none; }
.pkg__aud { font-size:.82rem; color:var(--teal-700); font-weight:700; }
.pkg__tag { font-size:.9rem; color:var(--ink-2); font-weight:600; margin:.2rem 0 .2rem; }
.pkg__desc { font-size:.85rem; color:var(--muted); line-height:1.8; margin:.2rem 0 .4rem; }
.pkg__list { list-style:none; display:grid; gap:.55rem 1.4rem; margin:.2rem 0 1.2rem; padding:0; }
.pkg__list li { display:flex; gap:.5rem; align-items:flex-start; font-size:.85rem; color:var(--ink-2); line-height:1.7; }
.pkg__list svg { width:16px; height:16px; color:var(--teal); flex:none; margin-block-start:4px; }
.seg-panel .btn { justify-content:center; }
@media (max-width:820px){
  .segtabs { grid-template-columns:1fr; }
  .segtabs__rail { flex-direction:row; overflow-x:auto; grid-row:1; padding-block-end:6px; scrollbar-width:thin; }
  .segtab { min-width:210px; }
  .segtabs .tabs__panel { grid-column:1; grid-row:2; }
  .seg-panel .pkg__list { grid-template-columns:1fr; }
}

/* ============ Looping motion (subtle, everywhere) ============ */
@keyframes segFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes segGlow  { 0%,100%{ box-shadow:0 0 0 0 rgba(28,167,156,0); } 50%{ box-shadow:0 0 0 7px rgba(28,167,156,.14); } }
@keyframes segBob   { 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-4px) rotate(-3deg); } }
@keyframes segPulse { 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.12); opacity:1; } }
.mdetail__ic   { animation:segFloat 4.8s var(--ease) infinite; }
.plugin__ic    { animation:segFloat 5.4s var(--ease) infinite; }
.service__ic   { animation:segFloat 4.2s var(--ease) infinite; }
.pkg__ic       { animation:segFloat 5s var(--ease) infinite; }
.client__badge { animation:segBob 4.4s ease-in-out infinite; }
.cat-dot, .cta-band, .eyebrow::before { will-change:transform; }
.eyebrow::before { animation:segPulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .mdetail__ic, .plugin__ic, .service__ic, .pkg__ic, .client__badge,
  .segtab.active .segtab__ic, .seg-panel__ic, .eyebrow::before { animation:none; }
}


.ver-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-block-start:2.4rem; padding:22px; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid var(--line); }
.ver-item { display:flex; gap:.8rem; align-items:flex-start; }
.ver-ic { width:44px; height:44px; border-radius:12px; background:var(--surface); box-shadow:var(--shadow-sm); color:var(--teal-700); display:grid; place-items:center; flex:none; }
.ver-ic svg { width:22px; height:22px; }
.ver-item b { display:block; color:var(--ink); } .ver-item span { font-size:.86rem; color:var(--muted); }

/* ============ Category blocks (products overview) ============ */
.cat-block { margin-block-start:2.4rem; }
.cat-title { display:flex; align-items:center; gap:.6rem; font-size:1.15rem; margin-block-end:1rem; }
.cat-dot { width:12px; height:12px; border-radius:4px; background:var(--grad-orange); box-shadow:0 0 0 4px var(--orange-050); }
.module { color:inherit; text-decoration:none; }
.module__more { margin-block-start:auto; display:inline-flex; align-items:center; gap:.3rem; font-size:.82rem; font-weight:700; color:var(--teal-700); opacity:0; transform:translateX(6px); transition:opacity .2s, transform .2s; }
.module__more svg { width:15px; height:15px; }
.module:hover .module__more { opacity:1; transform:none; }

/* ============ Module detail blocks ============ */
.detail { display:grid; grid-template-columns:.85fr 1.15fr; gap:2.4rem; align-items:center; padding:26px 0; scroll-margin-top:100px; }
.detail + .detail { border-block-start:1px solid var(--line); }
.detail--rev .detail__media { order:2; }
.detail__media { position:relative; display:grid; place-items:center; min-height:210px; border-radius:var(--radius-lg);
  background:radial-gradient(420px 220px at 70% 10%, rgba(28,167,156,.16), transparent 60%), var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.detail__badge { position:absolute; inset-block-start:14px; inset-inline-start:14px; font-size:.72rem; font-weight:700; color:var(--teal-700); background:var(--surface); border:1px solid var(--line); padding:.24rem .7rem; border-radius:999px; }
.detail__ic { width:118px; height:118px; border-radius:26px; background:var(--surface); box-shadow:var(--shadow-md); display:grid; place-items:center; animation:floaty2 6s var(--ease) infinite; }
.detail__ic img { width:66px; height:66px; }
.detail__ic .module__line svg { width:58px; height:58px; color:var(--teal-700); }
.detail__body h3 { font-size:1.4rem; }
.detail__body > p { color:var(--muted); }
.detail__body .list-check { margin:1.1rem 0 1.4rem; grid-template-columns:1fr 1fr; }
@media (max-width:720px){ .detail__body .list-check { grid-template-columns:1fr; } }

/* module line-icon fallback tile */
.module__line { display:grid; place-items:center; }
.module__ic .module__line svg { width:30px; height:30px; color:var(--teal-700); }

/* ============ Services detail list ============ */
.svc-list { display:grid; gap:.5rem; margin:1rem 0 0; text-align:start; }
.svc-list li { display:flex; gap:.5rem; align-items:flex-start; font-size:.85rem; color:var(--ink-2); }
.svc-list svg { width:16px; height:16px; color:var(--teal); flex:none; margin-block-start:3px; }
.service { text-align:center; }
.service .svc-list { text-align:start; }

/* ============ Knowledge base ============ */
.kb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.kb-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm);
  transition:transform .24s var(--ease), box-shadow .24s; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.kb-card::after { content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:3px; background:var(--grad-orange); transform:scaleX(0); transform-origin:inline-start; transition:transform .3s var(--ease); }
.kb-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); } .kb-card:hover::after { transform:scaleX(1); }
.kb-ic { width:48px; height:48px; border-radius:13px; background:var(--teal-050); color:var(--teal-700); display:grid; place-items:center; margin-block-end:1rem; }
.kb-ic svg { width:24px; height:24px; }
.kb-card h3 { font-size:1.08rem; } .kb-card p { font-size:.9rem; color:var(--muted); }
.kb-more { display:inline-flex; align-items:center; gap:.3rem; font-size:.82rem; font-weight:700; color:var(--teal-700);
  text-decoration:none; margin-block-start:auto; padding-block-start:1rem; align-self:flex-start; transition:gap .2s, color .2s; }
.kb-more:hover { gap:.55rem; color:var(--teal-800); }
.kb-more svg { width:15px; height:15px; }
/* catalog download pinned to bottom so all cards align */
.catcard { justify-content:flex-start; }
.catcard__dl { margin-block-start:auto; text-decoration:none; }
/* dropdown items must not inherit the nav underline */
.nav .mega a::after, .mega__item::after { content:none !important; }
/* popular flag: white text, and not clipped in the top-tab pill layout */
.segtab__flag { color:#fff; }
.segtabs--top .segtab { overflow:visible; }

/* ============ مشتریان ما — per-company detail panels ============ */
.cust .segtab__txt b { white-space:nowrap; }
.cust-panel { position:relative; overflow:hidden; }
.cust-panel__head { display:flex; align-items:center; gap:1.1rem; margin-block-end:1.1rem;
  padding-block-end:1.1rem; border-block-end:1px solid var(--line); }
.cust-panel__logo { width:66px; height:66px; border-radius:18px; flex:none; display:grid; place-items:center;
  background:var(--grad-teal); color:#fff; box-shadow:0 10px 26px -12px rgba(28,167,156,.6); animation:segBob 5.5s ease-in-out infinite; }
.cust-panel__logo svg { width:34px; height:34px; }
.cust-panel__ind { display:inline-block; font-size:.74rem; font-weight:800; color:var(--teal-700);
  background:color-mix(in srgb, var(--teal) 12%, transparent); padding:.15rem .6rem; border-radius:999px; }
.cust-panel__head h3 { font-size:1.4rem; margin:.32rem 0 .12rem; }
.cust-panel__tag { margin:0; color:var(--muted); font-size:.92rem; }
.cust-badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-block-end:1.15rem; }
.cust-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:700; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line); padding:.34rem .7rem; border-radius:999px; }
.cust-badge svg { width:14px; height:14px; color:var(--teal); flex:none; }
.cust-about p { margin:0 0 .7rem; color:var(--ink-2); line-height:2.05; font-size:.96rem; }
.cust-about p:last-child { margin-block-end:0; }
.cust-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-block-start:1.3rem; }
.cust-grid:has(.cust-box:only-child) { grid-template-columns:1fr; }
.cust-box { display:flex; gap:.85rem; padding:1.1rem 1.15rem; border-radius:16px; border:1px solid var(--line);
  background:var(--surface-2); }
.cust-box__ic { width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center; color:#fff; }
.cust-box__ic svg { width:22px; height:22px; }
.cust-box--product .cust-box__ic { background:var(--grad-orange); animation:segGlow 4.5s ease-in-out infinite; }
.cust-box--mods .cust-box__ic { background:var(--grad-teal); animation:segPulse 4.5s ease-in-out infinite; }
.cust-box b { display:block; font-size:.72rem; font-weight:800; letter-spacing:.02em; color:var(--muted); text-transform:none; }
.cust-box h4 { margin:.15rem 0 .3rem; font-size:1.02rem; }
.cust-box p { margin:0; font-size:.86rem; color:var(--ink-2); line-height:1.85; }
.cust-chips { list-style:none; margin:.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.cust-chips li { font-size:.78rem; font-weight:700; color:var(--teal-800);
  background:color-mix(in srgb, var(--teal) 10%, transparent); border:1px solid color-mix(in srgb, var(--teal) 22%, transparent);
  padding:.28rem .6rem; border-radius:8px; }
.cust-quote { position:relative; margin:1.3rem 0 0; padding:1.4rem 1.5rem 1.25rem; border-radius:18px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--teal) 9%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb, var(--teal) 20%, var(--line)); }
.cust-quote__mark { position:absolute; inset-block-start:-6px; inset-inline-start:16px; font-size:4rem; line-height:1;
  color:color-mix(in srgb, var(--teal) 30%, transparent); font-family:Georgia,serif; }
.cust-quote blockquote { margin:.3rem 0 .8rem; font-size:.98rem; line-height:2.05; color:var(--ink); }
.cust-quote figcaption b { color:var(--teal-800); font-size:.95rem; }
.cust-quote figcaption span { color:var(--muted); font-size:.83rem; margin-inline-start:.5rem; }
@media (max-width:760px){
  .cust-grid { grid-template-columns:1fr; }
  .cust-panel__head { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce){
  .cust-panel__logo, .cust-box--product .cust-box__ic, .cust-box--mods .cust-box__ic { animation:none; }
}

/* ============ Tabbed module detail ============ */
.mdetail { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); margin-block-end:20px; scroll-margin-top:100px; }
.mdetail__head { display:flex; align-items:center; gap:1rem; margin-block-end:1.1rem; padding-block-end:1.1rem; border-block-end:1px solid var(--line); }
.mdetail__ic { width:64px; height:64px; border-radius:17px; background:var(--surface-2); display:grid; place-items:center; flex:none; }
.mdetail__ic img { width:38px; height:38px; }
.mdetail__ic .module__line svg { width:34px; height:34px; color:var(--teal-700); }
.mdetail__intro { flex:1; min-width:0; }
.mdetail__intro .detail__badge { position:static; }
.mdetail__intro h3 { margin:.35rem 0 .2rem; font-size:1.25rem; }
.mdetail__intro p { margin:0; font-size:.9rem; color:var(--muted); }
.mdetail__cta { flex:none; }
.tabs__nav { display:inline-flex; gap:.3rem; margin-block-end:1.1rem; flex-wrap:wrap; background:var(--surface-2); padding:5px; border-radius:12px; }
.tabs__tab { border:0; background:transparent; font-family:inherit; font-weight:700; font-size:.9rem; color:var(--ink-2); padding:.5rem 1.15rem; border-radius:9px; cursor:pointer; transition:background .2s, color .2s, box-shadow .2s; }
.tabs__tab:hover { color:var(--teal-700); }
.tabs__tab.active { background:var(--surface); color:var(--teal-700); box-shadow:var(--shadow-sm); }
.tabs__panel { display:none; }
.tabs__panel.active { display:block; animation:fadeIn .28s var(--ease); }
.feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.6rem; margin:0; }
.feat-grid li { display:flex; gap:.5rem; align-items:flex-start; font-size:.9rem; color:var(--ink-2); }
.feat-grid svg { width:16px; height:16px; color:var(--teal); flex:none; margin-block-start:4px; }
.tabs__empty { color:var(--muted); font-size:.9rem; margin:0; }
@media (max-width:760px){ .feat-grid { grid-template-columns:1fr; } .mdetail__head { flex-wrap:wrap; } .mdetail__cta { width:100%; justify-content:center; } }

/* ============ Rich page heroes ============ */
.page-hero { position:relative; overflow:hidden; color:#eafbf7; padding:clamp(54px,7vw,86px) 0 clamp(60px,8vw,96px); text-align:start;
  background:radial-gradient(1000px 520px at 85% -20%, rgba(28,167,156,.5), transparent 60%),
             radial-gradient(700px 420px at 6% 8%, rgba(249,175,34,.18), transparent 55%),
             linear-gradient(160deg,var(--shell-950),var(--shell-900) 55%,var(--shell-800)); }
.page-hero::after { content:""; position:absolute; inset-inline:0; inset-block-end:-1px; height:80px; background:linear-gradient(to bottom,transparent,var(--bg)); z-index:2; }
.page-hero .container { position:relative; z-index:3; }
.page-hero__grid { display:grid; grid-template-columns:1.02fr .98fr; gap:3rem; align-items:center; }
.page-hero h1 { color:#fff; font-size:clamp(1.7rem,3.6vw,2.6rem); }
.page-hero p { color:#c3ddd6; max-width:48ch; }
.ph-eyebrow { background:rgba(255,255,255,.08); color:#a9e6dd; }
.ph-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.1rem 0 1.6rem; }
.ph-chip { display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; color:#cdeee8; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); padding:.35rem .8rem; border-radius:999px; }
.ph-chip .sq { width:8px; height:8px; border-radius:2px; background:var(--orange); }
.page-hero .hero__cta { margin-block-end:0; }

/* products cloud */
.phv-cloud { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.phv-chip { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.95); color:var(--ink); border-radius:999px; padding:.5rem .9rem; font-size:.86rem; font-weight:700; box-shadow:var(--shadow-md); }
.phv-chip__ic { width:26px; height:26px; border-radius:7px; background:var(--surface-2); display:grid; place-items:center; }
.phv-chip__ic img { width:20px; height:20px; } .phv-chip__ic svg { width:16px; height:16px; color:var(--teal-700); }
.phv-chip.f1{animation:bob 5s var(--ease) infinite} .phv-chip.f2{animation:bob 6s var(--ease) infinite .3s}
.phv-chip.f3{animation:bob 5.5s var(--ease) infinite .6s} .phv-chip.f4{animation:bob 6.5s var(--ease) infinite .2s}
.phv-chip.f5{animation:bob 5.2s var(--ease) infinite .8s} .phv-chip.f6{animation:bob 6.2s var(--ease) infinite .4s}

/* services cluster */
.phv-orbit-svc { display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.phv-core { display:flex; align-items:center; gap:.6rem; background:var(--grad-orange); color:#3a2400; font-weight:800; padding:.7rem 1.3rem; border-radius:999px; box-shadow:var(--shadow-lg); }
.phv-core__ic { width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.5); display:grid; place-items:center; }
.phv-core__ic svg { width:20px; height:20px; }
.phv-bubble { display:inline-flex; align-items:center; gap:.55rem; background:rgba(255,255,255,.96); color:var(--ink); font-weight:700; font-size:.9rem; padding:.55rem 1rem; border-radius:14px; box-shadow:var(--shadow-md); animation:bob 6s var(--ease) infinite; }
.phv-bubble:nth-child(2){animation-delay:.2s} .phv-bubble:nth-child(3){animation-delay:.5s} .phv-bubble:nth-child(4){animation-delay:.8s} .phv-bubble:nth-child(5){animation-delay:1.1s}
.phv-bubble__ic { width:30px; height:30px; border-radius:8px; background:var(--surface-2); display:grid; place-items:center; }
.phv-bubble__ic img { width:22px; height:22px; }

/* about timeline */
.phv-timeline { position:relative; display:grid; gap:1rem; padding-inline-start:1.4rem; }
.phv-timeline::before { content:""; position:absolute; inset-inline-start:6px; inset-block:6px; width:2px; background:rgba(255,255,255,.18); }
.phv-step { position:relative; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:.8rem 1rem; }
.phv-step__dot { position:absolute; inset-inline-start:-1.4rem; inset-block-start:1.1rem; width:12px; height:12px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(249,175,34,.25); animation:pulse 2.4s infinite; }
.phv-step b { display:block; color:#fff; font-size:1.15rem; } .phv-step span { color:#a9d3cb; font-size:.85rem; }

/* packages hero — 5 industry cards, staggered float */
.phv-packs { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; align-content:center; }
.phv-pack { position:relative; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:.85rem 1rem; display:flex; align-items:center; gap:.7rem; animation:pkgFloat 5s ease-in-out infinite; }
.phv-pack.p0 { animation-delay:0s; background:linear-gradient(135deg, rgba(28,167,156,.18), rgba(255,255,255,.05)); }
.phv-pack.p1 { animation-delay:.4s; background:linear-gradient(135deg, rgba(249,175,34,.18), rgba(255,255,255,.05)); }
.phv-pack.p2 { animation-delay:.8s; background:linear-gradient(135deg, rgba(28,167,156,.15), rgba(255,255,255,.05)); grid-column: span 2; }
.phv-pack.p3 { animation-delay:1.2s; background:linear-gradient(135deg, rgba(249,175,34,.12), rgba(255,255,255,.05)); }
.phv-pack.p4 { animation-delay:1.6s; background:linear-gradient(135deg, rgba(28,167,156,.20), rgba(255,255,255,.05)); }
.phv-pack__ic { flex:none; width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.14); display:grid; place-items:center; color:#fff; }
.phv-pack__ic svg { width:20px; height:20px; }
.phv-pack b { display:block; color:#fff; font-size:1rem; margin-bottom:.15rem; }
.phv-pack span { color:#a9d3cb; font-size:.78rem; }
@keyframes pkgFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

/* versions hero — 4 edition rows with code badge */
.phv-versions { display:grid; gap:.7rem; align-content:center; }
.phv-ver { display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); animation:pkgFloat 5s ease-in-out infinite; }
.phv-ver.v0 { animation-delay:0s;    background:linear-gradient(90deg, rgba(28,167,156,.20), rgba(255,255,255,.05)); }
.phv-ver.v1 { animation-delay:.35s;  background:linear-gradient(90deg, rgba(249,175,34,.22), rgba(255,255,255,.05)); }
.phv-ver.v2 { animation-delay:.7s;   background:linear-gradient(90deg, rgba(28,167,156,.16), rgba(255,255,255,.05)); }
.phv-ver.v3 { animation-delay:1.05s; background:linear-gradient(90deg, rgba(249,175,34,.14), rgba(255,255,255,.05)); }
.phv-ver__code { flex:none; min-width:52px; text-align:center; padding:.4rem .6rem; border-radius:10px; background:rgba(0,0,0,.35); color:#fff; font-weight:800; font-size:.82rem; letter-spacing:.04em; border:1px solid rgba(255,255,255,.18); }
.phv-ver__body b { display:block; color:#fff; font-size:1rem; margin-bottom:.15rem; }
.phv-ver__body span { color:#a9d3cb; font-size:.82rem; }

/* plugins hero — categorized "shelves" (سامانه‌های مالیاتی / یکپارچگی / سازمانی)
   High-contrast solid pills so text stays readable on the dark hero. */
.phv-shelves { display:grid; gap:.85rem; align-content:center; }
.phv-shelf { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:.75rem .9rem; animation:pkgFloat 5s ease-in-out infinite; }
.phv-shelf.s0 { animation-delay:0s;   border-inline-start:3px solid var(--teal); }
.phv-shelf.s1 { animation-delay:.35s; border-inline-start:3px solid var(--orange); }
.phv-shelf.s2 { animation-delay:.7s;  border-inline-start:3px solid #a78bfa; }
.phv-shelf__hdr { display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem; color:#fff; }
.phv-shelf__hdr b { font-size:.9rem; font-weight:800; letter-spacing:.01em; }
.phv-shelf__ic { width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.14); display:grid; place-items:center; color:#fff; }
.phv-shelf__ic svg { width:14px; height:14px; }
.phv-shelf__row { display:flex; flex-wrap:wrap; gap:.4rem; }
.phv-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:999px;
  background:#fff; color:#0f172a; font-size:.78rem; font-weight:700;
  box-shadow:0 3px 8px rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.4); }
.phv-pill__ic { width:16px; height:16px; display:inline-flex; color:var(--teal-700); }
.phv-pill__ic svg { width:14px; height:14px; }

@media (prefers-reduced-motion: reduce) { .phv-pack, .phv-ver { animation:none; } }

/* knowledge cards */
.phv-cards { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.phv-kcard { background:rgba(255,255,255,.96); color:var(--ink); border-radius:14px; padding:1rem; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:.5rem; animation:bob 6s var(--ease) infinite; }
.phv-kcard.k1{animation-delay:.3s} .phv-kcard.k2{animation-delay:.6s} .phv-kcard.k3{animation-delay:.9s}
.phv-kcard__ic { width:34px; height:34px; border-radius:9px; background:var(--teal-050); color:var(--teal-700); display:grid; place-items:center; }
.phv-kcard__ic svg { width:19px; height:19px; } .phv-kcard b { font-size:.9rem; }

/* contact tiles */
.phv-contact { display:grid; gap:.7rem; }
.phv-crow { display:flex; align-items:center; gap:.8rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:.8rem 1rem; }
.phv-crow__ic { width:42px; height:42px; border-radius:11px; background:rgba(255,255,255,.1); color:#7fe6d6; display:grid; place-items:center; }
.phv-crow__ic svg { width:20px; height:20px; }
.phv-crow b { display:block; color:#fff; font-size:.92rem; } .phv-crow span span { color:#a9d3cb; font-size:.82rem; }

@media (max-width:1200px){ .header-cta .btn-outline { display:none; } }
@media (max-width:1024px){ .pkgs { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .page-hero__grid { grid-template-columns:1fr; }
  .kb-grid { grid-template-columns:1fr; }
  .detail, .detail--rev .detail__media { grid-template-columns:1fr; order:0; }
  .ver-strip { grid-template-columns:1fr; }
  /* mega menus flow inside the mobile dropdown, revealed on tap */
  .has-mega { width:100%; }
  .has-mega .mega { position:static; width:auto; inset:auto; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-radius:0; padding:2px 6px 8px; display:none; }
  .has-mega.open > .mega { display:block; }
  .mega__grid { grid-template-columns:1fr 1fr; gap:4px 10px; }
  .mega__col--pkg { border-inline-start:0; padding-inline-start:0; grid-column:1/-1; }
  .mega__foot { display:none; }
  /* tabbed mega: stack, hide rail, show all panels */
  .mega--tabs { grid-template-columns:1fr; } .mega-tabs { display:none; }
  .mega-panels { padding:4px 6px 8px; min-height:0; } .mega-panel { display:block !important; }
  .mega-panel__head { margin-block-start:8px; }
}
@media (max-width:600px){ .pkgs { grid-template-columns:1fr; } }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .hero h1 .word { opacity:1 !important; transform:none !important; }
  .mock__chart span { height:var(--h) !important; }
}


/* Header stability on laptop/desktop widths. */
@media (min-width:681px) {
  .site-header .container { flex-wrap:nowrap; gap:clamp(.55rem,1vw,1.2rem); }
  .site-header .brand { flex:0 0 auto; min-width:max-content; }
  .site-header .brand__logo { width:46px; height:46px; flex:0 0 46px; }
  .site-header .brand__name,
  .site-header .brand__name small { white-space:nowrap; }
  .site-header .nav { min-width:0; }
  .site-header .nav__list { flex-wrap:nowrap; }
  .site-header .header-cta { flex:0 0 auto; white-space:nowrap; }
  .has-mega { padding-block-end:8px; margin-block-end:-8px; }
  .has-mega > .mega:not(.mega--wide) { inset-block-start:100%; }
  .mega { transition-delay:0s,0s,.16s; }
  .has-mega:hover > .mega,
  .has-mega:focus-within > .mega,
  .has-mega.open > .mega,
  .mega:hover { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .mega::before { inset-block-start:-8px; height:8px; }
}
@media (max-width:1580px) { .header-phone { display:none; } }
	

/* Header brand spacing and wide-mega alignment — v1.2.6 */
@media (min-width:681px) {
  .site-header .brand { margin-inline-end:1.25rem; }
}
@media (min-width:901px) {
  .site-header .mega--wide { inset-block-start:calc(var(--header-h) - 10px); }
  .admin-bar .site-header .mega--wide { inset-block-start:calc(var(--header-h) + 22px); }
}
	

/* Exact wide-mega top alignment with package dropdown — v1.2.7 */
@media (min-width:901px) {
  html body .site-header .mega--wide { inset-block-start:calc(var(--header-h) - 11px) !important; }
  html body.admin-bar .site-header .mega--wide { inset-block-start:calc(var(--header-h) + 21px) !important; }
}