:root{
  --bg:#0b0b10;
  --panel:#0f1724;
  --glass: rgba(255,255,255,0.04);
  --muted: #98a0b3;
  --accent: #7b46ff; /* purple match */
  --accent-2: #ff7f50; /* warm grocery accent */
  --glass-2: rgba(255,255,255,0.03);
  --radius: 18px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% 20%, rgba(123,70,255,0.12), transparent 8%),
              radial-gradient(900px 400px at 90% 80%, rgba(255,127,80,0.06), transparent 8%),
              var(--bg);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* stage and topbar */
.stage{min-height:100vh; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 36px; gap:18px;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.brand { display:flex; align-items:center; gap:12px; }
.logo{width:64px;height:64px;object-fit:contain;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.8)}
.brand-title{font-weight:700; font-size:18px; color: #fff; display:block; letter-spacing:0.6px}
.brand-sub{display:block;color:var(--muted); font-size:12px; margin-top:2px}

/* nav */
nav{display:flex; gap:16px; align-items:center}
.link{color:var(--muted); text-decoration:none; font-weight:600}
.btn{border:0; padding:10px 18px; border-radius:12px; cursor:pointer; font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--accent), #5c3bff); color:white; box-shadow:0 8px 30px rgba(123,70,255,0.12);}

/* Hero */
.hero{display:flex; align-items:center; justify-content:space-between; gap:28px; padding:60px 6vw 40px; flex-wrap:wrap}
.hero-left{flex:1 1 480px; max-width:720px}
.headline{font-size:48px; line-height:1.03; margin:0 0 18px; color:#fff; text-shadow:0 8px 30px rgba(0,0,0,0.6)}
.lead{color:var(--muted); font-size:18px; margin-bottom:20px}

/* CTA row */
.cta-row{display:flex; gap:14px; align-items:center; margin-bottom:18px}
.btn-cta{
  background: linear-gradient(90deg, #ffffff, #f7f7f9);
  color: #111;
  padding:12px 20px;
  border-radius:12px;
  box-shadow: 0 20px 40px rgba(2,6,23,0.6);
  transform: translateZ(0);
}
.btn-cta:hover{transform: translateY(-6px) scale(1.02)}
.order-whatsapp{color:#fff; background:transparent; border:1px solid rgba(255,255,255,0.06); padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700}

/* trust row */
.trust{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.trust-item{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:8px 12px; border-radius:12px; color:var(--muted); font-weight:600}

/* Hero right mock device */
.hero-right{flex:0 0 360px; display:flex; justify-content:center; align-items:center; min-width:320px; perspective:1400px}
.device-card{
  width:320px; height:620px; border-radius:34px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  box-shadow: 0 30px 80px rgba(2,6,23,0.7);
  position:relative; transform-style:preserve-3d; transition: transform 0.25s ease;
  padding:18px; display:flex; align-items:center; justify-content:center;
  overflow:visible;
  border:1px solid rgba(255,255,255,0.03);
}

/* screen */
.screen{width:260px; height:540px; border-radius:28px; overflow:hidden; background:linear-gradient(180deg,#fff,#f6f7fb); box-shadow: inset 0 2px 12px rgba(0,0,0,0.06)}
.app-snap{display:block;width:100%;height:100%;object-fit:cover;}

/* Veg 3D blobs (pure CSS) */
.veg{position:absolute; width:78px; height:78px; border-radius:22px; transform: translateZ(60px); box-shadow: 0 18px 30px rgba(12,10,8,0.5); opacity:0; transition:all .6s cubic-bezier(.2,.9,.3,1)}
.veg-1{right: -28px; bottom: 110px; background: linear-gradient(135deg,#9fe6a0,#4fb96b)}
.veg-2{left:-36px; bottom:180px; width:96px;height:96px; background: linear-gradient(135deg,#fff1a8,#ffd35a); border-radius:24px}
.veg-3{right:20px; top:-28px; background: linear-gradient(135deg,#ffd0c0,#ff7f50)}

/* floating shapes background */
.float-shape{position:fixed; border-radius:50%; filter: blur(40px); opacity:0.32; transform: translateZ(0)}
.shape-1{width:380px;height:280px; left:-60px; top:6%; background: linear-gradient(90deg,#7b46ff66,#8b5cf666)}
.shape-2{width:280px;height:180px; right:-40px; top:26%; background: linear-gradient(90deg,#ff7f5060,#ffbf8060)}
.shape-3{width:240px;height:240px; left:10%; bottom:-60px; background: linear-gradient(90deg,#3ad29f40,#7b46ff40)}

/* panels */
.panel{padding:48px 6vw; background:transparent}
.panel .container{max-width:1100px;margin:0 auto}
.panel h2{font-size:24px;margin-bottom:20px}
.grid{display:flex; gap:18px; flex-wrap:wrap}
.card{flex:1 1 300px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:14px; padding:20px; min-height:140px; box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.card h4{margin:8px 0 6px}
.icon{font-size:28px}

/* light panel style */
.panel.light{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); margin-top:10px}

/* steps */
.steps{list-style:none; padding:0; margin:0; color:var(--muted); display:flex; gap:18px; flex-wrap:wrap}
.steps li{background:var(--glass); padding:14px 20px; border-radius:12px; min-width:200px}

/* footer */
.footer{margin-top:auto; padding:26px 6vw; border-top:1px solid rgba(255,255,255,0.03); background:transparent}
.foot-row{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}

/* small and responsive */
@media (max-width:920px){
  .hero{padding:40px 4vw}
  .headline{font-size:36px}
  .hero-right{flex-basis:360px;margin-top:30px}
}
@media (max-width:680px){
  .hero{flex-direction:column; align-items:flex-start}
  .device-card{width:300px;height:560px}
  .hero-right{align-self:center}
  .brand-title{font-size:16px}
}