:root{
  --bg:#ffffff; /* we will invert content with CSS mix for a dark base using layers — but keep white tokens for strict contrast */
  --page-bg:#0b0d0f;
  --panel:#0f1113;
  --muted:#9aa3a8;
  --text:#e6eef1;
  --accent:#7bd07a;    /* warm green */
  --accent-strong:#66c06a;
  --line:rgba(255,255,255,0.06);
  --radius:8px;
  --container:1200px;
  --gap:28px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Base reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(circle at 10% 20%, rgba(102,192,106,0.02), transparent 3%), var(--page-bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-weight:400;
  font-size:16px;
}

/* container / utilities */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.row--between{display:flex;justify-content:space-between;align-items:center}
.small{font-size:13px}
.muted{color:var(--muted);font-size:15px}

/* Header */
.site-header{border-bottom:1px solid var(--line);backdrop-filter: blur(4px);padding:20px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.logo-mark{width:44px;height:44px;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center;font-weight:700;color:var(--accent)}
.brand-meta{display:flex;flex-direction:column}
.brand-name{font-weight:700}
.brand-domain{font-size:13px;color:var(--muted)}

/* NAV */
.nav{display:flex;gap:16px;align-items:center}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:6px;font-weight:600}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--muted);padding:8px 12px;border-radius:8px;text-decoration:none}
.btn-cta{background:linear-gradient(180deg,var(--accent-strong),var(--accent));color:#04100b;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none;border:1px solid rgba(0,0,0,0.12);box-shadow:0 8px 24px rgba(8,16,10,0.12);}

/* HERO */
.hero{padding:72px 0 48px}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:start}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}

.eyebrow{color:var(--muted);font-size:13px;display:flex;gap:10px;align-items:center;margin-bottom:12px}
.eyebrow-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.hero-title{font-size:34px;line-height:1.05;margin:0 0 12px;font-weight:800;letter-spacing:-0.4px}
.hero-sub{color:var(--muted);max-width:64ch;margin:0 0 20px}

.hero-actions{display:flex;gap:12px;align-items:center;margin-top:12px}
.trust-pills{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.pill{background:transparent;border:1px solid var(--line);padding:8px 10px;border-radius:8px;color:var(--muted);font-weight:600}

/* HERO RIGHT (card + orb) */
.hero-right{position:relative}
.orb{position:absolute;right:-40px;top:-40px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(102,192,106,0.15), rgba(102,192,106,0.05) 30%, transparent 60%);
  filter:blur(26px);box-shadow:0 24px 64px rgba(4,8,6,0.28)}

/* contact card */
.contact-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border-radius:10px;padding:18px;border:1px solid var(--line)}
.card-head{font-weight:700;margin-bottom:6px}
.card-copy{color:var(--muted);font-size:14px;margin-bottom:12px}
.lead-form{display:flex;flex-direction:column;gap:10px}
.input{background:transparent;border:1px solid rgba(255,255,255,0.03);padding:10px;border-radius:8px;color:var(--text);outline:none}
.input:focus{box-shadow:0 0 0 4px rgba(102,192,106,0.06);border-color:var(--accent)}
.form-row{display:flex;gap:8px;align-items:center}

/* ABOUT / CRED */
.section{padding:48px 0;border-top:1px solid rgba(255,255,255,0.02)}
.section--tight{padding:34px 0}
.split-2{display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start}
@media(max-width:980px){.split-2{grid-template-columns:1fr}}
.cred-box{border:1px solid var(--line);padding:16px;border-radius:8px}
.lead-info{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.initials{width:56px;height:56px;border-radius:8px;background:rgba(102,192,106,0.06);display:grid;place-items:center;color:var(--accent);font-weight:700}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
@media(max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.services-grid{grid-template-columns:1fr}}
.svc{border:1px solid var(--line);padding:18px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);transition:transform .16s ease}
.svc:hover{transform:translateY(-6px)}
.svc-icon{width:44px;height:44px;border-radius:8px;background:rgba(102,192,106,0.06);display:grid;place-items:center;color:var(--accent);margin-bottom:10px}
.svc h3{margin:0 0 6px;font-size:15px}

/* WHY */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px;color:var(--muted)}
@media(max-width:980px){.why-grid{grid-template-columns:1fr}}

/* PROCESS */
.process-row{display:flex;gap:14px;margin-top:16px}
@media(max-width:900px){.process-row{flex-direction:column}}
.step{border:1px solid var(--line);padding:14px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.step .num{background:var(--accent);color:#05120a;padding:6px 10px;border-radius:6px;font-weight:700;display:inline-block}

/* CTA SECTION */
.section--cta{background:transparent;padding:40px 0;border-top:1px solid rgba(255,255,255,0.02)}
.cta-grid{display:flex;justify-content:space-between;align-items:center;gap:16px}
@media(max-width:780px){.cta-grid{flex-direction:column;align-items:flex-start}}

/* FOOTER */
.site-footer{border-top:1px solid rgba(255,255,255,0.02);padding:18px 0;margin-top:28px}

/* small utilities */
.icon{width:18px;height:18px;vertical-align:middle;display:inline-block}
.toast{position:fixed;right:20px;bottom:20px;background:#07120a;color:var(--accent);padding:12px 16px;border-radius:8px;border:1px solid rgba(102,192,106,0.12);display:none;z-index:200}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}