/* =====================================================================
   KTC Business Software - Design System & Styles
   Brand: KTC (Ktechclans)  |  Market: Kingdom of Saudi Arabia
   ===================================================================== */

:root {
  /* Brand palette - KTC / Ktechclans blue (matches the app) */
  --brand-50:  #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-200: #bae6fd;
  --brand-300: #7dd3fc;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-800: #075985;

  /* Single accent. Hierarchy comes from weight, size, and tone, not from hue.
     One brand colour across every icon keeps the pages looking deliberate. */
  --accent-ink: var(--brand-700);

  --ink:       #0f172a;
  --ink-soft:  #334155;
  --muted:     #64748b;
  --line:      #e2e8f0;
  --bg:        #ffffff;
  --bg-soft:   #f8fafc;

  --radius:    8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  --shadow-sm: 0 1px 2px rgba(3, 105, 161, .06), 0 1px 3px rgba(3, 105, 161, .08);
  --shadow:    0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, .12);

  --grad-brand: #0ea5e9;
  --grad-hero:  #f8fafc;
  --grad-deep:  #0f172a;

  --font-en: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ar: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --maxw: 1160px;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-en);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html[dir="rtl"] body { font-family: var(--font-ar); }

img, svg { max-width: 100%; display: block; }
/* The inline icons are drawn as open strokes. Rounding the caps and joins makes
   the whole set look like one deliberate family rather than mixed clip art. */
svg[stroke] { stroke-linecap: round; stroke-linejoin: round; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.15; color: var(--ink); margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p  { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section[id] { scroll-margin-top: 84px; }
.section { padding: 84px 0; }
.text-center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 640px; }
.section .lead.center { margin-inline: auto; }

/* ---------- Eyebrow (section kicker) ---------- */
/* Plain letterspaced type, no capsule. The tinted pill it replaced was the
   same chip treatment already dropped from the icons, and it was the last
   place on the site still using it. */
.eyebrow {
  display: block; margin-bottom: 10px;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-700);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 1rem; font-family: inherit;
  padding: 12px 20px; border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 20px; height: 20px; }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--brand-600); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.btn-light { background: #fff; color: var(--brand-700); box-shadow: var(--shadow); }
.btn-light:hover { background: var(--brand-50); }
.btn-whatsapp { background: #25d366; color: #06331b; }
.btn-whatsapp:hover { background: #1fbe5b; transform: translateY(-1px); }
.btn-outline { background: #fff; color: var(--brand-700); border-color: var(--brand-200); }
.btn-outline:hover { color: var(--brand-800); background: var(--brand-50); border-color: var(--brand-300); }
.btn-lg { padding: 17px 32px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 14px; }
/* The logo file is trimmed to its artwork, so it only needs a height: no
   absolute offsets cropping a mostly empty canvas, and nothing to re-tune per
   breakpoint. */
.nav__logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.nav__logo img { height: 40px; width: auto; max-width: 100%; object-fit: contain; }
.nav__links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav__links a { color: var(--ink-soft); font-weight: 600; font-size: .96rem; }
.nav__links a:hover { color: var(--brand-700); text-decoration: none; }
.nav__dropdown { position: relative; }
.nav__dropdown-menu {
  position: absolute; top: calc(100% + 18px); inset-inline-start: -22px; z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 400px; padding: 10px;
  visibility: hidden; opacity: 0; transform: translateY(6px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); transition: .18s ease;
}
.nav__dropdown:hover .nav__dropdown-menu, .nav__dropdown:focus-within .nav__dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); }
.nav__dropdown-menu a { display: flex; align-items: center; min-height: 42px; padding: 10px 12px; border-radius: 7px; }
.nav__dropdown-menu a:hover { background: var(--bg-soft); }
.nav__dropdown-menu strong { color: var(--ink); font-size: .85rem; }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__links-cta { display: none; }

.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px;
  font-weight: 700; font-size: .85rem; color: var(--brand-700);
  padding: 8px 14px; cursor: pointer; font-family: inherit;
}
.lang-toggle:hover { background: var(--brand-50); }
.lang-toggle, .lang-toggle:hover { text-decoration: none; }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ---------- Hero ---------- */
.hero { position: relative; background: #fff; overflow: hidden; }
/* Tint fades out before the fold rather than filling the whole block, so the
   section has a horizon instead of sitting in a flat coloured box. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, var(--brand-50) 0%, #fff 58%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .96fr);
  gap: 48px; align-items: center;
  /* Matches .container exactly. The illustration no longer bleeds off the
     edge, so both columns sit inside the same gutters as the rest of the site. */
  max-width: var(--maxw); margin-inline: auto; padding-inline: 24px;
}
.hero__copy { padding-block: 88px; max-width: 660px; }
.hero h1 {
  margin-bottom: 20px; letter-spacing: -0.03em; line-height: 1.07;
  font-size: clamp(2.05rem, 3.5vw, 3.15rem); text-wrap: balance;
}
.hero h1 .hl { color: var(--brand-700); }
.hero__sub {
  font-size: 1.14rem; line-height: 1.62; color: var(--ink-soft);
  margin-bottom: 32px; max-width: 520px; text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero visual: a transparent illustration, so no frame, border or shadow.
   Those belong to a screenshot; on cut-out artwork they read as a mistake. */
.hero__visual { position: relative; display: flex; justify-content: center; }
.hero__art {
  width: 100%; max-width: 540px; height: auto;
}

/* ---------- Product preview ---------- */
/* Window chrome belongs here, on the real screenshot; it tells the viewer this
   is the actual product. Full container width, no crop, nothing cut off. */
.product-preview { padding-top: 0; background: #fff; }
.product-preview .app-window { margin-top: 44px; }
.app-window {
  position: relative; margin: 0; overflow: hidden; background: #fff;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, .08),
    0 2px 4px rgba(15, 23, 42, .04),
    0 14px 28px rgba(15, 23, 42, .07),
    0 34px 68px -24px rgba(3, 105, 161, .22);
}
.app-window__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.app-window__dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.app-window__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d3dae3; }
.app-window__title { font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.app-window img { display: block; width: 100%; height: auto; }

/* ---------- Feature grid ---------- */
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; }
.feature {
  position: relative; overflow: hidden; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 26px 30px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-200); }
/* Bare stroke icon, centred above the heading, no tinted chip behind it. */
.feature__ic { display: grid; place-items: center; margin: 0 auto 18px; color: var(--accent-ink); }
.feature__ic svg { width: 40px; height: 40px; stroke-width: 1.6; }
.feature h3 { margin-bottom: 8px; font-size: 1.15rem; }
.feature p { color: var(--muted); font-size: .96rem; margin: 0; }
.feature__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--brand-700); font-size: .84rem; font-weight: 700; }
.feature__link:hover { gap: 9px; text-decoration: none; }

/* ---------- Compliance / split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.check-list { list-style: none; display: grid; gap: 16px; margin-top: 8px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.02rem; }
.check-list li svg {
  flex: 0 0 24px; width: 24px; height: 24px; margin-top: 3px;
  color: var(--accent-ink); stroke-width: 1.8;
}
.check-list li strong { display: block; }
.check-list li span { color: var(--muted); font-size: .94rem; }

.panel-deep {
  background: var(--grad-deep); color: #cbd5e1; border-radius: var(--radius-xl);
  padding: 40px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.panel-deep h3 { color: #fff; }
.panel-deep::after { display: none; }
.warn-list { list-style: none; display: grid; gap: 12px; position: relative; z-index: 1; }
.warn-list li { display: flex; gap: 12px; align-items: flex-start; }
.warn-list li svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--brand-300); margin-top: 3px; stroke-width: 1.8; }

/* ---------- Sectors ---------- */
.sectors__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.sector {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center; transition: .2s;
}
.sector:hover { border-color: var(--brand-300); box-shadow: var(--shadow); transform: translateY(-4px); }
.sector__ic { display: grid; place-items: center; margin: 0 auto 14px; color: var(--accent-ink); }
.sector__ic svg { width: 34px; height: 34px; stroke-width: 1.6; }
.sector b { font-size: .98rem; }

/* ---------- Pricing ---------- */
.pricing { background: var(--bg-soft); }
.pricing-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; margin: 40px auto 0; }
.pricing-option {
  position: relative; display: flex; flex-direction: column; padding: 32px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-option:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pricing-option--advanced {
  border-color: var(--brand-500); box-shadow: 0 8px 24px rgba(14,165,233,.12);
}
.pricing-option__badge { position: absolute; top: 18px; inset-inline-end: 18px; padding: 5px 9px; color: #fff; background: var(--brand-600); border-radius: 5px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.pricing-option__top > span { color: var(--brand-700); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pricing-option__top h2, .pricing-option__top h3 { margin: 8px 0 6px; font-size: 1.5rem; }
.pricing-option__top p { min-height: 26px; color: var(--muted); }
.pricing-option__price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.pricing-option__price strong {
  font-size: 2.75rem; line-height: 1; font-weight: 800;
  color: var(--brand-700);
}
.pricing-option__price span { color: var(--muted); font-size: .85rem; }
.pricing-option ul { display: grid; gap: 11px; margin: 0 0 26px; list-style: none; }
.pricing-option li { position: relative; padding-inline-start: 28px; color: var(--ink-soft); }
.pricing-option li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .42em;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat;
}
.pricing-option .btn, .pricing-option .plan-actions { margin-top: auto; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 40px auto 0; display: grid; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px;
  transition: box-shadow .2s;
}
.faq details[open] { box-shadow: var(--shadow-sm); border-color: var(--brand-100); }
.faq summary {
  list-style: none; cursor: pointer; font-weight: 700; padding: 18px 0; display: flex;
  justify-content: space-between; align-items: center; gap: 16px; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--brand-600); font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); padding-bottom: 18px; margin: 0; }

/* ---------- Product consultation ---------- */
.choice-help { padding: 48px 0; background: #fff; border-top: 1px solid var(--line); }
.choice-help__row {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  max-width: 980px; margin: 0 auto; padding: 28px 32px;
  background: var(--bg-soft);
  border: 1px solid var(--brand-100); border-radius: var(--radius-lg);
}
.choice-help h2 { margin: 0 0 5px; font-size: 1.45rem; }
.choice-help p { margin: 0; color: var(--muted); }
.choice-help .btn { flex: 0 0 auto; }

/* ---------- Demo selection modal ---------- */
body.demo-modal-open { overflow: hidden; }
.demo-modal[hidden] { display: none; }
.demo-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.demo-modal__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(15,23,42,.62); cursor: default; }
.demo-modal__dialog { position: relative; z-index: 1; width: min(680px, 100%); padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.demo-modal__close { position: absolute; top: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--muted); background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; font-size: 1.4rem; cursor: pointer; }
.demo-modal__eyebrow { color: var(--brand-700); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.demo-modal h2 { margin: 8px 36px 8px 0; font-size: 1.55rem; }
.demo-modal__dialog > p { color: var(--muted); }
.demo-modal__options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.demo-option { display: flex; flex-direction: column; padding: 20px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.demo-option:hover { border-color: var(--brand-300); }
.demo-option strong { font-size: 1.05rem; }
.demo-option span { margin: 7px 0 18px; color: var(--muted); font-size: .86rem; }
.demo-option__actions { display: grid; grid-template-columns: 1fr; margin-top: auto; }
.demo-option__actions .btn { padding: 9px 12px; font-size: .8rem; }
.btn-outline { color: var(--brand-700); background: #fff; border-color: var(--brand-200); }
.btn-outline:hover { color: var(--brand-800); background: var(--brand-50); border-color: var(--brand-300); }

.business-control { background: #fff; }
.business-control__content { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.control-summary { display: flex; align-items: stretch; overflow: hidden; background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.control-summary__media { flex: 1; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 0; }
.control-summary__media img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; object-position: center; border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.control-summary--image-only { border: 0; box-shadow: none; background: transparent; }
.control-summary--image-only .control-summary__media { padding: 0; }
.control-summary--image-only .control-summary__media img { border: 0; border-radius: var(--radius-xl); }

.why-lite { background: var(--bg-soft); }
.why-lite__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 980px; margin: 40px auto 0; }
.why-lite__grid article { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.why-lite__grid h3 { margin-bottom: 7px; font-size: 1.05rem; }
.why-lite__grid p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ---------- Product detail pages ---------- */
.feature-page-hero { padding: 76px 0; overflow: hidden; background: var(--grad-hero); border-bottom: 1px solid var(--line); }
.feature-page-hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.feature-page-hero h1 { max-width: 760px; margin: 14px 0 18px; font-size: clamp(2.25rem, 4.5vw, 4rem); }
.feature-page-hero .lead { max-width: 700px; }
.feature-page-hero__panel { padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.feature-page-hero__panel > small { display: block; color: var(--brand-700); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.feature-page-hero__panel > strong { display: block; margin: 8px 0 22px; font-size: 1.5rem; }
.feature-page-hero__panel ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.feature-page-hero__panel li { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .92rem; }
.feature-page-hero__panel li span { display: grid; place-items: center; width: 22px; height: 22px; color: var(--brand-700); background: var(--brand-50); border-radius: 50%; font-weight: 800; }
.feature-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1000px; margin: 42px auto 0; }
.feature-detail-grid article {
  padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-detail-grid article:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-200); }
.feature-detail-grid article > span {
  display: grid; place-items: center; width: 38px; height: 38px;
  color: var(--brand-700); background: var(--brand-50); border-radius: 10px;
  font-size: .85rem; font-weight: 800; letter-spacing: 0;
}
.feature-detail-grid h3 { margin: 16px 0 8px; font-size: 1.12rem; }
.feature-detail-grid p { margin: 0; color: var(--muted); font-size: .92rem; }
.feature-process { background: var(--bg-soft); border-block: 1px solid var(--line); }
.feature-process .container { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: start; }
.feature-process__intro { position: sticky; top: 110px; }
.feature-process__intro h2 { margin: 12px 0; }
.feature-process__intro p { color: var(--muted); }
.feature-process__steps { display: grid; gap: 12px; }
.feature-process__steps article { display: flex; gap: 18px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.feature-process__steps article > span { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; color: var(--brand-700); background: var(--brand-50); border-radius: 8px; font-weight: 800; }
.feature-process__steps h3 { margin: 0 0 5px; font-size: 1rem; }
.feature-process__steps p { margin: 0; color: var(--muted); font-size: .88rem; }
.feature-page-cta { padding: 48px 0; }
.feature-page-cta__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.inner-page-hero { padding: 76px 0 62px; background: var(--grad-hero); border-bottom: 1px solid var(--line); }
.inner-page-hero__content { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
.inner-page-hero__copy { text-align: center; }
.inner-page-hero h1 { max-width: 900px; margin: 14px auto 16px; font-size: clamp(2.25rem, 4.5vw, 4rem); }
.inner-page-hero__media { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); background: #fff; }
.inner-page-hero__media img { display: block; width: 100%; height: auto; object-fit: cover; }
.plan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.contact-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-page-grid article {
  display: flex; flex-direction: column; align-items: flex-start; padding: 32px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.contact-page-grid article:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.contact-page-grid h2 { margin: 14px 0 9px; font-size: 1.3rem; }
.contact-page-grid p { flex: 1; color: var(--muted); font-size: .92rem; }
.contact-page-grid .btn { width: 100%; }

/* ---------- Editorial product screenshots ---------- */
.screenshot-section { padding: 20px 0 78px; background: #fff; }
.screenshot-stage {
  position: relative; width: 100%; min-height: 520px; margin: 0;
  overflow: hidden; background: #eef3f8; border-block: 1px solid var(--line);
}
.screenshot-stage img { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top center; }
.screenshot-stage figcaption { position: absolute; inset-inline-start: 18px; bottom: 14px; padding: 6px 9px; color: #fff; background: rgba(15,23,42,.78); font-size: .72rem; }
.screenshot-stage.is-empty { display: grid; place-items: center; background: linear-gradient(135deg, #edf3f8, #f8fafc); }
.screenshot-stage.is-empty::before { content: attr(data-placeholder); color: #718096; font-size: .88rem; font-weight: 700; letter-spacing: .02em; }
.screenshot-stage.is-empty figcaption { display: none; }

/* ---------- Footer ---------- */
.footer {
  position: relative; background: var(--ink); color: #cbd5e1; padding: 64px 0 28px;
  border-top: 3px solid var(--brand-600);
}
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; }
.footer__brand img { height: 40px; margin-bottom: 16px; }
.footer__brand p { font-size: .92rem; color: #94a3b8; max-width: 300px; }
.footer h4 {
  position: relative; color: #fff; font-size: .95rem; margin-bottom: 20px; padding-bottom: 10px;
  text-transform: uppercase; letter-spacing: .06em;
}
.footer h4::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 28px; height: 2px; background: var(--brand-500); border-radius: 2px;
}
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer a { color: #cbd5e1; font-size: .94rem; transition: color .15s ease; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer__contact li { display: flex; gap: 11px; align-items: center; font-size: .94rem; }
.footer__contact svg {
  flex: 0 0 19px; width: 19px; height: 19px; margin: 0;
  color: var(--brand-300); transition: color .15s ease;
}
.footer__contact li:hover svg { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .86rem; color: #94a3b8; }
.footer__bottom a { color: #94a3b8; }

/* ---------- Legal pages ---------- */
.legal-hero { background: var(--grad-hero); border-bottom: 1px solid var(--line); padding: 56px 0 40px; }
.legal-hero h1 { margin-bottom: 8px; }
.legal-body { padding: 56px 0 80px; }
.legal-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.legal-toc { position: sticky; top: 96px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.legal-toc h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.legal-toc ul { list-style: none; display: grid; gap: 8px; }
.legal-toc a { font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
.legal-content h2 { font-size: 1.4rem; margin-top: 40px; scroll-margin-top: 96px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.1rem; margin-top: 24px; }
.legal-content p, .legal-content li { color: var(--ink-soft); font-size: 1rem; }
.legal-content ul { padding-inline-start: 22px; list-style: disc; display: grid; gap: 8px; margin-bottom: 16px; }
.legal-content a { font-weight: 600; }
.legal-updated { display: inline-block; background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); border-radius: 999px; padding: 6px 14px; font-size: .85rem; font-weight: 700; }

/* ---------- Language visibility helpers ---------- */
[data-lang] { display: none; }
html[data-active-lang="en"] [data-lang="en"] { display: revert; }
html[data-active-lang="ar"] [data-lang="ar"] { display: revert; }
/* inline variants keep flow */
html[data-active-lang="en"] span[data-lang="en"],
html[data-active-lang="ar"] span[data-lang="ar"] { display: inline; }

/* RTL adjustments */
html[dir="rtl"] .check-list li { text-align: right; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .sectors__grid { grid-template-columns: repeat(3, 1fr); }
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__copy { padding-block: 56px 36px; max-width: none; }
  .hero__visual { padding-bottom: 56px; }
  .hero__art { max-width: 400px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .legal-wrap { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .nav__links { display: none; }
  .nav__dropdown { width: 100%; text-align: center; }
  .nav__dropdown-menu { position: static; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 8px; padding: 8px; visibility: visible; opacity: 1; transform: none; box-shadow: none; }
  .nav__dropdown-menu a { justify-content: center; min-height: 44px; padding: 9px 8px; text-align: center; }
  .nav__dropdown-menu strong { font-size: .82rem; line-height: 1.25; }
  .nav__dropdown:focus-within .nav__dropdown-menu { display: grid; }
  /* Touch has no hover and tapping the parent link navigates away, so the
     feature links are simply listed inside the open menu. */
  .nav[data-open="true"] .nav__dropdown-menu { display: grid; border: 1px solid var(--line); }
  .nav__toggle { display: block; }
  .nav__actions .btn { display: none; }
  .nav__links-cta { display: block; margin-top: 6px; }
  .nav__links-cta .btn { display: flex; width: 100%; }
  .nav[data-open="true"] .nav__links {
    display: flex; position: absolute; top: 100%; inset-inline: 0; flex-direction: column;
    max-height: calc(100vh - 72px); overflow-y: auto;
    background: #fff; padding: 20px 24px; gap: 16px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  /* :not(.btn) so the demo call to action keeps its button shape. */
  .nav[data-open="true"] .nav__links a:not(.btn) { display: block; padding: 4px 0; font-size: 1rem; }
  .nav[data-open="true"] .nav__links-cta .btn { display: flex; width: 100%; }
  /* Burger folds into a cross while the menu is open. */
  .nav[data-open="true"] .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav[data-open="true"] .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav[data-open="true"] .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .feature-page-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .feature-process .container { grid-template-columns: 1fr; gap: 34px; }
  .feature-process__intro { position: static; }
  .contact-page-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .choice-help__row { align-items: flex-start; flex-direction: column; }
  .choice-help .btn { width: 100%; }
  .demo-modal__dialog { padding: 24px 18px; }
  .demo-modal__options { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .section { padding: 60px 0; }
  .pricing-options { grid-template-columns: 1fr; }
  .why-lite__grid { grid-template-columns: 1fr; }
  .feature-detail-grid { grid-template-columns: 1fr; }
  .feature-page-hero { padding: 54px 0; }
  .feature-page-hero__panel { padding: 22px; }
  .feature-page-cta__actions { width: 100%; flex-direction: column; }
  .plan-actions { grid-template-columns: 1fr; }
  .screenshot-section { padding-block: 48px; }
  .screenshot-stage { min-height: 280px; }
  .pricing-option { padding: 24px 20px; }
  .features__grid, .sectors__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__cta .btn, .feature-page-cta__actions .btn, .plan-actions .btn { width: 100%; }
  .nav { min-height: 62px; gap: 8px; }
  .nav__logo img { height: 32px; }
  .nav__actions { gap: 6px; }
  .lang-toggle { padding: 7px 10px; font-size: .8rem; }
  .nav[data-open="true"] .nav__links { max-height: calc(100vh - 62px); padding: 16px 20px; }
  .nav[data-open="true"] .nav__links { gap: 12px; }
}

/* ---------- Advanced product page ---------- */
.advanced-hero { position: relative; overflow: hidden; padding: 150px 0 90px; background: linear-gradient(145deg,#f1f7ff 0%,#fff 54%,#f4f1ff 100%); }
.advanced-hero::before { content:""; position:absolute; width:520px; height:520px; inset-block-start:-300px; inset-inline-end:-140px; border-radius:45% 55% 62% 38%; background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(124,58,237,.12)); transform:rotate(20deg); }
.advanced-hero__grid { position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr); align-items:center; gap:64px; }
.advanced-hero__copy h1 { max-width:650px; margin:14px 0 22px; color:#10233f; font-size:clamp(2.7rem,5vw,4.6rem); line-height:1.03; letter-spacing:-.055em; }
.advanced-hero__copy .lead { max-width:620px; }
.advanced-hero__actions { display:flex; margin-top:30px; flex-wrap:wrap; gap:12px; }
.advanced-badges { display:flex; margin-top:26px; flex-wrap:wrap; gap:9px; }
.advanced-badges span { padding:7px 10px; border:1px solid #d8e5f3; border-radius:999px; color:#41546d; background:rgba(255,255,255,.7); font-size:.76rem; font-weight:600; }
.advanced-badges span::before { content:"✓"; margin-inline-end:6px; color:#0284c7; }
.advanced-console { overflow:hidden; border:1px solid rgba(148,163,184,.28); border-radius:20px; background:#fff; box-shadow:0 38px 90px -35px rgba(15,40,80,.38); transform:perspective(1200px) rotateY(-2deg) rotateX(1deg); }
[dir="rtl"] .advanced-console { transform:perspective(1200px) rotateY(2deg) rotateX(1deg); }
.advanced-console__bar { display:flex; padding:13px 16px; align-items:center; gap:7px; color:#8491a3; background:#f7f9fc; font-size:.68rem; }
.advanced-console__bar i { width:8px; height:8px; border-radius:50%; background:#cbd5e1; }.advanced-console__bar i:first-child{background:#38bdf8}.advanced-console__bar span{margin-inline-start:auto}
.advanced-console__body { padding:24px; }
.advanced-console__head { display:flex; align-items:center; justify-content:space-between; }.advanced-console__head small,.advanced-console__head strong{display:block}.advanced-console__head small{color:#8290a3;font-size:.68rem}.advanced-console__head strong{margin-top:3px;color:#172b4d;font-size:1.1rem}
.advanced-console__stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:20px; gap:10px; }.advanced-console__stats article{padding:15px;border:1px solid #e7edf4;border-radius:11px}.advanced-console__stats small,.advanced-console__stats strong,.advanced-console__stats span{display:block}.advanced-console__stats small{color:#718096;font-size:.65rem}.advanced-console__stats strong{margin:8px 0;color:#172b4d;font-size:.95rem}.advanced-console__stats em{font-size:.55rem;font-style:normal}.advanced-console__stats span{color:#07875f;font-size:.6rem}
.advanced-console__chart { margin-top:11px; padding:17px; border:1px solid #e7edf4; border-radius:11px; color:#34455d; font-size:.74rem; }.advanced-bars{display:flex;height:125px;margin-top:18px;align-items:flex-end;gap:9px}.advanced-bars i{flex:1;border-radius:5px 5px 1px 1px;background:linear-gradient(180deg,#38bdf8,#2563eb);opacity:.85}
.advanced-section-head { max-width:740px; margin:0 auto 48px; text-align:center; }.advanced-section-head h2{margin:12px 0 14px}
.advanced-module-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.advanced-module{position:relative;min-height:230px;padding:27px;border:1px solid #e2eaf3;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.045);transition:.2s ease}.advanced-module:hover{border-color:#bae6fd;box-shadow:0 22px 44px rgba(15,23,42,.09);transform:translateY(-5px)}.advanced-module>span{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:9px;color:#0369a1;background:#eaf7ff;font-size:.72rem;font-weight:800}.advanced-module h3{margin:24px 0 10px;color:#172b4d}.advanced-module p{margin:0;color:#66758a;font-size:.9rem;line-height:1.65}
.advanced-flow { background:#0f2746; color:#fff; }.advanced-flow h2{color:#fff}.advanced-flow .lead{color:#c3d1e2}.advanced-flow__grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:90px}.advanced-flow__steps{display:grid;gap:12px}.advanced-flow__steps article{display:flex;padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.06);gap:18px}.advanced-flow__steps b{display:flex;width:40px;height:40px;flex:0 0 40px;align-items:center;justify-content:center;border-radius:10px;color:#7dd3fc;background:rgba(56,189,248,.13);font-size:.75rem}.advanced-flow__steps h3{margin:0 0 6px;color:#fff}.advanced-flow__steps p{margin:0;color:#b9c7d8;font-size:.9rem}
.advanced-cta { background:#f5f8fc; }.advanced-cta__panel{display:flex;padding:42px 48px;align-items:center;justify-content:space-between;border:1px solid #dce7f2;border-radius:20px;background:#fff;box-shadow:0 20px 50px rgba(15,23,42,.07);gap:30px}.advanced-cta__panel h2{margin:0 0 9px}.advanced-cta__panel p{max-width:720px;margin:0;color:#66758a}.advanced-cta__panel .btn{flex:0 0 auto}
@media(max-width:1050px){.advanced-hero__grid{grid-template-columns:1fr}.advanced-hero__copy{text-align:center}.advanced-hero__copy h1,.advanced-hero__copy .lead{margin-inline:auto}.advanced-hero__actions,.advanced-badges{justify-content:center}.advanced-console{max-width:760px;margin:auto;transform:none}.advanced-module-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.advanced-hero{padding:110px 0 60px}.advanced-hero__grid{gap:42px}.advanced-hero__copy h1{font-size:clamp(2.35rem,12vw,3.35rem)}.advanced-console__body{padding:14px}.advanced-console__stats{grid-template-columns:1fr}.advanced-console__chart{display:none}.advanced-module-grid{grid-template-columns:1fr}.advanced-module{min-height:0}.advanced-flow__grid{grid-template-columns:1fr;gap:36px}.advanced-cta__panel{padding:30px 24px;align-items:flex-start;flex-direction:column}.advanced-cta__panel .btn{width:100%;text-align:center}}

/* Advanced follows the established KTC site language: quiet surfaces,
   compact type and product information that remains the focus. */
.advanced-hero {
  padding: 132px 0 76px;
  border-bottom: 1px solid #e5edf5;
  background: linear-gradient(180deg, #f7faff 0%, #fff 100%);
}
.advanced-hero::before { display: none; }
.advanced-hero__grid { grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr); gap: 56px; }
.advanced-hero__copy h1 {
  max-width: 610px; margin: 12px 0 19px;
  font-size: clamp(2.35rem, 3.8vw, 3.65rem); line-height: 1.08; letter-spacing: -.04em;
}
.advanced-hero__copy .lead { max-width: 570px; font-size: 1.08rem; line-height: 1.7; }
.advanced-hero__actions { margin-top: 26px; }
.advanced-badges { margin-top: 22px; }
.advanced-badges span { border: 0; padding: 4px 0; background: transparent; }
.advanced-badges span + span::before { content: "·"; margin-inline: 10px 16px; color: #a4afbd; }
.advanced-badges span:first-child::before { content: "✓"; margin-inline-end: 6px; color: #0284c7; }
.advanced-console { border-radius: 12px; box-shadow: 0 22px 55px -30px rgba(15,40,80,.32); transform: none; }
[dir="rtl"] .advanced-console { transform: none; }
.advanced-console__bar { padding: 11px 14px; }
.advanced-console__body { padding: 20px; }
.advanced-console__stats article, .advanced-console__chart { border-radius: 8px; }

.advanced-section-head { margin-bottom: 38px; }
.advanced-module-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.advanced-module {
  display: grid; min-height: 0; padding: 24px 25px;
  grid-template-columns: 38px 1fr; column-gap: 15px;
  border-radius: 10px; box-shadow: 0 2px 8px rgba(15,23,42,.035);
}
.advanced-module:hover { border-color: #cbd9e7; box-shadow: 0 7px 20px rgba(15,23,42,.06); transform: none; }
.advanced-module > span { width: 38px; height: 38px; border-radius: 8px; grid-row: 1 / span 2; }
.advanced-module h3 { margin: 2px 0 7px; font-size: 1.05rem; }
.advanced-module p { line-height: 1.6; }
.advanced-flow { background: #142b47; }
.advanced-flow__grid { gap: 68px; }
.advanced-flow__steps article { padding: 19px 20px; border-radius: 9px; }
.advanced-cta__panel { padding: 36px 40px; border-radius: 12px; box-shadow: 0 8px 25px rgba(15,23,42,.05); }

@media (max-width: 1050px) {
  .advanced-hero__grid { grid-template-columns: 1fr; }
  .advanced-hero__copy { text-align: start; }
  .advanced-hero__copy h1, .advanced-hero__copy .lead { margin-inline: 0; }
  .advanced-hero__actions, .advanced-badges { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .advanced-hero { padding: 100px 0 54px; }
  .advanced-hero__copy h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .advanced-hero__copy .lead { font-size: 1rem; }
  .advanced-badges { display: grid; gap: 5px; }
  .advanced-badges span + span::before { content: "✓"; margin-inline: 0 6px; color: #0284c7; }
  .advanced-module-grid { grid-template-columns: 1fr; }
  .advanced-module { padding: 20px; }
}

/* Plain product presentation: no simulated metrics, numbered cards or
   ornamental panel treatments. */
.advanced-page { background: #fff; }
.advanced-hero { padding: 138px 0 88px; border: 0; background: #fff; }
.advanced-hero__grid { display: block; }
.advanced-hero__copy { max-width: 790px; }
.advanced-hero__copy h1 { max-width: 760px; font-size: clamp(2.25rem, 3.5vw, 3.35rem); }
.advanced-hero__copy .lead { max-width: 690px; }
.advanced-badges { gap: 22px; }
.advanced-badges span + span::before { content: "✓"; margin-inline: 0 6px; color: #0284c7; }
.advanced-modules { padding-top: 56px; background: #fff; }
.advanced-section-head { max-width: 690px; margin: 0 0 48px; text-align: start; }
.advanced-module-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 50px; }
.advanced-module {
  display: block; min-height: 0; padding: 0; border: 0;
  border-radius: 0; background: transparent; box-shadow: none;
}
.advanced-module:hover { border: 0; box-shadow: none; transform: none; }
.advanced-module h3 { margin: 0 0 9px; color: #172b4d; font-size: 1.05rem; }
.advanced-module p { margin: 0; color: #66758a; }
.advanced-flow { background: #fff; color: #172b4d; }
.advanced-flow h2 { color: #172b4d; }
.advanced-flow .lead { color: #66758a; }
.advanced-flow__grid { align-items: start; gap: 90px; }
.advanced-flow__steps { gap: 26px; }
.advanced-flow__steps article { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; }
.advanced-flow__steps h3 { margin: 0 0 7px; color: #172b4d; }
.advanced-flow__steps p { color: #66758a; font-size: .95rem; line-height: 1.65; }
.advanced-cta { padding-top: 56px; background: #fff; }
.advanced-cta__panel { padding: 42px 0; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 900px) { .advanced-module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .advanced-hero { padding: 105px 0 58px; }
  .advanced-hero__copy h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .advanced-module-grid { grid-template-columns: 1fr; gap: 30px; }
  .advanced-flow__grid { gap: 42px; }
}

/* Final Advanced layout: editorial rather than dashboard-like. */
.advanced-hero { padding-block: 142px 94px; }
.advanced-hero__copy { max-width: 740px; }
.advanced-hero__copy h1 { max-width: 700px; margin-bottom: 22px; }
.advanced-hero__copy .lead { max-width: 650px; color: #53647a; }
.advanced-hero__actions { margin-top: 32px; }
.advanced-modules { padding-block: 82px; }
.advanced-section-head { margin-bottom: 54px; }
.advanced-section-head h2, .advanced-section-head .lead { max-width: 620px; }
.advanced-module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 38px; }
.advanced-module h3 { margin-bottom: 10px; font-size: 1.08rem; line-height: 1.35; }
.advanced-module p { font-size: .91rem; line-height: 1.7; }
.advanced-flow { padding-block: 86px; }
.advanced-flow__grid > div:first-child { max-width: 570px; }
.advanced-flow__steps h3 { font-size: 1.06rem; }
.advanced-cta { padding-block: 48px 88px; }
.advanced-cta__panel h2 { max-width: 690px; }
@media (max-width: 1050px) { .advanced-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .advanced-hero { padding-block: 104px 62px; }
  .advanced-modules, .advanced-flow { padding-block: 62px; }
  .advanced-module-grid { grid-template-columns: 1fr; gap: 32px; }
  .advanced-cta { padding-block: 30px 64px; }
}

/* Advanced feature catalogue, adapted to KTC's visual system. */
.advanced-catalog { padding: 84px 0 72px; background: #fff; }
.advanced-catalog__layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 76px; }
.advanced-catalog__nav { position: sticky; top: 94px; display: grid; gap: 4px; }
.advanced-catalog__nav strong { margin-bottom: 12px; color: #172b4d; font-size: .82rem; }
.advanced-catalog__nav a { padding: 7px 0; color: #66758a; font-size: .88rem; line-height: 1.35; }
.advanced-catalog__nav a:hover, .advanced-catalog__nav a:focus { color: var(--brand-600); }
.advanced-catalog__intro { max-width: 720px; margin-bottom: 72px; }
.advanced-catalog__intro h2 { margin: 12px 0 14px; }
.advanced-catalog__intro p { max-width: 620px; margin: 0; color: #66758a; font-size: 1.02rem; line-height: 1.7; }
.advanced-feature-group { margin-bottom: 78px; scroll-margin-top: 100px; }
.advanced-feature-group > h2 { margin: 0 0 32px; color: #172b4d; font-size: clamp(1.55rem, 2.3vw, 2rem); letter-spacing: -.025em; }
.advanced-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 58px; }
.advanced-feature-list article { max-width: 420px; }
.advanced-feature-list h3 { margin: 0 0 8px; color: #172b4d; font-size: 1rem; font-weight: 700; }
.advanced-feature-list p { margin: 0; color: #66758a; font-size: .92rem; line-height: 1.7; }
.advanced-catalog + .advanced-cta { padding-top: 0; }
@media (max-width: 850px) {
  .advanced-catalog { padding-top: 60px; }
  .advanced-catalog__layout { display: block; }
  .advanced-catalog__nav {
    position: static; display: flex; margin: 0 0 52px; padding-bottom: 8px;
    overflow-x: auto; gap: 22px; scrollbar-width: none;
  }
  .advanced-catalog__nav::-webkit-scrollbar { display: none; }
  .advanced-catalog__nav strong { display: none; }
  .advanced-catalog__nav a { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 620px) {
  .advanced-catalog { padding: 48px 0 44px; }
  .advanced-catalog__nav { margin-bottom: 38px; }
  .advanced-catalog__intro { margin-bottom: 52px; }
  .advanced-feature-group { margin-bottom: 56px; }
  .advanced-feature-group > h2 { margin-bottom: 25px; }
  .advanced-feature-list { grid-template-columns: 1fr; gap: 28px; }
}

/* Advanced hero: product-led, typographic and free of simulated UI. */
.advanced-page .advanced-hero {
  position: relative; padding: 150px 0 104px; overflow: hidden;
  color: #fff; background: #132b49;
}
.advanced-page .advanced-hero::after {
  content: ""; position: absolute; width: 520px; height: 520px;
  inset-block-start: -330px; inset-inline-end: -140px; border-radius: 50%;
  background: rgba(56, 189, 248, .10); pointer-events: none;
}
.advanced-page .advanced-hero__grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); align-items: end; gap: 90px;
}
.advanced-page .advanced-hero__copy { max-width: 720px; }
.advanced-page .advanced-hero .eyebrow { color: #7dd3fc; }
.advanced-page .advanced-hero__copy h1 {
  max-width: 700px; margin: 14px 0 22px; color: #fff;
  font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.05; letter-spacing: -.047em;
}
.advanced-page .advanced-hero__copy .lead { max-width: 650px; color: #c5d2e2; font-size: 1.08rem; }
.advanced-page .advanced-hero__actions { margin-top: 30px; }
.advanced-page .advanced-hero__actions .btn-primary { border-color: #fff; color: #15304f; background: #fff; }
.advanced-page .advanced-hero__actions .btn-primary:hover { border-color: #e8f4ff; background: #e8f4ff; }
.advanced-page .advanced-hero__actions .btn-outline { border-color: rgba(255,255,255,.38); color: #fff; background: transparent; }
.advanced-page .advanced-hero__actions .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.advanced-hero__index { display: grid; padding-bottom: 4px; gap: 12px; }
.advanced-hero__index span {
  color: rgba(255,255,255,.34); font-size: clamp(1.35rem, 2.25vw, 2.15rem);
  font-weight: 700; line-height: 1.16; letter-spacing: -.03em;
}
.advanced-hero__index span:first-child { color: #7dd3fc; }
@media (max-width: 900px) {
  .advanced-page .advanced-hero { padding: 126px 0 80px; }
  .advanced-page .advanced-hero__grid { grid-template-columns: 1fr; gap: 50px; }
  .advanced-hero__index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
}
@media (max-width: 620px) {
  .advanced-page .advanced-hero { padding: 105px 0 62px; }
  .advanced-page .advanced-hero__copy h1 { font-size: clamp(2.15rem, 10.5vw, 2.9rem); }
  .advanced-page .advanced-hero__copy .lead { font-size: 1rem; }
  .advanced-page .advanced-hero__actions { align-items: stretch; flex-direction: column; }
  .advanced-page .advanced-hero__actions .btn { width: 100%; text-align: center; }
  .advanced-hero__index { display: none; }
}

/* Keep the Advanced introduction aligned with the website's light theme. */
.advanced-page .advanced-hero {
  padding: 134px 0 82px; color: #172b4d;
  background: linear-gradient(180deg, #f3f8fe 0%, #fff 100%);
}
.advanced-page .advanced-hero::after { display: none; }
.advanced-page .advanced-hero__grid { display: block; }
.advanced-page .advanced-hero__copy { max-width: 860px; margin-inline: auto; text-align: center; }
.advanced-page .advanced-hero .eyebrow { color: var(--brand-600); }
.advanced-page .advanced-hero__copy h1 {
  max-width: 760px; margin-inline: auto; color: #10233f;
  font-size: clamp(2.35rem, 3.8vw, 3.5rem); line-height: 1.08;
}
.advanced-page .advanced-hero__copy .lead { max-width: 690px; margin-inline: auto; color: #5d6c80; }
.advanced-page .advanced-hero__actions { justify-content: center; }
.advanced-page .advanced-hero__actions .btn-primary {
  border-color: var(--brand-600); color: #fff; background: var(--brand-600);
}
.advanced-page .advanced-hero__actions .btn-primary:hover { border-color: var(--brand-700); background: var(--brand-700); }
.advanced-page .advanced-hero__actions .btn-outline { border-color: #b9c8d8; color: #29415e; background: #fff; }
.advanced-page .advanced-hero__actions .btn-outline:hover { border-color: #8da3ba; color: #10233f; background: #f8fbff; }
@media (max-width: 620px) {
  .advanced-page .advanced-hero { padding: 102px 0 58px; }
  .advanced-page .advanced-hero__copy h1 { font-size: clamp(2.05rem, 9.5vw, 2.7rem); }
}

/* Very narrow phones: the demo button is the one thing that must stay tappable,
   so the language toggle drops to its globe. */
@media (max-width: 400px) {
  .nav__logo img { height: 28px; }
  .lang-toggle span { display: none; }
  .lang-toggle { padding: 8px; }
  .nav__dropdown-menu { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .features__grid, .sectors__grid { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------- Floating WhatsApp button ---------- */
/* Icon only, in the corner the app reserves for its support launcher, so the
   two products feel like one. */
.wa-float {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 6px 18px rgba(6, 51, 27, .28);
  transition: background .18s ease, transform .18s ease;
}
.wa-float:hover { background: #1fbe5b; transform: translateY(-2px); color: #fff; }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }

@media (max-width: 640px) {
  .wa-float { width: 52px; height: 52px; inset-block-end: 16px; inset-inline-end: 16px; }
  .wa-float svg { width: 28px; height: 28px; }
}

/* ---------- Marketing polish ---------- */
/* A spacious, product-led composition inspired by modern ERP websites while
   retaining KTC's blue identity and existing content structure. */
.hero {
  isolation: isolate;
  background: linear-gradient(180deg, #f4f9ff 0%, #fff 92%);
}
.hero::before {
  background:
    radial-gradient(circle at 84% 14%, rgba(14,165,233,.18), transparent 27%),
    radial-gradient(circle at 9% 74%, rgba(99,102,241,.10), transparent 25%);
}
.hero::after {
  content: ""; position: absolute; z-index: 0; width: 360px; height: 360px;
  inset-block-start: -235px; inset-inline-start: 22%; border-radius: 42% 58% 62% 38%;
  background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(99,102,241,.08));
  transform: rotate(18deg); pointer-events: none;
}
.hero__copy { position: relative; }
.hero h1 { max-width: 700px; font-size: clamp(2.4rem, 4.4vw, 4.15rem); }
.hero__art { filter: drop-shadow(0 28px 38px rgba(15,23,42,.12)); transform: translateY(8px); }
.product-preview { position: relative; padding-bottom: 110px; }
.product-preview .app-window { margin-top: 50px; }
.app-window { border-radius: 18px; box-shadow: 0 30px 80px -32px rgba(3,105,161,.42), 0 0 0 1px rgba(15,23,42,.07); }
.app-window__bar { padding: 14px 18px; }
.features__grid { gap: 18px; }
.feature {
  border-color: #e6edf5; border-radius: 16px; text-align: start;
  box-shadow: 0 8px 24px rgba(15,23,42,.035);
}
.feature__ic { margin-inline: 0; }
.feature:hover { transform: translateY(-6px); box-shadow: 0 20px 42px rgba(15,23,42,.09); }
.why-lite { background: linear-gradient(180deg, #f8fbff, #f3f7fc); }
.why-lite__grid article { position: relative; overflow: hidden; border-radius: 14px; padding: 30px; }
.why-lite__grid article::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 44px; height: 3px; background: var(--brand-500); }
.pricing { background: #fff; }
.pricing-option { border-radius: 18px; padding: 34px; box-shadow: 0 12px 34px rgba(15,23,42,.06); }
.pricing-option--advanced { transform: translateY(-10px); border-color: var(--brand-300); box-shadow: 0 22px 52px rgba(3,105,161,.14); }
.choice-help__row { position: relative; overflow: hidden; padding: 38px 42px; border-radius: 18px; background: linear-gradient(125deg, #eef8ff, #f5f3ff); }
.choice-help__row::after { content: ""; position: absolute; width: 180px; height: 180px; inset-inline-end: -70px; inset-block-end: -115px; border-radius: 50%; background: rgba(14,165,233,.13); }
.choice-help__row > * { position: relative; z-index: 1; }

@media (max-width: 960px) {
  .hero__copy { text-align: center; }
  .hero h1, .hero__sub { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .pricing-option--advanced { transform: none; }
}

@media (max-width: 620px) {
  .hero h1 { font-size: clamp(2.15rem, 11vw, 3rem); }
  .product-preview { padding-bottom: 70px; }
  .feature { padding: 26px 22px; }
  .pricing-option { padding: 26px 22px; }
  .choice-help__row { padding: 28px 24px; }
}

/* ---------- Pricing page ---------- */
.pricing-page { background: #fff; }
.pricing-hero { padding: 140px 0 68px; background: linear-gradient(180deg, #f2f8fe 0%, #fff 100%); }
.pricing-hero h1 { max-width: 760px; margin-inline: auto; font-size: clamp(2.35rem, 4vw, 3.55rem); letter-spacing: -.045em; }
.pricing-hero .lead { margin-top: 17px; }
.pricing-page__plans { padding: 32px 0 78px; background: #fff; }
.pricing-page .pricing-options { max-width: 1040px; margin-top: 0; gap: 20px; align-items: stretch; }
.pricing-page .pricing-option {
  padding: 34px 35px 32px; border: 1px solid #dfe7f0; border-radius: 13px;
  background: #fff; box-shadow: 0 7px 24px rgba(15,23,42,.055); transform: none;
}
.pricing-page .pricing-option:hover { border-color: #c9d7e6; box-shadow: 0 11px 30px rgba(15,23,42,.075); transform: none; }
.pricing-page .pricing-option--advanced { border: 2px solid var(--brand-500); box-shadow: 0 9px 28px rgba(3,105,161,.10); transform: none; }
.pricing-page .pricing-option__badge {
  top: 16px; inset-inline-end: 16px; padding: 5px 9px;
  border-radius: 5px; background: var(--brand-700); font-size: .66rem; letter-spacing: .025em;
}
.pricing-page .pricing-option__top > span { color: var(--brand-700); font-size: .7rem; letter-spacing: .09em; }
.pricing-page .pricing-option__top h2 { margin: 9px 0 8px; color: var(--ink); font-size: 1.55rem; }
.pricing-page .pricing-option__top p { min-height: 52px; margin: 0; color: var(--muted); line-height: 1.6; }
.pricing-page .pricing-option__price {
  display: flex; margin: 25px 0 22px; padding: 0; align-items: center;
  border: 0; gap: 12px;
}
.pricing-page .pricing-option__price strong { color: var(--ink); font-size: clamp(2.65rem, 5vw, 3.55rem); font-weight: 750; line-height: 1; letter-spacing: -.05em; }
.pricing-page .pricing-option__price span { display: grid; color: var(--muted); font-size: .78rem; line-height: 1.25; }
.pricing-page .pricing-option__price span b { color: var(--ink-soft); font-size: .9rem; }
.pricing-option__included { margin-bottom: 14px; color: var(--ink); font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.pricing-page .pricing-option ul { margin-bottom: 30px; gap: 12px; }
.pricing-page .pricing-option li { padding-inline-start: 25px; color: var(--ink-soft); font-size: .91rem; line-height: 1.5; }
.pricing-page .pricing-option li::before { width: 17px; height: 17px; color: var(--brand-700); background: var(--brand-50); }
.pricing-page .plan-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 9px; }
.pricing-page .plan-actions .btn { display: inline-flex; min-height: 43px; margin: 0; align-items: center; justify-content: center; }
.pricing-notes {
  display: flex; max-width: 900px; margin: 31px auto 0; justify-content: center;
  color: var(--muted); gap: 28px; font-size: .82rem; font-weight: 600;
}
.pricing-notes span::before { content: "✓"; margin-inline-end: 7px; color: var(--brand-600); }
.pricing-help { padding: 70px 0 88px; background: var(--bg-soft); }
.pricing-help__inner { display: flex; max-width: 1040px; margin: auto; align-items: center; justify-content: space-between; gap: 44px; }
.pricing-help__inner > div { max-width: 720px; }
.pricing-help__inner h2 { margin: 10px 0 11px; }
.pricing-help__inner p { margin: 0; color: var(--muted); line-height: 1.7; }
.pricing-help__inner .btn { flex: 0 0 auto; }
@media (max-width: 760px) {
  .pricing-hero { padding: 108px 0 52px; }
  .pricing-page__plans { padding: 22px 0 58px; }
  .pricing-page .pricing-option { padding: 28px 24px 25px; }
  .pricing-page .pricing-option__top p { min-height: 0; }
  .pricing-notes { align-items: flex-start; flex-direction: column; gap: 8px; }
  .pricing-help { padding: 58px 0 66px; }
  .pricing-help__inner { align-items: flex-start; flex-direction: column; gap: 24px; }
}

/* Keep the pricing introduction compact so plans remain above the fold. */
.pricing-page .pricing-hero { padding: 112px 0 38px; }
.pricing-page .pricing-hero h1 { max-width: 680px; font-size: clamp(2rem, 3.4vw, 2.85rem); line-height: 1.08; }
.pricing-page .pricing-hero .lead { max-width: 650px; margin-inline: auto; font-size: 1rem; text-align: center; }
.pricing-page .essential-packages-section { padding-top: 40px; }
@media (max-width: 760px) {
  .pricing-page .pricing-hero { padding: 94px 0 28px; }
  .pricing-page .essential-packages-section { padding-top: 28px; }
}
@media (max-width: 430px) {
  .pricing-page .plan-actions { grid-template-columns: 1fr; }
  .pricing-page .pricing-option__badge { position: static; display: inline-block; width: fit-content; margin-bottom: 14px; }
}

/* ---------- Essential and Advanced POS packages ---------- */
.product-packages { overflow: hidden; background: #f8fafc; }
.product-packages__heading { max-width: 780px; }
.product-packages__heading h2 { margin: 10px 0 13px; }
.product-packages__grid {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  margin-top: 42px; align-items: stretch; gap: 26px;
}
.product-package {
  display: flex; min-width: 0; padding: 34px; flex-direction: column;
  border: 1px solid #dce5ef; border-radius: 16px; background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .055);
}
.product-package--essential { border-top: 4px solid var(--brand-500); }
.product-package--advanced { border-top: 4px solid var(--brand-700); }
.product-package__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.product-package__type { color: var(--brand-700); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.product-package__header h3 { margin: 7px 0 0; color: var(--ink); font-size: clamp(1.42rem, 2vw, 1.8rem); letter-spacing: -.025em; }
.product-package__status {
  display: inline-flex; padding: 7px 10px; align-items: center; flex: 0 0 auto; gap: 6px;
  border: 1px solid #dbe5ef; border-radius: 999px; color: var(--ink-soft); background: #f8fafc;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.product-package__status i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.product-package__status.is-live { border-color: #bbf7d0; color: #166534; background: #f0fdf4; }
.product-package__status.is-live i { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .12); }
.product-package__description { margin: 17px 0 24px; color: var(--muted); line-height: 1.68; }
.product-package__price { display: flex; margin-bottom: 25px; align-items: flex-end; gap: 12px; }
.product-package__price strong { color: var(--ink); font-size: 3.25rem; font-weight: 780; line-height: .9; letter-spacing: -.055em; }
.product-package__price span { display: grid; color: var(--muted); font-size: .76rem; line-height: 1.3; }
.product-package__price span b { color: var(--ink-soft); font-size: .9rem; }
.product-package__modules { padding: 22px 0; border-block: 1px solid #e8eef5; }
.product-package__modules-title { color: var(--ink); font-size: .73rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.product-package__modules ul { display: grid; margin: 17px 0 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; list-style: none; }
.product-package__modules li { position: relative; padding-inline-start: 22px; color: var(--ink-soft); font-size: .86rem; }
.product-package__modules li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--brand-600); font-weight: 800; }
.product-package__actions { display: grid; margin-top: auto; padding-top: 26px; grid-template-columns: 1fr; }
.product-package__actions .btn { min-height: 45px; margin: 0; justify-content: center; }
.product-package__buy { display: flex; width: 100%; align-items: center; gap: 9px; }
.advanced-package-list { display: grid; margin-bottom: 4px; gap: 12px; }
.advanced-package-plan { padding: 21px; border: 1px solid #dce7f1; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(15, 23, 42, .04); }
.advanced-package-plan__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px; }
.advanced-package-plan h4 { margin: 0; color: var(--ink); font-size: 1rem; }
.advanced-package-plan p { margin: 5px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.advanced-package-plan__price { text-align: end; }
.advanced-package-plan__price strong { display: block; color: var(--brand-700); font-size: 1.65rem; line-height: 1; letter-spacing: -.035em; }
.advanced-package-plan__price span { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.advanced-package-plan__modules { display: flex; margin-top: 15px; flex-wrap: wrap; gap: 6px; }
.advanced-package-plan__modules span { padding: 5px 8px; border: 1px solid #e2e8f0; border-radius: 6px; color: #334155; background: #f8fafc; font-size: .68rem; font-weight: 650; }
.advanced-package-plan__register { display: flex; min-height: 42px; margin-top: 18px; padding: 0 16px; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; color: #fff; background: var(--brand-600); font-size: .82rem; font-weight: 750; transition: background .18s ease, transform .18s ease; }
.advanced-package-plan__register:hover { color: #fff; background: var(--brand-700); transform: translateY(-1px); }
.advanced-package-list__empty { padding: 18px; border-radius: 12px; color: var(--muted); background: #f8fafc; text-align: center; }

@media (max-width: 900px) {
  .product-packages__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .product-packages__grid { margin-top: 30px; }
  .product-package { padding: 25px 21px; border-radius: 16px; }
  .product-package__header { flex-direction: column; gap: 12px; }
  .product-package__modules ul { grid-template-columns: 1fr; }
  .advanced-package-plan__top { grid-template-columns: 1fr; gap: 12px; }
  .advanced-package-plan__price { text-align: start; }
}

/* Subscription comparison layout */
.package-comparison-wrap { margin-top: 48px; overflow-x: auto; padding: 18px 10px 30px; }
.package-comparison {
  display: grid; min-width: 800px; grid-template-columns: 150px repeat(2, minmax(270px, 1fr));
  align-items: center; justify-content: center; gap: 0;
}
.package-comparison:has(.comparison-plan:nth-of-type(3)) { grid-template-columns: 140px repeat(3, minmax(245px, 1fr)); }
.package-features {
  display: grid; min-height: 510px; padding: 30px 18px; align-content: start;
  border: 1px solid #e1e8f0; border-radius: 16px 0 0 16px; background: #fff;
  box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
}
.package-features strong { color: var(--ink); font-size: .73rem; letter-spacing: .07em; text-transform: uppercase; }
.package-features__rule { width: 28px; height: 2px; margin: 10px 0 25px; background: var(--brand-500); }
.package-features span { display: flex; min-height: 48px; align-items: center; border-bottom: 1px solid #edf1f5; color: var(--muted); font-size: .73rem; line-height: 1.25; }
.comparison-plan {
  position: relative; display: flex; min-height: 550px; padding: 31px 27px 25px; flex-direction: column;
  border-block: 1px solid #e1e8f0; border-inline-end: 1px solid #e1e8f0; background: #fff;
  box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
}
.comparison-plan:last-child { border-radius: 0 16px 16px 0; }
.comparison-plan header { min-height: 126px; text-align: center; }
.comparison-plan__label { color: var(--brand-700); font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.comparison-plan h3 { margin: 10px 0 7px; color: var(--ink); font-size: 1.25rem; letter-spacing: -.025em; }
.comparison-plan header p { margin: 0 auto; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.comparison-plan__price { display: flex; min-height: 72px; align-items: center; justify-content: center; gap: 9px; color: var(--brand-600); }
.comparison-plan__price strong { font-size: 2.55rem; line-height: 1; letter-spacing: -.06em; }
.comparison-plan__price span { color: var(--muted); font-size: .64rem; line-height: 1.25; text-align: start; }
.comparison-plan ul { display: grid; margin: 15px 0 25px; padding: 0; gap: 0; list-style: none; }
.comparison-plan li { display: flex; min-height: 39px; align-items: center; gap: 9px; color: var(--ink-soft); font-size: .73rem; }
.comparison-plan li i { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--brand-500); font-size: .58rem; font-style: normal; font-weight: 800; }
.comparison-plan__buy {
  display: flex; width: 124px; min-height: 37px; margin: auto auto 0; align-items: center; justify-content: center;
  border-radius: 999px; color: #fff; background: var(--brand-600); font-size: .7rem; font-weight: 800; text-transform: uppercase;
}
.comparison-plan__buy:hover { color: #fff; background: var(--brand-700); transform: translateY(-1px); }
.comparison-plan--advanced {
  z-index: 2; min-height: 590px; padding-block: 42px 27px; border: 0; border-radius: 17px !important;
  color: #fff; background: linear-gradient(155deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 22px 45px rgba(2, 132, 199, .28); transform: translateY(-2px);
}
.comparison-plan--advanced .comparison-plan__label,
.comparison-plan--advanced h3,
.comparison-plan--advanced header p,
.comparison-plan--advanced .comparison-plan__price,
.comparison-plan--advanced .comparison-plan__price span,
.comparison-plan--advanced li { color: #fff; }
.comparison-plan--advanced header p,
.comparison-plan--advanced .comparison-plan__price span { opacity: .82; }
.comparison-plan--advanced li i { color: var(--brand-700); background: #fff; }
.comparison-plan--advanced .comparison-plan__buy { color: var(--brand-700); background: #fff; }
.comparison-plan--advanced .comparison-plan__buy:hover { color: var(--brand-900); background: #f8fafc; }
.comparison-plan__popular {
  position: absolute; inset-block-start: 13px; inset-inline: 0; color: rgba(255,255,255,.82);
  font-size: .58rem; font-weight: 750; letter-spacing: .1em; text-align: center; text-transform: uppercase;
}

@media (max-width: 760px) {
  .package-comparison-wrap { overflow: visible; padding-inline: 0; }
  .package-comparison, .package-comparison:has(.comparison-plan:nth-of-type(3)) { display: grid; min-width: 0; grid-template-columns: 1fr; gap: 18px; }
  .package-features { display: none; }
  .comparison-plan, .comparison-plan--advanced { min-height: 0; padding: 30px 24px 24px; border: 1px solid #e1e8f0; border-radius: 15px !important; transform: none; }
  .comparison-plan header { min-height: 0; }
  .comparison-plan__price { margin: 18px 0 8px; }
  .comparison-plan__buy { width: 100%; margin-top: 8px; }
  .comparison-plan__popular { position: static; margin-bottom: 12px; }
}

/* Separate Essential and Advanced POS package sections */
.pos-package-sections { background: #fff; }
.essential-packages-section { background: linear-gradient(180deg, #fff 0%, #f5faff 100%); }
.advanced-packages-section { border-top: 1px solid #e7eef6; background: #f8fafc; }
.package-section-heading { display: flex; margin-bottom: 38px; align-items: center; justify-content: center; text-align: center; }
.package-section-heading > div { max-width: 720px; margin-inline: auto; }
.package-section-heading h2 { margin: 9px 0 11px; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.045em; }
.package-section-heading p { max-width: 680px; margin: 0 auto; color: var(--muted); line-height: 1.7; text-align: center; }
.package-section-number { color: #d8e8f5; font-size: clamp(3.4rem, 7vw, 6rem); font-weight: 800; line-height: .8; letter-spacing: -.08em; }
.essential-package-card {
  display: grid; overflow: hidden; grid-template-columns: minmax(270px, .8fr) minmax(360px, 1.2fr);
  border: 1px solid #dce7f1; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, .075);
}
.essential-package-card__intro { padding: 42px; color: #fff; background: linear-gradient(145deg, var(--brand-600), var(--brand-800)); }
.package-card-label { display: inline-flex; color: var(--brand-700); font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.essential-package-card .package-card-label { color: rgba(255,255,255,.78); }
.essential-package-card h3 { margin: 10px 0 12px; color: #fff; font-size: 1.8rem; letter-spacing: -.035em; }
.essential-package-card__intro > p { margin: 0; color: rgba(255,255,255,.8); font-size: .88rem; line-height: 1.7; }
.package-card-price { display: flex; margin: 28px 0; align-items: flex-end; gap: 11px; }
.package-card-price strong { color: var(--ink); font-size: 3.35rem; font-weight: 780; line-height: .9; letter-spacing: -.06em; }
.package-card-price span { display: grid; color: var(--muted); font-size: .7rem; line-height: 1.25; }
.package-card-price span b { color: var(--ink-soft); font-size: .86rem; }
.essential-package-card .package-card-price strong,
.essential-package-card .package-card-price span,
.essential-package-card .package-card-price span b { color: #fff; }
.essential-package-card .package-card-price span { opacity: .82; }
.package-buy-button { display: inline-flex; min-width: 135px; min-height: 43px; padding: 0 20px; align-items: center; justify-content: center; gap: 9px; border-radius: 9px; color: #fff; background: var(--brand-600); font-size: .78rem; font-weight: 800; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.package-buy-button:hover, .package-buy-button:focus, .package-buy-button:active { color: #fff; background: var(--brand-700); text-decoration: none; transform: translateY(-2px); }
.essential-package-card .package-buy-button { color: var(--brand-800); background: #fff; }
.essential-package-card .package-buy-button:hover { color: var(--brand-900); background: #f1f7fc; }
.essential-package-card__features { padding: 42px; }
.package-feature-title { color: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.essential-package-card__features ul, .advanced-package-card__features ul { display: grid; margin: 22px 0 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 22px; list-style: none; }
.essential-package-card__features li, .advanced-package-card__features li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-soft); font-size: .82rem; line-height: 1.4; }
.essential-package-card__features li i, .advanced-package-card__features li i { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--brand-500); font-size: .62rem; font-style: normal; font-weight: 800; }
.advanced-packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); align-items: stretch; gap: 22px; }
.advanced-package-card {
  position: relative; display: flex; min-width: 0; padding: 30px; flex-direction: column;
  border: 1px solid #dce5ef; border-radius: 16px; background: #fff; box-shadow: 0 9px 28px rgba(15, 23, 42, .055);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.advanced-package-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 30px; height: 3px; border-radius: 0 0 4px 4px; background: var(--brand-500); }
.advanced-package-card:hover { border-color: #bad9ed; box-shadow: 0 17px 38px rgba(3, 105, 161, .11); transform: translateY(-5px); }
.advanced-package-card header { min-height: 132px; }
.advanced-package-card h3 { margin: 9px 0 9px; color: var(--ink); font-size: 1.35rem; letter-spacing: -.03em; }
.advanced-package-card header p { margin: 0; color: var(--muted); font-size: .79rem; line-height: 1.55; }
.advanced-package-card .package-card-price { padding-bottom: 24px; border-bottom: 1px solid #e8eef4; }
.advanced-package-card__features { margin-bottom: 27px; }
.advanced-package-card__features ul { grid-template-columns: 1fr; gap: 11px; }
.advanced-package-card .package-buy-button { width: 100%; margin-top: auto; }
.advanced-packages-empty { padding: 40px; border: 1px dashed #cbd9e6; border-radius: 16px; background: #fff; text-align: center; }
.advanced-packages-empty p { color: var(--muted); }

@media (max-width: 780px) {
  .package-section-heading { align-items: flex-start; }
  .package-section-number { display: none; }
  .essential-package-card { grid-template-columns: 1fr; }
  .essential-package-card__intro, .essential-package-card__features { padding: 32px 27px; }
}
@media (max-width: 480px) {
  .essential-package-card__features ul { grid-template-columns: 1fr; }
  .advanced-packages-grid { grid-template-columns: 1fr; }
  .advanced-package-card { padding: 27px 23px; }
}

/* Three-column package grids and overflow carousel */
.essential-packages-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.essential-package-card {
  display: flex; overflow: visible; padding: 30px; flex-direction: column; grid-template-columns: none;
  border-radius: 16px; box-shadow: 0 9px 28px rgba(15, 23, 42, .055);
}
.essential-package-card h3 { margin: 9px 0; color: var(--ink); font-size: 1.35rem; }
.essential-package-card .package-card-label { color: var(--brand-700); }
.essential-package-card .package-card-price strong,
.essential-package-card .package-card-price span,
.essential-package-card .package-card-price span b { color: inherit; }
.essential-package-card .package-card-price strong { color: var(--ink); }
.essential-package-card .package-card-price span { color: var(--muted); opacity: 1; }
.essential-package-card .package-card-price span b { color: var(--ink-soft); }
.essential-package-card .package-buy-button { width: 100%; margin-top: auto; color: #fff; background: var(--brand-600); }
.essential-package-card .package-buy-button:hover { color: #fff; background: var(--brand-700); }
.package-slider { position: relative; }
.package-slider__controls { display: flex; margin: -18px 0 18px; justify-content: flex-end; gap: 8px; }
.package-slider__controls button {
  display: grid; width: 42px; height: 42px; padding: 0; place-items: center;
  border: 1px solid #cfdce8; border-radius: 9px; color: var(--brand-700); background: #fff;
  cursor: pointer; font-size: 1rem; transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.package-slider__controls button:hover { border-color: var(--brand-600); color: #fff; background: var(--brand-600); }
.package-slider .advanced-packages-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.package-slider.is-slider { overflow: hidden; }
.package-slider.is-slider .advanced-packages-grid,
.package-slider.is-slider .essential-packages-grid {
  display: flex; overflow-x: auto; padding: 5px 2px 18px; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.package-slider.is-slider .advanced-packages-grid::-webkit-scrollbar,
.package-slider.is-slider .essential-packages-grid::-webkit-scrollbar { display: none; }
.package-slider.is-slider .advanced-package-card { min-width: calc((100% - 44px) / 3); scroll-snap-align: start; }

@media (max-width: 900px) {
  .essential-packages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-slider .advanced-packages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-slider.is-slider .advanced-package-card { min-width: calc((100% - 22px) / 2); }
}
@media (max-width: 600px) {
  .essential-packages-grid, .package-slider .advanced-packages-grid { grid-template-columns: 1fr; }
  .package-slider.is-slider .advanced-package-card { min-width: 88%; }
  .package-slider__controls { margin-top: 0; }
}

/* Clean dashboard screenshot without simulated browser chrome. */
.product-preview .dashboard-preview {
  position: relative; margin: 42px 0 0; padding: 0; overflow: hidden;
  border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .09);
}
.product-preview .dashboard-preview img { display: block; width: 100%; height: auto; }
@media (max-width: 620px) {
  .product-preview .dashboard-preview { margin-top: 30px; border-radius: 9px; box-shadow: 0 10px 28px rgba(15, 23, 42, .08); }
}

/* Keep public section hierarchy clean: headings stand without eyebrow labels. */
.eyebrow,
.package-card-label { display: none !important; }