/* Home page (site 1.3): cleaner, more room, real product screenshots. Uses the tokens in tokens.css. */
.h2-page { background: #fff; }
.h2-eyebrow { display: inline-block; margin: 0 0 var(--sp-1); font-size: var(--fs--1); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent-ink); }

/* ---------------------------------------------------------------- Hero */
.h2-hero { position: relative; overflow: hidden; padding: var(--sp-12) 0 var(--sp-8);
  background: radial-gradient(900px 520px at 85% -10%, rgba(10, 191, 188, 0.20), transparent 62%), radial-gradient(760px 480px at -5% 105%, rgba(31, 95, 191, 0.12), transparent 60%), linear-gradient(180deg, #F2FAFC 0%, #FFFFFF 100%); }
.h2-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: center; }
.h2-copy h1 { margin: var(--sp-2) 0 var(--sp-2); font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); max-width: 14ch; }
.h2-lede { margin: 0 0 var(--sp-3); font-size: var(--fs-1); line-height: 1.5; color: var(--ink-2); max-width: 36ch; }
.h2-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #CFE7EA; font-size: 0.9rem; font-weight: 600; color: var(--accent-ink); box-shadow: var(--e-1); }
.h2-pill span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(10, 191, 188, 0.2); }
.h2-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.h2-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; color: var(--ink-3); font-size: 0.95rem; }
.h2-facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--accent); vertical-align: middle; }

/* Browser-style frame around a screenshot */
.h2-frame { margin: 0; border-radius: var(--r-3); background: #fff; border: 1px solid #D6E3EC; box-shadow: var(--e-3); overflow: hidden; }
.h2-frame-bar { display: flex; gap: 7px; padding: 11px 14px; background: #F3F7FA; border-bottom: 1px solid #E1EAF1; }
.h2-frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #CBD7E2; }
.h2-frame img { display: block; width: 100%; height: auto; }
.h2-visual { position: relative; padding-bottom: 54px; }
.h2-frame-main { transform: perspective(1600px) rotateY(-4deg) rotateX(1.5deg); transform-origin: left center; }
.h2-float { position: absolute; left: -9%; bottom: 0; width: 46%; margin: 0; border-radius: var(--r-2); overflow: hidden; border: 1px solid #D6E3EC; background: #fff; box-shadow: var(--e-3); }
.h2-float img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- App strip */
.h2-apps { padding: var(--sp-5) 0; border-block: var(--bd); background: #fff; }
.h2-apps p { margin: 0 0 var(--sp-2); text-align: center; color: var(--ink-3); font-size: 0.95rem; }
.h2-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.h2-chips span { padding: 7px 16px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: 0.92rem; border: 1px solid #DCE9F2; }

/* ---------------------------------------------------------------- Sections */
.h2-sec { padding: var(--sp-12) 0; }
.h2-sky { background: linear-gradient(180deg, #F1F8FC 0%, #E8F4F7 100%); }
.h2-head { max-width: 760px; margin: 0 auto var(--sp-6); text-align: center; }
.h2-head h2 { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.h2-head-dark h2 { color: #fff; }
.h2-head-dark .h2-eyebrow { color: var(--accent); }

.h2-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.h2-pillar { padding: var(--sp-4); border-radius: var(--r-3); background: linear-gradient(160deg, #FFFFFF 0%, #F1F8FC 100%); border: 1px solid #DCE9F2; }
.h2-pillar h3 { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-2); font-weight: 600; letter-spacing: -0.01em; }
.h2-pillar p { margin: 0; color: var(--ink-2); line-height: 1.55; }

/* ---------------------------------------------------------------- Product tour */
.h2-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--sp-5); }
.h2-tab { padding: 10px 20px; border-radius: 999px; border: 1px solid #C7DAE6; background: #fff; color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.h2-tab:hover { border-color: var(--accent); color: var(--accent-ink); }
.h2-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.h2-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.h2-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-6); align-items: center; }
.h2-panel[hidden] { display: none; }
.h2-panel-copy h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-3); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.h2-panel-copy p { margin: 0 0 var(--sp-2); color: var(--ink-2); line-height: 1.6; }
.h2-panel-copy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.h2-panel-copy li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); }
.h2-panel-copy li svg { flex: none; margin-top: 3px; color: var(--accent-ink); }

/* ---------------------------------------------------------------- Built for India (dark band) */
.h2-india { padding: var(--sp-12) 0; background: radial-gradient(800px 360px at 90% 0%, rgba(10, 191, 188, 0.22), transparent 62%), linear-gradient(135deg, #0E1B2D 0%, #123152 100%); }
.h2-india-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.h2-india-item { padding: var(--sp-3); border-radius: var(--r-2); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.h2-india-item h3 { margin: var(--sp-2) 0 6px; color: #fff; font-size: var(--fs-1); font-weight: 600; }
.h2-india-item p { margin: 0; color: #D3DEEA; line-height: 1.5; font-size: 0.97rem; }

/* ---------------------------------------------------------------- Plans */
.h2-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); max-width: 1020px; margin: 0 auto; align-items: stretch; }
.h2-plan { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); border-radius: var(--r-3); background: #fff; border: 1px solid #D6E3EC; box-shadow: var(--e-1); }
.h2-plan p { margin: 0 0 var(--sp-2); color: var(--ink-2); line-height: 1.5; flex: 1; }
.h2-plan .btn { align-self: flex-start; }
.h2-plan.is-main { border-color: var(--accent); box-shadow: 0 18px 44px -18px rgba(10, 143, 141, 0.5); background: linear-gradient(180deg, #FFFFFF 0%, #EAF8F8 100%); }
.h2-plan-name { font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--fs--1); }
.h2-plan-price { font-size: 2.3rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.h2-plan-price small { display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.h2-chip { position: absolute; top: -13px; left: var(--sp-4); padding: 4px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 0.8rem; font-weight: 600; }
.h2-more { margin: var(--sp-4) 0 0; text-align: center; }
.h2-more a { font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.h2-more a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Doors to the other sites */
.h2-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.h2-door { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-4); border-radius: var(--r-3); background: #fff; border: 1px solid #D6E3EC; text-decoration: none; color: inherit; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.h2-door:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 16px 36px -16px rgba(10, 143, 141, 0.45); }
.h2-door h3 { margin: 0; font-size: var(--fs-2); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.h2-door p { margin: 0; color: var(--ink-2); line-height: 1.5; flex: 1; }
.h2-door-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-ink); }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .h2-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .h2-copy h1 { max-width: 18ch; }
  .h2-frame-main { transform: none; }
  .h2-float { left: 4%; }
  .h2-india-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h2-panel { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
}
@media (max-width: 820px) {
  .h2-pillars, .h2-plans, .h2-doors { grid-template-columns: minmax(0, 1fr); }
  .h2-sec, .h2-india { padding: var(--sp-8) 0; }
  .h2-hero { padding: var(--sp-8) 0 var(--sp-6); }
}
@media (max-width: 560px) {
  .h2-india-grid { grid-template-columns: minmax(0, 1fr); }
  .h2-visual { padding-bottom: 0; }
  .h2-float { display: none; }
}
@media (prefers-reduced-motion: reduce) { .h2-door, .h2-tab { transition: none; } .h2-frame-main { transform: none; } }