:root{
      --bg: #0e0f12;
      --panel: #12141a;
      --text: #1b1f2a;
      --muted: #5b6476;
      --line: rgba(27,31,42,.10);
      --white: #ffffff;
      --alt: #faf7f4;
      --accent: #c61f2a;
      --gold: #c9a46a;
      --radius: 16px;
      --shadow: 0 18px 50px rgba(0,0,0,.10);
    }
    
    *{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }
    body{
      margin:0;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      line-height: 1.6;
      color: var(--text);
      background: var(--white);
    }
    a{ color: inherit; text-decoration: none; }
    .container{
      width: min(1120px, calc(100% - 40px));
      margin-inline: auto;
    }
    
/* Full screen preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Circle wrapper */
.logo-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Spinning circle */
.logo-wrapper::before {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border: 4px solid #eee;
  border-top: 4px solid #d4af37; /* accent color */
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
border-width: 3px;


}

/* Logo */
.preloader-logo {
  width: 80px;
  height: auto;
  z-index: 2;
}

/* Animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}
    /* Top Bar */
    .topbar{
      background: #0b0c10;
      color: rgba(255,255,255,.88);
      font-size: 14px;
      padding: 10px 0;
    }
    .topbar__inner{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .topbar__left{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .topbar__item{ display: flex; align-items: center; gap: 8px; }
    .topbar__item i{ color: rgba(255,255,255,.78); }
    .topbar__item a{ color: rgba(255,255,255,.88); }
    .topbar__sep{ color: rgba(255,255,255,.25); }
    
    .social{
      display: inline-flex;
      width: 30px; height: 30px;
      align-items: center; justify-content: center;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      color: rgba(255,255,255,.92);
      font-size: 14px;
      transition: all 0.2s;
    }
    .social:hover{
      border-color: rgba(255,255,255,.35);
      transform: translateY(-1px);
    }
    
    /* Header */
    .header{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.90);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .header__inner{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      gap: 18px;
    }
    .brand{
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }
    .brand-logo{
      display: block;
      height: 60px;
      width: auto;
    }
    
    .nav{
      display: flex;
      align-items: center;
      gap: 22px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .nav a{
      font-size: 15px;
      color: #2a3142;
      opacity: .9;
      font-weight: 500;
      transition: opacity 0.2s;
    }
    .nav a:hover{ opacity: 1; color: var(--accent); }
    .nav__cta{
      padding: 10px 20px;
      border-radius: 999px;
      background: var(--accent);
      color: white !important;
      box-shadow: 0 12px 30px rgba(198,31,42,.22);
      font-weight: 600 !important;
    }
    
    /* Mobile Menu Button */
    .mobile-menu-btn{
      display: none;
      padding: 8px;
      background: none;
      border: none;
      cursor: pointer;
      color: #2a3142;
    }
    .mobile-menu-btn svg{
      width: 24px;
      height: 24px;
    }
    
    /* Mobile Navigation */
    .mobile-nav{
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #0b0c10;
      box-shadow: 0 10px 40px rgba(0,0,0,.3);
      z-index: 100;
      padding: 20px;
    }
    .mobile-nav.active{
      display: block;
    }
    .mobile-nav a{
      display: block;
      padding: 12px 0;
      color: white;
      font-size: 15px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .mobile-nav .nav__cta{
      margin-top: 16px;
      text-align: center;
      padding: 14px;
      font-size: 18px;
      font-weight: bold;
    }
    
    /* Hero Slider */
    .hero{
      position: relative;
      height: calc(100vh - 120px);
      min-height: 580px;
      overflow: hidden;
      background: #0b0c10;
    }
    .hero-track{
      height: 100%;
      width: 300vw;
      display: flex;
      transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
    }
    .slide{
      position: relative;
      width: 100vw;
      height: 100%;
      display: flex;
      align-items: center;
      color: rgba(255,255,255,.92);
      background-size: cover;
      background-position: center;
    }
    .slide-overlay{
      position: absolute;
      inset: 0;
      background: radial-gradient(60% 70% at 50% 40%, rgba(0,0,0,.25), rgba(0,0,0,.75)),
                  linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.7));
    }
    /* Placeholder background images - user should replace with real ones */
    .slide--1{ background-image: url("images/slide1.jpg"); }
    .slide--2{ background-image: url("images/slide2.jpg"); }
    .slide--3{ background-image: url("images/slide3.jpg"); }
    
    .slide-content{
      position: relative;
      z-index: 2;
      padding: 56px 0;
      max-width: 820px;
      text-align: center;
      margin-inline: auto;
    }
    .slide-kicker{
      margin: 0 0 10px 0;
      font-family: "Cormorant Garamond", serif;
      letter-spacing: .20em;
      text-transform: uppercase;
      color: rgba(255,255,255,.82);
      font-size: 15px;
    }
    .slide-title{
      margin: 0 0 12px 0;
      font-family: "Cormorant Garamond", serif;
      font-weight: 700;
      font-size: clamp(38px, 5vw, 70px);
      line-height: 1.05;
    }
    .slide-text{
      margin: 0 auto 22px auto;
      max-width: 62ch;
      color: rgba(255,255,255,.86);
      font-size: 16px;
    }
    .slide-actions{
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    
    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 28px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: var(--accent);
      color: white;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 14px 34px rgba(198,31,42,.22);
      transition: all 0.2s;
      text-decoration: none;
    }
    .btn:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(198,31,42,.30);
    }
    .btn-ghost{
      background: transparent;
      border-color: rgba(255,255,255,.35);
      color: rgba(255,255,255,.95);
      box-shadow: none;
    }
    .btn-ghost:hover{
      background: rgba(255,255,255,.1);
      border-color: white;
    }
    
    /* Dots */
    .hero-dots{
      position: absolute;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 10;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
    }
    .dot{
      width: 11px; height: 11px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.55);
      cursor: pointer;
      opacity: .9;
      transition: all 0.2s;
    }
    .dot.active{
      background: var(--accent);
      border-color: var(--accent);
    }
    
    /* Sections */
    .section{
      padding: 90px 0;
    }
    .section-alt{
      background: var(--alt);
    }
    .section-head{
      text-align: center;
      margin-bottom: 48px;
    }
    .section-kicker{
      margin: 0 0 10px 0;
      font-family: "Cormorant Garamond", serif;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-size: 15px;
      color: var(--accent);
      font-weight: 600;
    }
    .section-title{
      margin: 0 0 16px 0;
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.15;
      color: #141824;
    }
    .section-sub{
      margin: 0 auto;
      max-width: 60ch;
      color: var(--muted);
      font-size: 17px;
    }
    
    /* Collection Grid */
    .collection-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 40px;
    }
    .pudding-card{
      text-align: center;
      transition: transform 0.3s;
    }
    .pudding-card:hover{
      transform: translateY(-8px);
    }
    .pudding-image-wrapper{
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      margin-bottom: 24px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0,0,0,.1);
      background-color: #f7f1e9;
      border: 8px solid white;
    }
    .pudding-image-wrapper img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .pudding-image-wrapper:hover img{
      transform: scale(1.1);
    }
    .pudding-badge{
      position: absolute;
      top: 15%;
      right: 15%;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(198,31,42,.3);
    }
    .pudding-card h3{
      font-size: 24px;
      margin: 0 0 8px 0;
      font-family: "Cormorant Garamond", serif;
      font-weight: 700;
    }
    .pudding-price{
      color: var(--accent);
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 12px;
      display: block;
    }
    .pudding-text{
      font-size: 15px;
      color: var(--muted);
      line-height: 1.5;
    }
    
    /* About */
    .about-layout{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    .about-media{
      position: relative;
    }
    .about-media-img{
      width: 100%;
      border-radius: 14px;
      box-shadow: var(--shadow);
    }
    .about-text p{
      margin-bottom: 20px;
      font-size: 17px;
      color: #3d4657;
    }
    
    /* Promise */
    .promise-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 30px;
    }
    .promise-item{
      background: white;
      padding: 40px 30px;
      border-radius: 20px;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0,0,0,.03);
      border: 1px solid var(--line);
      transition: all 0.3s;
    }
    .promise-item:hover{
      border-color: var(--accent);
      transform: translateY(-5px);
    }
    .promise-icon{
      font-size: 40px;
      color: var(--accent);
      margin-bottom: 20px;
    }
    .promise-item h4{
      font-family: "Cormorant Garamond", serif;
      font-size: 22px;
      margin-bottom: 12px;
    }
    
    /* Contact */
    .contact-grid{
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 40px;
    }
    .contact-info{
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .info-card{
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }
    .info-card-icon{
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(198,31,42,0.08);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }
    .info-card h3{
      margin: 0 0 6px 0;
      font-family: "Cormorant Garamond", serif;
      font-size: 22px;
      font-weight: 700;
    }
    .info-card p, .info-card a{ margin: 0; color: var(--muted); font-size: 15px; }
    
    .contact-form{
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 40px;
      box-shadow: var(--shadow);
    }
    .contact-form label{
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #3d4657;
      margin-bottom: 8px;
    }
    .contact-form input,
    .contact-form textarea{
      width: 100%;
      margin-bottom: 20px;
      padding: 14px;
      border-radius: 12px;
      border: 1px solid rgba(27,31,42,.15);
      font: inherit;
      outline: none;
      transition: all 0.2s;
    }
    .contact-form input:focus,
    .contact-form textarea:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(198,31,42,.08);
    }
    


    /* Map */
    .map-container{
      width: 100%;
      height: 400px;
      border-radius: 20px;
      overflow: hidden;
      margin-top: 60px;
      border: 1px solid var(--line);
    }
    
    /* Footer */
    .footer{
      background: #0b0c10;
      color: rgba(255,255,255,.8);
      padding: 80px 0 30px;
    }
    .footer-grid{
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 60px;
      margin-bottom: 60px;
    }
    .footer-brand{
      font-family: "Great Vibes", cursive;
      font-size: 40px;
      color: white;
      margin-bottom: 15px;
      display: block;
    }
    .footer-head{
      font-family: "Cormorant Garamond", serif;
      font-size: 22px;
      color: white;
      margin-bottom: 25px;
      font-weight: 700;
    }
    .footer-links{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .footer-links li{
      margin-bottom: 12px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .footer-links i{
      color: var(--accent);
      margin-top: 4px;
    }
    .footer-links a:hover{
      color: white;
    }
    .footer-bottom{
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 30px;
      text-align: center;
      font-size: 14px;
    }
.footer-logo {
  display: block;
  max-width: 140px;
  margin-bottom: 15px;
  padding: 0;          /* removes internal space */
}

.clean-ok {
    background: #e6f9f0;
    color: #1e7e34;
    border: 1px solid #b7ebc6;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: 500;
}

.clean-error {
    background: #fdecea;
    color: #b02a37;
    border: 1px solid #f5c2c7;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: 500;
}

.clean-ok::before {
    content: "✔ ";
    font-weight: bold;
}

.clean-error::before {
    content: "⚠ ";
    font-weight: bold;
}

/* Performance improvements */
img {
  max-width: 100%;
  height: auto;
}

/* Lazy loading */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

img.loaded {
  opacity: 1;
}

/* Remove iframe border */
.map-container iframe {
  border: none;
}

/* Topbar address */
.topbar__item .fa-location-dot {
  margin-right: 5px;
}

    
    /* Responsive */
    @media (max-width: 992px){
      .nav{ display: none; }
      .mobile-menu-btn{ display: block; }
      .about-layout, .contact-grid, .footer-grid{ grid-template-columns: 1fr; gap: 40px; }
      .hero{ height: auto; min-height: 500px; padding: 60px 0;    }
      .brand-logo{ height: 50px; }
    }