/* explore IT — shadcn/ui design layer (2026-11-05). Loaded after site.css.
   Same tokens and component specs as shadcn/ui "zinc", written as plain CSS: the site is PHP, no React. */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --radius: .5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --header-h: 64px;
}

/* ---------- Base ---------- */
html, :host, body, .font-sans, button, input, select, textarea { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-feature-settings: "cv11", "ss01"; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important; border-radius: calc(var(--radius) - 2px); }
::selection { background: hsl(var(--foreground)); color: hsl(var(--background)); }

/* ---------- Old palette → zinc (utilities used in the markup) ---------- */
.text-ink-950, .text-ink-800, .text-brand-600, .text-brand-700 { color: hsl(var(--foreground)); }
.text-ink-700 { color: #3f3f46; }
.text-ink-600, .text-ink-500 { color: hsl(var(--muted-foreground)); }
.text-ink-400 { color: #a1a1aa; }
.text-ink-300 { color: #d4d4d8; }
.hover\:text-brand-700:hover, .hover\:text-brand-800:hover, .hover\:text-ink-950:hover, .group:hover .group-hover\:text-brand-700 { color: hsl(var(--foreground)); }
.border-ink-100, .border-ink-200, .border-ink-950\/15 { border-color: hsl(var(--border)); }
.border-ink-950 { border-color: hsl(var(--foreground)); }
.bg-paper { background-color: #fafafa; }
.bg-paper-2, .bg-brand-50 { background-color: hsl(var(--muted)); }
.bg-night, .bg-ink-950, .bg-brand-600 { background-color: hsl(var(--primary)); }
.text-brand-700.bg-brand-50 { color: hsl(var(--foreground)); }
.font-extrabold { font-weight: 700; }
.font-mono { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 13px; }
.shadow-soft { box-shadow: none; }
.rounded-2xl, .rounded-\[22px\], .rounded-\[24px\] { border-radius: .75rem; }
.rounded-xl { border-radius: .625rem; }
.rounded-md, .rounded-lg { border-radius: var(--radius); }
.g-text, .g-text-dark { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }

/* ---------- Layout + type ---------- */
.section { position: relative; }
.bg-paper.section, .sc-band { border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.sc-band { background: #fafafa; }
.h-display { font-weight: 700; letter-spacing: -.025em; font-size: clamp(2.1rem, 4.2vw, 3.25rem); line-height: 1.1; }
.h-section { font-weight: 600; letter-spacing: -.025em; font-size: clamp(1.7rem, 2.8vw, 2.25rem); line-height: 1.2; }
.h-card { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.lead { font-size: 1rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
@media (min-width: 640px) { .lead { font-size: 1.0625rem; line-height: 1.65; } }

.h-4\.5 { height: 1rem; }
.w-4\.5 { width: 1rem; }
.sc-band .kicker { display: inline-flex; width: fit-content; border-radius: calc(var(--radius) - 2px); background: hsl(var(--secondary)); color: hsl(var(--foreground)); padding: .125rem .625rem; font-size: 12px; font-weight: 500; line-height: 1.25rem; }

/* Small label */
.kicker { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); gap: 0; }
.kicker::before { display: none; }
.kicker b { color: inherit; font-weight: 500; }
/* Section labels read as Badge (variant="secondary") */
.sec-head > .kicker, .kicker.justify-center, .rule-grid .kicker, .sc-badge {
  display: inline-flex; width: fit-content; align-items: center; border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--secondary)); color: hsl(var(--foreground)); padding: .125rem .625rem; font-size: 12px; font-weight: 500; line-height: 1.25rem;
}
.sc-badge { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* ---------- Button ---------- */
.btn-primary, .btn-line, .btn-light, .btn-line-light, .btn-dark, .page-head .btn-line, .page-head .btn-dark, .prose-cms .m-btn {
  height: 2.5rem; padding-left: 1rem; padding-right: 1rem; gap: .5rem; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; box-shadow: none; transform: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary, .btn-primary:hover, .page-head .btn-dark, .prose-cms .m-btn { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-sm); transform: none; }
.btn-primary:hover, .page-head .btn-dark:hover, .prose-cms .m-btn:hover { background: hsl(var(--primary) / .9); box-shadow: var(--shadow-sm); transform: none; }
.btn-line, .btn-line-light, .page-head .btn-line {
  background: hsl(var(--background)); border: 1px solid hsl(var(--input)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm);
}
.btn-line:hover, .btn-line-light:hover, .page-head .btn-line:hover { background: hsl(var(--secondary)); border-color: hsl(var(--input)); color: hsl(var(--foreground)); }
.btn-light { background: hsl(var(--primary-foreground)); color: hsl(var(--primary)); }
.btn-light:hover { background: hsl(var(--primary-foreground) / .9); }
.btn-sm { height: 2.25rem; padding-left: .875rem; padding-right: .875rem; font-size: 13.5px; }
.link-arrow, .page-head .link-arrow { font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); gap: .375rem; text-underline-offset: 4px; }
.link-arrow:hover, .page-head .link-arrow:hover { color: hsl(var(--foreground)); text-decoration: underline; }
/* Icon buttons */
.sc-icon-btn, .s-arrow, .to-top {
  display: grid; place-items: center; height: 2.25rem; width: 2.25rem; border-radius: var(--radius);
  border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); transition: background-color .15s;
}
.sc-icon-btn:hover, .s-arrow:hover, .to-top:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); transform: none; }
/* Icon tile */
.sc-ic, .svc-ic, .pkg-ic, .pkg.is-alt .pkg-ic, .sector-ic, .chip-ic {
  display: grid; place-items: center; flex-shrink: 0; height: 2.25rem; width: 2.25rem; border-radius: var(--radius);
  border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm);
}

/* ---------- Header / NavigationMenu ---------- */
.site-header { border-color: hsl(var(--border)); background: hsl(var(--background) / .95); }
.site-header.is-scrolled { box-shadow: none; }
.site-header > .container-x { height: var(--header-h); }
.wordmark { color: hsl(var(--foreground)); gap: .5rem; }
.wordmark img { height: 1.75rem; width: 1.75rem; }
.wordmark span { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.nav-link { height: 2.25rem; padding-left: .75rem; padding-right: .75rem; border-radius: var(--radius); font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); }
.nav-link:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.nav-link.is-active { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.dropdown-panel { border-radius: var(--radius); border-color: hsl(var(--border)); box-shadow: var(--shadow-md); overflow: hidden; }
.dd-item { border-radius: calc(var(--radius) - 2px); padding: .5rem .625rem; font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); }
.dd-row { border-radius: calc(var(--radius) - 2px); padding: .625rem; }
.dd-item:hover, .dd-row:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.dd-row b { font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); }
.dd-row small { font-size: 13px; color: hsl(var(--muted-foreground)); }
.mega-a { font-size: 14px; color: hsl(var(--muted-foreground)); }
.mega-a:hover { color: hsl(var(--foreground)); }
.dropdown-panel .kicker { font-weight: 600; color: hsl(var(--foreground)); }
.dropdown-panel > .bg-paper { border-radius: 0; background: #fafafa; }

/* Sheet (mobile menu) */
.mobile-nav-backdrop { background: rgb(0 0 0 / .5); }
.mobile-nav-panel { max-width: 24rem; border-left: 1px solid hsl(var(--border)); }
.mobile-nav-panel > .flex:first-child { height: var(--header-h); }
.m-link { font-size: 15px; font-weight: 500; color: hsl(var(--foreground)); border-color: hsl(var(--border)); padding-top: .875rem; padding-bottom: .875rem; }
.m-sub { font-size: 14px; color: hsl(var(--muted-foreground)); }

/* ---------- Page heads + hero: light, with a faint grid ---------- */
.hero, .page-head { background: hsl(var(--background)); color: hsl(var(--foreground)); border-bottom: 1px solid hsl(var(--border)); }
.hero { padding-top: var(--header-h) !important; }
.band-grid {
  background-image: linear-gradient(90deg, hsl(var(--border) / .55) 1px, transparent 0), linear-gradient(180deg, hsl(var(--border) / .55) 1px, transparent 0);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 75% 0, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 75% 0, #000 10%, transparent 65%);
}
.band-arc, .s-ring { display: none; }
.page-head .h-display, .page-head h1, .page-head .text-white { color: hsl(var(--foreground)); }
.page-head h1:not(.h-display) { font-weight: 700; letter-spacing: -.025em; font-size: clamp(2.1rem, 4.2vw, 3.25rem) !important; line-height: 1.1 !important; }
.page-head .lead { color: hsl(var(--muted-foreground)); }
.page-head .kicker { color: hsl(var(--muted-foreground)); }
/* Breadcrumb */
.crumbs, .page-head .crumbs { font-size: 14px; font-weight: 400; color: hsl(var(--muted-foreground)); }
.page-head .crumbs a:hover, .page-head .crumbs span:last-child, .crumbs a:hover { color: hsl(var(--foreground)); }
.page-head .text-white\/30, .crumbs .text-white\/30 { color: #a1a1aa; }

/* Home slider */
.slide { background: none; }
@media (min-width: 1024px) { .slide { min-height: clamp(520px, calc(100vh - 190px), 620px); } }
.s-kick {
  gap: .5rem; border-radius: 9999px; border-color: hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground));
  padding: .25rem .75rem; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: var(--shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.s-kick i { background: hsl(var(--foreground)); box-shadow: none; }
.s-title { color: hsl(var(--foreground)); font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.1; }
.s-title-xl { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.07; }
.s-prod { color: hsl(var(--foreground)); font-size: 14px; font-weight: 500; }
.s-desc, .s-title-xl + .s-desc { color: hsl(var(--muted-foreground)); font-size: 16px; line-height: 1.65; }
.s-points { color: hsl(var(--foreground)); font-size: 14px; font-weight: 400; gap: .5rem; }
.s-points li::before { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); height: 1.125rem; width: 1.125rem; font-size: 10px; font-weight: 700; }
.s-img { filter: drop-shadow(0 20px 30px rgb(0 0 0 / .12)); }
/* Floating stats read as small Cards */
.chip {
  animation: none; border-radius: var(--radius); border-color: hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground));
  box-shadow: var(--shadow-md); padding: .5rem .75rem; gap: .625rem; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.chip-ic { height: 2rem; width: 2rem; box-shadow: none; background: hsl(var(--secondary)); border-color: transparent; }
.chip small { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); }
.chip b { font-size: 14px; font-weight: 600; }
/* TabsList */
.slider [role="tablist"], .sc-tabs { border-radius: var(--radius); background: hsl(var(--muted)); padding: .25rem; gap: .25rem; }
.sc-tabs { display: inline-flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }
.s-tab { border: 0; background: transparent; border-radius: calc(var(--radius) - 2px); padding: .4375rem .75rem; text-align: center; color: hsl(var(--muted-foreground)); }
.s-tab:hover { background: transparent; }
.s-tab.is-on { background: hsl(var(--background)); box-shadow: var(--shadow-sm); }
.s-tab-n { display: block; font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.s-tab.is-on .s-tab-n { color: hsl(var(--foreground)); }
.s-tab-t { margin-top: 0; font-size: 13.5px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.s-tab.is-on .s-tab-t, .s-tab:hover .s-tab-t { color: hsl(var(--foreground)); }
@media (min-width: 640px) { .s-tab-n { display: none; } }
.s-bar { height: 2px; background: transparent; }
.s-bar i, .s-tab.is-on .s-bar i { background: hsl(var(--foreground)); }
.s-tab.is-done .s-bar i { background: transparent; }

/* Logos strip */
.m-logo { font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); }

/* ---------- Card family ---------- */
.card, .card-g, .quote, .step, .facts > div, .sector, .svc, .pkg, .feat-group, .media-card, .faq, .terms, .rel-card, .price-card, .rule-grid > *, #contactForm {
  border: 1px solid hsl(var(--border)); border-radius: .75rem; background: hsl(var(--card)); box-shadow: var(--shadow-sm); color: hsl(var(--foreground));
}
.card-g::before, .quote::before, .step::before, .facts > div::before, .pkg::before { display: none; }
.card:hover, .sector:hover, .svc:hover, .pkg:hover, .media-card:hover, .rel-card:hover, .price-card:hover, .rule-grid > :hover {
  transform: none; box-shadow: var(--shadow-sm); border-color: #a1a1aa;
}
.rule-grid > .hover\:\!bg-white:hover { background: hsl(var(--card)) !important; }
#contactForm { padding: 1.5rem; }

/* Stats */
.facts > div { padding: 1.25rem; }
.facts dt { font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); }
.facts dd { margin-top: .375rem; font-size: 1.875rem; font-weight: 700; letter-spacing: -.025em; color: hsl(var(--foreground)); }
@media (min-width: 640px) { .facts dd { font-size: 2.125rem; } }
.tile-n { background: hsl(var(--secondary)); color: hsl(var(--foreground)); border-radius: calc(var(--radius) - 2px); box-shadow: none; padding: .125rem .5rem; font-weight: 500; }

/* Sector cards */
.sector { overflow: hidden; }
.sector-head { color: hsl(var(--foreground)); background: #fafafa; border-bottom: 1px solid hsl(var(--border)); min-height: 0; padding: 1.25rem 1.25rem 0; }
.sector-head::before { display: none; }
.sector-n { top: 1.25rem; right: 1.25rem; background: hsl(var(--secondary)); color: hsl(var(--foreground)); border-radius: calc(var(--radius) - 2px); padding: .125rem .5rem; font-weight: 500; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sector-head h3 { margin-top: .875rem; font-size: 1.0625rem; font-weight: 600; }
.sector-shot { margin-top: .875rem; }
.sector-shot img { filter: drop-shadow(0 8px 12px rgb(0 0 0 / .14)); }
.sector-shot.is-flat { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; box-shadow: none; }
.sector-body { padding: .75rem; }
.sector-link { border-radius: calc(var(--radius) - 2px); padding: .5rem; font-size: 14px; font-weight: 400; color: hsl(var(--foreground)); gap: .625rem; }
.sector-link:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.sector-link .dot, .feat-list .dot { background: #a1a1aa; height: .3125rem; width: .3125rem; }
.sector-link svg { color: #a1a1aa; }
.sector-link:hover svg { color: hsl(var(--foreground)); transform: none; }
.sector-more { padding: .75rem .5rem .25rem; font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); gap: .375rem; }
.sector-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.sector-cta { border: 1px solid hsl(var(--border)); border-radius: .75rem; background: hsl(var(--card)); box-shadow: var(--shadow-sm); padding: 1.5rem; }
.sector-cta .band-grid { display: none; }
.sector-cta .text-white { color: hsl(var(--foreground)); }
.sector-cta .text-white\/65 { color: hsl(var(--muted-foreground)); }
.sector-cta h3 { font-size: 1.125rem !important; font-weight: 600; }

/* Service cards */
.svc { padding: 1.25rem; gap: 1rem; }
.svc h3 { font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); }
.svc p { font-size: 14px; color: hsl(var(--muted-foreground)); }
.svc .go { font-size: 13.5px; font-weight: 500; color: hsl(var(--foreground)); }
.svc:hover .go svg { transform: none; }
.svc.is-dark, .svc.is-dark:hover { background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.svc.is-dark h3, .svc.is-dark .go { color: hsl(var(--primary-foreground)); }
.svc.is-dark p { color: #a1a1aa; }
.svc.is-dark .svc-ic { background: #27272a; border-color: #3f3f46; color: hsl(var(--primary-foreground)); box-shadow: none; }

/* Steps */
.timeline::before { background: hsl(var(--border)); top: 1.125rem; }
.tl-step .n, .tl-step .\!n { height: 2.25rem; width: 2.25rem; font-size: 14px; font-weight: 600; background: hsl(var(--background)) !important; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); }
.tl-step h3 { margin-top: 1rem; font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); }
.tl-step p { font-size: 14px; color: hsl(var(--muted-foreground)); }
.tl-row { border-color: hsl(var(--border)); }
.tl-year { color: hsl(var(--muted-foreground)); font-weight: 500; letter-spacing: 0; }

/* Testimonials */
.quote { padding: 1.5rem; }
.quote-mark { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #d4d4d8; font-size: 3rem; font-weight: 600; }
.quote blockquote, .quote blockquote:is(p) { font-size: 1rem; line-height: 1.65; color: hsl(var(--foreground)); }
@media (min-width: 640px) { .quote blockquote { font-size: 1.0625rem; } }
.quote figcaption { border-color: hsl(var(--border)); margin-top: 1.25rem; padding-top: 1.25rem; }
.quote figcaption .font-bold { font-weight: 600; font-size: 14px; }

/* ---------- Tabs (sector filter, client tabs) ---------- */
.sec-tab { border: 0; background: transparent; border-radius: calc(var(--radius) - 2px); padding: .375rem .75rem; font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.sec-tab:hover { color: hsl(var(--foreground)); }
.sec-tab.is-on { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); }
.sec-n, .sec-tab.is-on .sec-n { font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.jumpbar { border-color: hsl(var(--border)); top: var(--header-h); }
.jump-a { font-weight: 500; color: hsl(var(--muted-foreground)); border-color: transparent; }
.jump-a:hover, .jump-a.is-on { color: hsl(var(--foreground)); }
.jump-a.is-on { border-color: hsl(var(--foreground)); }

/* ---------- Input / Label ---------- */
.field { height: 2.5rem; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background: hsl(var(--background)); padding-top: .5rem; padding-bottom: .5rem; padding-right: .75rem; font-size: 14px; color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); }
.field:not(.pl-11) { padding-left: .75rem; }
textarea.field { height: auto; min-height: 8rem; }
.field::placeholder { color: hsl(var(--muted-foreground)); }
.field:focus { border-color: hsl(var(--input)); outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.label { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: hsl(var(--foreground)); }

/* ---------- Product page ---------- */
.p-badge { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: .625rem; box-shadow: var(--shadow-sm); height: 3rem; width: 3rem; }
.p-badge .text-white { color: hsl(var(--foreground)); }
.glance { border-color: hsl(var(--border)); column-gap: 2rem; padding-top: 1.25rem; }
.glance dt { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); }
.glance dd { margin-top: 0; font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); }
.p-frame { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .75rem; box-shadow: var(--shadow-md); backdrop-filter: none; -webkit-backdrop-filter: none; }
.p-frame .dots i, .media-frame .dots i { background: #d4d4d8; }
.pkg { padding: 1.5rem; }
.pkg-head h3 { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); }
.pkg-price .cur { font-size: 1.125rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.pkg-price .amt { font-size: 2.25rem; font-weight: 700; letter-spacing: -.025em; color: hsl(var(--foreground)); }
.pkg-price .per, .pkg-list small { font-weight: 400; color: hsl(var(--muted-foreground)); }
.pkg-label { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); }
.pkg-list { border-color: hsl(var(--border)); font-size: 14px; color: hsl(var(--foreground)); }
.pkg-list li svg { color: hsl(var(--foreground)); }
.pkg-list b { font-weight: 600; color: hsl(var(--foreground)); }
.feat-group { padding: 1.5rem; }
.feat-group h3 { font-size: 1rem !important; font-weight: 600; }
.feat-list { gap: .125rem .75rem; }
.feat-list li { background: none; border-radius: 0; padding: .375rem 0; font-size: 14px; font-weight: 400; color: hsl(var(--foreground)); }
.media-card { overflow: hidden; }
.media-frame { background: hsl(var(--muted)); }
.group:hover .media-frame img { transform: none; }
.media-frame.is-browser img { border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-md); }
.media-play, .group:hover .media-play { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); height: 2.75rem; width: 2.75rem; box-shadow: var(--shadow-md); transform: none; }
.media-cap { padding: 1rem 1.25rem; border-top: 1px solid hsl(var(--border)); }
.media-cap b { font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); }
.media-cap small { color: hsl(var(--muted-foreground)); }
.media-cap svg, .media-card:hover .media-cap svg { color: #a1a1aa; height: 1rem; width: 1rem; }
.group:hover .media-cap svg { transform: none; }
/* Accordion */
.faq details { border-color: hsl(var(--border)); }
.faq summary { font-size: 14.5px; font-weight: 500; padding-top: 1rem; padding-bottom: 1rem; color: hsl(var(--foreground)); }
.faq summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq-plus { background: none; height: 1rem; width: 1rem; color: hsl(var(--muted-foreground)); }
.faq-plus svg { transition: transform .2s; }
.faq details[open] .faq-plus svg { transform: rotate(180deg); }
.faq .prose-cms { font-size: 14px !important; color: hsl(var(--muted-foreground)); padding-bottom: 1rem; }
.terms { font-size: 14px; padding: 1.5rem; }
.terms ul li::before { background: #a1a1aa; }
.rel-card b { font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); }
.rel-card:hover b { color: hsl(var(--foreground)); }
.rel-card small { color: hsl(var(--muted-foreground)); }
.prow-ic { border-color: hsl(var(--border)); border-radius: var(--radius); }
.page-head .prow-ic { background: hsl(var(--background)); border-color: hsl(var(--border)); }

/* Pricing cards */
.price-card { padding: 1.5rem; }
.price-card.is-featured { background: hsl(var(--card)); border: 2px solid hsl(var(--primary)); box-shadow: var(--shadow-md); }
.price-card .text-\[2\.6rem\] { font-size: 2.25rem; font-weight: 700; letter-spacing: -.025em; }
.price-li { font-size: 14px; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }

/* Client logos: full colour on hover stays as it was */
.logo-cell span { font-weight: 500; color: hsl(var(--muted-foreground)); }

/* ---------- CMS content ---------- */
.prose-cms { font-size: 15.5px; color: #3f3f46; }
.prose-cms h1, .prose-cms h2, .prose-cms h3 { font-weight: 600; letter-spacing: -.02em; color: hsl(var(--foreground)); }
.prose-cms h4, .prose-cms h5, .prose-cms h6 { font-weight: 600; color: hsl(var(--foreground)); }
.prose-cms h2 { font-size: 1.5rem; }
.prose-cms h3 { font-size: 1.25rem; }
.prose-cms a { font-weight: 500; color: hsl(var(--foreground)); text-decoration-color: #a1a1aa; }
.prose-cms a:hover { text-decoration-color: hsl(var(--foreground)); }
.prose-cms ul li::before { background: #a1a1aa; height: .375rem; width: .375rem; top: .7em; }
.prose-cms ul li { padding-left: 1.25rem; }
.prose-cms img { border-radius: var(--radius); }
.prose-cms th, .prose-cms b, .prose-cms strong { font-weight: 600; color: hsl(var(--foreground)); }
.prose-cms th, .prose-cms td, .prose-cms hr { border-color: hsl(var(--border)); }
.prose-features ul li { border-radius: var(--radius); border-color: hsl(var(--border)); box-shadow: var(--shadow-sm); padding-left: 2.25rem !important; }

/* ---------- CTA: the one dark surface on the page ---------- */
.cta-panel { background: hsl(var(--primary)); border-radius: .75rem; color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-md); }
.cta-panel .band-grid { display: none; }
.cta-panel .kicker { color: #a1a1aa; }
.cta-panel h2 { font-size: clamp(1.7rem, 2.8vw, 2.25rem); font-weight: 600; line-height: 1.2; }
.cta-panel .text-white\/80 { color: #a1a1aa; }
.cta-panel p.text-\[16px\] { font-size: 15.5px; }
.cta-panel .btn-line-light { background: transparent; border-color: #3f3f46; color: hsl(var(--primary-foreground)); box-shadow: none; }
.cta-panel .btn-line-light:hover { background: #27272a; color: hsl(var(--primary-foreground)); }
.cta-panel dl > div { background: #18181b; border: 1px solid #27272a; border-radius: var(--radius); padding: .75rem 1rem; }
.cta-panel dl .bg-white\/15 { background: #27272a; border-radius: calc(var(--radius) - 2px); height: 2.25rem; width: 2.25rem; }
.cta-panel dt { font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #a1a1aa; }
.cta-panel dd a { font-size: 15px; font-weight: 500; }

/* ---------- Footer ---------- */
.sc-footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--muted-foreground)); }
.foot-h { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: hsl(var(--foreground)); }
.foot-a { font-size: 14px; color: hsl(var(--muted-foreground)); }
.foot-a:hover { color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Floating buttons ---------- */
.wa-float { background: #25d366; color: #fff; box-shadow: var(--shadow-md); }
.to-top { position: fixed; }
.to-top.is-visible { box-shadow: var(--shadow-md); }
.sc-badge { white-space: nowrap; flex-shrink: 0; }

/* ================ Colour layer (2026-11-05) — logo blue + flat sector tints, no gradients ================ */
:root {
  --primary: 207.5 100% 37.6%;           /* logo blue #0068c0 */
  --primary-foreground: 0 0% 100%;
  --ring: 207.5 100% 37.6%;
  --accent-text: #0b5fae;
  --accent-soft: #eff6ff;
  --accent-line: #bfdbfe;
  --deep: #0a4a8a;
  --c1: #0b5fae; --c2: #0068c0; --tint: #eff6ff;
}
[data-sector="retail"]    { --c1: #047857; --tint: #ecfdf5; }
[data-sector="education"] { --c1: #6d28d9; --tint: #f5f3ff; }
[data-sector="health"]    { --c1: #0e7490; --tint: #ecfeff; }
[data-sector="business"]  { --c1: #92400e; --tint: #fef3e2; }

/* Text + small accents */
.text-brand-600, .text-brand-700, .hover\:text-brand-700:hover, .hover\:text-brand-800:hover, .group:hover .group-hover\:text-brand-700 { color: var(--accent-text); }
.bg-brand-50 { background-color: var(--accent-soft); }
.text-brand-700.bg-brand-50 { color: var(--accent-text); }
.bg-paper, .sc-band, .dropdown-panel > .bg-paper { background-color: #f8fafc; }
.link-arrow, .page-head .link-arrow, .link-arrow:hover, .page-head .link-arrow:hover { color: var(--accent-text); }
.prose-cms a { color: var(--accent-text); text-decoration-color: var(--accent-line); }
.prose-cms a:hover { text-decoration-color: var(--accent-text); }
.prose-cms ul li::before { background: hsl(var(--primary)); }
.sec-head > .kicker, .kicker.justify-center, .sc-band .kicker { background: var(--accent-soft); color: var(--accent-text); }
.sc-badge { background: hsl(var(--primary)); color: #fff; }
.page-head .kicker { color: var(--accent-text); font-weight: 600; }
::selection { background: hsl(var(--primary)); color: #fff; }

/* Header */
.nav-link.is-active { background: var(--accent-soft); color: var(--accent-text); }
.dd-row:hover b, .mega-a:hover, .dd-item:hover, .m-sub:hover { color: var(--accent-text); }
.dd-item:hover, .dd-row:hover { background: var(--accent-soft); }
.foot-a:hover { color: var(--accent-text); }
.sc-icon-btn:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }

/* Hero: soft wash of each slide's own colour */
.hero .band-grid { z-index: 0; }
.slide { background: radial-gradient(700px 460px at 76% 42%, color-mix(in srgb, var(--h, rgb(0 104 192 / .4)) 32%, transparent), transparent 70%); }
.slide:first-child { background: radial-gradient(700px 460px at 76% 42%, rgb(0 104 192 / .12), transparent 70%); }
.s-kick i { background: #10b981; box-shadow: 0 0 0 3px rgb(16 185 129 / .18); }
.s-prod { color: var(--accent-text); font-weight: 600; }
.s-points li::before { background: var(--accent-soft); color: var(--accent-text); }
.hero .text-ink-950 { color: #059669; }
.chip-ic { background: var(--accent-soft); color: var(--accent-text); }
.chip-b .chip-ic { background: #ecfdf5; color: #047857; }
.chip-c .chip-ic { background: #fef3e2; color: #92400e; }
.s-tab.is-on .s-tab-t, .s-tab.is-on .s-tab-n, .s-tab:hover .s-tab-t { color: var(--accent-text); }
.s-bar i, .s-tab.is-on .s-bar i { background: hsl(var(--primary)); }

/* Page heads */
.page-head { background: linear-gradient(0deg, #fff, var(--accent-soft)); }

/* Sector cards take their sector's colour (--c1/--tint come inline from sector_palette) */
.sector-head { background: var(--tint); border-bottom-color: color-mix(in srgb, var(--c1) 18%, #fff); }
.sector-ic { color: var(--c1); border-color: color-mix(in srgb, var(--c1) 22%, #fff); }
.sector-n { background: #fff; color: var(--c1); border: 1px solid color-mix(in srgb, var(--c1) 22%, #fff); }
.sector-link .dot, .feat-list .dot { background: var(--c1); }
.sector-link:hover { background: var(--tint); color: var(--c1); }
.sector-link:hover svg { color: var(--c1); }
.sector-more { color: var(--c1); }
.sector:hover { border-color: color-mix(in srgb, var(--c1) 45%, #fff); }

/* Service + value tiles: one colour each, in a fixed order */
.svc:nth-child(1) .svc-ic, .card-g:nth-child(1) .sc-ic { --ic: #0b5fae; --ib: #eff6ff; }
.svc:nth-child(2) .svc-ic, .card-g:nth-child(2) .sc-ic { --ic: #047857; --ib: #ecfdf5; }
.svc:nth-child(3) .svc-ic, .card-g:nth-child(3) .sc-ic { --ic: #6d28d9; --ib: #f5f3ff; }
.svc:nth-child(4) .svc-ic, .card-g:nth-child(4) .sc-ic { --ic: #92400e; --ib: #fef3e2; }
.svc:nth-child(5) .svc-ic { --ic: #be123c; --ib: #fff1f2; }
.svc:nth-child(6) .svc-ic { --ic: #0e7490; --ib: #ecfeff; }
.svc:nth-child(7) .svc-ic { --ic: #4338ca; --ib: #eef2ff; }
.svc-ic, .card-g .sc-ic { color: var(--ic, var(--accent-text)); background: var(--ib, var(--accent-soft)); border-color: transparent; box-shadow: none; }
.svc:hover, .card:hover, .media-card:hover, .rel-card:hover, .price-card:hover, .pkg:hover, .rule-grid > :hover { border-color: var(--accent-line); }
.svc .go { color: var(--accent-text); }
.svc.is-dark, .svc.is-dark:hover { background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.svc.is-dark p { color: #dbeafe; }
.svc.is-dark .svc-ic { --ic: #fff; --ib: rgb(255 255 255 / .16); }
.svc.is-dark .go { color: #fff; }

/* Stats + steps */
.facts dd { color: var(--accent-text); }
.tl-step .n, .tl-step .\!n { background: hsl(var(--primary)) !important; border-color: hsl(var(--primary)); color: #fff; }
.timeline::before { background: var(--accent-line); }
.tl-year { color: var(--accent-text); font-weight: 600; }
.quote-mark { color: var(--accent-line); }
.tile-n { background: var(--tint); color: var(--c1); }

/* Product + package pages */
.rule-grid [data-sector] .kicker, .rule-grid > [data-sector] .kicker { background: var(--tint); color: var(--c1); }
.pkg-ic, .pkg.is-alt .pkg-ic { color: var(--c1); background: var(--tint); border-color: transparent; box-shadow: none; }
.pkg-list li svg { color: var(--c1); }
.pkg-price .amt, .price-card .text-\[2\.6rem\] { color: var(--accent-text); }
.price-li svg { color: #059669; }
.price-card.is-featured { border-color: hsl(var(--primary)); }
.jump-a.is-on { color: var(--accent-text); border-color: hsl(var(--primary)); }
.media-frame { background: var(--tint); }
.media-play, .group:hover .media-play { background: hsl(var(--primary)); }
.faq summary:hover { color: var(--accent-text); }
.faq details[open] summary { color: var(--accent-text); }
.terms ul li::before { background: var(--c1); }
.rel-card:hover b { color: var(--accent-text); }

/* Tabs */
.slider [role="tablist"], .sc-tabs { background: #e8f1fb; }
.sec-tab:hover { color: var(--accent-text); }
.sec-tab.is-on { color: var(--accent-text); }
.sec-tab.is-on .sec-n { color: var(--accent-text); }

/* Forms */
.field:focus { border-color: hsl(var(--primary)); }

/* Dark surfaces become deep brand blue */
.bg-night, .bg-ink-950 { background-color: var(--deep); }
.cta-panel { background: var(--deep); color: #fff; }
.cta-panel .kicker, .cta-panel .text-white\/80, .cta-panel dt { color: #bfdbfe; }
.cta-panel .btn-light { background: #fff; color: var(--deep); }
.cta-panel .btn-light:hover { background: #eff6ff; }
.cta-panel .btn-line-light { border-color: rgb(255 255 255 / .35); color: #fff; }
.cta-panel .btn-line-light:hover { background: rgb(255 255 255 / .12); color: #fff; }
.cta-panel dl > div { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); }
.cta-panel dl .bg-white\/15 { background: rgb(255 255 255 / .16); }
.sc-footer { background: #f8fafc; }
.svc.is-dark .svc-ic { background: rgb(255 255 255 / .16); color: #fff; border-color: transparent; }

/* ================ Coloured hero + page heads (2026-11-05) ================ */
.hero { --hero: #0b5fae; background: var(--hero); color: #fff; border-bottom: 0; transition: background-color .6s; }
.hero:has(.slide:nth-child(2).is-on) { --hero: #047857; }
.hero:has(.slide:nth-child(3).is-on) { --hero: #5b21b6; }
.hero:has(.slide:nth-child(4).is-on) { --hero: #0e7490; }
.hero:has(.slide:nth-child(5).is-on) { --hero: #92400e; }
.page-head { --hero: var(--c1); background: var(--hero); color: #fff; border-bottom: 0; }
.hero .band-grid, .page-head .band-grid {
  background-image: linear-gradient(90deg, rgb(255 255 255 / .08) 1px, transparent 0), linear-gradient(180deg, rgb(255 255 255 / .08) 1px, transparent 0);
}
.slide, .slide:first-child { background: radial-gradient(620px 420px at 76% 46%, rgb(255 255 255 / .14), transparent 70%); }
:is(.hero, .page-head) :focus-visible { box-shadow: 0 0 0 2px var(--hero), 0 0 0 4px #fff !important; }

/* Text */
.s-title, .page-head h1, .page-head .h-display, .page-head .text-white, .page-head .text-ink-950 { color: #fff; }
.s-desc, .s-title-xl + .s-desc, .page-head .lead, .hero .text-ink-500 { color: rgb(255 255 255 / .92); }
.s-prod, .s-points { color: #fff; }
.s-points li::before { background: #fff; color: var(--hero); }
.hero .text-ink-950 { color: #fff; }
.page-head .kicker { color: #fff; }
.page-head .crumbs, .page-head .crumbs a { color: rgb(255 255 255 / .9); }
.page-head .crumbs a:hover, .page-head .crumbs span:last-child { color: #fff; }
.page-head .text-white\/30 { color: rgb(255 255 255 / .55); }
.s-kick { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .3); color: #fff; box-shadow: none; }
.s-kick i { background: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / .25); }
.page-head .glance { border-color: rgb(255 255 255 / .25); }
.page-head .glance dt { color: rgb(255 255 255 / .88); }
.page-head .glance dd { color: #fff; }
.page-head .link-arrow, .page-head .link-arrow:hover { color: #fff; }
.s-img { filter: drop-shadow(0 24px 34px rgb(0 0 0 / .32)); }
.page-head .p-frame { box-shadow: 0 20px 40px -12px rgb(0 0 0 / .35); }

/* Buttons flip: white on colour */
:is(.hero, .page-head) .btn-primary { background: #fff; color: var(--hero); box-shadow: var(--shadow-sm); }
:is(.hero, .page-head) .btn-primary:hover { background: rgb(255 255 255 / .9); color: var(--hero); }
:is(.hero, .page-head) .btn-line-light, :is(.hero, .page-head) .btn-line { background: transparent; border-color: rgb(255 255 255 / .5); color: #fff; box-shadow: none; }
:is(.hero, .page-head) .btn-line-light:hover, :is(.hero, .page-head) .btn-line:hover { background: rgb(255 255 255 / .14); border-color: #fff; color: #fff; }

/* Slider controls */
.hero .slider [role="tablist"] { background: rgb(255 255 255 / .14); }
.hero .s-tab-t, .hero .s-tab-n { color: rgb(255 255 255 / .92); }
.hero .s-tab:hover .s-tab-t { color: #fff; }
.hero .s-tab.is-on { background: #fff; }
.hero .s-tab.is-on .s-tab-t, .hero .s-tab.is-on .s-tab-n { color: var(--hero); }
.hero .s-tab.is-on .s-bar i { background: var(--hero); }
.hero .s-arrow { background: transparent; border-color: rgb(255 255 255 / .45); color: #fff; box-shadow: none; }
.hero .s-arrow:hover { background: rgb(255 255 255 / .16); color: #fff; }
.site-header { background: #fff; }
.s-img.is-flat { border-radius: .75rem; background: #fff; }

/* ================ Illustrations (2026-11-05) ================ */
.sc-illus { display: none; }
@media (min-width: 1024px) { .sc-illus { display: block; width: 100%; max-width: 440px; height: auto; margin-top: 2.5rem; } }
.timeline::before { display: none; }
.tl-step .tl-illus { display: block; width: 100%; height: auto; margin-bottom: 1rem; }
.tl-step .n, .tl-step .\!n { position: absolute; top: .625rem; left: .625rem; height: 1.75rem; width: 1.75rem; font-size: 13px; box-shadow: 0 0 0 3px #fff; }
.tl-step h3 { margin-top: 0; }

/* ================ Hero + page-head background: depth instead of a flat fill ================ */
@property --hero { syntax: '<color>'; inherits: true; initial-value: #0b5fae; }
.hero, .page-head { background-color: var(--hero); background-image: none; box-shadow: inset 0 -1px 0 rgb(255 255 255 / .14); }
.hero { transition: --hero .7s ease; }
.hero::before, .page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(640px 480px at 74% 42%, rgb(255 255 255 / .2), transparent 70%),
    radial-gradient(900px 520px at 100% -10%, rgb(255 255 255 / .12), transparent 62%),
    linear-gradient(180deg, transparent 62%, rgb(2 8 23 / .3)),
    linear-gradient(105deg, rgb(2 8 23 / .58), rgb(2 8 23 / .26) 48%, rgb(2 8 23 / .06));
}
.hero::before, .page-head::before { background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.slide, .slide:first-child { background: none; }
.hero .band-grid, .page-head .band-grid {
  background-image: radial-gradient(rgb(255 255 255 / .2) 1px, transparent 1.3px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 62% 75% at 82% 26%, #000 5%, transparent 72%); mask-image: radial-gradient(ellipse 62% 75% at 82% 26%, #000 5%, transparent 72%);
}
.hero .band-arc, .page-head .band-arc { display: block; border: 1px solid rgb(255 255 255 / .09); }
.s-ring { display: block; border-color: rgb(255 255 255 / .16); background: radial-gradient(closest-side, rgb(255 255 255 / .1), transparent); }
.s-ring::after { border-color: rgb(255 255 255 / .14); }
.s-img.is-flat { box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
.hero .slider [role="tablist"] { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.s-kick { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chip { box-shadow: 0 12px 28px -8px rgb(2 8 23 / .4); }
@media (prefers-reduced-motion: reduce) { .hero { transition: none; } }

/* ================ Top bar: logo area + title (2026-11-05) ================ */
:root { --header-h: 72px; }
.brand { display: inline-flex; align-items: center; gap: .625rem; color: hsl(var(--foreground)); min-width: 0; }
.brand-mark { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; flex-shrink: 0; border-radius: .625rem; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.brand-mark img { height: 1.625rem; width: auto; }
.brand-txt { display: grid; line-height: 1.15; }
.brand-txt b { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.brand-txt small { margin-top: .125rem; font-size: 11.5px; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.site-header { box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.hd-call { display: none; align-items: center; gap: .5rem; }
.hd-call-ic { display: grid; place-items: center; height: 2.25rem; width: 2.25rem; border-radius: 9999px; background: var(--accent-soft); color: var(--accent-text); }
.hd-call small { display: block; font-size: 11.5px; line-height: 1.2; color: hsl(var(--muted-foreground)); }
.hd-call b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; color: hsl(var(--foreground)); }
.hd-call:hover b { color: var(--accent-text); }
@media (min-width: 1280px) { .hd-call { display: flex; } }

/* ================ Home sections (2026-11-05) ================ */
.sc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: 3rem; }
.sc-head .sec-head { max-width: 44rem; }
.sc-head .h-section { max-width: none; }
.section .sec-head .h-section { margin-top: .25rem; }
.sc-ic { color: var(--ic, var(--accent-text)); background: var(--ib, var(--accent-soft)); border-color: transparent; box-shadow: none; }

/* Proof */
.sc-proof { padding: 3rem 0 2.5rem; background: #fff; }
.sc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; }
.sc-stats > div { padding: 0 1.5rem; border-left: 1px solid hsl(var(--border)); }
.sc-stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
.sc-stats dd { font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--accent-text); }
.sc-stats dt { margin-top: .25rem; font-size: 14px; color: hsl(var(--muted-foreground)); }
@media (min-width: 768px) {
  .sc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sc-stats > div:nth-child(odd) { border-left: 1px solid hsl(var(--border)); padding-left: 1.5rem; }
  .sc-stats > div:first-child { border-left: 0; padding-left: 0; }
}
.sc-logos { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid hsl(var(--border)); }
.sc-logos-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.5rem; font-size: 14px; color: hsl(var(--muted-foreground)); }

/* Included strip */
.sc-included { margin-top: 1.25rem; display: grid; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; box-shadow: var(--shadow-sm); }
.sc-included-t { font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); }
.sc-included ul { display: grid; gap: .75rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.sc-included li { display: flex; align-items: center; gap: .625rem; font-size: 14px; color: #3f3f46; }
.sc-included li:nth-child(2) .sc-ic { --ic: #047857; --ib: #ecfdf5; }
.sc-included li:nth-child(3) .sc-ic { --ic: #92400e; --ib: #fef3e2; }
.sc-included li:nth-child(4) .sc-ic { --ic: #6d28d9; --ib: #f5f3ff; }
@media (min-width: 1280px) { .sc-included { grid-template-columns: 15rem 1fr; } }

/* Split sections */
.sc-split { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .sc-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; align-items: start; }
  .sc-split.is-narrow { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .sc-split.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .sc-split-a .sc-illus { margin-left: auto; margin-right: auto; max-width: 480px; }
  .is-flip .sc-split-a .sc-illus { margin-top: 0; max-width: none; }
}

/* Service list */
.sc-list { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; box-shadow: var(--shadow-sm); }
.sc-row { display: flex; align-items: center; gap: 1rem; padding: 1.375rem 1.5rem; border-bottom: 1px solid hsl(var(--border)); transition: background-color .15s; }
.sc-row:last-child { border-bottom: 0; }
.sc-row:hover { background: #f8fafc; }
.sc-row .sc-ic { height: 2.75rem; width: 2.75rem; }
.sc-row:nth-child(2) .sc-ic { --ic: #047857; --ib: #ecfdf5; }
.sc-row:nth-child(3) .sc-ic { --ic: #6d28d9; --ib: #f5f3ff; }
.sc-row:nth-child(4) .sc-ic { --ic: #92400e; --ib: #fef3e2; }
.sc-row-t { flex: 1; min-width: 0; }
.sc-row-t b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.sc-row-t small { display: block; margin-top: .125rem; font-size: 14px; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.sc-row-go { color: #a1a1aa; transition: transform .15s, color .15s; }
.sc-row:hover .sc-row-go { color: var(--accent-text); transform: translateX(2px); }
.sc-sub { margin: 1.75rem 0 .75rem; font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); }
.sc-also { display: grid; gap: .75rem; }
@media (min-width: 640px) { .sc-also { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sc-also a { display: block; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; box-shadow: var(--shadow-sm); transition: border-color .15s; }
.sc-also a:hover { border-color: var(--accent-line); }
.sc-also a:nth-child(1) .sc-ic { --ic: #be123c; --ib: #fff1f2; }
.sc-also a:nth-child(2) .sc-ic { --ic: #0e7490; --ib: #ecfeff; }
.sc-also a:nth-child(3) .sc-ic { --ic: #4338ca; --ib: #eef2ff; }
.sc-also b { display: block; margin-top: .625rem; font-size: 14.5px; font-weight: 600; color: hsl(var(--foreground)); }
.sc-also small { display: block; margin-top: .125rem; font-size: 13px; line-height: 1.5; color: hsl(var(--muted-foreground)); }

/* Why: open list, no boxes */
.sc-feats { margin-top: 2.25rem; display: grid; gap: 1.75rem 2rem; }
@media (min-width: 640px) { .sc-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-feats li { padding-top: 1.25rem; border-top: 1px solid #dbe3ec; }
.sc-feats li:nth-child(2) .sc-ic { --ic: #047857; --ib: #d9f7ea; }
.sc-feats li:nth-child(3) .sc-ic { --ic: #6d28d9; --ib: #ede9fe; }
.sc-feats li:nth-child(4) .sc-ic { --ic: #92400e; --ib: #fdecd2; }
.sc-feats .sc-ic { --ib: #dbeafe; }
.sc-feats b { display: block; margin-top: .75rem; font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); }
.sc-feats small { display: block; margin-top: .25rem; font-size: 14px; line-height: 1.55; color: hsl(var(--muted-foreground)); }

/* Steps outcome */
.tl-step { display: flex; flex-direction: column; }
.tl-step p { flex: 1; }
.tl-out { margin-top: .875rem; display: inline-flex; align-items: center; gap: .375rem; font-size: 13px; font-weight: 500; color: #047857; }

/* Pricing */
.sc-prices { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .sc-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sc-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sc-price-k { font-size: 13px; font-weight: 500; color: var(--accent-text); }
.sc-prices .h-card { margin-top: .25rem; font-size: 1.125rem; }
.sc-price-rows { margin: 1rem 0 1.25rem; min-height: 4.25rem; font-size: 14px; color: hsl(var(--muted-foreground)); }
.sc-price-rows p + p { margin-top: .25rem; }
.sc-price-rows b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; color: hsl(var(--foreground)); }
.sc-from { font-size: 14px; }
.sc-prices ul { margin-bottom: 1.5rem; border-top: 1px solid hsl(var(--border)); }
.sc-prices .btn-primary, .sc-prices .btn-line { width: 100%; }

/* Quotes */
.sc-quotes { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .sc-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Team */
.sc-team { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .sc-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sc-team { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sc-team li { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; box-shadow: var(--shadow-sm); }
.sc-team img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.sc-team div { padding: .75rem; }
.sc-team b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: hsl(var(--foreground)); }
.sc-team small { display: block; margin-top: .125rem; font-size: 12.5px; line-height: 1.35; color: hsl(var(--muted-foreground)); }
.sc-included ul { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
@media (min-width: 1024px) { .sc-split:not(.is-flip) .sc-split-a .sc-illus { max-width: 400px; margin-left: 0; } }

/* ================ Home sections v2 (2026-11-05): Ready, Services, Why, Clients ================ */
.reveal.is-in:hover { transition-delay: 0s; }

/* Ready software: light section, faint dots, sector showcase */
.sc-ready { position: relative; overflow: hidden; background: #f6f9fd; border-top: 1px solid hsl(var(--border)); }
.sc-ready::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(#c8d8ec 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 32%); mask-image: linear-gradient(180deg, #000, transparent 32%); }
/* Services: navy */
.sc-dark { position: relative; overflow: hidden; color: #fff; background-color: #071a33; }
.sc-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(760px 480px at 82% 12%, rgb(0 104 192 / .42), transparent 68%), radial-gradient(620px 420px at 0% 100%, rgb(109 40 217 / .2), transparent 70%), radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1.3px); background-size: auto, auto, 24px 24px; }
.sc-dark .h-section { color: #fff; }
.sc-dark .lead { color: #c3d4ea; }
.sc-dark .sec-head > .kicker { background: rgb(255 255 255 / .1); color: #dbeafe; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.sc-dark .btn-light { background: #fff; color: #0a4a8a; }
.sc-dark .btn-light:hover { background: #dbeafe; }
.sc-svc-top { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .sc-svc-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.sc-svc-art { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.sc-svc-grid { margin-top: 2.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .sc-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sc-svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc-svc { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid rgb(255 255 255 / .13); border-radius: .75rem; background: rgb(255 255 255 / .05); transition: transform .2s, background-color .2s, border-color .2s; }
.sc-svc:hover { transform: translateY(-4px); background: rgb(255 255 255 / .09); border-color: rgb(147 197 253 / .6); }
.sc-svc .sc-ic { height: 2.75rem; width: 2.75rem; --ib: rgb(96 165 250 / .18); --ic: #93c5fd; }
.sc-svc:nth-child(2) .sc-ic { --ib: rgb(52 211 153 / .16); --ic: #6ee7b7; }
.sc-svc:nth-child(3) .sc-ic { --ib: rgb(167 139 250 / .18); --ic: #c4b5fd; }
.sc-svc:nth-child(4) .sc-ic { --ib: rgb(251 191 36 / .16); --ic: #fcd34d; }
.sc-svc b { margin-top: 1rem; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.sc-svc small { margin-top: .375rem; flex: 1; font-size: 14px; line-height: 1.55; color: #c3d4ea; }
.sc-svc-go { margin-top: 1rem; display: inline-flex; align-items: center; gap: .375rem; font-size: 13.5px; font-weight: 500; color: #fff; }
.sc-svc-go svg { transition: transform .15s; }
.sc-svc:hover .sc-svc-go svg { transform: translateX(3px); }
.sc-svc-also { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1.5rem; padding: .875rem 1.5rem; border: 1px solid rgb(255 255 255 / .13); border-radius: .75rem; font-size: 14px; }
.sc-svc-also p { margin-right: auto; font-weight: 500; color: #c3d4ea; }
.sc-svc-also a { display: inline-flex; align-items: center; gap: .4375rem; font-weight: 500; color: #fff; }
.sc-svc-also a:hover { color: #93c5fd; }
.sc-svc-also .sc-go { opacity: .6; }

/* Why: tinted bento */
.sc-why { position: relative; background: #edf3fd; border-bottom: 1px solid hsl(var(--border)); }
.sc-why .sec-head > .kicker { background: #fff; }
.sc-bento { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-bento-main { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .sc-bento { grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; } .sc-bento-main { grid-column: 1; grid-row: 1 / span 2; } }
.sc-bento-main { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.75rem; border-radius: .75rem; background: #fff; border: 1px solid #d9e6f6; box-shadow: var(--shadow-sm); }
.sc-bento-art { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.sc-bento-main p { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: hsl(var(--foreground)); }
.sc-bento-c { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid #d9e6f6; border-radius: .75rem; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.sc-bento-c:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgb(10 74 138 / .45); border-color: var(--accent-line); }
.sc-bento-c .sc-ic { height: 2.75rem; width: 2.75rem; --ib: #dbeafe; }
.sc-bento-c:nth-child(3) .sc-ic { --ic: #047857; --ib: #d9f7ea; }
.sc-bento-c:nth-child(4) .sc-ic { --ic: #6d28d9; --ib: #ede9fe; }
.sc-bento-c:nth-child(5) .sc-ic { --ic: #92400e; --ib: #fdecd2; }
.sc-bento-c b { margin-top: 1rem; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.sc-bento-c small { margin-top: .375rem; font-size: 14px; line-height: 1.55; color: hsl(var(--muted-foreground)); }

/* Clients */
.sc-voices { background: #f8fafc; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.sc-voice-card { display: grid; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: .875rem; background: #fff; box-shadow: var(--shadow-md); }
@media (min-width: 1024px) { .sc-voice-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sc-voice { position: relative; display: flex; flex-direction: column; padding: 2.25rem; color: #fff; background-color: #0a4a8a; background-image: radial-gradient(420px 300px at 100% 0, rgb(255 255 255 / .16), transparent 70%), radial-gradient(rgb(255 255 255 / .1) 1px, transparent 1.3px); background-size: auto, 22px 22px; }
.sc-voice-mark { height: 2.25rem; width: 3rem; color: #93c5fd; }
.sc-voice-stage { position: relative; display: grid; flex: 1; margin-top: 1.25rem; }
.sc-q { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s, transform .5s, visibility .5s; }
.sc-q.is-on { opacity: 1; visibility: visible; transform: none; }
.sc-q blockquote { font-size: clamp(1.1875rem, 1.9vw, 1.5rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.42; color: #fff; }
.sc-q figcaption { display: flex; align-items: center; gap: .875rem; }
.sc-q figcaption img { height: 3rem; width: 3rem; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 2px rgb(255 255 255 / .6); }
.sc-q b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.sc-q small { display: block; margin-top: .0625rem; font-size: 13.5px; color: #cfe0f5; }
.sc-voice-nav { margin-top: 1.5rem; display: flex; gap: .25rem; }
.sc-voice-nav button { display: grid; place-items: center; height: 1.75rem; width: 2.5rem; }
.sc-voice-nav i { display: block; height: 3px; width: 100%; border-radius: 3px; background: rgb(255 255 255 / .32); transition: background-color .2s; }
.sc-voice-nav button.is-on i, .sc-voice-nav button:hover i { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  
  .sc-q, .sc-svc, .sc-bento-c { transition: none; }
  .sc-svc:hover, .sc-bento-c:hover { transform: none; }
}

/* ================ Ready software: summary panel + list (2026-11-05) ================ */
.sc-rs { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .sc-rs { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: stretch; } }
.sc-rs-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 2rem; border-radius: .875rem; color: #fff; background-color: #0b5fae; box-shadow: 0 24px 44px -28px rgb(10 74 138 / .7); }
.sc-rs-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgb(255 255 255 / .16) 1px, transparent 1.3px), radial-gradient(420px 320px at 100% 0, rgb(255 255 255 / .2), transparent 70%), linear-gradient(160deg, rgb(2 8 23 / .1), rgb(2 8 23 / .46)); background-size: 22px 22px, auto, auto; }
.sc-rs-panel::after { content: ""; position: absolute; right: -7rem; top: -7rem; height: 18rem; width: 18rem; border-radius: 9999px; border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 0 0 3rem rgb(255 255 255 / .03); pointer-events: none; }
.sc-rs-panel > * { position: relative; z-index: 1; }
.sc-rs-k { width: fit-content; padding: .125rem .625rem; border-radius: calc(var(--radius) - 2px); background: rgb(255 255 255 / .13); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); font-size: 12px; font-weight: 500; line-height: 1.25rem; }
.sc-rs-num { margin-top: 1.25rem; font-size: clamp(4rem, 7vw, 5.5rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.sc-rs-panel h2 { margin-top: .5rem; font-size: clamp(1.45rem, 2.1vw, 1.75rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; color: #fff; }
.sc-rs-lead { margin-top: .75rem; font-size: 15px; line-height: 1.6; color: #dbe9f8; }
.sc-rs-secs { margin: 1.5rem 0; border-top: 1px solid rgb(255 255 255 / .18); }
.sc-rs-secs a { display: flex; align-items: center; gap: .625rem; padding: .625rem .375rem; margin: 0 -.375rem; border-bottom: 1px solid rgb(255 255 255 / .18); font-size: 14.5px; font-weight: 500; color: #fff; transition: background-color .15s; }
.sc-rs-secs a:hover { background: rgb(255 255 255 / .1); }
.sc-rs-sic { display: grid; place-items: center; height: 1.75rem; width: 1.75rem; flex-shrink: 0; border-radius: .375rem; background: rgb(255 255 255 / .14); }
.sc-rs-secs b { font-weight: 700; }
.sc-rs-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.75rem; padding: 0 1rem; border-radius: var(--radius); background: #fff; color: #0a4a8a; font-size: 14.5px; font-weight: 600; transition: background-color .15s; }
.sc-rs-btn:hover { background: #dbeafe; }
.sc-rs-btn svg { transition: transform .15s; }
.sc-rs-btn:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .sc-rs-grid a, .sc-rs-art img { transition: none; } .sc-rs-grid a:hover { transform: none; } .sc-rs-grid a:hover .sc-rs-art img { transform: none; } }
.sc-ready { overflow: visible; }

/* Clients: who relies on our software */
.sc-who { display: flex; flex-direction: column; padding: 2rem; }
.sc-who-art { display: grid; place-items: center; padding: .75rem; border-radius: .625rem; background: #f5f8fe; }
.sc-who-img { display: block; height: 11.5rem; width: auto; max-width: 100%; }
.sc-who-t { margin-top: 1.25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.sc-who ul { margin-top: .75rem; display: grid; gap: .625rem 1rem; }
@media (min-width: 640px) { .sc-who ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-who li { display: flex; align-items: center; gap: .625rem; font-size: 14px; line-height: 1.35; color: #3f3f46; }
.sc-who li:nth-child(2) .sc-ic { --ic: #6d28d9; --ib: #f5f3ff; }
.sc-who li:nth-child(3) .sc-ic { --ic: #0e7490; --ib: #ecfeff; }
.sc-who li:nth-child(4) .sc-ic { --ic: #047857; --ib: #ecfdf5; }
.sc-who-n { margin-top: 1.125rem; padding-top: 1rem; display: flex; align-items: center; gap: .5rem; border-top: 1px solid hsl(var(--border)); font-size: 14px; font-weight: 500; color: var(--accent-text); }

/* ================ Footer: plain, one four-column grid (2026-11-05) ================ */
.sc-footer { color: #c3d4ea; background: #071a33; border-top: 0; }
.sc-ft-row { display: grid; gap: 2.25rem 2rem; padding: 2.75rem 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid rgb(255 255 255 / .12); }
.sc-ft-about { grid-column: 1 / -1; }
@media (min-width: 1024px) { .sc-ft-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sc-ft-about { grid-column: auto; } }
.sc-footer .brand-mark { background: #fff; box-shadow: none; }
.sc-footer .brand-txt b { color: #fff; }
.sc-footer .brand-txt small { color: #a9bfda; }
.sc-ft-about > p { margin-top: 1rem; max-width: 22rem; font-size: 14px; line-height: 1.6; }
.sc-ft-social { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.sc-ft-social a { color: #fff; font-weight: 500; }
.sc-footer .foot-h { font-size: 14px; font-weight: 600; color: #fff; }
.sc-ft-links { margin-top: .875rem; display: grid; gap: .5rem; }
.sc-ft-links a, .sc-ft-bottom-l a { font-size: 14px; line-height: 1.4; color: #c3d4ea; }
.sc-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sc-footer .brand:hover { text-decoration: none; }
.sc-ft-info { margin-top: .875rem; display: grid; gap: .625rem; font-size: 14px; line-height: 1.4; }
.sc-ft-info dt { font-size: 12.5px; color: #a9bfda; }
.sc-ft-info dd, .sc-ft-info a { color: #fff; overflow-wrap: anywhere; }
.sc-ft-seo { padding: 2rem 0; border-bottom: 1px solid rgb(255 255 255 / .12); }
.sc-ft-seo p { margin-top: .5rem; max-width: 62rem; font-size: 13.5px; line-height: 1.7; }
.sc-ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; padding: 1.25rem 0; font-size: 13px; color: #a9bfda; }
.sc-ft-bottom-l { display: flex; gap: 1.25rem; }
.sc-ft-bottom-l a { font-size: 13px; }

/* ================ Top bar: reacts to scroll (2026-11-05) ================ */
.site-header { transition: background-color .25s, border-color .25s, box-shadow .25s; }
.site-header > .container-x { transition: height .25s; }
.site-header.is-scrolled { background: rgb(255 255 255 / .97); box-shadow: 0 8px 24px -16px rgb(15 42 74 / .4); }
.site-header.is-scrolled > .container-x { height: 60px; }
.site-header.is-scrolled ~ main .jumpbar { top: 60px; }
.brand-mark, .brand-txt b, .brand-txt small, .nav-link, .hd-call-ic, .hd-call small, .hd-call b { transition: color .25s, background-color .25s, box-shadow .25s; }
.nav-link svg { color: #a1a1aa; }
.hd-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s; }
.hd-progress i { display: block; height: 100%; background: hsl(var(--primary)); transform: scaleX(0); transform-origin: 0 50%; }
.site-header.is-scrolled .hd-progress { opacity: 1; }

/* See-through over the coloured hero until the page scrolls */
.js-hd .site-header:not(.is-scrolled) { background: transparent; border-color: rgb(255 255 255 / .14); box-shadow: none; }
.js-hd .site-header:not(.is-scrolled) .brand-mark { background: #fff; box-shadow: none; }
.js-hd .site-header:not(.is-scrolled) .brand-txt b, .js-hd .site-header:not(.is-scrolled) .nav-link, .js-hd .site-header:not(.is-scrolled) .hd-call b, .js-hd .site-header:not(.is-scrolled) #navOpen { color: #fff; }
.js-hd .site-header:not(.is-scrolled) .brand-txt small, .js-hd .site-header:not(.is-scrolled) .hd-call small { color: rgb(255 255 255 / .85); }
.js-hd .site-header:not(.is-scrolled) .nav-link svg { color: rgb(255 255 255 / .75); }
.js-hd .site-header:not(.is-scrolled) .nav-link:hover, .js-hd .site-header:not(.is-scrolled) .nav-link.is-active, .js-hd .site-header:not(.is-scrolled) .dropdown:hover .nav-link { background: rgb(255 255 255 / .16); color: #fff; }
.js-hd .site-header:not(.is-scrolled) .hd-call-ic { background: rgb(255 255 255 / .16); color: #fff; }
.js-hd .site-header:not(.is-scrolled) .btn-primary { background: #fff; color: #0a4a8a; }
.js-hd .site-header:not(.is-scrolled) .btn-primary:hover { background: #dbeafe; }

/* ================ Submenus ================ */
.dropdown-panel { border-radius: .75rem; border-color: hsl(var(--border)); background: #fff; box-shadow: 0 2px 6px rgb(15 42 74 / .06), 0 24px 48px -16px rgb(15 42 74 / .3); translate: 0 8px; transition: opacity .18s, translate .18s, visibility .18s; }
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel { translate: 0 0; }
.sc-dd-1 { width: 20rem; padding: .5rem; }
.dd-row { align-items: center; justify-content: flex-start; gap: .75rem; padding: .5625rem; border-radius: .5rem; }
.dd-row:hover { background: var(--accent-soft); }
.dd-row .sc-ic { transition: background-color .15s, color .15s; }
.dd-row:hover .sc-ic { background: hsl(var(--primary)); color: #fff; }
.dd-row b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.dd-row small { margin-top: 0; font-size: 12.5px; line-height: 1.35; }
.dd-row.is-cta { background: var(--accent-soft); }
.dd-row.is-cta .sc-ic { background: hsl(var(--primary)); color: #fff; }
/* Wide panels centre under the bar so they never leave the screen */
.dropdown.has-mega { position: static; }
.dropdown.has-mega::after { display: none; }
.has-mega .nav-link::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.5rem; }
.mega-panel { width: 56rem; max-width: calc(100vw - 2rem); margin-top: 0; overflow: hidden; }
.sc-dd-2 { width: 40rem; }
.sc-dd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .125rem; padding: .625rem; }
.sc-dd-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding: 1.25rem 1.5rem; }
.sc-dd-sec { display: flex; align-items: center; gap: .5rem; padding-bottom: .625rem; margin-bottom: .375rem; border-bottom: 1px solid hsl(var(--border)); font-size: 13.5px; font-weight: 600; color: var(--c1); }
.sc-dd-sec:hover { text-decoration: underline; text-underline-offset: 3px; }
.sc-dd-sic { display: grid; place-items: center; flex-shrink: 0; height: 1.75rem; width: 1.75rem; border-radius: .375rem; background: var(--tint); }
.mega-panel .mega-a { padding: .3125rem 0; font-size: 13.5px; line-height: 1.35; color: #3f3f46; }
.mega-panel .mega-a:hover { color: var(--c1); }
.sc-dd-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.5rem; border-top: 1px solid hsl(var(--border)); background: #f8fafc; font-size: 13.5px; color: hsl(var(--muted-foreground)); }
.sc-dd-foot div { display: flex; flex-shrink: 0; align-items: center; gap: 1.25rem; }
.sc-dd-foot a { color: hsl(var(--foreground)); font-weight: 500; }
.sc-dd-foot a:hover { color: var(--accent-text); }
.sc-dd-foot a.is-main { display: inline-flex; align-items: center; gap: .375rem; color: var(--accent-text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .dropdown-panel { translate: none; transition: none; } .site-header, .site-header > .container-x { transition: none; } }

/* Ready software: illustrated product cards */
@media (min-width: 1024px) { .sc-rs { align-items: start; } .sc-rs-panel { position: sticky; top: calc(var(--header-h) + 1rem); } }
.sc-rs-grid { display: grid; gap: .75rem; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .sc-rs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
.sc-rs-grid li { min-width: 0; }
.sc-rs-grid a { display: flex; flex-direction: column; height: 100%; padding: .5rem .5rem .875rem; border: 1px solid hsl(var(--border)); border-radius: .875rem; background: #fff; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s, transform .2s; }
.sc-rs-grid a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c1) 55%, #fff); box-shadow: 0 16px 26px -18px var(--c1); }
.sc-rs-art { display: grid; place-items: center; height: 6.25rem; border-radius: .5rem; background: var(--tint); color: var(--c1); overflow: hidden; }
.sc-rs-art img { display: block; height: 4.75rem; width: auto; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.sc-rs-art img.is-icon { height: 3.5rem; }
.sc-rs-grid a:hover .sc-rs-art img { transform: scale(1.07); }
.sc-rs-t { display: block; flex: 1; padding: .75rem .375rem 0; min-width: 0; }
.sc-rs-t b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; color: hsl(var(--foreground)); transition: color .15s; }
.sc-rs-grid a:hover b { color: var(--c1); }
.sc-rs-t small { display: block; margin-top: .1875rem; font-size: 12.5px; line-height: 1.35; color: hsl(var(--muted-foreground)); }
@media (prefers-reduced-motion: reduce) { .sc-rs-grid a, .sc-rs-art img { transition: none; } .sc-rs-grid a:hover { transform: none; } .sc-rs-grid a:hover .sc-rs-art img { transform: none; } }
/* Nine cards match the panel height, so the panel no longer needs to follow the scroll */
@media (min-width: 1024px) { .sc-rs { align-items: stretch; } .sc-rs-panel { position: relative; top: auto; } }

/* Top menu: Home as an icon */
.nav-link.nav-home { justify-content: center; width: 2.25rem; padding-left: 0; padding-right: 0; }
.nav-link.nav-home svg, .js-hd .site-header:not(.is-scrolled) .nav-link.nav-home svg { height: 1.125rem; width: 1.125rem; color: currentColor; }

/* ================ Company page (2026-11-05) ================ */
.ab-intro { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .ab-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.ab-lead { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.55; color: hsl(var(--foreground)); }
.ab-text { margin-top: 1rem; font-size: 15.5px; line-height: 1.7; color: hsl(var(--muted-foreground)); }
.ab-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .625rem; }
.ab-art { display: grid; place-items: center; padding: 1.5rem; border-radius: .875rem; background: #f5f8fe; border: 1px solid #e3ecf8; }
.ab-art-img { display: block; width: 100%; max-width: 26rem; height: auto; }
.ab-stats { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid hsl(var(--border)); }

.ab-mv { display: grid; gap: 1rem; }
@media (min-width: 768px) { .ab-mv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-mv-c { padding: 2rem; border: 1px solid rgb(255 255 255 / .13); border-radius: .875rem; background: rgb(255 255 255 / .05); }
.ab-mv-c .sc-ic { height: 2.75rem; width: 2.75rem; --ib: rgb(96 165 250 / .18); --ic: #93c5fd; }
.ab-mv-c.is-b .sc-ic { --ib: rgb(52 211 153 / .16); --ic: #6ee7b7; }
.ab-mv-k { margin-top: 1.25rem; font-size: 14px; font-weight: 500; color: #c3d4ea; }
.ab-mv-c h2 { margin-top: .5rem; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: #fff; }

.ab-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-card { padding: 1.5rem; border: 1px solid #d9e6f6; border-radius: .75rem; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ab-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgb(10 74 138 / .45); border-color: var(--accent-line); }
.ab-card .sc-ic { height: 2.75rem; width: 2.75rem; --ib: #dbeafe; }
.ab-card:nth-child(2) .sc-ic { --ic: #047857; --ib: #d9f7ea; }
.ab-card:nth-child(3) .sc-ic { --ic: #6d28d9; --ib: #ede9fe; }
.ab-card:nth-child(4) .sc-ic { --ic: #92400e; --ib: #fdecd2; }
.ab-card:nth-child(5) .sc-ic { --ic: #0e7490; --ib: #d5f5fb; }
.ab-card:nth-child(6) .sc-ic { --ic: #be123c; --ib: #ffe4e9; }
.ab-card h3 { margin-top: 1rem; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.ab-card p { margin-top: .375rem; font-size: 14px; line-height: 1.6; color: hsl(var(--muted-foreground)); }

.ab-hist { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .ab-hist { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } .ab-hist-head { position: sticky; top: 6rem; } }
.ab-tl { position: relative; display: grid; gap: 1.75rem; }
.ab-tl::before { content: ""; position: absolute; left: 2.5rem; top: .75rem; bottom: .75rem; width: 1px; background: var(--accent-line); }
.ab-tl li { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ab-tl-y { position: relative; z-index: 1; display: block; padding: .1875rem 0; border-radius: .375rem; background: var(--accent-soft); box-shadow: 0 0 0 4px #fff, inset 0 0 0 1px var(--accent-line); font-size: 12.5px; font-weight: 600; text-align: center; color: var(--accent-text); }
.ab-tl .is-now .ab-tl-y { background: hsl(var(--primary)); box-shadow: 0 0 0 4px #fff; color: #fff; }
.ab-tl h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: hsl(var(--foreground)); }
.ab-tl p { margin-top: .25rem; font-size: 14px; line-height: 1.6; color: hsl(var(--muted-foreground)); }

@media (min-width: 1024px) { .ab-team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-team b { font-size: 14.5px; }
.ab-team small { font-size: 13px; }

.ab-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid hsl(var(--border)); border-left: 1px solid hsl(var(--border)); border-radius: .75rem; overflow: hidden; }
@media (min-width: 640px) { .ab-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ab-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-logos > div { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: 1rem; border-right: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); background: #fff; }
.ab-logos img { height: 2.5rem; width: 2.5rem; flex-shrink: 0; object-fit: contain; }
.ab-logos span { min-width: 0; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: hsl(var(--foreground)); }
@media (prefers-reduced-motion: reduce) { .ab-card { transition: none; } .ab-card:hover { transform: none; } }
/* Company page: timeline line stops at Today; square client grid */
.ab-tl::before { display: none; }
.ab-tl li:not(:last-child)::before { content: ""; position: absolute; left: 2.5rem; top: .75rem; bottom: -1.75rem; width: 1px; background: var(--accent-line); }
.ab-logos { border-radius: 0; }

/* ================ Product page (2026-11-05) ================ */
.pd-hero-in { display: grid; gap: 2.5rem; align-items: center; padding-top: 7rem; padding-bottom: 3.5rem; }
@media (min-width: 1024px) { .pd-hero-in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3rem; padding-top: 8rem; padding-bottom: 4.5rem; } }
.page-head h1.pd-title { margin-top: 1.5rem; font-size: inherit !important; font-weight: inherit; letter-spacing: 0; line-height: inherit !important; }
.pd-name { display: flex; align-items: center; gap: .75rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: #fff; }
.pd-name small { display: block; font-size: 13.5px; font-weight: 400; color: rgb(255 255 255 / .85); }
.pd-ic { display: grid; place-items: center; flex-shrink: 0; height: 3rem; width: 3rem; padding: .375rem; border-radius: .625rem; background: #fff; color: var(--c1); }
.pd-ic img { max-height: 100%; max-width: 100%; object-fit: contain; }
.pd-head { display: block; margin-top: 1.25rem; font-size: clamp(2.1rem, 4vw, 3.25rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; color: #fff; }
.pd-sum { margin-top: 1.125rem; max-width: 34rem; font-size: 1.0625rem; line-height: 1.6; color: rgb(255 255 255 / .93); }
.pd-cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .625rem; }
.pd-hero-art { position: relative; display: grid; place-items: center; min-width: 0; }
.pd-hero-art > img { position: relative; width: 100%; max-width: 38rem; height: auto; }
.pd-hero-art > img.is-alpha { filter: drop-shadow(0 28px 36px rgb(0 0 0 / .35)); }
.pd-hero-art > img.is-flat { border-radius: .75rem; background: #fff; box-shadow: 0 24px 44px -16px rgb(0 0 0 / .45); }
.pd-hero-svg { display: grid; place-items: center; width: 100%; max-width: 24rem; padding: 2.5rem; border-radius: 1rem; background: #fff; box-shadow: 0 24px 44px -16px rgb(0 0 0 / .4); }
.pd-hero-svg img { width: 100%; height: auto; }

.pd-glance { background: #fff; border-bottom: 1px solid hsl(var(--border)); }
.pd-glance dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.5rem; padding: 1.5rem 0; }
.pd-glance dl > div { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.pd-gi { display: grid; place-items: center; flex-shrink: 0; height: 2.25rem; width: 2.25rem; border-radius: .5rem; background: var(--tint); color: var(--c1); }
.pd-glance dt { font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.pd-glance dd { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: hsl(var(--foreground)); }

.pd-mods { display: grid; gap: 1rem; }
@media (min-width: 640px) { .pd-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pd-mods.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-mods.n3, .pd-mods.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-mod { padding: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; box-shadow: var(--shadow-sm); }
.pd-mod h3 { display: flex; align-items: center; gap: .625rem; padding-bottom: .875rem; border-bottom: 1px solid hsl(var(--border)); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.pd-mod ul { margin-top: .75rem; display: grid; gap: .5rem; }
.pd-mod li { display: flex; align-items: flex-start; gap: .5rem; font-size: 14px; line-height: 1.4; color: #3f3f46; }
.pd-mod li svg { margin-top: .1875rem; color: var(--c1); }
.pd-extras { margin-top: 1rem; display: grid; gap: .75rem 2rem; padding: 1.125rem 1.25rem; border-radius: .75rem; background: var(--tint); }
@media (min-width: 900px) { .pd-extras { grid-template-columns: 8rem minmax(0, 1fr); align-items: center; } }
.pd-extras p { font-size: 14px; font-weight: 600; color: var(--c1); }
.pd-extras ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.pd-extras li { display: inline-flex; align-items: center; gap: .4375rem; font-size: 14px; color: #3f3f46; }
.pd-extras svg { color: var(--c1); }

.pd-shots { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .pd-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-shots a, .pd-vids a { display: block; min-width: 0; }
.pd-shot, .pd-vid { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .625rem; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .16); transition: transform .2s, box-shadow .2s; }
.pd-shot img, .pd-vid img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: top; }
.pd-shots a:hover .pd-shot, .pd-vids a:hover .pd-vid { transform: translateY(-3px); box-shadow: 0 0 0 2px #93c5fd, 0 16px 30px -14px rgb(0 0 0 / .7); }
.pd-cap { display: block; margin-top: .5rem; font-size: 13.5px; line-height: 1.35; color: #dbe7f5; }
.pd-vhead { margin: 2.5rem 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pd-vhead h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.pd-vhead a { display: inline-flex; align-items: center; gap: .375rem; font-size: 14px; font-weight: 500; color: #93c5fd; }
.pd-vhead a:hover { color: #fff; }
.pd-vids { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .pd-vids { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pd-vid { aspect-ratio: 16 / 9; }
.pd-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; height: 2.75rem; width: 2.75rem; border-radius: 9999px; background: hsl(var(--primary)); color: #fff; transform: translate(-50%, -50%); box-shadow: 0 8px 18px -6px rgb(0 0 0 / .6); }
.pd-dur { position: absolute; right: .375rem; bottom: .375rem; padding: 0 .375rem; border-radius: .25rem; background: rgb(0 0 0 / .75); font-size: 12px; line-height: 1.25rem; color: #fff; }

.pd-price-sec { background: #f6f9fd; border-bottom: 1px solid hsl(var(--border)); }
.pd-packs { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 768px) { .pd-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pd-packs.n2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pd-packs.n3, .pd-packs.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-packs.n4 .pd-help { grid-column: 1 / -1; } }
.pd-pack { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; box-shadow: var(--shadow-sm); }
.pd-pack h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.pd-pack dl { margin-top: .875rem; }
.pd-pack dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid hsl(var(--border)); }
.pd-pack dt { font-size: 14px; line-height: 1.35; color: #3f3f46; }
.pd-pack dt small { display: block; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.pd-pack dd { flex-shrink: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; color: var(--accent-text); white-space: nowrap; }
.pd-pack dd small { margin-left: .25rem; font-size: 13px; font-weight: 400; letter-spacing: 0; color: hsl(var(--muted-foreground)); }
.pd-pack ul { margin: .25rem 0 1.25rem; padding-top: .875rem; border-top: 1px solid hsl(var(--border)); display: grid; gap: .5rem; }
.pd-pack li { display: flex; align-items: flex-start; gap: .5rem; font-size: 14px; line-height: 1.4; color: #3f3f46; }
.pd-pack li svg { margin-top: .125rem; color: #059669; }
.pd-pack > a { margin-top: auto; width: 100%; }
.pd-help { display: flex; flex-direction: column; padding: 1.5rem; border-radius: .75rem; background: var(--deep); color: #fff; }
.pd-help h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.pd-help p { margin-top: .5rem; font-size: 14.5px; line-height: 1.55; color: #dbe9f8; }
.pd-help > div { margin-top: auto; padding-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.pd-help .btn-light { background: #fff; color: var(--deep); }
.pd-help-a { display: inline-flex; align-items: center; gap: .375rem; font-size: 14px; font-weight: 500; color: #fff; }
.pd-help-a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-packs.n4 .pd-help, .pd-help.is-wide { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 2rem; }
.pd-packs.n4 .pd-help p, .pd-help.is-wide p { margin-top: 0; flex: 1 1 18rem; }
.pd-packs.n4 .pd-help > div, .pd-help.is-wide > div { margin-top: 0; padding-top: 0; }
.pd-note { margin-top: .875rem; font-size: 13px; color: hsl(var(--muted-foreground)); }
.pd-rawprice { max-width: 48rem; padding: 1.75rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; }
.pd-steps-t { margin-top: 3rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; color: hsl(var(--foreground)); }
.pd-steps { margin-top: 1rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .pd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pd-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pd-steps li { padding: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; }
.pd-steps span { display: grid; place-items: center; height: 1.75rem; width: 1.75rem; border-radius: 9999px; background: hsl(var(--primary)); font-size: 13px; font-weight: 600; color: #fff; }
.pd-steps b { display: block; margin-top: .75rem; font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); }
.pd-steps small { display: block; margin-top: .25rem; font-size: 14px; line-height: 1.5; color: hsl(var(--muted-foreground)); }

.pd-qa { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .pd-qa.is-two { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: start; } }
.pd-qa .sc-head { margin-bottom: 1.5rem; }
.pd-qa .faq .prose-cms { font-size: 14.5px !important; }
.pd-terms { padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #f8fafc; }
.pd-terms h4 { margin: 1.25rem 0 .625rem; font-size: 14.5px; font-weight: 600; color: hsl(var(--foreground)); }
.pd-terms h4:first-child { margin-top: 0; }
.pd-terms ul { display: grid; gap: .625rem; }
.pd-terms li { position: relative; padding-left: 1rem; font-size: 14px; line-height: 1.5; color: #3f3f46; }
.pd-terms li::before { content: ""; position: absolute; left: 0; top: .55em; height: .3125rem; width: .3125rem; border-radius: 9999px; background: var(--c1); }

.pd-rel { display: grid; gap: .75rem; }
@media (min-width: 768px) { .pd-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-rel a { display: flex; align-items: center; gap: .875rem; height: 100%; padding: .625rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s, border-color .15s; }
.pd-rel a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c1) 50%, #fff); }
.pd-rel-art { display: grid; place-items: center; flex-shrink: 0; height: 4.25rem; width: 5.25rem; border-radius: .5rem; background: var(--tint); }
.pd-rel-art img { height: 3rem; width: auto; }
.pd-rel b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: hsl(var(--foreground)); }
.pd-rel small { display: block; margin-top: .125rem; font-size: 13px; line-height: 1.35; color: hsl(var(--muted-foreground)); }
@media (prefers-reduced-motion: reduce) { .pd-shot, .pd-vid, .pd-rel a { transition: none; } .pd-shots a:hover .pd-shot, .pd-vids a:hover .pd-vid, .pd-rel a:hover { transform: none; } }
/* Product page refinements */
.pd-gi svg { height: 1.125rem; width: 1.125rem; }
#features, #media, #pricing, #faq, #terms { scroll-margin-top: 3.5rem; }

/* ---------- Blog list + article (2026-11-05 content rewrite) ---------- */
.bl-sec { background: #fff; padding: 3.5rem 0 5rem; }
.bl-grid { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 2); transition: border-color .2s, box-shadow .2s, transform .2s; }
.bl-card:hover { border-color: #0068c0; box-shadow: 0 10px 28px -14px rgb(10 74 138 / .35); transform: translateY(-2px); }
.bl-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e8f1fa; }
.bl-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-txt { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.25rem 1.35rem 1.35rem; }
.bl-meta { font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.bl-txt b { font-size: 1.1rem; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: hsl(var(--foreground)); }
.bl-card:hover .bl-txt b { color: #0068c0; }
.bl-txt small { font-size: 14.5px; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.bl-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .6rem; font-size: 14px; font-weight: 600; color: #0068c0; }
@media (min-width: 720px) {
  .bl-card.is-lead { grid-column: 1 / -1; flex-direction: row; }
  .bl-card.is-lead .bl-img { flex: 0 0 52%; aspect-ratio: auto; min-height: 320px; }
  .bl-card.is-lead .bl-txt { justify-content: center; padding: 2rem 2.25rem; }
  .bl-card.is-lead .bl-txt b { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; letter-spacing: -.02em; }
  .bl-card.is-lead .bl-txt small { font-size: 15.5px; }
  .bl-card.is-lead .bl-go { margin-top: .4rem; }
}
.bl-cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 2.5rem; border-radius: calc(var(--radius) * 2); }
.bl-prose { font-size: 16.5px; line-height: 1.75; }
.bl-prose > * + * { margin-top: 1.1rem; }
.bl-prose h2 { margin-top: 2.5rem; font-size: 1.5rem; line-height: 1.25; }
.bl-prose h3 { margin-top: 1.75rem; font-size: 1.15rem; line-height: 1.3; }
.bl-prose h2 + *, .bl-prose h3 + * { margin-top: .6rem; }
.bl-prose ul, .bl-prose ol { padding: 0; list-style: none; }
.bl-prose ol { counter-reset: bl; }
.bl-prose li { position: relative; margin-top: .55rem; }
.bl-prose ol li { counter-increment: bl; padding-left: 2.1rem; }
.bl-prose ol li::before { content: counter(bl); position: absolute; left: 0; top: .22em; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #e8f1fa; color: #0a4a8a; font-size: 12.5px; font-weight: 600; line-height: 1; }
.bl-prose blockquote { padding: .9rem 1.15rem; background: #f4f8fc; border-left: 3px solid #0068c0; border-radius: 0 var(--radius) var(--radius) 0; font-size: 15.5px; color: #3f3f46; }
.bl-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.bl-prose th, .bl-prose td { padding: .65rem .8rem; border: 1px solid hsl(var(--border)); text-align: left; vertical-align: top; }
.bl-prose th { background: #f4f8fc; }
@media (max-width: 719px) { .bl-prose table { display: table; table-layout: fixed; font-size: 13.5px; } .bl-prose th, .bl-prose td { padding: .5rem; white-space: normal !important; overflow-wrap: break-word; } }
.bl-back { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); }
.bl-back a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: #0068c0; }

/* Service pages: same reading rhythm as articles */
.sv-prose > * + * { margin-top: 1rem; }
.sv-prose h2 { margin-top: 2.25rem; }
.sv-prose h2 + * { margin-top: .6rem; }
.sv-prose hr { margin: 2rem 0 1.5rem; }
.sv-prose .m-btn { margin-top: .25rem; }

/* ===== Products list page (products_list.php) ===== */
.pl-hero-in { display: grid; gap: 2.5rem; align-items: center; padding-top: 7rem; padding-bottom: 3.5rem; }
@media (min-width: 640px) { .pl-hero-in { padding-top: 9rem; padding-bottom: 4rem; } }
@media (min-width: 1024px) { .pl-hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } }
.pl-hero-art { display: none; }
@media (min-width: 1024px) {
  .pl-hero-art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .pl-hero-art span { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: .875rem; background: #fff; box-shadow: 0 18px 30px -18px rgb(2 8 23 / .6); }
  .pl-hero-art span:nth-child(n+4) { transform: translateY(1rem); }
  .pl-hero-art span:nth-child(3n+2) { transform: translateY(-.75rem); }
  .pl-hero-art span:nth-child(5) { transform: translateY(.25rem); }
  .pl-hero-art img { width: 72%; height: auto; }
}

.pl-bar { position: sticky; top: 60px; z-index: 30; background: #fff; border-bottom: 1px solid hsl(var(--border)); box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.pl-bar-in { display: flex; flex-direction: column; gap: .625rem; padding-top: .625rem; padding-bottom: .625rem; }
@media (min-width: 1024px) { .pl-bar-in { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: .75rem; padding-bottom: .75rem; } }
.pl-tabs { display: flex; gap: .375rem; min-width: 0; overflow-x: auto; scrollbar-width: none; margin: 0 -1.25rem; padding: 0 1.25rem; }
.pl-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .pl-tabs { margin: 0; padding: 0; overflow: visible; } }
.pl-tab { --c1: #0068c0; flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .875rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: #fff; font-size: 14px; font-weight: 500; color: #334155; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.pl-tab span { font-size: 12px; font-weight: 600; color: var(--c1); }
.pl-tab:hover { border-color: var(--c1); color: var(--c1); }
.pl-tab[aria-pressed="true"] { background: var(--c1); border-color: var(--c1); color: #fff; }
.pl-tab[aria-pressed="true"] span { color: #fff; }
.pl-tab:focus-visible, .pl-search input:focus-visible { outline: 2px solid #0068c0; outline-offset: 2px; }
.pl-search { position: relative; display: block; width: 100%; color: #64748b; }
@media (min-width: 1024px) { .pl-search { width: 20rem; flex-shrink: 0; } }
.pl-search svg { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.pl-search input { width: 100%; height: 2.5rem; padding: 0 .875rem 0 2.5rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: #f8fafc; font-size: 16px; color: hsl(var(--foreground)); }
@media (min-width: 1024px) { .pl-search input { font-size: 14px; } }
.pl-search input:focus { background: #fff; }

/* Below desktop the search row sits first and slides under the header, so only the sector tabs stay on screen. */
@media (max-width: 1023.98px) { .pl-bar { top: calc(60px - 3.125rem); } .pl-search { order: -1; } }
.pl-list { padding: 2.5rem 0 4rem; background: #f6f8fb; }
@media (min-width: 640px) { .pl-list { padding: 3rem 0 5rem; } }
.pl-group { display: grid; gap: 1rem; }
.pl-group[hidden], .pl-item[hidden], .pl-custom[hidden], .pl-empty[hidden] { display: none; }
.pl-group:not([hidden]) ~ .pl-group { margin-top: 2.5rem; }
@media (min-width: 1024px) {
  .pl-group { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .pl-group:not([hidden]) ~ .pl-group { margin-top: 3rem; }
}
.pl-panel { position: relative; overflow: hidden; padding: 1.25rem; border-radius: .875rem; background-color: var(--c1); color: #fff; box-shadow: 0 18px 30px -24px var(--c1); }
.pl-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgb(255 255 255 / .14) 1px, transparent 1.3px), linear-gradient(160deg, rgb(255 255 255 / .1), rgb(2 8 23 / .22)); background-size: 20px 20px, auto; }
.pl-panel > * { position: relative; }
@media (min-width: 1024px) { .pl-panel { position: sticky; top: 8rem; padding: 1.5rem; } }
.pl-panel-ic { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: .625rem; background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.pl-panel h2 { margin-top: .875rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.pl-panel-n { margin-top: .25rem; font-size: 14px; font-weight: 600; color: rgb(255 255 255 / .85); }
.pl-panel-t { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgb(255 255 255 / .22); font-size: 14px; line-height: 1.55; color: rgb(255 255 255 / .92); }

.pl-grid { display: grid; gap: .75rem; min-width: 0; }
@media (min-width: 768px) { .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.pl-item, .pl-custom { min-width: 0; }
.pl-card { display: flex; height: 100%; gap: .875rem; padding: .625rem; border: 1px solid hsl(var(--border)); border-radius: .875rem; background: #fff; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s, transform .2s; }
.pl-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c1) 55%, #fff); box-shadow: 0 16px 26px -18px var(--c1); }
.pl-card:focus-visible, .pl-custom a:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.pl-art { flex-shrink: 0; display: grid; place-items: center; width: 6rem; border-radius: .5rem; background: var(--tint); color: var(--c1); overflow: hidden; }
.pl-art img { display: block; width: 78%; height: auto; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.pl-art img.is-icon { width: 3rem; }
.pl-card:hover .pl-art img { transform: scale(1.07); }
.pl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: .25rem .25rem .125rem 0; }
.pl-body h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: hsl(var(--foreground)); transition: color .15s; }
.pl-card:hover h3 { color: var(--c1); }
.pl-blurb { display: block; margin-top: .25rem; font-size: 13.5px; line-height: 1.45; color: #64748b; }
.pl-foot { margin-top: auto; padding-top: .625rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pl-price { font-size: 14px; font-weight: 700; color: hsl(var(--foreground)); }
.pl-price small { font-size: 12px; font-weight: 500; color: #64748b; }
.pl-price.is-ask { font-size: 13px; font-weight: 500; color: #64748b; }
.pl-go { flex-shrink: 0; display: grid; place-items: center; height: 1.75rem; width: 1.75rem; border-radius: 9999px; background: var(--tint); color: var(--c1); transition: background-color .15s, color .15s; }
.pl-card:hover .pl-go { background: var(--c1); color: #fff; }
@media (min-width: 768px) {
  .pl-card { flex-direction: column; gap: 0; padding: .5rem; }
  .pl-art { width: auto; height: 8rem; }
  .pl-art img { width: auto; height: 5.5rem; }
  .pl-art img.is-icon { width: auto; height: 3.5rem; }
  .pl-body { padding: .875rem .5rem .375rem; }
  .pl-foot { padding-top: .875rem; }
}
.pl-custom a { display: flex; flex-direction: column; height: 100%; padding: 1.125rem; border: 1px dashed color-mix(in srgb, var(--c1) 40%, #fff); border-radius: .875rem; background: color-mix(in srgb, var(--tint) 55%, transparent); transition: background-color .15s, border-color .15s; }
.pl-custom a:hover { background: var(--tint); border-color: var(--c1); }
.pl-custom b { font-size: 15px; font-weight: 600; line-height: 1.3; color: hsl(var(--foreground)); }
.pl-custom span { margin-top: .25rem; font-size: 13.5px; line-height: 1.5; color: #475569; }
.pl-custom em { margin-top: auto; padding-top: .75rem; display: inline-flex; align-items: center; gap: .375rem; font-size: 14px; font-style: normal; font-weight: 600; color: var(--c1); }
.pl-empty { padding: 3.5rem 1rem; border: 1px dashed hsl(var(--border)); border-radius: .875rem; background: #fff; text-align: center; }
.pl-empty p { font-size: 16px; color: #475569; }
.pl-empty div { margin-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; }
@media (prefers-reduced-motion: reduce) { .pl-card, .pl-art img { transition: none; } .pl-card:hover { transform: none; } .pl-card:hover .pl-art img { transform: none; } }

/* Website packages: description line, same height so prices line up across cards */
.pc-desc { line-height: 1.5; }
@media (min-width: 1280px) { .pc-desc { min-height: 4.5em; } }
.price-card > p:first-child { min-height: 1.75rem; }
.price-card.is-featured { padding: calc(1.5rem - 1px); }

/* ===== Product page below the hero: compact shadcn-style summary (.pi-*), 2026-11-05. Hero still uses .pd-*. ===== */
.pi { padding: 1.5rem 0 3rem; background: #fafafa; border-bottom: 1px solid hsl(var(--border)); }
.pi-card { display: block; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.pi-grid { display: grid; gap: .75rem; }
.pi-main, .pi-aside { min-width: 0; }
.pi-aside { display: grid; gap: .75rem; align-content: start; }
.pi-main { display: grid; gap: .75rem; align-content: start; }
@media (min-width: 1024px) {
  .pi-grid { grid-template-columns: minmax(0, 1fr) 26rem; align-items: start; }
  .pi-aside { grid-column: 2; grid-row: 1; position: sticky; top: var(--aside-top, 4.75rem); }
  .pi-main { grid-column: 1; grid-row: 1; }
}
.pi-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem .75rem; }
.pi-h h2 { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.pi-h p { margin-top: .125rem; font-size: 13.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.pi-h.has-art { align-items: center; padding-bottom: .875rem; }
.pi-h.has-art > div { min-width: 0; }
.pi-h-art { display: grid; place-items: center; flex-shrink: 0; height: 3.5rem; width: 4.5rem; border-radius: .5rem; background: #f4f7fb; }
.pi-h-art img { height: 2.75rem; width: auto; }
.pi-b { padding: 0 1.25rem 1.25rem; }
.pi-more { display: inline-flex; flex-shrink: 0; align-items: center; gap: .25rem; font-size: 13px; font-weight: 500; color: hsl(var(--foreground)); }
.pi-more:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Features */
.pi-row { display: grid; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px solid hsl(var(--border)); }
@media (min-width: 640px) { .pi-row { grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; } }
.pi-row h3 { display: flex; align-items: center; gap: .5rem; align-self: start; padding-top: .1875rem; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: hsl(var(--foreground)); }
.pi-row h3 svg { color: hsl(var(--muted-foreground)); }
.pi-badges { display: flex; flex-wrap: wrap; gap: .375rem; }
.pi-badges li { padding: .125rem .5625rem; border: 1px solid hsl(var(--border)); border-radius: .375rem; font-size: 12.5px; line-height: 1.5; color: #3f3f46; }
.pi-incl { display: grid; gap: .625rem 1rem; padding: .875rem 1.25rem 1.125rem; border-top: 1px solid hsl(var(--border)); }
@media (min-width: 640px) { .pi-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pi-incl li { display: flex; align-items: center; gap: .5rem; font-size: 13.5px; color: #3f3f46; }
.pi-incl svg { color: hsl(var(--muted-foreground)); }
/* Features: one continuous list */
.pi-flist { padding: .875rem 1.25rem 1.125rem; border-top: 1px solid hsl(var(--border)); column-count: 2; column-gap: 1.25rem; }
@media (min-width: 900px) { .pi-flist { column-count: 3; } }
.pi-flist li { display: flex; align-items: flex-start; gap: .4375rem; padding: .25rem 0; break-inside: avoid; font-size: 13.5px; line-height: 1.4; color: #3f3f46; }
.pi-flist li svg { margin-top: .1875rem; color: var(--c1); }
/* Screens */
.pi-shots { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .pi-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pi-shots a { display: block; min-width: 0; }
.pi-shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: .5rem; background: #f4f4f5; transition: border-color .15s; }
.pi-shots a:hover .pi-shot { border-color: hsl(var(--foreground) / .35); }
.pi-shot img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: top left; }
.pi-cap { display: block; margin-top: .375rem; font-size: 12.5px; line-height: 1.35; color: hsl(var(--muted-foreground)); }
.pi-vh { margin: 1rem 0 .625rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pi-vh h3 { font-size: 13.5px; font-weight: 500; color: hsl(var(--foreground)); }
/* Pricing */
.pi-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem 1rem; padding: 1rem 1.25rem; }
.pi-facts > div { min-width: 0; }
.pi-facts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.pi-facts dt { display: flex; align-items: center; gap: .375rem; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.pi-facts dd { margin-top: .125rem; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.pi-plans { display: grid; gap: 1px; background: hsl(var(--border)); border-top: 1px solid hsl(var(--border)); }
@media (min-width: 420px) { .pi-plans:not(.is-one) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pi-plan { display: flex; flex-direction: column; min-width: 0; padding: .875rem 1.25rem 1rem; background: #fff; }
.pi-plan-t { font-size: 13.5px; font-weight: 500; color: hsl(var(--foreground)); }
.pi-plan-t span { display: block; font-size: 12.5px; font-weight: 400; color: hsl(var(--muted-foreground)); }
.pi-amt { margin-top: .25rem; font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; color: hsl(var(--foreground)); }
.pi-amt small { display: block; font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: hsl(var(--muted-foreground)); }
.pi-fee { margin: .5rem 0 .75rem; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.pi-fee b { font-weight: 600; color: hsl(var(--foreground)); }
.pi-plan .pi-btn { margin-top: auto; }
.pi-btn { padding-left: .5rem !important; padding-right: .5rem !important; width: 100%; height: 2.25rem !important; font-size: 13.5px !important; }
.pi-checks { display: grid; gap: .375rem; padding: .75rem 1.25rem; border-top: 1px solid hsl(var(--border)); }
.pi-checks li { display: flex; align-items: flex-start; gap: .4375rem; font-size: 12.5px; line-height: 1.4; color: #3f3f46; }
.pi-checks svg { margin-top: .0625rem; color: hsl(var(--muted-foreground)); }
.pi-f { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .75rem 1.25rem .875rem; border-top: 1px solid hsl(var(--border)); }
.pi-f a { font-size: 13px; font-weight: 500; color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: hsl(var(--border)); }
.pi-f a:hover { text-decoration-color: currentColor; }
.pi-f p { width: 100%; font-size: 12px; color: hsl(var(--muted-foreground)); }
.pi-ask .pi-btn { margin-top: .5rem; }
/* Steps */
.pi-steps { display: grid; gap: .875rem; padding: .875rem 1.25rem 1.125rem; border-top: 1px solid hsl(var(--border)); }
@media (min-width: 560px) { .pi-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .pi-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pi-steps li { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.pi-st-art { position: relative; display: grid; place-items: center; flex-shrink: 0; height: 4.75rem; width: 6.5rem; border-radius: .5rem; background: #f4f7fb; }
.pi-st-art img { height: 3.75rem; width: auto; }
.pi-st-art i { position: absolute; top: .375rem; left: .375rem; display: grid; place-items: center; height: 1.25rem; width: 1.25rem; border-radius: 9999px; background: hsl(var(--foreground)); font-size: 11.5px; font-style: normal; font-weight: 600; color: #fff; }
@media (min-width: 560px) {
  .pi-steps li { display: block; }
  .pi-st-art { width: 100%; height: 5.5rem; margin-bottom: .625rem; }
  .pi-st-art img { height: 4.25rem; }
}
.pi-steps b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: hsl(var(--foreground)); }
.pi-steps small { display: block; margin-top: .0625rem; font-size: 12.5px; line-height: 1.45; color: hsl(var(--muted-foreground)); }
/* Accordion */
.pi-acc details { border-top: 1px solid hsl(var(--border)); }
.pi-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6875rem 1.25rem; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: hsl(var(--foreground)); }
.pi-acc summary::-webkit-details-marker { display: none; }
.pi-acc summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.pi-acc summary svg { color: hsl(var(--muted-foreground)); transition: transform .15s; }
.pi-acc details[open] summary svg { transform: rotate(180deg); }
.pi-acc .prose-cms { padding: 0 1.25rem .875rem; font-size: 13.5px !important; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.pi-terms { display: grid; gap: .375rem; padding: 0 1.25rem .875rem; }
.pi-terms li { position: relative; padding-left: .875rem; font-size: 13.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.pi-terms li::before { content: ""; position: absolute; left: 0; top: .6em; height: .25rem; width: .25rem; border-radius: 9999px; background: currentColor; }
/* Related */
.pi-rel { margin-top: 1.5rem; }
.pi-rel-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .625rem; }
.pi-rel-h h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.pi-rel ul { display: grid; gap: .75rem; }
@media (min-width: 768px) { .pi-rel ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pi-rel a { display: flex; align-items: center; gap: .75rem; height: 100%; padding: .75rem; transition: border-color .15s; }
.pi-rel a:hover { border-color: hsl(var(--foreground) / .35); }
.pi-rel-art { display: grid; place-items: center; flex-shrink: 0; height: 2.75rem; width: 3.25rem; border-radius: .5rem; background: #f4f4f5; }
.pi-rel-art img { height: 2rem; width: auto; }
.pi-rel b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: hsl(var(--foreground)); }
.pi-rel small { display: block; margin-top: .0625rem; font-size: 12.5px; line-height: 1.35; color: hsl(var(--muted-foreground)); }
/* Product hero image: smaller, in a framed window */
.pd-frame { position: relative; width: 100%; max-width: 29rem; }
.pd-win { overflow: hidden; border-radius: .625rem; background: #fff; }
.pd-win-bar { display: flex; align-items: center; gap: .3125rem; height: 2rem; padding: 0 .75rem; border-bottom: 1px solid hsl(var(--border)); background: #fafafa; }
.pd-win-bar i { height: .5rem; width: .5rem; flex-shrink: 0; border-radius: 9999px; background: #d4d4d8; }
.pd-win-bar span { min-width: 0; margin-left: .5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.pd-win-body { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: .875rem; }
.pd-hero-art .pd-win-body img { display: block; height: 100%; width: 100%; max-width: none; min-height: 0; object-fit: contain; border-radius: 0; background: none; box-shadow: none; filter: none; }
.pd-hero-art .pd-win-body img.is-art { height: 72%; width: auto; }
@media (min-width: 1024px) { .pd-hero-art { justify-items: end; } }
/* Images grey until hovered; devices with no hover keep colour */
@media (hover: hover) {
  .pi-h-art img, .pi-st-art img, .pi-shot img, .pi-rel-art img { filter: grayscale(1); transition: filter .2s; }
  .pi-card:hover .pi-h-art img, .pi-steps li:hover .pi-st-art img, .pi-shots a:hover .pi-shot img, .pi-shots a:focus-visible .pi-shot img, .pi-rel a:hover .pi-rel-art img, .pi-rel a:focus-visible .pi-rel-art img { filter: none; }
}

/* Website packages: simple horizontal card = illustration | details | features | price. Stacks on phones */
.pk-sec { padding-block: 3rem; }
.pk-foot { margin-top: 1.5rem; }
.pk-intro { margin-bottom: 1.75rem; }
.pk-intro h2 { margin: 0; font-size: 1.625rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: hsl(var(--foreground)); }
.pk-intro p { margin: .4rem 0 0; font-size: 1rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
@media (min-width: 640px) { .pk-sec { padding-block: 4.5rem 3.5rem; } }
.pk-list { display: grid; gap: 1.25rem; }
.pk-list > .price-card { display: grid; gap: 1rem 1.5rem; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-areas: "art info" "features features" "buy buy"; align-items: start; padding: 1.5rem; height: auto; }
.pc-art { grid-area: art; align-self: center; }
.pc-art img { display: block; width: 100%; height: auto; }
.pk-list .pc-info { grid-area: info; align-self: center; }
.pk-list .pc-buy { grid-area: buy; }
.pk-list .pc-features { grid-area: features; margin: 0; border-top: 1px solid hsl(var(--border)); padding-top: .75rem; }
.pk-list .price-li { border: 0; padding: .3rem 0; }
.pk-list .pc-desc { min-height: 0; }
.pc-excl { margin-top: .5rem; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #b45309; }
.pk-list .pc-buy .text-lg:last-child { font-size: .875rem; white-space: nowrap; }
.pk-list .pc-info .h-card { font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: #0068c0; }
@media (min-width: 640px) {
  .pk-list > .price-card { grid-template-columns: 7rem minmax(0, 1fr) 14rem; grid-template-rows: auto 1fr; grid-template-areas: "art info buy" "features features buy"; }
  .pk-list .pc-features { border-top: 0; padding-top: 0; }
  .pk-list .pc-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}
@media (min-width: 1100px) {
  .pk-list > .price-card { grid-template-columns: 8.5rem minmax(0, 1fr) 13.5rem; grid-template-areas: "art info buy" "art features buy"; gap: .9rem 1.75rem; padding: 1.75rem 2rem; }
  .pk-list .pc-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pk-list .pc-buy { border-left: 1px solid hsl(var(--border)); padding-left: 1.75rem; }
}

/* Website packages: about/SEO section under the cards */
.pk-about { border-top: 1px solid hsl(var(--border)); padding-top: 3.5rem; font-size: .9375rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.pk-block + .pk-block { margin-top: 3.5rem; }
.pk-about h2 { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: hsl(var(--foreground)); }
.pk-about h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; color: hsl(var(--foreground)); }
.pk-about p { margin: 0; }
.pk-about a { color: #0068c0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pk-lead { max-width: 52rem; }
.pk-lead h2 { margin-bottom: .6rem; }
.pk-fit { display: grid; gap: 1rem; }
.pk-fit-item { padding: 1.25rem 1.4rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; }
.pk-fit-item h3 { margin-bottom: .35rem; color: #0068c0; }
.pk-table { width: 100%; border-collapse: collapse; color: hsl(var(--foreground)); }
.pk-table thead th { padding: .7rem 1rem; text-align: left; font-size: 13px; font-weight: 600; color: hsl(var(--muted-foreground)); background: hsl(var(--secondary)); }
.pk-table thead th:first-child { border-radius: .5rem 0 0 .5rem; }
.pk-table thead th:last-child { border-radius: 0 .5rem .5rem 0; }
.pk-table tbody th, .pk-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid hsl(var(--border)); }
.pk-table tbody th { font-weight: 600; }
.pk-small { margin-top: .9rem !important; font-size: 13px; }
.pk-check { display: grid; gap: .65rem 2rem; margin: 0; padding: 0; list-style: none; color: hsl(var(--foreground)); }
.pk-check li { display: flex; align-items: flex-start; gap: .6rem; }
.pk-tick { flex: none; width: 1rem; height: 1rem; margin-top: .25rem; color: #059669; }
.pk-qa { border-top: 1px solid hsl(var(--border)); }
.pk-qa details { border-bottom: 1px solid hsl(var(--border)); }
.pk-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; }
.pk-qa summary::-webkit-details-marker { display: none; }
.pk-qa summary svg { flex: none; color: hsl(var(--muted-foreground)); transition: transform .2s; }
.pk-qa details[open] summary svg { transform: rotate(180deg); }
.pk-qa summary:hover h3 { color: #0068c0; }
.pk-qa details p { padding: 0 2rem 1.1rem 0; }
.pk-related { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin-top: 2.5rem !important; font-size: 14px; }
@media (max-width: 719px) {
  .pk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pk-table, .pk-table tbody, .pk-table tr, .pk-table tbody th, .pk-table td { display: block; }
  .pk-table tr { padding: .9rem 1.1rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; }
  .pk-table tr + tr { margin-top: .75rem; }
  .pk-table tbody th { padding: 0 0 .4rem; border: 0; color: #0068c0; }
  .pk-table td { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border: 0; text-align: right; }
  .pk-table td::before { content: attr(data-label); color: hsl(var(--muted-foreground)); text-align: left; }
}
@media (min-width: 720px) { .pk-fit, .pk-check { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Optional page banner illustration on the right (page_hero 5th argument), blends into the banner colour. Hidden below 1024px where the text needs the width */
.ph-art { display: none; }
@media (min-width: 1024px) { .page-head:has(.ph-art) h1 { max-width: 40rem; } .ph-art { display: block; position: absolute; right: 2.5rem; top: 56%; translate: 0 -50%; width: 260px; height: auto; pointer-events: none; } }
@media (min-width: 1200px) { .ph-art { width: 400px; } }

/* Service detail page (service.php?id=1, inc/service_software.php): plain sections, white cards */
.svd-sec { padding-block: 3rem; }
.svd-alt { background: #f7f9fc; }
.svd-sec h2 { margin: 0; font-size: 1.625rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: hsl(var(--foreground)); }
.svd-h { margin-bottom: 1.5rem !important; }
.svd-intro p { margin: .75rem 0 0; max-width: 52rem; font-size: 1.0625rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
.svd-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.svd-sub { margin: -1rem 0 1.5rem; color: hsl(var(--muted-foreground)); }
.svd-grid, .svd-compare, .svd-links { display: grid; gap: 1rem; }
.svd-card { display: flex; gap: 1rem; padding: 1.25rem 1.4rem; background: #fff; border: 1px solid hsl(var(--border)); border-radius: .75rem; }
.svd-card h3, .svd-steps h3 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; color: #0068c0; }
.svd-card p, .svd-steps p { margin: .3rem 0 0; font-size: 14px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.svd-ic { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .6rem; background: #eff6ff; color: #0068c0; }
.svd-steps { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.svd-num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: .6rem; border-radius: 50%; background: #0068c0; color: #fff; font-size: 14px; font-weight: 700; }
.svd-two { display: grid; gap: 2rem; align-items: center; }
.svd-art { display: none; width: 100%; max-width: 380px; height: auto; justify-self: center; }
.svd-check { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.5; color: hsl(var(--foreground)); }
.svd-check li { display: flex; align-items: flex-start; gap: .6rem; }
.svd-col { flex-direction: column; }
.svd-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; font-size: 14px; font-weight: 600; color: #0068c0; }
.svd-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.svd-narrow { max-width: 56rem; }
.svd-qa h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; color: hsl(var(--foreground)); }
.svd-qa p { margin: 0; font-size: .9375rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.svd-qa a, .svd-more a { color: #0068c0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.svd-links a { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; transition: border-color .15s; }
.svd-links a:hover { border-color: #0068c0; }
.svd-links strong { display: block; font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); }
.svd-links small { display: block; font-size: 13px; color: hsl(var(--muted-foreground)); }
.svd-more { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin-top: 1.25rem; font-size: 14px; color: hsl(var(--muted-foreground)); }
@media (min-width: 640px) {
  .svd-sec { padding-block: 4rem; }
  .svd-grid, .svd-compare, .svd-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .svd-grid, .svd-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svd-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .svd-two { grid-template-columns: minmax(0, 1fr) 24rem; }
  .svd-art { display: block; }
}
.svd-web > div > p { margin: .75rem 0 0; font-size: .9375rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
.svd-web .svd-card h3 { margin-bottom: .1rem; }
#web-applications { scroll-margin-top: 4.5rem; }
.svd-links a { background: #fff; }
.svd-lead { margin: -.75rem 0 1.25rem; font-size: .9375rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }

/* Contact form: sent message */
.cf-done { margin-top: 2.5rem; display: flex; gap: .75rem; padding: 1.25rem; border: 1px solid #a7f3d0; border-radius: .75rem; background: #ecfdf5; color: #065f46; }
.cf-done.hidden { display: none; }
.cf-done svg { margin-top: .125rem; }
.cf-done b { display: block; font-size: 15px; font-weight: 600; }
.cf-done p { margin-top: .25rem; font-size: 14px; line-height: 1.55; }
.cf-done a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Client cards from the CRM API (clients_featured.php) */
.cl-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.cl-card { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem; background: #fff; border: 1px solid #e4e4e7; border-radius: .5rem; min-width: 0; }
.cl-logo { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: .5rem; background: #f4f4f5; color: #52525b; font-weight: 600; font-size: 1.125rem; overflow: hidden; }
.cl-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cl-body { min-width: 0; flex: 1; }
.cl-name { font-size: .9375rem; font-weight: 600; line-height: 1.35; color: #18181b; overflow-wrap: anywhere; }
.cl-addr { margin-top: .25rem; font-size: .8125rem; line-height: 1.45; color: #71717a; overflow-wrap: anywhere; }
.cl-prods { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.cl-prods span { padding: .0625rem .5rem; border-radius: 999px; background: #eff6ff; color: #0a4a8a; font-size: .6875rem; font-weight: 500; line-height: 1.5; }
.wh-table tbody tr { background: #fff; }

/* Bangla text on client cards = Baloo Da 2 (unicode-range keeps English text in Inter) */
@font-face { font-family: 'ExBn'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(../fonts/baloo-da-2-bengali.woff2) format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+25CC, U+A8F1, U+11DF0-11DF1; }
.cl-name, .cl-addr, .cl-logo { font-family: 'ExBn', Inter, ui-sans-serif, system-ui, sans-serif; }
.cl-more { margin-top: 1.5rem; text-align: center; }
.cl-grid { margin-top: 1.25rem; }

/* Logo title + tagline (brand_lockup in inc/site.php), top bar, phone menu and footer. Gradient name, IT badge: blue on light, white on dark */
.brand { gap: .7rem; }
.brand-mark img { height: 1.75rem; width: auto; }
.brand-txt { gap: .3rem; }
.brand-txt b { display: flex; align-items: center; gap: .35rem; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-size: 1.4375rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.brand-txt b span { background: linear-gradient(95deg, #0a3a70 0%, #0068c0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .08em; margin-bottom: -.08em; }
.brand-txt b i { padding: .16rem .36rem .2rem; border-radius: .34rem; background: linear-gradient(135deg, #0a4a8a 0%, #0a84e0 100%); color: #fff; font-size: 1.125rem; font-style: normal; letter-spacing: 0; transition: background .25s, color .25s; }
.brand-txt small { margin-top: 0; font-family: Inter, system-ui, sans-serif; font-size: 8.5px; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: .17em; text-transform: uppercase; color: #5b6878; }
.brand-txt small em { font-style: normal; font-weight: 500; color: #0068c0; transition: color .25s; }
.js-hd .site-header:not(.is-scrolled) .brand-txt b span, .sc-footer .brand-txt b span { background-image: linear-gradient(95deg, #fff 0%, #bfdbfe 100%); }
.js-hd .site-header:not(.is-scrolled) .brand-txt b i, .sc-footer .brand-txt b i { background: linear-gradient(135deg, #fff 0%, #dbeafe 100%); color: #0a4a8a; }
.js-hd .site-header:not(.is-scrolled) .brand-txt small, .js-hd .site-header:not(.is-scrolled) .brand-txt small em, .sc-footer .brand-txt small, .sc-footer .brand-txt small em { color: #fff; }
.dm-a { color: #0068c0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .dm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svd-alt .svd-qa details { border-color: hsl(var(--border)); }

/* Top menu: one size smaller with more space between items */
.site-header nav[aria-label="Main"] { gap: .25rem; }
.site-header .nav-link { font-size: 13px; }
@media (max-width: 1279px) { .site-header nav[aria-label="Main"] { gap: .125rem; } }

/* Products dropdown: three balanced columns, each product with its illustration, short name and one line */
.mega-panel { width: 62rem; }
.sc-dd-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 1.25rem 1.25rem 1rem; }
.sc-dd-col { display: grid; align-content: start; gap: 1.1rem; min-width: 0; }
.sc-dd-sec { display: block; padding: 0 .5rem .5rem; margin-bottom: .25rem; border-bottom: 1px solid hsl(var(--border)); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #5b6878; }
.sc-dd-sec:hover { color: #0068c0; text-decoration: none; }
.sc-dd-p { display: flex; align-items: center; gap: .7rem; padding: .3rem .5rem; border-radius: .5rem; transition: background-color .15s; }
.sc-dd-p:hover { background: #f1f6fc; }
.sc-dd-art { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2rem; color: var(--c1); }
.sc-dd-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sc-dd-p b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #0f2a4a; }
.sc-dd-p:hover b { color: #0068c0; }
.sc-dd-p small { display: block; margin-top: .05rem; font-size: 12px; line-height: 1.3; color: #66727f; }

/* Contact page */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ct-sec { padding-block: 2.5rem; }
.ct-ways { display: grid; gap: 1rem; }
.ct-way { display: flex; gap: .9rem; min-width: 0; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid hsl(var(--border)); border-radius: .75rem; transition: border-color .15s, box-shadow .15s; }
.ct-way:hover { border-color: #0068c0; box-shadow: 0 8px 20px -14px rgb(15 42 74 / .4); }
.ct-way-t { display: grid; gap: .15rem; min-width: 0; }
.ct-way small { font-size: 12.5px; font-weight: 600; color: #0068c0; }
.ct-way b { font-size: 15.5px; font-weight: 700; line-height: 1.3; color: #0f2a4a; overflow-wrap: anywhere; }
.ct-way em { font-size: 12.5px; font-style: normal; line-height: 1.35; color: hsl(var(--muted-foreground)); }
.ct-grid { display: grid; gap: 2rem; align-items: start; }
.ct-form-col { min-width: 0; }
.ct-form-col > h2, .ct-h { margin: 0; font-size: 1.625rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: hsl(var(--foreground)); }
.ct-h { margin-bottom: 1.5rem; }
.ct-sub { margin: .4rem 0 1.25rem; color: hsl(var(--muted-foreground)); }
.ct-main #contactForm { background: #fff; }
.ct-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.ct-chip { padding: .3rem .7rem; background: #fff; border: 1px solid hsl(var(--border)); border-radius: 99px; font-size: 12.5px; font-weight: 500; color: #38424d; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.ct-chip:hover { border-color: #0068c0; color: #0068c0; }
.ct-chip.is-on { background: #eff6ff; border-color: #0068c0; color: #0068c0; }
.ct-aside { display: grid; gap: 1rem; min-width: 0; }
.ct-box { padding: 1.25rem 1.4rem; background: #fff; border: 1px solid hsl(var(--border)); border-radius: .75rem; }
.ct-box h3 { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; color: #0068c0; }
.ct-steps { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.ct-steps li { display: flex; gap: .7rem; }
.ct-steps span { display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #0068c0; color: #fff; font-size: 12.5px; font-weight: 700; }
.ct-steps b { display: block; font-size: 14px; font-weight: 600; color: #0f2a4a; }
.ct-steps p { margin: .1rem 0 0; font-size: 13px; line-height: 1.45; color: hsl(var(--muted-foreground)); }
.ct-hours { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 14px; color: #38424d; }
.ct-hours svg { flex: none; color: #0068c0; }
.ct-art { display: none; width: 100%; max-width: 300px; height: auto; justify-self: center; }
@media (min-width: 640px) { .ct-sec { padding-block: 3.5rem; } .ct-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: 2.5rem; }
  .ct-art { display: block; }
}
@media (min-width: 1200px) { .ct-ways { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Services dropdown: compact list + illustration panel (own width, separate from the Products dropdown) */
.mega-panel.sc-dd-2 { width: 39rem; }
.sc-dd-split { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; }
.sc-dd-list { display: grid; gap: .1rem; padding: .625rem; min-width: 0; }
.sc-dd-art-panel { display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: 1.25rem 1.1rem; background: #f4f7fb; border-left: 1px solid hsl(var(--border)); transition: background-color .15s; }
.sc-dd-art-panel:hover { background: #eaf2fb; }
.sc-dd-illus { display: block; width: 100%; height: auto; margin-bottom: .5rem; }
.sc-dd-art-panel b { font-size: 14px; font-weight: 700; line-height: 1.3; color: #0f2a4a; }
.sc-dd-art-panel small { display: inline-flex; align-items: center; gap: .3rem; font-size: 12.5px; font-weight: 500; color: #0068c0; }