:root{
    --cream: #FFF6E2;
    --cream-2: #FFEBC4;
    --saffron: #F5A623;
    --saffron-deep: #D9820A;
    --turmeric: #FFC93C;
    --turmeric-deep: #E8A80F;
    --masala: #5C2E0E;
    --masala-deep: #3A1B08;
    --chili: #E1472F;
    --chili-deep: #A82A17;
    --curry-green: #587A3B;
    --curry-green-deep: #385224;
    --pot-black: #2A1D14;
    --paper: #FFFDF7;
    --ink: #3A2416;
    --curd: #FFFDF3;
    --curd-shadow: #F3EBD4;
    --cucumber: #7FA65C;
    --mint: #3E6B34;
    --shadow-soft: rgba(58,27,8,.28);
    --shadow-deep: rgba(42,29,20,.5);
    font-size: 16px;
  }

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

  html{ scroll-behavior: smooth; }

  body{
    background: var(--cream);
    color: var(--ink);
    font-family: 'Quicksand', sans-serif;
    overflow-x: hidden;
    cursor: default;
  }

  h1,h2,h3,.display{
    font-family: 'Baloo 2', cursive;
  }

  img,svg{ display:block; max-width:100%; }

  a{ color:inherit; text-decoration:none; }

  ::selection{ background: var(--chili); color: var(--paper); }

  .wrap{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- SCROLLBAR ---------- */
  ::-webkit-scrollbar{ width: 12px; }
  ::-webkit-scrollbar-track{ background: var(--cream-2); }
  ::-webkit-scrollbar-thumb{ background: var(--saffron); border-radius: 10px; border: 2px solid var(--cream-2); }

  /* ---------- REVEAL ---------- */
  .reveal{
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.visible{ opacity: 1; transform: translateY(0); }

  /* ---------- NAV ---------- */
  .nav{
    position: sticky; top:0; z-index: 100;
    background: var(--paper);
    border-bottom: 4px solid var(--masala);
  }
  .nav-inner{
    max-width:1180px; margin:0 auto; padding: 14px 24px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{
    font-family:'Baloo 2',cursive; font-weight:800; font-size: 1.4rem;
    color: var(--masala); display:flex; align-items:center; gap:8px;
  }
  .logo span.pot-emoji{ font-size:1.6rem; display:inline-block; animation: wiggle 3s ease-in-out infinite; }
  .nav-links{ display:flex; gap: 6px; list-style:none; }
  .nav-links a{
    font-weight:700; font-size:.92rem; padding:8px 14px; border-radius: 100px;
    border: 2.5px solid transparent;
    transition: all .2s ease;
  }
  .nav-links a:hover{ border-color: var(--masala); background: var(--turmeric); }
  .nav-toggle{ display:none; background:none; border:3px solid var(--masala); border-radius:10px; padding: 6px 10px; font-size:1.2rem; cursor:pointer; }

  @keyframes wiggle{
    0%,100%{ transform: rotate(-6deg); }
    50%{ transform: rotate(6deg); }
  }

  /* ---------- BUTTON ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Baloo 2',cursive; font-weight:700; font-size:1.05rem;
    background: linear-gradient(180deg, var(--chili), var(--chili-deep));
    color: var(--paper);
    padding: 14px 28px; border-radius: 100px;
    border: 3px solid var(--masala-deep);
    box-shadow: 5px 5px 0 var(--masala-deep);
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{ transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--masala-deep); }
  .btn:active{ transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--masala-deep); }
  .btn.alt{ background: linear-gradient(180deg, var(--curry-green), var(--curry-green-deep)); }
  .btn.gold{ background: linear-gradient(180deg, var(--turmeric), var(--saffron-deep)); color: var(--masala-deep); }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height: 92vh;
    display:flex; align-items:center;
    background:
      radial-gradient(circle at 15% 20%, rgba(245,166,35,.4), transparent 45%),
      radial-gradient(circle at 85% 75%, rgba(225,71,47,.3), transparent 50%),
      radial-gradient(circle at 50% 100%, rgba(88,122,59,.15), transparent 60%),
      var(--cream);
    overflow:hidden;
    padding-top: 40px;
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center;
    width:100%;
  }
  .eyebrow{
    display:inline-block; font-weight:700; font-size:.85rem; letter-spacing:.08em;
    background: var(--masala); color: var(--turmeric); padding: 6px 16px; border-radius: 100px;
    transform: rotate(-3deg);
    margin-bottom: 18px;
  }
  .hero h1{
    font-size: clamp(2.6rem, 5.4vw, 4.4rem);
    line-height: 1.02;
    color: var(--masala-deep);
    font-weight: 800;
  }
  .hero h1 .pop{
    color: var(--chili);
    position: relative;
    display:inline-block;
  }
  .hero h1 .pop::after{
    content:"";
    position:absolute; left:-4px; right:-4px; bottom:6px; height:16px;
    background: var(--turmeric); z-index:-1; opacity:.7;
    transform: rotate(-1deg);
  }
  .hero p.lede{
    margin-top: 20px; font-size: 1.2rem; max-width: 46ch; color: var(--ink); opacity:.9;
  }
  .hero-ctas{ margin-top: 32px; display:flex; gap:16px; flex-wrap:wrap; }

  /* pot illustration */
  .pot-scene{ position:relative; height: 480px; }

  .steam{
    position:absolute; bottom: 62%; left:50%; translate: -50% 0;
    width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.6) 60%, transparent 75%);
    filter: blur(2.5px);
    animation: rise 4s ease-in infinite;
    opacity:0;
  }
  .steam:nth-child(1){ left:38%; animation-delay: 0s; }
  .steam:nth-child(2){ left:50%; animation-delay: 1.3s; width:36px; height:36px; }
  .steam:nth-child(3){ left:62%; animation-delay: 2.6s; width: 40px; height:40px; }
  .steam:nth-child(4){ left:46%; animation-delay: .7s; width:28px; height:28px; }
  .steam:nth-child(5){ left:56%; animation-delay: 2s; width:30px; height:30px; }
  @keyframes rise{
    0%{ opacity:0; transform: translateY(0) scale(.6) rotate(0deg); }
    15%{ opacity:.95; }
    60%{ transform: translateY(-110px) scale(1.1) rotate(8deg); }
    100%{ opacity:0; transform: translateY(-240px) scale(1.6) rotate(-6deg); }
  }

  .spice-float{ position:absolute; font-size: 2rem; animation: float 5s ease-in-out infinite; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.1)); }
  .spice-float.f1{ top:6%; left:2%; animation-delay:0s; }
  .spice-float.f2{ top:20%; right:0%; animation-delay:.8s; font-size:2.4rem;}
  .spice-float.f3{ bottom:18%; left:-2%; animation-delay:1.6s; }
  .spice-float.f4{ bottom:2%; right:8%; animation-delay:2.4s; font-size:1.7rem;}
  .spice-float.f5{ top:44%; left:78%; animation-delay:1.1s; font-size:1.6rem;}
  @keyframes float{
    0%,100%{ transform: translateY(0) rotate(-6deg); }
    50%{ transform: translateY(-18px) rotate(8deg); }
  }

  /* leg piece — floats near the pot like it's about to drop in */
  .leg-piece{
    position:absolute; top: 10%; right: 6%; font-size: 3.4rem;
    transform-origin: 70% 20%;
    animation: leg-swing 3.6s ease-in-out infinite;
    filter: drop-shadow(4px 5px 0 rgba(42,29,20,.35));
    z-index: 5;
  }
  @keyframes leg-swing{
    0%,100%{ transform: rotate(-12deg) translateY(0); }
    50%{ transform: rotate(10deg) translateY(-14px); }
  }

  /* raita bowl — curd with cucumber + mint, subtle wobble like a fresh scoop */
  .raita-bowl{
    position:absolute; bottom: 6%; left: 4%; width: 128px; height: 96px;
    z-index: 4;
    animation: bowl-settle 4.5s ease-in-out infinite;
  }
  .raita-bowl .bowl-body{
    position:absolute; bottom:0; left:0; right:0; height: 62px;
    background: linear-gradient(180deg, var(--saffron), var(--saffron-deep));
    border: 5px solid var(--masala-deep);
    border-radius: 0 0 60px 60px/0 0 46px 46px;
    box-shadow: 5px 6px 0 var(--shadow-deep);
  }
  .raita-bowl .bowl-rim{
    position:absolute; bottom: 48px; left:-4px; right:-4px; height: 26px;
    background: radial-gradient(ellipse at 50% 30%, #FFFFFF, var(--curd) 45%, var(--curd-shadow) 90%);
    border: 5px solid var(--masala-deep);
    border-radius: 50%;
  }
  .raita-bowl .curd-fleck{
    position:absolute; border-radius:50%;
    background: var(--cucumber); border: 2px solid var(--mint);
  }
  .raita-bowl .curd-fleck.c1{ width:10px; height:10px; bottom:60px; left:26px; }
  .raita-bowl .curd-fleck.c2{ width:8px; height:8px; bottom:64px; left:58px; background: var(--mint); border-color: var(--curry-green-deep); }
  .raita-bowl .curd-fleck.c3{ width:9px; height:9px; bottom:58px; left:82px; }
  .raita-bowl .mint-leaf{
    position:absolute; bottom: 66px; left: 44px; font-size: 1.1rem;
    transform: rotate(-15deg);
  }
  @keyframes bowl-settle{
    0%,100%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-6px) rotate(2deg); }
  }

  /* =========================================================
     REALISTIC SHOP-STYLE BIRYANI HANDI
     ========================================================= */

  .pot{
    position:absolute;
    bottom:25px;
    left:50%;
    translate:-50% 0;
    width:360px;
    z-index:3;
    animation:pot-breathe 4s ease-in-out infinite;
  }

  @keyframes pot-breathe{
    0%,100%{ transform:translate(-50%,0); }
    50%{ transform:translate(-50%,-3px); }
  }

  /* ---------- HANDI LID ---------- */

  .pot-lid{
    position:relative;
    z-index:5;
    width:330px;
    height:75px;
    margin:0 auto -12px;

    background:
      linear-gradient(
        180deg,
        #fafafa 0%,
        #d9d9d9 18%,
        #8d8d8d 48%,
        #cfcfcf 70%,
        #727272 100%
      );

    border:5px solid #3c3027;
    border-radius:180px 180px 45px 45px;

    box-shadow:
      0 6px 0 #2b211b,
      inset 0 7px 8px rgba(255,255,255,.75),
      inset 0 -10px 15px rgba(0,0,0,.35);

    animation:lid-jiggle 4s ease-in-out infinite;
  }

  .pot-lid::before{
    content:"";
    position:absolute;
    left:25px;
    right:25px;
    top:12px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.7);
    filter:blur(3px);
  }

  .pot-lid::after{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    bottom:-7px;
    height:14px;
    border-radius:50%;
    background:linear-gradient(180deg,#bdbdbd,#555);
    border:3px solid #352820;
  }

  @keyframes lid-jiggle{
    0%,90%,100%{ transform:translateY(0); }
    94%{ transform:translateY(-2px); }
    97%{ transform:translateY(0); }
  }

  /* ---------- METAL KNOB ---------- */

  .pot-knob{
    width:34px;
    height:34px;
    position:absolute;
    top:-25px;
    left:50%;
    translate:-50% 0;
    border-radius:50%;

    background:
      radial-gradient(
        circle at 30% 25%,
        #ffffff,
        #d8d8d8 25%,
        #777 65%,
        #333 100%
      );

    border:4px solid #382a22;

    box-shadow:
      0 4px 5px rgba(0,0,0,.4),
      inset 2px 2px 4px rgba(255,255,255,.7);
  }

  /* ---------- MAIN METAL HANDI ---------- */

  .pot-body{
    position:relative;
    z-index:4;

    width:360px;
    height:245px;

    overflow:hidden;

    border:6px solid #352820;

    border-radius:
      35px 35px 125px 125px /
      35px 35px 165px 165px;

    background:
      linear-gradient(
        105deg,
        transparent 0%,
        rgba(255,255,255,.35) 18%,
        transparent 30%
      ),
      linear-gradient(
        90deg,
        #4a3930 0%,
        #9a7b62 8%,
        #c5a27b 20%,
        #7c5b43 36%,
        #bd9670 50%,
        #6e4d38 66%,
        #b88e68 82%,
        #46342a 100%
      );

    box-shadow:
      12px 15px 18px rgba(0,0,0,.35),
      inset 0 8px 8px rgba(255,255,255,.35),
      inset 0 -25px 30px rgba(0,0,0,.55),
      inset 15px 0 20px rgba(255,255,255,.12),
      inset -18px 0 25px rgba(0,0,0,.3);
  }

  .pot-body::before{
    content:"";
    position:absolute;
    inset:8px;

    border-radius:
      28px 28px 110px 110px /
      28px 28px 145px 145px;

    background:
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.04) 0px,
        rgba(255,255,255,.04) 2px,
        rgba(0,0,0,.04) 3px,
        transparent 5px
      );

    pointer-events:none;
    opacity:.8;
  }

  .pot-body::after{
    content:"";
    position:absolute;
    left:45px;
    right:45px;
    bottom:18px;
    height:16px;
    border-radius:50%;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.22),
        transparent
      );

    filter:blur(5px);
  }

  /* ---------- REALISTIC BIRYANI RICE ---------- */

  .pot-rice-layer{
    position:absolute;
    z-index:6;

    top:15px;
    left:18px;
    right:18px;
    height:135px;

    overflow:hidden;
    border-radius:50% 50% 46% 46%;

    background:
      radial-gradient(
        ellipse at 20% 30%,
        #fff7d2 0 3%,
        transparent 4%
      ),
      radial-gradient(
        ellipse at 40% 20%,
        #f8e8b1 0 3%,
        transparent 4%
      ),
      radial-gradient(
        ellipse at 70% 32%,
        #fff5c9 0 3%,
        transparent 4%
      ),
      radial-gradient(
        ellipse at 80% 65%,
        #e8bd63 0 4%,
        transparent 5%
      ),
      radial-gradient(
        ellipse at 35% 60%,
        #e8a52b 0 10%,
        transparent 11%
      ),
      radial-gradient(
        ellipse at 68% 50%,
        #d78b20 0 9%,
        transparent 10%
      ),
      linear-gradient(
        180deg,
        #fff5c9,
        #ead28b 55%,
        #c99238 100%
      );

    border:4px solid rgba(70,45,25,.55);

    box-shadow:
      inset 0 8px 15px rgba(255,255,255,.65),
      inset 0 -15px 18px rgba(90,45,10,.3);
  }

  .pot-rice-layer::before{
    content:"";
    position:absolute;
    inset:8px;

    background-image:
      radial-gradient(
        ellipse 3px 8px at 10% 20%,
        #fff9df 0 70%,
        transparent 75%
      ),
      radial-gradient(
        ellipse 3px 8px at 22% 42%,
        #f5df9d 0 70%,
        transparent 75%
      ),
      radial-gradient(
        ellipse 3px 8px at 35% 25%,
        #fff8d9 0 70%,
        transparent 75%
      ),
      radial-gradient(
        ellipse 3px 8px at 48% 55%,
        #f1d68c 0 70%,
        transparent 75%
      ),
      radial-gradient(
        ellipse 3px 8px at 60% 25%,
        #fff8d9 0 70%,
        transparent 75%
      ),
      radial-gradient(
        ellipse 3px 8px at 72% 48%,
        #f4d88d 0 70%,
        transparent 75%
      ),
      radial-gradient(
        ellipse 3px 8px at 86% 30%,
        #fff8d8 0 70%,
        transparent 75%
      ),
      radial-gradient(
        ellipse 3px 8px at 90% 70%,
        #e7c678 0 70%,
        transparent 75%
      );

    background-size:55px 38px;
    transform:rotate(-8deg);
    opacity:.95;
  }

  /* ---------- RICE GRAINS ---------- */

  .pot-rice-grain{
    position:absolute;
    z-index:8;

    width:7px;
    height:17px;

    border-radius:70% 30% 70% 30%;

    background:
      linear-gradient(
        90deg,
        #fff9df,
        #e7c976,
        #fff4c7
      );

    border:1px solid rgba(100,60,15,.25);

    box-shadow:
      1px 1px 2px rgba(0,0,0,.2);
  }

  .g1{
    top:28px;
    left:65px;
    transform:rotate(25deg);
  }

  .g2{
    top:42px;
    left:135px;
    transform:rotate(-30deg);
  }

  .g3{
    top:35px;
    left:215px;
    transform:rotate(20deg);
  }

  .g4{
    top:72px;
    left:110px;
    transform:rotate(-15deg);
  }

  /* ---------- CHICKEN PIECES ---------- */

  .pot-meat{
    position:absolute;
    z-index:9;

    width:27px;
    height:24px;

    border-radius:45% 60% 50% 40%;

    background:
      linear-gradient(
        135deg,
        #e29a42 0%,
        #a94d1d 45%,
        #68230f 100%
      );

    border:2px solid #56200f;

    box-shadow:
      inset 3px 3px 4px rgba(255,196,105,.4),
      3px 4px 5px rgba(0,0,0,.3);
  }

  .m1{
    top:65px;
    left:70px;
    transform:rotate(-15deg);
  }

  .m2{
    top:58px;
    left:160px;
    transform:rotate(20deg);
  }

  .m3{
    top:78px;
    left:225px;
    transform:rotate(-10deg);
  }

  /* ---------- CORIANDER / MINT ---------- */

  .pot-herb{
    position:absolute;
    z-index:10;

    width:12px;
    height:21px;

    border-radius:80% 0 80% 0;

    background:
      linear-gradient(
        135deg,
        #75a84d,
        #245d28
      );

    box-shadow:
      1px 2px 2px rgba(0,0,0,.25);
  }

  .h1{
    top:75px;
    left:125px;
    transform:rotate(35deg);
  }

  .h2{
    top:65px;
    left:185px;
    transform:rotate(-35deg);
  }

  .h3{
    top:50px;
    left:245px;
    transform:rotate(25deg);
  }

  /* ---------- HANDI SIDE HANDLES ---------- */

  .pot-handle{
    position:absolute;
    z-index:1;

    top:65px;

    width:62px;
    height:90px;

    border:9px solid #403129;

    background:
      linear-gradient(
        90deg,
        #5a4637,
        #b18b67,
        #5a4030
      );

    border-radius:50%;

    box-shadow:
      inset 5px 5px 7px rgba(255,255,255,.2),
      inset -5px -5px 8px rgba(0,0,0,.4),
      4px 5px 7px rgba(0,0,0,.25);
  }

  .pot-handle.left{
    left:-58px;
    transform:rotate(-8deg);
  }

  .pot-handle.right{
    right:-58px;
    transform:rotate(8deg);
  }

  /* ---------- HEAT / FLAMES ---------- */

  .flame-row{
    position:relative;
    z-index:0;

    display:flex;
    justify-content:center;
    gap:22px;

    margin-top:8px;
    height:55px;
  }

  .flame{
    font-size:2rem;

    filter:
      drop-shadow(0 0 8px rgba(255,100,0,.8))
      drop-shadow(0 4px 4px rgba(0,0,0,.3));

    animation:
      realistic-fire .65s ease-in-out infinite alternate;
  }

  .flame:nth-child(2){
    animation-delay:.15s;
  }

  .flame:nth-child(3){
    animation-delay:.3s;
  }

  @keyframes realistic-fire{
    from{
      transform:
        scaleY(1)
        scaleX(.9)
        translateY(0);
    }

    to{
      transform:
        scaleY(1.25)
        scaleX(1.05)
        translateY(-5px);
    }
  }

  .scroll-cue{
    position:absolute; bottom: 18px; left:50%; translate:-50% 0;
    font-weight:700; font-size:.85rem; color: var(--masala);
    display:flex; flex-direction:column; align-items:center; gap:4px;
    animation: bob 1.8s ease-in-out infinite;
  }
  @keyframes bob{ 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }

  /* ---------- WAVE DIVIDER ---------- */
  .wave{ display:block; width:100%; line-height:0; }
  .wave svg{ width:100%; height:60px; }

  /* ---------- SECTION HEADERS ---------- */
  .section{ padding: 100px 0; position:relative; }
  .section.tint{ background: var(--cream-2); }
  .section-head{ text-align:center; max-width: 640px; margin: 0 auto 60px; }
  .section-head .eyebrow{ transform: rotate(-2deg); }
  .section-head h2{
    font-size: clamp(2rem, 4vw, 2.8rem); color: var(--masala-deep); margin-top:10px;
  }
  .section-head p{ margin-top: 14px; font-size: 1.08rem; opacity:.85; }

  /* ---------- TIMELINE (HISTORY) ---------- */
  .timeline{ position:relative; max-width: 880px; margin: 0 auto; }
  .timeline::before{
    content:""; position:absolute; left:50%; top:0; bottom:0; width:6px;
    background-image: linear-gradient(var(--masala) 60%, transparent 0);
    background-size: 6px 22px; background-repeat: repeat-y;
    translate: -50% 0; border-radius: 10px;
  }
  .tl-item{
    position:relative; width: 50%; padding: 0 46px 70px;
  }
  .tl-item:nth-child(odd){ left:0; text-align:right; }
  .tl-item:nth-child(even){ left:50%; text-align:left; }
  .tl-dot{
    position:absolute; top:0; width: 54px; height:54px; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, var(--turmeric), var(--saffron-deep));
    border: 4px solid var(--masala-deep);
    display:flex; align-items:center; justify-content:center; font-size:1.5rem;
    box-shadow: 4px 4px 0 var(--masala-deep);
  }
  .tl-item:nth-child(odd) .tl-dot{ right:-27px; }
  .tl-item:nth-child(even) .tl-dot{ left:-27px; }
  .tl-card{
    background: var(--paper); border: 4px solid var(--masala); border-radius: 22px 8px 22px 8px;
    padding: 20px 24px; box-shadow: 6px 6px 0 var(--shadow-soft);
    display:inline-block; text-align:left;
  }
  .tl-card .yr{ font-family:'Baloo 2',cursive; font-weight:800; color: var(--chili); font-size:1.1rem; }
  .tl-card h3{ margin-top:2px; font-size:1.2rem; color: var(--masala-deep); }
  .tl-card p{ margin-top:8px; font-size: .95rem; line-height:1.5; opacity:.9; }

  @media (max-width: 760px){
    .timeline::before{ left: 26px; }
    .tl-item, .tl-item:nth-child(even){ width: 100%; left:0; text-align:left; padding: 0 0 50px 70px; }
    .tl-item:nth-child(odd) .tl-dot, .tl-item:nth-child(even) .tl-dot{ left: -2px; right:auto; }
  }

  /* ---------- VARIETY CARDS ---------- */
  .grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  }
  .v-card{
    background: var(--paper);
    border: 4px solid var(--masala);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: 26px 22px; text-align:center;
    box-shadow: 7px 7px 0 var(--masala);
    transition: transform .2s ease, box-shadow .2s ease, border-radius .3s ease;
  }
  .v-card:hover{
    transform: translate(-3px,-6px) rotate(-1deg);
    box-shadow: 10px 12px 0 var(--masala);
    border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
  }
  .v-card .bowl{ font-size: 3rem; margin-bottom: 10px; }
  .v-card .tag{
    display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.03em;
    background: linear-gradient(180deg, var(--curry-green), var(--curry-green-deep)); color:#fff; padding: 3px 12px; border-radius: 100px; margin-bottom:10px;
  }
  .v-card h3{ font-size: 1.15rem; color: var(--masala-deep); margin-bottom: 6px; }
  .v-card p{ font-size: .88rem; opacity:.85; line-height:1.5; min-height: 78px; }
  .flames{ margin-top: 10px; font-size: 1rem; letter-spacing:2px; }

  @media(max-width: 980px){ .grid{ grid-template-columns: repeat(2,1fr); } }
  @media(max-width: 560px){ .grid{ grid-template-columns: 1fr; } }

  /* ---------- REGION ATLAS (POSTCARDS) ---------- */
  .atlas-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  }
  .postcard{
    background: var(--paper);
    border: 3px solid var(--masala);
    border-radius: 14px;
    padding: 20px;
    position:relative;
    box-shadow: 5px 5px 0 var(--shadow-soft);
    transform: rotate(var(--r,0deg));
    transition: transform .2s ease;
  }
  .postcard:nth-child(3n+1){ --r:-1.4deg; }
  .postcard:nth-child(3n+2){ --r:1deg; }
  .postcard:nth-child(3n){ --r:-.6deg; }
  .postcard:hover{ transform: rotate(0deg) scale(1.03); z-index:2; }
  .postcard::before{
    content: attr(data-stamp);
    position:absolute; top:10px; right:10px; font-size: 1.8rem;
    background: var(--cream-2); border: 2px dashed var(--masala); border-radius: 8px;
    padding: 4px 8px;
  }
  .postcard .state{ font-size:.72rem; font-weight:700; letter-spacing:.06em; color: var(--chili); text-transform:uppercase; }
  .postcard h3{ font-size: 1.25rem; color: var(--masala-deep); margin: 4px 0 10px; padding-right: 46px; }
  .postcard .meta{ display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: 10px; }
  .postcard .chip{
    font-size: .72rem; font-weight:700; background: var(--turmeric);
    border: 2px solid var(--masala); padding: 2px 10px; border-radius: 100px;
  }
  .postcard p{ font-size: .9rem; line-height: 1.5; opacity:.88; }

  @media(max-width: 980px){ .atlas-grid{ grid-template-columns: repeat(2,1fr); } }
  @media(max-width: 620px){ .atlas-grid{ grid-template-columns: 1fr; } }

  /* ---------- TRIVIA FLIP CARDS ---------- */
  .flip-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
  .flip-card{ perspective: 1200px; height: 210px; cursor:pointer; }
  .flip-inner{
    position:relative; width:100%; height:100%; transition: transform .6s cubic-bezier(.4,.2,.2,1);
    transform-style: preserve-3d;
  }
  .flip-card.flipped .flip-inner{ transform: rotateY(180deg); }
  .flip-face{
    position:absolute; inset:0; backface-visibility:hidden;
    border-radius: 20px; border: 4px solid var(--masala);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding: 18px;
  }
  .flip-front{ background: linear-gradient(160deg, var(--turmeric), var(--saffron-deep)); box-shadow: 6px 6px 0 var(--masala); }
  .flip-front .icon{ font-size: 2.4rem; margin-bottom:8px; }
  .flip-front h4{ font-family:'Baloo 2',cursive; font-size:1.05rem; color: var(--masala-deep); }
  .flip-front .hint{ margin-top:10px; font-size:.75rem; font-weight:700; opacity:.6; }
  .flip-back{
    background: linear-gradient(160deg, var(--masala-deep), var(--pot-black)); color: var(--cream); transform: rotateY(180deg);
    box-shadow: 6px 6px 0 var(--chili);
  }
  .flip-back p{ font-size: .88rem; line-height:1.5; }

  @media(max-width: 980px){ .flip-grid{ grid-template-columns: repeat(2,1fr);} }
  @media(max-width: 620px){ .flip-grid{ grid-template-columns: 1fr;} }

  /* ---------- WHEEL ---------- */
  .wheel-section{ text-align:center; }
  .wheel-wrap{ position:relative; width: 340px; height: 340px; margin: 40px auto 0; }
  .wheel-pointer{
    position:absolute; top:-14px; left:50%; translate:-50% 0; z-index:5;
    font-size: 2.2rem; filter: drop-shadow(2px 3px 0 var(--masala-deep));
  }
  .wheel{
    width:100%; height:100%; border-radius:50%;
    border: 6px solid var(--masala-deep);
    box-shadow: 0 0 0 6px var(--turmeric), 8px 10px 0 var(--shadow-deep);
    position:relative; overflow:hidden;
    transition: transform 3.2s cubic-bezier(.17,.67,.16,.99);
  }
  .wheel-seg{
    position:absolute; width:50%; height:50%; top:0; left:50%;
    transform-origin: 0% 100%;
    display:flex; align-items:flex-start; justify-content:center;
  }
  .wheel-seg span{
    display:inline-block; transform: rotate(20deg) translateY(30px);
    font-weight:700; font-size:.72rem; color: var(--masala-deep);
    max-width: 70px; text-align:center; line-height:1.1;
  }
  .wheel-center{
    position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:4;
    width: 64px; height:64px; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #FF7A63, var(--chili) 55%, var(--chili-deep) 100%);
    border: 4px solid var(--masala-deep); display:flex; align-items:center; justify-content:center;
    font-size: 1.6rem;
  }
  .spin-result{
    margin-top: 26px; min-height: 60px;
  }
  .spin-bubble{
    display:inline-block; background: var(--paper); border: 3px solid var(--masala);
    border-radius: 18px; padding: 12px 22px; font-weight:700; font-size:1.05rem;
    box-shadow: 4px 4px 0 var(--masala); color: var(--masala-deep);
  }

  /* ---------- FOOTER ---------- */
  footer{
    background: linear-gradient(180deg, var(--masala-deep), var(--pot-black)); color: var(--cream);
    padding: 60px 0 30px; text-align:center; position:relative;
  }
  footer h3{ font-size: 1.8rem; color: var(--turmeric); }
  footer p{ margin-top:10px; opacity:.75; max-width: 46ch; margin-inline:auto; }
  .rice-row{ margin-top: 24px; font-size:1.4rem; letter-spacing: 10px; opacity:.7; }
  .fine{ margin-top: 34px; font-size:.78rem; opacity:.5; }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }

  @media (max-width: 900px){
    .hero-grid{ grid-template-columns: 1fr; }
    .pot-scene{ height: 390px; }
    .pot{ transform:scale(.82); transform-origin:center bottom; }
    .leg-piece{ font-size: 2.4rem; }
    .raita-bowl{ width: 96px; height: 74px; }
    .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper); flex-direction:column; padding: 10px 24px 18px; border-bottom: 4px solid var(--masala); }
    .nav-links.open{ display:flex; }
    .nav-toggle{ display:inline-block; }
    .atlas-grid{ grid-template-columns: 1fr; }
  }