:root{
  --ink:#0B0F14; --graphite:#1C2330; --slate:#2A3442; --paper:#F6F8FB;
  --cloud:#E8EEF5; --blue:#1F4FCC; --error:#C0363A; --ivory:#F0EDE6;
  --accent:#1F4FCC; --accent-weak:rgba(31,79,204,.18);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--cloud);background:var(--ink)}
body.theme-teal { --accent:#385779; --accent-weak:#3858798d }

/* links & buttons */
a{ color: var(--accent); text-decoration:none }
a:hover{ opacity:.9 }
.btn{ background: var(--accent); border: none; color:#fff; display:inline-block; padding:12px 16px; border-radius:10px; font-weight:700; text-decoration:none }
.btn:hover{ filter:brightness(.96) }
.btn.ghost{ background:transparent; color:var(--accent); border:1px solid var(--accent) }
.btn.ghost:hover{ background: var(--accent-weak) }

/* utils */
.visually-hidden,.sr-only{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }
.muted{opacity:.8}
h1,h2{margin:0 0 16px 0}
h2::after{content:"";display:block;width:48px;height:3px;margin-top:8px;background:var(--accent);opacity:.6;border-radius:2px}

/* ===== Layout ===== */
.container{max-width:1100px;margin:0 auto;padding:56px 24px}
section:not(.hero){max-width:1100px;margin:0 auto;padding:56px 24px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--graphite);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px}
.card h3{margin:0 0 8px 0;font-size:18px}
footer{border-top:1px solid rgba(255,255,255,.08);padding:32px 24px;text-align:center;opacity:.8}

/* ===== Header / Nav ===== */
.nav{position:fixed;z-index:40;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:linear-gradient(to bottom, rgba(11,15,20,.9), rgba(11,15,20,.5), transparent);backdrop-filter:saturate(140%)}
.brand{display:flex;align-items:center;gap:6px}
.logo-eye{width:42px;height:42px;display:inline-block;background-color:var(--ivory);-webkit-mask:url('eye.svg') center/contain no-repeat;mask:url('eye.svg') center/contain no-repeat}
.brand-name{font-weight:800;letter-spacing:.08em}
.tagline{opacity:.75;font-size:.8rem}
.menu{display:flex;gap:24px}
.menu a{text-decoration:none;color:var(--cloud);opacity:.9}
.menu a.active{color:var(--accent)}

/* Big hamburger icon (no visible text) */
.menu-toggle{
  display:none; align-items:center; justify-content:center; gap:8px;
  height:48px; width:48px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:var(--cloud);
}
.menu-toggle:focus{ outline:2px solid var(--accent); outline-offset:2px }
.menu-toggle .hamburger{ position:relative; display:block; width:28px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, background .2s ease }
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after{
  content:""; position:absolute; left:0; width:28px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, top .2s ease, opacity .2s ease
}
.menu-toggle .hamburger::before{ top:-8px }
.menu-toggle .hamburger::after{ top:8px }
/* transform to X when open */
body.nav-open .menu-toggle .hamburger{ background:transparent }
body.nav-open .menu-toggle .hamburger::before{ top:0; transform:rotate(45deg) }
body.nav-open .menu-toggle .hamburger::after{ top:0; transform:rotate(-45deg) }
@media (prefers-reduced-motion:reduce){
  .menu-toggle .hamburger, .menu-toggle .hamburger::before, .menu-toggle .hamburger::after{ transition:none }
}

/* ===== Hero ===== */
.hero{position:relative;min-height:72vh;width:100%;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:url('hero.jpg');background-repeat:no-repeat;background-position:center center;background-size:cover;filter:grayscale(100%) contrast(110%)}
.scanlines{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 2px),repeating-linear-gradient(to right, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 3px);mix-blend-mode:overlay}
.crosshair::before,.crosshair::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.18)}
.crosshair::after{top:auto;left:50%;right:auto;width:1px;height:100%}
.corners span{position:absolute;width:36px;height:36px;border:2px solid rgba(255,255,255,.35)}
.corners .tl{left:24px;top:24px;border-right:none;border-bottom:none}
.corners .tr{right:24px;top:24px;border-left:none;border-bottom:none}
.corners .bl{left:24px;bottom:24px;border-right:none;border-top:none}
.corners .br{right:24px;bottom:24px;border-left:none;border-top:none}
.cctv-bar{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);opacity:.85}
.cctv-inner{max-width:1100px;margin:0 auto;padding:6px 12px;font-size:12px;letter-spacing:.06em;display:flex;justify-content:space-between;gap:12px}
.cctv-inner { font-variant-numeric: tabular-nums; }
.headline{font-size:36px;line-height:1.2;font-weight:800;max-width:700px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.subline{margin-top:12px;opacity:.95;font-weight:600}
/* move inline grid setting into CSS so we can override cleanly */
.hero .container{ display:grid; grid-template-columns:1.2fr 1fr; gap:32px; padding:96px 24px 48px; position:relative; z-index:2 }

/* ===== Content blocks ===== */
.newsletter{background:var(--graphite);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px;margin-top:18px;max-width:540px}
.form-row{display:flex;gap:10px;align-items:center}
.input{flex:1;min-width:220px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#111722;color:var(--cloud);outline:none}
.input:focus{border-color:var(--accent)}

/* Feature list (no cards) */
.feature-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.08)}
.feature-list li{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.feature-list h3{margin:0 0 6px 0;font-size:18px}
.feature-list p{margin:0}

/* Steps / timeline */
.steps{position:relative;margin:0;padding:0;list-style:none}
.steps:before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.12)}
.step{position:relative;padding-left:50px;margin-bottom:16px}
.step:last-child{margin-bottom:0}
.step .badge{position:absolute;left:6px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.step h3{margin:0 0 6px 0;font-size:18px}
.step p{margin:0}

/* Pull quote */
.pull-quote{padding-top:8px;padding-bottom:8px}
.pull-quote blockquote{margin:0 auto;max-width:900px;text-align:center;font-size:22px;line-height:1.6;font-weight:600;letter-spacing:.01em}
.pull-quote .who{margin-top:8px;font-size:14px;opacity:.8}

/* Wrap panel + portrait panel */
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.split .col{min-width:0}
.portrait-panel{max-width:480px;margin-left:auto}
.wrap{display:block;position:relative}
.wrap .wrap-panel{ float:right; width:min(36%, 420px); margin:0 0 14px 28px; padding:22px 20px; border-radius:14px; border:1px solid rgba(255,255,255,.12); shape-outside:margin-box }
.wrap h2{margin-top:0}
/* prevent list dividers from running under the wrap panel */
.wrap .feature-list{clear:both;margin-top:18px}
/* limit list width when a wrap-panel is present */
.wrap .feature-list{ clear:none; width:calc(100% - min(36%, 420px) - 28px); box-sizing:border-box; margin-top:18px }

@media (max-width:980px){
  .wrap{
    display:flex;
    flex-direction:column;            /* allow reordering */
  }
  .wrap h2{ order:0; }
  .wrap > p.muted{ order:1; }
  .wrap .feature-list{
    order:2;
    width:auto;                       /* undo width restriction from desktop wrap */
    clear:both;
  }
  .wrap .wrap-panel{
    order:3;                          /* newsletter comes AFTER features */
    float:none;                       /* stop float so it drops into flow */
    width:100%;
    max-width:520px;
    margin:16px auto 0 auto;          /* centered */
    shape-outside:auto;
  }
  /* if your aside still has .desktop-only, force it visible on mobile */
  .wrap .wrap-panel.desktop-only{ display:block; }
}


/* Mini hero */
.mini-hero{position:relative;min-height:36vh;width:100%;display:flex;align-items:flex-end;overflow:hidden}
.mini-hero .bg{position:absolute;inset:0;background-repeat:no-repeat;background-position:center center;background-size:cover;filter:grayscale(50%) contrast(110%) brightness(95%)}
.mini-hero .shade{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(11,15,20,.15), rgba(11,15,20,.55) 75%, rgba(11,15,20,.75))}
.mini-hero .inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:96px 24px 32px;width:100%}
.mini-hero .page-title{font-size:40px;line-height:1.15;font-weight:800;letter-spacing:.01em;text-shadow:0 2px 6px rgba(0,0,0,.5)}
section.mini-hero{ max-width:none !important; width:100%; margin:0; padding:0 }
.mini-hero .bg{ background-position:center center; background-size:cover }

.screenshot {
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  background:var(--graphite);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* Contact page */
.contact-intro{max-width:900px}
.map-card{background:var(--graphite);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden}
.map-img{height:300px;background-size:cover;background-position:center;filter:grayscale(100%) contrast(110%) brightness(90%) blur(1px)}
.map-caption{padding:10px 14px;opacity:.8;font-size:13px;border-top:1px solid rgba(255,255,255,.08)}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}
.contact-form{background:var(--graphite);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-size:12px;opacity:.8;margin-bottom:6px}
.input, textarea.input{width:100%}
textarea.input{min-height:110px;resize:vertical}
.small-note{opacity:.7;font-size:12px;margin-top:8px}
.contact-list{list-style:none;margin:0 0 8px 0;padding:0}
.contact-list li{margin:0 0 6px 0;opacity:.85}

/* ===== Tabs (deduped) ===== */
.tabs{ max-width:1100px; margin:0 auto; padding:0 24px }
.tablist{ display:flex; gap:12px; align-items:flex-end; margin:0; padding-top:8px; position:relative; z-index:2 }
.tab{ appearance:none; cursor:pointer; display:flex; align-items:center; gap:10px; background:transparent; color:var(--cloud); opacity:.9; border:1px solid transparent; border-bottom:none; padding:16px 22px; border-radius:14px 14px 0 0; font-weight:800; font-size:20px }
.tab .ico{ width:22px; height:22px; opacity:.9; flex:0 0 auto }
.tab:hover{ background:rgba(255,255,255,.06) }
.tab[aria-selected="true"]{ background:var(--graphite); color:#fff; opacity:1; border:1px solid rgba(255,255,255,.12); border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; box-shadow:none }
.tab[aria-selected="true"] .ico{ opacity:1 }
.tabpanels{ background:var(--graphite); padding:24px; position:relative; margin-top:0; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; box-shadow:inset 0 3px 0 var(--accent) }
[role="tabpanel"][hidden]{ display:none }
/* square the panel top-left when first tab active */
.tabs[data-active="agri"] .tabpanels{ border-top-left-radius:0 }

/* ===== Responsive ===== */
@media (min-width:1100px){ .pull-quote blockquote{font-size:24px} }

@media (max-width:980px){
  /* header */
  .nav{ padding:0 16px }
  .menu-toggle{ display:flex }
  /* sheet menu hidden by default; shown when nav-open */
  .menu{ display:none; position:fixed; top:72px; left:12px; right:12px; z-index:50; flex-direction:column; gap:2px; padding:8px; background:var(--graphite); border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.35) }
  .menu a{ display:block; padding:12px 14px; border-radius:10px }
  .menu a:hover{ background:rgba(255,255,255,.06) }
  body.nav-open .menu{ display:flex }
  body.nav-open{ overflow:hidden }

  /* grids */
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}

  /* forms */
  .form-row{flex-direction:column;align-items:stretch}
  .form-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}

  /* hero */
  .hero .container{ grid-template-columns:1fr; padding:96px 16px 56px }
  .hero .container > div:first-child{ max-width:680px; margin:0 auto; text-align:center }
  .headline{ font-size:30px }
  .subline{ margin-top:10px }
  .hero .cta{ flex-direction:column; align-items:stretch }
  .hero .cta .btn{ width:100%; text-align:center }
}

@media (max-width:560px){
  .headline{ font-size:26px }
  .corners span{ display:none }
}

.tabpicker{ display:none; }

@media (max-width:720px){
  .tabs .tablist{ display:none; }
  .tabpicker{ display:block; margin-bottom:12px; }
  .tabpicker select.input{
    width:100%;
    /* keep native arrow; just use your input styling */
    height: 28px;
  }
}

@media (max-width:720px){
  .tabs .tablist{ display:none; }          /* hide big tabs */
  .tabs .tabpanels{
    border:none; box-shadow:none; padding:0; background: transparent;  /* wrapper becomes plain */
  }
  .tabs .tabpanels > [role="tabpanel"]{
    display:block !important;                /* show even if `hidden` is present */
    background:var(--graphite);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:20px;
    margin-bottom:12px;
  }
}