/* =====================================================================
   VENTREL GROUP — Design System
   Premium diversified business-group aesthetic. Lightweight, no framework.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* NETSOL-inspired scheme: near-black + light grey + electric royal blue */
  --black:   #0D0F14;
  --graphite:#161A22;
  --graphite-2:#12151C;
  --teal:    #2A4EEF;          /* primary accent (brand blue) */
  --teal-hi: #6E86FF;          /* bright accent for text on dark / highlights */
  --blue-deep:#1B3AD1;         /* button hover / pressed */
  --silver:  #C2CAD6;
  --white:   #F4F4F4;
  --bronze:  #98A2B3;          /* neutral grey-blue (repurposed, no gold) */

  --ink:     #141414;
  --muted:   #454648;          /* body text on light */
  --muted-2: #6B7480;
  --line:    rgba(20,20,20,.12);
  --line-2:  rgba(20,20,20,.08);
  --line-dark: rgba(20,20,20,.12); /* kept as an alias; site is now all-light */

  --bg:      #FFFFFF;           /* page background — white, like NETSOL */
  --bg-alt:  #F1F3F6;           /* soft grey for alternating sections */
  --surface: #FFFFFF;

  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(11,15,20,.06), 0 4px 16px rgba(11,15,20,.05);
  --shadow-md: 0 10px 40px rgba(11,15,20,.10);

  --ff: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.7rem + 4vw, 5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family:var(--ff);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4 { line-height:1.08; font-weight:800; letter-spacing:-.02em; }
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* ---------- Layout ---------- */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:clamp(56px, 8vw, 120px); }
.section--tight { padding-block:clamp(40px, 6vw, 80px); }
.eyebrow {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--step--1); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal);
}
.eyebrow::before { content:""; width:26px; height:1px; background:var(--teal); display:inline-block; }
.lead { font-size:var(--step-1); color:var(--muted); font-weight:500; line-height:1.5; }
.grid { display:grid; gap:clamp(16px, 2.4vw, 28px); }

/* "dark" is now a light alternating (soft-grey) section — kept the class name for markup stability */
.dark { background:var(--bg-alt); color:var(--ink); }
.dark .lead { color:var(--muted); }
.dark .eyebrow { color:var(--teal); }
.dark .eyebrow::before { background:var(--teal); }

/* ---------- Buttons ---------- */
.btn {
  --_bg:var(--teal); --_fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.35rem; border-radius:999px; font-weight:700; font-size:var(--step--1);
  letter-spacing:.01em; line-height:1; white-space:nowrap;
  border:1px solid transparent; background:var(--_bg); color:var(--_fg);
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  will-change:transform;
}
.btn:hover { transform:translateY(-2px); background:var(--blue-deep); box-shadow:0 8px 24px rgba(42,78,239,.35); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover { background:transparent; border-color:var(--ink); box-shadow:none; transform:translateY(-2px); }
.btn--lg { padding:1rem 1.7rem; font-size:var(--step-0); }
.link-arrow { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--teal); font-size:var(--step--1); }
.link-arrow svg { transition:transform .25s var(--ease); }
.link-arrow:hover svg { transform:translateX(4px); }

/* ---------- Header / Nav ---------- */
.header {
  position:sticky; top:0; z-index:50;
  background:rgba(246,248,250,.82);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header--dark {
  background:rgba(11,15,20,.72);
  border-bottom:1px solid var(--line-dark);
  color:var(--white);
}
.nav { display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:1.25rem; }
.brand { display:inline-flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.18em; font-size:1.02rem; }
.brand .mark { width:26px; height:26px; flex:none; }
.brand small { font-weight:600; letter-spacing:.2em; color:var(--teal); font-size:.6rem; align-self:flex-start; margin-top:2px; }
.nav-links { display:flex; align-items:center; gap:clamp(.6rem, 1.4vw, 1.7rem); list-style:none; }
.nav-links a { font-size:.92rem; font-weight:600; color:var(--muted); position:relative; padding:.35rem 0; transition:color .2s; }
.header--dark .nav-links a { color:var(--silver); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--ink); }
.header--dark .nav-links a:hover, .header--dark .nav-links a[aria-current="page"] { color:var(--white); }
.nav-links a[aria-current="page"]::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--teal); border-radius:2px;
}
.nav-cta { display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-cta .btn { padding:.62rem 1.05rem; font-size:.82rem; }
/* keep the desktop nav from crowding the CTAs on mid-size screens */
@media (max-width:1140px){ .desktop-cta { display:none; } }
.nav-toggle { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; background:transparent; align-items:center; justify-content:center; }
.header--dark .nav-toggle { border-color:var(--line-dark); }
.nav-toggle span { display:block; width:18px; height:2px; background:currentColor; position:relative; transition:.25s; }
.nav-toggle span::before,.nav-toggle span::after { content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; transition:.25s; }
.nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top:0; transform:rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display:inline-flex; }
  .nav-panel {
    position:fixed; inset:72px 0 auto 0; z-index:200; background:var(--surface); color:var(--ink);
    display:grid; gap:.25rem; padding:1rem var(--gutter) 1.6rem;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.28s var(--ease);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-md); max-height:calc(100vh - 72px); overflow:auto;
  }
  .nav-panel.open { transform:none; opacity:1; pointer-events:auto; }
  .nav-links { flex-direction:column; align-items:stretch; gap:0; }
  .nav-links a { color:var(--ink); font-size:1.05rem; padding:.85rem .25rem; border-bottom:1px solid var(--line); }
  .nav-links a[aria-current="page"]::after { display:none; }
  /* Businesses sub-links: shown inline, indented, inside the mobile menu */
  .nav-sub-toggle .caret { display:none; }
  .subnav { display:grid; padding:.1rem 0 .5rem .9rem; border-bottom:1px solid var(--line); }
  .subnav a { padding:.6rem .25rem; font-size:.95rem; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line-2); }
  .subnav a:last-child { border-bottom:0; }
  .nav-panel .nav-cta { flex-direction:column; align-items:stretch; margin-top:1rem; }
  .nav-panel .btn { width:100%; padding:.85rem 1.2rem; font-size:.95rem; }
  /* re-show the secondary CTA inside the mobile dropdown */
  .nav-panel .desktop-cta { display:inline-flex; }
}
@media (min-width: 961px) {
  .nav-panel { display:contents; }
}

/* ---------- Hero (light) ---------- */
.hero { position:relative; background:var(--bg); color:var(--ink); overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line-2); }
.hero__grid-bg {
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(42,78,239,.12), transparent 52%),
    radial-gradient(90% 70% at 0% 100%, rgba(42,78,239,.06), transparent 60%),
    var(--bg);
}
.hero__lines { position:absolute; inset:0; z-index:-1; opacity:.7;
  background-image:linear-gradient(rgba(20,20,20,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,20,20,.05) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(120% 80% at 72% 18%, #000 18%, transparent 70%);
}
.hero__inner { padding-block:clamp(64px, 11vw, 132px); display:grid; gap:clamp(26px,4vw,44px); }
.hero h1 { font-size:var(--step-4); max-width:15ch; }
.hero h1 .accent { color:var(--teal); }
.hero p { max-width:56ch; color:var(--muted); font-size:var(--step-1); font-weight:500; }
.hero__cta { display:flex; flex-wrap:wrap; gap:.9rem; }
.hero__meta { display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3.5rem); margin-top:.5rem; border-top:1px solid var(--line); padding-top:1.6rem; }
.hero__meta div { min-width:120px; }
.hero__meta b { display:block; font-size:var(--step-2); color:var(--ink); letter-spacing:-.02em; }
.hero__meta span { font-size:var(--step--1); color:var(--muted-2); }

/* ---------- Cards / businesses ---------- */
.biz-grid { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.card {
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px, 3vw, 34px); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(42,78,239,.45); }
.card__tag { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.card h3 { font-size:var(--step-1); margin:.55rem 0 .5rem; }
.card__pos { color:var(--muted); font-weight:500; }
.card__list { list-style:none; padding:0; margin:1.1rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; }
.card__list li { font-size:.78rem; color:var(--muted); background:rgba(11,15,20,.04); border:1px solid var(--line); border-radius:999px; padding:.3rem .7rem; }
.card__index { position:absolute; top:18px; right:22px; font-size:.8rem; font-weight:700; color:var(--muted-2); letter-spacing:.1em; }
/* Business cards — white on the grey section so they lift off the background */
.card--dark { background:var(--surface); border-color:var(--line); color:var(--ink); box-shadow:var(--shadow-sm); }
.card--dark .card__tag { color:var(--teal); }
.card--dark .card__pos { color:var(--muted); }
.card--dark .card__list li { background:rgba(20,20,20,.04); border-color:var(--line); color:var(--muted); }
/* Emerging cards — light with a faint blue tint */
.card--emerging { background:linear-gradient(180deg, #FFFFFF, #F4F6FB); border-color:var(--line); color:var(--ink); }
.card--emerging h2, .card--emerging h3 { color:var(--ink); }
.card--emerging .card__pos { color:var(--muted); }
.card--emerging .card__list li { background:rgba(20,20,20,.04); border-color:var(--line); color:var(--muted); }
.card__ico { width:40px; height:40px; color:var(--teal); }

/* section heading block */
.sec-head { display:grid; gap:1rem; max-width:64ch; margin-bottom:clamp(28px,4vw,52px); }
.sec-head h2 { font-size:var(--step-3); }
.sec-head--split { grid-template-columns:1fr; }
@media (min-width:800px){
  .sec-head--split { grid-template-columns:1.3fr .9fr; align-items:end; max-width:none; gap:2rem; }
  .sec-head--split .lead { margin-bottom:.2rem; }
}

/* ---------- Process / steps ---------- */
.steps { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); counter-reset:step; }
.step { position:relative; padding-top:2.2rem; border-top:2px solid var(--teal); }
.step::before {
  counter-increment:step; content:"0" counter(step);
  position:absolute; top:-.9rem; left:0; font-size:.8rem; font-weight:800; color:var(--teal);
  background:var(--bg-alt); padding-right:.6rem; letter-spacing:.12em;
}
.step h3 { font-size:var(--step-1); margin-bottom:.5rem; }
.step p { color:var(--muted); font-size:.98rem; }

/* ---------- Ecosystem ---------- */
.eco { display:grid; gap:clamp(20px,3vw,40px); align-items:center; }
@media (min-width:900px){ .eco { grid-template-columns:1.1fr 1fr; } }
.eco__nodes { display:flex; flex-wrap:wrap; gap:.6rem; }
.chip {
  border:1px solid var(--line); border-radius:999px; padding:.6rem 1.1rem; font-weight:600; font-size:.9rem;
  color:var(--muted); background:var(--surface); transition:.25s var(--ease);
}
.chip--core { color:#fff; background:var(--teal); border-color:var(--teal); }
.chip--future { color:var(--ink); border-color:rgba(42,78,239,.35); background:rgba(42,78,239,.06); }
.chip:hover { border-color:var(--teal); color:var(--teal); transform:translateY(-2px); }
.chip--core:hover { color:#fff; }

/* ---------- Why / values ---------- */
.values { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.value { padding:1.6rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); transition:.3s var(--ease); }
.value:hover { border-color:rgba(42,78,239,.4); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.value h3 { font-size:var(--step-1); margin-bottom:.4rem; }
.value p { color:var(--muted); font-size:.96rem; }
.value b { color:var(--teal); font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Snapshot ---------- */
.snapshot { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); text-align:left; }
.stat { padding:1.4rem 0; border-top:2px solid var(--teal); }
.stat b { display:block; font-size:clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); color:var(--ink); letter-spacing:-.03em; line-height:1; }
.stat span { display:block; margin-top:.5rem; font-size:.88rem; color:var(--muted-2); }
.stat .pending { color:var(--teal); font-weight:800; }

/* ---------- CTA band (light, blue-tinted) ---------- */
.cta-band { background:linear-gradient(120deg, #EAF0FF, #F5F8FF); color:var(--ink); border:1px solid rgba(42,78,239,.18); border-radius:clamp(16px,3vw,26px); padding:clamp(32px,6vw,72px); position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 100% 0%, rgba(42,78,239,.12), transparent 55%); pointer-events:none; }
.cta-band h2 { font-size:var(--step-3); max-width:18ch; position:relative; }
.cta-band p { color:var(--muted); max-width:52ch; margin-top:1rem; position:relative; }
.cta-band .hero__cta { margin-top:1.8rem; position:relative; }

/* ---------- Footer (light) ---------- */
.footer { background:var(--bg-alt); color:var(--muted); padding-block:clamp(48px,7vw,80px) 2rem; border-top:1px solid var(--line); }
.footer__top { display:grid; gap:2.5rem; grid-template-columns:1.4fr; }
@media (min-width:760px){ .footer__top { grid-template-columns:1.6fr repeat(3, 1fr); } }
.footer h4 { color:var(--ink); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; font-weight:700; }
.footer ul { list-style:none; padding:0; display:grid; gap:.6rem; }
.footer a { color:var(--muted); font-size:.92rem; transition:color .2s; }
.footer a:hover { color:var(--teal); }
.footer__brand p { color:var(--muted-2); font-size:.92rem; max-width:34ch; margin-top:1rem; }
.footer__bottom { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted-2); }
.footer__bottom nav { display:flex; gap:1.2rem; flex-wrap:wrap; }
.social { display:flex; gap:.6rem; }
.social a { width:38px; height:38px; border:1px solid var(--line); border-radius:10px; display:grid; place-items:center; color:var(--muted); }
.social a:hover { border-color:var(--teal); color:var(--teal); }

/* ---------- Page hero (interior, light) ---------- */
.page-hero { background:var(--bg); color:var(--ink); position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line-2); }
.page-hero .hero__grid-bg { z-index:-2; }
.page-hero__inner { padding-block:clamp(56px,9vw,110px) clamp(40px,6vw,64px); display:grid; gap:1.3rem; }
.page-hero h1 { font-size:var(--step-3); max-width:20ch; }
.page-hero p { color:var(--muted); max-width:60ch; font-size:var(--step-1); font-weight:500; }
.crumbs { font-size:.82rem; color:var(--muted-2); letter-spacing:.02em; }
.crumbs a:hover { color:var(--teal); }

/* ---------- Prose / articles ---------- */
.prose { max-width:70ch; }
.prose p { margin-bottom:1.1rem; color:var(--muted); }
.dark .prose p { color:var(--muted); }
.prose h2 { font-size:var(--step-2); margin:2rem 0 .8rem; }
.prose h3 { font-size:var(--step-1); margin:1.6rem 0 .6rem; }

/* ---------- Case study ---------- */
.case { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.case__head { padding:clamp(20px,3vw,30px); border-bottom:1px solid var(--line); }
.case__body { display:grid; gap:0; }
.case__row { display:grid; grid-template-columns:1fr; gap:.3rem; padding:1.1rem clamp(20px,3vw,30px); border-bottom:1px solid var(--line); }
.case__row:last-child { border-bottom:0; }
@media (min-width:640px){ .case__row { grid-template-columns:160px 1fr; gap:1.5rem; } }
.case__row b { font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); font-weight:800; padding-top:.15rem; }
.case__row p { color:var(--muted); }
.badge-soon { display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze); border:1px solid rgba(152,162,179,.4); border-radius:999px; padding:.25rem .6rem; }
.badge-live { color:var(--teal); border-color:rgba(42,78,239,.4); }

/* ---------- Forms ---------- */
.form { display:grid; gap:1.1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3.5vw,38px); }
.field { display:grid; gap:.4rem; }
.field label { font-size:.82rem; font-weight:700; letter-spacing:.02em; }
.field input,.field select,.field textarea {
  font:inherit; font-size:.95rem; padding:.8rem .9rem; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  transition:border-color .2s, box-shadow .2s; width:100%;
}
.field textarea { min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(42,78,239,.15); outline:none; }
.field .err { color:#c0392b; font-size:.78rem; display:none; }
.field.invalid .err { display:block; }
.field.invalid input,.field.invalid select,.field.invalid textarea { border-color:#c0392b; }
.field--row { grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .field--row { grid-template-columns:1fr; } }
.form__note { font-size:.8rem; color:var(--muted-2); }
.form__ok { display:none; padding:1rem 1.1rem; background:rgba(42,78,239,.1); border:1px solid rgba(42,78,239,.35); border-radius:10px; color:#1B3AD1; font-weight:600; font-size:.92rem; }
.form__ok.show { display:block; }
/* honeypot: hidden from humans, visible to bots */
.hp { position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

/* enquiry routing tabs */
.routes { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem; }
.route-btn { border:1px solid var(--line); background:#fff; border-radius:999px; padding:.55rem 1rem; font-size:.85rem; font-weight:600; color:var(--muted); transition:.2s; }
.route-btn[aria-pressed="true"] { background:var(--ink); color:#fff; border-color:var(--ink); }
.route-btn:hover { border-color:var(--ink); }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* ---------- Utilities ---------- */
.mt-1{margin-top:.5rem;}.mt-2{margin-top:1rem;}.mt-3{margin-top:1.8rem;}.mt-4{margin-top:2.6rem;}
.center{text-align:center;} .mx-auto{margin-inline:auto;}
.two-col { display:grid; gap:clamp(24px,4vw,56px); }
@media (min-width:820px){ .two-col { grid-template-columns:1fr 1fr; align-items:start; } }
.tag-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.divider { height:1px; background:var(--line); border:0; }
.dark .divider { background:var(--line-dark); }
.list-check { list-style:none; padding:0; display:grid; gap:.7rem; }
.list-check li { display:grid; grid-template-columns:20px 1fr; gap:.7rem; color:var(--muted); font-size:.98rem; }
.dark .list-check li { color:var(--muted); }
.list-check li::before { content:""; width:8px; height:8px; margin-top:.5rem; border-radius:2px; background:var(--teal); }
.skip-link { position:absolute; left:-999px; top:0; background:var(--teal); color:#fff; padding:.6rem 1rem; border-radius:0 0 8px 0; font-weight:700; z-index:100; }
.skip-link:focus { left:0; }

/* ---------- Businesses dropdown ---------- */
.nav-has-sub { position:relative; }
.nav-sub-toggle { display:inline-flex; align-items:center; gap:.25rem; }
.nav-sub-toggle .caret { transition:transform .2s var(--ease); }
.subnav a { display:block; }
a.card { display:block; color:inherit; }

@media (min-width:961px){
  .subnav {
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
    width:290px; background:var(--surface); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow-md); padding:.45rem; display:grid; gap:1px;
    opacity:0; visibility:hidden; transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; z-index:70;
  }
  .nav-has-sub::after { content:""; position:absolute; left:0; right:0; top:100%; height:14px; } /* hover bridge */
  .nav-has-sub:hover .subnav, .nav-has-sub:focus-within .subnav { opacity:1; visibility:visible; transform:translateX(-50%) translateY(2px); }
  .nav-has-sub:hover .caret, .nav-has-sub:focus-within .caret { transform:rotate(180deg); }
  .subnav a { padding:.6rem .8rem; border-radius:11px; display:grid; gap:1px; }
  .subnav a b { font-size:.92rem; font-weight:700; color:var(--ink); }
  .subnav a span { font-size:.78rem; color:var(--muted-2); font-weight:500; }
  .subnav a:hover { background:var(--bg-alt); }
  .subnav a:hover b { color:var(--teal); }
  .subnav a:first-child { border-bottom:1px solid var(--line); border-radius:11px 11px 0 0; margin-bottom:.25rem; padding-bottom:.7rem; }
}

/* ---------- Fulfilment: price hook ---------- */
.price-hook { display:grid; gap:clamp(20px,3vw,40px); align-items:center; border:1px solid var(--line);
  border-radius:clamp(16px,2.5vw,22px); padding:clamp(24px,4vw,44px); background:linear-gradient(120deg,#F5F8FF,#FFFFFF); }
@media (min-width:820px){ .price-hook { grid-template-columns:auto 1fr; gap:clamp(32px,5vw,64px); } }
.price-hook__tag { text-align:center; padding:clamp(18px,3vw,28px) clamp(24px,4vw,40px); border-radius:18px;
  background:var(--teal); color:#fff; box-shadow:0 12px 30px rgba(42,78,239,.28); }
.price-hook__tag span { display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.price-hook__tag b { display:block; font-size:clamp(3rem,2rem+4vw,4.6rem); line-height:1; letter-spacing:-.04em; margin:.2rem 0; }
.price-hook__tag em { display:block; font-style:normal; font-size:.85rem; font-weight:700; letter-spacing:.06em; opacity:.9; }
.price-hook__body h2 { font-size:var(--step-2); }
.price-hook__body p { color:var(--muted); }

/* ---------- Fulfilment: rate table ---------- */
.rate-card { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.rate-table { width:100%; border-collapse:collapse; font-size:.98rem; }
.rate-table th { text-align:left; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
  font-weight:700; padding:1rem clamp(16px,2.4vw,26px); background:var(--bg-alt); border-bottom:1px solid var(--line); }
.rate-table td { padding:1rem clamp(16px,2.4vw,26px); border-bottom:1px solid var(--line-2); color:var(--muted); vertical-align:middle; }
.rate-table tbody tr:last-child td { border-bottom:0; }
.rate-table tbody tr:nth-child(odd) { background:rgba(42,78,239,.025); }
.rate-table td b { color:var(--ink); font-weight:700; }
.rate-fee { color:var(--teal); font-weight:800; font-size:1.05rem; white-space:nowrap; }
.rate-table th:last-child, .rate-table td:last-child { text-align:right; }
.rate-note { margin-top:1.2rem; color:var(--muted); font-size:.95rem; }
.rate-note strong { color:var(--ink); }
.rate-tel { color:var(--teal); font-weight:700; }
@media (max-width:620px){
  .rate-table thead { position:absolute; left:-9999px; }
  .rate-table tr { display:block; border-bottom:1px solid var(--line); padding:.5rem 0; }
  .rate-table tbody tr:last-child { border-bottom:0; }
  .rate-table td { display:flex; justify-content:space-between; gap:1rem; align-items:center;
    border:0; padding:.5rem clamp(16px,4vw,20px); text-align:right; }
  .rate-table td::before { content:attr(data-l); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted-2); font-weight:700; text-align:left; }
}

/* ---------- Fulfilment: price equation ---------- */
.price-eq { display:grid; gap:.8rem; align-items:stretch; }
@media (min-width:780px){ .price-eq { grid-template-columns:1fr auto 1fr auto 1fr; gap:1rem; } }
.price-eq__item { background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:clamp(18px,2.6vw,26px); text-align:center; display:grid; gap:.5rem; align-content:center; }
.price-eq__item span { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.price-eq__item b { font-size:clamp(1.7rem,1.3rem+1.4vw,2.3rem); letter-spacing:-.03em; color:var(--ink); line-height:1; }
.price-eq__item--total { background:var(--teal); border-color:var(--teal); }
.price-eq__item--total span { color:rgba(255,255,255,.85); }
.price-eq__item--total b { color:#fff; }
.price-eq__op { display:grid; place-items:center; font-size:1.5rem; font-weight:800; color:var(--muted-2); }

/* ---------- E-commerce: interactive tabs ("tablet" widget) ---------- */
.tabs { display:grid; gap:clamp(16px,2.5vw,24px); }
.tabs__list { display:flex; flex-wrap:wrap; gap:.5rem; }
.tabs__tab { border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:999px; padding:.6rem 1.15rem; font-size:.9rem; font-weight:700;
  transition:.18s var(--ease); white-space:nowrap; }
.tabs__tab:hover { border-color:var(--ink); color:var(--ink); }
.tabs__tab[aria-selected="true"] { background:var(--teal); border-color:var(--teal); color:#fff;
  box-shadow:0 6px 18px rgba(42,78,239,.28); }
.tabs__panels { position:relative; }
.tabs__panel { background:var(--surface); border:1px solid var(--line); border-radius:clamp(16px,2.5vw,22px);
  padding:clamp(22px,3.5vw,38px); box-shadow:var(--shadow-sm); animation:tabIn .35s var(--ease); }
.tabs__panel[hidden] { display:none; }
@keyframes tabIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .tabs__panel { animation:none; } }
.tabs__panel-head { max-width:60ch; margin-bottom:1.6rem; }
.tabs__panel-head h3 { font-size:var(--step-2); }
.tabs__panel-head p { color:var(--muted); margin-top:.5rem; }
.tabs__widgets { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(12px,1.8vw,18px); }
.wgt { display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start;
  padding:1.1rem; border:1px solid var(--line); border-radius:14px; background:var(--bg-alt); }
.wgt__ico { width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(42,78,239,.1); color:var(--teal); }
.wgt__ico svg { width:22px; height:22px; }
.wgt h4 { font-size:1rem; margin-bottom:.2rem; }
.wgt p { font-size:.88rem; color:var(--muted); line-height:1.5; }
.tabs__foot { margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.tabs__foot-label { display:inline-block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); font-weight:800; margin-bottom:.9rem; }
.tabs__check { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
@media (max-width:620px){ .tabs__list { flex-wrap:nowrap; overflow-x:auto; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .tabs__list::-webkit-scrollbar{ display:none; } }

/* ---------- Ventures: venture cards ---------- */
.vgrid { display:grid; gap:clamp(16px,2.4vw,24px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.vcard { background:linear-gradient(180deg,#fff,#F4F6FB); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,3vw,32px); transition:.3s var(--ease); }
.vcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(42,78,239,.4); }
.vcard--wide { grid-column:1 / -1; background:linear-gradient(120deg,#EEF2FF,#FFFFFF); border-color:rgba(42,78,239,.25); }
.vcard__top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.vcard__ico { width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:rgba(42,78,239,.1); color:var(--teal); }
.vcard__ico svg { width:24px; height:24px; }
.vcard h3 { font-size:var(--step-1); }
.vcard__pos { color:var(--muted); }
.vcard__list { list-style:none; padding:0; margin:1.1rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; }
.vcard__list li { font-size:.8rem; color:var(--muted); background:rgba(20,20,20,.04);
  border:1px solid var(--line); border-radius:999px; padding:.32rem .7rem; }
.vcard--wide .vcard__list { gap:.5rem; }
.vcard--wide .vcard__list li { background:#fff; border-color:rgba(42,78,239,.2); }

/* ---------- Partners: stats + rich logo tiles ---------- */
.pstats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.pstat { background:var(--surface); padding:clamp(18px,2.6vw,26px); text-align:center; }
.pstat b { display:block; font-size:clamp(1.6rem,1.2rem+1.2vw,2.1rem); letter-spacing:-.03em; color:var(--ink); line-height:1; }
.pstat span { display:block; margin-top:.45rem; font-size:.8rem; color:var(--muted-2); }

.pgroup { margin-bottom:clamp(32px,5vw,56px); }
.pgroup:last-child { margin-bottom:0; }
.pgroup__head { margin-bottom:1.3rem; padding-bottom:.9rem; border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem 1rem; }
.pgroup__title { font-size:var(--step-1); }
.pgroup__sub { font-size:.85rem; color:var(--muted-2); font-weight:600; }
.pgrid { display:grid; gap:clamp(14px,2vw,20px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.ptile--rich { display:flex; flex-direction:column; padding:clamp(18px,2.4vw,24px);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); transition:.25s var(--ease); }
.ptile--rich:hover { border-color:rgba(42,78,239,.4); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.ptile__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ptile__logo { position:relative; width:58px; height:58px; flex:none; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:#fff; }
.ptile__mono { position:absolute; inset:0; display:grid; place-items:center;
  font-weight:800; font-size:1.05rem; letter-spacing:-.02em; color:var(--teal); background:rgba(42,78,239,.08); }
.ptile__logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10px;
  background:#fff; opacity:0; transition:opacity .2s var(--ease); }
.ptile__logo img.is-ok { opacity:1; }
.ptile__sector { font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); background:rgba(42,78,239,.08); border:1px solid rgba(42,78,239,.18);
  border-radius:999px; padding:.32rem .7rem; }
.ptile--rich h3 { font-size:1.12rem; letter-spacing:-.01em; }
.ptile--rich h3 a:hover { color:var(--teal); }
.ptile__desc { font-size:.9rem; color:var(--muted); margin-top:.4rem; line-height:1.5; }
.ptile__foot { margin-top:auto; padding-top:1.1rem; display:flex; align-items:flex-end; justify-content:space-between; gap:.8rem; }
.ptile__rel { font-size:.8rem; color:var(--muted-2); line-height:1.45; max-width:26ch; }
.ptile__link { font-size:.76rem; font-weight:800; letter-spacing:.02em; color:var(--teal); white-space:nowrap; }
.ptile__link--muted { color:var(--muted-2); }

/* ---------- Digital Marketing: pillar icon reuse ---------- */
.card--dark .pillar__ico { background:rgba(42,78,239,.1); }

/* ---------- Sales: process flow ---------- */
.flow { display:grid; gap:clamp(14px,2vw,20px); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); counter-reset:flow; }
.flow__step { position:relative; padding:clamp(20px,2.6vw,28px); border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
.flow__n { display:inline-flex; font-size:.8rem; font-weight:800; letter-spacing:.1em; color:#fff;
  background:var(--teal); border-radius:8px; padding:.25rem .55rem; margin-bottom:.9rem; }
.flow__step h4 { font-size:var(--step-1); margin-bottom:.4rem; }
.flow__step p { color:var(--muted); font-size:.92rem; }
@media (min-width:900px){
  .flow__step:not(:last-child)::after { content:""; position:absolute; top:50%; right:-11px; width:22px; height:2px;
    background:var(--line); z-index:1; }
}

/* ---------- AI & Automation: pillar icons ---------- */
.pillar__ico { display:grid; place-items:center; width:46px; height:46px; border-radius:12px;
  background:rgba(42,78,239,.1); color:var(--teal); }
.pillar__ico svg { width:24px; height:24px; }

/* ---------- Quote form: selectable option chips ---------- */
.opt-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:.5rem; }
.opt { position:relative; display:block; }
.opt input { position:absolute; opacity:0; width:0; height:0; }
.opt span { display:block; padding:.65rem .8rem; border:1px solid var(--line); border-radius:10px;
  font-size:.84rem; font-weight:600; color:var(--muted); background:#fff; cursor:pointer;
  text-align:center; transition:.18s var(--ease); }
.opt span:hover { border-color:var(--ink); color:var(--ink); }
.opt input:checked + span { background:rgba(42,78,239,.08); border-color:var(--teal); color:var(--teal); }
.opt input:focus-visible + span { outline:2px solid var(--teal); outline-offset:2px; }

/* ---------- Fulfilment: fair pricing list ---------- */
.fair { display:grid; gap:0; border-top:1px solid var(--line); }
.fair__item { display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  padding:clamp(18px,2.6vw,26px) 0; border-bottom:1px solid var(--line); }
.fair__tick { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:rgba(42,78,239,.1); color:var(--teal); }
.fair__tick svg { width:16px; height:16px; }
.fair__item h3 { font-size:var(--step-1); margin-bottom:.25rem; }
.fair__item p { color:var(--muted); }

/* ---------- Footer contact block ---------- */
.footer__contact { font-style:normal; color:var(--muted-2); font-size:.9rem; line-height:1.7; margin-top:1rem; }
.footer__contact a { color:var(--muted); }
.footer__contact a:hover { color:var(--teal); }