:root {
      --ds-brown: #492613;
      --ds-orange: #CC7B32;
      --sunday: #DBC9AF;
      --cameo: #FCF5EB;
      --leaf: #4C6444;
      --forest: #133008;
      --fusion-red: #EF4848;
  }

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

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: 'Noto Sans', Arial, sans-serif;
      background: var(--cameo);
      color: var(--ds-brown);
      overflow-x: hidden;
  }

  /* ---- Scrollbar ---- */
  ::-webkit-scrollbar {
      width: 6px;
  }

  ::-webkit-scrollbar-track {
      background: var(--cameo);
  }

  ::-webkit-scrollbar-thumb {
      background: var(--ds-orange);
      border-radius: 3px;
  }

  /* ---- Animations ---- */
  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(40px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @keyframes fadeInLeft {
      from {
          opacity: 0;
          transform: translateX(-40px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @keyframes fadeInRight {
      from {
          opacity: 0;
          transform: translateX(40px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @keyframes scaleIn {
      from {
          opacity: 0;
          transform: scale(0.88);
      }

      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  @keyframes float {

      0%,
      100% {
          transform: translateY(0px);
      }

      50% {
          transform: translateY(-12px);
      }
  }

  @keyframes spin-slow {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  @keyframes shimmer {
      0% {
          background-position: -200% center;
      }

      100% {
          background-position: 200% center;
      }
  }

  @keyframes pulse-ring {
      0% {
          transform: scale(1);
          opacity: 1;
      }

      100% {
          transform: scale(1.6);
          opacity: 0;
      }
  }

  @keyframes marquee {
      from {
          transform: translateX(0);
      }

      to {
          transform: translateX(-50%);
      }
  }

  .animate-fade-up {
      animation: fadeInUp 0.8s ease forwards;
  }

  .animate-fade-left {
      animation: fadeInLeft 0.8s ease forwards;
  }

  .animate-fade-right {
      animation: fadeInRight 0.8s ease forwards;
  }

  .animate-scale-in {
      animation: scaleIn 0.8s ease forwards;
  }

  .animate-float {
      animation: float 4s ease-in-out infinite;
  }

  .animate-spin-slow {
      animation: spin-slow 12s linear infinite;
  }

  .animate-marquee {
      animation: marquee 28s linear infinite;
  }

  .opacity-0-init {
      opacity: 0;
  }

  /* ---- Visible class (triggered by Intersection Observer) ---- */
  .visible .animate-on-scroll {
      animation: fadeInUp 0.7s ease forwards;
  }

  /* ---- Hero ---- */
  .hero-bg {
      background: linear-gradient(135deg, var(--ds-brown) 0%, #3a1c0a 60%, #2b1307 100%);
      position: relative;
      overflow: hidden;
  }


  .hero-tagline {
      font-family: 'Roboto Serif', serif;
      font-style: italic;
      color: var(--ds-orange);
      letter-spacing: 0.04em;
  }

  .hero-title {
      font-family: 'Blinker', sans-serif;
      font-weight: 900;
      line-height: 1.05;
      color: #fff;
  }

  .hero-title span {
      background: linear-gradient(90deg, var(--ds-orange), #e8973d, var(--ds-orange));
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 3s linear infinite;
  }

  .hero-cta {
      background: var(--ds-orange);
      color: #fff;
      font-family: 'Noto Sans', sans-serif;
      font-weight: 700;
      border: 2px solid var(--ds-orange);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .hero-cta::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.15);
      transform: translateX(-100%);
      transition: transform 0.3s ease;
  }

  .hero-cta:hover::after {
      transform: translateX(0);
  }

  .hero-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(204, 123, 50, 0.45);
  }

  .hero-cta-outline {
      background: transparent;
      color: #fff;
      font-family: 'Noto Sans', sans-serif;
      font-weight: 600;
      border: 2px solid rgba(255, 255, 255, 0.5);
      transition: all 0.3s ease;
  }

  .hero-cta-outline:hover {
      border-color: var(--ds-orange);
      color: var(--ds-orange);
      transform: translateY(-2px);
  }

  /* ---- Rotating badge ---- */
  .rotating-badge {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: var(--ds-orange);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 40px;
      right: 40px;
      box-shadow: 0 8px 24px rgba(204, 123, 50, 0.4);
  }

  .rotating-badge svg {
      animation: spin-slow 10s linear infinite;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
  }

  /* ---- Marquee ---- */
  .marquee-wrapper {
      background: var(--ds-orange);
      overflow: hidden;
      white-space: nowrap;
  }

  .marquee-track {
      display: inline-block;
      animation: marquee 30s linear infinite;
  }

  .marquee-track:hover {
      animation-play-state: paused;
  }

  /* ---- Section headings ---- */
  .section-title {
      font-family: 'Blinker', sans-serif;
      font-weight: 700;
      color: var(--ds-brown);
  }

  .section-subtitle {
      font-family: 'Roboto Serif', serif;
      font-style: italic;
      color: var(--ds-orange);
  }

  .section-divider {
      width: 60px;
      height: 3px;
      background: var(--ds-orange);
      border-radius: 2px;
  }

  /* ---- Cards ---- */
  .menu-card {
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
      box-shadow: 0 4px 20px rgba(73, 38, 19, 0.08);
  }

  .menu-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(73, 38, 19, 0.15);
  }

  .menu-card:hover .menu-img-overlay {
      opacity: 1;
  }

  .menu-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(73, 38, 19, 0.8) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.35s ease;
      display: flex;
      align-items: flex-end;
      padding: 16px;
  }

  /* ---- Value cards ---- */
  .value-card {
      background: var(--cameo);
      border: 1.5px solid rgba(219, 201, 175, 0.8);
      border-radius: 18px;
      transition: all 0.3s ease;
  }

  .value-card:hover {
      background: #fff;
      border-color: var(--ds-orange);
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(73, 38, 19, 0.1);
  }

  .value-num {
      font-family: 'Blinker', sans-serif;
      font-weight: 900;
      font-size: 3.5rem;
      color: var(--ds-orange);
      opacity: 0.18;
      line-height: 1;
  }

  /* ---- Franchise ---- */
  .franchise-bg {
      background: linear-gradient(135deg, var(--ds-brown) 0%, #3a1c0a 100%);
  }

  /* ---- Form ---- */
  .form-input {
      background: rgba(255, 255, 255, 0.08);
      border: 1.5px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      border-radius: 10px;
      font-family: 'Noto Sans', sans-serif;
      transition: border-color 0.3s ease, background 0.3s ease;
      width: 100%;
  }

  .form-input::placeholder {
      color: rgba(255, 255, 255, 0.45);
  }

  .form-input:focus {
      outline: none;
      border-color: var(--ds-orange);
      background: rgba(255, 255, 255, 0.12);
  }

  .form-label {
      color: var(--sunday);
      font-family: 'Noto Sans', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
  }

  .form-submit {
      background: var(--ds-orange);
      color: #fff;
      font-family: 'Blinker', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: 0.04em;
      border-radius: 10px;
      transition: all 0.3s ease;
  }

  .form-submit:hover {
      background: #d98838;
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(204, 123, 50, 0.5);
  }

  /* ---- Testimonials ---- */
  .testimonial-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 4px 24px rgba(73, 38, 19, 0.07);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .testimonial-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(73, 38, 19, 0.13);
  }

  .quote-mark {
      font-family: 'Roboto Serif', serif;
      font-size: 5rem;
      line-height: 0.8;
      color: var(--ds-orange);
      opacity: 0.25;
  }

  /* ---- Nav ---- */
  .nav-scrolled {
      background: rgba(252, 245, 235, 0.97) !important;
      box-shadow: 0 2px 20px rgba(73, 38, 19, 0.1);
  }

  .nav-link {
      font-family: 'Noto Sans', sans-serif;
      font-weight: 600;
      color: #fff;
      transition: color 0.3s ease;
      position: relative;
  }

  .nav-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 0;
      height: 2px;
      background: var(--ds-orange);
      transition: width 0.3s ease;
  }

  .nav-link:hover::after {
      width: 100%;
  }

  .nav-link:hover {
      color: var(--ds-orange);
  }

  .nav-scrolled .nav-link {
      color: var(--ds-brown);
  }

  /* ---- Drawer ---- */
  #drawer {
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #drawer.open {
      transform: translateX(0);
  }

  #drawer-overlay {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
  }

  #drawer-overlay.open {
      opacity: 1;
      pointer-events: all;
  }

  /* ---- Image placeholders ---- */
  .img-placeholder {
      background: linear-gradient(135deg, var(--sunday) 0%, rgba(219, 201, 175, 0.5) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 8px;
  }

  .img-placeholder-dark {
      background: linear-gradient(135deg, rgba(73, 38, 19, 0.3) 0%, rgba(73, 38, 19, 0.15) 100%);
  }

  /* ---- Stats ---- */
  .stat-item {
      border-right: 1.5px solid rgba(219, 201, 175, 0.5);
  }

  .stat-item:last-child {
      border-right: none;
  }

  .stat-num {
      font-family: 'Blinker', sans-serif;
      font-weight: 900;
      color: var(--ds-brown);
  }

  /* ---- Footer ---- */
  footer {
      background: var(--ds-brown);
  }

  /* ---- Scroll progress ---- */
  #scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: var(--ds-orange);
      z-index: 9999;
      transition: width 0.1s linear;
      width: 0%;
  }

  /* ---- Section reveal animations ---- */
  .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal.in-view {
      opacity: 1;
      transform: translateY(0);
  }

  .reveal-left {
      opacity: 0;
      transform: translateX(-32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal-left.in-view {
      opacity: 1;
      transform: translateX(0);
  }

  .reveal-right {
      opacity: 0;
      transform: translateX(32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal-right.in-view {
      opacity: 1;
      transform: translateX(0);
  }

  .delay-100 {
      transition-delay: 0.1s;
  }

  .delay-200 {
      transition-delay: 0.2s;
  }

  .delay-300 {
      transition-delay: 0.3s;
  }

  .delay-400 {
      transition-delay: 0.4s;
  }

  .delay-500 {
      transition-delay: 0.5s;
  }



  /* ---- Pulse dot ---- */
  .pulse-dot {
      position: relative;
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #4ade80;
  }

  .pulse-dot::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid #4ade80;
      animation: pulse-ring 1.5s ease-out infinite;
  }

  /* ---- Sticky CTA bar ---- */
  #sticky-bar {
      transform: translateY(100%);
      transition: transform 0.4s ease;
  }

  #sticky-bar.visible {
      transform: translateY(0);
  }

  @media (max-width: 640px) {
      .hero-title {
          font-size: 2.4rem;
      }

      .rotating-badge {
          width: 72px;
          height: 72px;
          display: none;
      }
  }

  select.form-input option {
      background: #3a1c0a;
      color: #fff;
  }