:root{
    --logo:url('../assets/logo.png');
    --paper:#FBF6EF; --paper2:#FFFDFA; --card:#FFFFFF; --ink:#2A1512; --ink-soft:#6B564F;
    --maroon:#7E1A1A; --maroon-deep:#5A1010; --saffron:#E89B0C; --gold:#F6C453;
    --peacock:#1C7C8C; --line:#ECE0D2;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--paper); color:var(--ink);
    font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:"Bricolage Grotesque"; margin:0}
  a{color:inherit; text-decoration:none}
  .container{max-width:1080px; margin:0 auto; padding:0 22px}
  .eyebrow{font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:600; color:var(--saffron)}

  nav{position:sticky; top:0; z-index:50; background:rgba(251,246,239,.93); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:66px}
  .logo{display:flex; align-items:center; gap:10px}
  .logo .dot{width:42px; height:42px; border-radius:50%; background:var(--logo) center/contain no-repeat}
  .logo b{font-family:"Bricolage Grotesque"; font-weight:800; font-size:18px; color:var(--maroon); text-transform:uppercase; letter-spacing:.5px}
  .nav-right{display:flex; align-items:center; gap:14px}
  .nav-links{display:flex; gap:24px; align-items:center}
  .nav-links a{font-size:14.5px; font-weight:500; color:var(--ink)}
  .nav-links a:hover{color:var(--maroon)}
  .nav-cta{background:var(--maroon); color:#fff!important; padding:10px 18px; border-radius:99px; font-weight:600; font-size:14px}
  .nav-cta:hover{background:var(--maroon-deep)}
  .burger{display:none; background:none; border:none; cursor:pointer; padding:6px}
  .burger span{display:block; width:24px; height:2px; background:var(--maroon); margin:5px 0}
  .theme-toggle{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:var(--card); cursor:pointer;
    display:flex; align-items:center; justify-content:center; color:var(--maroon); transition:.15s; flex:0 0 auto}
  .theme-toggle:hover{border-color:var(--saffron)}
  .theme-toggle svg{width:18px; height:18px}
  .theme-toggle .sun{display:none}

  .hero{position:relative; background:radial-gradient(120% 120% at 50% -10%, #8E2020 0%, var(--maroon) 45%, var(--maroon-deep) 100%);
    color:#fff; overflow:hidden; text-align:center; padding:78px 0 84px}
  .hero::before{content:""; position:absolute; inset:0; opacity:.10; z-index:0;
    background-image:radial-gradient(circle at 50% 50%, transparent 38%, var(--gold) 38.4%, transparent 40%),
      radial-gradient(circle at 50% 50%, transparent 48%, #fff 48.3%, transparent 50%);
    background-size:340px 340px, 540px 540px; background-position:center; background-repeat:no-repeat}
  .hero-in{position:relative; z-index:2}
  .hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden}
  .hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease}
  .hero-slide.on{opacity:1}
  .hero-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(90,16,16,.72), rgba(126,26,26,.82))}
  .hero .brandmark{width:108px; height:108px; margin:0 auto 16px; background:var(--logo) center/contain no-repeat;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,.4))}
  .hero .est{color:var(--gold); letter-spacing:4px; font-size:12px; text-transform:uppercase; font-weight:600}
  .hero h1{font-size:clamp(40px,8vw,70px); font-weight:800; line-height:.98; margin:14px 0 6px; text-transform:uppercase}
  .hero .tagline{font-family:"Bricolage Grotesque"; font-weight:600; font-size:clamp(16px,3vw,21px); color:var(--gold)}
  .hero .sub{max-width:520px; margin:16px auto 0; color:#F3E2D2; font-size:15.5px}
  .hero .btns{margin-top:24px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
  .rating{display:inline-flex; align-items:center; gap:7px; margin-top:18px; background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.32); color:#fff; padding:8px 16px; border-radius:99px; font-size:13.5px; font-weight:600}
  .rating b{color:var(--gold); font-weight:700}

  .btn{font:inherit; font-weight:600; border:none; cursor:pointer; border-radius:99px; padding:14px 26px; font-size:15px;
    transition:transform .12s, background .15s; display:inline-block}
  .btn:active{transform:translateY(1px)}
  .btn-gold{background:var(--gold); color:var(--maroon-deep)}
  .btn-gold:hover{background:#FFD877}
  .btn-line{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55)}
  .btn-line:hover{border-color:#fff}

  section{padding:66px 0}
  .sec-head{text-align:center; max-width:620px; margin:0 auto 40px}
  .sec-head h2{font-size:clamp(28px,5vw,40px); font-weight:800; color:var(--maroon); margin:8px 0 0}
  .sec-head p{color:var(--ink-soft); margin:12px 0 0; font-size:15.5px}

  .about{background:var(--paper2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .about-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:46px; align-items:center}
  .about h2{font-size:clamp(26px,4vw,36px); font-weight:800; color:var(--maroon); margin:10px 0 16px}
  .about p{color:var(--ink-soft); font-size:15.5px; margin:0 0 14px}
  .pillars{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
  .pillars span{background:#F7ECEC; color:var(--maroon); font-weight:600; font-size:13px; padding:7px 14px; border-radius:99px}
  .about-card{background:linear-gradient(160deg,#8E2020,var(--maroon-deep)); color:#fff; border-radius:18px; padding:34px;
    box-shadow:0 18px 40px -22px rgba(94,16,16,.6)}
  .about-card h3{color:var(--gold); font-size:22px; margin-bottom:14px}
  .about-card ul{list-style:none; padding:0; margin:0}
  .about-card li{padding:9px 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:14.5px; display:flex; align-items:center; gap:10px}
  .about-card li:last-child{border-bottom:none}
  .about-card li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); flex:0 0 7px}

  .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .fcard{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column}
  .fcard:hover{transform:translateY(-4px); box-shadow:0 18px 38px -24px rgba(94,16,16,.45)}
  .fcard .thumb{height:118px; position:relative; overflow:hidden; background:#FBF5EC}
  .fcard .thumb img{width:100%; height:100%; object-fit:cover; display:block}
  .fcard .thumb.v2{background:linear-gradient(135deg,#B5811A,#E89B0C)}
  .fcard .thumb.v3{background:linear-gradient(135deg,#176573,#1C7C8C)}
  .fcard .thumb span{position:absolute; left:14px; bottom:12px; background:rgba(0,0,0,.5); color:#fff; font-size:11px;
    letter-spacing:1px; text-transform:uppercase; padding:4px 9px; border-radius:6px}
  .fcard .body{padding:16px 17px 18px; display:flex; flex-direction:column; flex:1}
  .badge{display:inline-block; background:var(--gold); color:var(--maroon-deep); font-size:10.5px; font-weight:700; letter-spacing:.6px;
    text-transform:uppercase; padding:3px 8px; border-radius:5px; margin-bottom:8px; align-self:flex-start}
  .fcard h3{font-size:17.5px; font-weight:700; color:var(--ink)}
  .fcard .desc{color:var(--ink-soft); font-size:13.5px; margin:6px 0 14px; flex:1}
  .fcard .price{font-family:"Bricolage Grotesque"; font-weight:800; color:var(--maroon); font-size:18px}

  .menu{background:var(--paper2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .tabs{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:30px}
  .tab{font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; border:1.5px solid var(--line); background:#fff;
    color:var(--ink-soft); padding:9px 16px; border-radius:99px; transition:.15s}
  .tab:hover{border-color:var(--saffron)}
  .tab.on{background:var(--maroon); color:#fff; border-color:var(--maroon)}
  .menu-list{max-width:780px; margin:0 auto; display:grid; gap:2px}
  .mitem{display:flex; gap:14px; align-items:baseline; padding:13px 6px; border-bottom:1px dashed var(--line)}
  .mitem .ml{flex:1}
  .mitem .name{font-weight:600; font-size:15.5px}
  .mitem .nm-badge{font-size:9.5px; font-weight:700; color:var(--maroon); background:#F7ECEC; padding:2px 6px; border-radius:4px;
    margin-left:8px; letter-spacing:.5px; text-transform:uppercase; vertical-align:middle}
  .mitem .meta{font-size:12.5px; color:var(--ink-soft); margin-top:3px}
  .mitem .dots{flex:1; border-bottom:1px dotted #D9C9B8; transform:translateY(-4px); min-width:14px}
  .mitem .pr{font-family:"Bricolage Grotesque"; font-weight:700; color:var(--maroon); white-space:nowrap}
  .menu-note{text-align:center; color:var(--ink-soft); font-size:13px; margin-top:22px}

  .cater-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:8px}
  .cchip{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:22px 12px; text-align:center; font-weight:600; font-size:14px; color:var(--ink)}
  .cchip-ico{width:40px; height:40px; border-radius:50%; background:#F7ECEC; color:var(--maroon); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:18px}

  .order{background:linear-gradient(160deg,#8E2020,var(--maroon-deep)); color:#fff; text-align:center}
  .order h2{color:#fff; font-size:clamp(26px,4vw,38px); font-weight:800}
  .order p{color:#F3E2D2; max-width:560px; margin:14px auto 0}
  .apps{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px}
  .app{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; padding:13px 22px; border-radius:99px;
    font-weight:600; font-size:14.5px; cursor:pointer; transition:.15s}
  .app:hover{background:rgba(255,255,255,.2)}
  .app.solid{background:var(--gold); color:var(--maroon-deep); border-color:var(--gold)}
  .app.solid:hover{background:#FFD877}

  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:42px}
  .contact h3{color:var(--maroon); font-size:19px; margin-bottom:6px}
  .contact .row{padding:13px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-soft)}
  .contact .row b{display:block; color:var(--ink); font-weight:600; margin-bottom:2px}
  .contact .row a{color:var(--maroon); font-weight:600}
  .map{background:#EFE6DA; border:1px solid var(--line); border-radius:16px; min-height:280px; display:flex; align-items:center;
    justify-content:center; color:var(--ink-soft); font-size:14px; text-align:center; padding:20px}

  footer{background:var(--maroon-deep); color:#E9D6C4; padding:34px 0; text-align:center; font-size:13px}
  footer .social{margin-bottom:12px; display:flex; gap:18px; justify-content:center}
  footer .social a{color:var(--gold); font-weight:600; cursor:pointer}

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s, transform .6s}
  .reveal.in{opacity:1; transform:none}

  /* ===== Dark (caffein-style) palette ===== */
  html[data-theme="dark"]{
    --paper:#19100E; --paper2:#1F1411; --card:#251714; --ink:#F2E7DA; --ink-soft:#C5B0A2;
    --maroon:#C8503C; --maroon-deep:#7E1A1A; --saffron:#F0A91C; --gold:#F6C453; --line:#3A2620;
  }
  html[data-theme="dark"] .theme-toggle .moon{display:none}
  html[data-theme="dark"] .theme-toggle .sun{display:block; color:var(--gold)}
  html[data-theme="dark"] nav{background:rgba(25,16,14,.92)}
  html[data-theme="dark"] .logo b{color:var(--gold)}
  html[data-theme="dark"] .nav-cta{background:var(--maroon); color:#fff!important}
  html[data-theme="dark"] .nav-cta:hover{background:#B5432F}
  html[data-theme="dark"] .hero{background:radial-gradient(120% 120% at 50% -10%, #4A1414 0%, #2A0E0C 55%, #19100E 100%)}
  html[data-theme="dark"] .sec-head h2,
  html[data-theme="dark"] .about h2,
  html[data-theme="dark"] .contact h3{color:var(--gold)}
  html[data-theme="dark"] .pillars span{background:rgba(240,169,28,.14); color:var(--gold)}
  html[data-theme="dark"] .tab{background:var(--card); color:var(--ink-soft); border-color:var(--line)}
  html[data-theme="dark"] .tab.on{background:var(--maroon); color:#fff; border-color:var(--maroon)}
  html[data-theme="dark"] .nm-badge{background:rgba(240,169,28,.16); color:var(--gold)}
  html[data-theme="dark"] .cchip-ico{background:rgba(240,169,28,.16); color:var(--gold)}
  html[data-theme="dark"] .price,
  html[data-theme="dark"] .mitem .pr{color:var(--gold)}
  html[data-theme="dark"] .map{background:#1F1411; color:var(--ink-soft); border-color:var(--line)}
  html[data-theme="dark"] footer{background:#140B09}

  @media (max-width:860px){
    .about-grid,.contact-grid{grid-template-columns:1fr; gap:30px}
    .feat-grid{grid-template-columns:1fr 1fr}
    .cater-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:620px){
    .nav-links{display:none; position:absolute; top:66px; left:0; right:0; background:var(--paper2); flex-direction:column;
      padding:14px 22px 20px; gap:14px; border-bottom:1px solid var(--line)}
    .nav-links.open{display:flex}
    .burger{display:block}
    .feat-grid{grid-template-columns:1fr}
    section{padding:52px 0}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto} .reveal{opacity:1; transform:none}}

  .skip{position:absolute; left:-999px; top:0; z-index:1000; background:var(--maroon); color:#fff;
    padding:10px 16px; border-radius:0 0 10px 0; font-weight:600}
  .skip:focus{left:0}