:root{ --bg:#0b1020; --fg:#e5e7eb; --muted:#9aa3b2; --card:#11162a; --accent:#60a5fa; --accent-2:#34d399; --border:#1e253d;}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif; background:var(--bg); color:var(--fg); line-height:1.6}
a{color:var(--fg); text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.site-header{position:sticky; top:0; z-index:100; display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(11,16,32,.95), rgba(11,16,32,.7)); backdrop-filter:blur(8px)}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:800; letter-spacing:.2px; padding:.2rem .6rem; border-radius:.5rem}
.brand span{color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.nav-toggle{display:none}
.nav ul, .nav #nav-list{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.mode-toggle{border:1px solid var(--border); background:transparent; padding:.35rem .6rem; border-radius:.5rem; cursor:pointer; color:var(--fg)}
.hero{padding:4.8rem 1rem 3rem; background: radial-gradient(1200px 520px at 20% -10%, #162a56 0%, transparent 60%), radial-gradient(900px 360px at 90% 0%, #0f3c2e 0%, transparent 60%)}
.hero-wrap{max-width:1200px; margin:0 auto; display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center}
.hero h1{font-size: clamp(2.2rem, 6vw, 4rem); line-height:1.1; margin:.5rem 0 1rem}
.lead{font-size: clamp(1rem, 2vw, 1.25rem); color:var(--muted)}
.proof{margin-top:.6rem; font-weight:600; color:#cbd5e1}
.accent{color:var(--accent)}
.cta{margin:1.2rem 0 1.2rem; display:flex; gap:.8rem; flex-wrap:wrap}
.btn{display:inline-block; padding:.9rem 1.1rem; border-radius:.7rem; border:1px solid var(--border); font-weight:700; cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1020}
.btn.ghost{background:transparent}
.btn.cal{background:transparent; border:1px dashed var(--border)}
.open-to{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.3rem}
.open-to li{list-style:none; border:1px dashed var(--border); padding:.35rem .6rem; border-radius:.5rem; color:var(--muted); background:rgba(255,255,255,.02)}
.trust{display:flex; gap:.5rem; flex-wrap:wrap; list-style:none; padding:0; margin:1rem 0 0}
.trust li{border:1px solid var(--border); padding:.35rem .6rem; border-radius:.5rem; color:var(--muted); background:rgba(255,255,255,.02)}
.portrait{justify-self:center; align-self:center; max-width:360px; border-radius:1rem; border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.section{max-width:1100px; margin:0 auto; padding:3rem 1rem}
.section.alt{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{background:var(--card); border:1px solid var(--border); padding:1rem; border-radius:.8rem}
.card h3{margin-top:0}
.highlights{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.highlight{background:var(--card); border:1px solid var(--border); padding:1rem; border-radius:.8rem}
.process{display:grid; gap:.8rem; padding-left:1rem}
.process li{background:var(--card); border:1px solid var(--border); padding:1rem; border-radius:.8rem; list-style:none}
.process li strong{display:block}
.timeline{display:grid; gap:1rem}
.timeline article{border-left:3px solid var(--accent); background:var(--card); border:1px solid var(--border); padding:1rem; border-radius:.6rem}
.tags{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0}
.tags li{border:1px solid var(--border); background:transparent; padding:.3rem .5rem; border-radius:.5rem; color: var(--muted)}
.contact{display:grid; gap:.8rem; max-width:720px}
.contact input, .contact textarea{ width:100%; padding:.8rem; background:#0c1226; border:1px solid var(--border); color:var(--fg); border-radius:.5rem }
.contact button{justify-self:start}
.form-note{font-size:.9rem; color:var(--muted)}
.form-success, .form-error{margin-top:.6rem; font-weight:600}
.form-success{color:#34d399}
.form-error{color:#f87171}
.section h2{font-size: clamp(1.4rem, 2.8vw, 2rem)}
.site-footer{max-width:1100px; margin:0 auto; padding:2rem 1rem; color:var(--muted)}

/* Calendly Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:1000}
.modal.open{display:flex}
.modal-dialog{width:min(1080px, 96vw); height:min(720px, 92vh); background:var(--card); border:1px solid var(--border); border-radius:1rem; overflow:hidden; position:relative}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:.6rem 1rem; border-bottom:1px solid var(--border); background:rgba(255,255,255,.03)}
.modal-title{font-weight:700}
.modal-close{border:1px solid var(--border); background:transparent; padding:.35rem .6rem; border-radius:.5rem; cursor:pointer; color:var(--fg)}
.calendly-inline-widget{min-width:320px; width:100%; height:calc(100% - 46px)} /* 46px header height */

@media (max-width: 960px){
  .cards{grid-template-columns:1fr 1fr}
  .highlights{grid-template-columns:1fr}
  .hero-wrap{grid-template-columns:1fr; gap:1.5rem}
  .portrait{max-width:280px}
}
@media (max-width: 640px){
  .nav-toggle{display:inline-block; border:1px solid var(--border); background:transparent; padding:.35rem .6rem; border-radius:.5rem; color:var(--fg)}
  .nav #nav-list{display:none; position:absolute; right:1rem; top:3.2rem; background:var(--card); border:1px solid var(--border); border-radius:.6rem; padding:.6rem}
  .cards{grid-template-columns:1fr}
}
html.light{ --bg:#ffffff; --fg:#0b1020; --muted:#4b5563; --card:#f1f5f9; --accent:#2563eb; --accent-2:#059669; --border:#e5e7eb }
html.light .site-header{background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.75))}
html.light .contact input, html.light .contact textarea{background:#fff; color:#0b1020; border-color:#e5e7eb}