/* Sanganai Digital Solutions: forest green and cream with gold accents; Fraunces headings, Plus Jakarta Sans body (self-hosted). Light by default; the dark gold is muted on purpose. */
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:200 800; font-display:swap; src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/fraunces-latin-wght-normal.woff2) format("woff2"); }
:root { --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --font-display:"Fraunces",Georgia,"Times New Roman",serif; }
h1, h2, h3, .brand { font-family:var(--font-display); }
button, input { font-family:inherit; }
:root { color-scheme:light;
  --bg:#faf5ea; --surface:#fffdf7; --surface-2:#f0e9d6; --text:#0d1f10; --muted:#4d5a4e; --line:#ddd3b8;
  --accent:#163d16; --accent-hover:#2c6b2c; --on-accent:#ffffff; --accent-text:#163d16;
  --gold:#c8960c; --gold-hover:#b0830a; --on-gold:#1b1a14; --gold-text:#6b500d; --gold-soft:#f6e7b8; --gold-soft-text:#4d3b08;
  --green-soft:#dcebd8;
  --header-bg:#0d1f10; --header-text:#faf5ea; --header-gold:#e0b030; --on-header-gold:#14110a;
  --shadow:rgba(13,31,16,.14);
  --stripe:linear-gradient(90deg,var(--accent) 0 50%,var(--gold) 50% 100%);
}
:root[data-theme="dark"] { color-scheme:dark;
  --bg:#060e07; --surface:#0d1f10; --surface-2:#14301a; --text:#eef3ea; --muted:#9fb1a1; --line:#21392a;
  --accent:#4aae5a; --accent-hover:#63c473; --on-accent:#04120a; --accent-text:#7fdc9a;
  --gold:#b39640; --gold-hover:#c3a751; --on-gold:#17160f; --gold-text:#cdb460; --gold-soft:#262210; --gold-soft-text:#d9c47e;
  --green-soft:#14301a;
  --shadow:rgba(0,0,0,.5);
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font-body); color:var(--text); background:var(--bg); line-height:1.55; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.wrap { max-width:1100px; margin:0 auto; padding:0 max(5vw,20px); }

.top { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:14px max(5vw,20px); background:var(--header-bg); color:var(--header-text);
  border-bottom:4px solid transparent; border-image:var(--stripe) 1; position:sticky; top:0; z-index:10; }
.brand { font-size:21px; font-weight:800; letter-spacing:-.5px; margin-right:auto; }
.brand { display:inline-flex; align-items:center; }
.brand img { margin-right:10px; width:44px; height:40px; background:#faf5ea; border-radius:10px; padding:5px; object-fit:contain; }
.brand span { color:var(--header-gold); margin-left:.28em; }
.top nav { display:flex; gap:22px; font-size:14px; font-weight:700; }
.top nav a:hover { color:var(--header-gold); }
.toggle { background:rgba(255,255,255,.08); color:var(--header-text); border:1px solid rgba(255,255,255,.22); border-radius:999px; width:38px; height:38px; cursor:pointer; font-size:16px; }
.toggle:hover { border-color:var(--header-gold); }
.toggle .sun { display:none; } :root[data-theme="dark"] .toggle .sun { display:inline; } :root[data-theme="dark"] .toggle .moon { display:none; }

.hero { padding:56px 0 48px; background:linear-gradient(120deg,var(--gold-soft),var(--green-soft)); }
.hero-grid { display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
.eyebrow { color:var(--gold-text); font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; margin:0 0 10px; }
h1 { font-size:clamp(30px,5vw,46px); line-height:1.1; letter-spacing:-1px; margin:0 0 16px; }
h2 { font-size:clamp(24px,3.4vw,32px); letter-spacing:-.5px; margin:0 0 20px; }
h3 { margin:6px 0 8px; font-size:20px; }
.lead { font-size:18px; color:var(--muted); max-width:520px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 0; }
.btn { display:inline-block; padding:13px 22px; border-radius:30px; font-weight:800; border:2px solid transparent; }
.btn.primary { background:var(--accent); color:var(--on-accent); } .btn.primary:hover { background:var(--accent-hover); }
.btn.ghost { border-color:var(--gold); color:var(--text); background:var(--surface); } .btn.ghost:hover { background:var(--gold); color:var(--on-gold); }

section { padding:56px 0; }
section.alt { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.card { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:24px; }
.card p { color:var(--muted); margin:0 0 16px; }
.badge { display:inline-block; background:var(--gold-soft); color:var(--gold-soft-text); border-radius:999px; padding:3px 12px; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.link { color:var(--accent-text); font-weight:800; } .link:hover { text-decoration:underline; }
.contact p { color:var(--muted); max-width:560px; }

footer { background:var(--header-bg); color:var(--header-text); padding:26px 0; font-size:14px; border-top:4px solid transparent; border-image:var(--stripe) 1; }
.foot { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; }
footer a { text-decoration:underline; }

@media (max-width:760px) {
  .hero-grid { grid-template-columns:1fr; }
  .top nav { display:none; }
}