/* ===== ROOT & RESET ===== */
    *, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

    :root {
      --amber: #FFAB00;
      --amber-light: #FFC94A;
      --amber-dark: #E08900;
      --cream: #FFFBF0;
      --bg-deep: #0D0B08;
      --bg-dark: #131009;
      --bg-card: #1C1810;
      --bg-glass: rgba(255,255,255,0.04);
      --text-primary: #F5EDD8;
      --text-secondary: #B8A882;
      --text-muted: #7A6B50;
      --border: rgba(255,171,0,0.18);
      --border-soft: rgba(255,255,255,0.07);
      --radius-sm: 8px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --radius-xl: 32px;
      --shadow-card: 0 4px 32px rgba(0,0,0,0.5);
      --shadow-glow: 0 0 40px rgba(255,171,0,0.1);
      --transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
      --font-display: 'Playfair Display', serif;
      --font-body: 'Inter', sans-serif;
      --font-ui: 'Poppins', sans-serif;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--bg-deep);
      color: var(--text-primary);
      overflow-x: hidden;
      line-height: 1.6;
    }

    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg-dark); }
    ::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 2px; }

    /* ===== ANIMATIONS ===== */
    @keyframes fadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
    @keyframes pulseGlow { 0%,100% { box-shadow:0 0 20px rgba(255,171,0,0.3); } 50% { box-shadow:0 0 44px rgba(255,171,0,0.6); } }
    @keyframes bounceSoft { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
    @keyframes shimmer { 0% { background-position:-200% center; } 100% { background-position:200% center; } }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ===== LAYOUT ===== */
    .section { padding: 72px 20px; }
    .section-alt { background: var(--bg-dark); }
    .section-inner { max-width: 1100px; margin: 0 auto; }

    .section-eyebrow {
      font-family: var(--font-ui);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 6px;
    }
    .section-title {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 4vw, 2.4rem);
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    .section-title span {
      background: linear-gradient(135deg, var(--amber), var(--amber-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .section-divider {
      width: 48px; height: 2px;
      background: linear-gradient(90deg, var(--amber), transparent);
      border-radius: 2px;
      margin: 14px 0 44px;
    }

    /* ===== HERO ===== */
    .hero { position: relative; overflow: hidden; background: var(--bg-deep); }
    .hero-cover {
      width: 100%; height: 360px;
      object-fit: cover;
      border-radius: 0 0 var(--radius-xl) var(--radius-xl);
      display: block;
      filter: brightness(0.55);
    }
    .hero-gradient {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(13,11,8,0.2) 20%, var(--bg-deep) 100%);
      border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    }
    .hero-content {
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .hero-identity {
      display: flex;
      align-items: flex-end;
      gap: 20px;
      margin-top: -60px;
      flex-wrap: wrap;
    }
    .hero-logo {
      flex-shrink: 0;
      width: 108px; height: 108px;
      border-radius: 50%;
      border: 3px solid var(--amber);
      overflow: hidden;
      box-shadow: 0 0 0 6px rgba(255,171,0,0.12), var(--shadow-card);
      animation: pulseGlow 3.5s ease-in-out infinite;
    }
    .hero-logo img { width:100%; height:100%; object-fit:cover; }
    .hero-info { padding-bottom: 8px; }
    .hero-name {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 5vw, 2.9rem);
      font-weight: 700;
      background: linear-gradient(135deg, var(--amber), var(--amber-light), #fff8e1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.1;
    }
    .hero-sub {
      color: var(--text-secondary);
      font-size: 1rem;
      margin-top: 5px;
      font-style: italic;
      font-family: var(--font-display);
    }
    .hero-location {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--amber);
      font-size: 0.85rem;
      margin-top: 6px;
      font-weight: 500;
    }
    .hero-cta { margin-top: 22px; }
    .btn-amber {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 28px;
      background: linear-gradient(135deg, var(--amber), var(--amber-dark));
      color: #1a0e00;
      font-family: var(--font-ui);
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-radius: 50px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: 0 4px 20px rgba(255,171,0,0.35);
    }
    .btn-amber:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(255,171,0,0.55);
    }

    /* ===== CONTACT ROW ===== */
    .contact-row {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      padding: 40px 20px 0;
    }
    .contact-btn { display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; transition:var(--transition); }
    .contact-icon {
      width: 52px; height: 52px;
      border-radius: 50%;
      background: var(--bg-glass);
      border: 1px solid var(--border-soft);
      display: flex; align-items:center; justify-content:center;
      font-size: 1.15rem;
      transition: var(--transition);
      backdrop-filter: blur(8px);
    }
    .contact-btn:hover .contact-icon {
      border-color: var(--amber);
      background: rgba(255,171,0,0.1);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(255,171,0,0.2);
    }
    .contact-label { font-size: 0.67rem; color: var(--text-muted); letter-spacing:0.05em; text-transform:uppercase; font-weight:500; }
    .ci-phone { color: #4caf50; }
    .ci-email { color: #ef5350; }
    .ci-map { color: #ef5350; }
    .ci-sms { color: #5c6bc0; }
    .ci-web { color: #29b6f6; }

    /* ===== ABOUT ===== */
    .about-text {
      font-size: 1.05rem;
      color: var(--text-secondary);
      line-height: 1.9;
      max-width: 820px;
    }

    /* ===== GALLERY GRIDS ===== */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .gallery-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

    .gallery-item {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 4/3;
      cursor: pointer;
    }
    .gallery-item img {
      width:100%; height:100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .gallery-item:hover img { transform: scale(1.07); }
    .gallery-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
      opacity: 0;
      transition: var(--transition);
    }
    .gallery-item:hover .gallery-overlay { opacity: 1; }

    /* Square aspect ratio variant */
    .gallery-item.sq { aspect-ratio: 1/1; }

    /* ===== ORDER ONLINE ===== */
    .order-card {
      background: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-lg);
      padding: 32px 28px;
      display: flex;
      align-items: center;
      gap: 20px;
      transition: var(--transition);
      text-decoration: none;
      max-width: 380px;
    }
    .order-card:hover {
      border-color: var(--border);
      transform: translateY(-4px);
      box-shadow: var(--shadow-glow), var(--shadow-card);
    }
    .order-card img {
      height: 52px;
      object-fit: contain;
      filter: brightness(1.1);
    }
    .order-label {
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text-primary);
    }
    .order-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

    /* ===== REVIEWS ===== */
    .reviews-wrap {
      display: flex;
      flex-direction: column;
      gap: 28px;
      align-items: flex-start;
    }
    .rating-card {
      background: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-lg);
      overflow: hidden;
      max-width: 360px;
    }
    .rating-card img { width:100%; display:block; }
    .reviews-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: 50px;
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 0.83rem;
      text-decoration: none;
      transition: var(--transition);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .btn-blue { background:rgba(0,180,216,0.1); border:1px solid rgba(0,180,216,0.3); color:#00b4d8; }
    .btn-blue:hover { background:#00b4d8; color:#fff; box-shadow:0 4px 20px rgba(0,180,216,0.3); }
    .btn-pink { background:rgba(255,71,126,0.1); border:1px solid rgba(255,71,126,0.3); color:#ff477e; }
    .btn-pink:hover { background:#ff477e; color:#fff; box-shadow:0 4px 20px rgba(255,71,126,0.3); }

    /* ===== CONTACT / MAP ===== */
    .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
    .contact-name { font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--amber); margin-bottom:20px; }
    .contact-detail {
      display:flex; align-items:flex-start; gap:12px;
      padding:14px 16px;
      background:var(--bg-glass);
      border:1px solid var(--border-soft);
      border-radius:var(--radius-md);
      margin-bottom:12px;
      backdrop-filter:blur(6px);
    }
    .contact-detail-icon {
      width:34px; height:34px;
      border-radius:var(--radius-sm);
      background:rgba(255,171,0,0.1);
      border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      color:var(--amber);
      font-size:0.85rem;
      flex-shrink:0;
    }
    .contact-detail-text { font-size:0.9rem; color:var(--text-secondary); line-height:1.55; }
    .map-wrap { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft); box-shadow:var(--shadow-card); }
    .map-wrap iframe { width:100%; height:300px; display:block; }
    .follow-label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); margin:22px 0 10px; font-weight:600; }
    .social-row { display:flex; gap:10px; flex-wrap:wrap; }
    .social-btn {
      width:38px; height:38px;
      border-radius:50%;
      background:var(--bg-glass);
      border:1px solid var(--border-soft);
      display:flex; align-items:center; justify-content:center;
      text-decoration:none;
      color:var(--text-secondary);
      font-size:0.88rem;
      transition:var(--transition);
    }
    .social-btn:hover { border-color:var(--amber); color:var(--amber); transform:translateY(-3px); box-shadow:0 4px 16px rgba(255,171,0,0.2); }

    /* ===== FOOTER ===== */
    .footer { background:#060503; border-top:1px solid var(--border-soft); padding:48px 20px 28px; }
    .footer-inner { max-width:1100px; margin:0 auto; text-align:center; }
    .footer-powered { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:32px; }
    .footer-powered-label { font-size:0.68rem; color:var(--text-muted); letter-spacing:0.1em; text-transform:uppercase; }
    .footer-powered img { height:26px; opacity:0.75; transition:var(--transition); filter:brightness(1.2); }
    .footer-powered img:hover { opacity:1; }
    .footer-share-label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:14px; }
    .footer-social { display:flex; justify-content:center; gap:12px; margin-bottom:28px; flex-wrap:wrap; }
    .footer-social-btn {
      width:42px; height:42px;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      text-decoration:none;
      font-size:0.95rem;
      transition:var(--transition);
      border:1px solid var(--border-soft);
      color:var(--text-secondary);
    }
    .footer-social-btn:hover { transform:translateY(-4px) scale(1.1); border-color:var(--amber); color:var(--amber); box-shadow:0 8px 24px rgba(255,171,0,0.2); }
    .footer-links { display:flex; justify-content:center; gap:24px; margin-bottom:18px; }
    .footer-links a { color:var(--text-muted); text-decoration:none; font-size:0.8rem; transition:var(--transition); }
    .footer-links a:hover { color:var(--amber); }
    .footer-copy { color:var(--text-muted); font-size:0.75rem; border-top:1px solid var(--border-soft); padding-top:18px; }
    .footer-copy a { color:var(--amber); text-decoration:none; }

    /* ===== FLOATING BUTTONS ===== */
    .float-left { position:fixed; left:16px; bottom:20px; display:flex; flex-direction:column; gap:10px; z-index:1000; }
    .float-right { position:fixed; right:16px; bottom:20px; z-index:1000; }
    .float-btn {
      width:52px; height:52px;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      text-decoration:none; cursor:pointer;
      border:none; font-size:1.2rem;
      transition:var(--transition);
    }
    .float-wa { background:#25D366; color:#fff; box-shadow:0 4px 20px rgba(37,211,102,0.4); animation:bounceSoft 3s ease-in-out infinite; }
    .float-wa:hover { box-shadow:0 8px 32px rgba(37,211,102,0.6); transform:scale(1.1); }
    .float-share { background:var(--bg-card); color:var(--amber); border:1px solid var(--border); box-shadow:var(--shadow-card); }
    .float-share:hover { background:var(--amber); color:#1a0e00; transform:scale(1.1); }
    .float-top {
      width:48px; height:48px;
      background:var(--bg-card); color:var(--amber);
      border:1px solid var(--border); box-shadow:var(--shadow-card);
      opacity:0; pointer-events:none; transition:var(--transition);
    }
    .float-top.visible { opacity:1; pointer-events:all; }
    .float-top:hover { background:var(--amber); color:#1a0e00; transform:translateY(-3px); }

    /* ===== SHARE POPUP ===== */
    .share-popup {
      position:fixed; left:76px; bottom:72px;
      background:var(--bg-card);
      border:1px solid var(--border-soft);
      border-radius:var(--radius-md);
      padding:14px;
      display:flex; flex-direction:column; gap:6px;
      z-index:1001; box-shadow:var(--shadow-card);
      opacity:0; pointer-events:none;
      transform:translateX(-10px);
      transition:var(--transition);
      min-width:158px;
    }
    .share-popup.open { opacity:1; pointer-events:all; transform:translateX(0); }
    .share-popup a {
      display:flex; align-items:center; gap:10px;
      text-decoration:none; color:var(--text-secondary);
      font-size:0.84rem; padding:7px 10px;
      border-radius:var(--radius-sm); transition:var(--transition);
    }
    .share-popup a:hover { background:rgba(255,171,0,0.08); color:var(--amber); }
    .share-popup a i { width:16px; text-align:center; }

    /* ===== FOOD BADGE TAG ===== */
    .tag {
      display:inline-flex; align-items:center; gap:5px;
      padding:5px 12px;
      border-radius:50px;
      font-size:0.75rem; font-weight:600; font-family:var(--font-ui);
      letter-spacing:0.05em;
    }
    .tag-green { background:rgba(76,175,80,0.12); border:1px solid rgba(76,175,80,0.25); color:#66bb6a; }
    .tag-red { background:rgba(239,83,80,0.12); border:1px solid rgba(239,83,80,0.25); color:#ef5350; }
    .tags-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 900px) {
      .gallery-grid.cols-4 { grid-template-columns: repeat(3,1fr); }
    }
    @media (max-width: 768px) {
      .section { padding: 56px 16px; }
      .hero-cover { height: 230px; }
      .hero-logo { width:80px; height:80px; }
      .hero-identity { margin-top:-40px; gap:14px; }
      .contact-grid { grid-template-columns:1fr; }
      .gallery-grid { grid-template-columns: repeat(2,1fr); }
      .gallery-grid.cols-4 { grid-template-columns: repeat(2,1fr); }
      .gallery-grid.cols-2 { grid-template-columns: 1fr; }
      .float-left { left:12px; }
      .float-btn { width:46px; height:46px; font-size:1rem; }
      .share-popup { left:64px; }
    }
    @media (max-width: 480px) {
      .gallery-grid.cols-3 { grid-template-columns: repeat(2,1fr); }
      .hero-name { font-size:1.55rem; }
    }