/* ==========================================================================
   Glenburn Technologies — modern responsive stylesheet
   Palette: slate grey + signature gold. Light/dark aware.
   ========================================================================== */

:root {
  --gold:        #e8b800;
  --gold-deep:   #c99700;
  --ink:         #2b2d31;
  --slate:       #4a4d52;
  --grey:        #6e7175;
  --muted:       #8a8d92;
  --line:        #e4e5e8;
  --bg:          #ffffff;
  --bg-alt:      #f6f7f9;
  --bg-panel:    #ffffff;
  --header-bg:   rgba(255,255,255,.92);
  --shadow:      0 1px 2px rgba(20,22,28,.06), 0 8px 24px rgba(20,22,28,.06);
  --shadow-sm:   0 1px 2px rgba(20,22,28,.08);
  --radius:      12px;
  --radius-sm:   8px;
  --maxw:        1180px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#eceef1; --slate:#c7cacf; --grey:#a7abb1; --muted:#878b91;
    --line:#2a2d33; --bg:#15171b; --bg-alt:#1b1e23; --bg-panel:#1d2026;
    --header-bg:rgba(21,23,27,.9);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --ink:#eceef1; --slate:#c7cacf; --grey:#a7abb1; --muted:#878b91;
  --line:#2a2d33; --bg:#15171b; --bg-alt:#1b1e23; --bg-panel:#1d2026;
  --header-bg:rgba(21,23,27,.9);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--gold-deep); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { color:var(--ink); line-height:1.2; font-weight:700; letter-spacing:-.01em; }
h1 { font-size:clamp(1.9rem,4vw,2.9rem); margin:0 0 .4em; }
h2 { font-size:clamp(1.4rem,2.6vw,2rem); margin:1.8em 0 .5em; }
h3 { font-size:1.15rem; margin:1.6em 0 .4em; }
p { margin:0 0 1em; color:var(--slate); }
ul,ol { color:var(--slate); padding-left:1.25em; }
li { margin:.3em 0; }
hr { border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* ---- Buttons --------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:.5em; font-weight:600;
  padding:.7em 1.3em; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s; font-size:.95rem; }
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn-primary { background:var(--gold); color:#1a1600; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--gold-deep); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold-deep); }

/* ---- Header / top nav ------------------------------------------------ */
.site-header { position:sticky; top:0; z-index:50; background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; gap:1.2rem; height:68px; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--ink);
  font-size:1.15rem; letter-spacing:-.02em; }
.brand:hover { text-decoration:none; }
.brand small { display:block; font-size:.62rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin-top:1px; }
.brand .logo { width:34px; height:34px; flex:0 0 auto; }
.nav-links { display:flex; gap:.2rem; margin-left:auto; align-items:center; }
.nav-links a { color:var(--slate); font-weight:500; font-size:.95rem; padding:.5em .8em;
  border-radius:8px; }
.nav-links a:hover { color:var(--ink); background:var(--bg-alt); text-decoration:none; }
.nav-links a.active { color:var(--gold-deep); }
.nav-cta { margin-left:.4rem; }
.nav-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:8px; width:42px; height:40px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; }
.nav-toggle svg { width:22px; height:22px; }

@media (max-width:860px){
  .nav-toggle { display:inline-flex; }
  .nav-links { position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--bg); border-bottom:1px solid var(--line); padding:.6rem 16px 1rem;
    gap:.1rem; margin-left:0; box-shadow:var(--shadow); transform:translateY(-130%);
    transition:transform .25s ease; }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { padding:.8em .6em; font-size:1.02rem; }
  .nav-cta { margin:.5rem 0 0; }
}

/* ---- Hero ------------------------------------------------------------ */
.hero { position:relative; overflow:hidden; background:
    radial-gradient(1200px 400px at 85% -10%, rgba(232,184,0,.16), transparent 60%),
    linear-gradient(180deg, var(--bg-alt), var(--bg)); border-bottom:1px solid var(--line); }
.hero-inner { padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4.5rem); max-width:760px; }
.eyebrow { text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; font-weight:700;
  color:var(--gold-deep); margin-bottom:1rem; }
.hero h1 .accent { color:var(--gold-deep); }
.hero .lede { font-size:clamp(1.05rem,1.8vw,1.3rem); color:var(--slate); max-width:620px; }
.hero-actions { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }
.tagline-chips { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.chip { font-size:.8rem; font-weight:600; color:var(--grey); border:1px solid var(--line);
  padding:.3em .8em; border-radius:999px; background:var(--bg-panel); }
.chip b { color:var(--gold-deep); }

/* ---- Sections / cards ----------------------------------------------- */
.section { padding:clamp(3rem,6vw,5rem) 0; }
.section-alt { background:var(--bg-alt); }
.section-head { max-width:680px; margin-bottom:2.2rem; }
.section-head h2 { margin-top:0; }
.section-head p { font-size:1.08rem; }
.grid { display:grid; gap:1.2rem; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .grid-3,.grid-2{grid-template-columns:1fr;} }

.card { background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .2s ease, border-color .2s; }
a.card:hover { text-decoration:none; transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--gold); }
.card h3 { margin:.2rem 0 .4rem; }
.card p { margin:0; font-size:.95rem; }
.card .ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#1a1600; margin-bottom:1rem; }
.card .ico svg { width:22px; height:22px; }
.card .more { color:var(--gold-deep); font-weight:600; font-size:.9rem; margin-top:.8rem; display:inline-block; }

/* ---- Customers strip ------------------------------------------------- */
.logos { display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; align-items:center; justify-content:center; }
.logos img { height:46px; width:auto; opacity:.7; filter:grayscale(1);
  transition:opacity .2s, filter .2s; }
.logos img:hover { opacity:1; filter:none; }

/* ---- Inner page: sidebar layout ------------------------------------- */
.page { display:grid; grid-template-columns:270px 1fr; gap:2.5rem; align-items:start;
  padding:2.2rem 0 4rem; }
.sidebar { position:sticky; top:84px; background:var(--bg-panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow-sm); }
.sidebar h4 { margin:.2rem 0 .6rem; padding:0 .4rem; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }
.sidenav { list-style:none; margin:0 0 .6rem; padding:0; }
.sidenav li { margin:0; }
.sidenav > li > a, .sidenav .grp > button {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  font:inherit; text-align:left; background:none; border:0; cursor:pointer;
  color:var(--slate); font-weight:600; font-size:.9rem; padding:.5em .6em; border-radius:8px; }
.sidenav a { color:var(--slate); font-size:.9rem; padding:.45em .6em; border-radius:8px; display:block; }
.sidenav a:hover, .sidenav .grp>button:hover { background:var(--bg-alt); color:var(--ink); text-decoration:none; }
.sidenav a.active { background:rgba(232,184,0,.14); color:var(--gold-deep); font-weight:600; }
.sidenav .sub { list-style:none; margin:.1rem 0 .4rem; padding:0 0 0 .7rem;
  border-left:1px solid var(--line); margin-left:.7rem; }
.sidenav .sub a { font-weight:500; font-size:.86rem; color:var(--grey); }
.sidenav .grp > button .chev { transition:transform .2s; color:var(--muted); }
.sidenav .grp.collapsed .sub { display:none; }
.sidenav .grp.collapsed > button .chev { transform:rotate(-90deg); }

.content { min-width:0; }
.content .kicker { color:var(--gold-deep); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:.74rem; margin-bottom:.5rem; }
.content h1 { margin-top:0; }
.content .feature-img { float:right; max-width:360px; margin:.3rem 0 1.2rem 1.6rem;
  border-radius:var(--radius-sm); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.callout { background:var(--bg-alt); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--radius-sm); padding:1rem 1.2rem; margin:1.6rem 0; font-size:.95rem; }
.content a.email { font-weight:600; }

.feature-cols { columns:2; column-gap:2.5rem; }
.feature-cols ul { margin:0; }
@media (max-width:720px){ .feature-cols{columns:1;} }

@media (max-width:860px){
  .page { grid-template-columns:1fr; gap:1.2rem; }
  .sidebar { position:static; }
  .content .feature-img { float:none; margin:1rem 0; max-width:100%; }
}

/* ---- Breadcrumb ------------------------------------------------------ */
.crumb { font-size:.85rem; color:var(--muted); padding:1.2rem 0 0; }
.crumb a { color:var(--grey); }
.crumb span { color:var(--ink); }

/* ---- Footer ---------------------------------------------------------- */
.site-footer { background:var(--ink); color:#c9ccd2; margin-top:auto; }
:root[data-theme="light"] .site-footer { background:#23252a; }
.site-footer a { color:#e7e9ee; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem;
  padding:3rem 0 2rem; }
.site-footer h5 { color:#fff; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  margin:0 0 .9rem; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin:.4em 0; }
.site-footer .f-links a { color:#aeb2ba; font-size:.92rem; }
.site-footer .f-links a:hover { color:#fff; }
.footer-brand .brand { color:#fff; }
.footer-brand p { color:#9ea2aa; font-size:.9rem; max-width:34ch; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:1.1rem 0;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.82rem; color:#878b92; }
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:460px){ .footer-grid{grid-template-columns:1fr;} }

body { min-height:100vh; display:flex; flex-direction:column; }
.main { flex:1 0 auto; }