/* ==========================================================================
   Indiagram design system.
   Ported from the designer concept (preview 4, 2026-08-08).
   This file owns every colour token. See DESIGN_SYSTEM.md.
   Do not add a second :root palette in another file.
   ========================================================================== */

:root {
  --orange: #ff6500;
  --orange-2: #ff7c25;
  --orange-soft: #fff2e8;
  --orange-line: #ffd3b6;
  --ink: #141414;
  --ink-2: #3c3d42;
  --muted: #6f7178;
  --muted-2: #9a9ba1;
  --line: #e8e8ea;
  --line-2: #cfcfd3;
  --panel: #f6f6f8;
  --white: #ffffff;
  --success: #0f9f6e;
  --success-soft: #e9faf4;
  --success-ink: #0f8c63;
  --danger: #c0392b;
  --danger-soft: #fdf0ee;

  --shadow: 0 10px 30px rgba(20, 20, 20, 0.07);
  --shadow-hover: 0 20px 50px rgba(20, 20, 20, 0.11);
  --shadow-soft: 0 7px 22px rgba(20, 20, 20, 0.03);

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --max: 1180px;
  --nav-h: 70px;

  /* Aliases, kept so any older rule or stray markup still resolves. */
  --bg: var(--white);
  --bg-card: var(--white);
  --bg-soft: var(--panel);
  --bg-alt: var(--panel);
  --text: var(--ink);
  --text-mid: var(--ink-2);
  --text-muted: var(--muted);
  --accent: var(--orange);
  --primary: var(--orange);
  --border: var(--line);
  --border-strong: var(--line-2);
  --accent-soft: var(--orange-soft);
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  /* The off-canvas drawer is parked past the right edge; without this it adds to
     the document width and the page scrolls sideways. `clip` not `hidden`, so
     the sticky header still sticks. */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.04em; line-height: 1.1; }
p { margin: 0 0 0.85em; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

.container { width: min(var(--max), calc(100% - 40px)); margin: auto; }
.muted { color: var(--muted); }
.orange { color: var(--orange); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 400;
  background: #fff;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-weight: 800;
  clip-path: inset(50%);
  opacity: 0;
}
.skip-link:focus { clip-path: none; opacity: 1; }

/* --- signature micro-label ------------------------------------------------ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--orange);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

/* --- sections ------------------------------------------------------------- */

.section { padding: 86px 0; }
.section.alt,
.section-alt { background: var(--panel); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}

.section-head.center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-title,
.section-head h2 {
  margin: 8px 0 0;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.section-copy,
.section-head p {
  max-width: 520px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
  font-size: 14px;
}

.section-head.center .section-copy { margin-inline: auto; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 13px;
  transition: 0.22s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 101, 0, 0.23);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: #ee5d00;
  box-shadow: 0 13px 28px rgba(255, 101, 0, 0.28);
}

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--line-2); transform: translateY(-1px); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); }

.btn-sm { padding: 9px 13px; font-size: 12px; }
.btn-block { width: 100%; }
.icon-btn { width: 40px; height: 40px; padding: 0; border-radius: 12px; }

/* Trailing icon nested in its own circle. */
.btn-ico {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  transition: transform 0.22s ease;
}
.btn-ico svg { width: 11px; height: 11px; }
.btn-ghost .btn-ico { background: rgba(20, 20, 20, 0.06); }
.btn:hover .btn-ico { transform: translateX(2px); }

/* --- pills / badges ------------------------------------------------------- */

.pill,
.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--orange-soft);
  color: var(--orange);
  border: 1px solid var(--orange-line);
}

.pill.green,
.badge-green {
  background: var(--success-soft);
  color: var(--success-ink);
  border-color: transparent;
}

.chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.18s ease;
}
.chip:hover { border-color: var(--line-2); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip span { opacity: 0.6; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(232, 232, 234, 0.8);
}

.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: 28px; }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -0.03em; flex: none; }

.logo-mark {
  width: 30px;
  height: 30px;
  background: var(--orange);
  color: #fff;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.nav { margin-left: auto; display: flex; align-items: center; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links > li > a,
.nav-trigger {
  color: var(--ink-2);
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.18s ease;
}

.nav-links > li > a:hover,
.nav-trigger:hover,
.nav-links > li > a.active { color: var(--orange); }

.nav-badge { color: var(--orange); font-weight: 900; }

.nav-trigger .chev { width: 12px; height: 12px; transition: transform 0.25s ease; }
.nav-drop.open .nav-trigger { color: var(--orange); }
.nav-drop.open .nav-trigger .chev { transform: rotate(180deg); }

.nav-cta { display: flex; gap: 9px; align-items: center; margin-left: 24px; flex: none; }
.nav-drawer-cta { display: none; }

/* --- mega panel ---------------------------------------------------------- */

.nav-drop { position: static; }

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--nav-h);
  padding: 0 20px 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.nav-drop.open .mega { opacity: 1; visibility: visible; transform: none; }

.mega-inner {
  width: min(100%, var(--max));
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(35, 26, 20, 0.16);
  overflow: hidden;
}

/* Three levels: platform rail, then the active platform's types and picks.
   Only one pane is ever visible, which is what keeps this readable. Rendering
   all 15 platforms at once produced a 900px wall of overlapping text. */
/* Buttons auto-place down column 1; every pane is pinned to column 2 spanning
   all rows, so they stack in one cell and only the active one shows. Keeping the
   button and its pane adjacent in the DOM is what lets the same markup become a
   mobile accordion with no JavaScript reordering. */
.mega-layout {
  position: relative;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-content: start;
  /* Tall enough for the tallest pane, since panes are positioned rather than
     placed and so contribute nothing to the grid's height. */
  min-height: 348px;
  /* Rail column and its divider are painted, not placed. An absolutely
     positioned or ::before element would occupy a grid cell and push the
     buttons out of column 1. */
  background:
    linear-gradient(to right,
      var(--panel) 0 236px,
      var(--line) 236px 237px,
      #fff 237px);
}

.rail-item {
  grid-column: 1;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: none;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-2);
  transition: background 0.16s ease, color 0.16s ease;
}
.rail-item { margin: 0 10px; }
.rail-item:first-of-type { margin-top: 12px; }
.rail-item:last-of-type { margin-bottom: 12px; }
.rail-item:hover { background: #ededf0; color: var(--ink); }
.rail-item.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(20, 20, 20, 0.06); }

.rail-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--orange-soft);
  color: var(--orange);
  display: grid;
  place-items: center;
}
.rail-icon svg { width: 14px; height: 14px; }

.rail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rail-count {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 6px;
}
.rail-item.active .rail-count { background: var(--orange-soft); color: var(--orange); border-color: var(--orange-line); }

.rail-chev { width: 12px; height: 12px; opacity: 0; color: var(--orange); transition: opacity 0.16s ease; }
.rail-item.active .rail-chev { opacity: 1; }

/* Panes */
.mega-pane {
  position: absolute;
  left: 237px;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mega-pane.active { display: grid; }

.pane-col { padding: 16px 18px; min-width: 0; }
.pane-picks { border-left: 1px solid var(--line); }

.pane-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}

.pane-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.pane-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  transition: background 0.15s ease, color 0.15s ease;
}
.pane-list a:hover { background: var(--orange-soft); color: var(--orange); }

/* Long names must truncate, not run into the next column. That overlap was the
   original defect: 40-character service names in a 190px column. */
.pane-name, .pick-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane-count {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted-2);
}
.pane-list a:hover .pane-count { color: var(--orange); }

.pane-all { color: var(--orange) !important; font-weight: 900; margin-top: 4px; }
.pane-all svg { width: 12px; height: 12px; flex: none; transition: transform 0.2s ease; }
.pane-all:hover svg { transform: translateX(3px); }

/* Picks carry a price and a quality badge, so they get two lines. */
.pane-picks .pane-list a { align-items: flex-start; }
.pick-body { min-width: 0; display: grid; gap: 3px; }

.pick-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--success-ink);
  background: var(--success-soft);
  border-radius: 5px;
  padding: 2px 5px;
  justify-self: start;
}

.pick-price { flex: none; font-size: 12px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.pane-list a:hover .pick-price { color: var(--orange); }

.mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: 12px;
  color: var(--muted);
}
.mega-foot-text strong { color: var(--ink); }
.mega-foot-actions { display: flex; gap: 8px; }

/* --- mobile toggle + drawer ---------------------------------------------- */

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  place-items: center;
  margin-left: auto;
}

.nav-toggle-bars { position: relative; width: 17px; height: 11px; display: block; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}
.nav-toggle-bars span:first-child { top: 0; }
.nav-toggle-bars span:last-child { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(14, 14, 16, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-scrim.open { opacity: 1; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 15%, rgba(255, 101, 0, 0.12), transparent 28%),
    linear-gradient(180deg, #fff 0%, #fffaf6 100%);
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  min-height: 610px;
  padding: 86px 0 72px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: 60px;
}

.hero h1 {
  font-size: clamp(44px, 6vw, 75px);
  line-height: 0.97;
  letter-spacing: -0.06em;
  margin: 14px 0 22px;
  max-width: 780px;
}

.hero p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 610px;
  margin: 0 0 28px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero-proof { margin-top: 30px; font-size: 12px; color: var(--muted); }

/* Factual claims, not implied reviews. */
.proof-marks { display: flex; gap: 7px; flex-wrap: wrap; }
.proof-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-2);
}
.proof-mark svg { width: 13px; height: 13px; color: var(--orange); flex: none; }

/* --- the console --------------------------------------------------------- */

.hero-console {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 30px 80px rgba(35, 26, 20, 0.12);
  transform: rotate(1deg);
}

/* Gradient hairline, drawn with a masked border so it stays crisp. */
.hero-console::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255, 101, 0, 0.6), transparent 26%, transparent 70%, rgba(255, 101, 0, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.console-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 2px 16px; }
.console-title { font-weight: 900; letter-spacing: -0.03em; }
.live { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.live-dot { width: 7px; height: 7px; background: #2ac788; border-radius: 50%; box-shadow: 0 0 0 5px #eafaf4; flex: none; }

.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric { background: var(--panel); border: 1px solid #ededee; border-radius: 14px; padding: 15px; }
.metric small { color: var(--muted); display: block; margin-bottom: 8px; font-size: 11px; }
.metric strong { font-size: 27px; letter-spacing: -0.04em; }

.order-box { margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
}
.order-row:last-child { border-bottom: 0; }
.order-service { display: flex; align-items: center; gap: 9px; min-width: 0; }
.order-service strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.social-icon {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: var(--orange-soft);
  display: grid;
  place-items: center;
  color: var(--orange);
}
.social-icon svg { width: 14px; height: 14px; }

/* ==========================================================================
   Trust strip
   ========================================================================== */

.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }

.trust-inner { min-height: 88px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }

.trust-item {
  display: flex;
  align-items: center;
  gap: 11px;
  justify-content: center;
  border-right: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  padding: 18px 10px;
}
.trust-item:last-child { border-right: 0; }

.trust-icon {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
  display: grid;
  place-items: center;
}
.trust-icon svg { width: 16px; height: 16px; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */

.page-hero {
  padding: 54px 0 46px;
  background: linear-gradient(180deg, #fff 0%, #fffaf6 100%);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  font-size: clamp(32px, 4.6vw, 54px);
  letter-spacing: -0.05em;
  line-height: 1.02;
  margin: 12px 0 14px;
}

.page-hero .lead { font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 620px; margin: 0; }

.h1-variant { display: block; margin-top: 9px; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: 0; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 18px;
}
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb .crumb-sep { opacity: 0.5; }

/* ==========================================================================
   Featured (dark) card
   ========================================================================== */

.featured-service {
  background:
    radial-gradient(circle at 90% 0, rgba(255, 101, 0, 0.16), transparent 33%),
    linear-gradient(135deg, #171717, #222);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
}

.featured-service .eyebrow { color: #ff9858; }
.featured-service .eyebrow::before { background: #ff9858; }
.featured-service h3 { font-size: 30px; line-height: 1; letter-spacing: -0.045em; margin: 10px 0 9px; }
.featured-service p { color: #b8b9bd; font-size: 13px; line-height: 1.6; margin: 0; max-width: 560px; }

.featured-price { text-align: right; position: relative; z-index: 2; }
.featured-price small { display: block; color: #aaa; font-size: 11px; margin-bottom: 5px; }
.featured-price strong { font-size: 30px; letter-spacing: -0.04em; }
.featured-price .btn { margin-top: 12px; }

/* ==========================================================================
   Service browser (sidebar + market grid)
   ========================================================================== */

.service-browser { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }

.service-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 18px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 28px rgba(20, 20, 20, 0.04);
}

.service-search { position: relative; margin-bottom: 12px; }
.service-search input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  background: #fafafa;
  border-radius: var(--radius-sm);
  padding: 0 14px 0 38px;
  outline: none;
  font-size: 12px;
}
.service-search input:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px rgba(255, 101, 0, 0.08); }
.service-search .search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  display: grid;
  place-items: center;
}
.service-search .search-ico svg { width: 15px; height: 15px; }

.category-list { display: grid; gap: 5px; }

.category-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: #4a4b50;
  padding: 10px 11px;
  border-radius: 10px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.18s;
}
.category-btn:hover { background: #f7f7f8; color: #111; }
.category-btn.active { background: var(--orange-soft); color: var(--orange); }
.category-btn em {
  font-style: normal;
  font-size: 10px;
  color: var(--muted-2);
  background: #f0f0f1;
  padding: 4px 7px;
  border-radius: 999px;
}
.category-btn.active em { background: #fff; color: var(--orange); }

.service-content { min-width: 0; }

/* Sidenav: the catalog has 15 platforms and a dozen service types, so the tree
   scrolls inside a sticky rail rather than pushing the page down. */
.side-scroll {
  max-height: calc(100vh - var(--nav-h) - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.side-scroll::-webkit-scrollbar { width: 6px; }
.side-scroll::-webkit-scrollbar-thumb { background: #dcdce0; border-radius: 999px; }

.side-group + .side-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

.side-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 8px 11px;
}

/* Warning band, used where budget stock is listed. */
.notice {
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.notice strong { display: block; margin-bottom: 2px; }
.notice a { color: var(--orange); font-weight: 800; }
.notice-warn { background: #fff8f1; border-color: var(--orange-line); }

/* Budget rows are visually marked wherever they appear in a list. */
.service-row.is-budget { border-style: dashed; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.pager-info { font-size: 12px; font-weight: 800; color: var(--muted); }

.service-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 15px 0 10px; }
.service-toolbar strong { font-size: 13px; }
.service-toolbar .muted { font-size: 11px; }

.service-market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Row-style service card. */
.service-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 15px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  transition: 0.2s ease;
}
.service-row:hover { border-color: #d9d9dc; box-shadow: 0 10px 24px rgba(20, 20, 20, 0.055); transform: translateY(-2px); }

.market-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--orange-soft);
  display: grid;
  place-items: center;
  color: var(--orange);
}
.market-icon svg { width: 20px; height: 20px; }

.service-row-name {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.micro-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 850;
  padding: 4px 6px;
  border-radius: 6px;
  background: #f4f4f5;
  color: #75767b;
}
.micro-tag.hot { background: var(--orange-soft); color: var(--orange); }

.service-row-meta { text-align: right; }
.service-row-count { display: block; color: var(--muted); font-size: 9px; }
.service-row-price { font-size: 13px; font-weight: 900; }

.row-go {
  border: 0;
  background: #111;
  color: #fff;
  border-radius: 9px;
  width: 31px;
  height: 31px;
  margin-top: 7px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: 0.18s;
  margin-left: auto;
}
.row-go svg { width: 13px; height: 13px; }
.service-row:hover .row-go { background: var(--orange); }

/* ==========================================================================
   Service tile grid (homepage categories)
   ========================================================================== */

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  transition: 0.25s ease;
  position: relative;
  overflow: hidden;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: #ddd; }

.service-card .icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--orange-soft);
  color: var(--orange);
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  flex: none;
}
/* Icons carry a viewBox but no width/height, so every context must size them or
   they fall back to the SVG default of 300x150. */
.service-card .icon svg { width: 19px; height: 19px; }

.service-card h3 { font-size: 14px; line-height: 1.25; margin: 0 0 7px; max-width: 190px; }
.service-card .from { font-size: 12px; color: var(--orange); font-weight: 900; margin-top: auto; }

.service-card .arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 31px;
  height: 31px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.22s ease;
  background: #fff;
}
.service-card .arrow svg { width: 13px; height: 13px; }
.service-card:hover .arrow { background: var(--orange); color: #fff; border-color: var(--orange); transform: rotate(-35deg); }

/* --- platform category tiles --------------------------------------------- */

.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

.cat-tile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: 0.2s ease;
}
.cat-tile:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }

.cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--orange-soft);
  color: var(--orange);
  display: grid;
  place-items: center;
}
.cat-icon svg { width: 19px; height: 19px; }

.cat-body { min-width: 0; }
.cat-name { display: block; font-size: 13px; font-weight: 900; letter-spacing: -0.02em; }
.cat-meta { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }

.cat-go {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: 0.2s ease;
}
.cat-go svg { width: 12px; height: 12px; }
.cat-tile:hover .cat-go { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ==========================================================================
   Package sections and cards
   ========================================================================== */

/* The hidden attribute must win over any component display rule. Without this,
   .summary-line { display: flex } beat the UA default and the checkout showed a
   "Transaction fee ... Rs.0" line on packs that carry no fee. */
[hidden] { display: none !important; }

.package-section { padding: 76px 0; border-top: 1px solid #f0f0f1; }

/* ---- Channel tabs (Rs.1 shop) ------------------------------------------
   A horizontal scroller of platforms, each showing what one rupee buys.
   Every pane ships in the HTML and is hidden with CSS, so the offers are
   crawlable and the page still works with JS off (the :target-free fallback
   below shows the first pane, and main.js takes over from there).          */
.chan-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 4px 14px;
  margin: 0 -4px 22px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.chan-tabs::-webkit-scrollbar { height: 4px; }
.chan-tabs::-webkit-scrollbar-thumb { background: #dcdce0; border-radius: 4px; }

.chan-tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  transition: background .18s cubic-bezier(.32,.72,0,1), color .18s cubic-bezier(.32,.72,0,1), transform .18s cubic-bezier(.32,.72,0,1);
}
.chan-tab:hover { transform: translateY(-1px); }
.chan-tab.active { background: var(--ink); color: #fff; }

.chan-icon { display: grid; place-items: center; width: 22px; height: 22px; }
.chan-icon svg { width: 20px; height: 20px; }
.chan-body { display: flex; flex-direction: column; gap: 1px; }
.chan-name { font-size: 14px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; }
.chan-qty { font-size: 11px; font-weight: 600; opacity: .62; white-space: nowrap; }
.chan-tab.active .chan-qty { opacity: .78; }

.chan-pane { display: none; }
.chan-pane.active { display: block; }
/* No JS: show the first pane rather than an empty page. */
html:not(.js) .chan-pane { display: block; }
html:not(.js) .chan-pane + .chan-pane { border-top: 1px solid #f0f0f1; margin-top: 34px; padding-top: 26px; }
html:not(.js) .chan-tabs { display: none; }

.chan-lead { font-size: 14px; color: var(--muted); margin: 0 0 18px; max-width: 62ch; }
.chan-lead strong { color: var(--ink); font-weight: 800; }

.chan-more { margin: 18px 0 0; }
.chan-more a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--orange);
  padding-bottom: 2px;
}
.chan-more a svg { width: 15px; height: 15px; }
.chan-more a:hover { color: var(--orange); }


.package-section.alt { background: var(--panel); }

.package-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.package-header h2 { font-size: 31px; letter-spacing: -0.04em; margin: 0; }

.delivery { font-size: 12px; color: var(--muted); display: flex; gap: 7px; align-items: center; }
.delivery::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #31bf85; flex: none; }

.pkg-grid { display: grid; grid-template-columns: repeat(var(--pkg-cols, 3), minmax(0, 1fr)); gap: 12px; }

/* Product card, "equal type" design: hard outline, orange platform badge,
   quantity and name at one type size, ruled feature list, outlined CTA. */
.pkg-card {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pkg-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 20, 20, 0.1); }

/* Popular packs take the accent outline; the badge slot stays free for it. */
.pkg-card.is-popular { border-color: var(--orange); }

.pkg-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.pkg-mark { display: grid; place-items: center; color: var(--ink); flex: none; }
.pkg-mark svg { width: 19px; height: 19px; }
.pkg-card.is-popular .pkg-mark { color: var(--orange); }

.pkg-badge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--orange);
  color: var(--orange);
  border-radius: 999px;
  padding: 5px 8px;
  white-space: nowrap;
}
.pkg-badge.is-best { background: var(--orange); color: #fff; }

/* Quantity and name share one size and weight. */
.pkg-product {
  font-size: 21px;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 25px 0 24px;
}
.pkg-qty, .pkg-name { font-size: inherit; font-weight: inherit; display: block; }
.pkg-qty { margin-bottom: 4px; font-variant-numeric: tabular-nums; }

/* Names run from "TikTok Saves" to "Twitter Analytics Views (Monetisable)";
   clamping to two lines keeps every card in a row the same height. */
.pkg-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.1em;
}

.pkg-features {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 11px 0;
  display: grid;
  gap: 8px;
  font-size: 10px;
  color: #555;
  margin-top: auto;
}
.pkg-features span { display: flex; align-items: baseline; gap: 6px; }
.pkg-features b { color: #08a66d; flex: none; }

.pkg-bottom { padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pkg-total-label { font-size: 9px; color: #777; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
.pkg-price { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }

.pkg-btn {
  border: 1.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 15px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
  transition: 0.18s ease;
}
.pkg-btn:hover { background: var(--ink); color: #fff; }
.pkg-card.is-popular .pkg-btn { border-color: var(--orange); color: var(--orange); }
.pkg-card.is-popular .pkg-btn:hover { background: var(--orange); color: #fff; }

/* ==========================================================================
   Service page: pack showcase + quick order rail
   ========================================================================== */

.svc-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }

.svc-points { display: grid; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; color: #525359; font-size: 12px; }
.svc-points li { display: flex; align-items: center; gap: 8px; }
.svc-points li::before {
  content: "✓";
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #edf9f5;
  color: #0c9567;
  font-size: 9px;
  font-weight: 900;
}

.svc-hero-aside {
  position: sticky;
  top: calc(var(--nav-h) + 18px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 15px 45px rgba(20, 20, 20, 0.07);
}

.qo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.qo-head h3 { margin: 0; font-size: 16px; letter-spacing: -0.03em; }
.qo-live { font-size: 9px; color: #0a9265; background: var(--success-soft); border-radius: 999px; padding: 5px 7px; font-weight: 850; }

.svc-stat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.svc-stat-label { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 900; color: #8b8c91; }
.svc-stat-value { font-size: 29px; font-weight: 900; letter-spacing: -0.045em; }

.svc-meta { display: grid; grid-template-columns: auto 1fr; margin: 14px 0 0; background: #f7f7f8; border-radius: var(--radius-sm); padding: 11px; }
.svc-meta dt { font-size: 10px; color: #6f7075; padding: 5px 0; }
.svc-meta dd { margin: 0; font-size: 10px; font-weight: 800; color: #111; text-align: right; padding: 5px 0; }

.svc-aside-note { margin: 11px 0 0; font-size: 10px; color: var(--muted); text-align: center; }

/* ==========================================================================
   How it works
   ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  min-height: 170px;
  box-shadow: var(--shadow-soft);
  transition: 0.22s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.step .n {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.step h3 { margin: 28px 0 7px; font-size: 16px; }
.step p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ==========================================================================
   FAQ. Native <details> so it works without JavaScript.
   ========================================================================== */

.faq-wrap { max-width: 800px; margin: 0 auto; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  padding: 20px 4px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  color: var(--orange);
  font-size: 20px;
  line-height: 1;
  flex: none;
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }

.faq-list details p { margin: 0; padding: 0 45px 20px 4px; color: var(--muted); line-height: 1.6; font-size: 13px; }

/* ==========================================================================
   Dark CTA block
   ========================================================================== */

.cta {
  background: var(--ink);
  color: #fff;
  border-radius: 24px;
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  position: relative;
  overflow: hidden;
}
.cta::after {
  content: "";
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 101, 0, 0.22);
  position: absolute;
  right: -120px;
  top: -150px;
  filter: blur(2px);
}
.cta h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.05em; line-height: 1; margin: 0 0 10px; max-width: 650px; }
.cta p { color: #bdbec3; margin: 0; font-size: 14px; }
.cta .btn { position: relative; z-index: 2; }

/* ==========================================================================
   Platform blocks (all-services page)
   ========================================================================== */

.platform-block { margin-bottom: 34px; }
.platform-block:last-child { margin-bottom: 0; }

.platform-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.platform-head svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
.platform-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.035em; }
.platform-count { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 800; }

.service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-soft); }

.form-row, .field { margin: 13px 0; }
.form-row label, .field label { font-size: 11px; font-weight: 800; display: block; margin-bottom: 7px; }

.form-row input, .form-row select, .form-row textarea, .field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  outline: none;
  background: #fff;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus, .field input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 101, 0, 0.09);
}

.form-row textarea { min-height: 110px; resize: vertical; }
.form-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }

.form-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px solid #f6d5cf;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
}

.alert { padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px; font-weight: 700; }
.alert-success { background: var(--success-soft); color: var(--success-ink); }
.alert-error { background: var(--danger-soft); color: var(--danger); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }

.contact-item { margin-bottom: 18px; }
.contact-item .num { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 900; margin-bottom: 5px; }
.contact-item h3 { font-size: 15px; margin-bottom: 4px; }
.contact-item h3 a:hover { color: var(--orange); }
.contact-item p { font-size: 12px; color: var(--muted); margin: 0; }

.prose { max-width: 720px; }
.prose h2 { margin-top: 30px; font-size: 22px; }
.prose p, .prose li { color: var(--muted); line-height: 1.7; font-size: 14px; }
.prose ul { padding-left: 18px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { padding: 54px 0 26px; border-top: 1px solid var(--line); }

/* Do not write `1.7fr repeat(auto-fit, ...)`: mixing a flexible track with
   auto-fit is invalid, the declaration is dropped, and the footer collapses. */
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 42px; }

.footer-brand p { font-size: 12px; color: var(--muted); line-height: 1.7; max-width: 300px; margin-top: 14px; }

.footer-pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.footer-pay span {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
}

.footer-col h4 { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; margin: 3px 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 9px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.footer-col a:hover { color: var(--orange); }
.footer-col a.footer-all { color: var(--orange); font-weight: 800; }

.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted-2);
  font-size: 11px;
  flex-wrap: wrap;
}
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--orange); }

/* ==========================================================================
   Checkout modal
   ========================================================================== */

body.has-modal { overflow: hidden; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 16, 0.55);
  backdrop-filter: blur(6px);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modal-backdrop.open { display: flex; }

.modal {
  width: min(520px, 100%);
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  max-height: 92vh;
  overflow-y: auto;
  animation: modal-in 0.3s ease both;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.modal-head {
  padding: 20px 20px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: 18px; letter-spacing: -0.03em; }
.modal-sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

.modal-close {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  color: var(--muted);
}
.modal-close:hover { color: var(--ink); border-color: var(--line-2); }

.order-step-1, .order-step-2, .order-step-3 { padding: 20px; }

.checkout-summary { background: var(--panel); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 7px 0; color: var(--muted); }
.summary-line strong { color: var(--ink); }
.summary-line.total { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 12px; font-size: 14px; font-weight: 900; color: var(--ink); }

.order-ref-line, .order-amount-line { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.order-ref-line strong, .order-amount-line strong { color: var(--ink); }

.upi-heading { font-weight: 900; font-size: 13px; margin-bottom: 10px; }

.upi-qr-frame {
  background: #fff;
  padding: 12px;
  border-radius: 14px;
  display: inline-block;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.upi-qr-frame img { border-radius: 8px; }
.upi-qr-fallback { font-size: 12px; margin: 0; max-width: 200px; color: var(--muted); }

.upi-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 16px; }

/* These four carried "justify-center", which is not a CSS property, so their
   labels were never centred. */
.btn-upi-app {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  transition: 0.18s ease;
}
.btn-upi-app:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-upi-app.is-gpay { background: #4285f4; }
.btn-upi-app.is-phonepe { background: #5f259f; }
.btn-upi-app.is-paytm { background: #00baf2; }
.btn-upi-app.is-upi { background: var(--orange); }

.upi-id-block {
  background: var(--panel);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed var(--line-2);
  text-align: left;
}
.upi-id-label { font-size: 10px; color: var(--muted); display: block; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.upi-id-value { font-size: 14px; font-weight: 800; word-break: break-all; }

.utr-row { text-align: left; }

.success-title { font-size: 20px; margin: 10px 0 6px; }
.success-ref { font-size: 22px; font-weight: 900; letter-spacing: 0.02em; color: var(--orange); margin: 4px 0 12px; }

/* ==========================================================================
   Scroll reveal. Scoped to .js so a script failure never hides content.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .hero-console { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .pkg-grid { grid-template-columns: repeat(min(var(--pkg-cols, 3), 3), minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .nav-toggle { display: grid; }
  .nav-cta { display: none; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 195;
    width: min(90vw, 400px);
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--nav-h) + 12px) 18px 24px;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 50px -25px rgba(20, 20, 20, 0.3);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .nav.open { transform: none; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; font-size: 15px; }
  .nav-links > li > a,
  .nav-trigger { width: 100%; justify-content: flex-start; padding: 12px 10px; border-radius: 10px; }
  .nav-links > li > a:hover { background: var(--panel); }
  .nav-trigger { pointer-events: none; }
  .nav-trigger .chev { display: none; }
  .nav-badge { margin-left: auto; }

  /* Mega panel becomes an accordion inside the drawer: tap a platform to reveal
     its types and picks underneath. */
  .mega { position: static; opacity: 1; visibility: visible; transform: none; padding: 0; transition: none; }
  .mega-inner { width: auto; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .mega-layout { display: block; min-height: 0; }

  .mega-layout { background: none; }
  .rail-item { grid-column: auto; border-radius: 10px; font-size: 14px; padding: 12px 10px; }
  .rail-chev { opacity: 1; transform: rotate(90deg); transition: transform 0.25s ease; }
  .rail-item.active .rail-chev { transform: rotate(-90deg); }

  .mega-pane { position: static; left: auto; right: auto; top: auto; bottom: auto; display: none; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .mega-pane.active { display: block; }
  .pane-col { padding: 4px 0 10px 10px; }
  .pane-picks { border-left: 0; border-top: 1px solid var(--line); padding-top: 10px; }
  .pane-list a { padding: 10px 9px; font-size: 13.5px; }
  .mega-foot { display: none; }
  .nav-drawer-cta { display: block; margin-top: 18px; }

  .hero-inner { grid-template-columns: 1fr; gap: 30px; min-height: auto; padding-top: 64px; }
  .hero-console { transform: none; max-width: 660px; }

  .service-browser, .svc-hero { grid-template-columns: 1fr; }
  .service-sidebar, .svc-hero-aside { position: relative; top: auto; }
  .category-list { grid-template-columns: repeat(4, 1fr); }
  .category-btn { justify-content: center; }
  .category-btn em { display: none; }

  .grid-4, .pkg-grid, .service-market-grid, .service-list, .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .side-scroll { max-height: none; }
  .trust-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-bottom: 1px solid var(--line); }
  .split-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 24px, var(--max)); }
  .section { padding: 62px 0; }
  .package-section { padding: 54px 0; }
  .chan-tab { padding: 9px 13px 9px 10px; }
  .chan-name { font-size: 13px; }
  .hero-inner { padding: 52px 0; }
  .hero h1 { font-size: 44px; }
  .hero p { font-size: 15px; }
  .page-hero { padding: 34px 0 30px; }

  .section-head, .package-header, .cta { align-items: flex-start; flex-direction: column; }
  .grid-4, .pkg-grid, .steps, .service-market-grid, .service-list, .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { min-height: 145px; }
  .pkg-card { min-height: 200px; }
  .category-list { grid-template-columns: repeat(2, 1fr); }
  .featured-service { grid-template-columns: 1fr; }
  .featured-price { text-align: left; }
  .service-row { grid-template-columns: 40px minmax(0, 1fr); }
  .service-row-meta { grid-column: 2; text-align: left; display: flex; align-items: center; gap: 9px; }
  .row-go { margin-top: 0; }
  .trust-inner { grid-template-columns: 1fr; }
  .trust-item { justify-content: flex-start; border-right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .cta { padding: 30px; border-radius: 18px; }
  .upi-app-grid { grid-template-columns: 1fr; }
}