/* ==========================================================================
   Scentigram — marketing landing page
   Plain CSS, no build step. Sections follow the ten bands of the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme tokens
   -------------------------------------------------------------------------- */

:root {
  --bg: #f4f2ec;
  --panel: #fbfaf6;
  --ink: #17150f;
  --sub: #6b675c;
  --line: rgba(23, 21, 15, .14);
  --chip: rgba(23, 21, 15, .05);
  --frame: #17150f;
  --accent: #d4471f;
}

html[data-theme="dark"] {
  --bg: #12110d;
  --panel: #1b1a15;
  --ink: #f2efe6;
  --sub: #959083;
  --line: rgba(255, 255, 255, .13);
  --chip: rgba(255, 255, 255, .06);
  --frame: #000;
  --accent: #d4471f;
}

/* No-JS fallback: the inline head script normally sets data-theme before
   first paint, so this only applies if scripting is unavailable. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #12110d;
    --panel: #1b1a15;
    --ink: #f2efe6;
    --sub: #959083;
    --line: rgba(255, 255, 255, .13);
    --chip: rgba(255, 255, 255, .06);
    --frame: #000;
    --accent: #d4471f;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 40px;
}

img {
  max-width: 100%;
}

figure {
  margin: 0;
}

h1, h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  margin: 0;
}

/* Theme-paired assets: exactly one of each pair is rendered.
   Both halves are selected at the SAME specificity (0,2,0) on purpose. The
   obvious form — a bare `.dark-only { display: none }` — is only 0,1,0 and
   loses to any context rule that sets display on the element itself, e.g.
   `.phone img { display: block }` at 0,1,1. That is not hypothetical: it put
   both the light and the dark screenshot inside the hero's phone frame in
   light mode, doubling the frame's height until it overflowed up through the
   header. Dark mode was unaffected, because its hiding rule already carried
   the attribute selector and outweighed the frame — so the bug appeared in
   exactly one theme, which is what made it easy to miss. */
html:not([data-theme="dark"]) .dark-only {
  display: none;
}

html[data-theme="dark"] .light-only {
  display: none;
}

html[data-theme="dark"] .dark-only {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .light-only {
    display: none;
  }

  html:not([data-theme]) .dark-only {
    display: block;
  }
}

/* Focus */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Shared band + type primitives
   -------------------------------------------------------------------------- */

.band {
  border-top: 1px solid var(--line);
}

.eyebrow {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-family: "Hanken Grotesk", sans-serif;
  text-decoration: none;
  border-radius: 6px;
  transition: filter .15s ease;
}

.btn:hover {
  filter: brightness(1.06);
}

.btn-sm {
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 18px;
}

.btn-lg {
  flex: none;
  font-weight: 600;
  font-size: 15px;
  padding: 15px 30px;
}

/* --------------------------------------------------------------------------
   4. Band 1 — header
   -------------------------------------------------------------------------- */

.band-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 48px;
  border-bottom: 1px solid var(--line);
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.logo-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.wordmark {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.4px;
  color: var(--ink);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav a {
  font-weight: 500;
  font-size: 13.5px;
  color: var(--sub);
  text-decoration: none;
  transition: color .15s ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--ink);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 19px;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease;
}

.theme-toggle:hover {
  background: var(--line);
}

/* The icon names the theme that's currently active: sun in light mode,
   moon in dark mode (design prototype + README, "Header" section). */
.icon-moon {
  display: none;
}

html[data-theme="dark"] .icon-sun {
  display: none;
}

html[data-theme="dark"] .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .icon-sun {
    display: none;
  }

  html:not([data-theme]) .icon-moon {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   5. Band 2 — hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: center;
  padding: 44px 48px 40px;
}

.hero .eyebrow {
  font-size: 11.5px;
  letter-spacing: 1.6px;
  margin-bottom: 14px;
}

.hero h1 {
  font-weight: 700;
  font-size: 52px;
  line-height: 1.03;
  letter-spacing: -1.7px;
  color: var(--ink);
  margin-bottom: 18px;
}

.lede {
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--sub);
  max-width: 490px;
  margin: 0 0 14px;
}

.lede-2 {
  margin-bottom: 24px;
}

/* Stage pills */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.pill {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .6px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--sub);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pill:hover {
  background: var(--chip);
  color: var(--ink);
}

.pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.pill.is-active:hover {
  background: var(--accent);
  color: var(--bg);
  filter: brightness(1.06);
}

.pill-replay {
  border: 1px dashed var(--line);
  color: var(--ink);
}

/* Caption */
.caption {
  min-height: 54px;
  max-width: 470px;
  border-left: 2px solid var(--accent);
  padding-left: 14px;
}

.caption-line {
  display: none;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sub);
  margin: 0;
  opacity: 0;
  transition: opacity .2s ease;
}

.caption-line.is-active {
  display: block;
  opacity: 1;
}

.caption-line strong {
  color: var(--ink);
  font-weight: 700;
}

/* Stage visuals */
.stage {
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-visual {
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
}

.stage-visual.is-active {
  display: flex;
  opacity: 1;
}

/* Stage 1 — spark */
.spark-wrap {
  position: relative;
  width: 280px;
  height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ember {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 24px rgba(212, 71, 31, .9);
  animation: sg-ember 1.5s ease-in-out infinite;
}

.halo {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 71, 31, .45), transparent 70%);
  animation: sg-halo 2.2s ease-out infinite;
}

@keyframes sg-ember {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .55; }
}

@keyframes sg-halo {
  0% { transform: scale(.6); opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ember,
  .halo {
    animation: none;
  }
}

/* Stage 2 — idea */
.idea-wrap {
  width: 280px;
  height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blob {
  width: 250px;
  height: 470px;
  border-radius: 120px;
  filter: blur(32px);
  background:
    radial-gradient(60% 40% at 50% 26%, rgba(212, 71, 31, .5), transparent 70%),
    radial-gradient(70% 45% at 45% 62%, rgba(88, 181, 86, .4), transparent 72%),
    radial-gradient(55% 30% at 60% 86%, rgba(120, 120, 110, .3), transparent 70%);
}

/* Stage 3 — thought (wireframe) */
.wire {
  width: 266px;
  height: 580px;
  border: 2px dashed var(--line);
  border-radius: 40px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.wire-bar {
  background: var(--chip);
  border-radius: 4px;
}

.wire-bar-title {
  height: 12px;
  width: 38%;
}

.wire-bar-head {
  height: 34px;
  width: 84%;
  border-radius: 6px;
}

.wire-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 8px;
}

.wire-line {
  height: 11px;
}

.w100 { width: 100%; }
.w88 { width: 88%; background: rgba(212, 71, 31, .3); }
.w94 { width: 94%; }
.w70 { width: 70%; }

.wire-circle {
  width: 150px;
  height: 150px;
  border: 2px dashed rgba(212, 71, 31, .45);
  border-radius: 75px;
  margin: 14px auto;
}

.wire-row {
  display: flex;
  gap: 7px;
  justify-content: center;
}

.wire-chip {
  height: 11px;
  width: 30px;
  background: var(--chip);
  border-radius: 4px;
}

.wire-pill {
  margin-top: auto;
  align-self: center;
  height: 46px;
  width: 130px;
  background: var(--chip);
  border-radius: 23px;
}

/* Stages 4 & 5 — phone frame */
.phone {
  width: 262px;
  background: var(--frame);
  border-radius: 38px;
  padding: 10px;
}

.phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 29px;
}

/* --------------------------------------------------------------------------
   6. Bands 3-5 — feature bands
   -------------------------------------------------------------------------- */

.feature {
  display: grid;
  align-items: center;
  gap: 44px;
  padding: 40px 48px;
}

/* Text left, images right */
.feature-a {
  grid-template-columns: 1.05fr .95fr;
}

/* Images left, text right */
.feature-b {
  grid-template-columns: .95fr 1.05fr;
}

.feature h2 {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.7px;
  color: var(--ink);
  margin-bottom: 12px;
}

.feature p {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sub);
  margin: 0 0 12px;
}

.feature p.p-last {
  margin-bottom: 18px;
}

/* Spec sheet */
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.spec-row:last-child {
  border-bottom: 1px solid var(--line);
}

.spec-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--sub);
}

.spec-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

/* Screenshot pairs */
.feature-shots {
  display: flex;
  gap: 16px;
}

.feature-a .feature-shots {
  justify-content: flex-end;
}

.shot img {
  width: 200px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.shot figcaption {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--sub);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   7. Band 6 — getting started
   -------------------------------------------------------------------------- */

.started {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 40px 48px;
  align-items: center;
}

.started-shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.started h2 {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.6px;
  color: var(--ink);
  margin-bottom: 12px;
}

.started p {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sub);
  margin: 0 0 12px;
}

.started p.p-last {
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. Band 7 — what it isn't
   -------------------------------------------------------------------------- */

.isnt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 36px 48px;
}

.isnt-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 7px;
}

.isnt p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  color: var(--sub);
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. Band 8 — testimonial
   -------------------------------------------------------------------------- */

.quote {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 36px;
  align-items: center;
  padding: 34px 48px;
}

.quote-text {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -.5px;
  color: var(--ink);
  margin: 0;
}

.quote-attr {
  font-style: normal;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sub);
}

/* --------------------------------------------------------------------------
   10. Band 9 — CTA
   -------------------------------------------------------------------------- */

.cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 42px 48px;
}

.cta h2 {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 8px;
}

.cta p {
  font-weight: 400;
  font-size: 14.5px;
  color: var(--sub);
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Band 10 — footer
   -------------------------------------------------------------------------- */

.band-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 16px 48px;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--sub);
}

/* --------------------------------------------------------------------------
   12. Responsive — narrow screens only, desktop layout is untouched
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .band-header {
    padding: 16px 24px;
  }

  .nav {
    display: none;
  }

  .hero,
  .feature,
  .started,
  .isnt,
  .quote,
  .cta {
    grid-template-columns: 1fr;
    padding-left: 24px;
    padding-right: 24px;
  }

  .cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .quote {
    align-items: start;
  }

  .band-footer {
    padding: 16px 24px;
  }

  .hero h1 {
    font-size: 38px;
    letter-spacing: -1.2px;
  }

  .hero {
    gap: 32px;
  }

  .stage {
    height: auto;
  }

  .spark-wrap,
  .idea-wrap {
    height: 320px;
  }

  .wire {
    height: 420px;
  }

  /* Text first, images below — including the formula band, which is
     images-left on desktop. */
  .feature-b .feature-copy {
    order: 1;
  }

  .feature-b .feature-shots {
    order: 2;
  }

  .feature-shots,
  .feature-a .feature-shots {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .shot {
    flex: 1 1 180px;
    min-width: 0;
  }

  .shot img {
    width: 100%;
  }

  .started-shot {
    max-width: 200px;
  }
}