/* assets/css/landing.css — public landing page (landing.php). Builds on style.css tokens. */
html{scroll-behavior:smooth;}
body.lp{background:var(--surface); color:var(--text); overflow-x:hidden;}
.lp-wrap{max-width:1160px; margin:0 auto; padding:0 20px;}
.lp-narrow{max-width:820px;}
.lp-center{text-align:center;}
section[id]{scroll-margin-top:72px;}

/* Nav */
.lp-nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:saturate(1.6) blur(12px); -webkit-backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--border);}
.lp-nav-in{display:flex; align-items:center; gap:24px; height:64px;}
.lp-brand{display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-size:20px;}
.lp-brand img{border-radius:8px;}
.lp-brand .brand-name{color:var(--text); font-size:20px; font-weight:700;}
.lp-links{display:flex; gap:4px; margin-left:12px;}
.lp-links a{padding:8px 12px; border-radius:var(--radius-md); color:var(--text-2); font-weight:500; font-size:var(--fs-sm); text-decoration:none;}
.lp-links a:hover{background:var(--bg); color:var(--text);}
.lp-nav-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}

/* Hero */
.lp-hero{position:relative; padding:72px 0 88px; background:
  radial-gradient(900px 420px at 85% -10%, rgba(252,204,8,.22), transparent 60%),
  radial-gradient(700px 380px at 0% 0%, rgba(243,89,1,.10), transparent 60%), var(--surface);}
.lp-hero-in{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.lp-eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--brand-light); color:var(--brand-dark); font-size:var(--fs-sm); font-weight:600;}
.lp-eyebrow svg{width:16px; height:16px;}
.lp-hero h1{font-size:clamp(32px, 5vw, 54px); line-height:1.08; letter-spacing:-.03em; font-weight:800; margin:18px 0 16px;}
.lp-lead{font-size:clamp(16px, 1.6vw, 19px); color:var(--text-2); line-height:1.6; max-width:560px; margin:0 0 28px;}
.lp-cta-row{display:flex; flex-wrap:wrap; gap:12px;}
.lp-cta-row .btn-lg{height:50px; padding:0 24px; font-size:16px;}
.lp-trust{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px; color:var(--text-2); font-size:var(--fs-sm);}
.lp-trust li{display:flex; align-items:center; gap:6px;}
.lp-trust svg{width:16px; height:16px; color:var(--success);}

.lp-hero-art{position:relative; padding:40px 10px 24px;}
.lp-mock{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px; box-shadow:0 30px 60px -20px rgba(168,59,0,.28), 0 8px 20px -8px rgba(16,24,40,.12); transform:rotate(-1.5deg);}
.lp-mock-head{display:flex; align-items:center; gap:6px; padding-bottom:14px; margin-bottom:6px; border-bottom:1px dashed var(--border); font-size:var(--fs-sm);}
.lp-mock-head b{margin-left:auto;}
.lp-dot{width:10px; height:10px; border-radius:50%; background:#E5E7EB;}
.lp-dot:first-child{background:#F87171;} .lp-dot:nth-child(2){background:#FBBF24;} .lp-dot:nth-child(3){background:#34D399;}
.lp-mock-row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; font-size:15px; border-bottom:1px solid var(--border);}
.lp-mock-row span{display:flex; align-items:center; gap:8px;}
.lp-mock-row i{width:12px; height:12px; border:1.5px solid; border-radius:2px; position:relative; flex:none;}
.lp-mock-row i::after{content:""; position:absolute; inset:2px; border-radius:50%; background:currentColor;}
.lp-mock-row i.veg{color:#16A34A;} .lp-mock-row i.nonveg{color:#B91C1C;}
.lp-mock-tax{color:var(--text-muted); font-size:13px;}
.lp-mock-total{display:flex; justify-content:space-between; padding:14px 0 6px; font-size:20px; font-weight:800;}
.lp-mock-total b{color:var(--brand);}
.lp-mock-pay{display:flex; gap:8px; margin-top:10px;}
.lp-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--bg); font-size:13px; font-weight:600;}
.lp-chip svg{width:14px; height:14px;}
.lp-chip:first-child{background:#ECFDF5; color:#047857;}
.lp-float{position:absolute; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow-lg); font-size:14px;}
.lp-float > svg{width:34px; height:34px; padding:7px; border-radius:10px; background:var(--brand-gradient); color:#fff;}
.lp-float span{display:flex; flex-direction:column; line-height:1.25;}
.lp-float small{color:var(--text-muted); font-size:12px;}
.lp-float-a{left:-18px; bottom:-6px;}
.lp-float-b{right:-14px; top:-30px;}

/* Sections */
.lp-section{padding:88px 0;}
.lp-alt{background:var(--bg);}
.lp-head{text-align:center; max-width:680px; margin:0 auto 48px;}
.lp-kicker{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand);}
.lp-head h2{font-size:clamp(26px, 3.4vw, 38px); line-height:1.15; letter-spacing:-.02em; font-weight:800; margin:10px 0 12px;}
.lp-head p{color:var(--text-2); font-size:17px; line-height:1.6; margin:0;}

.lp-features{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px;}
.lp-feature{padding:26px; border:1px solid var(--border); border-radius:18px; background:var(--surface); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.lp-feature:hover{transform:translateY(-3px); box-shadow:0 18px 36px -18px rgba(168,59,0,.28); border-color:rgba(230,81,0,.35);}
.lp-feature-ic{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:var(--brand-light); color:var(--brand);}
.lp-feature-ic svg{width:22px; height:22px;}
.lp-feature h3, .lp-step h3{font-size:18px; font-weight:700; margin:16px 0 6px;}
.lp-feature p, .lp-step p{color:var(--text-2); font-size:15px; line-height:1.55; margin:0;}

.lp-steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; counter-reset:none;}
.lp-step{position:relative; padding:28px; border-radius:18px; background:var(--surface); border:1px solid var(--border);}
.lp-step-n{position:absolute; top:20px; right:22px; font-size:44px; font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(230,81,0,.35);}

/* Pricing */
.lp-tabs-wrap{max-width:460px; margin:0 auto 10px;}
.lp-tabs-wrap .plan-tabs{background:var(--bg); border-radius:var(--radius-lg);}
.lp-tab-hint{text-align:center; color:var(--text-muted); font-size:var(--fs-sm); margin:0 0 28px;}
.lp-plans{display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:22px; align-items:stretch;}
.lp-plan{position:relative; display:flex; flex-direction:column; padding:28px 26px; border:1px solid var(--border); border-radius:20px; background:var(--surface);}
.lp-plan.is-popular{border:2px solid var(--brand); box-shadow:0 26px 50px -24px rgba(230,81,0,.45);}
.lp-plan-flag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--brand-gradient); color:#fff; font-size:12px; font-weight:700; white-space:nowrap; text-shadow:0 1px 1px rgba(120,40,0,.35);}
.lp-plan-flag svg{width:13px; height:13px;}
.lp-plan h3{font-size:20px; font-weight:700; margin:0;}
.lp-plan-desc{color:var(--text-muted); font-size:14px; margin:4px 0 0; min-height:40px;}
.lp-plan-price{font-size:38px; font-weight:800; letter-spacing:-.02em; margin:18px 0 2px;}
.lp-plan-price small{font-size:15px; font-weight:600; color:var(--text-muted); margin-left:4px; letter-spacing:0;}
.lp-plan-sub{color:var(--text-muted); font-size:13px; margin-bottom:18px;}
.lp-plan .btn-block{height:48px;}
.lp-plan-trial{display:flex; align-items:center; justify-content:center; gap:6px; margin:10px 0 0; color:var(--text-2); font-size:13px;}
.lp-plan-trial svg{width:14px; height:14px;}
.lp-plan-features{margin:22px 0 0; padding-top:18px; border-top:1px solid var(--border); gap:8px;}
.lp-plan-features li{font-size:14.5px;}
.lp-plan-limits{list-style:none; padding:14px 0 0; margin:auto 0 0; display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.lp-plan-limits li{display:flex; flex-direction:column; padding:8px 10px; border-radius:10px; background:var(--bg); font-size:12px; color:var(--text-muted);}
.lp-plan-limits b{font-size:15px; color:var(--text);}
.lp-plan-features + .lp-plan-limits{margin-top:18px;}
.lp-note{display:flex; align-items:center; justify-content:center; gap:8px; color:var(--text-muted); font-size:var(--fs-sm); margin:28px 0 0; text-align:center;}
.lp-note svg{width:16px; height:16px; color:var(--success); flex:none;}

/* FAQ */
.lp-faq{display:flex; flex-direction:column; gap:12px;}
.lp-faq details{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:0 20px;}
.lp-faq summary{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; font-weight:600; font-size:16px; cursor:pointer; list-style:none;}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary svg{width:18px; height:18px; flex:none; transition:transform .2s ease; color:var(--text-muted);}
.lp-faq details[open] summary svg{transform:rotate(180deg);}
.lp-faq details p{margin:0 0 18px; color:var(--text-2); line-height:1.6;}

/* Final CTA + footer */
.lp-final{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:44px 48px; border-radius:24px; background:var(--brand-gradient); color:#fff; box-shadow:0 30px 60px -28px rgba(168,59,0,.6);}
.lp-final h2{font-size:clamp(24px, 3vw, 34px); font-weight:800; letter-spacing:-.02em; margin:0 0 6px; text-shadow:0 1px 2px rgba(120,40,0,.3);}
.lp-final p{margin:0; font-size:17px; opacity:.95;}
.lp-btn-light{background:#fff; color:var(--brand-dark); height:50px; padding:0 26px; font-weight:700; flex:none;}
.lp-btn-light:hover{background:#FFF5EB;}
.lp-foot{border-top:1px solid var(--border); padding:28px 0; color:var(--text-muted);}
.lp-foot-in{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.lp-foot .lp-brand{font-size:17px;}
.lp-foot-links{display:flex; gap:18px; margin-left:auto; font-size:var(--fs-sm);}
.lp-foot-links a{color:var(--text-2); text-decoration:none;}
.lp-foot-links a:hover{color:var(--brand);}

/* Responsive */
@media (max-width: 980px){
  .lp-hero-in{grid-template-columns:1fr; gap:40px;}
  .lp-hero-art{max-width:460px; margin:0 auto; width:100%;}
  .lp-features{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .lp-links{display:none;}
}
@media (max-width: 680px){
  .lp-hero{padding:44px 0 60px;}
  .lp-section{padding:60px 0;}
  .lp-features, .lp-steps{grid-template-columns:1fr;}
  .lp-final{flex-direction:column; align-items:flex-start; padding:32px 26px;}
  .lp-float-a{left:0;} .lp-float-b{right:0;}
  .lp-foot-links{margin-left:0;}
}
@media (max-width: 420px){
  .lp-hide-xs{display:none;}
  .lp-nav-in{gap:10px;}
  .lp-brand .brand-name{font-size:18px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .lp-feature{transition:none;}
}

/* Pricing cards use the shared .price-block (style.css); landing sizes */
.lp-plan .price-block{margin:16px 0 18px;}
.lp-plan .price-main{font-size:36px;}
.lp-plan .price-main small{font-size:14px;}
.lp-offer{max-width:760px; margin:0 auto 22px;}