:root{
    --matte-black:#0a0908;
    --charcoal:#1a1714;
    --charcoal-2:#231e19;
    --gold:#c9a24b;
    --gold-bright:#f0d28a;
    --gold-dim:#8a6f34;
    --turmeric:#d9931f;
    --chilli:#a02420;
    --coriander:#5f7a4f;
    --soft-white:#f4efe4;
    --soft-white-dim:#cfc7b6;
    --serif: 'Fraunces', serif;
    --sans: 'Manrope', sans-serif;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{background:var(--matte-black); scroll-behavior:auto;}
  body{
    background:var(--matte-black);
    color:var(--soft-white);
    font-family:var(--sans);
    overflow-x:hidden;
    cursor:none;
  }
  ::selection{background:var(--gold); color:var(--matte-black);}

  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}

  .eyebrow{
    font-family:var(--sans);
    letter-spacing:.35em;
    text-transform:uppercase;
    font-size:11px;
    color:var(--gold);
    font-weight:600;
  }

  h1,h2,h3{
    font-family:var(--serif);
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--soft-white);
  }

  .hairline{
    width:48px; height:1px;
    background:linear-gradient(90deg,var(--gold),transparent);
    margin:18px 0;
  }
  .hairline.center{margin:18px auto;}

  /* ---------- custom cursor ---------- */
  #cursor{
    position:fixed; top:0; left:0; width:22px; height:22px;
    border:1px solid var(--gold-bright);
    border-radius:50%; pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%);
    transition:width .25s ease, height .25s ease, border-color .25s ease, opacity .3s ease;
    mix-blend-mode:difference;
  }
  #cursor.hover{width:52px; height:52px; border-color:var(--gold);}
  #cursor-dot{
    position:fixed; top:0; left:0; width:4px; height:4px; background:var(--gold-bright);
    border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  }
  @media (hover:none){ #cursor,#cursor-dot{display:none;} body{cursor:auto;} }

  /* ---------- nav ---------- */
  nav{
    position:fixed; top:0; left:0; width:100%; z-index:500;
    display:flex; align-items:center; justify-content:space-between;
    padding: 1rem 5vw;
    mix-blend-mode:normal;
    background:linear-gradient(to bottom, rgba(10,9,8,.75), transparent);
    transition:padding .4s ease;
  }
  nav .brand{display:flex; align-items:center; gap:12px;}
  nav .brand img{height:8rem; width:100%;object-fit:contain;}
  nav .brand span{font-family:var(--serif); font-size:20px; letter-spacing:.04em; color:var(--soft-white);}
  nav ul{display:flex; gap:44px; list-style:none;}
  nav ul li a{
    font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft-white-dim);
    position:relative; padding-bottom:4px;
  }
  nav ul li a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
    transition:width .35s ease;
  }
  nav ul li a:hover::after{width:100%;}
  nav ul li a:hover{color:var(--soft-white);}
  #navToggle{display:none;}

  @media (max-width:860px){
    nav ul{display:none;}
  }

  /* ---------- canvases ---------- */
  #bgCanvas, #spiceCanvasBack, #spiceCanvasFront{
    position:fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none;
  }
  #bgCanvas{z-index:1;}
  #spiceCanvasBack{z-index:2;}
  #spiceCanvasFront{z-index:60;}

  main{position:relative; z-index:10;}

  /* ---------- hero ---------- */
  .hero{
    position:relative; height:100svh; min-height:640px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .hero-glow{
    position:absolute; top:50%; left:50%; width:1100px; height:1100px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(217,147,31,.24) 0%, rgba(201,162,75,.08) 42%, transparent 70%);
    filter:blur(10px);
    z-index:3;
  }
  .pouch-stage{
    position:relative; z-index:5;
    perspective:1600px;
    width:640px; height:380px;
  }
  .pouch-orbit{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d;
    will-change:transform;
  }
  .pouch-3d{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d;
    will-change:transform;
  }
  .pouch-face{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    backface-visibility:hidden;
    opacity:0;
    transform:scale(0.96);
    transition:opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.4s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }
  .pouch-face.active{
    opacity:1; transform:scale(1);
    pointer-events:auto;
  }
  .pouch-face img{
    width:100%; height:100%; object-fit:contain;
    -webkit-mask-image: radial-gradient(ellipse 66% 68% at 50% 50%, #000 55%, transparent 92%);
            mask-image: radial-gradient(ellipse 66% 68% at 50% 50%, #000 55%, transparent 92%);
    filter: saturate(1.08) contrast(1.05) drop-shadow(0 25px 35px rgba(0,0,0,.5));
      box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5); 
  }

  .hero-slide-label{
    position:absolute; left:50%; bottom:-48px; transform:translateX(-50%);
    z-index:9; text-align:center; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  .hero-slide-label .hindi{
    font-family:var(--serif); font-style:italic; font-size:14px; color:var(--gold);
    letter-spacing:.03em;
  }
  .hero-slide-label .eng{
    font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--soft-white-dim);
  }

  .hero-dots{
    position:absolute; left:50%; bottom:-82px; transform:translateX(-50%);
    z-index:9; display:flex; gap:9px;
  }
  .hero-dots span{
    width:6px; height:6px; border-radius:50%; background:rgba(201,162,75,.3);
    cursor:pointer; transition:background .4s ease, transform .4s ease;
  }
  .hero-dots span.active{ background:var(--gold-bright); transform:scale(1.3); }
  .pouch-shadow{
    position:absolute; bottom:-20px; left:50%; width:340px; height:36px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%);
    z-index:4; filter:blur(4px);
  }

  /* ---------- AR display effects (replaces spin) ---------- */
  .ar-ring{
    position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
    width:420px; height:110px; z-index:3; pointer-events:none;
    opacity:.85;
  }
  .ar-ring svg{width:100%; height:100%; display:block; overflow:visible;}
  .ar-ring .ring-static{ stroke:rgba(201,162,75,.18); }
  .ar-ring .ring-dash{
    stroke:var(--gold-bright); stroke-dasharray:6 14;
    transform-origin:210px 55px; animation:ringSpin 9s linear infinite;
  }
  @keyframes ringSpin{ to{ transform:rotate(360deg); } }

  .ar-corners{ position:absolute; inset:-6px; z-index:7; pointer-events:none; }
  .ar-corners span{
    position:absolute; width:22px; height:22px;
    border-color:var(--gold-bright); opacity:0;
    animation:arLock 6s ease-in-out infinite;
    filter:drop-shadow(0 0 4px rgba(240,210,138,.5));
  }
  .ar-corners span:nth-child(1){ top:0; left:0; border-top:1.5px solid; border-left:1.5px solid; animation-delay:0s; }
  .ar-corners span:nth-child(2){ top:0; right:0; border-top:1.5px solid; border-right:1.5px solid; animation-delay:.15s; }
  .ar-corners span:nth-child(3){ bottom:0; left:0; border-bottom:1.5px solid; border-left:1.5px solid; animation-delay:.3s; }
  .ar-corners span:nth-child(4){ bottom:0; right:0; border-bottom:1.5px solid; border-right:1.5px solid; animation-delay:.45s; }
  @keyframes arLock{
    0%{opacity:0; transform:scale(1.15);}
    8%{opacity:1; transform:scale(1);}
    70%{opacity:1; transform:scale(1);}
    85%{opacity:0; transform:scale(1.05);}
    100%{opacity:0;}
  }

  .ar-scanline{
    position:absolute; left:8%; width:84%; height:2px; z-index:8; pointer-events:none;
    background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
    mix-blend-mode:screen; opacity:.8;
    animation:arScan 4.5s ease-in-out infinite;
    box-shadow:0 0 12px 2px rgba(240,210,138,.5);
  }
  @keyframes arScan{
    0%{ top:8%; opacity:0; }
    10%{ opacity:.9; }
    48%{ top:88%; opacity:.9; }
    58%{ opacity:0; }
    100%{ top:8%; opacity:0; }
  }

  .ar-motes{ position:absolute; inset:-40px; z-index:6; pointer-events:none; }
  .ar-motes i{
    position:absolute; top:50%; left:50%; width:3px; height:3px; border-radius:50%;
    background:var(--gold-bright); box-shadow:0 0 6px 2px rgba(240,210,138,.7);
    animation:moteOrbit linear infinite;
  }
  @keyframes moteOrbit{
    from{ transform: rotate(0deg) translateX(var(--r)) rotate(0deg); }
    to{ transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); }
  }

  .hero-copy{
    position:absolute; top:14%; left:50%; transform:translateX(-50%);
    text-align:center; z-index:6; width:100%; padding:0 20px;
  }
  .hero-copy .eyebrow{display:block; margin-bottom:22px;}
  .hero-copy h1{
    font-size:clamp(34px, 6vw, 74px);
    line-height:1.08;
    font-weight:400;
  }
  .hero-copy h1 em{font-style:italic; color:var(--gold-bright); font-weight:500;}

  .hero-bottom{
    position:absolute; bottom:48px; left:50%; transform:translateX(-50%);
    text-align:center; z-index:6; width:100%; padding:0 24px;
  }
  .hero-bottom p{
    max-width:480px; margin:0 auto 28px; color:var(--soft-white-dim);
    font-size:15px; line-height:1.7; font-weight:300;
  }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 34px;
    border:1px solid var(--gold);
    color:var(--gold-bright);
    font-size:12px; letter-spacing:.22em; text-transform:uppercase;
    font-weight:600;
    position:relative; overflow:hidden;
    background:transparent;
    transition:color .4s ease, transform .3s ease;
  }
  .btn::before{
    content:''; position:absolute; inset:0; background:var(--gold);
    transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.65,0,.35,1); z-index:-1;
  }
  .btn:hover::before{transform:scaleX(1);}
  .btn:hover{color:var(--matte-black); transform:translateY(-2px);}

  .scroll-cue{
    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
    z-index:6; display:flex; flex-direction:column; align-items:center; gap:8px;
    color:var(--soft-white-dim); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  }
  .scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--gold), transparent); animation:cueMove 2.2s ease-in-out infinite;}
  @keyframes cueMove{0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;}}

  /* ---------- sections generic ---------- */
  section{position:relative; padding:170px 8vw; z-index:10;}
  .section-head{text-align:center; max-width:640px; margin:0 auto 80px;}
  .section-head h2{font-size:clamp(28px,4vw,46px); font-weight:400;}
  .section-head p{color:var(--soft-white-dim); font-weight:300; margin-top:18px; line-height:1.8; font-size:15px;}

  /* ---------- about ---------- */
  .about{background:linear-gradient(180deg, var(--matte-black), var(--charcoal) 40%, var(--matte-black));}
  .about-grid{
    display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:center; max-width:1180px; margin:0 auto;
  }
  .about-text p{color:var(--soft-white-dim); line-height:1.9; font-weight:300; font-size:16px; max-width:460px;}
  .stat-row{display:flex; gap:60px; margin-top:56px;}
  .stat h3{
    font-size:56px; color:var(--gold-bright); font-weight:400; line-height:1;
    font-family:var(--serif);
  }
  .stat span{
    display:block; margin-top:10px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--soft-white-dim);
  }
  .about-visual{
    position:relative; aspect-ratio:3/4; border-radius:2px; overflow:hidden;
    border:1px solid rgba(201,162,75,.25);
  }
  .about-visual img{width:100%; height:100%; object-fit:cover;}
  .about-visual::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(10,9,8,.85));
  }

  /* ---------- featured products ---------- */
  .products{background:var(--matte-black);}
  .product-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; max-width:1240px; margin:0 auto;
  }
  .product-card{
    position:relative; background:linear-gradient(160deg, var(--charcoal), var(--charcoal-2));
    border:1px solid rgba(201,162,75,.16);
    padding:44px 34px 38px;
    text-align:center;
    transition:transform .6s cubic-bezier(.2,.8,.2,1), border-color .5s ease, box-shadow .5s ease;
    overflow:hidden;
  }
  .product-card::before{
    content:''; position:absolute; top:-60%; left:-60%; width:220%; height:220%;
    background:radial-gradient(circle, rgba(240,210,138,.10), transparent 55%);
    opacity:0; transition:opacity .6s ease;
  }
  .product-card:hover{
    transform:translateY(-14px) rotateX(2deg);
    border-color:rgba(201,162,75,.55);
    box-shadow:0 40px 70px -20px rgba(0,0,0,.6), 0 0 40px rgba(201,162,75,.08);
  }
  .product-card:hover::before{opacity:1;}
  .product-card .frame{
    height:280px; display:flex; align-items:center; justify-content:center; margin-bottom:26px;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .product-card:hover .frame{transform:translateY(-8px) scale(1.03);}
  .product-card .frame img{max-height:100%; width:auto; filter:drop-shadow(0 25px 30px rgba(0,0,0,.5));}
  .product-card .tag{font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold);}
  .product-card h3{font-size:24px; margin-top:14px; font-weight:500;}
  .product-card p.desc{color:var(--soft-white-dim); font-size:13.5px; margin-top:10px; font-weight:300; line-height:1.7;}
  .product-card .line-cta{
    display:inline-block; margin-top:22px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--soft-white-dim); border-bottom:1px solid rgba(201,162,75,.4); padding-bottom:4px;
    transition:color .3s ease, border-color .3s ease;
  }
  .product-card:hover .line-cta{color:var(--gold-bright); border-color:var(--gold);}

  /* ---------- why rajkumari ---------- */
  .why{background:linear-gradient(180deg, var(--matte-black), var(--charcoal));}
  .why-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:1180px; margin:0 auto;
    background:rgba(201,162,75,.16);
    border:1px solid rgba(201,162,75,.16);
  }
  .why-item{
    background:var(--matte-black); padding:52px 36px; text-align:center;
    transition:background .4s ease;
  }
  .why-item:hover{background:var(--charcoal-2);}
  .why-item .icon{
    width:46px; height:46px; margin:0 auto 22px; color:var(--gold);
  }
  .why-item h4{font-family:var(--serif); font-size:19px; font-weight:500; color:var(--soft-white);}
  .why-item p{margin-top:10px; font-size:13px; color:var(--soft-white-dim); font-weight:300; line-height:1.6;}

  /* ---------- 3d story (pinned) ---------- */
  .story{
    height:340vh;
    position:relative;
    background:var(--matte-black);
  }
  .story-stick{
    position:sticky; top:0; height:100svh;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .farm-slider{
    position:absolute; inset:0; z-index:2;
  }
  .farm-slide{
    position:absolute; inset:0; opacity:0;
    transition:opacity 1.4s cubic-bezier(.4,0,.2,1);
  }
  .farm-slide.active{ opacity:1; }
  .farm-slide svg{ width:100%; height:100%; display:block; }
  .farm-slider::after{
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at center, rgba(10,9,8,.35) 0%, rgba(10,9,8,.82) 68%, rgba(10,9,8,.96) 100%);
    z-index:3;
  }
  .farm-caption{
    position:absolute; left:6%; bottom:9%; z-index:4;
    opacity:0; transform:translateY(10px);
    transition:opacity 1s ease .3s, transform 1s ease .3s;
  }
  .farm-slide.active .farm-caption{ opacity:1; transform:translateY(0); }
  .farm-caption .eyebrow{display:block; margin-bottom:8px;}
  .farm-caption h4{
    font-family:var(--serif); font-size:22px; font-weight:500; color:var(--soft-white);
  }
  .farm-dots{
    position:absolute; left:6%; bottom:5.5%; z-index:5; display:flex; gap:9px;
  }
  .farm-dots span{
    width:6px; height:6px; border-radius:50%; background:rgba(201,162,75,.3);
    transition:background .4s ease, transform .4s ease;
  }
  .farm-dots span.active{ background:var(--gold-bright); transform:scale(1.3); }
  .story-copy{
    position:relative; z-index:8; text-align:center; max-width:620px; padding:0 24px;
  }
  .story-copy .eyebrow{display:block; margin-bottom:20px;}
  .story-copy h2{font-size:clamp(26px,4.4vw,48px); font-weight:400; line-height:1.25;}
  .story-line{opacity:0;}

  /* ---------- showcase ---------- */
  .showcase{background:linear-gradient(180deg, var(--charcoal), var(--matte-black));}
  .showcase-wrap{
    display:grid; grid-template-columns:1fr 1fr; gap:90px; max-width:1180px; margin:0 auto; align-items:center;
  }
  .showcase-stage{
    position:relative; height:520px; display:flex; align-items:center; justify-content:center;
  }
  .showcase-pouch{
    position:relative; width:280px; height:400px; transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
  }
  .showcase-pouch img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));}
  .showcase-copy p{color:var(--soft-white-dim); font-weight:300; line-height:1.9; font-size:15.5px; max-width:440px;}
  .showcase-list{margin-top:34px; display:flex; flex-direction:column; gap:16px;}
  .showcase-list div{
    display:flex; align-items:baseline; gap:16px; font-size:13px; color:var(--soft-white-dim);
    border-top:1px solid rgba(201,162,75,.16); padding-top:14px;
  }
  .showcase-list div b{color:var(--gold-bright); font-family:var(--serif); font-weight:500; font-size:16px;}

  /* ---------- footer ---------- */
  footer{
    background:var(--matte-black); border-top:1px solid rgba(201,162,75,.18);
    padding:80px 8vw 40px; position:relative; z-index:10;
  }
  .foot-grid{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:50px; max-width:1240px; margin:0 auto 60px;
  }
  .foot-brand img{height:44px; margin-bottom:18px;}
  .foot-brand p{color:var(--soft-white-dim); font-size:13px; max-width:280px; line-height:1.7; font-weight:300;}
  .foot-col h5{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
  .foot-col p, .foot-col a{display:block; color:var(--soft-white-dim); font-size:13.5px; margin-bottom:10px; font-weight:300;}
  .foot-col a:hover{color:var(--gold-bright);}
  .foot-bottom{
    max-width:1240px; margin:0 auto; padding-top:30px; border-top:1px solid rgba(255,255,255,.06);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:11.5px; color:var(--soft-white-dim); letter-spacing:.03em;
  }

  @media (max-width:900px){
    .about-grid, .showcase-wrap{grid-template-columns:1fr; gap:50px;}
    .product-grid{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:1fr;}
    section{padding:110px 6vw;}
    .stat-row{gap:36px;}
    .stat h3{font-size:40px;}
    .pouch-stage{width:92vw; max-width:520px; height:calc(92vw * 0.594); max-height:308px;}
    .ar-ring{width:80%;}
  }

  [data-reveal]{opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);}
  [data-reveal].in{opacity:1; transform:translateY(0);}