/*
 * home-light.css — HOMEPAGE ONLY (templates/index.html).
 * Loaded AFTER styles.css + hero-upgrade.css. It no longer carries the
 * header bar — `.main-header` is now the single site-wide default defined
 * in styles.css (see header-unify). This file only overrides below-hero
 * homepage rhythm/cohesion rules.
 * No other template may link this file — that is the scoping contract that
 * keeps /pricing, verticals, /demos, /compare and the dashboard untouched.
 */

/* ================================================================== */
/* Apple-style section rhythm (2026-07 redesign)                       */
/* Every section is a slight LIGHT-BLUE vertical gradient (no grey) that */
/* stays blue-tinted top to bottom — it never fades to white, so the     */
/* white separator band is visible at EVERY break (incl. hero -> demo).  */
/*   - hero = deeper light-blue (top) descending to light-blue (bottom)  */
/*   - rest = light-blue, starting at the hero's bottom tone for flow.   */
/* Sections are divided by a full-width WHITE BAND a few px tall (NOT a   */
/* 1px hairline): pure white against the light-blue sections above/below */
/* reads as a bright line with real contrast — like Apple's separators.  */
/* This file is only linked by index.html — all scoped to the homepage.  */
/* ================================================================== */

/* Page canvas → white, no radial glow. */
body {
  background-color: #ffffff;
  background-image: none;
}

/* --- Below-hero sections: slight LIGHT-BLUE gradient -------------- */
/* Every section is a super-light-blue gradient (no grey — founder: grey
   looked old-fashioned). It stays blue-tinted top to bottom (never fades
   to white) so the white separator band is visible at every break. The
   top (#e2edfb) matches the bottom of the hero above for continuity. */
.split-section,
.pricing-section,
.integrations-section,
.solutions-section,
.form-section {
  background: linear-gradient(180deg,
      #e2edfb 0%,
      #e9f1fc 100%);
  border-bottom: none;
  /* The Apple separator: a full-width ~8px PURE-WHITE band above each
     section. Pure white against the light-blue sections above and below,
     so the break reads as a crisp white line with contrast (not a 1px
     hairline, and not the invisible white-on-white it was before). */
  border-top: 8px solid #ffffff;
}

/* The integrations marquee's edge-fades match the light-blue section where
   the carousel sits (≈ #e6effc) so the fade doesn't smudge. */
.integrations-carousel-container::before {
  background: linear-gradient(90deg, #e6effc 0%, rgba(230, 239, 252, 0) 100%);
}

.integrations-carousel-container::after {
  background: linear-gradient(-90deg, #e6effc 0%, rgba(230, 239, 252, 0) 100%);
}

/* ------------------------------------------------------------------ */
/* Homepage rhythm + type scale: one idea per screen, big quiet H2s    */
/* ------------------------------------------------------------------ */
.split-section,
.pricing-section,
.integrations-section,
.solutions-section,
.form-section {
  padding: 7.5rem 0;
}

.section-header {
  margin-bottom: 4rem;
}

.section-header h2 {
  font-size: clamp(2.5rem, 4vw, 3rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.section-header p {
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* Solutions accordion: boxed cards → quiet hairline list              */
/* ------------------------------------------------------------------ */
.solutions-section .accordion-item {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
}

.solutions-section .accordion-item:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.solutions-section .accordion-item:hover,
.solutions-section .accordion-item.active {
  border-color: var(--border-subtle);
  box-shadow: none;
}

.solutions-section .accordion-trigger {
  padding: 1.5rem 0.25rem;
}

.solutions-section .accordion-inner {
  padding: 0 0.25rem 1.75rem;
}

@media (max-width: 1024px) {
  /* styles.css re-pads these with !important at this width — match it */
  .solutions-section .accordion-trigger {
    padding: 1.25rem 0.25rem !important;
  }

  .solutions-section .accordion-inner {
    padding: 0 0.25rem 1.5rem !important;
  }
}

/* ------------------------------------------------------------------ */
/* Capability visuals: no looping glow — motion stays purposeful       */
/* ------------------------------------------------------------------ */
.capabilities-section .compliance-shield-pulse {
  display: none;
}

/* Hero background: the AURORA MESH gradient (5 soft radial blobs + a bottom
   fade) now lives in hero-upgrade.css (.hero-v2). The earlier blue-radial
   override that used to sit here was removed so the aurora shows through. */

/* Founder ask: the second headline line "for Every Business" was blue —
   make it the same black as line one (#1d1d1f = --hv4-ink). */
.hero-v2 .hv2-h1 .hv2-grad {
  color: #1d1d1f;
}

/* Hero logostrip: drop the centered hairline (the "thin line down the
   middle") — separate the tool names from the hero with white space. */
.hero-v2 .hv2-logos {
  border-top: none;
  margin-top: 44px;
}

/* ================================================================== */
/* Hero typography test (Gemini feedback) — strip the "chunky" feel    */
/* ================================================================== */
/* Headline: swap Inter → Plus Jakarta Sans (a modern display face that
   wears large sizes more elegantly), dial the weight back from heavy
   (700) to semibold (600), loosen the very tight tracking (-.03em →
   -.02em) and open the leading (1.03 → 1.12) so the letters and lines
   breathe. (Overrides hero-upgrade.css .hero-v2 .hv2-h1 — same
   specificity, later source order wins. Font loaded in index.html.) */
.hero-v2 .hv2-h1 {
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* Subtext: bump the weight so it stops reading as thin next to the
   headline, and tighten the leading (1.6 → 1.5) so it anchors as one
   cohesive block under the headline rather than floating lines. */
.hero-v2 .hv2-sub {
  font-weight: 450;
  line-height: 1.5;
}

/* ================================================================== */
/* Hero call-card: a gentle "breathing" blue glow so the card reads as  */
/* a live/dynamic artifact on load (it cycles through call examples)    */
/* instead of a static graphic. Pure pseudo-element glow — never jitters */
/* the text and never fights the card's hover lift. It breathes between  */
/* a faint baseline and a fuller glow, so there is always a little life  */
/* even at the low point. Off under prefers-reduced-motion.             */
/* ================================================================== */
.hero-v2 .callcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  box-shadow: 0 0 48px 3px rgba(0, 102, 204, 0.30);
  opacity: 0.18;
  animation: cc-breathe 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cc-breathe {
  0%, 100% { opacity: 0.14; }
  50%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v2 .callcard::before {
    animation: none;
    opacity: 0;
  }
}

/* ================================================================== */
/* Combined 2-up section: Try Our Agents (left) | Capabilities (right) */
/* Apple's two-tile row — ONE section, a centre divider, and the two    */
/* former sections as left/right columns. Compact tiles: the 3 agent    */
/* cards stack 1-col on the left, the 4 capabilities stack 1-col on the   */
/* right (filling the column height to balance). Divider is a full-height */
/* 8px white bar. Everything stacks to 1-col on tablet.                   */
/* ================================================================== */
.split-section {
  position: relative;   /* positioning context for the full-height divider */
}

.split-section .split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0 clamp(40px, 6vw, 72px);
}

/* Centre divider — a full-height 8px WHITE bar, the same width as the
   horizontal white section-separator bands. Absolutely positioned so it
   runs the FULL height of the section (top band → bottom band) and stays
   centred in the gap between the two columns. */
.split-section .split-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  background: #ffffff;
}

.split-section .split-col {
  min-width: 0;   /* let grid children shrink instead of forcing overflow */
}

/* Section headers: left-aligned + smaller than the full-width versions. */
.split-section .section-header {
  text-align: left;
  margin-bottom: 2.25rem;
}

.split-section .section-header h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
}

.split-section .section-header p {
  font-size: 1rem;
  line-height: 1.55;
}

.split-section .section-header .btn {
  margin-top: 1.25rem;
}

/* Left tile: the 3 agent cards stack in one column, tightened. */
.split-section .live-agents-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 0;
}

.split-section .agent-card {
  padding: 1.5rem;
  gap: 1rem;
}

/* Right tile: stack the 4 capabilities one-per-row (full column width, so
   the little charts have room) and let the grid fill the column height so
   the tile balances the taller agents column instead of leaving dead space
   at the bottom. Drop the 380px floor — the stretch sets the height. */
.split-section .split-col--caps {
  display: flex;
  flex-direction: column;
}

.split-section .capabilities-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.split-section .split-col--caps .capabilities-grid {
  flex: 1;
  grid-auto-rows: 1fr;
}

.split-section .capability-card {
  padding: 1.5rem;
  min-height: 0;
}

/* Tablet / phone: collapse to one column; divider turns horizontal. */
@media (max-width: 980px) {
  .split-section .split-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .split-section .split-divider {
    position: static;
    transform: none;
    width: auto;
    height: 8px;
    margin: 2.5rem 0;
  }
}

/* ================================================================== */
/* Footer — trim the oversized vertical spacing (it was taking ~a full */
/* screen). Cuts the 6rem top padding and the big inter-block margins.  */
/* Homepage-scoped (home-light.css is only linked by index.html).      */
/* ================================================================== */
.main-footer {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.main-footer .footer-grid {
  margin-bottom: 2rem;
}

.main-footer .footer-compare {
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.main-footer .footer-bottom {
  padding-top: 1.5rem;
}

/* ================================================================== */
/* 2-up #2: Book a Padoori onboarding call (left) | Core Industries (right) */
/* The CRM integrations left this split — it is now its own thin carousel */
/* band ABOVE (see .integrations-band below), with the marquee restored.  */
/* The lead-capture form was moved up from the page bottom into the left  */
/* column; Core Industries stays on the right. The .form-section /        */
/* .solutions-section classes stay on the columns (inner styling intact); */
/* their old full-section box is neutralised here.                       */
/* ================================================================== */
.split-section .form-section,
.split-section .solutions-section {
  padding: 0;
  border: none;
  background: none;
}

/* Left tile: the onboarding form. Let the form card fill the column
   (drop the centered max-width) and stack the fields one-per-row so they
   aren't cramped at half width. */
.split-section .form-section .form-wrapper {
  max-width: none;
  margin: 0;
}

.split-section .form-section .lead-form-grid {
  grid-template-columns: 1fr;
}

/* The span-2 fields (textarea / opt-in / submit) must NOT force an implicit
   2nd column in this 1-col layout — at wide widths that auto column ate the
   space and squeezed Full Name / Company / Title into a sliver. Span 1. */
.split-section .form-section .lead-form-grid .form-col-2 {
  grid-column: span 1;
}

/* Match the form's own header to the split section headers (left-aligned,
   same size) so the two column headings read consistently. */
.split-section .form-section .form-header {
  text-align: left;
}

.split-section .form-section .form-header h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
}

/* Right tile: the accordion fills the column width (drop the 800px cap,
   the auto-centering and the big top margin) AND the column height so it
   ends level with the form column instead of leaving dead space. */
.split-section .solutions-section {
  display: flex;
  flex-direction: column;
}

.split-section .solutions-accordion-container {
  max-width: none;
  margin: 0;
  flex: 1;
  justify-content: space-between;
}

/* ------------------------------------------------------------------ */
/* CRM carousel band — its own thin full-width section. The marquee is  */
/* restored automatically (the .split-section grid override is gone).   */
/* Just slim the tall section padding so it reads as a strip.          */
/* ------------------------------------------------------------------ */
.integrations-section.integrations-band {
  padding: 2rem 0;
}

/* Tighten the space around the strip (founder: the band had too much). */
.integrations-band .section-header {
  margin-bottom: 1.5rem;
}

.integrations-band .integrations-carousel-container {
  margin-top: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* One line only — the animated marquee never wraps into a 2nd row.
   ~1.8x faster than the 45s base (founder: was a bit slow). */
.integrations-band .integrations-grid {
  flex-wrap: nowrap;
  animation-duration: 25s;
}

/* Founder wants the logo strip to scroll continuously for EVERYONE, so the
   marquee is intentionally not gated on reduced-motion (script.js always
   clones for the seamless loop). styles.css has a global reduced-motion
   reset (* { animation-duration:.001ms !important }) that would freeze it,
   so re-enable just this animation for those users. No scrollbar — the
   carousel container keeps its overflow:hidden. */
@media (prefers-reduced-motion: reduce) {
  .integrations-band .integrations-grid {
    animation-duration: 25s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ================================================================== */
/* Pricing section — the hero's radial "white glow from the bottom".    */
/* Same effect as the top of the page: a white core rises from the      */
/* bottom-centre out to light blue at the top/edges, so the section's    */
/* bottom fades to white the way the hero does. Overrides the flat blue  */
/* section gradient for .pricing-section only (later source order wins). */
/* ================================================================== */
.pricing-section {
  background: radial-gradient(120% 90% at 50% 100%,
      #ffffff 18%,
      #e3edfb 55%,
      #cbdff5 100%);
}

/* ================================================================== */
/* Ambient aurora orbs — the hero's aurora continues beneath the page.  */
/* Soft palette-matched radial orbs behind each main section's content;  */
/* home-scroll.js (GSAP ScrollTrigger) drifts each by its data-drift px  */
/* while the section crosses the viewport. Purely decorative:            */
/* aria-hidden markup, pointer-events none, clipped inside .bg-orbs so   */
/* they can never cause horizontal scroll. With JS off / reduced motion  */
/* / <768px they are simply static ambience at their rest positions.     */
/* ================================================================== */
.bg-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.bg-orb {
  position: absolute;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--orb-color, rgba(138, 176, 255, .32)) 0%, transparent 70%);
}

/* Orb sections. CRITICAL: the section's .container must stay
   UNPOSITIONED — the pre-existing full-height .split-divider (absolute,
   top:0/bottom:0, see above) anchors to the SECTION; positioning
   .container would become its containing block and collapse the white
   bar by the section's 7.5rem paddings on desktop (caught in review).
   Instead the orbs paint on a NEGATIVE layer (.bg-orbs z-index:-1) and
   isolation:isolate gives each section its own stacking context so that
   negative layer stays above the section's own background instead of
   escaping behind it. In-flow content and the positioned .split-divider
   then paint above the orbs with no other stacking changes. */
.pricing-section {
  position: relative;
}

.split-section,
.pricing-section {
  isolation: isolate;
}

/* Per-orb tint / placement / size — colours are the hero aurora palette
   (hero-upgrade.css). Mostly half-off-canvas at the section edges so the
   text columns stay clean. data-drift lives on the markup (index.html):
   positive = "far" layer (lags the scroll), negative = "near" (outruns). */
.bg-orb--a { --orb-color: rgba(138, 176, 255, .34); width: min(46vw, 700px); top: -10%; left: -12%; }   /* demos/caps: periwinkle, upper-left */
.bg-orb--b { --orb-color: rgba(116, 208, 255, .30); width: min(38vw, 560px); top: 34%; right: -14%; }   /* demos/caps: cyan, mid-right */
.bg-orb--c { --orb-color: rgba(84, 212, 146, .26);  width: min(42vw, 640px); bottom: -12%; left: -10%; } /* pricing: green, lower-left */
.bg-orb--d { --orb-color: rgba(233, 166, 240, .24); width: min(36vw, 520px); top: -8%; right: -10%; }   /* pricing: pink, upper-right */
.bg-orb--e { --orb-color: rgba(116, 208, 255, .28); width: min(42vw, 640px); top: -10%; right: -12%; }  /* form/industries: cyan, upper-right */
.bg-orb--f { --orb-color: rgba(255, 214, 105, .30); width: min(38vw, 560px); bottom: -10%; left: -12%; } /* form/industries: amber, lower-left */

/* ================================================================== */
/* Scroll journey line — home-scroll.js draws ONE thin aurora-gradient */
/* SVG path down the page as you scroll (hero → demos/capabilities →   */
/* pricing → integrations → booking form), popping a node at each stop. */
/* The overlay is a JS-built, pointer-events-free layer: with no JS,    */
/* reduced motion, or <768px the #flow-line div stays empty and nothing */
/* renders. It sits above section backgrounds (z-index 2) but is routed  */
/* through whitespace only (the split sections' divider channel + the    */
/* white bands) and ghosts across the integrations marquee via a         */
/* gradient opacity dip (set in JS) instead of striking through copy.    */
/* ================================================================== */
.flow-line {
  position: absolute;
  left: 0;
  top: 0;               /* real top/width/height set by home-scroll.js */
  z-index: 2;
  pointer-events: none;
}

.flow-line svg {
  display: block;
}

.flow-line .fl-path {
  fill: none;
  stroke: url(#fl-grad);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* Soft under-glow: the same path, wider and faint (no filters — cheap). */
.flow-line .fl-glow {
  fill: none;
  stroke: url(#fl-grad);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: .12;
}

.flow-line .fl-node {
  fill: #ffffff;
  stroke: url(#fl-grad);
  stroke-width: 2.5;
}

.flow-line .fl-halo {
  fill: url(#fl-grad);
  opacity: .22;
}

/* Terminal node breathes gently (the booking form = the destination).
   styles.css's global reduced-motion reset already freezes keyframes,
   and under reduced motion home-scroll.js never builds the line at all —
   the media block below is belt-and-braces. */
@keyframes fl-pulse {
  0%, 100% { opacity: .16; }
  50%      { opacity: .38; }
}

.flow-line .fl-pulse {
  animation: fl-pulse 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .flow-line .fl-pulse {
    animation: none;
  }
}

/* Belt-and-braces: buildFlowLine() itself requires the 2-column layout
   (>=980px — below that the split sections stack full-width and every
   vertical lane would cross content). */
@media (max-width: 979.98px) {
  .flow-line {
    display: none;
  }
}