/* ═══════════════════════════════════════════════════════
   ASPYN AI — PAGE-SPECIFIC STYLES (HOME)
   Extracted verbatim from the canonical
   refs/original-public/index.html <style data-persistent-page-style>
   block, lines 96-178. These styles live inline in the original HTML;
   we put them in a real CSS file so they cascade with the linked
   stylesheets and so the Astro build can serve them from /css/.
   ═══════════════════════════════════════════════════════ */

/* ── PROBLEM HEADLINE ── */
.problem-headline {
  font-family: var(--font-head);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -2px;
  color: var(--dark);
  margin-bottom: 18px;
}
.problem-sub {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--mid);
  margin-bottom: 56px;
}

/* ── CIRCLES SECTION (sphere canvas + 3 nodes + bloom rings) ── */
.circles-stage { position: relative; max-width: 1000px; margin: 0 auto; padding: 80px 60px 120px; }
#sphereCanvas  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.circles-grid  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; text-align: center; position: relative; z-index: 1; }
.circle-node   { display: flex; flex-direction: column; align-items: center; position: relative; }

.circle-label {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--pink);
  margin-bottom: 6px;
  opacity: .15;
  transform: translateY(-8px);
  transition: opacity .7s ease, transform .7s ease;
}
.circle-label.orange-label  { color: var(--orange); }
.circle-label.crimson-label { color: #C8214A; }
.circle-node.active .circle-label,
.circle-node.manual .circle-label { opacity: 1; transform: translateY(0); }

.circle-desc {
  font-size: 14px;
  color: var(--light);
  margin-bottom: 32px;
  opacity: .15;
  transition: opacity .7s ease .15s;
}
.circle-node.active .circle-desc,
.circle-node.manual .circle-desc { opacity: 1; }

.bloom { position: relative; display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; }
.bloom-r1, .bloom-r2, .bloom-r3, .bloom-core {
  position: absolute;
  border-radius: 50%;
  transition: all .85s cubic-bezier(.34, 1.4, .64, 1);
}
.bloom-r1   { width: 24px; height: 24px; background: rgba(240, 52, 108, .07); }
.bloom-r2   { width: 16px; height: 16px; background: rgba(240, 52, 108, .12); }
.bloom-r3   { width: 10px; height: 10px; background: rgba(240, 52, 108, .18); }
.bloom-core { width: 6px;  height: 6px;  background: rgba(240, 52, 108, .28); }

#cn1.active .bloom-r1  { width: 140px; height: 140px; background: radial-gradient(circle, rgba(255,107,53,.16) 0%, transparent 70%); }
#cn1.active .bloom-r2  { width: 96px;  height: 96px;  background: radial-gradient(circle, rgba(255,80,53,.28) 0%, transparent 70%); }
#cn1.active .bloom-r3  { width: 60px;  height: 60px;  background: radial-gradient(circle, rgba(240,52,108,.5) 0%, rgba(255,107,53,.22) 70%, transparent 100%); }
#cn1.active .bloom-core{ width: 24px;  height: 24px;  background: var(--pink); box-shadow: 0 0 20px rgba(240,52,108,.65); }
#cn2.manual .bloom-r1  { width: 120px; height: 120px; background: radial-gradient(circle, rgba(255,160,0,.12) 0%, transparent 70%); }
#cn2.manual .bloom-r2  { width: 82px;  height: 82px;  background: radial-gradient(circle, rgba(255,140,0,.22) 0%, transparent 70%); }
#cn2.manual .bloom-r3  { width: 52px;  height: 52px;  background: radial-gradient(circle, rgba(255,107,53,.4) 0%, transparent 70%); }
#cn2.manual .bloom-core{ width: 18px;  height: 18px;  background: var(--orange); opacity: .75; box-shadow: 0 0 14px rgba(255,107,53,.5); }
#cn3.active .bloom-r1  { width: 140px; height: 140px; background: radial-gradient(circle, rgba(200,33,74,.14) 0%, transparent 70%); }
#cn3.active .bloom-r2  { width: 96px;  height: 96px;  background: radial-gradient(circle, rgba(200,33,74,.26) 0%, transparent 70%); }
#cn3.active .bloom-r3  { width: 60px;  height: 60px;  background: radial-gradient(circle, rgba(200,33,74,.5) 0%, rgba(240,52,108,.22) 70%, transparent 100%); }
#cn3.active .bloom-core{ width: 24px;  height: 24px;  background: #C8214A; box-shadow: 0 0 20px rgba(200,33,74,.65); }

.manual-bridging {
  position: absolute; bottom: -68px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  text-align: center; opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
  white-space: nowrap; pointer-events: none;
}
.manual-bridging.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.manual-bridging-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 3px;
}
.manual-bridging-desc { font-size: 13px; color: var(--light); }

.circles-quote {
  max-width: 700px; margin: 0 auto;
  background: white; border-radius: 20px;
  padding: 40px 56px;
  box-shadow: 0 4px 30px rgba(0,0,0,.06);
  border: 1px solid var(--border);
  text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.circles-quote.visible { opacity: 1; transform: translateY(0); }
.circles-quote p          { font-size: 18px; color: var(--mid); line-height: 1.65; }
.circles-quote .highlight { color: var(--orange); font-weight: 600; }

.caption-italic {
  text-align: center; font-style: italic;
  font-size: 15px; color: rgba(92, 92, 122, .5);
  padding: 24px 0; opacity: 0;
  transition: opacity .7s ease;
}
.caption-italic.visible { opacity: 1; }

/* ── TRANSITION + NETWORK CANVAS ── */
.transition-h {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
}
.transition-sub { font-size: 17px; color: var(--mid); max-width: 540px; margin: 0 auto 56px; line-height: 1.7; }
#network-section { width: 100%; overflow: hidden; }
#networkCanvas   { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; cursor: crosshair; }
@media (max-width: 640px) { #networkCanvas { aspect-ratio: 1 / 1.15; } }
.network-caption { text-align: center; font-style: italic; font-size: 15px; color: var(--light); padding: 16px 0 72px; }

/* ── PRODUCT SPOTLIGHT (ConnectGroove card) ── */
.product-spotlight-card {
  max-width: 800px; margin: 0 auto;
  padding: 0; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.product-spotlight-card > * { min-width: 0; }

/* ── TRUSTED LOGOS ── */
#trusted { padding: 64px 0 32px; background: var(--bg); }
.trusted-label {
  text-align: center;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 28px;
}
.logos-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 36px 56px;
  max-width: 1000px; margin: 0 auto; padding: 0 24px;
}
.logo-client {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--mid);
  transition: color var(--t), transform var(--t);
}
.logo-client:hover { color: var(--dark); transform: translateY(-1px); }

/* ── HERO ACTIONS — keep both buttons side-by-side on mobile ───
   Canonical .hero-actions has flex-wrap:wrap. With btn-primary-lg's
   18px×44px padding the two buttons exceed the row at narrow viewports
   and stack vertically. Operator wants them on one row. Force nowrap
   below 640px and let each button share the row width via flex:1.
*/
@media (max-width: 640px) {
  .hero-actions {
    flex-wrap: nowrap;
    gap: 12px;
  }
  .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14px;
    white-space: nowrap;
  }
  /* Trim the primary-lg padding too so the gradient button doesn't dwarf the ghost */
  .hero-actions .btn-primary-lg { padding-top: 14px; padding-bottom: 14px; }
}

/* ── CIRCLES SECTION — rework for clean responsive ─────────────
   Operator reported: text overlaps on mobile, layout unclear at tablet,
   even desktop "not super clear". Three structural problems with the
   canonical:
     1. .manual-bridging used position:absolute bottom:-68px → bled into
        the next node on mobile (stacked column) overlapping cn3 text.
     2. .circle-label / .circle-desc start at opacity:.15 waiting for
        JS to add .active/.manual classes — looked faded when JS hadn't
        fired or scroll trigger missed.
     3. Fixed 3-col → 1-col jump at 1024px, no autofit middle states.

   Fixes (all overrides, canonical CSS untouched):
*/

/* Always show — don't wait on JS-driven active class for visibility */
.circle-label,
.circle-desc {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Tighten the column layout + autofit (replaces canonical 1fr 1fr 1fr) */
.circles-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 56px 32px !important;
  align-items: start;
}

/* Each node: center everything, gap between bloom/label/desc */
.circle-node {
  align-items: center;
  text-align: center;
  gap: 0;
}
.circle-node .bloom        { margin-bottom: 16px; }
.circle-node .circle-label { margin-bottom: 6px; }
.circle-node .circle-desc  { margin-bottom: 0; max-width: 220px; }

/* manual-bridging — was absolute (broke mobile stack). Make it in-flow
   so it lives at the bottom of cn2's column. position:relative + opacity:1. */
.manual-bridging {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  margin-top: 20px;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,107,53,.06), rgba(240,52,108,.04));
  border: 1px solid rgba(255,107,53,.18);
  white-space: normal;
  max-width: 240px;
}

/* Shrink the bloom on narrow viewports so it doesn't dominate the card */
@media (max-width: 768px) {
  .bloom { width: 110px; height: 110px; }
}

/* Cap the circles-stage padding on narrower viewports so it doesn't
   eat horizontal space (canonical had 60px desktop padding). */
@media (max-width: 1024px) {
  .circles-stage { padding: 56px 24px 80px; }
}
@media (max-width: 640px) {
  .circles-stage { padding: 40px 16px 60px; }
}

/* ── Nav products dropdown — widen so "ConnectGroove" + "AI-First CRM"
   text doesn't clip at the right edge. Canonical's 200px min was too tight. */
#main-nav .nav-dropdown-menu { min-width: 260px; }

/* ── True autofit grids ─────────────────────────────────────────
   Canonical CSS uses fixed 3/2-col → 1-col jumps at 1024px. That leaves
   awkward middle viewports (e.g. 1100px) where the cards/pillars are
   cramped, and the moment you cross 1023px everything snaps to a single
   tall column. Switching to repeat(auto-fit, minmax(...,1fr)) lets the
   browser decide column count based on actual container width — 3 cols
   on desktop, 2 on tablet, 1 on phone — with no breakpoint pop.
   Loaded after aspyn-components.css so the @media 1-col rules don't win.
*/
.hero-pillars { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.op-grid      { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.compare-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.tech-grid    { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── FR HERO H1 — fit on the same 3 lines as EN ─────────────────
   "Aux opérateurs." renders slightly wider than "to operators." in
   Sora at the upper end of the clamp(), pushing line 2 to wrap to 4
   lines on most viewports. Drop the ceiling a touch on /fr/* only so
   French matches English (~3 lines).
*/
html[lang^="fr"] .hero-h1 {
  font-size: clamp(36px, 5vw, 62px);
  letter-spacing: -2px;
}

/* ── LOGO FINE-TUNING ────────────────────────────────────────────
   Earlier fix shrank the logo to 22px to dodge the y-descender clip
   caused by canonical's `overflow:hidden` on .nav-logo. That made the
   wordmark smaller than the original site (operator caught it side-by-
   side). Better fix: keep canonical font sizes, but split the overflow
   so descenders escape vertically while horizontal still clips for the
   scroll morph (when .logo-spyn collapses, the "i" mark expands across
   horizontally; that's what overflow:hidden was protecting against).
*/
/* Canonical sets line-height:1 on .logo-a/.logo-spyn, which clips Sora's "y"
   descender against .nav-logo's overflow:hidden box (nav-logo sizes to its
   content, so a 26px line box at line-height:1 = 26px tall, and the descender
   extends past that). @fontsource-variable Sora has slightly fatter descenders
   than canonical's static Google Font Sora, making the clip visible.
   Fix: bump line-height so the descender lands inside the line box. The line
   box (and therefore .nav-logo's height) grows to ~35px, descender fits.
*/
#main-nav .logo-a,
#main-nav .logo-spyn,
#main-nav .logo-i-mark::before {
  font-size: 26px;
  line-height: 1.35;
}
#main-nav .logo-ai-text {
  font-size: 14px;
  line-height: 1.35;
}

/* Dark footer reuses the same wordmark — use `footer` selector since my
   Footer.astro doesn't apply canonical's .footer-brand class wrapper.
   Same line-height:1.35 as the header to fit the y-descender. */
footer .logo-wordmark   { overflow: visible; padding-bottom: 0; transform: none; }
footer .logo-a,
footer .logo-spyn,
footer .logo-i-mark::before { font-size: 26px; line-height: 1.35; }
footer .logo-ai-text    { font-size: 12px; line-height: 1.35; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .circles-stage { padding: 60px 32px 100px; }
  .circles-grid  { grid-template-columns: 1fr; }
  .hero-demo     { display: none; }
}
@media (max-width: 640px) {
  .circles-stage { padding: 40px 20px 80px; }
  .circles-quote { padding: 28px 24px; }
}
@media (max-width: 720px) {
  .product-spotlight-card { grid-template-columns: 1fr; }
  .product-spotlight-visual { padding: 32px 24px !important; min-height: 220px; }
  .product-spotlight-body   { padding: 28px 24px !important; }
  .product-spotlight-body .btn { width: 100%; justify-content: center; }
}