/* app.css - Futuristic Neon Agro theme
   Responsive, glass morph, parallax layers
*/

:root{
  --bg-1: #00171f;
  --bg-2: #001f2f;
  --neon-a: #00ffd5;
  --neon-b: #00a5ff;
  --neon-c: #7bffb2;
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);
  --muted: rgba(255,255,255,0.72);
  --glass-radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
body{
  background: linear-gradient(180deg,var(--bg-1), #001225 60%);
  color: #e7fbf6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* SCENE */
#scene{position:relative;min-height:100vh;overflow:hidden;}

/* PARTICLE CANVAS */
#particle-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* SKY LAYERS */
.sky-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
#sun{position:absolute;left:12%;top:6%;width:220px;height:220px;opacity:0.95;transform:translateZ(0);filter:drop-shadow(0 12px 40px rgba(0,180,140,0.12));}
.cloud{position:absolute;background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));border-radius:80px;box-shadow:0 0 40px rgba(0,150,255,0.06);}
/* keeping original sizes */
.cloud--back{width:520px;height:120px;left:10%;top:18%; transform:translateZ(0) scale(1.1); opacity:0.75;}
.cloud--mid{width:420px;height:100px;left:48%;top:10%;opacity:0.9;}
.cloud--front{width:680px;height:140px;left:20%;top:30%;opacity:0.65;}

/* WHEAT LAYER */
.wheat-layer{position:absolute;left:0;right:0;bottom:-2vh;height:40vh;z-index:2;pointer-events:none;overflow:visible;}
.wheat{position:absolute;width:18vw; height:auto; bottom: -10vh; stroke-width:2.6; stroke-linecap:round; }
.wheat--1{left:4%; transform-origin:50% 100%; stroke: url(#) ; stroke:#00ffd5; opacity:0.92; filter: drop-shadow(0 6px 18px rgba(0,160,255,0.12));}
.wheat--2{left:28%; transform-origin:50% 100%; stroke:#7bffb2; opacity:0.78; width:14vw;}
.wheat--3{left:70%; transform-origin:50% 100%; stroke:#00a5ff; opacity:0.86; width:22vw;}

/* style leaf & grains */
.wheat .leaf{stroke:transparent; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; fill:none; filter:drop-shadow(0 10px 30px rgba(0,170,230,0.12)); stroke-linecap:round;}
.wheat .leaf { stroke: none; }
.wheat .leaf { stroke-width:0; }
.wheat path.leaf { stroke: none; fill:none; }
.wheat .grain { stroke: var(--neon-a); stroke-width:2.2; opacity:0.9; }

/* TRACTOR */
.tractor-wrap{position:absolute;left:-15%;bottom:8vh;z-index:3;width:34vw;max-width:420px;pointer-events:none;}
#tractor{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 30px rgba(0,160,255,0.08));}

/* TOPBAR */
.topbar{position:fixed;left:0;right:0;top:18px;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:10px 28px;pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px}
.logo-blob{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--neon-a),var(--neon-b));box-shadow:0 6px 30px rgba(0,170,230,0.16)}
.brand-text{font-weight:700;letter-spacing:0.6px;color:var(--muted);font-size:16px}
.top-links{display:flex;gap:18px;align-items:center}
.top-links .link{color:var(--muted);text-decoration:none;font-weight:600;opacity:0.95;display:inline-flex;align-items:center;gap:8px}
.top-links .link i{font-size:14px}
.cta{background:linear-gradient(90deg,var(--neon-a),var(--neon-b));padding:8px 14px;border-radius:10px;color:#001; font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}

/* HERO */
.hero{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;padding:120px 18px 80px;min-height:70vh}
.hero-inner{max-width:1100px;width:100%;text-align:left;padding:24px;display:block}
.hero-title{font-size:40px;line-height:1.03;margin:0 0 12px;font-weight:800;text-shadow:0 8px 30px rgba(0,170,220,0.06);background:linear-gradient(90deg,#f0fff8,#bfffe6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:rgba(230,255,250,0.9);font-size:16px;max-width:820px;margin-bottom:26px;opacity:0.95}

/* CARDS */
.cards{display:flex;gap:22px;flex-wrap:wrap; margin-bottom:28px; align-items:stretch}
.card{flex:1 1 360px;min-width:260px;padding:22px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter: blur(10px);box-shadow:0 6px 30px rgba(0,0,0,0.35);cursor:pointer;
    /* transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .25s cubic-bezier(.2,.9,.3,1); */
}
.card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 18px 60px rgba(0,170,255,0.08)}
.card-icon{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:20px;color:var(--neon-a)}
.card-icon i{font-size:20px}
.card h3{margin:0 0 8px;font-size:20px}
.card p{margin:0 0 16px;color:rgba(230,255,250,0.9);line-height:1.45}
.card-cta{display:inline-block;padding:8px 12px;background:linear-gradient(90deg,var(--neon-c),var(--neon-b));color:#001;border-radius:10px;font-weight:700}

/* HERO FOOTER */
.hero-footer{display:block;text-align:center;color:rgba(230,255,250,0.55);padding-top:18px;margin-top:100px;width:100%;clear:both;}

/* responsive */
@media (max-width:880px){
  .hero{padding-top:100px}
  .hero-title{font-size:32px}
  .tractor-wrap{width:48vw;left:-25%}
  .wheat{width:28vw}
}

@media (max-width:520px){
  .topbar{padding:5px 6px}
  .brand-text{font-size:13px}
  .hero{padding:80px 14px 60px}
  .hero-title{font-size:26px}
  .cards{flex-direction:column}
  .wheat-layer{height:34vh}
  .tractor-wrap{display:none} 
  .logo-blob{width:26px;height:26px}
  .cta{display: none;}/* hide on small screens for clarity */
  .top-links{gap:17px}
  .top-links .link{font-size:13px}
}