/* ==========================================================
   indiancad.com — Global Stylesheet
   Palette: blue / silver / gray / metallic
   ========================================================== */
:root {
  --blue-900: #0a2a6b;
  --blue-700: #0f3d9e;
  --blue-500: #1a5cff;
  --blue-100: #e8efff;
  --silver:   #c9d1dc;
  --metal:    linear-gradient(135deg, #e8ecf1 0%, #b9c2cd 45%, #dfe5eb 60%, #a8b2bf 100%);
  --gray-900: #1c2330;
  --gray-700: #3b4454;
  --gray-500: #6b7686;
  --gray-100: #f4f6f9;
  --white:    #ffffff;
  --radius:   12px;
  --shadow:   0 6px 24px rgba(10, 42, 107, .10);
  --shadow-lg:0 16px 48px rgba(10, 42, 107, .18);
  --font-head: 'Open Sans', system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.25; color: var(--gray-900); }
img, svg { max-width: 100%; }
a { color: var(--blue-500); text-decoration: none; }

/* The browser's default [hidden] { display: none } loses to ANY class rule
   that sets an explicit display (flex, grid…). Several components here are
   toggled from JS via el.hidden, so make the attribute authoritative —
   otherwise "hidden" elements stay stubbornly visible. */
[hidden] { display: none !important; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Subtle animated blueprint grid behind everything */
.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(26,92,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,92,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 440px 440px; } }
@media (prefers-reduced-motion: reduce) {
  .bg-grid { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--silver);
  transition: box-shadow .25s;
}
.site-header.scrolled { box-shadow: var(--shadow); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 34px; height: 34px; }
.logo-text { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--gray-900); }
.logo-accent { color: var(--blue-500); }
.main-nav { display: flex; gap: 4px; margin-left: auto; }
.main-nav a {
  color: var(--gray-700); font-weight: 500; font-size: .9rem; white-space: nowrap;
  padding: 8px 10px; border-radius: 8px; transition: background .2s, color .2s;
}
.main-nav a:hover { background: var(--blue-100); color: var(--blue-700); }
.main-nav a.active { color: var(--blue-500); font-weight: 700; }

/* ---------- "Why ACTCAD" dropdown ---------- */
.nav-dropdown { position: relative; }
.nav-drop-toggle {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-body); color: var(--gray-700); font-weight: 500; font-size: .9rem;
  white-space: nowrap; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; transition: background .2s, color .2s;
}
.nav-drop-toggle:hover, .nav-dropdown.open .nav-drop-toggle { background: var(--blue-100); color: var(--blue-700); }
.nav-dropdown.has-active .nav-drop-toggle { color: var(--blue-500); font-weight: 700; }
.nav-caret { font-size: .7rem; transition: transform .2s; }
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-drop-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 120;
  min-width: 290px; background: #fff; border: 1px solid var(--silver);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; overflow: hidden;
}
.nav-dropdown:hover .nav-drop-menu, .nav-dropdown.open .nav-drop-menu { display: block; }
.nav-drop-menu a {
  display: block; padding: 10px 13px; border-radius: 8px; white-space: normal;
}
.nav-drop-menu a strong { display: block; font-family: var(--font-head); font-size: .92rem; color: var(--gray-900); }
.nav-drop-menu a span { display: block; font-size: .8rem; color: var(--gray-500); margin-top: 1px; }
.nav-drop-menu a:hover { background: var(--blue-100); }
.nav-drop-menu a:hover strong { color: var(--blue-700); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.contact-links { display: flex; align-items: center; gap: 8px; }
.contact-link {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--gray-700); font-weight: 600; font-size: .83rem;
  border: 1px solid var(--silver); border-radius: 20px; padding: 6px 12px; transition: all .2s;
}
.contact-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.contact-link:hover { border-color: var(--blue-500); color: var(--blue-700); background: var(--blue-100); }
/* (.contact-link.whatsapp removed — WhatsApp lives in the floating dock only) */
.mobile-only-link { display: none; }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--gray-900); margin: 5px 0; transition: .3s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  border-radius: 10px; padding: 13px 28px; font-size: 1rem; white-space: nowrap;
  cursor: pointer; border: 0; transition: transform .18s, box-shadow .18s, background .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; box-shadow: 0 4px 16px rgba(26,92,255,.35); }
.btn-primary:hover { box-shadow: 0 8px 26px rgba(26,92,255,.45); }
.btn-outline { background: transparent; color: var(--blue-700); border: 2px solid var(--blue-500); }
.btn-outline:hover { background: var(--blue-100); }
.btn-light { background: var(--blue-100); color: var(--blue-700); }
.btn-light:hover { background: #d9e6ff; box-shadow: 0 4px 14px rgba(26,92,255,.18); }
.btn-sm { padding: 9px 18px; font-size: .88rem; }
.btn-lg { padding: 16px 38px; font-size: 1.1rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 75% -10%, #14418f 0%, var(--blue-900) 55%, #071c49 100%);
  color: #fff; padding: 96px 0 110px;
}
.hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 800; max-width: 720px; }
.hero .hero-sub { color: #ccd9f6; font-size: 1.15rem; max-width: 640px; margin: 22px 0 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); }
.hero .btn-outline:hover { background: rgba(255,255,255,.1); }
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }
.hero-badges .badge-pill { background: rgba(255,255,255,.1); color: #dbe6ff; border-color: rgba(255,255,255,.2); }

/* Parallax decorative layers */
.parallax-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.parallax-layer svg { position: absolute; opacity: .16; }
.hero-blueprint { right: -60px; top: 30px; width: 520px; }
.hero-gear { left: -80px; bottom: -90px; width: 340px; animation: slowSpin 90s linear infinite; }
@keyframes slowSpin { to { transform: rotate(360deg); } }

/* ---------- Sections ---------- */
.section { padding: 76px 0; }
.section-alt { background: var(--gray-100); }
.section-title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 10px; }
.section-lead { text-align: center; color: var(--gray-500); max-width: 680px; margin: 0 auto 46px; font-size: 1.05rem; }

/* ---------- Counters ---------- */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.counter-card {
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius);
  text-align: center; padding: 32px 16px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s;
}
.counter-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.counter-num { font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; color: var(--blue-500); }
.counter-num small { font-size: 1.6rem; }
.counter-label { color: var(--gray-500); font-size: .95rem; margin-top: 4px; }

/* ---------- Trust logos ---------- */
.logo-wall { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.client-chip {
  font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--gray-700);
  background: var(--metal); border: 1px solid var(--silver); border-radius: 10px;
  padding: 12px 20px; letter-spacing: .3px; transition: all .22s;
}
.client-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--blue-700); }

/* Sliding client logo marquee */
.logo-marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.logo-marquee-track { display: flex; gap: 16px; width: max-content; animation: logoMarquee 34s linear infinite; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes logoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
  .logo-marquee { overflow-x: auto; }
}

/* ---------- Modernised logo slider (v3, centre spotlight) ----------
   v2 rested every logo in greyscale and only lit the one under the
   cursor, which meant a visitor who never moved their mouse saw a flat
   grey strip — the modernisation was invisible. v3 puts the spotlight
   on the CENTRE of the strip instead: whichever logo is passing the
   middle grows, colourises and lifts onto a white card, all on its own.

   Sizes are roughly 45% larger than v2 (96px tall cards, 56px artwork)
   because the old ones read as a row of small grey chips.

   The scale/filter/z-index of each logo are written per frame by JS in
   main.js — see the "logo spotlight" block there. DO NOT add a
   transition for transform or filter here: the values already change
   smoothly every frame, and a transition makes the spotlight lag
   visibly behind the moving strip. Without JS (or with reduced motion)
   the CSS below still gives a perfectly good hover-lit strip. */
.logo-marquee-v2 {
  /* Vertical padding must clear BOTH halves of the spotlight: the card
     grows ((96 × 1.34) − 96) / 2 ≈ 16px each way AND lifts 7px upward,
     so anything under ~24px shaves the top off the focused logo. The
     strip clips its overflow (the fade mask needs it), so this padding
     is the only thing keeping the effect intact. Measured, not guessed. */
  padding: 28px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.logo-marquee-v2 .logo-marquee-track {
  gap: 40px;
  align-items: center;
  animation-duration: 46s;
  animation-timing-function: linear;
  transition: none;
}
.logo-marquee-v2:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-v2 .client-logo {
  position: relative;                      /* so JS can raise the focused one */
  /* Height is fixed, width is NOT: a logo set is never one aspect ratio, and
     a fixed-width card leaves a square emblem stranded in white space while a
     wide wordmark is squeezed. Each card hugs its own logo instead. */
  /* min-width only guards against a pathologically narrow logo — keep it
     BELOW the natural width of a square one (height + padding ≈ 116px) or it
     pads square emblems out with dead space. */
  height: 104px; width: auto; min-width: 100px;
  padding: 12px 18px;
  border: 1px solid transparent; border-radius: 16px;
  background: transparent; box-shadow: none;
  filter: grayscale(1) opacity(.62);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Fill the card. width/height 100% + object-fit:contain makes every logo as
   large as its box allows while keeping its own aspect ratio — a wide
   wordmark uses the full width, a square emblem the full height, and
   neither is ever stretched. Setting only a height (the previous approach)
   left wide logos small and short ones floating in space. */
/* Height is the constraint, width follows. Every logo is exactly as tall as
   the card allows and as wide as its own proportions require, so the row
   reads as one consistent band whatever mix of shapes the logos are.
   NO max-width: clamping the width would shrink a wide logo below full
   height, which is the thing this is meant to avoid.
   display:block matters — an inline <img> sits on the text baseline and
   loses a few pixels to line-height, so it never quite reaches 100%. */
.logo-marquee-v2 .client-logo img {
  display: block;
  height: 100%; width: auto;
  max-width: none; max-height: none;
}
/* Card treatment for the logo currently in the spotlight (class set by JS)
   and, as a fallback, for whichever logo the cursor is over. */
.logo-marquee-v2 .client-logo.is-focus,
.logo-marquee-v2 .client-logo:hover {
  background: var(--white);
  border-color: var(--silver);
  box-shadow: var(--shadow-lg);
}
/* Hover fallback for no-JS: without the spotlight loop nothing else
   colourises a logo, so keep the v2 behaviour available. */
.logo-marquee-v2 .client-logo:hover { filter: grayscale(0) opacity(1); }

@media (max-width: 820px) {
  .logo-marquee-v2 { padding: 22px 0; }   /* 86px card → ≈15px growth + 7px lift */
  .logo-marquee-v2 .logo-marquee-track { gap: 24px; }
  .logo-marquee-v2 .client-logo { height: 86px; min-width: 84px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  /* No movement means no centre to spotlight — show everything plainly. */
  .logo-marquee-v2 .client-logo { filter: grayscale(0) opacity(1); }
}

/* ---------- Testimonials ---------- */
/* 4 columns: there are four named testimonials — a 3-col grid would leave
   one stranded on its own row. */
.testimonial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.testimonial-card {
  background: #fff; border: 1px solid var(--silver); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px;
  transition: transform .25s, box-shadow .25s;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.testimonial-stars { color: #f5a623; letter-spacing: 2px; font-size: .95rem; }
.testimonial-quote { color: var(--gray-700); font-size: .96rem; flex: 1; }
.testimonial-quote::before {
  content: "\201C"; display: block; font-family: Georgia, serif; font-size: 2.4rem;
  color: var(--blue-100); line-height: .4; margin-bottom: 10px;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--blue-100); color: var(--blue-700);
  display: grid; place-items: center; font-weight: 700; font-family: var(--font-head); font-size: .85rem; flex-shrink: 0;
}
.testimonial-name { font-weight: 700; font-size: .86rem; color: var(--gray-900); line-height: 1.35; }
.testimonial-role { font-size: .78rem; color: var(--gray-500); line-height: 1.35; margin-top: 2px; }
@media (max-width: 1080px) { .testimonial-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ---------- Feature cards ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card {
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius);
  padding: 30px 26px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--blue-500); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: var(--blue-100); font-size: 1.5rem; margin-bottom: 16px;
}
.feature-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.feature-card p { color: var(--gray-500); font-size: .95rem; }

/* ---------- Capabilities tabs ---------- */
.cap-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.cap-tab {
  font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--gray-700);
  background: var(--white); border: 1px solid var(--silver); border-radius: 999px;
  padding: 9px 20px; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.cap-tab:hover { border-color: var(--blue-500); color: var(--blue-500); }
.cap-tab.active { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.cap-panel {
  list-style: none; margin: 0 auto; padding: 0; max-width: 900px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px 30px;
}
.cap-panel[hidden] { display: none; }
.cap-panel li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--gray-700); line-height: 1.5; }
.cap-panel li::before { content: "✓"; color: var(--blue-500); font-weight: 800; flex-shrink: 0; }

/* ---------- Video cards ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.video-card {
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius);
  padding: 28px 24px; text-align: center; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.video-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--blue-500); }
.video-card-icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-100); font-size: 1.5rem; margin: 0 auto 16px;
}
.video-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.video-card p { color: var(--gray-500); font-size: .92rem; margin-bottom: 18px; }

/* ---------- Offices ---------- */
.office-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.office-card {
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius);
  padding: 26px 24px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.office-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-500); }
.office-card .office-tag {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--blue-500);
  background: var(--blue-100); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
}
.office-card address { font-style: normal; color: var(--gray-700); line-height: 1.6; font-size: .95rem; }
.office-card address strong { display: block; color: var(--gray-900, var(--gray-700)); margin-bottom: 2px; }

/* ---------- Pricing tiers ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.tier-card {
  background: var(--white); border: 1px solid var(--silver); border-radius: 16px;
  padding: 36px 30px; display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s; position: relative;
}
.tier-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tier-card.tier-popular { border: 2px solid var(--blue-500); box-shadow: var(--shadow-lg); }
.tier-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff;
  font-size: .75rem; font-weight: 700; padding: 5px 16px; border-radius: 20px; letter-spacing: .5px;
}
.tier-name { font-size: 1.25rem; font-weight: 800; }
.tier-for { color: var(--gray-500); font-size: .9rem; margin: 4px 0 18px; }
.tier-price { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; color: var(--blue-700); }
.tier-price small { font-size: 1rem; color: var(--gray-500); font-weight: 500; }
.tier-note { font-size: .82rem; color: var(--gray-500); margin-bottom: 18px; }
.tier-list { list-style: none; margin: 0 0 26px; flex: 1; }
.tier-list li { padding: 7px 0 7px 26px; position: relative; font-size: .94rem; color: var(--gray-700); border-bottom: 1px dashed var(--gray-100); }
.tier-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-500); font-weight: 700; }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--silver); }
.compare-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 880px; font-size: .92rem; }
.compare-table th, .compare-table td { padding: 13px 14px; text-align: center; border-bottom: 1px solid var(--gray-100); }
.compare-table th { background: var(--blue-900); color: #fff; font-family: var(--font-head); position: sticky; top: 0; }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; font-weight: 600; }
.compare-table tr:hover td { background: var(--blue-100); }
.compare-table .col-us { background: rgba(26,92,255,.07); font-weight: 700; }
.yes { color: #0a8f4d; font-weight: 700; }
.no  { color: #c43d3d; font-weight: 700; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--white); border: 1px solid var(--silver); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 40px; max-width: 640px; margin: 0 auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: .9rem; color: var(--gray-700); }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
  border: 1px solid var(--silver); border-radius: 9px; background: var(--gray-100);
  transition: border-color .2s, background .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--blue-500); background: #fff;
}
/* Visually hidden but still read by screen readers — keeps every icon+placeholder
   field properly labelled without showing a heading above the box. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Icon inside the field */
.input-icon { position: relative; display: block; }
.input-icon-glyph {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--gray-500); pointer-events: none;
  display: grid; place-items: center; transition: color .2s;
}
.input-icon-glyph svg { width: 19px; height: 19px; }
.input-icon input, .input-icon select { width: 100%; padding-left: 42px; }
.input-icon:focus-within .input-icon-glyph { color: var(--blue-500); }

.puzzle-row { display: flex; align-items: center; gap: 12px; background: var(--blue-100); padding: 12px 16px; border-radius: 9px; }
.puzzle-row input { width: 90px; text-align: center; }
.puzzle-row label { display: flex; align-items: center; gap: 8px; }
.puzzle-row .input-icon-glyph { position: static; transform: none; color: var(--blue-500); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* honeypot */
.form-alert { border-radius: 9px; padding: 14px 18px; margin-bottom: 20px; font-weight: 500; }
.form-alert.ok  { background: #e7f7ee; color: #0a8f4d; border: 1px solid #b9e6cd; }
.form-alert.err { background: #fdecec; color: #c43d3d; border: 1px solid #f2c6c6; }

/* ---------- Lead form extras ---------- */
.lf-privacy {
  margin-bottom: 16px; font-size: .8rem; font-weight: 600; color: var(--blue-700); text-align: center;
  background: var(--blue-100); border-radius: 8px; padding: 9px 14px; line-height: 1.4;
}
.lead-form-compact { background: rgba(255,255,255,.97); border-radius: 14px; padding: 22px; box-shadow: var(--shadow-lg); }
.lead-form-compact .form-field label { font-size: .82rem; }
.lead-form-compact .form-field input, .lead-form-compact .form-field select { padding: 10px 12px; font-size: .93rem; }
/* NOTE: the `padding` shorthand above wipes out the padding-left that makes room
   for the in-field icon, so it must be restored here (this rule has to stay AFTER
   it). If you ever add another padding shorthand for inputs, re-check this. */
.lead-form-compact .input-icon input, .lead-form-compact .input-icon select { padding-left: 38px; }
.lead-form-compact .input-icon-glyph { left: 11px; width: 17px; height: 17px; }
.lead-form-compact .input-icon-glyph svg { width: 17px; height: 17px; }
.lead-form-compact .lf-privacy { margin-bottom: 12px; font-size: .74rem; padding: 7px 12px; }
.lead-form-compact .btn-lg { padding: 13px 24px; font-size: 1rem; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-form-title { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--gray-900); margin-bottom: 4px; }
.hero-form-sub { color: var(--gray-500); font-size: .85rem; margin-bottom: 14px; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- Client logos (image slots) ---------- */
.client-logo {
  height: 58px; padding: 10px 18px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--silver); border-radius: 10px; flex-shrink: 0;
  transition: transform .22s, box-shadow .22s;
}
.client-logo img { max-height: 38px; width: auto; filter: grayscale(35%); transition: filter .22s; }
.client-logo:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.client-logo:hover img { filter: none; }

/* ---------- TFLEX / product boxes ---------- */
.product-box-img {
  width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 10px;
  background: var(--gray-100); border: 1px solid var(--silver); margin-bottom: 18px;
}
.tflex-band {
  display: grid; grid-template-columns: 220px 1fr auto; gap: 30px; align-items: center;
  background: #fff; border: 1px solid var(--silver); border-radius: 16px;
  padding: 30px 34px; box-shadow: var(--shadow); transition: box-shadow .25s;
}
.tflex-band:hover { box-shadow: var(--shadow-lg); }
.tflex-band img { width: 100%; border-radius: 10px; }
.tflex-kicker { font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-500); }
@media (max-width: 820px) { .tflex-band { grid-template-columns: 1fr; text-align: center; } .tflex-band img { max-width: 240px; margin: 0 auto; } }

/* ---------- Guarantee strip ----------
   auto-fit rather than a fixed column count: the store went from two
   guarantee cards to three in v29, and a hard `1fr 1fr` would have
   stranded the third one on its own row (the mistake v23 made with
   testimonials). This adapts to however many cards the page has. */
.guarantee-strip {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.guarantee-card {
  display: flex; gap: 16px; align-items: flex-start; background: #fff;
  border: 2px solid var(--blue-100); border-radius: 14px; padding: 24px;
}
.guarantee-card .g-icon { font-size: 1.9rem; }
.guarantee-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.guarantee-card p { color: var(--gray-500); font-size: .92rem; }
@media (max-width: 720px) { .guarantee-strip { grid-template-columns: 1fr; } }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  background: #fff; border: 1px solid var(--silver); border-radius: var(--radius);
  overflow: hidden; transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.post-card-top { height: 6px; background: linear-gradient(90deg, var(--blue-500), var(--silver)); }
.post-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.post-cat { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--blue-500); }
.post-card h3 { font-size: 1.1rem; margin: 8px 0 10px; }
.post-card h3 a { color: var(--gray-900); }
.post-card h3 a:hover { color: var(--blue-500); }
.post-excerpt { color: var(--gray-500); font-size: .92rem; flex: 1; }
.post-meta { font-size: .82rem; color: var(--gray-500); margin-top: 16px; }
.post-body { max-width: 760px; margin: 0 auto; font-size: 1.05rem; }
.post-body h2 { margin: 34px 0 12px; }
.post-body p { margin-bottom: 16px; }
.post-body ul, .post-body ol { margin: 0 0 16px 24px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--gray-900); color: #aab4c4; padding: 30px 0; margin-top: 60px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.badge-pill {
  display: inline-block; font-size: .8rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.18); color: #cfd8e6;
  padding: 5px 14px; border-radius: 20px;
}
.badge-india { background: rgba(255,255,255,.06); }
.badge-pill.badge-light { background: var(--blue-100); color: var(--blue-700); border-color: transparent; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.footer-nav a { color: #aab4c4; font-size: .88rem; }
.footer-nav a:hover { color: #fff; }
.footer-nav-secondary { gap: 16px; margin-top: -8px; }
.footer-nav-secondary a { color: #7d8798; font-size: .82rem; }

/* ---------- Footer review ratings (real, linked, third-party) ---------- */
/* width:100% is load-bearing — .footer-inner is a centred flex COLUMN, so
   without it this block shrinks to its content and the five cards wrap onto
   two rows even on a wide desktop. */
.footer-reviews { text-align: center; width: 100%; }
.footer-reviews-head {
  color: #fff; font-family: var(--font-head); font-weight: 700;
  font-size: 1rem; margin-bottom: 16px;
}
.footer-reviews-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* White cards on the dark footer, matching the strip on actcad.com's home
   page but roughly half its height: logo, stars, score, count — no padding
   to spare, because this sits above the footer nav rather than in a hero. */
.review-card {
  flex: 1 1 168px; max-width: 210px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  padding: 12px 14px 13px;
  transition: transform .2s, box-shadow .2s;
}
.review-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.review-logo { display: flex; align-items: center; justify-content: center; height: 24px; }
.review-logo img { max-height: 24px; width: auto; }
.review-wordmark {
  font-family: var(--font-head); font-weight: 800; font-size: 1.02rem;
  letter-spacing: -.02em; line-height: 1; white-space: nowrap;
}
/* Stars: a grey row with a gold row clipped over it, so 4.2/5 renders as
   exactly 84% rather than being rounded to the nearest half star. */
.stars { position: relative; display: inline-block; line-height: 1; font-size: .95rem; letter-spacing: 1px; }
.stars-bg { color: #d8dde5; }
.stars-fg {
  color: #2f3542; position: absolute; left: 0; top: 0;
  overflow: hidden; white-space: nowrap;
}
.review-score { font-family: var(--font-head); font-weight: 700; color: var(--gray-900); font-size: .95rem; line-height: 1.1; }
.review-count { color: var(--gray-500); font-size: .78rem; line-height: 1.1; }
.footer-reviews-note { color: #77839a; font-size: .76rem; margin-top: 14px; }

@media (max-width: 900px) {
  /* Five across becomes unreadable well before the phone breakpoint. */
  .review-card { flex: 1 1 30%; max-width: none; }
}
@media (max-width: 520px) {
  .review-card { flex: 1 1 44%; padding: 10px 10px 11px; }
  .review-wordmark { font-size: .92rem; }
}
.footer-copy { font-size: .8rem; color: #77839a; }

/* ---------- Migration guide: what carries over ---------- */
.migrate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.migrate-card {
  display: flex; gap: 15px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius);
  padding: 24px 22px; transition: transform .25s, box-shadow .25s;
}
.migrate-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.migrate-mark {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem; color: #fff;
}
.migrate-yes .migrate-mark { background: #1fae5b; }
.migrate-check .migrate-mark { background: #e0932a; }
.migrate-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.migrate-card p { color: var(--gray-500); font-size: .92rem; line-height: 1.5; }
@media (max-width: 960px) { .migrate-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .migrate-grid { grid-template-columns: 1fr; } }

/* ---------- License types ---------- */
.license-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.license-card {
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius);
  padding: 28px 26px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.license-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-500); }
.license-head { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 14px; }
.license-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--blue-100); font-size: 1.3rem;
}
.license-name { font-size: 1.1rem; margin-bottom: 3px; }
.license-for { color: var(--blue-700); font-size: .84rem; font-weight: 600; }
.license-desc { color: var(--gray-500); font-size: .93rem; line-height: 1.55; margin-bottom: 18px; }
.license-specs { margin: 0; display: grid; gap: 9px; }
.license-spec { display: flex; gap: 12px; align-items: baseline; font-size: .88rem; }
.license-spec dt { flex-shrink: 0; width: 92px; color: var(--gray-500); font-weight: 600; }
.license-spec dd { margin: 0; color: var(--gray-900); }
@media (max-width: 820px) { .license-grid { grid-template-columns: 1fr; } }

/* ---------- Comparison verdict cards ---------- */
.verdict-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; max-width: 900px; margin: 0 auto; }
.verdict-card {
  background: var(--white); border: 1px solid var(--silver); border-radius: 16px; padding: 30px 28px;
}
.verdict-card.verdict-us { border: 2px solid var(--blue-500); box-shadow: var(--shadow-lg); }
.verdict-tag { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--gray-900); }
.verdict-price { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--blue-700); margin-top: 10px; }
.verdict-price-sub { font-size: 1.35rem; color: var(--gray-500); }
.verdict-note { color: var(--gray-500); font-size: .84rem; margin-top: 2px; margin-bottom: 18px; }
.verdict-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.verdict-list li { position: relative; padding-left: 20px; font-size: .91rem; color: var(--gray-700); line-height: 1.45; }
.verdict-list li::before { content: "•"; position: absolute; left: 4px; color: var(--blue-500); font-weight: 800; }
.verdict-vs {
  align-self: center; font-family: var(--font-head); font-weight: 800; color: var(--gray-500);
  font-size: .95rem; text-transform: uppercase; letter-spacing: .08em;
}
.compare-note {
  max-width: 760px; margin: 26px auto 0; text-align: center;
  color: var(--gray-500); font-size: .9rem; line-height: 1.6;
}
.compare-table .row-highlight td { background: var(--blue-100); }
@media (max-width: 820px) {
  .verdict-grid { grid-template-columns: 1fr; }
  .verdict-vs { justify-self: center; }
}

/* ---------- Homepage split: latest orders | latest blogs ---------- */
.home-split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.home-col { min-width: 0; }
.col-title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; margin-bottom: 6px; }
.col-sub { color: var(--gray-500); font-size: .93rem; margin-bottom: 22px; }
.col-cta { margin-top: 20px; }
@media (max-width: 960px) { .home-split { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Latest blogs ---------- */
.blog-list { display: grid; gap: 12px; }
.blog-row {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius);
  padding: 16px 20px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.blog-row:hover { transform: translateX(3px); box-shadow: var(--shadow); border-color: var(--blue-500); }
.blog-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--blue-100); font-size: 1.15rem;
}
.blog-main { flex: 1; min-width: 0; }
.blog-cat {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--blue-500); margin-bottom: 3px;
}
.blog-title { font-family: var(--font-head); font-weight: 700; color: var(--gray-900); font-size: .97rem; line-height: 1.35; }
.blog-row:hover .blog-title { color: var(--blue-700); }
.blog-date { color: var(--gray-500); font-size: .82rem; margin-top: 4px; }

/* Empty state — shown until the first post is published */
.blog-empty {
  background: var(--white); border: 1px dashed var(--silver); border-radius: var(--radius);
  padding: 40px 28px; text-align: center;
}
.blog-empty-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; background: var(--blue-100); font-size: 1.4rem;
}
.blog-empty-title { font-family: var(--font-head); font-weight: 700; color: var(--gray-900); font-size: 1rem; margin-bottom: 6px; }
.blog-empty-text { color: var(--gray-500); font-size: .9rem; max-width: 340px; margin: 0 auto; line-height: 1.5; }

/* ---------- Latest orders ---------- */
.orders-list { display: grid; gap: 12px; }
.order-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius);
  padding: 16px 20px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.order-row:hover { transform: translateX(3px); box-shadow: var(--shadow); border-color: var(--blue-500); }
.order-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--blue-100); font-size: 1.15rem;
}
.order-main { flex: 1; min-width: 0; }
.order-org { font-family: var(--font-head); font-weight: 700; color: var(--gray-900); font-size: .98rem; }
.order-product { color: var(--gray-500); font-size: .88rem; margin-top: 2px; }
.order-date { text-align: right; flex-shrink: 0; }
.order-date-main { display: block; font-weight: 700; color: var(--blue-700); font-size: .88rem; }
.order-date-rel { display: block; color: var(--gray-500); font-size: .78rem; margin-top: 2px; }
@media (max-width: 620px) {
  .order-row { flex-wrap: wrap; gap: 12px; }
  .order-date { text-align: left; width: 100%; padding-left: 56px; }
  .order-date-main, .order-date-rel { display: inline; }
  .order-date-rel::before { content: " · "; }
}

/* ---------- Footer subscribe ---------- */
.footer-subscribe {
  display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 20px 26px; max-width: 780px; margin: 0 auto;
}
.footer-subscribe-copy strong { display: block; color: #fff; font-family: var(--font-head); font-size: 1rem; }
.footer-subscribe-copy span { color: #aab4c4; font-size: .84rem; }
.subscribe-form { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 280px; }
.subscribe-form .input-icon { flex: 1; }
.subscribe-form input[type="email"] {
  width: 100%; font-family: var(--font-body); font-size: .94rem; padding: 11px 14px 11px 40px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 9px;
  background: rgba(255,255,255,.08); color: #fff;
}
.subscribe-form input[type="email"]::placeholder { color: #8f9bb0; }
.subscribe-form input[type="email"]:focus { outline: none; border-color: var(--blue-500); background: rgba(255,255,255,.14); }
.subscribe-form .input-icon-glyph { color: #8f9bb0; left: 12px; }
.subscribe-form .input-icon:focus-within .input-icon-glyph { color: #fff; }
.subscribe-form .btn { white-space: nowrap; }
.subscribe-alert { max-width: 780px; margin: 12px auto 0; }
@media (max-width: 620px) {
  .footer-subscribe { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; }
  .subscribe-form { flex-direction: column; align-items: stretch; }
}

/* ---------- Trial page: form + trust column ---------- */
.trial-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 38px; align-items: start; }
.trust-panel {
  background: var(--white); border: 1px solid var(--silver);
  border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow);
}
.trust-panel h3 { font-size: 1.08rem; margin-bottom: 16px; }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.trust-list li { display: flex; align-items: flex-start; gap: 11px; font-size: .92rem; color: var(--gray-500); line-height: 1.45; }
.trust-list li strong { display: block; color: var(--gray-900); font-size: .93rem; margin-bottom: 1px; }
.trust-badge-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--blue-100); font-size: .95rem;
}
.trust-divider { border: 0; border-top: 1px dashed var(--silver); margin: 24px 0; }

/* Numbered "what happens next" steps */
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.steps-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .92rem; color: var(--gray-500); line-height: 1.45; }
.steps-list li strong { color: var(--gray-900); }
.steps-list li::before {
  counter-increment: step; content: counter(step);
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  display: grid; place-items: center;
}

/* System requirements */
.sysreq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 940px; margin: 0 auto; }
.sysreq-card {
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius);
  padding: 20px 22px; text-align: center;
}
.sysreq-label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); }
.sysreq-value { font-family: var(--font-head); font-weight: 700; color: var(--gray-900); margin-top: 5px; font-size: 1rem; }

@media (max-width: 960px) {
  .trial-grid { grid-template-columns: 1fr; gap: 28px; }
  .sysreq-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .sysreq-grid { grid-template-columns: 1fr; }
}

/* ---------- Floating action dock (callback + WhatsApp) ----------
   Desktop: vertically centred on the right edge.
   Mobile:  pinned to the top-right, just under the sticky header. */
.float-dock {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  z-index: 900; display: flex; flex-direction: column; gap: 12px;
}
.float-btn {
  width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
  transition: transform .2s, box-shadow .2s;
}
.float-btn:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.float-btn svg { width: 26px; height: 26px; }
.float-callback { background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; }
.float-wa { background: #25d366; color: #fff; }

/* ---------- Sticky mobile Try/Buy bar ---------- */
.mobile-cta-bar { display: none; }

/* ---------- Click-to-play video ---------- */
.video-stage {
  position: relative; max-width: 900px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: radial-gradient(900px 400px at 60% -10%, #14418f 0%, var(--blue-900) 55%, #071c49 100%);
  box-shadow: var(--shadow-lg);
}
.video-poster { position: absolute; inset: 0; display: grid; place-items: center; }
.video-poster-art { position: absolute; width: 78%; opacity: .2; }
.video-play {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.95); border: 0; border-radius: 999px;
  padding: 15px 30px; cursor: pointer; box-shadow: 0 10px 34px rgba(0,0,0,.3);
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--blue-700);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.video-play:hover:not(:disabled) { transform: scale(1.05); background: #fff; box-shadow: 0 14px 42px rgba(0,0,0,.38); }
.video-play:disabled { opacity: .75; cursor: default; }
.video-play-icon { font-size: .9rem; }
.video-caption {
  position: absolute; bottom: 18px; left: 0; right: 0; z-index: 2;
  text-align: center; color: #b9c8e8; font-size: .82rem;
}
.video-el { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.video-error {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
  background: var(--white); padding: 30px; text-align: center; color: var(--gray-500); font-size: .95rem;
}
.video-error strong { color: var(--gray-900); }

/* ---------- Lead-capture chat bot ---------- */
.chat-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 1100;
  width: 360px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100vh - 44px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--silver); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(14px); transition: opacity .2s ease, transform .2s ease;
}
.chat-panel.open { opacity: 1; transform: translateY(0); }
.chat-panel[hidden] { display: none; }
.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff;
}
.chat-head-id { display: flex; align-items: center; gap: 11px; }
.chat-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.2); font-family: var(--font-head); font-weight: 800; font-size: 1rem;
}
.chat-title { font-family: var(--font-head); font-weight: 700; font-size: .95rem; }
.chat-status { font-size: .74rem; color: #cfe0ff; }
.chat-close { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: .85; }
.chat-close:hover { opacity: 1; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--gray-100); }
.chat-msg { max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.45; }
.chat-bot { background: #fff; border: 1px solid var(--silver); color: var(--gray-700); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-me { background: var(--blue-500); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-typing { display: flex; gap: 4px; align-items: center; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gray-500);
  animation: chatDot 1.1s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-choices { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; }
.chat-choice {
  background: #fff; border: 1px solid var(--blue-500); color: var(--blue-700);
  border-radius: 999px; padding: 7px 14px; font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: background .2s, color .2s;
}
.chat-choice:hover { background: var(--blue-500); color: #fff; }
.chat-choice-wa { border-color: #25d366; color: #159a45; }
.chat-choice-wa:hover { background: #25d366; color: #fff; }
.chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--silver); background: #fff; }
.chat-input-row input {
  flex: 1; font-family: var(--font-body); font-size: .92rem; padding: 10px 13px;
  border: 1px solid var(--silver); border-radius: 9px; background: var(--gray-100);
}
.chat-input-row input:focus { outline: none; border-color: var(--blue-500); background: #fff; }
.chat-send {
  width: 42px; border: 0; border-radius: 9px; cursor: pointer; font-size: 1.15rem;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff;
}
.chat-foot { padding: 8px 14px; font-size: .7rem; color: var(--gray-500); text-align: center; background: #fff; border-top: 1px solid var(--gray-100); }
@media (max-width: 620px) {
  .chat-panel { right: 8px; left: 8px; bottom: 76px; width: auto; max-height: calc(100vh - 160px); }
}

/* ---------- Exit-intent offer ---------- */
.offer-card { max-width: 460px; text-align: center; }
.offer-badge {
  display: inline-block; background: var(--blue-100); color: var(--blue-700);
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 12px;
}
.offer-sub { color: var(--gray-500); font-size: .95rem; margin-bottom: 20px !important; }
.offer-sub strong { color: var(--blue-700); }
.offer-code {
  border: 2px dashed var(--blue-500); border-radius: 12px;
  padding: 14px; margin-bottom: 20px; background: var(--blue-100);
}
.offer-code-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-500); font-weight: 700; }
.offer-code-value {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 1.7rem; color: var(--blue-700); letter-spacing: .06em; margin: 3px 0;
}
.offer-code-note { display: block; font-size: .76rem; color: var(--gray-500); }
.offer-form { display: grid; gap: 11px; text-align: left; }
.offer-form input {
  width: 100%; font-family: var(--font-body); font-size: .95rem; padding: 12px 14px 12px 42px;
  border: 1px solid var(--silver); border-radius: 9px; background: var(--gray-100);
}
.offer-form input:focus { outline: none; border-color: var(--blue-500); background: #fff; }
.offer-alert:not([hidden]) { display: block; }
.offer-fineprint { font-size: .76rem; color: var(--gray-500); text-align: center; margin: 0; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(7,20,50,.6);
  display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px);
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: #fff; border-radius: 16px; padding: 38px; max-width: 460px; width: 100%;
  position: relative; box-shadow: var(--shadow-lg); animation: popIn .3s ease;
}
@keyframes popIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
.modal-card p { color: var(--gray-500); margin-bottom: 22px; }
.modal-close {
  position: absolute; top: 12px; right: 16px; background: none; border: 0;
  font-size: 1.8rem; color: var(--gray-500); cursor: pointer; line-height: 1;
}
.modal-note { text-align: center; margin-top: 14px; font-size: .9rem; }

/* ---------- Reveal-on-scroll (only when JS is active) ---------- */
body.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
body.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--blue-700), var(--blue-900));
  border-radius: 18px; color: #fff; text-align: center; padding: 54px 30px;
  position: relative; overflow: hidden;
}
.cta-band h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 10px; }
.cta-band p { color: #c6d4f2; margin-bottom: 26px; }

/* ---------- Admin ---------- */
.admin-wrap { max-width: 900px; margin: 40px auto; padding: 0 20px; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
.admin-table th, .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); text-align: left; font-size: .93rem; }
.admin-table th { background: var(--gray-100); font-family: var(--font-head); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .contact-link-text { display: none; }
  .contact-link { padding: 7px 9px; }
}
@media (max-width: 960px) {
  .counters { grid-template-columns: repeat(2, 1fr); }
  .feature-grid, .tier-grid, .post-grid, .office-grid, .video-grid { grid-template-columns: 1fr 1fr; }
  .cap-panel { grid-template-columns: 1fr; }
  .main-nav {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    background: #fff; flex-direction: column; padding: 16px 20px; gap: 4px;
    border-bottom: 1px solid var(--silver); box-shadow: var(--shadow);
    max-height: calc(100vh - 66px); overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .mobile-only-link {
    display: block; color: var(--gray-700); font-weight: 600; font-size: .95rem;
    padding: 10px 13px; border-radius: 8px; border-top: 1px solid var(--gray-100); margin-top: 4px;
  }
  .mobile-only-link:hover, .mobile-only-link.active { background: var(--blue-100); color: var(--blue-700); }

  /* In the burger panel each dropdown becomes a plain, always-visible list —
     no hover target on touch, so nothing can be hidden behind one. The toggle
     stays visible as a non-interactive group heading: with two dropdowns,
     dropping the labels would leave two unexplained runs of links. */
  .nav-dropdown { width: 100%; }
  .nav-drop-toggle {
    display: block; width: 100%; text-align: left; pointer-events: none;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--gray-500); padding: 14px 13px 5px; background: none;
  }
  .nav-drop-toggle:hover { background: none; color: var(--gray-500); }
  .nav-caret { display: none; }
  .nav-drop-menu {
    display: block; position: static; min-width: 0; border: 0; box-shadow: none;
    padding: 0; background: none;
  }
  .nav-drop-menu a { padding: 10px 13px; }
  .nav-drop-menu a span { display: none; }

  .nav-burger { display: block; }
  .header-actions .contact-links, .header-actions .btn { display: none; }

  /* Sticky mobile Try/Buy conversion bar */
  .mobile-cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
    background: #fff; border-top: 1px solid var(--silver); box-shadow: 0 -4px 16px rgba(0,0,0,.1);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px;
  }
  .mobile-cta-bar .btn { flex: 1; text-align: center; white-space: nowrap; }
  body { padding-bottom: 68px; }

  /* Floating dock moves to the top-right on mobile, clear of the sticky CTA bar */
  .float-dock { top: 78px; right: 12px; transform: none; gap: 10px; }
  .float-btn { width: 46px; height: 46px; }
  .float-btn svg { width: 22px; height: 22px; }
}
@media (max-width: 620px) {
  .feature-grid, .tier-grid, .post-grid, .form-grid, .office-grid, .video-grid { grid-template-columns: 1fr; }
  .hero { padding: 66px 0 76px; }
  .section { padding: 54px 0; }
  .form-card { padding: 26px 20px; }
}

/* ==========================================================
   STORE CHECKOUT (store.php) — v29
   ========================================================== */
.checkout-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start;
}
.checkout-main { display: flex; flex-direction: column; gap: 22px; }
.checkout-step {
  background: #fff; border: 1px solid var(--silver); border-radius: 14px;
  padding: 24px 26px 26px; box-shadow: var(--shadow);
}
.checkout-step legend {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--gray-900); padding: 0 8px;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-500); color: #fff; font-size: .85rem; font-weight: 700;
}

/* --- radio "cards" --- */
.opt-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.opt {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  border: 2px solid var(--silver); border-radius: 12px; padding: 14px 18px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.opt:hover { border-color: var(--blue-500); background: var(--blue-100); }
.opt input { width: 18px; height: 18px; accent-color: var(--blue-500); flex-shrink: 0; }
.opt-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.opt-title { font-weight: 700; color: var(--gray-900); font-size: .98rem; }
.opt-note  { font-size: .84rem; color: var(--gray-500); }
.opt-price { font-family: var(--font-head); font-weight: 800; color: var(--blue-700); white-space: nowrap; }
.opt.opt-on { border-color: var(--blue-500); background: var(--blue-100); box-shadow: 0 4px 14px rgba(26,92,255,.12); }
/* A licence type with no published price: still selectable (it routes to
   the quote form) but visually distinct so nobody expects to pay online. */
.opt.opt-unpriced .opt-price { color: var(--gray-500); font-weight: 600; font-size: .86rem; }
.opt-list-compact .opt { padding: 12px 16px; }
.checkout-onrequest {
  margin-top: 14px; padding: 12px 16px; border-radius: 10px;
  background: #fff8e6; border: 1px solid #f0dca8; color: #8a6d21; font-size: .9rem;
}

/* --- order summary --- */
.checkout-side { position: sticky; top: 86px; }
.order-summary {
  background: #fff; border: 2px solid var(--blue-500); border-radius: 16px;
  padding: 24px 24px 26px; box-shadow: var(--shadow-lg);
}
.order-summary h3 { font-size: 1.1rem; margin-bottom: 16px; }
.os-line {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; font-size: .95rem;
}
.os-line.os-muted { color: var(--gray-500); font-size: .88rem; padding-top: 0; }
.os-line.os-total {
  border-top: 1px solid var(--silver); margin-top: 8px; padding-top: 14px;
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--blue-700);
}
.os-qty {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 0; padding: 12px 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100);
}
.os-qty label { font-weight: 600; font-size: .9rem; color: var(--gray-700); }
.os-qty input {
  width: 84px; text-align: center; padding: 9px 10px;
  border: 1px solid var(--silver); border-radius: 9px; font-size: 1rem; font-family: var(--font-body);
}
.os-alert { margin: 14px 0 0; }
.order-summary .btn { margin-top: 16px; }
.btn-disabled, .btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.os-fine { font-size: .8rem; color: var(--gray-500); margin-top: 12px; line-height: 1.55; }
.os-assure { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.os-assure li { font-size: .84rem; color: var(--gray-700); }
.os-policies { margin-top: 14px; font-size: .8rem; color: var(--gray-500); text-align: center; }

/* --- confirmation --- */
.order-done {
  max-width: 620px; margin: 0 auto; text-align: center; background: #fff;
  border: 2px solid #b9e6cd; border-radius: 16px; padding: 40px 34px; box-shadow: var(--shadow-lg);
}
.order-done-tick {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  background: #e7f7ee; color: #0a8f4d; font-size: 1.9rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.order-done h3 { font-size: 1.4rem; margin-bottom: 10px; }
.order-done-ref { font-size: 1.05rem; margin-bottom: 12px; }
.order-done-ref strong { font-family: var(--font-head); color: var(--blue-700); letter-spacing: .5px; }
.order-done-next { font-size: .88rem; color: var(--gray-500); margin-top: 16px; }

/* --- policy pages --- */
.policy-doc { max-width: 820px; margin: 0 auto; }
.policy-doc h2 { font-size: 1.25rem; margin: 34px 0 10px; }
.policy-doc h2:first-of-type { margin-top: 0; }
.policy-doc p, .policy-doc li { color: var(--gray-700); }
.policy-doc ul { margin: 10px 0 10px 22px; }
.policy-doc li { margin-bottom: 7px; }
.policy-updated {
  display: inline-block; background: var(--blue-100); color: var(--blue-700);
  border-radius: 20px; padding: 6px 15px; font-size: .82rem; font-weight: 600; margin-bottom: 26px;
}
.policy-callout {
  background: #fff; border-left: 4px solid var(--blue-500); border-radius: 0 12px 12px 0;
  padding: 18px 22px; margin: 22px 0; box-shadow: var(--shadow);
}
.policy-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.policy-nav a {
  border: 1px solid var(--silver); border-radius: 20px; padding: 7px 16px;
  font-size: .86rem; color: var(--gray-700); background: #fff;
}
.policy-nav a:hover, .policy-nav a.active { border-color: var(--blue-500); color: var(--blue-700); background: var(--blue-100); }

@media (max-width: 960px) {
  .checkout-grid { grid-template-columns: 1fr; }
  /* Un-stick the summary on narrow screens: sticky inside a single column
     pins it over the fields the customer is trying to fill in. */
  .checkout-side { position: static; }
}
@media (max-width: 620px) {
  .checkout-step { padding: 20px 16px 22px; }
  .opt { padding: 12px 14px; gap: 10px; }
  .opt-note { display: none; }          /* keeps each card to two lines on a phone */
  .order-summary { padding: 20px 18px 22px; }
}
/* Uppercase what the customer types into the GSTIN box, but NOT the
   placeholder — text-transform applies to both, and an all-caps hint
   shouts and overflows the field. */
#o-gstin { text-transform: uppercase; }
#o-gstin::placeholder { text-transform: none; }

/* ==========================================================
   FEATURE-PAGE VIDEO PLAYERS (features.php) — v31
   ========================================================== */
.video-card-player { padding: 14px 14px 22px; text-align: left; }
.video-card-player h3 { margin-top: 16px; text-align: center; }
.video-card-player p  { text-align: center; margin-bottom: 0; }

.vplayer-stage {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #0b1c3e; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
}
.vplayer-el { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.vplayer-play {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--blue-700);
  border: 0; border-radius: 30px; padding: 11px 22px;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: transform .18s, box-shadow .18s;
}
.vplayer-play:hover { transform: scale(1.05); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.vplayer-play:disabled { opacity: .7; cursor: default; transform: none; }
.vplayer-play-icon { font-size: .9rem; }
.vplayer-error {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 18px; background: #eef2f8; color: var(--gray-500); font-size: .84rem;
}
.vplayer-error strong { color: var(--gray-900); font-size: .92rem; }

.vplayer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px;
}
.vplayer-name {
  font-size: .82rem; color: var(--gray-500); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vplayer-size {
  flex-shrink: 0; cursor: pointer; background: none;
  border: 1px solid var(--silver); border-radius: 20px; padding: 5px 13px;
  font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--gray-700);
  transition: border-color .2s, background .2s, color .2s;
}
.vplayer-size:hover { border-color: var(--blue-500); background: var(--blue-100); color: var(--blue-700); }

/* --- YouTube embed --- */
.vplayer-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vplayer-yt {
  flex-shrink: 0; font-size: .78rem; font-weight: 700; color: var(--gray-500);
  border: 1px solid var(--silver); border-radius: 20px; padding: 4px 10px;
  transition: color .2s, border-color .2s, background .2s;
}
.vplayer-yt:hover { color: #c4302b; border-color: #c4302b; background: #fff5f5; }

/* --- maximised, IN PLACE ---------------------------------------------
   The stage is promoted to position:fixed where it stands rather than being
   moved into an overlay. Re-parenting an <iframe> reloads it and restarts
   the video from zero, so the DOM must not change when someone enlarges a
   YouTube embed. z-index sits above the floating dock (1100). */
.vtheatre-backdrop {
  position: fixed; inset: 0; z-index: 1190;
  background: rgba(6, 14, 33, .92);
}
.vplayer.is-max .vplayer-stage {
  position: fixed; z-index: 1200;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1180px, calc(100vw - 48px));
  height: auto; aspect-ratio: 16 / 9;
  max-height: calc(100vh - 132px);
  border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
/* Keep the card from collapsing while its stage is away being fixed. */
.vplayer.is-max { min-height: 0; }
.vplayer.is-max .vplayer-bar {
  position: fixed; z-index: 1201; left: 50%; transform: translateX(-50%);
  top: calc(50% - min(1180px, calc(100vw - 48px)) * 0.281 - 56px);
  width: min(1180px, calc(100vw - 48px));
  margin: 0;
}
.vplayer.is-max .vplayer-name { color: #fff; font-size: .95rem; }
.vplayer.is-max .vplayer-size,
.vplayer.is-max .vplayer-yt {
  color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1);
}
.vplayer.is-max .vplayer-size:hover,
.vplayer.is-max .vplayer-yt:hover { background: rgba(255,255,255,.2); border-color: #fff; }

@media (max-width: 620px) {
  .vplayer.is-max .vplayer-stage { width: calc(100vw - 20px); }
  .vplayer.is-max .vplayer-bar { width: calc(100vw - 20px); top: calc(50% - (100vw - 20px) * 0.281 - 52px); }
}

/* --- policy pages --- */
.policy-doc { max-width: 820px; margin: 0 auto; }
.policy-doc h2 { font-size: 1.25rem; margin: 34px 0 10px; }
.policy-doc h2:first-of-type { margin-top: 0; }
.policy-doc p, .policy-doc li { color: var(--gray-700); }
.policy-doc ul { margin: 10px 0 10px 22px; }
.policy-doc li { margin-bottom: 7px; }
.policy-updated {
  display: inline-block; background: var(--blue-100); color: var(--blue-700);
  border-radius: 20px; padding: 6px 15px; font-size: .82rem; font-weight: 600; margin-bottom: 26px;
}
.policy-callout {
  background: #fff; border-left: 4px solid var(--blue-500); border-radius: 0 12px 12px 0;
  padding: 18px 22px; margin: 22px 0; box-shadow: var(--shadow);
}
.policy-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.policy-nav a {
  border: 1px solid var(--silver); border-radius: 20px; padding: 7px 16px;
  font-size: .86rem; color: var(--gray-700); background: #fff;
}
.policy-nav a:hover, .policy-nav a.active { border-color: var(--blue-500); color: var(--blue-700); background: var(--blue-100); }

@media (max-width: 960px) {
  .checkout-grid { grid-template-columns: 1fr; }
  /* Un-stick the summary on narrow screens: sticky inside a single column
     pins it over the fields the customer is trying to fill in. */
  .checkout-side { position: static; }
}
@media (max-width: 620px) {
  .checkout-step { padding: 20px 16px 22px; }
  .opt { padding: 12px 14px; gap: 10px; }
  .opt-note { display: none; }          /* keeps each card to two lines on a phone */
  .order-summary { padding: 20px 18px 22px; }
}
/* Uppercase what the customer types into the GSTIN box, but NOT the
   placeholder — text-transform applies to both, and an all-caps hint
   shouts and overflows the field. */
#o-gstin { text-transform: uppercase; }
#o-gstin::placeholder { text-transform: none; }

/* ==========================================================
   FEATURE-PAGE VIDEO PLAYERS (features.php) — v31
   ========================================================== */
.video-card-player { padding: 14px 14px 22px; text-align: left; }
.video-card-player h3 { margin-top: 16px; text-align: center; }
.video-card-player p  { text-align: center; margin-bottom: 0; }

.vplayer-stage {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #0b1c3e; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
}
.vplayer-el { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.vplayer-play {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--blue-700);
  border: 0; border-radius: 30px; padding: 11px 22px;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: transform .18s, box-shadow .18s;
}
.vplayer-play:hover { transform: scale(1.05); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.vplayer-play:disabled { opacity: .7; cursor: default; transform: none; }
.vplayer-play-icon { font-size: .9rem; }
.vplayer-error {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 18px; background: #eef2f8; color: var(--gray-500); font-size: .84rem;
}
.vplayer-error strong { color: var(--gray-900); font-size: .92rem; }

.vplayer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px;
}
.vplayer-name {
  font-size: .82rem; color: var(--gray-500); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vplayer-size {
  flex-shrink: 0; cursor: pointer; background: none;
  border: 1px solid var(--silver); border-radius: 20px; padding: 5px 13px;
  font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--gray-700);
  transition: border-color .2s, background .2s, color .2s;
}
.vplayer-size:hover { border-color: var(--blue-500); background: var(--blue-100); color: var(--blue-700); }

/* --- maximised overlay --- */
.vtheatre {
  /* Above EVERYTHING, including the floating chat/WhatsApp dock (1100) and
     the mobile sticky CTA bar (850) — a maximised video with a WhatsApp
     button floating over it looks broken. */
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(6, 14, 33, .92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.vtheatre-inner { width: min(1180px, 100%); }
.vtheatre-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.vtheatre-title { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.vtheatre-min {
  cursor: pointer; background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 20px; padding: 7px 16px;
  font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  transition: background .2s, border-color .2s;
}
.vtheatre-min:hover { background: rgba(255,255,255,.2); border-color: #fff; }
/* The stage keeps its 16:9 ratio here, but is also capped by viewport height
   so a wide window cannot push the controls below the fold. */
.vtheatre-body .vplayer-stage {
  max-height: calc(100vh - 140px);
  border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

@media (max-width: 620px) {
  .vtheatre { padding: 12px; }
  .vtheatre-title { font-size: .92rem; }
}

/* --- solo player (homepage) + shared extras --- */
.vplayer-solo { max-width: 900px; margin: 0 auto; }
.vplayer-solo .vplayer-stage { border-radius: 14px; }
.vplayer-art { position: absolute; width: 78%; opacity: .2; pointer-events: none; }
.vplayer-caption {
  position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  color: #9db8f0; font-size: .8rem; pointer-events: none;
}
/* The caption and the blueprint art are poster decoration — once a <video>
   exists they must not float over the controls. */
.vplayer-stage:has(video) .vplayer-art,
.vplayer-stage:has(video) .vplayer-caption { display: none; }

/* Buffering indicator. Shown when the browser runs out of buffered data
   mid-playback, and while the first frames are still arriving. */
.vplayer-spin {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(8, 20, 45, .45);
}
.vplayer-spin-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: vspin .8s linear infinite;
}
.vplayer-spin-text { color: #dbe6ff; font-size: .8rem; font-weight: 600; }
@keyframes vspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vplayer-spin-ring { animation-duration: 2.4s; }
}

/* Stacking inside the stage. The <video> can exist before anyone has
   pressed Play (the hover warm-up), and it is absolutely positioned over
   the whole stage — without this the poster furniture ends up UNDER it and
   the Play button becomes unclickable. */
.vplayer-el      { z-index: 1; }
.vplayer-art     { z-index: 2; }
.vplayer-caption { z-index: 2; }
.vplayer-play    { position: relative; z-index: 3; }
.vplayer-spin    { z-index: 4; }
.vplayer-error   { z-index: 5; }

/* Poster frame, when one has been saved under /assets/img/video-posters/.
   Sits above the <video> (which may exist from a hover warm-up) but below
   the Play button, and is hidden the moment playback is requested. */
.vplayer-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2;
}

/* ==========================================================
   SYSTEM REQUIREMENT PILLS — under every trial form (v35)
   Deliberately terse: this sits directly beneath a form the
   visitor is about to submit, where a spec table would only
   get in the way.
   ========================================================== */
.sysreq-pills {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: 14px;
}
.sysreq-pills-head {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gray-500); margin-right: 2px;
}
.sysreq-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 600; color: var(--gray-700);
  background: var(--gray-100); border: 1px solid var(--silver);
  border-radius: 20px; padding: 5px 11px; white-space: nowrap;
}

/* On the homepage the form card sits on the dark hero, so the pills below
   it are against navy rather than white. */
.hero .sysreq-pills-head { color: #9fb3d9; }
.hero .sysreq-pill {
  color: #dce6f8; background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

@media (max-width: 620px) {
  .sysreq-pills { gap: 6px; }
  .sysreq-pill { font-size: .74rem; padding: 4px 9px; }
}

/* ==========================================================
   "MADE IN INDIA" CALLOUT (index.php) — v37
   The single strongest claim on the site. It used to be a grey
   .section-lead paragraph, which is exactly the shape of text
   visitors skim past.
   ========================================================== */
.origin-callout {
  display: flex; gap: 0; align-items: stretch;
  max-width: 900px; margin: 0 auto 42px;
  background: #fff; border: 1px solid var(--silver);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
/* Tricolour edge — a flag reference without printing a flag. */
.origin-flag {
  flex: 0 0 8px;
  /* The middle band is off-white, not #fff: against a white card a pure
     white segment disappears and the strip reads as two disconnected bars. */
  background: linear-gradient(to bottom, #ff9933 0 33.33%, #eceff4 33.33% 66.66%, #138808 66.66% 100%);
}
.origin-body { padding: 28px 32px; }
.origin-lead {
  font-family: var(--font-head); font-size: 1.22rem; line-height: 1.5;
  color: var(--gray-900); font-weight: 600;
}
/* The contrast carries the argument: what everyone else does, in muted
   italic, against what we do, in full-strength brand blue. */
.origin-lead em { font-style: italic; color: var(--gray-500); font-weight: 500; }
.origin-lead strong { color: var(--blue-700); font-weight: 800; }

.origin-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.origin-chips li {
  font-size: .84rem; font-weight: 700; color: var(--blue-700);
  background: var(--blue-100); border-radius: 20px; padding: 6px 14px;
}
.origin-chips li::before { content: "✓ "; }

.origin-punch {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gray-100);
  font-family: var(--font-head); font-size: 1.05rem; color: var(--gray-700);
}
.origin-punch strong {
  color: var(--blue-700); font-weight: 800;
  /* Underline the four words the whole section exists to deliver. */
  box-shadow: inset 0 -.5em 0 rgba(26,92,255,.14);
}

@media (max-width: 620px) {
  .origin-body { padding: 22px 20px; }
  .origin-lead { font-size: 1.06rem; }
  .origin-punch { font-size: .98rem; }
}

/* ---------------------------------------------------------------
   404 page
   A dead end is the worst place to leave someone, so this page is
   mostly a set of onward doors rather than an apology.
   --------------------------------------------------------------- */
.notfound { max-width: 900px; margin: 0 auto; text-align: center; }

.notfound-code {
  font-family: var(--font-head); font-weight: 800; line-height: 1;
  font-size: clamp(4.5rem, 16vw, 8.5rem); margin: 0 0 4px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Decorative only — aria-hidden in the markup, since "404" read aloud
     tells a screen-reader user nothing the heading doesn't say better. */
  opacity: .9;
}

.notfound-title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 14px; }

.notfound-lead {
  color: var(--gray-700); max-width: 620px; margin: 0 auto 26px; font-size: 1.02rem;
}

.notfound-url {
  display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em; background: var(--gray-100); border-radius: 6px;
  padding: 2px 8px; word-break: break-all;
}

.notfound-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px;
}

.notfound-sub {
  font-size: 1.02rem; font-weight: 700; color: var(--gray-700);
  margin: 0 0 18px; text-align: center;
}

.notfound-grid {
  display: grid; gap: 12px; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.notfound-card {
  display: block; padding: 16px 18px; border: 1px solid var(--gray-100);
  border-radius: 12px; background: #fff; text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.notfound-card:hover {
  border-color: var(--blue-500); box-shadow: 0 8px 22px rgba(26,92,255,.13);
  transform: translateY(-2px);
}
.notfound-card-title {
  display: block; font-family: var(--font-head); font-weight: 700;
  color: var(--blue-700); margin-bottom: 4px;
}
.notfound-card-blurb { display: block; font-size: .9rem; color: var(--gray-700); }

.notfound-help { margin-top: 32px; font-size: .95rem; color: var(--gray-700); }

@media (prefers-reduced-motion: reduce) {
  .notfound-card:hover { transform: none; }
}

/* ---------------------------------------------------------------
   Trial download page (download.php)
   --------------------------------------------------------------- */
.dl-wrap { max-width: 880px; margin: 0 auto; }

.dl-head { text-align: center; margin-bottom: 34px; }
.dl-tick {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.9rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #1eae6b, #0e8f52);
  box-shadow: 0 8px 22px rgba(14,143,82,.32);
}
.dl-title { font-size: clamp(1.5rem, 4vw, 2.05rem); margin: 0 0 10px; }
.dl-sub { color: var(--gray-700); max-width: 620px; margin: 0 auto; }

/* The product box + its download button, side by side */
.dl-card {
  display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: center;
  background: #fff; border: 1px solid var(--gray-100); border-radius: 16px;
  padding: 26px 28px; box-shadow: 0 10px 34px rgba(16,32,64,.08);
}
.dl-card-img { display: grid; place-items: center; }
.dl-box-img { max-width: 100%; max-height: 190px; width: auto; height: auto; display: block; }

.dl-eyebrow {
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue-700); margin-bottom: 6px;
}
.dl-product { font-size: 1.4rem; margin: 0 0 4px; }
.dl-for { color: var(--gray-700); margin: 0 0 18px; font-size: .96rem; }

.dl-btn { display: inline-flex; align-items: center; gap: 9px; }
.dl-meta { font-size: .84rem; color: var(--gray-500); margin: 10px 0 0; word-break: break-word; }
.dl-meta-quiet { font-size: .8rem; }

.dl-pending {
  display: block; padding: 14px 16px; border-radius: 10px;
  background: var(--blue-100); border: 1px solid rgba(26,92,255,.2);
}
.dl-pending strong { display: block; margin-bottom: 4px; color: var(--blue-700); }
.dl-pending span { font-size: .9rem; color: var(--gray-700); }

.dl-wrap .sysreq-pills { margin-top: 18px; justify-content: center; }

.dl-steps-head { font-size: 1.15rem; margin: 40px 0 14px; }
.dl-steps { margin: 0; padding-left: 22px; }
.dl-steps li { margin-bottom: 12px; color: var(--gray-700); }
.dl-steps strong { color: var(--gray-900); }

.dl-help {
  margin-top: 38px; padding: 24px 26px; border-radius: 14px;
  background: var(--gray-100); border: 1px solid var(--silver);
}
.dl-help h2 { font-size: 1.1rem; margin: 0 0 8px; }
.dl-help p { color: var(--gray-700); margin: 0 0 16px; }

.dl-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dl-expired .dl-actions { justify-content: center; margin-top: 22px; }
.dl-expired { text-align: center; }

.dl-fineprint {
  margin-top: 26px; text-align: center; font-size: .85rem; color: var(--gray-500);
}

@media (max-width: 700px) {
  .dl-card { grid-template-columns: 1fr; text-align: center; padding: 24px 20px; }
  .dl-box-img { max-height: 160px; }
  .dl-actions { justify-content: center; }
}

/* Multi-line message field (contact form).
   The icon is centred on single-line inputs; in a tall box it has to sit near
   the top instead, or it floats in the middle of the text the visitor is
   typing. */
.input-icon-area { display: block; }
.input-icon-area .input-icon-glyph { top: 17px; transform: none; }
.input-icon-area textarea {
  width: 100%; padding-left: 42px; resize: vertical; min-height: 120px;
  line-height: 1.55; font-family: var(--font-body);
}

/* Small note under a form field — the "no links please" hint and the
   paste-blocked warning. */
.field-hint {
  margin-top: 6px; font-size: .82rem; color: var(--gray-500); line-height: 1.45;
}
.field-hint-warn { color: #b4530a; font-weight: 600; }