:root{
  --bg: #1e1b4b; /* dark indigo background */
  --text: #ffb700;
  --muted: #d4af37;
  --saffron: #ff8f1f; /* primary saffron */
  --saffron-strong: #ff6a00;
  --gold: #d4af37; /* dark gold */
  --gold-strong: #b8590b;
  --ring: rgba(212, 175, 55, 0.25);
  --card: #ffffff; /* white cards */
  --shadow: 0 6px 28px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
  --card-text: #111827; /* dark text on card */
  --card-muted: #6b7280; /* muted text on card */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color:var(--text);
  background:var(--bg);
}
body::before, body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:-2}
body::before{background: radial-gradient(600px 300px at 12% 8%, rgba(212,175,55,0.10), rgba(212,175,55,0) 60%), radial-gradient(700px 320px at 88% 78%, rgba(212,175,55,0.08), rgba(212,175,55,0) 60%)}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:-3; background: radial-gradient(800px 380px at 50% 110%, rgba(55,48,163,0.18), rgba(55,48,163,0) 60%)}

.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: saturate(1.8) blur(6px);
  background: rgba(30,27,75,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 20px;
  
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{width:clamp(36px, 6vw, 48px); height:clamp(36px, 6vw, 48px); border-radius:10px; object-fit:cover; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges}
.brand-name{
  font-weight:700; letter-spacing:0.2px; text-decoration:none; color:var(--text);
}
.site-nav{display:flex; align-items:center; gap:18px}
.nav-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--text);
  text-decoration:none; padding:6px 10px; border-radius:8px; position:relative;
}
.nav-link:hover{background:rgba(255,255,255,0.08)}
.nav-link::after{content:""; position:absolute; left:10px; right:10px; bottom:2px; height:2px; background:linear-gradient(90deg, var(--gold), transparent); opacity:0; transform:translateY(3px); transition: all .2s ease}
.nav-link:hover::after{opacity:1; transform:translateY(0)}
.icon{display:inline-flex; color:var(--gold)}

/* Hamburger (mobile) */
.menu-toggle{display:none; width:38px; height:38px; border:1px solid rgba(255,255,255,0.2); border-radius:10px; background:transparent; align-items:center; justify-content:center; gap:4px; box-shadow:none}
.menu-toggle span{display:block; width:18px; height:2px; background: #ffffff}

/* Mobile drawer */
.mobile-overlay{position:fixed; inset:0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index:40}
.mobile-drawer{position:fixed; top:0; right:0; height:100%; width:min(80vw, 320px); background:rgba(0,0,0,0.3); backdrop-filter: blur(6px); border-left:1px solid rgba(255,255,255,0.12); box-shadow: -10px 0 30px rgba(0,0,0,0.4); transform: translateX(100%); transition: transform .25s ease; z-index:50; padding:16px}
.mobile-drawer.open{transform: translateX(0)}
.mobile-nav{display:flex; flex-direction:column; gap:8px}
.mobile-link{display:block; padding:12px 10px; border-radius:10px; color:#ffffff; text-decoration:none}
.mobile-link:hover{background:rgba(255,255,255,0.1)}

/* Mobile distinct home */
.mobile-home{display:none}
.mobile-hero{padding:18px 16px}
.mobile-logo{width:72px; height:72px; border-radius:16px; object-fit:cover}
.mobile-title{margin:10px 0 2px; font-size:26px; line-height:1.1}
.mobile-subtitle{margin:0 0 12px; color:var(--muted); font-size:14px}
.mobile-cta-grid{display:grid; grid-template-columns: 1fr 1fr; gap:8px}
.mobile-cta{display:inline-flex; align-items:center; justify-content:center; padding:12px 10px; border-radius:12px; background:linear-gradient(180deg, var(--gold), var(--gold-strong)); color:#111827; text-decoration:none; font-weight:700; box-shadow: var(--shadow)}
.mobile-chips{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0}
.chip{display:inline-flex; align-items:center; padding:6px 8px; border-radius:999px; background:rgba(212,175,55,0.12); color:var(--gold-strong); border:1px solid rgba(212,175,55,0.3); font-size:12px}
.mobile-cards{display:grid; grid-template-columns: 1fr; gap:10px; padding:6px 16px 18px}
.mobile-card{display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--card-text); background:var(--card); border:1px solid rgba(255,255,255,0.2); border-radius:14px; padding:12px; box-shadow: var(--shadow)}
.mc-icon{width:42px; height:42px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(212,175,55,0.12), rgba(212,175,55,0.06)); color:var(--gold-strong)}
.mc-body h3{margin:0 0 2px; font-size:15px}
.mc-body p{margin:0; color:var(--card-muted); font-size:13px}

.hero{padding:48px 20px 32px; max-width:1100px; margin:0 auto}
.hero-logo{display:block; width:clamp(96px, 18vw, 140px); height:clamp(96px, 18vw, 140px); object-fit:cover; border-radius:18px; margin:0 auto 14px; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges}
.hero h1{font-size:clamp(28px, 6vw, 44px); line-height:1.08; margin:0 0 8px}
.subtitle{color:var(--muted); font-size:clamp(14px, 3.8vw, 18px); margin:0 0 24px}
/* Gradient brand title */
.gradient-text{background: linear-gradient(90deg, #f5d061, #d4af37, #b8860b); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Feature badges */
.badges{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:10px 0 22px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:rgba(212,175,55,0.2); color:var(--gold); border:1px solid rgba(212,175,55,0.3)}
.badge svg{flex:0 0 auto}

.reviews-and-actions{
  display:grid; grid-template-columns: 1fr minmax(260px, 360px) 1fr; gap:24px; align-items:start;
}

.reviews{display:grid; gap:14px}
.review{
  background:var(--card); border:1px solid rgba(255,255,255,0.2); border-left:4px solid var(--gold);
  border-radius:12px; padding:14px 14px 12px; box-shadow: var(--shadow);
}
.review .stars{color:#d4af37; font-size:14px; letter-spacing:1px}
.review p{margin:8px 0; color:var(--card-text)}
.review .author{color:var(--card-muted); font-size:13px}

.actions{display:grid; gap:12px}
.cta{
  display:flex; align-items:center; justify-content:center; text-decoration:none; font-weight:700;
  padding:14px 16px; border-radius:12px; color:#111827; background:linear-gradient(180deg, var(--gold), var(--gold-strong));
  box-shadow: 0 8px 24px rgba(212,175,55,0.25);
  transition: transform .1s ease, box-shadow .2s ease, filter .2s ease;
}
.cta:hover{transform:translateY(-2px); filter:brightness(1.03)}
.cta:active{transform:translateY(0)}
.cta:focus{outline:3px solid var(--ring); outline-offset:2px}

.social{display:flex; gap:14px; margin:28px 0 0}
.social-link{
  width:38px; height:38px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid rgba(255,255,255,0.2); color:var(--gold);
  box-shadow: var(--shadow);
}
.social-link:hover{background:rgba(212,175,55,0.2)}

.info-section{max-width:900px; margin:24px auto; padding:0 20px}
.info-section h2{margin:18px 0 8px; font-size:22px}
.info-section p{margin:0; color:var(--card-muted)}

.site-footer{max-width:900px; margin:32px auto 60px; padding:0 20px; color:var(--muted)}

/* Center the actions as a compact grid */
.actions{
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  max-width: 360px;
  margin: 0 auto;
}

/* Horizontal reviews rail */
.reviews-rail{max-width:1100px; margin:24px auto 0; padding:0 12px}
.rail-wrapper{position:relative}
.rail{
  display:grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 28vw, 320px);
  gap:16px; overflow-x:auto; padding:8px 28px; scroll-snap-type:x mandatory;
}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background: rgba(0,0,0,0.15); border-radius:999px}
.rail::-webkit-scrollbar-track{background: rgba(0,0,0,0.06)}

.review-card{
  background:var(--card); border:1px solid rgba(255,255,255,0.2); border-top:4px solid var(--gold);
  border-radius:12px; padding:14px; box-shadow: var(--shadow); scroll-snap-align:start; transition: transform .12s ease, box-shadow .2s ease;
}
.review-card:hover{transform:translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.25)}
.review-card .stars{color:#d4af37; font-size:14px; letter-spacing:1px}
.review-card p{margin:8px 0; color:var(--card-text)}
.review-card .author{color:var(--card-muted); font-size:13px}

.rail-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px; background:var(--card); color:var(--gold);
  border:1px solid rgba(255,255,255,0.2); box-shadow: var(--shadow);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.rail-nav.prev{left:-4px}
.rail-nav.next{right:-4px}
.rail-nav:hover{background:rgba(212,175,55,0.2)}

/* Make info sections distinct cards */
.info-section{
  max-width:900px; margin:24px auto; padding:16px 18px; background:var(--card);
  border:1px solid rgba(255,255,255,0.2); border-left:4px solid var(--gold); border-radius:12px;
  box-shadow: var(--shadow);
}
.info-section h2{margin:4px 0 6px; font-size:22px}
.info-section p{margin:0; color:var(--muted)}

/* Category grid (icon-only) */
.products{max-width:1100px; margin:28px auto 0; padding:0 20px}
.category-grid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px}
.category-card{display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; color:var(--card-text); background:var(--card); border:1px solid rgba(255,255,255,0.2); border-radius:14px; padding:14px; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .2s ease}
.category-card:hover{transform:translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.25)}
.category-icon{display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:12px; background:linear-gradient(180deg, rgba(212,175,55,0.2), rgba(212,175,55,0.1)); color:var(--gold); margin-bottom:8px}
.category-card h3{margin:0 0 4px; font-size:16px}
.category-card p{margin:0; color:var(--card-muted); font-size:13px}

/* Marquee */
.marquee{max-width:1100px; margin:22px auto 0; padding:0 12px}
.marquee-track{display:flex; gap:18px; overflow:hidden; padding:10px 14px; border-radius:999px; background:linear-gradient(90deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02)); border:1px solid rgba(212,175,55,0.18); color:var(--gold-strong)}
.marquee-track span{white-space:nowrap; animation: marquee 18s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Scroll reveal */
[data-reveal]{opacity:0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease}
.reveal-in{opacity:1 !important; transform: translateY(0) !important}

/* Subtle dotted background */
.bg-dots{position:fixed; inset:0; z-index:-3; pointer-events:none; background: #1e1b4b; /* dark indigo background */}

/* Info tiles */
.info-tile{display:flex; align-items:flex-start; gap:12px}
.tile-icon{flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04)); font-size:20px}
.tile-body h2{margin:0 0 6px}
.tile-actions{margin-top:8px}
.info-cta{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:linear-gradient(180deg, var(--gold), var(--gold-strong)); color:#111827; text-decoration:none; font-weight:700; box-shadow: var(--shadow)}
.ghost-cta{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.2); color:var(--text); text-decoration:none; margin-left:8px}

/* CEO card */
.ceo-card{display:grid; grid-template-columns: auto 1fr; gap:14px; align-items:center}
.ceo-avatar{width:56px; height:56px; border-radius:16px; background:linear-gradient(180deg, rgba(212,175,55,0.14), rgba(212,175,55,0.06)); color:#ffffff; display:inline-flex; align-items:center; justify-content:center; font-weight:700}
.ceo-meta h2{margin:0 0 4px}
.ceo-name{margin:0; font-weight:700}
.ceo-role{margin:0 0 8px; color:var(--muted)}
.ceo-chips{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 8px}
.ceo-actions{margin-top:4px}

@media (max-width: 980px){
  .reviews-and-actions{grid-template-columns: 1fr;}
  .reviews.left, .reviews.right{order:2}
  .actions{order:1; grid-template-columns: repeat(2, minmax(0, 1fr));}
  .hero{padding:36px 16px 20px}
  .hero h1{font-size:clamp(26px, 7vw, 36px)}
  .subtitle{font-size:clamp(13px, 4vw, 16px)}
  .site-header{padding:8px 16px}
  .review{padding:12px}
  .info-section{margin:18px auto; padding:14px}
  .category-grid{grid-template-columns: 1fr 1fr}
  .menu-toggle{display:inline-flex}
  .site-nav{display:none}
  .mobile-home{display:block}
  .hero{display:none}
  .info-tile{flex-direction:row}
  .ceo-card{grid-template-columns: auto 1fr}
}

@media (max-width: 420px){
  .actions{grid-template-columns: 1fr}
  .category-grid{grid-template-columns: 1fr}
  .marquee{padding:0 8px}
  .marquee-track{gap:12px; padding:8px 10px}
}

/* Cart page styles */
.cart-wrap{max-width:900px; margin:0 auto; padding:20px}
.cart-title{margin:0 0 24px; text-align:center}
.items{display:flex; flex-direction:column; gap:16px; margin-bottom:24px}
.item{display:grid; grid-template-columns: auto 1fr auto; gap:16px; align-items:center; padding:16px; background:var(--card); border:1px solid rgba(255,255,255,0.2); border-radius:12px; box-shadow: var(--shadow)}
.item img{width:80px; height:80px; border-radius:8px; object-fit:cover}
.item .meta h3{margin:0 0 4px; font-size:18px}
.item .meta .muted{margin:0 0 8px; color:var(--muted)}
.item .qty{display:flex; flex-direction:column; gap:8px}
.qty-controls{display:flex; align-items:center; gap:8px}
.qty-controls button{width:32px; height:32px; border-radius:6px; border:1px solid rgba(255,255,255,0.2); background:var(--card); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-weight:700}
.qty-controls button:hover{background:rgba(212,175,55,0.08); border-color:var(--gold)}
.item-actions{display:flex; gap:8px; flex-wrap:wrap}
.remove-btn{padding:8px 12px; border-radius:8px; border:1px solid rgba(220,38,38,0.2); background:rgba(220,38,38,0.08); color:#dc2626; cursor:pointer; font-size:13px; font-weight:600}
.remove-btn:hover{background:rgba(220,38,38,0.12)}
.item-checkout{padding:8px 12px; border-radius:8px; background:linear-gradient(180deg, var(--gold), var(--gold-strong)); color:#111827; border:none; cursor:pointer; font-size:13px; font-weight:600}
.item-checkout:hover{transform:translateY(-1px); box-shadow: 0 4px 12px rgba(212,175,55,0.3)}
.item .price{font-weight:700; font-size:18px; color:var(--gold-strong)}
.empty{text-align:center; color:var(--muted); padding:40px 20px}

/* Dark theme is default: no override for prefers-color-scheme */