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

    :root {
      --cream:    #FDF8F0;
      --warm:     #FAF3E4;
      --peach:    #FDEBD0;
      --leaf:     #6BAA75;
      --saffron:  #F4A535;
      --rose:     #E8736C;
      --text-dark:#3A2A1A;
      --text-mid: #7A5C3A;
      --text-soft:#A98B6A;
      --border:   rgba(180,140,90,0.18);
      --shadow:   rgba(100,60,20,0.10);
    }

    html, body {
      width: 100%; min-height: 100vh;
      overflow-x: hidden;
      background: var(--cream);
      font-family: 'Poppins', sans-serif;
    }

    /* ═══ CANVAS ═══ */
    #bgCanvas {
      position: fixed; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none; z-index: 0;
    }

    /* ═══ ANIMATED GRADIENT ORBS ═══ */
    .orb-layer { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
    .orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:0.45; will-change:transform; }
    .orb-1 { width:520px;height:520px; background:radial-gradient(circle,#FDEBD0 0%,#F9C784 55%,transparent 80%); top:-130px;left:-110px; animation:orbFloat1 14s ease-in-out infinite; }
    .orb-2 { width:440px;height:440px; background:radial-gradient(circle,#D6EFD8 0%,#A8D5A2 55%,transparent 80%); bottom:-110px;right:-90px; animation:orbFloat2 17s ease-in-out infinite; }
    .orb-3 { width:320px;height:320px; background:radial-gradient(circle,#FDEBD0 0%,#F4A535 55%,transparent 80%); top:40%;left:50%;transform:translate(-50%,-50%); opacity:0.20; animation:orbFloat3 22s ease-in-out infinite; }
    .orb-4 { width:260px;height:260px; background:radial-gradient(circle,#FADADD 0%,#E8736C 55%,transparent 80%); top:18%;right:8%; opacity:0.26; animation:orbFloat4 11s ease-in-out infinite; }
    .orb-5 { width:200px;height:200px; background:radial-gradient(circle,#FFF3CD 0%,#F5C842 55%,transparent 80%); bottom:20%;left:8%; opacity:0.22; animation:orbFloat1 16s ease-in-out infinite reverse; }

    @keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(60px,40px) scale(1.07);} 66%{transform:translate(-30px,60px) scale(0.95);} }
    @keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1);} 40%{transform:translate(-50px,-40px) scale(1.08);} 70%{transform:translate(30px,-60px) scale(0.93);} }
    @keyframes orbFloat3 { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.20;} 50%{transform:translate(-50%,-50%) scale(1.35);opacity:0.09;} }
    @keyframes orbFloat4 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-22px,32px);} }

    /* ═══ MANDALA RINGS ═══ */
    .mandala-wrap { position:fixed; inset:0; pointer-events:none; z-index:0; }
    .ring { position:absolute; border-radius:50%; border-style:solid; }
    .ring-1 { width:700px;height:700px; border:1px solid rgba(244,165,53,0.12); top:-200px;left:-200px; animation:spin 60s linear infinite; }
    .ring-2 { width:520px;height:520px; border:1px solid rgba(107,170,117,0.10); top:-100px;left:-100px; animation:spinR 80s linear infinite; }
    .ring-3 { width:900px;height:900px; border:1px solid rgba(232,115,108,0.07); bottom:-300px;right:-300px; animation:spin 90s linear infinite; }
    .ring-4 { width:600px;height:600px; border:1px solid rgba(244,165,53,0.09); bottom:-200px;right:-150px; animation:spinR 70s linear infinite; }
    .ring-c1 { position:absolute; width:420px;height:420px; border-radius:50%; border:1px dashed rgba(244,165,53,0.09); top:50%;left:50%; margin:-210px 0 0 -210px; animation:spin 42s linear infinite; }
    .ring-c2 { position:absolute; width:580px;height:580px; border-radius:50%; border:1px dashed rgba(107,170,117,0.07); top:50%;left:50%; margin:-290px 0 0 -290px; animation:spinR 58s linear infinite; }

    @keyframes spin  { to { transform:rotate(360deg); } }
    @keyframes spinR { to { transform:rotate(-360deg); } }

    /* ═══ FLOATING SPICES ═══ */
    .spice-layer { position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
    .spice { position:absolute; opacity:0; user-select:none; animation:spiceFloat linear infinite; }
    @keyframes spiceFloat {
      0%   { opacity:0;    transform:translateY(0) rotate(0deg) scale(0.7); }
      10%  { opacity:0.32; }
      90%  { opacity:0.22; }
      100% { opacity:0;    transform:translateY(-110vh) rotate(380deg) scale(1.1); }
    }

    /* ═══ SECTION ═══ */
    .section { position:relative; z-index:2; width:100%; padding:90px 24px 110px; }

    /* ═══ HEADER ═══ */
    .header { text-align:center; margin-bottom:64px; opacity:0; transform:translateY(30px); animation:fadeUp 0.9s ease forwards 0.3s; }
    .header-badge {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(253,235,208,0.85); backdrop-filter:blur(8px);
      border:1px solid rgba(244,165,53,0.3); border-radius:50px;
      padding:6px 18px; font-size:0.72rem; font-weight:600;
      letter-spacing:0.12em; text-transform:uppercase; color:var(--text-mid); margin-bottom:20px;
    }
    .header h1 { font-family:'Playfair Display',serif; font-size:clamp(2.2rem,5vw,3.4rem); font-weight:800; color:var(--text-dark); line-height:1.15; margin-bottom:14px; }
    .header h1 em { font-style:italic; color:var(--saffron); }
    .header p { font-size:0.95rem; color:var(--text-soft); font-weight:300; max-width:420px; margin:0 auto; line-height:1.7; }
    .divider { display:flex; align-items:center; justify-content:center; gap:12px; margin:20px auto 0; }
    .divider-line { width:60px; height:1px; background:var(--saffron); opacity:0.5; }
    .divider-dot  { width:7px; height:7px; background:var(--saffron); border-radius:50%; animation:pulse 2.2s ease-in-out infinite; }

    /* ═══ GRID ═══ */
    .cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:36px; max-width:900px; margin:0 auto; }

    /* ═══ CARD ═══ */
    .card {
      background:rgba(255,255,255,0.80);
      backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      border-radius:28px; overflow:hidden;
      border:1px solid rgba(255,255,255,0.72);
      box-shadow:0 8px 40px var(--shadow), 0 1px 0 rgba(255,255,255,0.9) inset;
      position:relative; cursor:pointer;
      opacity:0; transform:translateY(50px) scale(0.97);
      transition:transform 0.45s cubic-bezier(.22,.68,0,.99), box-shadow 0.45s ease;
    }
    .card.visible { animation:cardIn 0.85s cubic-bezier(.22,.68,0,.99) forwards; }
    .card:nth-child(2).visible { animation-delay:0.18s; }
    .card:hover { transform:translateY(-10px) scale(1.018); box-shadow:0 28px 70px rgba(100,60,20,0.18),0 1px 0 rgba(255,255,255,0.9) inset; }

    /* image */
    .card-image-wrap { position:relative; height:230px; overflow:hidden; }
    .card-image-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s ease; display:block; }
    .card:hover .card-image-wrap img { transform:scale(1.07); }
    .card-image-wrap::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(255,248,235,0.55) 100%); pointer-events:none; }

    /* badge */
    .card-type-badge { position:absolute; top:16px; left:16px; z-index:2; display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:50px; font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; backdrop-filter:blur(10px); box-shadow:0 2px 12px rgba(0,0,0,0.1); }
    .badge-veg    { background:rgba(255,255,255,0.88); color:var(--leaf); border:1.5px solid rgba(107,170,117,0.4); }
    .badge-nonveg { background:rgba(255,255,255,0.88); color:var(--rose); border:1.5px solid rgba(232,115,108,0.35); }
    .dot-indicator { width:10px;height:10px; border-radius:50%; border:1.5px solid; display:flex;align-items:center;justify-content:center; flex-shrink:0; }
    .dot-indicator::after { content:''; width:5px;height:5px; border-radius:50%; }
    .dot-veg { border-color:var(--leaf); } .dot-veg::after { background:var(--leaf); }
    .dot-nv  { border-color:var(--rose); } .dot-nv::after  { background:var(--rose); }

    /* logo */
    .card-logo-wrap { display:flex; justify-content:center; margin-top:-36px; position:relative; z-index:3; }
    .card-logo { width:72px;height:72px; border-radius:50%; background:#fff; border:3px solid #fff; box-shadow:0 4px 20px rgba(100,60,20,0.15); display:flex;align-items:center;justify-content:center; font-size:2rem; transition:transform 0.4s ease; }
    .card:hover .card-logo { transform:rotate(8deg) scale(1.1); }

    /* body */
    .card-body { padding:18px 28px 32px; text-align:center; }
    .card-title { font-family:'Playfair Display',serif; font-size:1.45rem; font-weight:700; color:var(--text-dark); margin-bottom:6px; line-height:1.3; }
    .card-subtitle { font-size:0.78rem; color:var(--text-soft); font-weight:500; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:18px; }
    .card-desc { font-size:0.87rem; color:var(--text-mid); line-height:1.75; font-weight:300; margin-bottom:22px; }

    /* tags */
    .card-tags { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:26px; }
    .tag { font-size:0.72rem;font-weight:500; padding:5px 13px; border-radius:50px; letter-spacing:0.04em; }
    .tag-veg  { background:#EDF7EE; color:var(--leaf); border:1px solid rgba(107,170,117,0.3); }
    .tag-warm { background:#FEF5E7; color:#C87941;      border:1px solid rgba(244,165,53,0.3); }
    .tag-rose { background:#FDF0EF; color:var(--rose);  border:1px solid rgba(232,115,108,0.3); }

    /* buttons */
    .card-btn { display:inline-flex;align-items:center;gap:8px; padding:13px 30px; border-radius:50px; font-size:0.82rem;font-weight:600; letter-spacing:0.06em; text-transform:uppercase; border:none; cursor:pointer; transition:transform 0.25s ease,box-shadow 0.25s ease; position:relative; overflow:hidden; }
    .card-btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.18); transform:translateX(-110%); transition:transform 0.4s ease; }
    .card-btn:hover::before { transform:translateX(0); }
    .card-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,0.14); }
    .btn-veg { background:linear-gradient(135deg,#7DC58A,#5BAF68); color:#fff; box-shadow:0 4px 16px rgba(107,170,117,0.35); }
    .btn-nv  { background:linear-gradient(135deg,#EF8C87,#D9534F); color:#fff; box-shadow:0 4px 16px rgba(232,115,108,0.35); }

    /* shimmer */
    .card-shine { position:absolute;top:0;left:-80%;width:60%;height:100%; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.22) 60%,transparent 80%); transform:skewX(-10deg); transition:left 0.7s ease; pointer-events:none; z-index:4; }
    .card:hover .card-shine { left:140%; }

    /* footer */
    .footer-note { text-align:center; margin-top:56px; font-size:0.8rem; color:var(--text-soft); opacity:0; animation:fadeUp 0.8s ease forwards 1.3s; }
    .footer-note span { margin:0 6px; }

    /* ═══ KEYFRAMES ═══ */
    @keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
    @keyframes cardIn { from{opacity:0;transform:translateY(50px) scale(0.97);} to{opacity:1;transform:translateY(0) scale(1);} }
    @keyframes pulse  { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.5);opacity:0.5;} }

    /* ═══ RESPONSIVE ═══ */
    @media(max-width:640px){
      .section{padding:60px 16px 80px;}
      .cards-grid{grid-template-columns:1fr;gap:28px;max-width:400px;}
      .header h1{font-size:2rem;}
      .orb-1,.orb-2{width:260px;height:260px;}
      .ring-1,.ring-3{display:none;}
    }

    /* @media(max-width:640px){
  .section{padding:60px 12px 80px;}
  .cards-grid{grid-template-columns:repeat(2,1fr);gap:14px;max-width:100%;}
  .header h1{font-size:2rem;}
  .orb-1,.orb-2{width:260px;height:260px;}
  .ring-1,.ring-3{display:none;}

  /* Tighten card internals for small screens */
  /* .card-image-wrap{height:140px;}
  .card-logo{width:52px;height:52px;font-size:1.4rem;}
  .card-logo-wrap{margin-top:-26px;}
  .card-body{padding:12px 14px 22px;}
  .card-title{font-size:1.05rem;}
  .card-subtitle{font-size:0.65rem;}
  .card-desc{font-size:0.75rem;line-height:1.6;}
  .card-tags{gap:5px;margin-bottom:16px;}
  .tag{font-size:0.62rem;padding:4px 9px;}
  .card-btn{font-size:0.7rem;padding:10px 16px;gap:5px;}
} */