/* ==========================================================================
   LeveLite — theme stylesheet
   Palette: harvest field + hi-tech signal colors
   ========================================================================== */

:root{
  /* --- color tokens --- */
  --ink:        #131b14;   /* night-field near-black */
  --ink-soft:   #202b21;
  --paper:      #f7f3e8;   /* grain / paper */
  --paper-dim:  #efe8d6;
  --field:      #35583a;   /* deep field green */
  --field-dark: #223a26;
  --wheat:      #e3a83b;   /* wheat gold / amber signal */
  --wheat-dark: #b9812a;
  --steel:      #3c6e71;   /* hi-tech steel-teal */
  --signal-red: #d8492f;   /* full-bin signal */
  --line:       rgba(19,27,20,.12);
  --line-light: rgba(247,243,232,.16);

  /* --- type --- */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius: 10px;
  --shadow-lg: 0 24px 60px -20px rgba(19,27,20,.35);
  --shadow-sm: 0 8px 20px -12px rgba(19,27,20,.3);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

h1,h2,h3,h4,.display-font{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}

a{color:var(--field);}
a:hover{color:var(--wheat-dark);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  font-weight:600;
}
.eyebrow.on-dark{color:var(--wheat);}

.mono{font-family:var(--font-mono);}

.text-field{color:var(--field);}
.text-wheat{color:var(--wheat-dark);}
.bg-paper{background:var(--paper);}
.bg-paper-dim{background:var(--paper-dim);}

/* --- buttons --- */
.btn{
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:600;
  padding:.7rem 1.6rem;
  letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px);}

.btn-wheat{
  background:var(--wheat);
  border:1px solid var(--wheat);
  color:var(--ink);
}
.btn-wheat:hover{
  background:var(--wheat-dark);
  border-color:var(--wheat-dark);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
}

.btn-outline-paper{
  background:transparent;
  border:1px solid var(--line-light);
  color:var(--paper);
}
.btn-outline-paper:hover{
  background:var(--line-light);
  color:var(--paper);
}

.btn-outline-ink{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
}
.btn-outline-ink:hover{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(19,27,20,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line-light);
}

.brand{
  display:flex;
  align-items:center;
  color:var(--paper) !important;
}
.site-logo{
  height:26px;
  width:auto;
  display:block;
}
.site-logo-lg{height:32px;}

.navbar .nav-link{
  color:rgba(247,243,232,.82) !important;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.95rem;
  padding:.5rem .9rem !important;
  position:relative;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color:var(--paper) !important;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:.9rem; right:.9rem; bottom:.15rem;
  height:2px;
  background:var(--wheat);
  border-radius:2px;
}
.navbar .nav-link.nav-shop{
  color:var(--ink) !important;
  background:var(--wheat);
  border-radius:999px;
  padding:.5rem 1rem !important;
  margin-left:.35rem;
}
.navbar .nav-link.nav-shop:hover{background:var(--wheat-dark);color:var(--ink) !important;}
.navbar-toggler{
  border-color:var(--line-light);
  padding:.4rem .55rem;
}

.navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(227,168,59,.4);}

.navbar-toggler-icon{
    display:inline-block;
    width:1.5em;
    height:1.5em;
    vertical-align:middle;

    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23f7f3e8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(227,168,59,.16), transparent 75%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  color:var(--paper);
  border-bottom:1px solid var(--line-light);
  overflow:hidden;
}

.hero-splash{
  background-image:
    linear-gradient(270deg, rgba(19,27,20,.94) 28%, rgba(19,27,20,.72) 52%, rgba(19,27,20,.4) 78%),
    url("/media/hero-splash.webp");
  background-size:cover;
  background-position:center;
}

@media (max-width: 767.98px){
    .hero-splash{
        background-position: 20% center;
    }
}

.hero h1{
  color:var(--paper);
  font-size:clamp(2.2rem, 4.2vw, 3.4rem);
  line-height:1.08;
}
.hero .lead{
  color:rgba(247,243,232,.78);
  font-size:1.1rem;
  max-width:34rem;
}

/* --- signature: live level indicator --- */
.indicator{
  display:flex;
  align-items:flex-end;
  gap:16px;
  justify-content:center;
}
.indicator-readout{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
}
.indicator-readout .pct{
  font-family:var(--font-mono);
  font-size:2rem;
  font-weight:700;
  color:var(--wheat);
  font-variant-numeric:tabular-nums;
}
.indicator-readout .label{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(247,243,232,.55);
}

.light-track{
  width:64px;
  height:280px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(247,243,232,.06), rgba(247,243,232,.02));
  border:1px solid var(--line-light);
  display:flex;
  flex-direction:column-reverse;
  gap:6px;
  padding:8px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.35);
}
.light-track .cell{
  flex:1;
  border-radius:6px;
  background:rgba(247,243,232,.06);
}
.light-track .cell.lit{
  animation: glow 3.6s ease-in-out infinite;
}
.light-track .cell.lit.c-green{background:var(--field); box-shadow:0 0 14px 1px rgba(53,88,58,.7);}
.light-track .cell.lit.c-wheat{background:var(--wheat); box-shadow:0 0 14px 1px rgba(227,168,59,.65);}
.light-track .cell.lit.c-red{background:var(--signal-red); box-shadow:0 0 14px 1px rgba(216,73,47,.6);}

@keyframes glow{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.25);}
}

.bin-silhouette{
  position:absolute;
  right:-40px; bottom:-60px;
  width:340px; height:340px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(60,110,113,.28), transparent 72%);
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .light-track .cell.lit{animation:none;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   Sections / cards
   ========================================================================== */
.section{padding:5rem 0;}
.section-tight{padding:3.25rem 0;}

.section-title{
  font-size:clamp(1.6rem, 2.6vw, 2.2rem);
}

.card-feature{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.9rem 1.7rem;
  height:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-feature:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-sm);
  border-color:rgba(53,88,58,.35);
}
.card-feature .icon{
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--paper-dim);
  color:var(--field);
  margin-bottom:1rem;
}
.card-feature h3{font-size:1.1rem;margin-bottom:.5rem;}
.card-feature p{color:#4b5650;font-size:.95rem;margin:0;}

.stat-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat{
  padding:1.6rem 0;
  text-align:center;
}
.stat .num{
  font-family:var(--font-mono);
  font-size:1.9rem;
  font-weight:700;
  color:var(--field);
}
.stat .lbl{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6b756e;
}

/* --- project cards --- */
.project-card{
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  height:100%;
}
.project-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  background:var(--paper-dim);
}
.project-card .body{padding:1.25rem 1.35rem 1.5rem;}
.project-card .tag{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel);
}
.project-card h3{font-size:1.05rem;margin:.25rem 0 .5rem;}
.project-card p{color:#4b5650;font-size:.92rem;margin:0;}

/* --- installer / CTA band --- */
.band-field{
  background:linear-gradient(120deg, var(--field), var(--field-dark));
  color:var(--paper);
}
.band-field a.btn-wheat{box-shadow:var(--shadow-sm);}

/* --- about page --- */
.pillar{
  display:flex;
  gap:1rem;
  padding:1.3rem 0;
  border-bottom:1px solid var(--line);
}
.pillar:last-child{border-bottom:none;}
.pillar .icon{
  width:40px;height:40px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:9px;
  background:var(--paper-dim);
  color:var(--field);
}
.pillar h3{font-size:1.02rem;margin-bottom:.3rem;}
.pillar p{margin:0;color:#4b5650;font-size:.95rem;}

/* --- contact page --- */
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem;
}
.form-control{
  border-radius:8px;
  border:1px solid var(--line);
  padding:.65rem .85rem;
}
.form-control:focus{
  border-color:var(--field);
  box-shadow:0 0 0 .2rem rgba(53,88,58,.15);
}
label{font-family:var(--font-display);font-weight:500;font-size:.92rem;margin-bottom:.3rem;}

.contact-info-row{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--line);
}
.contact-info-row:last-child{border-bottom:none;}
.contact-info-row .icon{
  width:38px;height:38px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--paper-dim);
  color:var(--field);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--ink);
  color:rgba(247,243,232,.75);
  padding:3.25rem 0 1.75rem;
}
.site-footer .brand{color:var(--paper) !important;}
.site-footer a{color:rgba(247,243,232,.75);}
.site-footer a:hover{color:var(--wheat);}
.site-footer h4{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(247,243,232,.5);
  margin-bottom:.9rem;
}
.footer-bottom{
  border-top:1px solid var(--line-light);
  margin-top:2.25rem;
  padding-top:1.25rem;
  font-size:.82rem;
  color:rgba(247,243,232,.5);
}

/* --- focus visibility --- */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--wheat);
  outline-offset:2px;
}

/* --- skip link --- */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  background:var(--wheat);
  color:var(--ink);
  padding:.6rem 1rem;
  z-index:2000;
  border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;top:0;}