/* ========== Base ========== */
:root{
  --bg:#ffffff; --bg-soft:#f7f9fc; --card:#ffffff; --text:#0b1220; --muted:#5b6573;
  --line:#e6edf3; --brand:#0ea5e9; --brand-2:#2563eb; --shadow: 0 10px 30px rgba(2,6,23,.06);
}
:root.dark{
  --bg:#0b1220; --bg-soft:#0a142a; --card:#0f1b33; --text:#e6eef8; --muted:#9aa4b2;
  --line:#1f2b40; --brand:#3b82f6; --brand-2:#60a5fa; --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit}

/* Accessibility */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--brand);color:#fff;padding:.5rem 1rem;border-radius:8px}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--light{background:var(--bg-soft)}
.section-title{font-size:1.875rem;margin:0 0 1.25rem}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.7);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line); z-index:50}
:root.dark .site-header{background:rgba(11,18,32,.6)}
.header-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700}
.brand__mark{width:28px;height:28px}
.brand__text{font-size:1.1rem}
.brand__dot{color:var(--brand)}

.nav__toggle{display:none}
.nav__list{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.nav__list a{text-decoration:none;color:var(--muted)}
.nav__list a:hover{color:var(--text)}
.header-ctas{display:flex;gap:8px}

/* Buttons */
.btn{appearance:none;border:1px solid var(--line);background:transparent;padding:.6rem 1rem;border-radius:12px;
  box-shadow:none;cursor:pointer;transition:transform .08s ease, background .2s ease, border-color .2s ease}
.btn--primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));border:none;color:#fff}
.btn--primary:hover{transform:translateY(-2px)}
.btn--ghost:hover{background:var(--bg-soft)}

/* Hero */
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.eyebrow{color:var(--brand);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;margin:0 0 10px}
.hero__title{font-size:2.25rem;line-height:1.2;margin:.2rem 0 1rem}
.lead{color:var(--muted);font-size:1.075rem;max-width:56ch}
.hero__cta{display:flex;gap:10px;margin-top:18px}
.trust{display:flex;gap:18px;list-style:none;padding:0;margin:22px 0 0;color:var(--muted);align-items:center;flex-wrap:wrap}
.trust img{width:20px;height:20px}
.hero__visual img{border-radius:16px;box-shadow:var(--shadow)}
.underline{background:linear-gradient(120deg, rgba(14,165,233,.15), rgba(37,99,235,.15));padding:0 .25rem;border-radius:6px}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.card--elevated{box-shadow:0 18px 40px rgba(2,6,23,.08)}
.card--border{background:transparent}

/* Grids */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.pill-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pill-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pills span{padding:.35rem .6rem;border-radius:999px;border:1px solid var(--line);font-size:.9rem;color:var(--muted)}

/* Lists, KVs */
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list--icon li{display:flex;gap:8px;align-items:center}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 14px;margin:0}

/* Projects */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.project-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.project-card img{width:100%;height:180px;object-fit:cover}
.project-card__body{padding:16px;display:flex;flex-direction:column;gap:10px}
.tags{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.tags li{border:1px solid var(--line);border-radius:999px;padding:.25rem .55rem;font-size:.85rem;color:var(--muted)}
.actions{display:flex;gap:8px;margin-top:6px}

/* Timeline */
.timeline{position:relative;margin:0;padding:0;list-style:none}
.timeline::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--line)}
.timeline__item{position:relative;padding-left:32px;margin:18px 0}
.timeline__dot{position:absolute;left:4px;top:.45rem;width:12px;height:12px;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:50%}
.timeline__time{color:var(--muted);font-size:.9rem}

/* Forms */
.form__row{display:grid;gap:6px;margin-bottom:12px}
.form input,.form textarea{padding:.7rem .9rem;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text)}
.form input:focus,.form textarea:focus{outline:2px solid var(--brand);border-color:transparent}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:28px 0;background:transparent}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-nav a{text-decoration:none;color:var(--muted);margin-left:12px}
.footer-nav a:hover{color:var(--text)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1;transform:none}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .pill-groups{grid-template-columns:repeat(2,1fr)}
  .projects{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .nav__toggle{display:block;border:1px solid var(--line);background:transparent;border-radius:10px;padding:.45rem .6rem}
  .nav__list{position:absolute;right:24px;top:72px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
    flex-direction:column;gap:0;overflow:hidden;transform-origin:top right;transform:scale(.98);opacity:0;pointer-events:none}
  .nav__list.is-open{opacity:1;pointer-events:auto;transform:scale(1)}
  .nav__list li{border-top:1px solid var(--line)}
  .nav__list a{display:block;padding:.8rem 1rem}
  .pill-groups{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr}
  .footer-grid{flex-direction:column}
}