/* ═══════════════════════════════════════════════════
   KRISHI RAKSHAK — AWWWARDS-LEVEL CSS
   Inspired by: Linear · Vercel · Resend · Cursor
═══════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  --bg-deep:        #112a17;
  --bg-card:        #1a3d22;
  --bg-card-hover:  #20482a;
  --border:         rgba(74,222,128,.08);
  --border-hover:   rgba(74,222,128,.22);
  --green:          #22c55e;
  --green-bright:   #4ade80;
  --green-dim:      #166534;
  --lime:           #a8ff3e;
  --teal:           #14b8a6;
  --text-1:         #f0fdf4;
  --text-2:         #86efac;
  --text-m:         rgba(134,239,172,.45);

  --fh: 'Syne', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fm: 'JetBrains Mono', monospace;

  --ease: cubic-bezier(.19,1,.22,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --card-ease: cubic-bezier(.16,1,.3,1);
}
@property --angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ── Base ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:70px; }
body {
  font-family: var(--fb);
  background: radial-gradient(ellipse 90% 65% at 50% -5%, #2a6e3a 0%, #183421 40%, var(--bg-deep) 70%);
  color: var(--text-1);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}
/* cursor: default for all */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px; opacity:.032;
}
h1,h2,h3 { font-family: var(--fh); }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
img { display:block; max-width:100%; }

/* ── Loading ── */
#ls {
  position:fixed; inset:0; z-index:10000;
  background: #112a17;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#ls.done { opacity:0; visibility:hidden; pointer-events:none; }
.ls-box { text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.ls-box svg { animation:ls-bob 1.2s ease-in-out infinite; }
@keyframes ls-bob { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.ls-name { font-family:var(--fh); font-size:1.3rem; font-weight:800; color:var(--text-1); }
.ls-bar { width:200px; height:2px; background:rgba(74,222,128,.12); border-radius:4px; overflow:hidden; }
.ls-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--lime)); border-radius:4px; width:0; transition:width .4s var(--ease); }

/* ── Cursor — disabled, using system default ── */
#cur, #cur-ring, #kr-cur, #kr-cur-ring { display: none !important; }  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:9px; height:9px; background:var(--green); border-radius:50%;
  transform:translate(-50%,-50%); mix-blend-mode:screen;
  transition:width .2s,height .2s,background .2s;
}
#cur-ring {
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  width:38px; height:38px;
  border:1.5px solid rgba(74,222,128,.4); border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .3s,height .3s,border-color .3s;
}
body:has(.mag:hover) #cur-ring { width:56px; height:56px; border-color:var(--green); }
/* Shared cursor from nav.js */
#kr-cur { position:fixed;top:0;left:0;z-index:9999;pointer-events:none;width:9px;height:9px;background:var(--green);border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:screen;transition:width .2s,height .2s; }
#kr-cur.expand { width:18px;height:18px;background:rgba(74,222,128,.7); }
#kr-cur-ring { position:fixed;top:0;left:0;z-index:9998;pointer-events:none;width:38px;height:38px;border:1.5px solid rgba(74,222,128,.4);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s,height .3s; }
#kr-cur-ring.expand { width:52px;height:52px;border-color:var(--green); }

/* ── Three.js canvas ── */
#three-bg { position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.noise { position:fixed; inset:0; z-index:1; pointer-events:none; }
.vig {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 90% 90% at 50% 50%, transparent 40%, rgba(8,22,12,.6) 100%);
}

/* ── Spore Particles ── */
#spores { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.spore {
  position:absolute; border-radius:50%; background:var(--green-bright);
  animation:spore-up linear infinite;
  will-change:transform;
}
@media(prefers-reduced-motion:no-preference){
  @keyframes spore-up { from{transform:translateY(0)} to{transform:translateY(-110vh)} }
}

/* ── Scroll reveal ── */
.rev {
  opacity:0; transform:translateY(28px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}
.rev.vis { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:64px; display:flex; align-items:center;
  padding:0 max(20px,calc((100vw - 1200px)/2));
  border-bottom: 1px solid transparent;
  transition:all .3s ease;
}
#nav.scrolled {
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(12,28,16,.88);
  border-color:var(--border);
}
.nav-inner { width:100%; display:flex; align-items:center; gap:24px; }
.nav-logo { display:flex; align-items:center; gap:8px; }
.nav-logo span { font-family:var(--fh); font-size:.95rem; font-weight:800; color:var(--text-1); letter-spacing:-.02em; }
.nav-links { display:flex; gap:2px; }
.nl {
  position:relative; padding:6px 14px;
  border-radius:8px; font-size:.82rem; font-weight:500;
  color:var(--text-m);
  transition:color .2s;
}
.nl::after {
  content:''; position:absolute; bottom:2px; left:14px; right:14px;
  height:1.5px; background:var(--green-bright);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nl:hover { color:var(--green-bright); }
.nl:hover::after { transform:scaleX(1); }
.nl.active { color:var(--green-bright); }
.nl.active::after { transform:scaleX(1); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:12px; }

.api-pill {
  position:relative; display:flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:99px;
  font-family:var(--fm); font-size:.68rem;
  border:1px solid rgba(239,68,68,.25); background:rgba(239,68,68,.08); color:#f87171;
  transition:all .35s;
}
.api-pill.online { background:rgba(34,197,94,.09); color:var(--green-bright); border-color:rgba(34,197,94,.24); }
.api-dot {
  width:7px; height:7px; border-radius:50%; background:#ef4444; flex-shrink:0;
  transition:background .35s;
}
.api-pill.online .api-dot { background:var(--green); }
.api-ring {
  position:absolute; left:10px; width:11px; height:11px;
  border-radius:50%; border:1.5px solid var(--green);
  animation:api-ping 2s ease-out infinite; display:none;
}
.api-pill.online .api-ring { display:block; }
@keyframes api-ping { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(2.5)} }
.nav-cta {
  padding:8px 18px; background:linear-gradient(135deg,var(--green-dim),var(--teal));
  border-radius:10px; font-family:var(--fh); font-size:.8rem; font-weight:700;
  color:white; box-shadow:0 4px 20px rgba(34,197,94,.2);
  transition:transform .25s var(--spring),box-shadow .25s;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(34,197,94,.35); }

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
.hero {
  position:relative; z-index:3; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:100px max(20px,calc((100vw - 1200px)/2)) 60px;
  overflow:hidden;
  animation:pulse-bg 8s ease-in-out infinite;
}
@keyframes pulse-bg {
  0%,100% { background-color:transparent; }
  50% { background-color:rgba(13,32,16,.4); }
}
.hero-grid-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(74,222,128,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(74,222,128,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black,transparent);
}
.hero-body {
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:48px; align-items:center;
}

/* Chip */
.hero-chip,.section-chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px; border-radius:99px;
  background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.2);
  font-family:var(--fm); font-size:.67rem; color:var(--green-bright);
  letter-spacing:.06em; margin-bottom:24px;
}
.chip-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:api-ping 2s ease-in-out infinite; }

/* H1 */
.hero-h1 {
  margin-bottom:24px; line-height:1.04;
  font-size:clamp(3rem,5.5vw,5rem); letter-spacing:-.04em;
}
.h1-white,.h1-green,.h1-lime { display:block; }
.h1-white { color:var(--text-1); }
.h1-green { background:linear-gradient(135deg,var(--green-bright),var(--green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.h1-lime  { color:var(--lime); -webkit-text-stroke:0; }

.hero-para { font-size:1.05rem; line-height:1.75; color:var(--text-m); max-width:460px; margin-bottom:36px; font-weight:300; }
.hero-btns { display:flex; gap:14px; align-items:center; margin-bottom:52px; flex-wrap:wrap; }

/* Primary btn */
.btn-primary,.btn-analyze {
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:12px;
  background:linear-gradient(135deg,var(--green-dim),var(--teal));
  font-family:var(--fh); font-size:.92rem; font-weight:700; color:white;
  box-shadow:0 8px 32px rgba(34,197,94,.25),0 0 0 1px rgba(34,197,94,.15);
  animation:btn-glow 3s ease-in-out infinite;
  transition:transform .3s var(--spring),box-shadow .3s;
}
.btn-primary:hover,.btn-analyze:not(:disabled):hover {
  transform:translateY(-3px);
  box-shadow:0 20px 48px rgba(34,197,94,.45),0 0 0 1px rgba(34,197,94,.35);
}
.btn-analyze { width:100%; justify-content:center; }
.btn-analyze:disabled { opacity:.3; cursor:not-allowed; animation:none; }
@keyframes btn-glow {
  0%,100%{box-shadow:0 8px 32px rgba(34,197,94,.25),0 0 0 1px rgba(34,197,94,.15)}
  50%{box-shadow:0 8px 32px rgba(34,197,94,.35),0 0 0 12px rgba(34,197,94,.0)}
}
.btn-shimmer {
  position:absolute; top:0; left:-100%; width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:skewX(-22deg); animation:shimmer 4s ease-in-out infinite 1s;
}
@keyframes shimmer { 0%{left:-100%} 30%,100%{left:150%} }
.btn-ghost {
  padding:13px 22px; border:1px solid var(--border-hover); border-radius:12px;
  font-family:var(--fh); font-size:.88rem; font-weight:600; color:var(--text-m);
  transition:all .25s var(--spring);
}
.btn-ghost:hover { color:var(--green-bright); border-color:var(--green); background:rgba(34,197,94,.06); transform:translateY(-2px); }

/* Stats */
.hero-stats { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.hstat { text-align:center; }
.hstat-n { display:block; font-family:var(--fm); font-size:2rem; font-weight:500; color:var(--lime); line-height:1; letter-spacing:-.02em; }
.hstat-l { display:block; font-family:var(--fm); font-size:.6rem; color:var(--text-m); text-transform:uppercase; letter-spacing:.1em; margin-top:4px; }
.hstat-sep { width:1px; height:36px; background:var(--border); }

/* ── Animated Scan Card ── */
.hero-right { display:flex; justify-content:center; align-items:center; }
.scan-card {
  position:relative; width:320px;
  background:var(--bg-card);
  border:1px solid var(--border-hover);
  border-radius:24px; overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px var(--border),inset 0 1px 0 rgba(74,222,128,.1);
}
.sc-header {
  display:flex; align-items:center; gap:6px;
  padding:12px 16px 10px;
  border-bottom:1px solid var(--border);
}
.sc-dot { width:10px; height:10px; border-radius:50%; }
.sc-dot.r{background:#ef4444}.sc-dot.a{background:#f59e0b}.sc-dot.g{background:#22c55e}
.sc-title { margin-left:8px; font-family:var(--fm); font-size:.68rem; color:var(--text-m); letter-spacing:.04em; }
.sc-image-zone {
  position:relative; height:200px; overflow:hidden;
  background:linear-gradient(160deg,rgba(22,101,52,.15),rgba(5,12,7,.6));
  display:flex; align-items:center; justify-content:center;
}
.sc-leaf { font-size:4.5rem; filter:drop-shadow(0 8px 20px rgba(34,197,94,.5)); animation:sc-float 4s ease-in-out infinite; }
@keyframes sc-float { 0%,100%{transform:rotate(-5deg) scale(1)} 50%{transform:rotate(4deg) scale(1.06)} }
.sc-corners { position:absolute; inset:0; pointer-events:none; }
.scc { position:absolute; width:18px; height:18px; border-color:var(--green); border-style:solid; }
.scc.tl{top:8px;left:8px;border-width:2px 0 0 2px;border-radius:3px 0 0 0}
.scc.tr{top:8px;right:8px;border-width:2px 2px 0 0;border-radius:0 3px 0 0}
.scc.bl{bottom:8px;left:8px;border-width:0 0 2px 2px;border-radius:0 0 0 3px}
.scc.br{bottom:8px;right:8px;border-width:0 2px 2px 0;border-radius:0 0 3px 0}
.sc-scanline {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--green-bright);
  box-shadow:0 0 20px var(--green-bright),0 0 40px rgba(74,222,128,.4);
  animation:sc-sweep 3.5s ease-in-out infinite;
  will-change:transform;
}
@media(prefers-reduced-motion:no-preference){
  @keyframes sc-sweep {
    0%,2%{transform:translateY(0);opacity:1}
    55%{transform:translateY(196px);opacity:1}
    60%,100%{transform:translateY(196px);opacity:0}
  }
}
.sc-result { padding:16px; }
.sc-result-inner { animation:sc-reveal 3.5s ease-in-out infinite; }
@media(prefers-reduced-motion:no-preference){
  @keyframes sc-reveal {
    0%,52%{opacity:0;transform:translateY(8px)}
    65%,88%{opacity:1;transform:translateY(0)}
    96%,100%{opacity:0;transform:translateY(-4px)}
  }
}
.sc-badge {
  display:inline-block; padding:3px 10px; border-radius:99px;
  font-family:var(--fm); font-size:.6rem; font-weight:500; letter-spacing:.08em; margin-bottom:8px;
}
.sc-badge.critical { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.3); }
.sc-disease { font-family:var(--fh); font-size:1.15rem; font-weight:700; color:var(--text-1); margin-bottom:10px; }
.sc-conf-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sc-conf-bg { flex:1; height:4px; background:rgba(74,222,128,.1); border-radius:99px; overflow:hidden; }
.sc-conf-fill { height:100%; width:87%; background:linear-gradient(90deg,var(--green),var(--lime)); border-radius:99px; animation:sc-bar-fill 3.5s ease-in-out infinite; }
@keyframes sc-bar-fill { 0%,52%{width:0} 75%,88%{width:87%} 96%,100%{width:0} }
.sc-conf-pct { font-family:var(--fm); font-size:.7rem; color:var(--green-bright); }
.sc-meta { display:flex; gap:8px; flex-wrap:wrap; }
.sc-meta-item { font-family:var(--fm); font-size:.62rem; color:var(--text-m); }
.sc-glow { position:absolute; bottom:-40px; left:50%; transform:translateX(-50%); width:160px; height:60px; background:rgba(34,197,94,.22); filter:blur(35px); border-radius:50%; }

/* scroll hint */
.scroll-hint {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--fm); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--text-m);
}
.sh-mouse { width:22px; height:35px; border:1.5px solid rgba(74,222,128,.28); border-radius:11px; display:flex; align-items:flex-start; justify-content:center; padding-top:6px; }
.sh-wheel { width:3px; height:6px; background:var(--green-bright); border-radius:3px; animation:wheel-scroll 2s ease-in-out infinite; }
@keyframes wheel-scroll { 0%,100%{transform:translateY(0);opacity:1} 80%{transform:translateY(8px);opacity:0} }

/* ═══════════════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════════════ */
.feats-section {
  position:relative; z-index:3;
  padding:60px max(20px,calc((100vw - 1200px)/2)) 80px;
}
.feats-section .section-head { text-align:center; margin-bottom:40px; }
.feats-section .section-head h2 { font-family:var(--fh); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--text-1); margin:10px 0 8px; }
.feats-section .detect-sub { font-size:.88rem; color:var(--text-m); }
.feats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feats-grid-6 { grid-template-columns:repeat(4,1fr); }
@media(max-width:1100px){ .feats-grid-6{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){ .feats-grid-6{ grid-template-columns:repeat(2,1fr); } }
.feat-card {
  position:relative; overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-top:2px solid transparent;
  border-radius:16px;
  padding:28px 24px;
  transition:all .3s var(--card-ease);
}
.fc-top-line {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  opacity:0; transition:opacity .3s;
}
.feat-card::before {
  content:''; position:absolute; inset:-1.5px; border-radius:16px;
  background:conic-gradient(from var(--angle),transparent 50%,rgba(34,197,94,.35),rgba(20,184,166,.35),transparent 70%);
  z-index:0; opacity:0; transition:opacity .35s;
  animation:gb-spin 4s linear infinite;
}
.feat-card::after { content:''; position:absolute; inset:1px; background:var(--bg-card); border-radius:15px; z-index:0; }
@keyframes gb-spin { to{--angle:360deg} }
.feat-card:hover {
  background:var(--bg-card-hover);
  border-color:var(--border-hover);
  box-shadow:inset 0 0 40px rgba(34,197,94,.05), 0 0 0 1px var(--border-hover), 0 20px 60px rgba(0,0,0,.4);
  transform:translateY(-4px);
}
.feat-card:hover::before { opacity:1; }
.feat-card:hover .fc-top-line { opacity:1; }
.fc-icon-wrap {
  width:44px; height:44px; border-radius:12px;
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; position:relative; z-index:1;
  transition:background .3s, box-shadow .3s;
}
.feat-card:hover .fc-icon-wrap { background:rgba(34,197,94,.16); box-shadow:0 0 20px rgba(34,197,94,.2); }
.fc-svg { width:22px; height:22px; color:var(--green-bright); }
.lightning { transition:filter .3s; }
.feat-card:hover .lightning { filter:drop-shadow(0 0 4px rgba(74,222,128,.6)); }
.feat-card h3 { font-family:var(--fh); font-size:1rem; font-weight:700; color:var(--text-1); margin-bottom:10px; position:relative; z-index:1; }
.feat-card p  { font-size:.86rem; line-height:1.7; color:var(--text-m); position:relative; z-index:1; }
.feat-lock { display:inline-block; margin-top:12px; font-size:.68rem; color:rgba(134,239,172,.35); font-family:var(--fm); position:relative; z-index:1; }
.feat-try  { display:inline-block; margin-top:12px; font-size:.75rem; color:#4ade80; font-weight:600; text-decoration:none; border:1px solid rgba(34,197,94,.3); padding:4px 12px; border-radius:99px; transition:all .2s; position:relative; z-index:1; }
.feat-try:hover { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.5); }
.feat-stat { display:inline-block; margin-top:12px; font-size:.72rem; color:#4ade80; font-family:var(--fm); font-weight:600; position:relative; z-index:1; }
.feat-card { transition:transform .2s ease, box-shadow .2s ease; }
.feat-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(22,163,74,.2); }

/* ═══════════════════════════════════════════════════
   TRUST SECTION
═══════════════════════════════════════════════════ */
.trust-section {
  position:relative; z-index:3;
  padding:80px max(20px,calc((100vw - 1200px)/2));
  border-top:1px solid var(--border);
}
.trust-inner { }
.trust-head { text-align:center; margin-bottom:48px; }
.trust-head h2 { font-family:var(--fh); font-size:clamp(2rem,4vw,3rem); font-weight:800; color:var(--text-1); letter-spacing:-.03em; margin-bottom:12px; }
.trust-sub { font-size:.95rem; color:var(--text-m); max-width:460px; margin:0 auto; }
.trust-body { }
.trust-stats { display:flex; align-items:center; justify-content:center; gap:48px; margin-bottom:56px; flex-wrap:wrap; }
.tstat { text-align:center; }
.tstat-n { display:block; font-family:var(--fm); font-size:2.8rem; font-weight:500; color:var(--lime); line-height:1; letter-spacing:-.03em; }
.tstat-l { display:block; font-family:var(--fm); font-size:.65rem; color:var(--text-m); text-transform:uppercase; letter-spacing:.1em; margin-top:6px; }
.tstat-div { width:1px; height:48px; background:var(--border); }

.trust-map-wrap { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.india-map-box { display:flex; flex-direction:column; align-items:center; gap:14px; }
.map-label { font-family:var(--fm); font-size:.65rem; color:var(--text-m); letter-spacing:.08em; }
.india-svg {
  width:300px; max-width:100%;
  filter:drop-shadow(0 0 18px rgba(74,222,128,.3)) drop-shadow(0 0 6px rgba(168,255,62,.15));
}
.india-path {
  fill:rgba(34,197,94,.09);
  stroke:rgba(74,222,128,.88);
  stroke-width:2.4;
  stroke-linejoin:round;
}
.hs-core { fill:var(--lime); filter:drop-shadow(0 0 3px var(--lime)); }
.hs-ring {
  fill:none; stroke:var(--lime); stroke-width:2;
  transform-box:fill-box; transform-origin:center center;
  animation:map-ping 2.2s ease-out infinite;
}
@keyframes map-ping { 0%{transform:scale(1);opacity:1} 100%{transform:scale(4);opacity:0} }

/* Testimonials */
.testimonials { display:flex; flex-direction:column; gap:14px; }
.testi-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:16px; padding:20px;
  transition:border-color .3s,transform .3s var(--spring);
}
.testi-card:hover { border-color:var(--border-hover); transform:translateX(4px); }
.testi-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.testi-crop { font-size:1.6rem; }
.testi-name { font-family:var(--fh); font-size:.88rem; font-weight:700; color:var(--text-1); }
.testi-loc { font-family:var(--fm); font-size:.65rem; color:var(--text-m); margin-top:2px; }
.testi-quote { font-size:.86rem; line-height:1.65; color:var(--text-2); font-style:italic; }

/* ═══════════════════════════════════════════════════
   CROPS BENTO
═══════════════════════════════════════════════════ */
.crops-section { position:relative; z-index:3; padding:80px max(20px,calc((100vw - 1200px)/2)); border-top:1px solid var(--border); }
.section-head { margin-bottom:36px; }
.section-head h2 { font-family:var(--fh); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; color:var(--text-1); letter-spacing:-.03em; margin-bottom:0; }
.crops-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.crop-card {
  position:relative; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:16px; padding:26px 20px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; cursor:default;
  transition:all .3s var(--card-ease);
}
.crop-card.featured { grid-column:2/span 2; flex-direction:row; gap:24px; text-align:left; align-items:center; }
.crop-card:hover { background:var(--bg-card-hover); border-color:var(--border-hover); transform:translateY(-5px); box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px var(--border-hover); }
.cc-emoji { font-size:2.4rem; transition:transform .3s var(--spring); display:block; }
.crop-card:hover .cc-emoji { transform:scale(1.15) translateY(-2px); }
.cc-name { font-family:var(--fh); font-size:.95rem; font-weight:700; color:var(--text-1); }
.cc-badge {
  display:inline-block; padding:2px 10px; border-radius:99px;
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2);
  color:var(--green-bright); font-family:var(--fm); font-size:.62rem;
  transition:opacity .25s;
}
.crop-card:hover .cc-badge { opacity:0; }
.cc-preview {
  position:absolute; bottom:0; left:0; right:0;
  padding:12px 16px;
  background:linear-gradient(to top,rgba(10,26,14,.95),transparent);
  display:flex; align-items:center; gap:8px;
  font-family:var(--fm); font-size:.72rem; color:var(--text-2);
  transform:translateY(100%);
  transition:transform .3s var(--card-ease);
}
.crop-card:hover .cc-preview { transform:translateY(0); }
.cc-sev-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cc-sev-dot.critical{background:#ef4444;box-shadow:0 0 6px #ef4444}
.cc-sev-dot.high{background:#f97316;box-shadow:0 0 6px #f97316}
.cc-sev-dot.medium{background:#f59e0b;box-shadow:0 0 6px #f59e0b}

/* ═══════════════════════════════════════════════════
   DETECT / UPLOAD
═══════════════════════════════════════════════════ */
.detect-section { position:relative; z-index:3; padding:80px max(20px,calc((100vw - 1200px)/2)); border-top:1px solid var(--border); }
.detect-sub { font-size:.88rem; color:var(--text-m); margin-top:10px; }
.detect-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:40px; align-items:start; }

/* Drop zone */
.drop-zone {
  position:relative; height:400px;
  background:var(--bg-card); border-radius:24px;
  overflow:hidden; cursor:none;
  transition:background .3s,box-shadow .3s;
}
.drop-zone:hover,.drop-zone.active { background:var(--bg-card-hover); box-shadow:0 0 60px rgba(34,197,94,.08); }
.drop-zone.drag-over { box-shadow:0 0 0 2px var(--green),0 0 60px rgba(34,197,94,.15); }

/* Marching dashes SVG border */
.dz-border-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.dz-march {
  fill:none; stroke:rgba(74,222,128,.28); stroke-width:1.5;
  stroke-dasharray:8 7; stroke-linecap:round;
  /* width/height set by JS */
  animation:dz-march 12s linear infinite;
  transition:stroke .3s;
}
.drop-zone.drag-over .dz-march { stroke:var(--lime); }
@keyframes dz-march { to{stroke-dashoffset:-120} }

.dz-inner { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.dz-icon-wrap { position:relative; margin-bottom:8px; }
.dz-icon { font-size:3.8rem; display:block; animation:dz-bob 2s ease-in-out infinite; }
@keyframes dz-bob { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.dz-pulse1,.dz-pulse2 { position:absolute; inset:-14px; border-radius:50%; border:1.5px solid rgba(74,222,128,.2); animation:dz-pulse 2.6s ease-out infinite; }
.dz-pulse2 { inset:-28px; animation-delay:.6s; }
@keyframes dz-pulse { 0%{transform:scale(.75);opacity:.8} 100%{transform:scale(1.4);opacity:0} }
.dz-title { font-family:var(--fh); font-size:1.05rem; font-weight:700; color:var(--text-1); }
.dz-or { font-size:.78rem; color:var(--text-m); }
.btn-browse {
  padding:10px 22px; background:rgba(34,197,94,.1);
  border:1px solid var(--border-hover); border-radius:10px;
  font-family:var(--fh); font-size:.84rem; font-weight:700; color:var(--green-bright);
  margin-top:4px; transition:all .25s var(--spring);
}
.btn-browse:hover { background:rgba(34,197,94,.2); transform:translateY(-2px); }
.dz-preview-wrap { position:absolute; inset:0; z-index:2; }
.dz-preview-wrap img { width:100%; height:100%; object-fit:cover; }
.dz-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(10,26,14,.9),transparent 50%);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:20px;
}
.btn-remove {
  padding:8px 18px; background:rgba(239,68,68,.85); border-radius:10px;
  font-family:var(--fh); font-size:.8rem; font-weight:700; color:white;
  transition:background .2s,transform .2s;
}
.btn-remove:hover { background:#ef4444; transform:scale(1.05); }
.dz-scan-active {
  position:absolute; top:-2px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--green-bright),var(--teal),transparent);
  animation:dz-scan-line 2s ease-in-out infinite; pointer-events:none;
}
@keyframes dz-scan-line { 0%{top:-2px} 100%{top:calc(100% + 2px)} }
.dz-drag-ov {
  position:absolute; inset:0; z-index:5; display:none;
  align-items:center; justify-content:center;
  background:rgba(168,255,62,.04); backdrop-filter:blur(8px);
  border-radius:24px; border:2px solid var(--lime);
}
.dz-drag-ov.show { display:flex; }
.dz-drag-ov span { font-family:var(--fh); font-size:1.2rem; font-weight:700; color:var(--lime); }

/* Panel */
.detect-panel { display:flex; flex-direction:column; gap:18px; }
.dp-block { }
.dp-label { font-family:var(--fm); font-size:.64rem; color:var(--text-m); text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; }
.dp-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.src-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:13px; background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
  font-family:var(--fh); font-size:.86rem; font-weight:600; color:var(--text-m);
  transition:all .25s var(--spring);
}
.src-btn:hover { border-color:var(--green); color:var(--green-bright); background:rgba(34,197,94,.06); transform:translateY(-2px); }
.dp-tips { list-style:none; display:flex; flex-direction:column; gap:8px; }
.dp-tips li { display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--text-m); }
.tip-dot { width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; box-shadow:0 0 6px var(--green); }
.fi-card { display:flex; align-items:center; gap:12px; padding:12px 14px; background:rgba(34,197,94,.06); border:1px solid rgba(34,197,94,.2); border-radius:12px; }
.fi-name { font-size:.84rem; font-weight:600; color:var(--text-1); margin-bottom:2px; }
.fi-size { font-size:.72rem; color:var(--text-m); }
.fi-ok { margin-left:auto; width:22px; height:22px; border-radius:50%; background:rgba(34,197,94,.14); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; }
.quality-warn { display:none; margin-top:12px; padding:9px 13px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25); border-radius:9px; font-family:var(--fm); font-size:.7rem; color:#fbbf24; line-height:1.5; }
.quality-warn.show { display:block; }
.ba-arr { font-size:.95rem; transition:transform .2s; }
.btn-analyze:not(:disabled):hover .ba-arr { transform:translateX(4px); }
.prog-wrap { }
.prog-steps { display:flex; gap:18px; margin-bottom:10px; }
.ps { display:flex; align-items:center; gap:6px; font-family:var(--fm); font-size:.72rem; color:var(--text-m); transition:color .4s; }
.ps em { display:block; width:7px; height:7px; border-radius:50%; background:rgba(34,197,94,.2); flex-shrink:0; transition:background .4s,box-shadow .4s; font-style:normal; }
.ps.active { color:var(--green-bright); }
.ps.active em { background:var(--green); box-shadow:0 0 10px var(--green); animation:api-ping 1.5s infinite; }
.ps.done em { background:var(--green); }
.prog-track { height:2px; background:rgba(34,197,94,.1); border-radius:4px; overflow:hidden; }
.prog-fill { height:100%; width:0; background:linear-gradient(90deg,var(--green),var(--lime)); border-radius:4px; transition:width .5s var(--ease); }

/* ═══════════════════════════════════════════════════
   RESULTS
═══════════════════════════════════════════════════ */
.results-section { position:relative; z-index:3; padding:0 max(20px,calc((100vw - 1200px)/2)) 80px; animation:res-in .6s var(--ease) both; }
@keyframes res-in { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.res-inner { display:grid; grid-template-columns:1fr 1.4fr; gap:28px; align-items:start; }
.res-left { display:flex; flex-direction:column; gap:14px; }
.res-img-frame { position:relative; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.res-img-frame img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.ric { position:absolute; width:18px; height:18px; border-color:var(--green); border-style:solid; }
.ric.tl{top:10px;left:10px;border-width:2px 0 0 2px;border-radius:3px 0 0 0}
.ric.tr{top:10px;right:10px;border-width:2px 2px 0 0;border-radius:0 3px 0 0}
.ric.bl{bottom:10px;left:10px;border-width:0 0 2px 2px;border-radius:0 0 0 3px}
.ric.br{bottom:10px;right:10px;border-width:0 2px 2px 0;border-radius:0 0 3px 0}
.res-scan { position:absolute; top:-2px; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(34,197,94,.9),rgba(20,184,166,.9),transparent); animation:dz-scan-line 2.5s ease-in-out infinite; }
.res-model-tag { font-family:var(--fm); font-size:.64rem; color:var(--text-m); letter-spacing:.06em; text-align:center; }
.alt-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; margin-bottom:7px; animation:alt-in .4s var(--ease) both; }
@keyframes alt-in { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.alt-rank { font-family:var(--fm); font-size:.63rem; color:var(--text-m); width:16px; }
.alt-name { flex:1; font-size:.82rem; color:var(--text-1); }
.alt-bw { width:70px; }
.alt-bg { height:4px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.alt-bf { height:4px; background:linear-gradient(90deg,var(--green),var(--lime)); border-radius:4px; transition:width .9s var(--ease); }
.alt-pct { font-family:var(--fm); font-size:.68rem; color:var(--green-bright); min-width:32px; text-align:right; }
.res-right {
  background:var(--bg-card); border-radius:22px; border:1px solid var(--border);
  padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.4);
  position:relative; overflow:hidden;
}
.res-right::before { content:''; position:absolute; inset:-1.5px; border-radius:22px; background:conic-gradient(from var(--angle),transparent 40%,rgba(34,197,94,.35),rgba(20,184,166,.35),transparent 60%); z-index:0; animation:gb-spin 6s linear infinite; }
.res-right::after { content:''; position:absolute; inset:1px; background:var(--bg-card); border-radius:21px; z-index:0; }
.rr-head { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.rr-sev { display:inline-block; padding:6px 14px; border-radius:99px; font-family:var(--fm); font-size:.68rem; font-weight:500; letter-spacing:.1em; }
.rr-ring-wrap { position:relative; width:98px; height:98px; flex-shrink:0; }
.rr-ring-svg { width:98px; height:98px; transform:rotate(-90deg); }
.rr-bg { fill:none; stroke:rgba(34,197,94,.1); stroke-width:7; }
.rr-fg { fill:none; stroke:url(#rg); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset 1.5s var(--ease); }
.rr-ring-txt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rr-pct { font-family:var(--fm); font-size:1.3rem; color:var(--green-bright); line-height:1; }
.rr-lbl { font-family:var(--fm); font-size:.52rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-m); margin-top:3px; }
.rr-name { font-family:var(--fh); font-size:1.35rem; font-weight:700; color:var(--text-1); letter-spacing:-.02em; margin-bottom:8px; position:relative; z-index:1; line-height:1.25; }
.rr-desc { font-size:.86rem; color:var(--text-m); line-height:1.7; margin-bottom:18px; position:relative; z-index:1; }
.yield-impact-box { display:none; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:14px; margin-bottom:16px; position:relative; z-index:1; border:1px solid var(--border); font-size:.82rem; line-height:1.45; }
.yield-impact-box .yield-icon { font-size:1.5rem; line-height:1; flex-shrink:0; }
.yield-impact-box.yi-low { background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.25); }
.yield-impact-box.yi-med { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.3); }
.yield-impact-box.yi-high { background:rgba(249,115,22,.1); border-color:rgba(249,115,22,.35); }
.yield-impact-box.yi-crit { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.35); }
.share-row { display:flex; gap:9px; margin-bottom:14px; flex-wrap:wrap; position:relative; z-index:1; }
.rr-tabs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border); position:relative; z-index:1; }
.rrt { padding:7px 12px; border-radius:8px; font-family:var(--fm); font-size:.72rem; color:var(--text-m); border:1px solid transparent; transition:all .2s; }
.rrt:hover { color:var(--green-bright); background:rgba(34,197,94,.07); }
.rrt.active { background:linear-gradient(135deg,var(--green-dim),var(--teal)); color:white; }
.rr-panel { min-height:90px; margin-bottom:20px; position:relative; z-index:1; }
.tab-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:rgba(34,197,94,.04); border:1px solid var(--border); border-radius:10px; margin-bottom:7px; font-size:.85rem; color:var(--text-1); line-height:1.55; animation:alt-in .3s var(--ease) both; }
.prev-box { padding:16px; background:rgba(20,184,166,.07); border:1px solid rgba(20,184,166,.2); border-radius:12px; animation:alt-in .3s var(--ease) both; }
.prev-box strong { font-family:var(--fh); font-size:.85rem; color:var(--teal); display:block; margin-bottom:8px; }
.prev-box p { font-size:.85rem; color:var(--text-1); line-height:1.7; }
.btn-again { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; background:rgba(34,197,94,.07); border:1px solid var(--border); border-radius:10px; font-family:var(--fh); font-size:.84rem; font-weight:600; color:var(--text-m); position:relative; z-index:1; transition:all .25s var(--spring); }
.btn-again:hover { border-color:var(--border-hover); color:var(--green-bright); transform:translateY(-2px); }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.site-footer { position:relative; z-index:3; padding:40px max(20px,calc((100vw - 1200px)/2)) 32px; }
.footer-sep { height:1px; background:linear-gradient(90deg,transparent,var(--green),transparent); margin-bottom:36px; }
.footer-inner { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.footer-logo { font-family:var(--fh); font-size:.95rem; font-weight:700; color:var(--text-1); }
.footer-tag { font-family:var(--fm); font-size:.68rem; color:var(--text-m); margin-top:4px; letter-spacing:.02em; }
.footer-links { display:flex; gap:20px; margin-left:auto; }
.fl { font-family:var(--fm); font-size:.75rem; color:var(--text-m); transition:color .2s; }
.fl:hover { color:var(--green-bright); }
.footer-copy { font-family:var(--fm); font-size:.68rem; color:rgba(134,239,172,.2); width:100%; margin-top:12px; }
.footer-glow { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:600px; height:2px; background:linear-gradient(90deg,transparent,rgba(34,197,94,.22),transparent); filter:blur(3px); }

/* ── Magnetic ── */
/* all handled in JS */

/* ── Toast ── */
.kr-toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(16px); border-radius:12px; font-family:var(--fh); font-size:.88rem; font-weight:600; padding:12px 24px; z-index:9000; white-space:nowrap; backdrop-filter:blur(16px); box-shadow:0 8px 32px rgba(0,0,0,.4); opacity:0; transition:opacity .3s,transform .3s; }
.kr-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Responsive ── */
@media(max-width:1024px){
  .hero-body{grid-template-columns:1fr}.hero-right{display:none}
  .feats-grid{grid-template-columns:1fr}
  .detect-grid{grid-template-columns:1fr}
  .res-inner{grid-template-columns:1fr}
  .trust-map-wrap{grid-template-columns:1fr}
  .crops-bento{grid-template-columns:repeat(2,1fr)}.crop-card.featured{grid-column:auto}
}
@media(max-width:640px){
  .nav-links{display:none}.hero-h1{font-size:2.6rem}
  .crops-bento{grid-template-columns:1fr 1fr}
  .footer-links{display:none}
}