/* Seyon Solutions design layer: page banners, legal contents list, richer cards. Loaded after all other styles. */

/* ---------- Page banner (About, Contact, Products, legal pages) ---------- */
.page-hero {
  position: relative; overflow: hidden; color: #f5fafb; padding: 76px 0 68px;
  background:
    radial-gradient(ellipse 60% 90% at 92% 0%, rgba(243, 156, 45, 0.38), transparent 60%),
    radial-gradient(ellipse 55% 80% at 4% 100%, rgba(78, 199, 207, 0.28), transparent 60%),
    linear-gradient(135deg, #0d252c 0%, #1f4d57 62%, #2b6b78 100%);
}
.page-hero::before { /* dotted texture fading in from the right */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1.2px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 90%); mask-image: linear-gradient(100deg, transparent 25%, #000 90%);
}
.page-hero::after { /* teal-to-orange baseline */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #4ec7cf 0%, #f39c2d 100%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.16); color: #d5f3f3;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.page-hero .eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #f39c2d; box-shadow: 0 0 0 4px rgba(243, 156, 45, 0.25); }
.page-hero h1 { margin: 0 0 12px; color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.12; letter-spacing: -.035em; -webkit-text-fill-color: #fff; background: none; }
.page-hero p { margin: 0; max-width: 62ch; color: #cfe3e6; font-size: 1.12rem; line-height: 1.65; }
.page-hero .meta { margin-top: 18px; font-size: .9rem; color: #a9c7cc; }

/* ---------- Legal pages: contents list + readable article ---------- */
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; max-width: 1120px !important; }
.legal-toc {
  position: sticky; top: 108px; padding: 20px 18px; border-radius: 18px; background: var(--card);
  border: 1px solid var(--tint-line, rgba(31, 77, 87, .1)); box-shadow: 0 14px 34px var(--glow);
  max-height: calc(100vh - 140px); overflow: auto;
}
.legal-toc b { display: block; margin-bottom: 10px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legal-toc a { display: block; padding: 7px 10px; margin: 1px 0; border-radius: 10px; border-left: 3px solid transparent; color: var(--text); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.legal-toc a:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.legal-toc a.on { background: color-mix(in srgb, var(--brand) 10%, transparent); border-left-color: var(--warm); color: var(--brand); font-weight: 700; }
.legal-body { min-width: 0; padding: 34px 38px; border-radius: 22px; background: var(--card); border: 1px solid var(--tint-line, rgba(31, 77, 87, .1)); box-shadow: 0 18px 44px var(--glow); }
.legal-body > .note:first-child { display: inline-block; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--warm) 18%, transparent); color: var(--text); font-weight: 600; }
.legal h2 { position: relative; margin-top: 34px; padding-left: 16px; scroll-margin-top: 110px; }
.legal h2::before { content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 4px; background: linear-gradient(180deg, #4ec7cf, #f39c2d); }
.legal-table th { color: var(--brand); }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 20px; }
  .legal-toc { position: static; max-height: none; }
  .legal-body { padding: 24px 20px; }
}

/* ---------- Cards, lists and product pages ---------- */
.card { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px color-mix(in srgb, var(--a, var(--brand)) 22%, transparent); }
.phead {
  position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--product-accent, var(--brand)) 22%, transparent);
  background:
    radial-gradient(ellipse 50% 120% at 100% 0%, color-mix(in srgb, var(--product-accent, var(--brand)) 20%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--product-accent, var(--brand)) 9%, var(--card)), var(--surface-soft)) !important;
  box-shadow: 0 22px 50px color-mix(in srgb, var(--product-accent, var(--brand)) 16%, transparent);
}
.phead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--product-accent, var(--brand)), var(--warm)); }
.feat.big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.feat.big li {
  position: relative; margin: 0; padding: 14px 16px 14px 46px; border-radius: 14px; background: var(--card);
  border: 1px solid var(--tint-line, rgba(31, 77, 87, .1)); box-shadow: 0 8px 20px var(--glow); transition: transform .2s, border-color .2s;
}
.feat.big li:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--product-accent, var(--brand)) 45%, transparent); }
.feat.big li::before {
  content: '✓'; position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--product-accent, var(--brand)) 16%, transparent); color: var(--product-accent, var(--brand)); font-size: .8rem; font-weight: 800;
}
@media (max-width: 700px) { .feat.big { grid-template-columns: 1fr; } }
details.box { transition: border-color .2s, box-shadow .2s; }
details.box[open] { border-color: color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: 0 14px 32px var(--glow); }
details.box summary { cursor: pointer; }

/* ---------- About & Contact ---------- */
.hl > div, .trust-card, .proof-item { transition: transform .25s ease, box-shadow .25s ease; }
.hl > div:hover { transform: translateY(-4px); box-shadow: 0 22px 44px var(--glow); }
.contacts a { transition: transform .2s, box-shadow .2s; }
.contacts a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px var(--glow); }

/* ---------- Dark mode touch-ups ---------- */
:root[data-theme=dark] .page-hero { background:
    radial-gradient(ellipse 60% 90% at 92% 0%, rgba(247, 183, 92, 0.22), transparent 60%),
    radial-gradient(ellipse 55% 80% at 4% 100%, rgba(143, 231, 232, 0.16), transparent 60%),
    linear-gradient(135deg, #07161b 0%, #0f2f37 62%, #17454f 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .page-hero { background:
    radial-gradient(ellipse 60% 90% at 92% 0%, rgba(247, 183, 92, 0.22), transparent 60%),
    radial-gradient(ellipse 55% 80% at 4% 100%, rgba(143, 231, 232, 0.16), transparent 60%),
    linear-gradient(135deg, #07161b 0%, #0f2f37 62%, #17454f 100%); } }

@media (prefers-reduced-motion: reduce) { .card, .hl > div, .contacts a, .feat.big li { transition: none; } .card:hover, .hl > div:hover, .contacts a:hover { transform: none; } }

/* ---------- About: vision & mission cards ---------- */
.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.vm-card { position: relative; overflow: hidden; padding: 34px 32px 32px; border-radius: 24px; background: var(--card); border: 1px solid var(--tint-line, rgba(31, 77, 87, .1)); box-shadow: 0 20px 46px var(--glow); transition: transform .25s, box-shadow .25s; }
.vm-card:hover { transform: translateY(-4px); box-shadow: 0 28px 56px var(--glow); }
.vm-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #1f4d57, #4ec7cf); }
.vm-card.vm-b::before { background: linear-gradient(90deg, #f39c2d, #f7c26b); }
.vm-card h2 { margin: 14px 0 10px; font-size: 1.5rem; }
.vm-card p { margin: 0; font-size: 1.08rem; line-height: 1.75; color: var(--muted); }
.vm-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; background: var(--surface-soft); }
.vm-card.vm-b .vm-ic { background: var(--surface-warm); }
@media (max-width: 800px) { .vm { grid-template-columns: 1fr; } }

/* ---------- Services dropdown (header) ---------- */
.site-header .nav-dd { position: static; display: flex; }
.site-header .nav-dd-btn {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 10px 14px; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 1.03rem; font-weight: 700; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.site-header .nav-dd-btn:hover, .site-header .nav-dd[data-open=true] .nav-dd-btn { color: var(--brand); background: var(--surface-soft); }
.site-header .nav-dd-btn[aria-current=page] { color: var(--brand); }
.site-header .nav-dd-btn[aria-current=page]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 3px; background: var(--brand); border-radius: 3px; }
.site-header .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.site-header .nav-dd[data-open=true] .chev { transform: translateY(1px) rotate(-135deg); }
.mega { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #4ec7cf, #f39c2d) 1; box-shadow: 0 28px 60px rgba(16, 43, 51, .18); animation: mega-in .18s ease-out; }
.nav-dd[data-open=true] .mega { display: block; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega-inner { max-width: 1480px; padding: 26px 32px 0 !important; }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 18px; }
.site-header .mega a.mega-item {
  display: flex; align-items: flex-start; gap: 14px; min-height: 0; padding: 14px; border-radius: 14px; background: transparent; color: var(--text); font-weight: 400; text-decoration: none;
  transition: background .18s, transform .18s;
}
.site-header .mega a.mega-item:hover { background: var(--surface-soft); transform: translateY(-2px); color: var(--text); }
.site-header .mega a.mega-item::after { display: none; }
.mega-item b { display: block; margin-bottom: 3px; font-size: 1rem; line-height: 1.3; color: var(--text); }
.mega-item small { display: block; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.mega-ic { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 1.35rem; background: linear-gradient(135deg, var(--surface-soft), var(--surface-warm)); border: 1px solid var(--tint-line, rgba(31, 77, 87, .1)); }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 16px 4px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.mega-links { display: flex; gap: 10px; }
.site-header .mega .mega-links a { min-height: 0; padding: 9px 16px; border-radius: 999px; font-size: .92rem; font-weight: 700; border: 1.5px solid color-mix(in srgb, var(--brand) 32%, transparent); color: var(--brand); background: var(--card); }
.site-header .mega .mega-links a:last-child { background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; }
.site-header .mega .mega-links a:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--brand) 9%, var(--card)); }
.site-header .mega .mega-links a:last-child:hover { background: var(--btn-bg-hover); }
@media (max-width: 1400px) { .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1150px) {
  .site-header .nav-dd { flex-direction: column; flex: 1 0 100%; }
  .site-header .nav-dd-btn { justify-content: center; }
  .mega { position: static; box-shadow: none; border: 1px solid var(--line); border-image: none; border-radius: 16px; margin: 6px 0 8px; animation: none; max-height: 62vh; overflow: auto; }
  .mega-inner { padding: 12px 12px 0 !important; }
  .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) { .mega-grid { grid-template-columns: 1fr; } }

/* ---------- Services page ---------- */
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-badges span { padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); color: #e8f7f7; font-weight: 600; font-size: .95rem; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.svc-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--tint-line, rgba(31, 77, 87, .1)); box-shadow: 0 14px 34px var(--glow); transition: transform .25s, box-shadow .25s; scroll-margin-top: 130px; overflow: hidden; }
.svc-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #4ec7cf, #f39c2d); opacity: .85; }
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px var(--glow); }
.svc-card.flash { animation: svc-flash 1.6s ease-out; }
@keyframes svc-flash { 0%, 100% { box-shadow: 0 14px 34px var(--glow); } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warm) 60%, transparent), 0 26px 52px var(--glow); } }
.svc-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; font-size: 1.7rem; background: linear-gradient(135deg, var(--surface-soft), var(--surface-warm)); border: 1px solid var(--tint-line, rgba(31, 77, 87, .1)); }
.svc-card h3 { margin: 16px 0 8px; font-size: 1.15rem; line-height: 1.3; }
.svc-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.65; }
.svc-ask { margin-top: auto; color: var(--brand); font-weight: 700; text-decoration: none; }
.svc-ask:hover { text-decoration: underline; }
.svc-ask span { color: var(--warm); transition: transform .2s; display: inline-block; }
.svc-card:hover .svc-ask span { transform: translateX(4px); }
.svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 34px 36px; border-radius: 26px; background: var(--card); border: 1px solid var(--tint-line, rgba(31, 77, 87, .1)); box-shadow: 0 20px 46px var(--glow); }
.svc-cta > div:first-child { flex: 1 1 340px; }

/* ---------- Header fit fixes (Services added) ---------- */
.mega-inner { display: block !important; }
@media (min-width: 1151px) {
  .site-header .brand .header-logo { --w: 225px !important; }
  .site-header .header-branding { gap: 16px; }
  .site-header .header-partner { padding-left: 16px; }
  .site-header .header-partner img { width: 84px; }
  .top.site-header .wrap.header-inner { gap: 18px; padding-inline: 24px; }
  .site-header .header-menu { gap: 14px; }
  .site-header .header-nav { gap: 2px; }
  .site-header .header-nav a, .site-header .nav-dd-btn { padding: 10px 10px; font-size: .98rem; }
  .site-header .header-actions { gap: 8px; }
  .site-header .header-tool { padding-inline: 11px; gap: 7px; }
  .site-header .header-demo { padding-inline: 14px; gap: 8px; }
}
@media (max-width: 1300px) and (min-width: 1151px) { .site-header .header-partner { display: none; } }
@media (max-width: 1150px) {
  .site-header .header-nav { flex-wrap: wrap; }
  .site-header .nav-dd { flex: 1 0 100%; min-width: 0; order: 9; }
  .mega { max-width: 100%; }
}

/* ---------- Dropdowns for Products / About / Contact ---------- */
.mega-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-logo { background: #fff !important; padding: 5px; overflow: hidden; }
.mega-logo img { width: 100%; height: 100%; object-fit: contain; }
.mega-wa { background: linear-gradient(135deg, #d9f7e4, #f0fbf4) !important; }
.site-header .nav-dd.mini { position: relative; }
.mega.mini { left: 0; right: auto; top: calc(100% + 10px); width: 380px; border: 1px solid var(--line); border-image: none; border-radius: 18px; box-shadow: 0 26px 56px rgba(16, 43, 51, .2); overflow: hidden; }
.mega.mini::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, #4ec7cf, #f39c2d); }
.nav-dd.mini.end .mega.mini { left: auto; right: 0; }
.mini-list { display: grid; gap: 2px; padding: 10px; }
.mini-foot { margin: 0; padding: 12px 16px 14px; background: var(--surface-soft); border-top: 1px solid var(--line); }
.mega-btn { padding: 9px 16px; border-radius: 999px; border: 0; background: var(--btn-bg); color: var(--btn-ink); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; }
.mega-btn:hover { background: var(--btn-bg-hover); }
.vm-card, #stand-for { scroll-margin-top: 130px; }
@media (max-width: 1400px) { .mega-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1150px) {
  .site-header .nav-dd.mini { position: static; }
  .mega.mini, .nav-dd.mini.end .mega.mini { position: static; width: auto; box-shadow: none; }
  .mega-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .mega-grid-3 { grid-template-columns: 1fr; } }

/* ---------- Call us (header + buttons) ---------- */
.site-header .header-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 10px 16px; border-radius: 10px; text-decoration: none; white-space: nowrap;
  font-weight: 800; font-size: 1rem; color: var(--brand); background: var(--card); border: 1.5px solid color-mix(in srgb, var(--brand) 38%, transparent); transition: transform .2s, background .2s, border-color .2s;
}
.site-header .header-call:hover { background: color-mix(in srgb, var(--brand) 9%, var(--card)); border-color: var(--brand); transform: translateY(-2px); }
.header-call .call-glyph { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--btn-chip); font-size: .9rem; line-height: 1; animation: ring 3.2s ease-in-out infinite; }
@keyframes ring { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-14deg); } 94% { transform: rotate(14deg); } 97% { transform: rotate(-8deg); } }
.mega-callic { background: linear-gradient(135deg, #ffe9c9, #fff4e2) !important; }
.mega-call b { color: var(--brand); }
.btn.call { background: var(--card); color: var(--brand); border: 1.5px solid color-mix(in srgb, var(--brand) 38%, transparent); }
@media (min-width: 1151px) {
  .site-header .header-tool { font-size: 0; gap: 0; padding-inline: 14px; }  /* Search and Theme become icon-only to make room */
  .site-header .header-call { padding-inline: 12px; gap: 8px; }
}
@media (max-width: 1150px) {
  .site-header .header-actions { grid-template-columns: 1fr 1fr; }
  .site-header .header-call, .site-header .header-demo { grid-column: auto; }
}
@media (max-width: 480px) { .site-header .header-call { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .header-call .call-glyph { animation: none; } }

/* Mobile: dropdown entries stay left-aligned and full width (the mobile nav centres plain links). */
@media (max-width: 1150px) {
  .site-header .header-nav .mega a.mega-item { justify-content: flex-start; flex: none; width: 100%; text-align: left; font-size: 1rem; }
  .site-header .header-nav .mega .mega-links a { justify-content: center; flex: none; width: auto; }
}

/* Narrow desktops (1151-1279px): squeeze a little more so nothing collides. */
@media (min-width: 1151px) and (max-width: 1279px) {
  .site-header .brand .header-logo { --w: 200px !important; }
  .top.site-header .wrap.header-inner { gap: 12px; padding-inline: 16px; }
  .site-header .header-nav a, .site-header .nav-dd-btn { padding: 10px 8px; font-size: .94rem; }
  .site-header .header-call .call-text { display: none; }
  .site-header .header-call { padding-inline: 10px; }
  .site-header .header-demo { padding-inline: 12px; font-size: .95rem; }
}
/* Keep the logo, partner badge and menu from ever overlapping on very wide screens as well. */
.site-header .header-branding { flex: 0 0 auto; }
.site-header .header-menu { min-width: 0; }

/* ---------- Brand tagline (replaces the "Supporting Partner" line in the logo and the partner badge) ---------- */
.site-header .header-branding { flex-direction: row; align-items: center; gap: 18px; }
.site-header .header-branding .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; }
.brand-tag { display: block; padding-left: 3px; font-size: .78rem; font-weight: 700; letter-spacing: .015em; line-height: 1.2; color: var(--brand); white-space: nowrap; }
.brand-tag::before { content: ''; display: inline-block; width: 18px; height: 3px; margin: 0 8px 3px 0; border-radius: 3px; background: linear-gradient(90deg, #4ec7cf, #f39c2d); vertical-align: middle; }
.footer-signature { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.footer-signature .brand-tag { color: #cfe3e6; }
@media (min-width: 1151px) { .site-header .brand .header-logo { --w: 250px !important; } }
@media (max-width: 480px) { .brand-tag { font-size: .7rem; } }
@media (min-width: 1536px) { .site-header .brand .header-logo { --w: 300px !important; } .brand-tag { font-size: .8rem; } }
@media (min-width: 1280px) and (max-width: 1535px) { .site-header .brand .header-logo { --w: 255px !important; } }
.site-header .brand-tag { font-size: min(.78rem, 3.1vw); }
@media (max-width: 1150px) {
  .site-header .header-branding { flex: 1 1 0; min-width: 0; }
  .site-header .brand-tag { white-space: normal; font-size: .72rem; }
}
@media (max-width: 480px) { .site-header .brand-tag { font-size: .66rem; } .site-header .brand-tag::before { width: 12px; margin-right: 6px; } }
.footer-signature, .footer-signature:hover, .footer-signature .brand-tag { text-decoration: none; }

/* ---------- LapupTech logo (logo only, no "Supporting partner" wording) ---------- */
.site-header .header-partner { display: flex; align-items: center; padding: 0 0 0 18px; border-left: 1px solid var(--line); }
.site-header .header-partner img { width: 104px; height: 54px; padding: 4px 6px; border-radius: 10px; background: #fff; object-fit: contain; box-shadow: 0 0 0 1px var(--line); transition: transform .2s, box-shadow .2s; }
.site-header a.header-partner:hover img { transform: translateY(-2px); box-shadow: 0 10px 22px var(--glow), 0 0 0 1px var(--line); }
.footer-signature .partner-logo { width: 96px; height: 50px; padding: 4px 6px; border-radius: 8px; background: #fff; object-fit: contain; }
.hero-partner { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; }
.hero-partner img { width: 120px; height: 60px; padding: 5px 8px; border-radius: 12px; background: #fff; object-fit: contain; box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }

/* Fit: LapupTech mark in the header only where there is room. */
@media (min-width: 1366px) and (max-width: 1439px) {
  .site-header .brand .header-logo { --w: 215px !important; }
  .site-header .brand-tag { font-size: .7rem; }
  .site-header .header-branding { gap: 12px; }
  .site-header .header-partner { padding-left: 12px; }
  .site-header .header-partner img { width: 88px; height: 46px; }
}
@media (min-width: 1151px) and (max-width: 1365px) { .site-header .header-partner { display: none; } }
.footer-partner { display: inline-flex; }
.footer-partner .partner-logo { width: 104px; height: 54px; padding: 4px 8px; border-radius: 10px; background: #fff; object-fit: contain; }
.footer-bottom .footer-partner { margin-top: 2px; }

/* Tagline sits directly under the "Seyon Solutions" wordmark, beside the icon (like the old subtitle did). */
.site-header .header-logo { overflow: visible; container-type: inline-size; background: transparent; }
.site-header .header-logo img { border-radius: 0; }
.site-header .header-logo .brand-tag {
  position: absolute; left: 26.4%; top: 73.5%; padding: 0; margin: 0; white-space: nowrap; line-height: 1;
  font-size: clamp(.62rem, 4.6cqw, .95rem); font-weight: 700; letter-spacing: .01em; color: var(--brand);
}
.site-header .header-logo .brand-tag::before { display: none; }
:root[data-theme=dark] .site-header .header-logo img { background: #fff; border-radius: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .site-header .header-logo img { background: #fff; border-radius: 8px; } }
:root[data-theme=dark] .site-header .header-logo .brand-tag { color: #0f3b44; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .site-header .header-logo .brand-tag { color: #0f3b44; } }

/* ---------- LapupTech: larger, clearer, with "Supporting partner" label above ---------- */
.site-header .header-partner { flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 0 0 18px; text-decoration: none; }
.site-header .header-partner .hp-label { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; line-height: 1; }
.site-header .header-partner img { width: auto; height: 64px; max-width: 80px; padding: 3px 5px; border-radius: 10px; background: #fff; object-fit: contain; image-rendering: auto; }
@media (min-width: 1366px) and (max-width: 1439px) {
  .site-header .header-partner img { height: 54px; max-width: 66px; }
  .site-header .header-partner .hp-label { font-size: .6rem; letter-spacing: .06em; }
}
@media (max-width: 1365px) { .site-header .header-partner { display: none !important; } }

/* LapupTech logo: no border, no box shadow, no card outline */
.site-header .header-partner img, .site-header a.header-partner:hover img,
.footer-partner .partner-logo, .hero-partner img { border: 0 !important; box-shadow: none !important; outline: 0; }
.site-header .header-partner img { padding: 0; border-radius: 0; background: transparent; }
:root[data-theme=dark] .site-header .header-partner img { background: #fff; padding: 4px 6px; border-radius: 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .site-header .header-partner img { background: #fff; padding: 4px 6px; border-radius: 10px; } }
.header-theme, #themeBtn { display: none !important; }

/* ---------- Home: Software + Hardware section ---------- */
.both-grid { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; gap: 18px; margin-top: 10px; }
.both-card { position: relative; display: flex; flex-direction: column; padding: 30px 30px 26px; border-radius: 24px; background: var(--card); border: 1px solid var(--tint-line, rgba(31, 77, 87, .1)); box-shadow: 0 20px 46px var(--glow); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.both-card:hover { transform: translateY(-5px); box-shadow: 0 28px 56px var(--glow); }
.both-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #1f4d57, #4ec7cf); }
.both-hw::before { background: linear-gradient(90deg, #f39c2d, #f7c26b); }
.both-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; font-size: 1.8rem; background: var(--surface-soft); }
.both-hw .both-ic { background: var(--surface-warm); }
.both-card h3 { margin: 16px 0 8px; font-size: 1.45rem; }
.both-card p { margin: 0 0 14px; color: var(--muted); line-height: 1.65; }
.both-card ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.both-card li { position: relative; padding-left: 26px; font-weight: 600; }
.both-card li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: .68rem; font-weight: 800; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.both-hw li::before { background: color-mix(in srgb, var(--warm) 22%, transparent); color: #b36b00; }
.both-link { margin-top: auto; color: var(--brand); font-weight: 800; text-decoration: none; }
.both-link:hover { text-decoration: underline; }
.both-link span { color: var(--warm); display: inline-block; transition: transform .2s; }
.both-card:hover .both-link span { transform: translateX(4px); }
.both-plus { align-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 2rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #1f4d57, #f39c2d); box-shadow: 0 12px 26px var(--glow); }
@media (max-width: 860px) { .both-grid { grid-template-columns: 1fr; } .both-plus { margin-inline: auto; width: 46px; height: 46px; font-size: 1.6rem; } }

/* ---------- Home: stats strip as its own bright block ---------- */
.stats-band {
  position: relative; overflow: hidden; margin-top: 36px; padding: 40px 0;
  background:
    radial-gradient(ellipse 40% 140% at 100% 0%, rgba(243, 156, 45, .55), transparent 65%),
    radial-gradient(ellipse 45% 140% at 0% 100%, rgba(78, 199, 207, .5), transparent 65%),
    linear-gradient(120deg, #0f4752 0%, #17707c 55%, #1f8f9b 100%);
}
.stats-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%); mask-image: linear-gradient(90deg, transparent 20%, #000 100%); }
.stats-band::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #4ec7cf, #f39c2d); }
.stats-band .wrap { position: relative; z-index: 1; }
.home .stats-band .stats2 { gap: 18px; padding-block: 0; }
.home .stats-band .stat2 {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 22px 24px !important; border: 0 !important; border-top: 4px solid var(--sc, #f39c2d) !important;
  border-radius: 18px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); transition: transform .25s, background .25s;
}
.home .stats-band .stat2:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .22); }
.home .stats-band .stat2:nth-child(1) { --sc: #f39c2d; }
.home .stats-band .stat2:nth-child(2) { --sc: #7ee7ee; }
.home .stats-band .stat2:nth-child(3) { --sc: #ffd37a; }
.home .stats-band .stat2:nth-child(4) { --sc: #a9f0c8; }
.home .stats-band .stat2 b { color: #fff !important; font-size: 3rem; line-height: 1; text-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.home .stats-band .stat2 span { color: #e2f6f7; font-size: 1.02rem; font-weight: 600; }
@media (max-width: 900px) { .home .stats-band .stats2 { grid-template-columns: repeat(2, 1fr); } .stats-band { padding: 28px 0; } }
@media (max-width: 480px) { .home .stats-band .stat2 { padding: 16px 16px !important; } .home .stats-band .stat2 b { font-size: 2.3rem; } }
/* brighter */
.stats-band {
  background:
    radial-gradient(ellipse 42% 150% at 100% 0%, rgba(255, 176, 66, .75), transparent 62%),
    radial-gradient(ellipse 45% 150% at 0% 100%, rgba(126, 231, 238, .6), transparent 62%),
    linear-gradient(120deg, #138a99 0%, #1fb0bd 55%, #3cc9d3 100%);
}
.home .stats-band .stat2 { background: rgba(255, 255, 255, .24); box-shadow: 0 16px 34px rgba(8, 70, 80, .28); }
.home .stats-band .stat2:hover { background: rgba(255, 255, 255, .34); }
.home .stats-band .stat2 span { color: #fff; }

/* ---------- A different background colour for each header dropdown ---------- */
#menu-products { --pc: #e6f1fb; --pc2: #f4f9fe; --pa: #3b82f6; }
#svcMenu       { --pc: #e0f5f3; --pc2: #f1fbfa; --pa: #14a39a; }
#menu-about    { --pc: #fff0dc; --pc2: #fff9f0; --pa: #f39c2d; }
#menu-contact  { --pc: #e3f6e9; --pc2: #f3fbf6; --pa: #22a05a; }
.mega#menu-products, .mega#svcMenu, .mega#menu-about, .mega#menu-contact {
  background: linear-gradient(180deg, var(--pc) 0%, var(--pc2) 100%);
  border-bottom: 4px solid var(--pa); border-image: none;
}
.mega#menu-products .mega-ic, .mega#svcMenu .mega-ic, .mega#menu-about .mega-ic, .mega#menu-contact .mega-ic { background: #fff; border-color: color-mix(in srgb, var(--pa) 30%, transparent); }
.site-header .mega#menu-products a.mega-item:hover, .site-header .mega#svcMenu a.mega-item:hover,
.site-header .mega#menu-about a.mega-item:hover, .site-header .mega#menu-contact a.mega-item:hover { background: rgba(255, 255, 255, .85); box-shadow: 0 10px 24px color-mix(in srgb, var(--pa) 22%, transparent); }
.mega#menu-products .mega-foot, .mega#svcMenu .mega-foot, .mega#menu-about .mega-foot, .mega#menu-contact .mega-foot { border-top-color: color-mix(in srgb, var(--pa) 28%, transparent); color: #3d5560; }
.mega#menu-products .mega-links a:last-child, .mega#svcMenu .mega-links a:last-child, .mega#menu-about .mega-links a:last-child,
.mega#menu-contact .mega-btn { background: var(--pa); color: #fff; }
/* the button that opened the panel takes the same colour */
.nav-dd[data-dd=products][data-open=true] .nav-dd-btn { background: #e6f1fb; color: #1d5fbf; }
.nav-dd[data-dd=services][data-open=true] .nav-dd-btn { background: #e0f5f3; color: #0e7d76; }
.nav-dd[data-dd=about][data-open=true] .nav-dd-btn { background: #fff0dc; color: #b36b00; }
.nav-dd[data-dd=contact][data-open=true] .nav-dd-btn { background: #e3f6e9; color: #167a42; }
@media (max-width: 1150px) { .mega#menu-products, .mega#svcMenu, .mega#menu-about, .mega#menu-contact { border: 1px solid var(--pa); border-bottom-width: 3px; } }

/* ---------- Services page: hardware and IT services as separate coloured groups ---------- */
.svc-group { margin-top: 26px; padding: 26px 26px 30px; border-radius: 26px; }
.svc-group.g-hw { background: linear-gradient(135deg, #e6f1fb, #f4f9fe); border: 1px solid #cfe2f6; }
.svc-group.g-sv { background: linear-gradient(135deg, #e0f5f3, #f1fbfa); border: 1px solid #c6ebe7; }
.svc-group-title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 1.35rem; }
.svc-group-title span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; font-size: .85rem; font-weight: 800; color: #fff; background: #3b82f6; }
.g-sv .svc-group-title span { background: #14a39a; }
.g-hw .svc-card::before { background: linear-gradient(90deg, #3b82f6, #7cb4f7); }
.g-sv .svc-card::before { background: linear-gradient(90deg, #14a39a, #6fd6cf); }

/* ---------- Brighter tab backgrounds (dropdowns, Services groups, dashboard) ---------- */
#menu-products { --pc: #bcdcfb; --pc2: #e2f0fe; --pa: #2f7df0; }
#svcMenu       { --pc: #b3ece4; --pc2: #def8f4; --pa: #0f9d92; }
#menu-about    { --pc: #ffd9a3; --pc2: #ffeccd; --pa: #f08a10; }
#menu-contact  { --pc: #bdeccb; --pc2: #e1f7e8; --pa: #1d9a52; }
.nav-dd[data-dd=products][data-open=true] .nav-dd-btn { background: #bcdcfb; color: #134ea6; }
.nav-dd[data-dd=services][data-open=true] .nav-dd-btn { background: #b3ece4; color: #0a6e66; }
.nav-dd[data-dd=about][data-open=true] .nav-dd-btn { background: #ffd9a3; color: #8f4f00; }
.nav-dd[data-dd=contact][data-open=true] .nav-dd-btn { background: #bdeccb; color: #12703b; }
.svc-group.g-hw { background: linear-gradient(135deg, #bcdcfb, #e6f2fe); border-color: #98c4f4; }
.svc-group.g-sv { background: linear-gradient(135deg, #b3ece4, #e2f9f5); border-color: #8fdcd1; }
.adm-panel.sw { background: linear-gradient(180deg, #bcdcfb, #e6f2fe) !important; border-color: #98c4f4 !important; }
.adm-panel.hw { background: linear-gradient(180deg, #b3ece4, #e2f9f5) !important; border-color: #8fdcd1 !important; }
.adm-tab.sw[aria-selected=true] { background: #bcdcfb !important; }
.adm-tab.hw[aria-selected=true] { background: #b3ece4 !important; }
.both-sw { background: linear-gradient(180deg, #e8f3ff, #ffffff); }
.both-hw { background: linear-gradient(180deg, #fff1d9, #ffffff); }

/* ---------- Lighter backgrounds (soft pastels) ---------- */
#menu-products { --pc: #e4f0fd; --pc2: #f6faff; --pa: #4a8ff2; }
#svcMenu       { --pc: #dcf5f1; --pc2: #f4fcfa; --pa: #21aaa0; }
#menu-about    { --pc: #fff0da; --pc2: #fffaf1; --pa: #f39c2d; }
#menu-contact  { --pc: #e1f5e8; --pc2: #f5fcf7; --pa: #2fa862; }
.nav-dd[data-dd=products][data-open=true] .nav-dd-btn { background: #e4f0fd; color: #1d5fbf; }
.nav-dd[data-dd=services][data-open=true] .nav-dd-btn { background: #dcf5f1; color: #0e7d76; }
.nav-dd[data-dd=about][data-open=true] .nav-dd-btn { background: #fff0da; color: #a86000; }
.nav-dd[data-dd=contact][data-open=true] .nav-dd-btn { background: #e1f5e8; color: #167a42; }
.svc-group.g-hw { background: linear-gradient(135deg, #eaf3fe, #f8fbff); border-color: #d3e5f8; }
.svc-group.g-sv { background: linear-gradient(135deg, #e3f7f3, #f6fcfb); border-color: #cdeee9; }
.adm-panel.sw { background: linear-gradient(180deg, #eaf3fe, #f8fbff) !important; border-color: #d3e5f8 !important; }
.adm-panel.hw { background: linear-gradient(180deg, #e3f7f3, #f6fcfb) !important; border-color: #cdeee9 !important; }
.adm-tab.sw[aria-selected=true] { background: #eaf3fe !important; }
.adm-tab.hw[aria-selected=true] { background: #e3f7f3 !important; }
.stats-band { background:
    radial-gradient(ellipse 42% 150% at 100% 0%, rgba(255, 190, 100, .55), transparent 62%),
    radial-gradient(ellipse 45% 150% at 0% 100%, rgba(150, 236, 242, .5), transparent 62%),
    linear-gradient(120deg, #2aa3b0 0%, #4bbfca 55%, #6fd3db 100%); }

/* ---------- Home hero: same dark banner style as the Services page ---------- */
.home .hero {
  position: relative; overflow: hidden; color: #f5fafb; border-bottom: 0; padding: 64px 0 0;
  background:
    radial-gradient(ellipse 55% 90% at 96% 0%, rgba(243, 156, 45, .38), transparent 60%),
    radial-gradient(ellipse 50% 80% at 2% 100%, rgba(78, 199, 207, .28), transparent 60%),
    linear-gradient(135deg, #0d252c 0%, #1f4d57 62%, #2b6b78 100%) !important;
}
.home .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 90%); mask-image: linear-gradient(100deg, transparent 20%, #000 90%); }
.home .hero > * { position: relative; z-index: 1; }
.home .hero .eyebrow { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #d5f3f3; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.home .hero .eyebrow::before { background: #f39c2d; box-shadow: 0 0 0 4px rgba(243,156,45,.25); }
.home .hero h1 { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.home .hero p.lead { color: #cfe3e6; }
.home .hero .hero-rule { background: #f39c2d; }
.home .hero .btn.primary { background: #fff; color: #0f3b44; box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.home .hero .btn.primary:hover { background: #eaf8f8; }
.home .hero .hero-secondary { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.home .hero .hero-secondary:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.home .hero .hero-chat { color: #cfe3e6; }
.home .hero .hero-chat:hover { color: #fff; }
.home .hero .hero-badges { margin: 22px 0 0; }
.home .hero .hero-badges b { color: #fff; }
.home .hero .featured-products { box-shadow: 0 30px 70px rgba(0,0,0,.28); border-color: rgba(255,255,255,.25); }
.home .stats-band { margin-top: 44px; }
@media (max-width: 900px) { .home .hero { padding-top: 40px; } }
.home .hero .featured-products { background: #fff !important; backdrop-filter: none; border: 0; }
.home .hero .featured-products > h2 { color: #12212b; }

/* ---------- Stronger text contrast ---------- */
.home .stats-band .stat2 { background: #ffffff !important; box-shadow: 0 14px 30px rgba(8, 70, 80, .22); }
.home .stats-band .stat2:hover { background: #ffffff !important; }
.home .stats-band .stat2 b { color: #0f4752 !important; text-shadow: none; font-size: 3.1rem; }
.home .stats-band .stat2 span { color: #1d3340 !important; font-weight: 700; }
:root, :root[data-theme=light] { --muted: #3b4a5f; }
.sub, .note, .card p, .svc-card p, .both-card p, .vm-card p, .mega-item small, .featured-grid p { color: #3b4a5f; }
.mega-foot { color: #2c3d4c !important; }
.page-hero p { color: #e6f4f5; }
.home .hero p.lead { color: #e6f4f5; }

/* ---------- Home: every section fills one screen; the hero fits without scrolling ---------- */
@media (min-width: 901px) {
  html:has(body.home) { scroll-snap-type: y proximity; scroll-padding-top: 108px; }
  .home { --fit: calc(100vh - 108px); }
  .home section.s, .home .product-logo-section {
    min-height: var(--fit); display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; scroll-margin-top: 108px;
  }
  .home section.s > .wrap, .home .product-logo-section > .wrap { width: 100%; }
  .home .stats-band { scroll-snap-align: start; }
  .home .site-footer { scroll-snap-align: end; }

  /* hero: compact so headline, text, buttons and badges are all visible in one screen */
  .home .hero { min-height: var(--fit); display: flex; flex-direction: column; justify-content: center; padding: 28px 0 0; scroll-snap-align: start; }
  .home .hero .hero-main { align-items: center; gap: 44px; }
  .home .hero h1 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); line-height: 1.08; margin-bottom: 14px; }
  .home .hero .eyebrow { margin-bottom: 14px; }
  .home .hero .hero-rule { margin-bottom: 14px; }
  .home .hero p.lead { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; margin-bottom: 18px; }
  .home .hero .btn { padding: 13px 20px; font-size: 1rem; }
  .home .hero .hero-badges { margin: 16px 0 0; gap: 8px; }
  .home .hero .hero-badges span { padding: 7px 13px; font-size: .88rem; }
  .home .hero .hero-chat { margin-top: 14px; }
  .home .hero .featured-products { padding: 20px 22px; }
  .home .hero .featured-products > h2 { margin-bottom: 14px; }
  .home .hero .featured-grid { gap: 14px 22px; }
  .home .hero .featured-grid p { font-size: .86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .home .hero .featured-grid h3, .home .hero .featured-grid strong { font-size: 1.05rem; }
  .home .hero .featured-all { margin-top: 10px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .home .hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
  .home .hero .hero-chat, .home .hero .hero-badges { display: none; }
  .home .hero .featured-grid p { -webkit-line-clamp: 1; }
}

/* hero = exactly one screen; the stats strip is the next full screen */
@media (min-width: 901px) {
  .home .hero { min-height: 0; display: block; padding: 0; }
  .home .hero > .hero-main { min-height: var(--fit); align-items: center; padding-block: 24px; box-sizing: border-box; }
  .home .stats-band { min-height: var(--fit); display: flex; align-items: center; margin-top: 0; padding: 40px 0; }
  .home .stats-band > .wrap { width: 100%; }
  .home .stats-band .stats2 { gap: 26px; }
  .home .stats-band .stat2 { padding: 40px 30px !important; border-radius: 22px; }
  .home .stats-band .stat2 b { font-size: clamp(3.4rem, 6vw, 5rem); }
  .home .stats-band .stat2 span { font-size: 1.15rem; }
}

/* ---------- One shared content width so logo, headings, cards and footer line up on every page ---------- */
.wrap { max-width: 1480px; padding-inline: 32px; }
.top.site-header .wrap.header-inner { padding-inline: 32px; }
.mega-inner { padding-inline: 32px !important; }
@media (max-width: 900px) { .wrap, .top.site-header .wrap.header-inner, .mega-inner { padding-inline: 24px !important; } }
@media (max-width: 480px) { .wrap, .top.site-header .wrap.header-inner, .mega-inner { padding-inline: 18px !important; } }
/* readable line length for long text pages */
.page-hero p { max-width: 62ch; }
.legal-layout { max-width: 1480px !important; }

/* ---------- Compact spacing: no forced full-screen sections, no big empty gaps ---------- */
@media (min-width: 901px) {
  html:has(body.home) { scroll-snap-type: none; }
  .home section.s, .home .product-logo-section, .home .stats-band {
    min-height: 0 !important; display: block !important; scroll-snap-align: none; scroll-margin-top: 108px;
    padding-block: 56px !important;
  }
  .home .stats-band { padding-block: 40px !important; margin-top: 0; }
  .home .stats-band .stat2 { padding: 24px 26px !important; }
  .home .stats-band .stat2 b { font-size: clamp(2.6rem, 4vw, 3.4rem); }
  .home .stats-band .stat2 span { font-size: 1.05rem; }
  .home .stats-band .stats2 { gap: 20px; }
  .home .site-footer { scroll-snap-align: none; }
  /* hero stays one screen at most, but never taller than its content needs */
  .home .hero > .hero-main { min-height: 0; padding-block: 44px 48px; }
}
/* tighter section rhythm on inner pages too */
section.s { padding-block: 56px; }
.page-hero { padding: 56px 0 50px; }
.svc-group { margin-top: 20px; }

/* Logos with no white box: transparent PNGs; the footer uses the light version for the dark background */
.logo-crop, .site-header .header-logo, .footer-signature .logo-crop { background: transparent !important; box-shadow: none !important; border-radius: 0; }
.site-header .header-logo img, :root[data-theme=dark] .site-header .header-logo img { background: transparent !important; border-radius: 0; }
.footer-signature .logo-crop { --w: 240px; }

/* ---------- Runner (scrolling ticker of software and services) ---------- */
.runner-wrap { margin-top: 30px; display: grid; gap: 14px; padding: 18px 0; border-radius: 22px; background: linear-gradient(90deg, #eaf3fe, #e3f7f3 50%, #fff1d9); border: 1px solid var(--tint-line, rgba(31,77,87,.1)); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.runner { overflow: hidden; }
.runner-track { display: flex; width: max-content; gap: 14px; padding-right: 14px; animation: runner-left 42s linear infinite; }
.runner-hw .runner-track { animation-name: runner-right; animation-duration: 48s; }
.runner-wrap:hover .runner-track { animation-play-state: paused; }
@keyframes runner-left { to { transform: translateX(-50%); } }
@keyframes runner-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.runner-item { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 10px 20px 10px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--tint-line, rgba(31,77,87,.12)); box-shadow: 0 6px 16px rgba(31,77,87,.08); color: var(--text); font-weight: 700; font-size: .98rem; text-decoration: none; white-space: nowrap; transition: transform .2s, box-shadow .2s; }
.runner-item:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(31,77,87,.16); }
.runner-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 1.05rem; background: var(--surface-soft); overflow: hidden; }
.rn-sw .runner-ic { background: #e4f0fd; padding: 2px; } .rn-sw .runner-ic img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.rn-hw .runner-ic { background: #fff0da; }
.rn-sw { border-left: 4px solid #4a8ff2; } .rn-hw { border-left: 4px solid #f39c2d; }
@media (prefers-reduced-motion: reduce) { .runner-track { animation: none; } .runner { overflow-x: auto; } }
@media (max-width: 600px) { .runner-item { font-size: .88rem; padding: 8px 16px 8px 10px; } .runner-track { animation-duration: 34s; } }

/* ---------- Slim runner directly under the header (home) ---------- */
.runner-slim { position: relative; z-index: 2; overflow: hidden; background: linear-gradient(90deg, #eaf3fe, #e3f7f3 50%, #fff1d9); border-bottom: 1px solid var(--tint-line, rgba(31,77,87,.12)); padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.rs-track { display: flex; width: max-content; gap: 10px; animation: rs-left 60s linear infinite; }
.runner-slim:hover .rs-track { animation-play-state: paused; }
@keyframes rs-left { to { transform: translateX(-50%); } }
.rs-item { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 3px 14px 3px 5px; border-radius: 999px; background: #fff; border: 1px solid rgba(31,77,87,.12); color: var(--text); font-weight: 700; font-size: .8rem; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform .2s; }
.rs-item:hover { transform: translateY(-1px); }
.rs-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .8rem; overflow: hidden; }
.rs-sw .rs-ic { background: #e4f0fd; } .rs-sw .rs-ic img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.rs-hw .rs-ic { background: #fff0da; }
.rs-sw { border-left: 3px solid #4a8ff2; } .rs-hw { border-left: 3px solid #f39c2d; }
@media (prefers-reduced-motion: reduce) { .rs-track { animation: none; } .runner-slim { overflow-x: auto; } }
@media (min-width: 901px) { .home .hero > .hero-main { padding-block: 36px 40px; } }
@media (min-width: 901px) { .home .hero .hero-chat { display: none; } }

/* ---------- Scroller theme: bold teal brand strip with glass pills ---------- */
.runner-slim { background: linear-gradient(90deg, #138a99 0%, #1fb0bd 50%, #138a99 100%); border-bottom: 3px solid #f39c2d; padding: 7px 0; }
.rs-item { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.38); color: #fff; font-size: .82rem; font-weight: 700; padding: 4px 15px 4px 5px; backdrop-filter: blur(4px); text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.rs-item:hover { background: rgba(255,255,255,.3); transform: translateY(-1px); }
.rs-sw, .rs-hw { border-left-width: 1px; }
.rs-ic { width: 24px; height: 24px; background: #fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.rs-sw .rs-ic { box-shadow: 0 0 0 2px #7ee7ee; }
.rs-hw .rs-ic { box-shadow: 0 0 0 2px #ffbf66; }
.rs-sw .rs-ic img { padding: 2px; }

/* ---------- Scroller: simple, neat, smooth ---------- */
.runner-slim { background: #f4f9fb; border-bottom: 1px solid #dbe8ee; padding: 0; height: 38px; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.rs-track { gap: 0; align-items: center; will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0); animation: rs-smooth 70s linear infinite; }
@keyframes rs-smooth { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.rs-item, .rs-sw, .rs-hw { background: none; border: 0; box-shadow: none; backdrop-filter: none; text-shadow: none; padding: 0 22px 0 0; gap: 8px; color: #1d3340; font-size: .86rem; font-weight: 600; position: relative; transition: color .2s; }
.rs-item::after { content: ''; position: absolute; right: 8px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #f39c2d; }
.rs-item:hover { color: #0f6f7b; transform: none; background: none; }
.rs-ic, .rs-sw .rs-ic, .rs-hw .rs-ic { width: 18px; height: 18px; background: none !important; box-shadow: none; font-size: .95rem; }
.rs-sw .rs-ic img { padding: 0; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .rs-track { animation: none; } }

/* Scroller: clearer and easier to read */
.runner-slim { height: 46px; background: #ffffff; border-bottom: 2px solid #e3eef3; }
.rs-item, .rs-sw, .rs-hw { color: #0b2530; font-size: 1rem; font-weight: 700; padding-right: 30px; gap: 10px; }
.rs-item::after { right: 12px; width: 6px; height: 6px; margin-top: -3px; background: #f39c2d; }
.rs-ic, .rs-sw .rs-ic, .rs-hw .rs-ic { width: 24px; height: 24px; font-size: 1.2rem; }
.rs-item:hover { color: #0f6f7b; }
.runner-slim { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
@media (max-width: 600px) { .runner-slim { height: 42px; } .rs-item { font-size: .92rem; } }

/* Scroller colour: warm amber */
.runner-slim { background: linear-gradient(90deg, #f59a1f 0%, #ffb84a 50%, #f59a1f 100%); border-bottom: 2px solid #1f4d57; }
.rs-item, .rs-sw, .rs-hw { color: #2b1700; }
.rs-item::after { background: #1f4d57; }
.rs-item:hover { color: #0f3b44; }
.runner-slim { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }

/* No outline box around the logo; scroller is solid amber edge to edge (no white fade at either end) */
.site-header .brand, .site-header .brand:focus, .site-header .brand:active, .site-header .brand:focus-visible,
.site-header a.header-partner, .site-header a.header-partner:focus, .site-header a.header-partner:focus-visible,
.footer-signature, .footer-signature:focus, .footer-signature:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }
.runner-slim { -webkit-mask-image: none !important; mask-image: none !important; background: #f8a526 !important; }

/* Scroller: real product logos for software (same crops as the home logo picker) */
.rs-sw .rs-ic { width: 28px; height: 28px; border-radius: 8px; background: #fff !important; box-shadow: 0 0 0 1px rgba(31,77,87,.15); overflow: hidden; position: relative; display: block; }
.rs-sw .rs-ic .product-symbol { border-radius: 8px; }
.rs-sw .rs-ic .product-symbol img { padding: 2px; }
.rs-sw .rs-ic .product-symbol[data-product=vidyaone] img, .rs-sw .rs-ic .product-symbol[data-product=kadai] img,
.rs-sw .rs-ic .product-symbol[data-product=invoicely] img, .rs-sw .rs-ic .product-symbol[data-product=motorhub] img, .rs-sw .rs-ic .product-symbol[data-product=zenfit] img { padding: 0; }
.rs-hw .rs-ic { width: 28px; height: 28px; }
.rs-sw .rs-ic .product-symbol[data-product=invoicely] img { position: absolute; width: 379.31%; height: auto; max-width: none; left: -12.07%; top: -12.07%; object-fit: initial; border-radius: 0; }
.rs-sw .rs-ic .product-symbol[data-product=motorhub] img { position: absolute; width: 423.08%; height: auto; max-width: none; left: -18.27%; top: -16.92%; object-fit: initial; border-radius: 0; }
.rs-sw .rs-ic .product-symbol[data-product=zenfit] img { position: absolute; width: 225.99%; height: auto; max-width: none; left: -6.21%; top: -5.65%; object-fit: initial; border-radius: 0; }

/* ---------- Scroller: headline, then Software, then Hardware / IT services with details ---------- */
.rs-lead { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 26px 0 18px; font-weight: 800; font-size: 1.02rem; color: #fff; background: #1f4d57; align-self: stretch; white-space: nowrap; letter-spacing: .01em; }
.rs-label { flex: 0 0 auto; display: inline-flex; align-items: center; margin: 0 22px 0 6px; padding: 3px 14px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; background: #1f4d57; color: #fff; }
.rs-l-sw { background: #1f4d57; } .rs-l-hw { background: #7a3d00; }
.rs-item small { font-weight: 600; font-size: .8rem; color: rgba(43,23,0,.78); margin-left: 2px; }
.rs-item small::before { content: '· '; }
.rs-track { align-items: stretch; }
.rs-item { align-self: center; }