@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#222b23;background:#fbfaf6;--ruby:#8f1731;--ruby-dark:#641126;--green:#285b3b;--green-dark:#183c29;--cream:#f5f0e5;--ink:#202920;--muted:#6d756d;--line:#e6e4da}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: url('/static/assets/AgriGrowth%20Shield%20Logo.png') center/50% no-repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: -1;
}
body{margin:0; overflow-x: hidden;}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}

/* Cinematic Reveal Transition */
.reveal {
  opacity: 0;
  transform: scale(0.98) translateY(40px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.topline{display:flex;justify-content:space-between;align-items:center;background:var(--green-dark);color:#e8eee5;padding:8px clamp(18px,5vw,76px);font-size:10px;letter-spacing:.04em}
.topline-right{display:flex;align-items:center;gap:15px}
.lang-switcher{background:rgba(255,255,255,0.12);padding:2px 8px;border-radius:4px}
.lang-btn{background:none;border:0;color:#bdcdbf;font-size:10px;font-weight:700;padding:2px 4px;cursor:pointer}
.lang-btn.active{color:#fff;text-decoration:underline}

.header{min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:12px clamp(18px,5vw,76px);gap:20px;background:rgba(255, 253, 249, 0.95);backdrop-filter:blur(8px);border-bottom:1px solid #ece8df;position:sticky;top:0;z-index:10}
nav{display:flex;justify-content:flex-end;gap:3px;flex-wrap:wrap}nav a{font-size:10px;padding:9px 8px;border-radius:5px;color:#49534a;white-space:nowrap;transition:background 0.2s}nav a:hover,nav a.active{background:#f7e9ec;color:var(--ruby);font-weight:700}.menubtn{display:none;background:white;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:18px;color:var(--green)}

.hero {
  min-height: 550px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 100%), url('/static/assets/hero%20image.png') center/cover no-repeat;
  color: white;
  position: relative;
  padding: 60px clamp(22px,8vw,120px);
  display: flex;
  align-items: center;
}

.hero-copy { position: relative; z-index: 1; max-width: 620px; }
.eyebrow{display:inline-block;font-size:10px;letter-spacing:.18em;font-weight:700;color:var(--ruby);margin-bottom:17px}.eyebrow.light{color:#e6d7a8}
.hero h1,.crops h2{font:800 clamp(38px,5vw,64px)/1.08 Manrope,sans-serif;letter-spacing:-.055em;margin:0 0 20px}.hero h1 em,.crops h2 em{font-style:normal;color:#e4c980}
.hero-copy>p{font-size:14px;line-height:1.8;color:#e0e9dd;max-width:510px;margin:0 0 27px}
.actions{display:flex;gap:11px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:6px;padding:13px 17px;font-size:12px;font-weight:700;transition:all 0.3s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}
.white{background:#fffdf6;color:var(--green-dark)}.outline{border:1px solid #a8c0ad;color:#fff;background:transparent}.primary{background:var(--ruby);color:#fff;width:100%;margin-top:5px}
.proof{display:flex;gap:15px;flex-wrap:wrap;margin-top:30px;color:#d6e4d7;font-size:10px}
.hero-foot{position:absolute;bottom:16px;left:clamp(22px,8vw,120px);right:clamp(22px,8vw,120px);display:flex;justify-content:flex-end;font-size:9px;letter-spacing:.1em;color:#c5d5c8}

/* Reduced Section Gap on Desktop */
.section{padding:35px clamp(22px,8vw,120px)}
h2{font:800 clamp(29px,3.3vw,44px)/1.16 Manrope,sans-serif;letter-spacing:-.045em;color:var(--ink);margin:0}h2 em{font-style:normal;color:var(--ruby)}
p{line-height:1.75}

.intro{display:grid;grid-template-columns:95px 1.1fr 1fr;gap:28px;align-items:center;background:rgba(255, 253, 249, 0.9)}
.badge{width:85px;height:100px;border-radius:45px 45px 12px 12px;background:#f2ecdd;color:var(--green);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:24px}.badge b{font-size:10px}
.intro p,.sectiontitle p,.card p,.product p,.crops p,.verify p,.dealer p,.career p{font-size:13px;color:var(--muted)}
.textlink,.card a,.product a,.learn a{color:var(--ruby);font-size:11px;font-weight:700}
.trust-badges{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 20px}
.trust-badges span{background:#eaf0e8;color:var(--green-dark);font-size:11px;font-weight:700;padding:6px 11px;border-radius:5px}

.solutions{background:rgba(247, 244, 236, 0.9)}
.sectiontitle{max-width:620px;margin-bottom:24px}.sectiontitle h2{margin-bottom:8px}.sectiontitle p{margin:0}
.grid{display:grid;gap:15px}.four{grid-template-columns:repeat(4,1fr)}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;background:#fffdf9;border:1px solid #ece8df;border-radius:10px;padding:24px 20px;min-height:220px;transition:all 0.3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.06)}
.card .icon{width:46px;height:46px;border-radius:11px;background:#eaf0e8;display:grid;place-items:center;font-size:24px;margin-bottom:22px}
.card>small{position:absolute;right:18px;top:23px;color:#a4ada2}
.card h3,.product h3,.learn h3{font:800 17px Manrope,sans-serif;margin:0 0 8px}.card p{font-size:12px;min-height:55px}

.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filter-btn{background:#f5f0e5;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:9px 14px;font-size:11px;font-weight:700;transition:all .2s ease}
.filter-btn:hover,.filter-btn.active{background:var(--ruby);color:#fff;border-color:var(--ruby)}
.product.hidden{display:none}

.products{background:rgba(255, 253, 249, 0.9)}
.product{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;min-height:260px;transition:all 0.3s ease}
.product:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.06)}
.pack{background:#e9eee2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:15px;min-height:250px;color:var(--green-dark)}
.pack:before{content:"";width:75px;height:18px;background:#285b3b;border-radius:4px 4px 0 0}
.pack b{background:#fffdf5;padding:17px 13px;font:800 19px Manrope;border:1px solid #d8d5c4}
.pack span{font-size:9px;color:var(--ruby);font-weight:800}.pack small{font-size:9px}
.product>div:last-child{align-self:center;padding:24px}
.tag{font-size:9px;letter-spacing:.12em;color:var(--ruby);font-weight:700}
.product h3{font-size:25px;margin:9px 0}.product p{font-size:12px}
.prod-meta{display:grid;gap:4px;margin:12px 0;padding:9px 11px;background:#f8f5ed;border-radius:6px;font-size:11px;color:var(--ink)}
.prod-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

.crops{background:rgba(100, 17, 38, 0.95);color:white;display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center}
.crops h2{font-size:clamp(35px,4vw,52px);color:white}.crops p{color:#e0cfd2}
.cropgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.crop-btn{padding:14px 11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;font-size:11px;font-weight:600;text-align:left;transition:all .2s ease}
.crop-btn:hover,.crop-btn.active{background:#fffdf6;color:var(--ruby-dark);border-color:#fffdf6;font-weight:800;transform:translateY(-2px)}
.crop-detail-box{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:20px;margin-top:20px}
.crop-detail-box h3{font:800 22px Manrope,sans-serif;color:#fff;margin:0 0 10px}
.crop-detail-box p{font-size:12px;color:#f3e8ea;margin:0 0 10px;line-height:1.6}

.verify{display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:center;background:rgba(248, 245, 237, 0.9)}
.demo-codes-box{margin-top:22px;padding:14px 16px;background:#fffdf9;border:1px dashed #c9c4b5;border-radius:9px;font-size:11px}
.code-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.code-chip{background:#f5f0e5;border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:10px;color:var(--ink);transition:all .15s ease}
.code-chip:hover{background:var(--green);color:#fff;border-color:var(--green)}
.panel{background:#fffdf9;border:1px solid var(--line);padding:28px;border-radius:11px}

.lead-form{display:grid;gap:11px;margin-top:15px}
.lead-form label{display:grid;gap:6px;font-size:10px;font-weight:700;color:#4e594f}
.lead-form input,.lead-form textarea,.lead-form select{width:100%;border:1px solid #e1e1d8;background:#fff;padding:12px;border-radius:6px;font-size:12px;transition:border-color 0.2s, box-shadow 0.2s}
.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(40, 91, 59, 0.15)}
.verify-result{margin-top:16px;padding:16px;border-radius:9px;font-size:12px;line-height:1.6}
.verify-result.state-genuine{background:#e7f6ec;border:1px solid #86cfa0;color:#134626}
.verify-result.state-already{background:#fff6df;border:1px solid #e6be63;color:#614300}
.verify-result.state-fake{background:#fdebec;border:1px solid #e2939c;color:#6e111f}

.knowledge{background:rgba(255, 253, 249, 0.9)}
.learn{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.learnart{height:135px;background:#e6eddf;display:grid;place-items:center;font-size:44px;position:relative}

.dealer{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;background:rgba(247, 244, 236, 0.9)}
.dealer-art{min-height:330px;border-radius:170px 170px 14px 14px;background:linear-gradient(145deg,#e3eadc,#cbd9c5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-size:66px;color:var(--green)}

.support{background:rgba(24, 60, 41, 0.95);color:white;display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:center}
.career{display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:center;background:rgba(255, 253, 249, 0.9)}
.contact{background:rgba(247, 244, 236, 0.9)}.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px}

footer{background:#172f21;color:white;padding:52px clamp(22px,8vw,120px) 0}
.footergrid{display:grid;grid-template-columns:1fr .7fr 1fr;gap:45px;padding-bottom:38px}
.footbottom{border-top:1px solid #ffffff20;padding:17px 0;display:flex;justify-content:space-between;font-size:9px;color:#b6c7b8}
.whatsapp-float{position:fixed;bottom:22px;right:22px;z-index:99;background:#1f8e46;color:#fff;font-size:12px;font-weight:700;padding:12px 18px;border-radius:50px;box-shadow:0 10px 25px rgba(24,60,41,.35);transition:transform .2s ease,background .2s ease}
.whatsapp-float:hover{background:var(--green-dark);transform:translateY(-2px)}

/* ====== PRO MOBILE & TABLET VIEW ====== */
@media(max-width:850px){
  body::before { background-size: 85%; opacity: 0.06; }

  /* Topbar & Header */
  .topline { padding: 6px 16px; font-size: 9px; justify-content: center; }
  .topline span:first-child { display: none; }
  .topline-right { width: 100%; justify-content: space-between; }

  .header { min-height: 62px; padding: 8px 16px; }
  .header .brand img { height: 42px !important; }
  .menubtn { display: block; }

  /* Mobile Dropdown Menu */
  nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fffdf9;
    border-bottom: 2px solid var(--line);
    padding: 14px 16px 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    box-shadow: 0 16px 32px rgba(23, 47, 33, 0.14);
  }
  nav.open { display: grid; }
  nav a {
    font-size: 12px;
    padding: 11px 12px;
    background: #f7f4ec;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
  }

  /* Hero Section */
  .hero {
    min-height: auto;
    padding: 44px 18px 56px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 100%), url('/static/assets/hero%20image.png') center/cover no-repeat;
  }
  .hero h1 { font-size: clamp(28px, 8vw, 38px); line-height: 1.15; margin-bottom: 14px; }
  .hero-copy > p { font-size: 13px; line-height: 1.65; margin-bottom: 22px; }
  .actions { flex-direction: column; width: 100%; gap: 10px; }
  .actions .btn { width: 100%; padding: 14px; font-size: 13px; }
  .proof { gap: 8px 14px; margin-top: 22px; font-size: 10px; }
  .hero-foot { position: static; margin-top: 20px; justify-content: flex-start; display: none; }

  /* Reduced Gap for Mobile Sections */
  .section { padding: 25px 15px; }
  h2 { font-size: clamp(24px, 6.5vw, 32px); line-height: 1.2; }
  .eyebrow { margin-bottom: 10px; }

  /* Who We Are Section */
  .intro { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .badge { width: 68px; height: 78px; margin-bottom: 4px; }
  .trust-badges { gap: 8px; }
  .trust-badges span { font-size: 10px; padding: 6px 10px; }

  /* ==========================================
     SABHI CARDS KA LAYOUT AUR IMAGE FIX (MOBILE)
     ========================================== */

  /* 1. Solutions & General Cards (2 cards in a row) */
  .four { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card { padding: 12px 10px; min-height: auto !important; height: auto !important; display: flex; flex-direction: column; justify-content: space-between; }
  .card .icon { width: 32px; height: 32px; font-size: 16px; margin-bottom: 8px; }
  .card h3 { font-size: 13px; margin-bottom: 4px; }
  .card p { font-size: 10.5px; line-height: 1.35; min-height: auto !important; margin-bottom: 8px; }
  .card a { font-size: 10px; }
  .card > small { top: 10px; right: 10px; font-size: 10px; }
  
  /* Agar Solution cards ke andar koi image ya icon box ho toh auto height */
  .card > div:first-child { height: auto !important; background: transparent !important; padding: 0 !important; }
  .card img { width: 100% !important; height: auto !important; display: block !important; object-fit: contain !important; }

  /* Swipeable Filter Buttons on Mobile */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; font-size: 12px; }

  /* 2. Products Section (2 cards in a row, compact height, zero extra space) */
  .two, .three { grid-template-columns: 1fr 1fr; gap: 10px; }
  .product { grid-template-columns: 1fr; display: flex; flex-direction: column; min-height: auto !important; } 
  .pack { min-height: auto !important; height: auto !important; padding: 6px !important; flex: 0 0 auto; background: transparent !important; } 
  .pack:before { display: none; } /* Upar ka green strip hataya taaki space bache */
  .pack b { padding: 8px 10px !important; font-size: 14px !important; } /* Pack box size chhota kiya */
  .pack img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; display: block; } 
  .product > div:last-child { padding: 8px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } 
  .product h3 { font-size: 12.5px; margin: 3px 0; }
  .product p { font-size: 9.5px; line-height: 1.25; margin-bottom: 4px; }
  .prod-meta { font-size: 8.5px; padding: 4px; margin: 4px 0; }
  .prod-links { flex-direction: column; gap: 4px; font-size: 9px; }
  .prod-links a { font-size: 9px; }

  /* 3. Crops Section */
  .crops { grid-template-columns: 1fr; gap: 24px; }
  .crops h2 { font-size: clamp(26px, 7vw, 34px); }
  .cropgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .crop-btn { padding: 12px 10px; font-size: 11px; text-align: center; }
  .crop-detail-box { padding: 16px; margin-top: 14px; }
  .crop-detail-box h3 { font-size: 18px; }

  /* 4. Knowledge Hub Cards (2 cards side-by-side, zero empty space) */
  .kh-card { min-width: calc(50% - 6px) !important; flex: 0 0 calc(50% - 6px) !important; height: auto !important; } 
  .kh-body { padding: 8px !important; } 
  .kh-body h3 { font-size: 11.5px !important; margin: 3px 0 !important; }
  .kh-body p { font-size: 9.5px !important; margin-bottom: 6px !important; line-height: 1.25 !important; }
  .kh-read-btn { font-size: 8.5px !important; padding: 4px 6px !important; }
  .learnart { height: auto !important; display: block !important; padding: 0 !important; background: transparent !important; } 
  .learnart img { width: 100% !important; height: auto !important; display: block !important; position: static !important; }

  /* Forms, Panels & Other Sections */
  .verify, .dealer, .support, .career, .contactgrid { grid-template-columns: 1fr; gap: 24px; }
  .panel { padding: 20px 16px; }
  .dealer-art { min-height: 200px; border-radius: 100px 100px 12px 12px; font-size: 48px; }
  .lead-form input, .lead-form textarea, .lead-form select { font-size: 14px; padding: 12px; }

  /* Footer & WhatsApp Button */
  footer { padding: 38px 18px 0; }
  .footergrid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 28px; }
  .footergrid > div:last-child { border-top: 1px solid #ffffff20; padding-top: 20px; }
  .footbottom { flex-direction: column; gap: 8px; text-align: center; padding: 16px 0 70px; }
  .whatsapp-float { bottom: 16px; right: 16px; padding: 10px 15px; font-size: 11px; }
}