/* =========================
   Bespoke IT — Green Professional Theme
   ========================= */

:root{
  /* Brand palette */
  --green-dark:#1E2E26;       /* deep green for header/hero top */
  --green-main:#2E5541;       /* primary brand background */
  --green-card:#365D48;       /* section/card base */
  --green-light:#E9EFEA;      /* alt light background */
  --green-lighter:#F4F6F5;    /* soft neutral for contrast */
  --accent:#56B389;           /* highlight accent (buttons, icons) */
  --accent-hover:#469B75;     /* accent hover */
  --text-dark:#1E2B26;        /* text on light */
  --text-light:#F1F3F0;       /* text on dark */
  --text-muted:#C8D1CB;       /* muted secondary text */

  /* Effects & layout */
  --ring:rgba(255,255,255,.12);
  --shadow:0 4px 12px rgba(0,0,0,.15);
  --radius:12px;
  --radius-sm:8px;
  --max:1120px;
}

/* Base */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  line-height:1.7;
  background:var(--green-main);
  color:var(--text-light);
  -webkit-font-smoothing:antialiased;
}

/* Headings */
h1{font-size:clamp(2.2rem,1.6rem+1.5vw,3rem);font-weight:700;margin-bottom:.3em;}
h2{font-size:clamp(1.4rem,1.2rem+.7vw,1.8rem);font-weight:600;margin-bottom:.3em;}
h4{font-weight:600;margin-bottom:.3em;}
p{color:var(--text-muted);}

/* Header */
.site-header{
  background:linear-gradient(160deg,var(--green-dark),var(--green-main));
  color:var(--text-light);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;
  background:rgba(30,46,38,.9);
  backdrop-filter:blur(8px) saturate(140%);
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{color:var(--text-light);text-decoration:none;font-weight:800;letter-spacing:.3px;}
.nav{display:flex;gap:16px;}
.nav a{
  color:var(--text-light);
  text-decoration:none;
  font-weight:600;
  padding:8px 6px;
  border-radius:6px;
  transition:background .2s,color .2s;
}
.nav a:hover{background:rgba(255,255,255,.1);}
.nav a[aria-current="page"]{
  color:var(--accent);
}

/* Hero */
.hero{
  text-align:center;
  padding:72px 20px 60px;
  background:linear-gradient(180deg,var(--green-dark),var(--green-main) 80%);
}
.hero h1{color:var(--text-light);}
.hero p{max-width:700px;margin:10px auto 28px;color:var(--text-muted);}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* Buttons */
.btn{
  appearance:none;
  padding:10px 20px;
  font-weight:600;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s ease;
  text-decoration:none;
}
.btn-primary{
  background:var(--accent);
  color:var(--text-dark);
  border:1px solid transparent;
}
.btn-primary:hover{background:var(--accent-hover);}
.btn-ghost{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
}
.btn-ghost:hover{
  background:rgba(86,179,137,.12);
}

/* Layout */
.container{max-width:var(--max);margin:40px auto;padding:0 20px;}
.section{margin-bottom:40px;}
.card{
  background:var(--green-card);
  border:1px solid var(--ring);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  transition:transform .15s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.25);}
.eyebrow{
  display:inline-block;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent);
  font-weight:700;
  margin-bottom:8px;
}

/* Feature cards grid */
.grid{display:grid;gap:14px;}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.feature{
  background:rgba(255,255,255,.05);
  border-radius:var(--radius-sm);
  padding:16px 16px 16px 56px;
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.feature:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);transform:translateY(-2px);}
.feature svg{
  position:absolute;left:16px;top:18px;width:26px;height:26px;
  stroke:var(--accent);opacity:.9;
}
.feature h4{color:var(--text-light);}
.feature p{color:var(--text-muted);font-size:.97rem;}

/* Footer */
footer{
  background:var(--green-dark);
  color:var(--text-light);
  text-align:center;
  padding:32px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:64px;
}
footer a{color:var(--accent);text-decoration:none;}
footer a:hover{text-decoration:underline;}
.foot-inner{max-width:var(--max);margin:0 auto;}
.foot-grid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.muted{color:var(--text-muted);}

/* Responsive */
@media(max-width:720px){
  .grid.cols-3{grid-template-columns:1fr;}
  .hero{padding:60px 18px 48px;}
}