/* mxkeey.com — design system (variant A «Evolution», light + dark) */

@font-face{font-family:'Inter Tight';src:url('fonts/InterTight-Light.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('fonts/InterTight-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#eeeeee;
  --surface:#ffffff;
  --ink:#0f0f0f;
  --body:#3d3d3d;
  --muted:#6b6b6b;
  --accent:#004a99;
  --accent-contrast:#ffffff;
  --line:#dcdad6;
  --pill-live-bg:#e3efe6; --pill-live-fg:#1d6b34;
  --pill-dev-bg:#e8eefb;  --pill-dev-fg:#004a99;
  --pill-nda-bg:#f0eae0;  --pill-nda-fg:#7a5b1e;
  --topbar-bg:rgba(238,238,238,.88);
  --avatar-ring:#ffffff;
  --radius:10px;
  --w:1000px;
}
:root[data-theme="dark"]{
  --bg:#0c1626;
  --surface:#101d31;
  --ink:#eef1f6;
  --body:#b9c4d4;
  --muted:#8fa0b8;
  --accent:#7aa7ff;
  --accent-contrast:#0c1626;
  --line:#223350;
  --pill-live-bg:#12301c; --pill-live-fg:#7fd39a;
  --pill-dev-bg:#152643;  --pill-dev-fg:#9dbeff;
  --pill-nda-bg:#2e2717;  --pill-nda-fg:#d9b96a;
  --topbar-bg:rgba(12,22,38,.88);
  --avatar-ring:#101d31;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0c1626;
    --surface:#101d31;
    --ink:#eef1f6;
    --body:#b9c4d4;
    --muted:#8fa0b8;
    --accent:#7aa7ff;
    --accent-contrast:#0c1626;
    --line:#223350;
    --pill-live-bg:#12301c; --pill-live-fg:#7fd39a;
    --pill-dev-bg:#152643;  --pill-dev-fg:#9dbeff;
    --pill-nda-bg:#2e2717;  --pill-nda-fg:#d9b96a;
    --topbar-bg:rgba(12,22,38,.88);
    --avatar-ring:#101d31;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:'Inter Tight',system-ui,sans-serif;
  background:var(--bg);
  color:var(--body);
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease,color .25s ease;
}
a{color:var(--accent);text-decoration:none;font-weight:700}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-contrast)}
strong{font-weight:700;color:var(--ink)}
.container{max-width:var(--w);margin:0 auto;padding:0 1.5rem}

/* ── Top bar ── */
.topbar{position:sticky;top:0;background:var(--topbar-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}
.logo{font-weight:700;color:var(--ink);letter-spacing:-0.02em;font-size:1.05rem;white-space:nowrap}
.logo:hover{text-decoration:none;color:var(--accent)}
.nav{display:flex;gap:1.75rem;font-size:0.95rem}
.nav a{color:var(--body);font-weight:400}
.nav a:hover{color:var(--accent);text-decoration:none}
.topbar-tools{display:flex;align-items:center;gap:0.7rem}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:99px;padding:2px;font-size:0.8rem}
.lang a{padding:0.2rem 0.7rem;border-radius:99px;font-weight:700}
.lang a:hover{text-decoration:none}
.lang .on{background:var(--ink);color:var(--bg)}
.lang .off{color:var(--muted)}
.theme-btn{background:none;border:1px solid var(--line);border-radius:99px;width:34px;height:34px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0}
.theme-btn:hover{color:var(--ink);border-color:var(--muted)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-sun{display:none}
:root[data-theme="dark"] .icon-sun{display:block}
:root[data-theme="dark"] .icon-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .icon-sun{display:block}
  :root:not([data-theme]) .icon-moon{display:none}
}

/* ── Hero ── */
.hero{padding:7.5rem 0 5.5rem}
.hero-grid{display:flex;gap:3.5rem;align-items:center;justify-content:space-between}
.kicker{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted);margin-bottom:1.4rem}
.kicker b{color:var(--accent)}
h1{font-size:clamp(2.9rem,6vw,4.3rem);font-weight:700;letter-spacing:-0.035em;line-height:1.02;color:var(--ink);margin-bottom:1.5rem}
.lead{font-size:1.3rem;line-height:1.5;max-width:34em;margin-bottom:2.2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.btn{display:inline-block;background:var(--accent);color:var(--accent-contrast);font-weight:700;padding:0.8rem 1.6rem;border-radius:8px;font-size:1rem;border:none;cursor:pointer}
.btn:hover{filter:brightness(1.12);text-decoration:none}
.cta-links{display:flex;gap:1.4rem;font-size:1rem}
.avatar{width:190px;height:190px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 8px var(--avatar-ring)}

/* ── Metrics ── */
.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.6rem 0;margin-bottom:1rem}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.metric b{display:block;font-size:2.1rem;font-weight:700;color:var(--ink);letter-spacing:-0.03em;font-feature-settings:"tnum"}
.metric span{font-size:0.92rem;color:var(--muted)}

/* ── Sections ── */
section{padding:5.5rem 0 0}
.sec-label{display:flex;align-items:baseline;gap:0.8rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.13em;font-weight:700;color:var(--ink);margin-bottom:2.6rem}
.sec-label i{font-style:normal;color:var(--accent)}
.sec-label:after{content:"";flex:1;height:1px;background:var(--line);transform:translateY(-4px)}

/* ── What I do ── */
.do-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.do-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
.do-card h3{font-size:1.2rem;font-weight:700;color:var(--ink);letter-spacing:-0.015em;margin-bottom:0.9rem}
.do-card p{font-size:0.98rem}

/* ── Projects ── */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.proj{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 2rem;display:flex;flex-direction:column;gap:0.55rem}
.proj-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.proj h3{font-size:1.25rem;font-weight:700;color:var(--ink);letter-spacing:-0.015em}
.proj h3 a{color:inherit}
.pill{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;font-weight:700;padding:0.22rem 0.6rem;border-radius:99px;white-space:nowrap}
.pill.live{background:var(--pill-live-bg);color:var(--pill-live-fg)}
.pill.dev{background:var(--pill-dev-bg);color:var(--pill-dev-fg)}
.pill.nda{background:var(--pill-nda-bg);color:var(--pill-nda-fg)}
.proj p{font-size:0.98rem}
.proj .stack{font-size:0.85rem;color:var(--muted);margin-top:auto;padding-top:0.5rem}
.lab{margin-top:2rem;border:1px dashed var(--line);border-radius:var(--radius);padding:1.4rem 2rem;font-size:0.95rem;color:var(--muted)}
.lab b{color:var(--ink)}

/* ── Experience ── */
.xp{border-top:1px solid var(--line)}
.xp-row{display:grid;grid-template-columns:200px 1fr 170px;gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.xp-row .co{font-weight:700;color:var(--ink);font-size:1.1rem;letter-spacing:-0.01em}
.xp-row .role{font-size:0.98rem}
.xp-row .role em{font-style:normal;font-weight:700;color:var(--ink);display:block;margin-bottom:0.2rem}
.xp-row .dates{font-size:0.9rem;color:var(--muted);text-align:right;font-feature-settings:"tnum";white-space:nowrap}

/* ── Testimonials ── */
.t-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.t{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:1.7rem 1.9rem}
.t .q{font-size:0.98rem;line-height:1.6;margin-bottom:1.1rem}
.t .a{font-size:0.92rem;font-weight:700;color:var(--ink)}
.t .a span{display:block;font-weight:400;color:var(--muted);font-size:0.85rem}

/* ── Contact ── */
.contact{text-align:center;padding-bottom:2rem}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4.5rem 2rem}
.contact h2{font-size:clamp(1.9rem,3.5vw,2.6rem);font-weight:700;color:var(--ink);letter-spacing:-0.03em;margin-bottom:0.9rem}
.contact p{max-width:36em;margin:0 auto 2rem}
footer{padding:3rem 0 3.5rem;text-align:center;color:var(--muted);font-size:0.9rem}

/* ── 404 ── */
.err{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;padding:3rem 1.5rem}
.err b{font-size:5rem;font-weight:700;color:var(--ink);letter-spacing:-0.04em;line-height:1}

@media (max-width:820px){
  .hero{padding:4.5rem 0 3.5rem}
  .hero-grid{flex-direction:column-reverse;align-items:flex-start;gap:2rem}
  .avatar{width:130px;height:130px}
  .metrics-grid{grid-template-columns:1fr 1fr;gap:1.6rem}
  .do-grid,.proj-grid,.t-grid{grid-template-columns:1fr}
  .xp-row{grid-template-columns:1fr;gap:0.3rem}
  .xp-row .dates{text-align:left}
  .nav{display:none}
}

@media print{
  .topbar,.btn,.contact,footer{display:none}
  body{background:#fff;color:#222}
  section{padding:1.5rem 0 0}
  .hero{padding:1rem 0}
}