/*
 * SAPlytics AI – Home Page (index.html) Styles
 * Extends and overrides common.css for the landing page.
 */

/* ── Hero: starfield overlay + overflow ─────────────────── */
.hero-bg {
  position: relative;
  overflow: hidden;
}

/* Hero layout: give the headline column more room (so the title can be larger and stay on 2 lines) */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.4fr 1fr; }
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px   1px   at 10% 20%, rgba(255,255,255,.7)   0%, transparent 100%),
    radial-gradient(1px   1px   at 30% 60%, rgba(255,255,255,.5)   0%, transparent 100%),
    radial-gradient(1px   1px   at 50% 10%, rgba(255,255,255,.6)   0%, transparent 100%),
    radial-gradient(1px   1px   at 70% 40%, rgba(255,255,255,.4)   0%, transparent 100%),
    radial-gradient(1px   1px   at 80% 80%, rgba(255,255,255,.6)   0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 15%, rgba(255,255,255,.8)   0%, transparent 100%),
    radial-gradient(1px   1px   at 15% 75%, rgba(255,255,255,.5)   0%, transparent 100%),
    radial-gradient(1px   1px   at 45% 85%, rgba(255,255,255,.4)   0%, transparent 100%),
    radial-gradient(2px   2px   at 60% 25%, rgba(255,200,100,.6)   0%, transparent 100%),
    radial-gradient(1px   1px   at 35% 45%, rgba(255,255,255,.3)   0%, transparent 100%);
  pointer-events: none;
}

/* ── Glowing arc decoration on hero right ───────────────── */
.hero-arc {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid transparent;
  box-shadow: 0 0 60px 6px rgba(71,104,254,.25), 0 0 120px 20px rgba(71,104,254,.15);
  pointer-events: none;
}

/* ── Outcomes dark band ──────────────────────────────────── */
.outcomes-bg {
  background: #0B0B0B;
}

/* ── Capability diagram centre circle ───────────────────── */
.cap-center {
  background: radial-gradient(circle, #1B2150 0%, #0B0B0B 100%);
  border: 2px solid #4768FE;
  box-shadow: 0 0 40px rgba(71,104,254,.4);
}

/* ── Dashed capability connector lines ──────────────────── */
.dashed-h {
  border-top: 2px dashed rgba(71,104,254,.45);
}

.dashed-v {
  border-left: 2px dashed rgba(71,104,254,.45);
}

/* ── CTA banner: deep rich purple with starfield ─────────── */
.cta-bg {
  background: linear-gradient(120deg, #0B0B0B 0%, #1B2150 35%, #1B2150 55%, #0B0B0B 100%);
  position: relative;
  overflow: hidden;
}

.cta-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 30%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px   1px   at 40% 70%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(2px   2px   at 65% 20%, rgba(71,104,254,.5)  0%, transparent 100%),
    radial-gradient(1px   1px   at 80% 60%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px   1px   at 90% 80%, rgba(255,255,255,.3) 0%, transparent 100%);
  pointer-events: none;
}


/* ── Trusted Technologies logo marquee ─────────────────── */
.logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.logo-marquee__track{display:flex;align-items:center;gap:1rem;width:max-content;animation:logoScroll 40s linear infinite;will-change:transform}
.logo-marquee:hover .logo-marquee__track{animation-play-state:paused}
.logo-marquee--reverse .logo-marquee__track{animation-direction:reverse}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tech-chip{display:inline-flex;align-items:center;gap:.55rem;height:3.1rem;padding:0 1.1rem;border:1px solid #E7E9F5;border-radius:.8rem;background:#fff;white-space:nowrap;flex:none;box-shadow:0 1px 2px rgba(11,11,11,.04);transition:border-color .2s ease,box-shadow .2s ease}
.tech-chip:hover{border-color:#A5B4FC;box-shadow:0 6px 16px rgba(71,104,254,.10)}
.tc-name{font-weight:700;font-size:.92rem;color:#0B0B0B;letter-spacing:-.01em}
.tc-sap{color:#0070F2}
.tc-mark{width:.6rem;height:.6rem;border-radius:50%;flex:none}
.tc-svg{width:1.2rem;height:1.2rem;flex:none}
@media (prefers-reduced-motion:reduce){.logo-marquee__track{animation:none}}

/* Trusted-tech rows spacing: title->logos = 1 space, row->row = 2 spaces */
.tech-rows{display:flex;flex-direction:column;gap:1.5rem}
.tech-rows .marq-title{margin-bottom:0.5rem}