:root {
      --pumpkin:       #E8621A;
      --pumpkin-deep:  #C04A0A;
      --pumpkin-light: #F5924A;
      --gold:          #D4A017;
      --gold-light:    #F0C84A;
      --cream:         #FDF6EC;
      --bark:          #3D2B1F;
      --leaf:          #5A7A3A;
      --warm-shadow:   rgba(61, 43, 31, 0.15);
    }

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

    body {
    /*  background-color: var(--cream); */
      color: var(--bark);
      font-family: 'Lora', serif;
      overflow-x: hidden;
    }

    /* -- HERO ----------------------------------------------- */
    .hero {
      position: relative;
      min-height: 50vh;   /* 92vh; */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: radial-gradient(ellipse at 60% 40%, #3D1A00 0%, #1A0A00 60%, #0D0500 100%);
    }

    /* Bokeh lights */
    .bokeh {
      position: absolute; inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .bokeh span {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      animation: flicker var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
    }
    @keyframes flicker {
      0%, 100% { opacity: 0; transform: scale(1); }
      50%       { opacity: var(--bright, 0.6); transform: scale(1.15); }
    }

    .hero-inner {
      position: relative; z-index: 2;
      text-align: center;
      padding: 3rem 1.5rem;
      max-width: 800px;
    }

    .hero-eyebrow {
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 1.25rem; /*  0.8rem; */
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 1.2rem;
      opacity: 0;
      animation: fadeUp 0.8s 0.3s forwards;
    }

    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.6rem, 7vw, 5rem);
      font-weight: 900;
      line-height: 1.08;
      color: #fff;
      margin-bottom: 1.4rem;
      opacity: 0;
      animation: fadeUp 0.9s 0.5s forwards;
    }

    .hero h1 em {
      font-style: italic;
      color: var(--pumpkin-light);
    }

    .hero-sub {
      font-size: clamp(1rem, 2.2vw, 1.50rem);
      color: rgba(255,255,255,0.78);
      line-height: 1.7;
      max-width: 560px;
      margin: 0 auto 2.2rem;
      opacity: 0;
      animation: fadeUp 0.9s 0.75s forwards;
    }

    .hero-cta {
      display: inline-block;
      background: linear-gradient(135deg, var(--pumpkin), var(--pumpkin-deep));
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 1rem;
      letter-spacing: 0.06em;
      padding: 1rem 2.4rem;
      border-radius: 60px;
      text-decoration: none;
      box-shadow: 0 8px 32px rgba(232, 98, 26, 0.45);
      transition: transform 0.2s, box-shadow 0.2s;
      opacity: 0;
      animation: fadeUp 0.9s 1s forwards;
    }
    .hero-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(232,98,26,0.6); }

    /* Glowing pumpkin SVG illustration */
    .pumpkin-art {
      position: absolute;
      bottom: -30px; right: -60px;
      width: min(480px, 55vw);
      opacity: 0.22;
      z-index: 1;
      filter: blur(1px);
      animation: gentleFloat 6s ease-in-out infinite;
    }
    @keyframes gentleFloat {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-14px); }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* -- INTRO BAND ----------------------------------------- */
    .intro-band {
      background: var(--pumpkin);
      color: #fff;
      text-align: center;
      padding: 1.1rem 2rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 75%; /* 0.95rem; */
      letter-spacing: 0.04em;
    }
    .intro-band strong { font-weight: 500; }

    /* -- SECTION BASE --------------------------------------- */
    section { padding: 5rem 1.5rem; }

   /* .container { max-width: 860px; margin: 0 auto; }
    .container-wide { max-width: 1100px; margin: 0 auto; } */

    h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.9rem, 4vw, 2.8rem);
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 1.2rem;
      color: var(--bark);
    }

    h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 0.6rem;
      color: var(--pumpkin-deep);
    }

    p {
      font-size: 1.25rem;
      line-height: 1.85;
      margin-bottom: 1.1rem;
      color: #4A3020;
    }

    .section-label {
      font-family: 'DM Sans', sans-serif;
      font-size: 1.25rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--pumpkin);
      margin-bottom: 0.6rem;
    }

    /* -- WHY YOU'LL LOVE IT --------------------------------- */
    .love-section { background: #fff; }

    .love-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
    }

    .love-card {
      background: var(--cream);
      border-radius: 20px;
      padding: 2rem 1.6rem;
      border-top: 4px solid var(--pumpkin);
      box-shadow: 0 4px 20px var(--warm-shadow);
      transition: transform 0.2s;
    }
    .love-card:hover { transform: translateY(-5px); }

    .love-icon {
      font-size: 2.4rem;
      margin-bottom: 0.8rem;
      display: block;
    }

    /* -- GLOW USES ------------------------------------------ */
    .uses-section {
      background: linear-gradient(160deg, #2A1200 0%, #3D1A00 100%);
      color: #fff;
    }
    .uses-section .section-label { color: var(--gold-light); }
    .uses-section h2 { color: #fff; }
    .uses-section p  { color: rgba(255,255,255,0.78); }

    .uses-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.6rem;
      margin-top: 3rem;
    }

    .use-item {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 1.8rem 1.5rem;
      backdrop-filter: blur(6px);
      transition: background 0.2s;
    }
    .use-item:hover { background: rgba(255,255,255,0.11); }

    .use-item .use-icon { font-size: 2rem; margin-bottom: 0.7rem; display: block; }
    .use-item h3 { color: var(--gold-light); font-size: 1.1rem; margin-bottom: 0.4rem; }
    .use-item p  { font-size: 0.95rem; color: rgba(255,255,255,0.72); margin: 0; line-height: 1.6; }

    /* -- KIT CONTENTS --------------------------------------- */
    .kit-section { background: var(--cream); }

    .kit-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      margin-top: 2rem;
    }
    @media (max-width: 640px) { .kit-wrap { grid-template-columns: 1fr; gap: 2.5rem; } }

    .kit-list {
      list-style: none;
    }
    .kit-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.9rem;
      padding: 0.85rem 0;
      border-bottom: 1px dashed rgba(61,43,31,0.15);
      font-size: 1.25rem;
      line-height: 1.5;
      color: #4A3020;
    }
    .kit-list li:last-child { border-bottom: none; }
    .kit-list .check {
      width: 22px; height: 22px;
      background: var(--pumpkin);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      color: #fff;
      font-size: 0.7rem;
      margin-top: 1px;
    }

    .kit-visual {
      background: linear-gradient(145deg, #E8621A22, #D4A01733);
      border-radius: 24px;
      border: 2px solid rgba(232,98,26,0.2);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem 2rem;
      text-align: center;
      min-height: 300px;
    }

    .kit-visual .big-emoji { font-size: 5rem; margin-bottom: 1rem; animation: gentleFloat 4s ease-in-out infinite; }
    .kit-visual p { font-size: 0.95rem; color: var(--pumpkin-deep); font-style: italic; margin: 0; }

    /* -- CRAFT TOGETHER ------------------------------------- */
    .together-section { background: #fff; }

    .together-quote {
      background: linear-gradient(135deg, var(--pumpkin), var(--gold));
      color: #fff;
      border-radius: 20px;
      padding: 2.5rem 2.5rem;
      margin: 2.5rem 0;
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.2rem, 2.5vw, 1.6rem);
      font-style: italic;
      line-height: 1.5;
      text-align: center;
      box-shadow: 0 10px 40px rgba(232,98,26,0.3);
    }

    .together-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.4rem;
      margin-top: 2.5rem;
    }

    .together-card {
      border-radius: 16px;
      padding: 1.5rem;
      text-align: center;
      background: var(--cream);
      border: 1px solid rgba(232,98,26,0.15);
    }
    .together-card .emoji { font-size: 2rem; display: block; margin-bottom: 0.6rem; }
    .together-card h3 { font-size: 1rem; color: var(--bark); margin-bottom: 0.3rem; }
    .together-card p  { font-size: 0.88rem; color: #6A4A30; margin: 0; line-height: 1.55; }

    /* -- CTA SECTION ---------------------------------------- */
    .cta-section {
      background: radial-gradient(ellipse at center, #3D1A00, #1A0A00);
      text-align: center;
      padding: 6rem 1.5rem;
    }
    .cta-section h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
    .cta-section p  { color: rgba(255,255,255,0.72); font-size: 1.25rem; max-width: 520px; margin: 0 auto 2.5rem; }

    .cta-btn-large {
      display: inline-block;
      background: linear-gradient(135deg, var(--pumpkin-light), var(--pumpkin-deep));
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 1.15rem;
      letter-spacing: 0.05em;
      padding: 1.2rem 3rem;
      border-radius: 60px;
      text-decoration: none;
      box-shadow: 0 10px 40px rgba(232,98,26,0.5);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .cta-btn-large:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 18px 50px rgba(232,98,26,0.65); }

    .cta-note {
      margin-top: 1.4rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.99rem;
      color: rgba(255,255,255,0.45);
    }

    /* -- FOOTER --------------------------------------------- */
    footer {
      background: var(--bark);
      color: rgba(255,255,255,0.45);
      text-align: center;
      padding: 1.8rem 1.5rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      letter-spacing: 0.04em;
    }

    /* -- DIVIDER -------------------------------------------- */
    .divider {
      text-align: center;
      font-size: 1.4rem;
      letter-spacing: 0.5em;
      color: var(--pumpkin);
      padding: 0.5rem 0 0;
      opacity: 0.4;
    }