/* ══════════════════════════════════════════════════════════════
   NAXRA — Marketing site stylesheet
   Brand tokens lifted directly from the AgriVision dashboard
   (sand/desert gradient + vegetation green + water/tech teal)
   ══════════════════════════════════════════════════════════════ */

:root{
  /* -- core palette (matches dashboard Sidebar.jsx / App.jsx) -- */
  --sand-1:#f0dfc0;
  --sand-2:#dfc8a0;
  --sand-3:#c9aa78;
  --panel:rgba(255,250,240,0.90);
  --panel-solid:#fffaf0;
  --border:rgba(212,180,131,0.40);
  --border-strong:rgba(212,180,131,0.65);

  --text-primary:#1a1208;
  --text-secondary:#6b5230;
  --text-muted:#9c7d55;

  --green:#3d7a52;
  --green-dark:#245536;
  --gold:#c9a020;
  --blue:#4a8fa8;
  --wind:#4ab4e8;

  --font-display:'Fraunces','Georgia',serif;
  --font-heading:'Sora',-apple-system,'Segoe UI',sans-serif;
  --font-body:'Sora',-apple-system,'Segoe UI',sans-serif;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-soft:0 8px 28px rgba(120,90,40,0.14);
  --shadow-deep:0 18px 50px rgba(60,40,10,0.22);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-primary);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(74,143,168,0.10), transparent 60%),
    linear-gradient(160deg,var(--sand-1) 0%,var(--sand-2) 45%,var(--sand-3) 100%);
  background-attachment:fixed;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0 0 .5em; color:var(--text-primary); font-weight:700; letter-spacing:-0.01em;}
h1,h2{font-family:var(--font-display); font-weight:600; letter-spacing:-0.015em;}
h3,h4{font-family:var(--font-heading);}
p{margin:0 0 1em; color:var(--text-secondary);}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--green-dark); background:rgba(61,122,82,0.10);
  border:1px solid rgba(61,122,82,0.25); border-radius:100px; padding:6px 14px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-heading); font-weight:700; font-size:14px;
  padding:13px 26px; border-radius:11px; cursor:pointer; border:none;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff; box-shadow:0 10px 24px rgba(36,85,54,0.30);}
.btn-primary:hover{box-shadow:0 14px 30px rgba(36,85,54,0.40);}
.btn-ghost{background:rgba(255,255,255,0.55); color:var(--text-primary); border:1px solid var(--border-strong); backdrop-filter:blur(8px);}
.btn-ghost:hover{background:rgba(255,255,255,0.8);}
.btn-gold{background:linear-gradient(135deg,#dcb43a,var(--gold)); color:#241a03; box-shadow:0 10px 24px rgba(201,160,32,0.30);}

/* ── NAV ─────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,250,240,0.78);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:12px 24px; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:40px; width:auto; object-fit:contain;}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-links a{
  font-size:13.5px; font-weight:600; color:var(--text-secondary);
  padding:9px 15px; border-radius:9px; transition:all .15s;
  border-bottom:2px solid transparent;
}
.nav-links a:hover{background:rgba(180,140,70,0.10); color:var(--text-primary);}
.nav-links a.active{color:var(--green-dark); border-bottom:2px solid var(--green);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{width:22px; height:2px; background:var(--text-primary); border-radius:2px;}

/* ── FOOTER ─────────────────────────────────────────── */
.site-footer{
  background:linear-gradient(160deg,#1a2f22 0%,#12241c 60%,#0d1a15 100%);
  color:#d9d0bd; margin-top:80px; border-top:1px solid rgba(201,160,32,0.25);
}
.site-footer .container{padding:56px 24px 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
.footer-grid h4{color:#f0dfc0; font-size:13px; text-transform:uppercase; letter-spacing:1px;}
.footer-grid a{color:#b8ad93; font-size:13.5px; display:block; padding:5px 0; transition:color .15s;}
.footer-grid a:hover{color:var(--gold);}
.footer-brand img{height:36px; margin-bottom:12px; filter:brightness(1.15);}
.footer-brand p{color:#a99e86; font-size:13px; max-width:280px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08); margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12px; color:#8b8069;
}

/* ── SECTION UTILITIES ──────────────────────────────── */
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
.section-head p{margin-top:12px;}
.grid{display:grid; gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:28px; box-shadow:var(--shadow-soft); backdrop-filter:blur(10px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-deep);}
.card .icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:16px; background:rgba(61,122,82,0.12); border:1px solid rgba(61,122,82,0.2);
}
.card.blue .icon{background:rgba(74,143,168,0.14); border-color:rgba(74,143,168,0.25);}
.card.gold .icon{background:rgba(201,160,32,0.14); border-color:rgba(201,160,32,0.25);}
.card h3{font-size:17px;}
.card p{font-size:13.8px; margin-bottom:0;}
.tag{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
  color:var(--green-dark); background:rgba(61,122,82,0.10); border-radius:6px; padding:3px 9px;
  display:inline-block; margin-bottom:10px;
}
.tag.ai{color:#215062; background:rgba(74,143,168,0.14);}
.tag.weather{color:#0e6a94; background:rgba(74,180,232,0.16);}

/* ── HERO ───────────────────────────────────────────── */
.hero{position:relative; padding:76px 0 40px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero h1{font-size:44px; line-height:1.12; letter-spacing:-0.02em;}
.hero-lead{font-size:16.5px; max-width:480px;}
.hero-cta{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:28px; margin-top:40px; flex-wrap:wrap;}
.hero-stats div b{display:block; font-family:var(--font-heading); font-size:24px; color:var(--green-dark);}
.hero-stats div span{font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;}

/* Satellite scan visual (signature element) */
.scan-visual{
  position:relative; aspect-ratio:1/1; border-radius:24px;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.5), transparent 55%), linear-gradient(150deg,#e7d3ab,#c9aa78);
  border:1px solid var(--border-strong); box-shadow:var(--shadow-deep); overflow:hidden;
}
.scan-visual svg{width:100%; height:100%; display:block;}
.scan-line{
  position:absolute; left:0; right:0; height:38%;
  background:linear-gradient(to bottom, rgba(74,180,232,0) 0%, rgba(74,180,232,0.28) 45%, rgba(74,180,232,0.55) 100%);
  animation:scan 4.5s ease-in-out infinite;
}
@keyframes scan{
  0%{ top:-40%; }
  50%{ top:100%; }
  100%{ top:-40%; }
}
.scan-badge{
  position:absolute; top:16px; left:16px; background:rgba(15,25,20,0.72); color:#d9f0d9;
  font-size:11px; padding:6px 11px; border-radius:100px; display:flex; align-items:center; gap:6px;
  font-weight:600; backdrop-filter:blur(6px);
}
.scan-badge .dot{width:6px; height:6px; border-radius:50%; background:#59e08a; box-shadow:0 0 8px #59e08a; animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

/* ── SPLIT / STAT STRIP ─────────────────────────────── */
.strip{
  background:rgba(255,255,255,0.5); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.strip .grid-4{padding:34px 0;}
.strip .stat{text-align:center;}
.strip .stat b{font-family:var(--font-heading); font-size:30px; color:var(--green-dark); display:block;}
.strip .stat span{font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;}

/* ── PROCESS / TIMELINE ─────────────────────────────── */
.timeline{display:flex; flex-direction:column; gap:0;}
.tl-item{display:grid; grid-template-columns:60px 1fr; gap:22px; padding:26px 0; border-bottom:1px dashed var(--border);}
.tl-item:last-child{border-bottom:none;}
.tl-num{
  font-family:var(--font-heading); font-weight:800; font-size:20px; color:var(--green);
  width:48px; height:48px; border-radius:50%; border:1.5px solid var(--green); display:flex; align-items:center; justify-content:center;
}

/* ── FORMS (contact) ────────────────────────────────── */
.form-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-soft);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px;}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:14px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--border-strong); background:rgba(255,255,255,0.7); color:var(--text-primary); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(61,122,82,0.15);}
.field textarea{resize:vertical; min-height:120px;}
.form-note{font-size:12px; color:var(--text-muted); margin-top:14px;}
#formStatus{font-size:13px; font-weight:600; margin-top:10px;}

/* ── CTA BAND ───────────────────────────────────────── */
.cta-band{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg); background:linear-gradient(135deg,#1f4a2f,#123321);
  color:#eef4ea; padding:52px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  box-shadow:var(--shadow-deep);
}
.cta-band::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 2px, transparent 2px, transparent 14px),
             radial-gradient(500px circle at 88% 15%, rgba(201,160,32,0.20), transparent 60%);
}
.cta-band > *{position:relative; z-index:1;}
.cta-band h2{color:#fff; margin-bottom:6px; font-size:26px;}
.cta-band p{color:#c7d8c4; margin:0;}

/* ── MISC ───────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
.divider-map{opacity:.5;}
.pill-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px;}
.pill{font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:100px; background:rgba(255,255,255,0.55); border:1px solid var(--border-strong); color:var(--text-secondary);}

/* ── SCROLL PROGRESS BAR ────────────────────────────── */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--green),var(--gold));
  z-index:400; transition:width .1s linear;
  box-shadow:0 0 8px rgba(201,160,32,0.5);
}

/* ── HEADER — SCROLLED STATE ────────────────────────── */
.site-header{transition:box-shadow .25s ease, background .25s ease, padding .25s ease;}
.site-header.scrolled{
  box-shadow:0 8px 24px rgba(60,40,10,0.12);
  background:rgba(255,250,240,0.94);
}
.site-header.scrolled .nav-wrap{padding:8px 24px;}

/* Sliding active-link indicator */
.nav-links{position:relative;}
.nav-links a{position:relative; z-index:1;}
.nav-indicator{
  position:absolute; bottom:0; height:2px; background:var(--green);
  transition:left .3s cubic-bezier(.65,0,.35,1), width .3s cubic-bezier(.65,0,.35,1);
  opacity:0; pointer-events:none;
}
.nav-links:hover .nav-indicator{opacity:1;}

/* Animated hamburger -> X */
.nav-toggle span{transition:transform .25s ease, opacity .2s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── BUTTON RIPPLE ────────────────────────────────────── */
.btn{position:relative; overflow:hidden;}
.btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,0.55); pointer-events:none;
  animation:ripple-anim .6s ease-out forwards;
}
.btn-gold .ripple, .btn-ghost .ripple{background:rgba(36,85,54,0.18);}
@keyframes ripple-anim{ to{ transform:scale(3); opacity:0; } }

/* ── CARD 3D TILT ─────────────────────────────────────── */
.card{
  transform-style:preserve-3d; will-change:transform;
  transition:transform .15s ease, box-shadow .2s ease;
}
.card .icon{transition:transform .3s ease;}
.card:hover .icon{transform:scale(1.12) rotate(-6deg);}

/* Hero cursor-follow glow */
.hero{isolation:isolate;}
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,20%), rgba(61,122,82,0.16), transparent 60%);
  opacity:0; transition:opacity .4s ease;
}
.hero:hover::before{opacity:1;}

.scan-visual{transition:transform .2s ease;}

/* ── BACK TO TOP ──────────────────────────────────────── */
.back-to-top{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow:0 10px 24px rgba(36,85,54,0.35); border:none; cursor:pointer;
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:300;
}
.back-to-top.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.back-to-top:hover{transform:translateY(-3px) scale(1.05);}

/* Staggered reveal — delay set per sibling index via inline custom property */
.reveal{transition-delay:var(--reveal-delay,0s);}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .scroll-progress, .card, .btn .ripple, .nav-indicator, .nav-toggle span, .back-to-top{transition:none!important; animation:none!important;}
}

/* ── SIGNATURE: RADAR SWEEP ON SCAN VISUAL ───────────── */
.scan-visual{position:relative;}
.scan-visual::after{
  content:'';
  position:absolute; inset:0; border-radius:24px; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(89,224,138,0.32), transparent 32%, transparent 100%);
  animation:radar-spin 5s linear infinite;
  mix-blend-mode:screen;
}
.orbit-ring{
  position:absolute; inset:8%; border:1px dashed rgba(36,85,54,0.28); border-radius:50%; pointer-events:none;
}
.orbit-ring::before{
  content:''; position:absolute; width:9px; height:9px; border-radius:50%;
  background:#245536; box-shadow:0 0 10px rgba(36,85,54,0.7);
  top:-4.5px; left:calc(50% - 4.5px);
  animation:orbit-spin 5s linear infinite;
  transform-origin:50% calc(50% + 4.5px + 46%);
}
@keyframes radar-spin{ to{ transform:rotate(360deg); } }
@keyframes orbit-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .scan-visual::after, .orbit-ring::before{ animation:none; } }

/* ── CARD ACCENT BAR ──────────────────────────────────── */
.card{position:relative; overflow:hidden;}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--green),var(--green-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.card.blue::before{background:linear-gradient(90deg,var(--blue),#2f6a80);}
.card.gold::before{background:linear-gradient(90deg,var(--gold),#8a6b13);}
.card:hover::before{transform:scaleX(1);}

/* ── REGION MARQUEE TICKER ────────────────────────────── */
.region-ticker{
  overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.4); padding:12px 0; margin-top:44px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.region-ticker-track{display:flex; gap:36px; width:max-content; animation:ticker-scroll 32s linear infinite;}
.region-ticker span{
  font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.region-ticker span::before{content:'📍'; font-size:11px;}
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .region-ticker-track{ animation:none; } }

/* ── HERO LOAD-IN STAGGER ─────────────────────────────── */
@keyframes fade-up-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.hero-grid > div:first-child > *{ opacity:0; animation:fade-up-in .7s ease forwards; }
.hero-grid > div:first-child > *:nth-child(1){animation-delay:.05s;}
.hero-grid > div:first-child > *:nth-child(2){animation-delay:.15s;}
.hero-grid > div:first-child > *:nth-child(3){animation-delay:.25s;}
.hero-grid > div:first-child > *:nth-child(4){animation-delay:.35s;}
.hero-grid > div:first-child > *:nth-child(5){animation-delay:.45s;}
@media (prefers-reduced-motion: reduce){ .hero-grid > div:first-child > *{ animation:none; opacity:1; } }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--panel-solid); border-bottom:1px solid var(--border); padding:10px; gap:2px;
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:flex;}
  .nav-actions .btn-ghost{display:none;}
  .hero h1{font-size:32px;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; text-align:left;}
  .cta-band{flex-direction:column; text-align:center;}
}