/* =====================================================================
   DragonFire Automation - Corporate Site Stylesheet
   Brand colours: Blue #3c465f, Orange #ff7d00, Grey #46464b
   Brand type:   Google Work Sans
                 Headlines  - Work Sans Bold (700), brand blue, ALL CAPS, extended
                 Subheads   - Work Sans SemiBold (600), brand orange
                 Body copy  - Work Sans Regular (400), brand grey, +20% line-spacing
   ===================================================================== */

:root {
  --df-blue: #3c465f;
  --df-blue-deep: #2a3247;
  --df-blue-ink: #1a2030;
  --df-orange: #ff7d00;
  --df-orange-glow: #ff9b3d;
  --df-grey: #46464b;
  --df-grey-soft: #6b6b73;
  --df-paper: #f6f4ef;
  --df-paper-warm: #efe9de;
  --df-line: rgba(60, 70, 95, 0.14);

  --display: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: 16px;
  /* Brand rule: body copy gets +20% line-spacing on top of normal (~1.5) */
  line-height: 1.8;
  color: var(--df-grey);
  background: var(--df-paper);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

/* ---------- Typography ----------
   Headlines: Work Sans Bold, brand blue, CAPS, extended letter-spacing.
   Subheads:  Work Sans SemiBold, brand orange.
   H4 utility heads: small caps, brand blue.

   `text-wrap: balance` on all headings prevents widowed last words -
   the browser distributes line breaks so e.g. "No Site Visit. No Long
   Wait." splits cleanly in two rather than leaving "WAIT." alone on
   the second line. Progressive enhancement; older browsers fall back
   to the default wrap behaviour with no harm.
*/
h1, h2 {
  font-family: var(--display);
  color: var(--df-blue);
  font-weight: 700;
  letter-spacing: 0.04em;       /* "extended" feel */
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}
h3 {
  font-family: var(--body);
  color: var(--df-orange);
  font-weight: 600;             /* SemiBold per brand */
  letter-spacing: 0;
  line-height: 1.25;
  text-wrap: balance;
}
h4 {
  font-family: var(--body);
  color: var(--df-blue);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 6.4vw, 5.4rem);
  letter-spacing: 0.045em;
}
h2 { font-size: clamp(1.8rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); }
h4 { font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }

p {
  max-width: 62ch;
  text-wrap: pretty;            /* avoid widow on the last line of a paragraph */
}

.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--df-orange);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--df-orange);
}

/* ---------- DragonQuote product logotype ----------
   DragonQuote is the *product*; DragonFire (the company) keeps the nav +
   footer marks. This wordmark only appears in product-feature contexts. */
.product-logotype {
  display: block;
  width: clamp(220px, 26vw, 300px);
  height: auto;
  margin-bottom: 1.4rem;
}
.mock-widget__brand {
  height: 14px;
  width: auto;
  margin-left: auto;
  display: block;
}

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--df-grey);
  max-width: 56ch;
  text-wrap: pretty;
}

a { color: var(--df-blue); text-decoration: none; }
a:hover { color: var(--df-orange); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: clamp(4rem, 10vw, 9rem) 0; position: relative; }
.section--dark { background: var(--df-blue-ink); color: rgba(255,255,255,0.85); }
.section--dark h1, .section--dark h2 { color: #fff; }
.section--dark h3 { color: var(--df-orange); } /* subheads stay orange */
.section--dark h4 { color: #fff; }
.section--paper { background: var(--df-paper-warm); }

/* ---------- Wordmark logo ----------
   In the nav, the logo is now split into two pieces: a static LOGOTYPE
   (the "DRAGONFIRE AUTOMATION" lettering, loaded as <img>) and a
   separate INLINE animated ICON SVG to its right. That split lets CSS
   target the icon's individual rects so it can swirl/breathe in the
   default state and freeze in the scrolled state.

   The brand kit ships separate logotype SVGs for light and dark
   backgrounds. We render both and toggle visibility via .nav.scrolled.
   The footer is always dark so it just uses the existing full lockup.
*/
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;          /* breathing room between logotype and icon */
  line-height: 1;
  position: relative;
}
.wordmark__img {
  display: block;
  height: 60px;         /* default: bigger over the dark hero */
  width: auto;
  transition: height 0.25s ease, opacity 0.25s ease;
}

/* Nav - dual logotypes stacked, swap between them based on scroll state. */
.nav .wordmark { width: auto; }
.nav .wordmark__img--light { display: none; }
.nav.scrolled .wordmark__img--dark { display: none; }
.nav.scrolled .wordmark__img--light { display: block; }
.nav.scrolled .wordmark__img { height: 32px; }   /* scrolled: back to small */

/* Mobile menu open over dark panel - keep the dark-bg (white-text) variant. */
@media (max-width: 860px) {
  .nav.menu-open .wordmark__img--light { display: none; }
  .nav.menu-open .wordmark__img--dark  { display: block; }
  .wordmark__img { height: 44px; }                 /* slightly smaller on mobile */
}

/* Footer is always on-dark: logotype + animated icon, same 1:1
   proportions and layout as the nav's default state (60px/60px),
   scaled down to 30px/30px. */
.footer .wordmark__img { height: 30px; }
.footer .wordmark__img--always { display: block; }
.footer .nav-flame { width: 30px; height: 30px; margin-right: 0; }

/* On narrow phones the footer grid becomes two columns and the brand
   cell is barely 150px wide - at 30px tall the DRAGONFIRE AUTOMATION
   logotype (5.75:1 aspect ratio) plus the animated mark overflows
   into the COMPANY column. Shrink both at iPhone-class widths so
   there's clear breathing room. Desktop and tablet untouched. */
@media (max-width: 480px) {
  .footer .wordmark__img { height: 20px; }
  .footer .nav-flame { width: 20px; height: 20px; }
  .footer .wordmark { gap: 0.4rem; }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.2rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, padding 0.3s ease;
}
.nav.scrolled {
  background: rgba(246, 244, 239, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.8rem var(--gutter);
  border-bottom: 1px solid var(--df-line);
}
.nav__links { display: flex; gap: 2rem; align-items: center; }
.nav__links a {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase; /* match button treatment */
  color: #ffffff;            /* default: sitting over a dark hero */
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.25s ease;
}
/* Scrolled state (desktop only - mobile slide-out manages its own colours) */
@media (min-width: 861px) {
  .nav.scrolled .nav__links a { color: var(--df-blue); }
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--df-orange);
  transition: width 0.25s ease;
}
.nav__links a:hover::after,
.nav__links a.active::after { width: 100%; }

.nav__cta {
  background: var(--df-orange);
  color: #fff !important;
  padding: 0.7rem 1.3rem !important;
  font-size: 0.82rem;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav__cta:hover { background: var(--df-blue); transform: translateY(-2px); }
.nav__cta::after { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav-toggle span {
  width: 26px;
  height: 2px;
  background: #ffffff; /* default: visible on dark hero */
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.25s ease;
}
.nav.scrolled .nav-toggle span { background: var(--df-blue); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav__links {
    position: fixed;
    top: 0; right: 0;
    width: min(100%, 380px);
    height: 100vh;
    background: var(--df-blue-ink);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 3rem;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.7, 0, 0.3, 1);
  }
  .nav__links.open { transform: translateX(0); }
  .nav__links a { color: #fff; font-size: 1.2rem; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
  .nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #fff; }
  .nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #fff; }
  .nav.menu-open .nav-toggle { position: fixed; right: var(--gutter); top: 1.2rem; z-index: 101; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.8rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn--primary {
  background: var(--df-orange);
  color: #fff;
}
.btn--primary:hover { background: var(--df-blue); color: #fff; transform: translateY(-3px); }

.btn--ghost {
  background: transparent;
  color: var(--df-blue);
  border: 2px solid var(--df-blue);
}
.btn--ghost:hover { background: var(--df-blue); color: #fff; transform: translateY(-3px); }

.section--dark .btn--ghost,
.parallax-hero .btn--ghost,
.page-hero .btn--ghost,
.product-hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
/* Hover/active state on dark backgrounds matches the primary orange
   button's hover: brand-blue fill with white text. Consistent across the
   site. */
.section--dark .btn--ghost:hover,
.parallax-hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.product-hero .btn--ghost:hover,
.section--dark .btn--ghost:focus-visible,
.parallax-hero .btn--ghost:focus-visible,
.page-hero .btn--ghost:focus-visible,
.product-hero .btn--ghost:focus-visible { background: var(--df-blue); color: #fff; border-color: var(--df-blue); transform: translateY(-3px); }

.btn__arrow {
  display: inline-block;
  font-size: 1.5em;             /* chevron glyph is smaller than → was - bump it up */
  line-height: 0.6;             /* keep vertical alignment with the button text */
  font-weight: 400;
  transform-origin: center;
  transition: transform 0.2s ease;
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ============================================================
   PARALLAX - multi-layered, GPU-friendly
   ============================================================ */
.parallax-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--df-blue-ink) 0%, var(--df-blue-deep) 100%);
}

.parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.parallax-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.6;
}

.parallax-glow {
  background: radial-gradient(circle at 30% 50%, rgba(255, 125, 0, 0.25), transparent 60%);
  filter: blur(20px);
}

.parallax-glow-2 {
  background: radial-gradient(circle at 80% 20%, rgba(255, 125, 0, 0.18), transparent 50%);
}

/* Floating pixel embers - pure CSS */
.embers { position: absolute; inset: 0; overflow: hidden; }
.embers span {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--df-orange);
  box-shadow: 0 0 10px var(--df-orange);
  opacity: 0;
  animation: rise linear infinite;
}
.embers span:nth-child(1) { left: 8%;  width: 4px; height: 4px; animation-duration: 16s; animation-delay: 0s; }
.embers span:nth-child(2) { left: 18%; width: 6px; height: 6px; animation-duration: 22s; animation-delay: 3s; }
.embers span:nth-child(3) { left: 28%; width: 3px; height: 3px; animation-duration: 14s; animation-delay: 6s; }
.embers span:nth-child(4) { left: 42%; width: 5px; height: 5px; animation-duration: 20s; animation-delay: 1s; }
.embers span:nth-child(5) { left: 55%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: 4s; }
.embers span:nth-child(6) { left: 67%; width: 6px; height: 6px; animation-duration: 24s; animation-delay: 7s; }
.embers span:nth-child(7) { left: 78%; width: 3px; height: 3px; animation-duration: 15s; animation-delay: 2s; }
.embers span:nth-child(8) { left: 88%; width: 5px; height: 5px; animation-duration: 21s; animation-delay: 5s; }
.embers span:nth-child(9) { left: 92%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: 8s; }
.embers span:nth-child(10){ left: 35%; width: 3px; height: 3px; animation-duration: 19s; animation-delay: 9s; }

@keyframes rise {
  0%   { transform: translateY(110vh) scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 5;
  color: #fff;
  padding: clamp(9rem, 11vh, 11rem) var(--gutter) 4rem;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}
.hero-content h1 { color: #fff; max-width: 18ch; }

/* Hero product reveal - "Introducing" kicker sits as one unit with the
   DragonQuote wordmark, set apart from the company mark in the nav above. */
.hero-intro { margin-bottom: 1.8rem; }
.hero-intro__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.95rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.95vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--df-orange-glow);
}
.hero-intro__kicker::before {
  content: '';
  width: 34px;
  height: 2px;
  background: var(--df-orange);
}
.hero-intro .product-logotype { margin-bottom: 0; }
.hero-content h1 em,
.page-hero h1 em {
  font-style: normal;
  color: var(--df-orange);
  position: relative;
  font-weight: 700;
}
.hero-content .lead { color: rgba(255,255,255,0.78); margin-top: 1.8rem; max-width: 48ch; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.hero-content .eyebrow { color: var(--df-orange-glow); }
.hero-actions { margin-top: 2.8rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-meta {
  position: absolute;
  bottom: 2.5rem;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: end;
  z-index: 5;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.hero-meta .scroll-cue {
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.hero-meta .scroll-cue::after {
  content: '';
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--df-orange), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.4); }
}

/* Background parallax section */
.parallax-section {
  position: relative;
  min-height: 60vh;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-color: var(--df-blue-ink);
  background-image:
    linear-gradient(135deg, rgba(26,32,48,0.92), rgba(60,70,95,0.85)),
    repeating-linear-gradient(45deg, rgba(255,125,0,0.04) 0 2px, transparent 2px 14px);
  display: flex;
  align-items: center;
  color: #fff;
  padding: 6rem var(--gutter);
}
@media (max-width: 860px) {
  .parallax-section { background-attachment: scroll; }
}

/* Photo-backed parallax band - set --bg-image inline on the section.
   Brand-blue gradient overlay keeps text legible over any photo. */
.parallax-section--photo {
  background-image:
    linear-gradient(135deg, rgba(26,32,48,0.82), rgba(60,70,95,0.7)),
    var(--bg-image, none);
}

/* Inline photo block - for use inside .split / .feature etc. */
.photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 30px 60px -25px rgba(26,32,48,0.45);
  object-fit: cover;
  background: rgba(60,70,95,0.06);
}
.photo--4x3 { aspect-ratio: 4 / 3; }
.photo--3x4 { aspect-ratio: 3 / 4; }
.photo--16x10 { aspect-ratio: 16 / 10; }
.photo--square { aspect-ratio: 1 / 1; }
.photo-caption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--df-grey-soft);
}

/* ---------- Cards / Features ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.feature {
  background: #fff;
  padding: 2.2rem 1.8rem;
  border-radius: 4px;
  border: 1px solid var(--df-line);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 3px;
  background: var(--df-orange);
}
.feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -20px rgba(60, 70, 95, 0.25);
  border-color: var(--df-orange);
}
.feature__num {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--df-orange);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}
.feature h3 { margin-bottom: 0.6rem; color: var(--df-orange); }
.feature p { font-size: 0.95rem; line-height: 1.7; }

.section--dark .feature {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.section--dark .feature p { color: rgba(255,255,255,0.7); }
.section--dark .feature h3 { color: var(--df-orange); }
.section--dark .feature:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--df-orange);
}

/* ---------- Two-column ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.split--header {
  grid-template-columns: 1fr 1.5fr;
  align-items: end;
  margin-bottom: 3rem;
}
@media (max-width: 860px) {
  .split, .split--header { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Audience stack ----------
   A vertical typographic list of who-we-build-for. Reads like a magazine
   contributors list rather than a row of buttons (which the earlier bordered
   tag treatment was being mistaken for). Used wherever we list audiences. */
.audience-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--df-line);
}
.audience-stack li {
  position: relative;
  padding: 0.95rem 0 0.95rem 1.5rem;
  border-bottom: 1px solid var(--df-line);
  font-family: var(--display);
  color: var(--df-blue);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.audience-stack li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  background: var(--df-orange);
}
.section--dark .audience-stack {
  border-top-color: rgba(255,255,255,0.12);
}
.section--dark .audience-stack li {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.12);
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* ---------- Footer ---------- */
.footer {
  background: var(--df-blue-ink);
  color: rgba(255,255,255,0.65);
  padding: 5rem var(--gutter) 2rem;
  font-size: 0.9rem;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.footer h4 { color: #fff; margin-bottom: 1.2rem; font-size: 0.78rem; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 0.6rem; }
.footer a { color: rgba(255,255,255,0.65); }
.footer a:hover { color: var(--df-orange); }
.footer__brand { max-width: 32ch; }
.footer__brand p { margin-top: 1rem; font-size: 0.88rem; line-height: 1.6; }
.footer-bottom {
  max-width: var(--max);
  margin: 4rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
}

/* ---------- DragonQuote product styles ---------- */
.product-hero {
  background: linear-gradient(135deg, var(--df-blue-ink) 0%, var(--df-blue) 100%);
  position: relative;
  overflow: hidden;
}
.product-hero::before {
  content: '';
  position: absolute;
  top: -10%; right: -10%;
  width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,125,0,0.3), transparent 70%);
  filter: blur(60px);
  z-index: 1;
}

.step-list {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.step {
  position: relative;
  padding: 2rem 1.5rem 1.5rem;
  border-left: 3px solid var(--df-orange);
  background: rgba(255,255,255,0.02);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -1rem; left: -1.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--df-orange);
  background: var(--df-blue-ink);
  padding: 0 0.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.section--paper .step { background: rgba(60,70,95,0.04); }
.section--paper .step::before { background: var(--df-paper-warm); }
.step h3 { margin-bottom: 0.6rem; font-size: 1.2rem; color: var(--df-orange); }

/* ---------- DragonQuote mock widget ---------- */
.mock-widget {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
  overflow: hidden;
  max-width: 460px;
  margin: 0 auto;
  transform: rotate(-1.5deg);
  transition: transform 0.4s ease;
  position: relative;
  z-index: 2;
}
.mock-widget:hover { transform: rotate(0deg) translateY(-6px); }
.mock-widget__bar {
  background: var(--df-blue-ink);
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.mock-widget__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.mock-widget__dot:nth-child(2) { background: var(--df-orange); }
.mock-widget__body { padding: 2rem 1.8rem; }
.mock-widget__step {
  color: var(--df-orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.mock-widget h3 { color: var(--df-blue); font-size: 1.3rem; margin-bottom: 1.2rem; font-family: var(--display); text-transform: none; letter-spacing: 0; font-weight: 700; }
.mock-widget__options { display: flex; flex-direction: column; gap: 0.6rem; }
.mock-widget__opt {
  border: 2px solid var(--df-line);
  padding: 0.9rem 1.1rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--df-blue);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.mock-widget__opt:hover, .mock-widget__opt.selected {
  border-color: var(--df-orange);
  background: rgba(255,125,0,0.04);
}
.mock-widget__opt.selected::after { content: ' ✓'; color: var(--df-orange); font-weight: 800; }
.mock-widget__price {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--df-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--body);
}
.mock-widget__price span:first-child { color: var(--df-grey); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mock-widget__price span:last-child { color: var(--df-blue); font-size: 2rem; font-weight: 700; }

/* ---------- Form ---------- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.form__group { display: flex; flex-direction: column; }
.form__group--full { grid-column: 1 / -1; }
.form label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--df-blue);
  margin-bottom: 0.6rem;
}
.form input, .form textarea, .form select {
  border: 0;
  border-bottom: 2px solid var(--df-blue);
  background: transparent;
  padding: 0.8rem 0;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--df-blue);
  transition: border-color 0.2s ease;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 0;
  border-color: var(--df-orange);
}
.form textarea { min-height: 120px; resize: vertical; }
@media (max-width: 700px) { .form { grid-template-columns: 1fr; } }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.stat__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  color: var(--df-orange);
  line-height: 1;
  letter-spacing: 0;
}
.stat__label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  margin-top: 0.8rem;
}

/* ---------- Tech badges ---------- */
.tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}
.tech-pill {
  background: rgba(60,70,95,0.06);
  color: var(--df-blue);
  padding: 0.5rem 0.9rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.section--dark .tech-pill { background: rgba(255,255,255,0.08); color: #fff; }

/* Inline link arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--df-orange);
  margin-top: 1.5rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, gap 0.2s ease;
}
.arrow-link:hover { gap: 0.9rem; border-color: var(--df-orange); color: var(--df-orange); }

/* ============================================================
   DRAGON FLAME - animated brand icon (in the nav)
   ------------------------------------------------------------
   The icon's concentric, increasingly-rotated squares are meant
   to read as a flame from a dragon's mouth coming straight at
   the viewer. Three layered motions sell that idea:

     1. SWIRL - each blue layer rotates continuously at a
        different speed, alternating clockwise / anti-clockwise
        so the whole icon reads as a vortex of fire.
     2. BREATH - the icon as a whole scales gently (1 → 1.06 → 1)
        on a 5s cycle. This is the flame travelling forward.
     3. HEART - the inner orange core flickers (scale + opacity)
        on a faster 1.8s cycle. The fire's pulse.

   Motion periods are intentionally non-multiples (11 / 16 / 22 /
   28s for the swirl, 5s for the breath, 1.8s for the heart) so
   the composite never repeats the same frame - feels organic,
   not loopy.

   The animation only plays in the nav's DEFAULT state (over the
   dark hero). Once the nav scrolls onto the light background, the
   animation stops and the icon shrinks back to its standard size.
   ============================================================ */

/* Container for the inline animated icon SVG inside the nav. */
.nav-flame {
  display: inline-block;
  flex-shrink: 0;
  width: 60px;        /* default state: +50% over the standard 40px */
  height: 60px;
  margin-right: 0.8rem;
  vertical-align: middle;
  transition: width 0.25s ease, height 0.25s ease;
  will-change: transform;
  animation: dragon-breath 5s ease-in-out infinite;
}
.nav-flame svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Each square needs to spin around its own centre, not the SVG origin. */
.nav-flame .df-layer {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.nav-flame .df-layer--orange-outer { fill: #ff7d00; }
.nav-flame .df-layer--blue-1       { fill: #3c465f; opacity: 0.30; animation: spin-cw  28s linear infinite; }
.nav-flame .df-layer--blue-2       { fill: #3c465f; opacity: 0.30; animation: spin-ccw 22s linear infinite; }
.nav-flame .df-layer--blue-3       { fill: #3c465f; opacity: 0.35; animation: spin-cw  16s linear infinite; }
.nav-flame .df-layer--blue-4       { fill: #3c465f; opacity: 1;    animation: spin-ccw 11s linear infinite; }
.nav-flame .df-layer--orange-core  { fill: #ff7d00; animation: core-pulse 1.8s ease-in-out infinite; }

/* Scrolled state: light bg. The on-light .wordmark__img--light is Sarah's
   original full lockup, which already includes the icon - so hide the
   separately-rendered animated one entirely (and kill its animation, so
   it isn't quietly burning CPU off-screen). */
.nav.scrolled .nav-flame {
  display: none;
  animation: none;
}
.nav.scrolled .nav-flame .df-layer { animation: none; }

@keyframes dragon-breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes core-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(0.86); opacity: 0.7; }
}

/* Mobile: scale the default nav flame down a bit so it doesn't crowd the
   menu toggle. The scrolled rule above still applies. */
@media (max-width: 860px) {
  .nav-flame { width: 44px; height: 44px; }
}

/* Reduced-motion: stop all the spinning, leave the icon static. */
@media (prefers-reduced-motion: reduce) {
  .nav-flame,
  .nav-flame .df-layer { animation: none; }
}

/* Page hero (smaller than main hero) */
.page-hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: end;
  padding: 8rem var(--gutter) 4rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--df-blue-ink) 0%, var(--df-blue-deep) 100%);
  color: #fff;
}
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lead { color: rgba(255,255,255,0.75); margin-top: 1.5rem; }
.page-hero-content { position: relative; z-index: 5; max-width: var(--max); margin: 0 auto; width: 100%; }