/* ==========================================================================
   Doodle Magic — website
   One language: Fraunces (display) / Nunito (body) / Caveat (handwritten),
   warm paper, coral CTAs, washi tape, polaroids, dashed stitching.
   Purple appears ONLY in the 3D/magic section.
   ========================================================================== */

:root {
  --paper: #FDF3E3;
  --paper-warm: #F9E9D2;
  --card: #FFFDF7;
  --ink: #2B2622;
  --ink-soft: #6E6459;
  --coral: #FF6B6B;
  --coral-2: #FF8E53;
  --orange-cta: #F59E0B;
  --purple: #7C3AED;
  --purple-2: #8B5CF6;
  --night-1: #171335;
  --night-2: #2A1E52;
  --night-card: #221B45;
  --tape: rgba(255, 215, 72, 0.62);
  --stitch: rgba(205, 130, 70, 0.55);
  --shadow-soft: 0 14px 34px rgba(96, 58, 26, 0.14);
  --shadow-lift: 0 22px 48px rgba(96, 58, 26, 0.2);
  --radius: 22px;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html { scroll-behavior: smooth; background: #FDF3E3; }

body {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  line-height: 1.65;
}

/* paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.33 0 0 0 0 0.2 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

h1, h2 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
}

h3 { font-family: "Fraunces", serif; font-weight: 800; letter-spacing: -0.01em; }

.eyebrow {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  color: var(--ink-soft);
  line-height: 1.2;
}

.section-sub {
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  max-width: 34em;
  margin-inline: auto;
}

.section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: 10px;
}

.section-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }

section { position: relative; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-crayon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  background-image: url("assets/start_button.webp");
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(255, 107, 107, 0.38));
  transition: transform 0.28s var(--ease-spring), filter 0.28s ease;
  text-shadow: 0 1px 6px rgba(140, 50, 20, 0.3);
  white-space: nowrap;
}

.btn-crayon:hover { transform: translateY(-2px) scale(1.03); filter: drop-shadow(0 14px 22px rgba(255, 107, 107, 0.48)); }
.btn-crayon:active { transform: scale(0.93); }
.btn-crayon.big { padding: 18px 40px; font-size: 1.14rem; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border: 2.5px dashed var(--stitch);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  background: rgba(255, 253, 247, 0.6);
  transition: transform 0.28s var(--ease-spring), background 0.2s ease, border-color 0.2s ease;
}

.btn-ghost:hover { transform: translateY(-2px); background: var(--card); border-color: var(--coral); }
.btn-ghost:active { transform: scale(0.94); }

.store-badge { display: inline-block; transition: transform 0.28s var(--ease-spring); }
.store-badge img { height: 56px; width: auto; }
.store-badge:hover { transform: translateY(-2px) scale(1.03); }
.store-badge:active { transform: scale(0.94); }
.big-badge img { height: 64px; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px dashed var(--coral);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 243, 227, 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transition: box-shadow 0.3s ease;
}

.nav.scrolled { box-shadow: 0 8px 30px rgba(96, 58, 26, 0.1); }

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-logo img { height: 58px; width: auto; transition: transform 0.28s var(--ease-spring); }
.nav-logo:hover img { transform: scale(1.05) rotate(-2deg); }

.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
}

.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.98rem;
  position: relative;
  padding: 4px 2px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--coral), var(--coral-2));
  transition: right 0.25s ease;
}

.nav-links a:hover::after { right: 0; }

.nav-cta { padding: 11px 24px; font-size: 0.95rem; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { overflow: hidden; }

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 84px) 24px 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* watercolor washes — static ambience, kept cheap on purpose */
.wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.wash-a { width: 560px; height: 480px; top: -140px; right: -120px; background: rgba(216, 191, 245, 0.55); }
.wash-b { width: 520px; height: 460px; bottom: -180px; left: -150px; background: rgba(255, 200, 160, 0.5); }
.wash-c { width: 380px; height: 350px; top: 30%; left: 38%; background: rgba(255, 209, 220, 0.42); }

.float-spark { position: absolute; pointer-events: none; }
.spark-1 { width: 54px; top: 16%; left: 46%; rotate: -8deg; }
.spark-2 { width: 38px; bottom: 20%; left: 6%; rotate: 10deg; }
.float-wand { position: absolute; width: 110px; top: 9%; right: 4%; pointer-events: none; transform: rotate(18deg); }

.hero-copy { display: grid; gap: 18px; justify-items: start; }

.hero-copy h1 { font-size: clamp(2.5rem, 4.3vw, 3.55rem); text-wrap: balance; }

.magic-word { position: relative; white-space: nowrap; }

.crayon-line {
  position: absolute;
  left: -2%;
  bottom: -0.18em;
  width: 104%;
  height: 0.34em;
  overflow: visible;
}

.crayon-line path {
  fill: none;
  stroke: var(--coral);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.85;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: draw 1s ease-out 0.5s forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 30em;
}

.hero-sub strong { color: var(--ink); }

.hero-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.hero-note {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink-soft);
}

/* --- transformation demo --- */

.hero-demo {
  position: relative;
  display: block;
  padding-top: 10px;
}

.hero-demo .demo-doodle {
  position: absolute;
  z-index: 2;
  width: clamp(128px, 11.5vw, 168px);
  top: 0;
  left: 8px;
  animation: settle-l 0.9s var(--ease-spring) both;
}

@keyframes settle-l { from { transform: translateY(-14px) rotate(2deg); opacity: 0; } }

.demo-arrow {
  position: absolute;
  z-index: 3;
  width: 84px;
  top: 46px;
  left: clamp(150px, 14vw, 196px);
  transform: rotate(12deg);
}

.arrow-path, .arrow-head, .mini-arrow path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 13;
  opacity: 0.75;
}

.demo-result {
  margin-top: clamp(120px, 10vw, 146px);
  margin-left: auto;
  margin-right: 2%;
  background: var(--card);
  border-radius: 26px;
  padding: 14px;
  box-shadow: var(--shadow-lift);
  rotate: 1.6deg;
  width: min(372px, 80%);
}

.demo-stage {
  position: relative;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  background: #F4E9DB;
}

.demo-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.04;
  transition: opacity 0.5s ease, scale 0.7s ease;
}

.demo-media.active { opacity: 1; scale: 1; }

.demo-sparkles { position: absolute; inset: 0; pointer-events: none; }

.demo-sparkles img {
  position: absolute;
  width: 34px;
  animation: pop 0.9s ease-out forwards;
}

@keyframes pop {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.25) rotate(40deg) translateY(-26px); opacity: 0; }
}

.demo-chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 14px 4px 6px;
  flex-wrap: wrap;
}

.chip {
  border: 2.5px dashed var(--stitch);
  background: #FFF9EE;
  color: var(--ink);
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.28s var(--ease-spring), background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.chip:hover { transform: translateY(-2px); }
.chip:active { transform: scale(0.9); }

.chip.active {
  background: linear-gradient(135deg, var(--coral), var(--coral-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
}

.demo-note {
  margin-top: 14px;
  font-family: "Caveat", cursive;
  font-size: 1.3rem;
  color: var(--ink-soft);
  rotate: -1.5deg;
  text-align: center;
}

/* ==========================================================================
   Polaroids & tape
   ========================================================================== */

.polaroid {
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px 8px;
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease;
}

.polaroid img, .polaroid video {
  border-radius: 8px;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.polaroid-caption {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 1.22rem;
  color: var(--ink);
  text-align: center;
  padding: 6px 2px 2px;
  line-height: 1.1;
}

.tilt-l { rotate: -2.4deg; }
.tilt-r { rotate: 2.2deg; }

.tape {
  position: absolute;
  top: -13px;
  left: 50%;
  translate: -50% 0;
  rotate: -5deg;
  width: 92px;
  height: 27px;
  background: linear-gradient(100deg, var(--tape), rgba(255, 205, 90, 0.5));
  clip-path: polygon(2% 8%, 98% 0%, 100% 88%, 96% 100%, 3% 94%, 0% 82%);
  box-shadow: 0 2px 6px rgba(120, 80, 20, 0.12);
  z-index: 2;
}

/* ==========================================================================
   Style marquee
   ========================================================================== */

.styles { padding: clamp(70px, 9vw, 110px) 0 clamp(60px, 8vw, 90px); }

.styles .section-head { margin-bottom: 44px; }

.marquee {
  overflow: hidden;
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: scroll-l 42s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.track-copy { display: contents; }

.marquee[data-dir="right"] .marquee-track { animation-name: scroll-r; }
.marquee.running .marquee-track { animation-play-state: running; }
.marquee.running:hover .marquee-track { animation-play-state: paused; }

@keyframes scroll-l { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 10px)); } }
@keyframes scroll-r { from { transform: translateX(calc(-50% - 10px)); } to { transform: translateX(0); } }

.sticker {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  background: #FFF9EE;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(96, 58, 26, 0.1);
  padding: 18px 22px 14px;
  min-width: 132px;
}

.sticker::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2.5px dashed var(--stitch);
  border-radius: 14px;
  pointer-events: none;
}

.sticker:nth-child(odd) { rotate: -1.6deg; }
.sticker:nth-child(even) { rotate: 1.4deg; }

.sticker img { height: 62px; width: auto; }

.sticker span {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--ink);
}

.badge-3d {
  position: absolute;
  top: -8px;
  right: -6px;
  font-style: normal;
  font-weight: 900;
  font-size: 0.72rem;
  color: #fff;
  background: linear-gradient(135deg, var(--purple-2), var(--purple));
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.4);
}

/* ==========================================================================
   How it works
   ========================================================================== */

.how { padding: clamp(70px, 9vw, 120px) 24px; background: var(--paper-warm); }

.how .section-head { margin-bottom: 60px; }

.steps {
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: start;
}

.step {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  position: relative;
  padding-top: 16px;
}

.step .polaroid { width: min(260px, 90%); }

.step-num {
  position: absolute;
  top: 0;
  left: 12%;
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--coral-2));
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(255, 107, 107, 0.45);
  rotate: -6deg;
}

.step h3 { font-size: 1.45rem; margin-top: 8px; }

.step p { color: var(--ink-soft); max-width: 26em; }

.step-arrow { width: 128px; margin-top: 118px; }
.step-arrow.flip { margin-top: 152px; }
.step-arrow .arrow-path, .step-arrow .arrow-head { stroke-width: 5.5; opacity: 0.8; }

.style-trio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  background: #FBF2E4;
  border-radius: 8px;
  padding: 12px;
}

.style-trio img {
  width: 31%;
  aspect-ratio: auto;
  border-radius: 0;
}

.style-trio img:nth-child(1) { rotate: -7deg; }
.style-trio img:nth-child(3) { rotate: 7deg; }

/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery { padding: clamp(70px, 9vw, 120px) 24px; }

.gallery .section-head { margin-bottom: 60px; position: relative; }

.artby {
  width: 150px;
  margin: 0 auto 6px;
  rotate: -3deg;
  opacity: 0.85;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(96, 58, 26, 0.14);
}

.gallery-grid {
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 36px);
}

.art-card {
  position: relative;
  border-radius: var(--radius);
  cursor: pointer;
}

.art-result {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
}

.art-card:hover .art-result, .art-card:focus-visible .art-result {
  transform: scale(1.02);
  box-shadow: var(--shadow-lift);
}

.art-doodle {
  position: absolute;
  width: 34%;
  bottom: 40px;
  left: -10px;
  z-index: 2;
  transition: transform 0.4s var(--ease-spring), width 0.4s var(--ease-spring);
  transform-origin: bottom left;
}

.art-doodle .polaroid-caption { font-size: 0.98rem; padding-top: 4px; }

.art-card:nth-child(even) .art-doodle { left: auto; right: -10px; transform-origin: bottom right; }

.art-card:hover .art-doodle, .art-card.peek .art-doodle, .art-card:focus-visible .art-doodle {
  transform: scale(1.55) rotate(0.5deg);
}

.art-label {
  margin-top: 12px;
  text-align: center;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink);
}

/* ==========================================================================
   3D & animation — the night pocket (purple lives here only)
   ========================================================================== */

.depth { background: linear-gradient(180deg, var(--night-1), var(--night-2)); }

.torn { display: block; width: 100%; height: 44px; }
.torn path { fill: var(--paper); }
.torn-top { transform: translateY(-1px) scaleY(-1); }
.torn-top path { fill: var(--paper); }
.torn-bottom path { fill: var(--paper-warm); }
.torn-bottom { transform: translateY(1px) scaleY(-1); }

.depth-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) 24px;
  position: relative;
}

/* starfield */
.depth-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(2px 2px at 8% 20%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 22% 68%, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(2px 2px at 36% 12%, rgba(216,191,245,0.8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 52% 44%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 68% 8%, rgba(255,255,255,0.75) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 78% 60%, rgba(216,191,245,0.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 30%, rgba(255,255,255,0.65) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 14% 88%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 88% 84%, rgba(216,191,245,0.6) 50%, transparent 51%);
  opacity: 0.85;
}

.dark-head { margin-bottom: 54px; }
.dark-head h2 { color: #FFF7EC; }
.dark-head .eyebrow { color: #C9B8F0; }
.dark-head .section-sub { color: rgba(255, 247, 236, 0.72); }

.depth-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 44px);
}

.depth-card {
  position: relative;
  background: var(--night-card);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 26px;
  padding: clamp(18px, 2.4vw, 28px);
  display: grid;
  gap: 12px;
  box-shadow: 0 24px 70px rgba(20, 10, 60, 0.55);
}

.pill-purple {
  position: absolute;
  top: -16px;
  left: 26px;
  z-index: 2;
  background: linear-gradient(135deg, var(--purple-2), var(--purple));
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
  padding: 6px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.55);
}

.depth-media {
  border-radius: 18px;
  overflow: hidden;
  background: #131028;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.2), 0 0 60px rgba(124, 58, 237, 0.25);
}

.depth-media video { width: 100%; aspect-ratio: 1; object-fit: cover; }

.depth-card h3 { color: #FFF7EC; font-size: 1.5rem; }
.depth-card p { color: rgba(255, 247, 236, 0.72); }

/* ==========================================================================
   Real figures
   ========================================================================== */

.figures { background: var(--paper-warm); padding: clamp(70px, 9vw, 120px) 24px; }

.figures-inner {
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}

.figures-visual { position: relative; min-height: 540px; }

.figures-video {
  width: min(360px, 70%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.figures-photo {
  width: min(235px, 48%);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.figures-photo img { aspect-ratio: 3 / 4; }

.figures-copy { display: grid; gap: 16px; justify-items: start; }

.figures-copy h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }

.figures-copy .section-sub { margin-inline: 0; }

.check-list { list-style: none; display: grid; gap: 12px; margin-top: 4px; }

.check-list li {
  padding-left: 38px;
  position: relative;
  color: var(--ink);
  font-weight: 700;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34C08B, #2FB47C);
  box-shadow: 0 4px 10px rgba(47, 180, 124, 0.4);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 10px;
  height: 5px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
  border-radius: 1px;
}

.paint-callout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  background: var(--card);
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: var(--shadow-soft);
  rotate: -1.2deg;
}

.paint-callout::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(205, 130, 70, 0.4);
  border-radius: 14px;
  pointer-events: none;
}

.paint-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.paint-strip img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 12px;
}

.paint-copy { display: grid; gap: 4px; }

.paint-copy h3 { font-size: 1.28rem; }

.paint-copy p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }

.mini-arrow { width: 46px; flex: none; }

.figures-cta { display: grid; gap: 10px; margin-top: 12px; justify-items: start; }

.price-note {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink-soft);
  rotate: -1deg;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { padding: clamp(70px, 9vw, 120px) 24px; }

.faq .section-head { margin-bottom: 44px; }

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.faq-list details {
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(96, 58, 26, 0.09);
  padding: 4px 22px;
  position: relative;
  transition: box-shadow 0.25s ease;
}

.faq-list details::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px dashed transparent;
  border-radius: 13px;
  pointer-events: none;
  transition: border-color 0.25s ease;
}

.faq-list details[open]::before { border-color: rgba(205, 130, 70, 0.35); }
.faq-list details:hover { box-shadow: 0 12px 30px rgba(96, 58, 26, 0.14); }

.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 800;
  font-size: 1.06rem;
  padding: 16px 2px;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-plus {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--coral-2));
  position: relative;
  transition: transform 0.3s var(--ease-spring);
  box-shadow: 0 5px 12px rgba(255, 107, 107, 0.35);
}

.faq-plus::before, .faq-plus::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 2px;
}

.faq-plus::before { width: 14px; height: 3.2px; top: 13.4px; left: 8px; }
.faq-plus::after { width: 3.2px; height: 14px; top: 8px; left: 13.4px; transition: transform 0.3s ease; }

details[open] .faq-plus { transform: rotate(90deg); }
details[open] .faq-plus::after { transform: scaleY(0); }

.faq-list details p {
  color: var(--ink-soft);
  padding: 0 2px 18px;
  max-width: 56em;
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  background:
    radial-gradient(120% 160% at 50% -30%, rgba(255, 142, 83, 0.22), transparent 60%),
    radial-gradient(90% 130% at 12% 110%, rgba(216, 191, 245, 0.35), transparent 60%),
    var(--paper-warm);
  padding: clamp(80px, 10vw, 130px) 24px;
  overflow: hidden;
}

.spark-3 { width: 46px; top: 18%; left: 16%; }
.spark-4 { width: 60px; bottom: 16%; right: 14%; animation-delay: -2.5s; }

.cta-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 60px);
}

.cta-copy { display: grid; gap: 16px; justify-items: center; text-align: center; }

.cta-copy h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }

.cta-figure {
  width: clamp(120px, 16vw, 200px);
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
}

.cta-figure-l { rotate: -6deg; }
.cta-figure-r { rotate: 6deg; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--paper);
  border-top: 2px dashed rgba(205, 130, 70, 0.3);
  padding: 46px 24px 30px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}

.footer-brand { display: grid; gap: 4px; justify-items: start; }

.footer-tag { font-family: "Caveat", cursive; font-size: 1.3rem; color: var(--ink-soft); }

.footer-links { display: flex; gap: 26px; }

.footer-links a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.footer-links a:hover { color: var(--coral); }

.footer-note {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-top: 34px;
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s var(--ease-spring); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1020px) {
  .steps { grid-template-columns: 1fr; justify-items: center; gap: 34px; }
  .step-arrow { display: none; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 30px; }
  .hero-copy { justify-items: center; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .float-wand { display: none; }
  .depth-panels { grid-template-columns: 1fr; }
  .figures-inner { grid-template-columns: 1fr; }
  .figures-visual { min-height: 0; display: grid; gap: 20px; justify-items: center; }
  .figures-video, .figures-photo { position: static; width: min(380px, 88%); }
  .figures-copy { justify-items: center; text-align: center; }
  .figures-copy .section-sub { margin-inline: auto; }
  .check-list li { text-align: left; }
  .figures-cta { justify-items: center; }
  .cta-figure { display: none; }
}

@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; max-width: 420px; }
  .demo-doodle { width: 124px; }
  .demo-arrow { top: 84px; }
  .paint-callout { flex-direction: column; align-items: center; text-align: center; padding: 20px 18px; }
  .paint-strip img { width: 72px; height: 72px; }
  .nav-inner { gap: 12px; }
  .nav-logo img { height: 48px; }
  .nav-cta { padding: 10px 18px; font-size: 0.88rem; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wash, .float-spark, .float-wand, .depth-inner::before { animation: none !important; }
  .marquee-track { animation-duration: 160s; }
  .crayon-line path { animation: none; stroke-dashoffset: 0; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .demo-media { transition: opacity 0.2s ease; scale: 1; }
}