/* FlowIQ premium homepage prototype
   Scoped to the homepage so indexed long-tail pages remain visually and functionally unchanged. */

body[data-page-template="homepage"] {
  --home-ink: #191817;
  --home-copy: #5d5955;
  --home-muted: #8b8580;
  --home-paper: #fbfaf8;
  --home-stone: #f2f0ed;
  --home-line: #dedad5;
  --home-copper: #f97316;
  --home-copper-dark: #ea580c;
  background: var(--home-paper) !important;
  color: var(--home-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
}

body[data-page-template="homepage"] .site-atmosphere { display: none; }

body[data-page-template="homepage"] > nav > nav {
  background: rgba(251, 250, 248, .92) !important;
  border-color: rgba(222, 218, 213, .8) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}

body[data-page-template="homepage"] .nav-dropdown__trigger,
body[data-page-template="homepage"] > nav a {
  font-weight: 500 !important;
  letter-spacing: -.01em;
}

body[data-page-template="homepage"] .nav-dropdown__menu { padding-top: .8rem; }
body[data-page-template="homepage"] .nav-dropdown__panel {
  border: 1px solid var(--home-line) !important;
  border-radius: 1rem !important;
  background: rgba(251, 250, 248, .98) !important;
  box-shadow: 0 24px 60px rgba(42, 35, 30, .12) !important;
}
body[data-page-template="homepage"] .nav-dropdown__link { border-radius: .7rem !important; }
body[data-page-template="homepage"] .nav-dropdown__link:hover { background: #f1eee9 !important; }
body[data-page-template="homepage"] > nav a[href="/signup"] {
  border: 1px solid rgba(249,115,22,.55) !important;
  background: transparent !important;
  color: var(--home-copper-dark) !important;
  box-shadow: none !important;
  font-size: .82rem !important;
  font-weight: 520 !important;
}
body[data-page-template="homepage"] > nav a[href="/signup"]:hover { background: #fff1e7 !important; transform: none !important; }

.premium-home {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 6.4rem 2rem 0;
}

.premium-hero {
  position: relative;
  min-height: 52rem;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: clamp(4.5rem, 9vw, 8rem) 0 0;
  text-align: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.premium-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 18%;
  background-image: radial-gradient(rgba(249, 115, 22, .13) .7px, transparent .7px);
  background-size: 5px 5px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
  pointer-events: none;
}

.premium-hero__copy { position: relative; z-index: 2; max-width: 67rem; }
.premium-hero .section-kicker,
.premium-home .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  background: transparent;
  color: var(--home-copper-dark);
  padding: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.premium-hero .section-kicker::before {
  content: "";
  width: 1.9rem;
  height: 1px;
  background: currentColor;
}

.premium-hero h1 {
  max-width: none !important;
  margin: 1.35rem 0 0;
  color: var(--home-ink);
  font-size: clamp(3.6rem, 7.2vw, 7.2rem) !important;
  font-weight: 430 !important;
  letter-spacing: -.072em !important;
  line-height: .91 !important;
  overflow-wrap: normal !important;
}
.premium-hero h1 span { display: inline-block; color: var(--home-copper); white-space: nowrap; }
.premium-hero__copy > p {
  max-width: 47rem;
  margin: 1.75rem auto 0;
  color: var(--home-copy);
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
  font-weight: 400;
  line-height: 1.55;
}

.premium-actions { display: flex; justify-content: center; gap: .75rem; margin-top: 2rem; }
.premium-button {
  min-height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 1px solid var(--home-line);
  border-radius: 999px;
  padding: .7rem 1.35rem;
  color: var(--home-ink);
  background: rgba(251, 250, 248, .82);
  font-size: .92rem;
  font-weight: 520;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.premium-button:hover { transform: translateY(-2px); border-color: #beb7b0; background: #fff; }
.premium-button--primary { color: #fff; border-color: var(--home-copper); background: var(--home-copper); }
.premium-button--primary:hover { color: #fff; border-color: var(--home-copper-dark); background: var(--home-copper-dark); }
.premium-button--primary span {
  display: grid; place-items: center; width: 1.65rem; height: 1.65rem; margin: -.2rem -.7rem -.2rem 0;
  border: 1px solid rgba(255,255,255,.48); border-radius: 50%;
}

.premium-hero__trust { display: flex; justify-content: center; gap: 1.3rem; margin-top: 1.55rem; color: var(--home-muted); font-size: .74rem; }
.premium-hero__trust span + span::before { content: "·"; margin-right: 1.3rem; color: #bdb7b0; }

.product-stage {
  position: relative;
  z-index: 3;
  width: min(100%, 77rem);
  margin-top: 4.6rem;
  border: 1px solid var(--home-line);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.88);
  box-shadow: 0 35px 90px rgba(53, 44, 37, .13);
  overflow: hidden;
  text-align: left;
}
.product-stage__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--home-line); }
.product-stage__tabs button {
  position: relative; border: 0; border-right: 1px solid var(--home-line); background: transparent; padding: 1.05rem;
  color: var(--home-muted); font-size: .8rem; font-weight: 500; cursor: pointer;
}
.product-stage__tabs button:last-child { border-right: 0; }
.product-stage__tabs button.is-active { color: var(--home-ink); }
.product-stage__tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--home-ink); }
.product-stage__screen { position: relative; aspect-ratio: 16/8.2; overflow: hidden; background: #fff; }
.product-stage__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.product-stage__screen img.is-active { opacity: 1; transform: translateY(0); }
.product-stage__status { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--home-line); padding: .75rem 1rem; color: var(--home-copy); font-size: .7rem; }
.product-stage__status span { width: .5rem; height: .5rem; border-radius: 50%; background: #4e9f72; box-shadow: 0 0 0 4px rgba(78,159,114,.12); }
.product-stage__status em { margin-left: auto; color: var(--home-muted); font-style: normal; }

/* Existing semantic homepage sections, restyled into the new system. */
.premium-home .fresh-section { margin-top: clamp(7rem, 12vw, 11rem); }
.premium-home .fresh-section__head { align-items: end; margin-bottom: 2.2rem; }
.premium-home .fresh-section h2,
.premium-home .fresh-flow-band h2,
.premium-home .homepage-tour-band h2,
.premium-home .fresh-cta h2 {
  max-width: 52rem;
  color: var(--home-ink) !important;
  font-size: clamp(2.6rem, 5vw, 5.4rem) !important;
  font-weight: 430 !important;
  letter-spacing: -.062em !important;
  line-height: .98 !important;
}
.premium-home .fresh-section__head > a { color: var(--home-copper-dark) !important; font-size: .82rem; font-weight: 550 !important; }
.premium-home .route-cards,
.premium-home .proof-cards { gap: 0; border: 1px solid var(--home-line); border-radius: 1rem; overflow: hidden; }
.premium-home .route-card,
.premium-home .proof-card {
  min-height: 18rem; align-content: end; border: 0; border-right: 1px solid var(--home-line); border-radius: 0;
  background: rgba(255,255,255,.48); box-shadow: none; padding: clamp(1.5rem, 3vw, 2.4rem);
}
.premium-home .route-card:last-child,
.premium-home .proof-card:last-child { border-right: 0; }
.premium-home .route-card:hover,
.premium-home .proof-card:hover { transform: none; background: #fff; box-shadow: none; }
.premium-home .route-card > :is(i, svg),
.premium-home .proof-card > :is(i, svg) {
  width: 2.75rem;
  height: 2.75rem;
  box-sizing: border-box;
  border: 1px solid rgba(249,115,22,.22);
  border-radius: .8rem;
  background: rgba(249,115,22,.09);
  color: var(--home-copper) !important;
  padding: .68rem;
  stroke-width: 1.8;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.premium-home .route-card:hover > :is(i, svg),
.premium-home .proof-card:hover > :is(i, svg) {
  border-color: rgba(249,115,22,.38);
  background: rgba(249,115,22,.14);
  transform: translateY(-2px);
}
.premium-home .route-card strong,
.premium-home .proof-card strong { font-size: 1.45rem; font-weight: 520; letter-spacing: -.035em; }
.premium-home .route-card span,
.premium-home .proof-card span { max-width: 23rem; color: var(--home-copy); font-weight: 400; line-height: 1.55; }

.premium-home .ai-answer-section { padding-top: 1px; }
.premium-home .ai-answer-section .proof-card { min-height: 15rem; }

.premium-home .fresh-flow-band {
  margin-top: clamp(7rem, 12vw, 11rem); border: 1px solid var(--home-line); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none;
}
.premium-home .fresh-flow-band::before { display: none; }
.premium-home .fresh-flow-band__head { padding: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.premium-home .fresh-flow-band p { max-width: 30rem; color: var(--home-copy); font-weight: 400; }
.premium-home .flow-marquee { border-top: 1px solid var(--home-line); padding: 0; }
.premium-home .flow-marquee::before,
.premium-home .flow-marquee::after { display: none; }
.premium-home .flow-marquee__track { gap: 0; animation-duration: 55s; }
.premium-home .flow-card {
  width: 18rem; min-height: 13rem; align-content: end; gap: .55rem; border: 0; border-right: 1px solid var(--home-line); border-radius: 0;
  background: rgba(255,255,255,.35); box-shadow: none; padding: 1.6rem; animation: none !important;
}
.premium-home .flow-card::before,
.premium-home .flow-card::after,
.premium-home .flow-connector { display: none; }
.premium-home .flow-card :is(i, svg) { color: var(--home-copper) !important; }
.premium-home .flow-card strong { color: var(--home-ink) !important; font-size: 1.08rem; font-weight: 560; }
.premium-home .flow-card span { color: var(--home-copy) !important; font-weight: 400; line-height: 1.45; }

.premium-home .homepage-tour-band {
  grid-template-columns: minmax(0,.8fr) minmax(28rem,1.2fr); margin-top: clamp(7rem,12vw,11rem); border: 0; border-radius: 0;
  border-top: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); background: #f5f2ee; box-shadow: none; padding: clamp(2rem,6vw,5rem);
}
.premium-home .homepage-tour-band h2 { color: var(--home-ink) !important; }
.premium-home .homepage-tour-band p { color: var(--home-copy) !important; font-weight: 400; }
.premium-home .homepage-tour-preview { border: 1px solid rgba(255,255,255,.15); border-radius: .7rem; background: #171513; padding: .4rem; box-shadow: 0 28px 60px rgba(0,0,0,.28); }
.premium-home .homepage-tour-preview img { border-radius: .45rem; }
.premium-home .homepage-tour-preview__play span { background: rgba(251,250,248,.94); color: var(--home-ink); box-shadow: none; font-weight: 520; }
.premium-home .homepage-tour-actions a { border-radius: 999px !important; box-shadow: none !important; font-weight: 520 !important; }

.premium-home .fresh-cta {
  position: relative;
  overflow: hidden;
  margin: clamp(7rem,12vw,11rem) 0 0;
  border: 0;
  border-radius: 0;
  background: var(--home-copper);
  color: #fff;
  box-shadow: none;
  padding: clamp(3.5rem,8vw,7rem) clamp(1.5rem,7vw,6rem);
}
.premium-home .fresh-cta::after {
  content: "";
  position: absolute;
  inset: 12% 4% 12% 52%;
  opacity: .28;
  background-image: radial-gradient(rgba(255,255,255,.8) .8px, transparent .8px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent, #000 25%);
  pointer-events: none;
}
.premium-home .fresh-cta > * { position: relative; z-index: 1; }
.premium-home .fresh-cta h2 { max-width: 48rem; color: #fff !important; }
.premium-home .fresh-cta p { max-width: 42rem; color: rgba(255,255,255,.78); }
.fresh-cta__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; }
.premium-home .fresh-cta a {
  min-height: 3.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  border-radius: 999px !important;
  padding: .72rem 1.25rem;
  box-shadow: none !important;
  font-size: .88rem;
  font-weight: 540 !important;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}
.premium-home .fresh-cta a:hover { transform: translateY(-2px); }
.premium-home .fresh-cta .fresh-cta__primary { border: 1px solid #211e1c; background: #211e1c !important; color: #fff !important; }
.premium-home .fresh-cta .fresh-cta__primary:hover { background: #0f0e0d !important; }
.premium-home .fresh-cta .fresh-cta__secondary { border: 1px solid rgba(255,255,255,.52); background: transparent !important; color: #fff !important; }
.premium-home .fresh-cta .fresh-cta__secondary:hover { background: rgba(255,255,255,.12) !important; }

body[data-page-template="homepage"] footer { margin-top: 0 !important; border-color: var(--home-line) !important; background: #f4f1ed; }
body[data-page-template="homepage"] footer .font-black { font-weight: 550 !important; }

@media (max-width: 960px) {
  .premium-home { padding-inline: 1.2rem; }
  .premium-hero { min-height: auto; padding-top: 5rem; }
  .premium-hero h1 { font-size: clamp(3.5rem, 11vw, 6rem) !important; }
  .product-stage { margin-top: 3.2rem; }
  .premium-home .route-cards,
  .premium-home .proof-cards { grid-template-columns: 1fr; }
  .premium-home .route-card,
  .premium-home .proof-card { min-height: 12rem; border-right: 0; border-bottom: 1px solid var(--home-line); }
  .premium-home .route-card:last-child,
  .premium-home .proof-card:last-child { border-bottom: 0; }
  .premium-home .fresh-flow-band__head,
  .premium-home .homepage-tour-band { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .premium-home { padding: 5.2rem .8rem 0; }
  .premium-hero { padding-top: 3.5rem; }
  .premium-hero h1 { font-size: clamp(3rem, 15.5vw, 4.6rem) !important; letter-spacing: -.065em !important; }
  .premium-hero h1 span { white-space: normal; }
  .premium-hero__copy > p { font-size: 1rem; }
  .premium-actions { flex-direction: column; align-items: stretch; }
  .premium-button { width: 100%; }
  .premium-hero__trust { display: grid; gap: .45rem; }
  .premium-hero__trust span + span::before { display: none; }
  .product-stage__tabs button { padding: .85rem .25rem; font-size: .68rem; }
  .product-stage__screen { aspect-ratio: 4/3; }
  .product-stage__status em { display: none; }
  .premium-home .fresh-section__head,
  .premium-home .fresh-flow-band__head { display: grid; }
  .premium-home .fresh-section h2,
  .premium-home .fresh-flow-band h2,
  .premium-home .homepage-tour-band h2,
  .premium-home .fresh-cta h2 { font-size: clamp(2.5rem, 12vw, 3.8rem) !important; }
  .premium-home .homepage-tour-band { padding: 2rem 1rem; }
  .premium-home .fresh-cta { padding: 3rem 1.25rem; }
  .premium-home .fresh-cta::after { inset: 48% -10% 0 18%; }
  .fresh-cta__actions { display: grid; justify-content: stretch; }
  .premium-home .fresh-cta a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .product-stage__screen img { transition: none; }
  .premium-home .flow-marquee__track { animation: none; }
}