/* Google Workspace-inspired homepage: bright, spacious and intentionally simple. */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
  color-scheme: light;
  --void: #fff;
  --panel: #fff;
  --line: #dadce0;
  --line-strong: #bdc1c6;
  --text: #202124;
  --muted: #5f6368;
  --dim: #80868b;
  --magenta: #1a73e8;
  --cyan: #4285f4;
  --violet: #0b57d0;
  --shell: 1280px;
  --gutter: 32px;
  --font-sans: "Google Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

body { background: #fff; color: #202124; }
.page-backdrop { background: #fff; }
::selection { background: #d2e3fc; color: #174ea6; }
:focus-visible { outline-color: #1a73e8; }

.topbar,
.topbar.scrolled {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #dadce0;
  box-shadow: 0 2px 8px rgba(60, 64, 67, .08);
}

.topbar-inner {
  height: 64px;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding-block: 0;
}

.brand,
.menu,
.account-link {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.brand { padding: 0; color: #202124; font-size: 18px; font-weight: 600; }
.brand-mark { width: 34px; height: 30px; }
.menu { padding: 0; gap: 4px; }
.menu a {
  padding: 9px 14px;
  border-radius: 6px;
  color: #5f6368;
  font-size: 14px;
  font-weight: 500;
}
.menu a:hover { color: #174ea6; background: #f1f3f4; }
.menu a[data-nav="home"],
.menu a[aria-current] { color: #1a73e8; background: transparent; }
.actions { gap: 8px; color: #5f6368; }
.actions .icon-btn { color: #5f6368; }
.actions .icon-btn:hover { color: #202124; background: #f1f3f4; }
.account-link {
  padding: 9px 19px;
  border-radius: 999px;
  background: #1a73e8;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.account-link:hover { background: #185abc; }
.account-avatar {
  border: 0;
  background: #1a73e8;
  box-shadow: none;
}
.account-avatar:hover { box-shadow: 0 0 0 4px #e8f0fe; }
.pop {
  border: 1px solid #dadce0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(60, 64, 67, .18);
  backdrop-filter: none;
}
.pop button { color: #5f6368; }
.pop button:hover,
.pop button[aria-checked="true"] { color: #202124; background: #f1f3f4; }
.more-panel { background: #fff; border-color: #dadce0; }
.more-panel a { color: #5f6368; border-color: #e8eaed; }

.hero {
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  align-items: center;
  gap: clamp(56px, 7vw, 112px);
  padding: 130px var(--gutter) 90px;
  color: #202124;
  pointer-events: auto;
}
.hero-inner { max-width: 570px; }
.eyebrow {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5f6368;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow .dot { width: 14px; height: 14px; background: #4285f4; box-shadow: inset 0 0 0 4px #d2e3fc; }
.hero h1 {
  margin: 0 0 24px;
  color: #202124;
  font-size: clamp(48px, 5.2vw, 72px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.hero .lede,
html[data-theme="light"] .hero .lede {
  max-width: 560px;
  margin-bottom: 30px;
  color: #5f6368;
  font-size: 18px;
  line-height: 1.7;
  opacity: 1;
}
.cta-row { gap: 12px; }
.btn { min-height: 48px; padding: 11px 24px; border-radius: 999px; font-size: 15px; font-weight: 600; }
.hero .btn-primary,
.section-cta .btn-primary {
  border: 1px solid #1a73e8;
  background: #1a73e8;
  box-shadow: none;
}
.hero .btn-primary:hover,
.section-cta .btn-primary:hover { background: #185abc; filter: none; }
.hero .btn-primary::after { content: none; }
.hero .btn-ghost,
html[data-theme="light"] .hero .btn-ghost {
  border: 1px solid #dadce0;
  background: #fff;
  color: #1a73e8;
}
.hero .btn-ghost:hover { border-color: #1a73e8; background: #f8fafd; }
.hero .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid #dadce0;
  color: #202124;
}
.hero .stat { min-width: 0; padding: 0 20px; border-left: 1px solid #dadce0; }
.hero .stat:first-child { padding-left: 0; }
.hero .stats dd { color: #202124; font-size: 25px; font-weight: 600; }
.hero .stats dt { color: #80868b; font-size: 11px; }

.hero-visual {
  position: relative;
  min-width: 0;
  padding: 42px 20px;
  border-radius: 36px;
  background: linear-gradient(145deg, #f8fafd, #e8f0fe);
}
.hero-app {
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: min(100%, 620px);
  min-height: 430px;
  margin: auto;
  border: 1px solid #dadce0;
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 70px rgba(60, 64, 67, .16);
  animation: hero-float 6s ease-in-out infinite;
}
.hero-app-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid #e8eaed;
  color: #5f6368;
  font-size: 12px;
  font-weight: 600;
}
.hero-app-bar strong { justify-self: end; color: #188038; font-size: 10px; letter-spacing: .12em; }
.hero-app-dots { display: flex; gap: 6px; }
.hero-app-dots i { width: 7px; height: 7px; border-radius: 50%; background: #dadce0; }
.hero-route-map { position: relative; height: 310px; }
.hero-route-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-route-map path { fill: none; stroke: #aecbfa; stroke-width: .65; stroke-dasharray: 4 3; animation: route-dash 12s linear infinite; }
.hero-route-core,
.hero-route-node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hero-route-core {
  z-index: 2;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background: #1a73e8;
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(26, 115, 232, .28);
}
.hero-route-node {
  z-index: 1;
  width: 54px;
  height: 54px;
  border: 1px solid #dadce0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 20px rgba(60, 64, 67, .14);
  animation: node-pulse 3.6s ease-in-out infinite;
}
.hero-route-node.is-dynamic {
  width: clamp(34px, 3.1vw, 42px);
  height: clamp(34px, 3.1vw, 42px);
}
.hero-route-node::after {
  content: "";
  position: absolute;
  inset: 26%;
  background: #5f6368;
  -webkit-mask: var(--hero-logo) center / contain no-repeat;
  mask: var(--hero-logo) center / contain no-repeat;
}
.hn1 { left: 22%; top: 25%; }
.hn2 { left: 78%; top: 25%; animation-delay: -.9s; }
.hn3 { left: 18%; top: 72%; animation-delay: -1.8s; }
.hn4 { left: 82%; top: 72%; animation-delay: -2.7s; }
.hero-request {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  margin: 0 18px 18px;
  padding: 13px 16px;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  background: #f8fafd;
  color: #5f6368;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hero-request strong { color: #188038; }
.hero-request small { color: #80868b; }
.hero-float {
  position: absolute;
  z-index: 3;
  padding: 10px 15px;
  border: 1px solid #dadce0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(60, 64, 67, .12);
  color: #3c4043;
  font-size: 12px;
  font-weight: 600;
  animation: badge-float 5s ease-in-out infinite;
}
.hf1 { left: 0; top: 23%; }
.hf2 { right: 0; bottom: 21%; animation-delay: -2.5s; }

.ecosystem {
  max-width: 1120px;
  padding: 70px var(--gutter) 100px;
  color: #202124;
}
.ecosystem::before,
.section::before,
.section-cta::before { background: transparent; }
.section-heading h2 { color: #202124; font-size: clamp(34px, 4vw, 52px); font-weight: 600; letter-spacing: -.035em; }
.section-heading .section-lede { color: #5f6368; }
.ecosystem .section-heading h2 { font-size: clamp(26px, 3vw, 38px); }
.logo-rail {
  gap: 24px 40px;
  padding: 30px;
  border: 1px solid #e8eaed;
  border-radius: 28px;
  background: #f8fafd;
  mask-image: none;
  -webkit-mask-image: none;
}
.logo-rail .eco-logo { width: 36px; height: 36px; background: #5f6368; }
.logo-rail .eco-logo:hover { background: #1a73e8; transform: translateY(-2px); }

.section { color: #202124; }
.features { padding-top: 110px; padding-bottom: 110px; }
.features::before {
  inset: 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #f8fafd;
}
.feature-grid { gap: 24px; }
.feature-api,
.feature-models,
.feature-providers,
.feature-analytics { grid-column: span 6; }
.feature-card {
  border: 1px solid #e8eaed;
  border-radius: 24px;
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.feature-card:hover { border-color: #bdc1c6; transform: translateY(-2px); }
.feature-visual,
.model-visual,
.provider-visual,
.analytics-visual {
  min-height: 260px;
  border-color: #e8eaed;
  background: #f1f6ff;
}
.feature-copy h3 { color: #202124; font-size: 22px; }
.feature-copy p { color: #5f6368; }
.feature-copy a,
.visual-kicker,
.ranking-wall b { color: #1a73e8; }
.feature-copy a:hover { color: #174ea6; }
.feature-icon { border-color: #d2e3fc; background: #e8f0fe; color: #1a73e8; }
.endpoint-visual { color: #202124; }
.endpoint-visual > span:nth-of-type(2) { color: #5f6368; }
.endpoint-visual code { border-color: #d2e3fc; background: #fff; color: #174ea6; }
.endpoint-lines i { background: #1a73e8; }
.mock-search { border-color: #dadce0; background: #fff; color: #5f6368; }
.mock-search input { color: #202124; }
.mock-search input::placeholder { color: #80868b; }
.mock-models button,
.mock-models span { border-color: #e8eaed; color: #3c4043; }
.mock-models button:hover { background: #e8f0fe; }
.mock-models b,
.mock-models em { color: #80868b; }
.provider-core { border: 0; background: #1a73e8; box-shadow: 0 10px 28px rgba(26, 115, 232, .22); }
.provider-links path { stroke: #aecbfa; }
.provider-node { border-color: #dadce0; box-shadow: 0 6px 16px rgba(60, 64, 67, .12); }
.mock-chart-head,
.mock-chart-foot { color: #80868b; }
.mock-chart-head span:first-child { color: #202124; }
.ranking-wall li { border-color: #e8eaed; background: #fff; color: #3c4043; }
.ranking-wall small { color: #80868b; }

.section-cta {
  max-width: 1120px;
  margin: 110px auto;
  padding: 88px 32px;
  border-radius: 32px;
  background: #e8f0fe;
  color: #202124;
}
.section-cta h2 { color: #202124; font-size: clamp(38px, 5vw, 62px); font-weight: 600; letter-spacing: -.04em; }
.section-cta p { color: #5f6368; font-size: 17px; }
.glow { display: none; }
.foot { border-top: 1px solid #dadce0; background: #fff; color: #5f6368; }

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes node-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes route-dash { to { stroke-dashoffset: -28; } }

@media (max-width: 1024px) {
  .topbar-inner { grid-template-columns: 1fr auto; }
  .menu { display: none; }
  .only-narrow { display: inline-flex; }
  .hero { grid-template-columns: 1fr; gap: 64px; padding-top: 120px; }
  .hero-inner { max-width: 720px; }
  .hero-visual { width: min(100%, 760px); margin: auto; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .topbar-inner { height: 58px; min-height: 58px; }
  .brand-name { display: inline; }
  .hero { min-height: auto; padding: 104px var(--gutter) 72px; }
  .hero h1 { font-size: clamp(44px, 13vw, 62px); }
  .hero .lede { font-size: 16px; }
  .hero .stats { margin-top: 42px; }
  .hero .stat { padding: 0 10px; }
  .hero .stats dd { font-size: 21px; }
  .hero-visual { padding: 28px 10px; border-radius: 26px; }
  .hero-app { min-height: 370px; }
  .hero-route-map { height: 250px; }
  .hero-float { display: none; }
  .feature-api,
  .feature-models,
  .feature-providers,
  .feature-analytics { grid-column: span 12; }
  .section-cta { margin: 72px 20px; padding: 64px 24px; }
}

@media (max-width: 440px) {
  .brand-name { display: none; }
  .hero .stats dt { font-size: 9px; }
  .hero-route-node { width: 46px; height: 46px; }
  .hero-request { gap: 10px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-app,
  .hero-float,
  .hero-route-node,
  .hero-route-map path { animation: none; }
}