/* Maksims Burcenko — web CV
   Design system: _design/design-system/maksims-cv/MASTER.md
   Document grey + scan blue. Light document look, HR audience. */

:root{
  /* palette — MASTER.md */
  --color-primary:#1E293B;
  --color-on-primary:#FFFFFF;
  --color-secondary:#334155;
  --color-accent:#2563EB;
  --color-background:#F8FAFC;
  --color-foreground:#0F172A;
  --color-muted:#F1F2F3;
  --color-border:#E4E5E7;
  --color-destructive:#DC2626;
  --color-ring:#1E293B;

  /* roles used across the page */
  --ink:var(--color-foreground);
  --ink-2:#475569;
  --ink-3:#64748B;
  --bg:var(--color-background);
  --bg-2:#FFFFFF;
  --line:var(--color-border);
  --accent:var(--color-accent);
  --accent-soft:#EFF6FF;
  --ok:#15803D;
  --warn:#B45309;
  --deny:var(--color-destructive);

  /* spacing — MASTER.md */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;

  /* shadow — MASTER.md */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px rgba(0,0,0,.15);

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);
  --maxw:1080px;
  --radius:8px;
  --radius-lg:12px;

  /* type scale */
  --fs-xs:12.5px;
  --fs-sm:14px;
  --fs-md:15.5px;
  --fs-base:17px;
  --fs-lg:21px;
  --lh-body:1.6;
  --row-min:92px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-lg)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--bg-2);color:var(--ink);padding:10px var(--space-md);z-index:9;border-radius:var(--radius)}
.skip:focus{left:var(--space-sm);top:var(--space-sm)}

/* ---------- hero ---------- */
.hero{
  background:var(--bg-2);
  color:var(--ink);
  padding:clamp(48px,8vw,88px) 0 clamp(36px,6vw,64px);
  border-bottom:1px solid var(--line);
}
.eyebrow{
  font-family:var(--mono);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:var(--space-md);
}
.hero h1{
  font-size:clamp(40px,8vw,76px);
  letter-spacing:-.035em;
  font-weight:600;
  color:var(--color-primary);
}
.role{
  margin-top:var(--space-md);
  font-size:clamp(19px,3.2vw,26px);
  color:var(--color-secondary);
  font-weight:500;
  letter-spacing:-.01em;
}
.role::before{
  content:"";
  display:block;
  width:44px;
  height:3px;
  background:var(--accent);
  margin-bottom:var(--space-md);
}
.hero-lede{
  margin-top:var(--space-lg);
  max-width:62ch;
  color:var(--ink-2);
  font-size:var(--fs-base);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl)}
.btn{
  display:inline-block;
  padding:12px var(--space-lg);
  border:1px solid var(--color-primary);
  border-radius:var(--radius);
  text-decoration:none;
  font-size:var(--fs-md);
  font-weight:500;
  color:var(--color-primary);
  background:transparent;
  cursor:pointer;
  transition:background 200ms ease,color 200ms ease,border-color 200ms ease,box-shadow 200ms ease;
}
.btn:hover{background:var(--color-muted);box-shadow:var(--shadow-sm)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--color-on-primary);font-weight:600}
.btn-primary:hover{background:#1D4ED8;border-color:#1D4ED8;color:var(--color-on-primary);box-shadow:var(--shadow-md)}

/* ---------- language switch (hero only) ---------- */
.lang-switch{
  font-family:var(--mono);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:calc(-1 * var(--space-sm)) 0 var(--space-lg);
  display:flex;
  gap:var(--space-lg);
  flex-wrap:wrap;
}
.lang-switch a{
  color:var(--ink-3);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color 200ms ease,border-color 200ms ease;
}
.lang-switch a:hover{color:var(--accent);border-bottom-color:currentColor}
.lang-switch .lang-cur{
  color:var(--color-primary);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}

/* ---------- ask ---------- */
.ask-section{
  background:var(--color-primary);
  color:var(--color-on-primary);
  padding:clamp(32px,5vw,52px) 0 clamp(36px,6vw,60px);
}
.ask-head{max-width:66ch}
.ask-section h2{color:var(--color-on-primary)}
.ask-section .label{color:#93C5FD}
.ask-note{color:#CBD5E1;font-size:var(--fs-md);margin-top:var(--space-sm)}
.ask-form{display:flex;gap:var(--space-sm);margin-top:var(--space-lg);max-width:760px}
.ask-form input{
  flex:1 1 auto;
  min-width:0;
  padding:12px var(--space-md);
  background:#0F172A;
  border:1px solid #334155;
  border-radius:var(--radius);
  color:var(--color-on-primary);
  font-family:var(--sans);
  font-size:var(--fs-base);
  transition:border-color 200ms ease,box-shadow 200ms ease;
}
.ask-form input::placeholder{color:#94A3B8}
.ask-form input:focus{outline:none;border-color:#93C5FD;box-shadow:0 0 0 3px rgba(147,197,253,.35)}
.ask-form button{
  flex:0 0 auto;
  padding:12px var(--space-lg);
  background:var(--accent);
  color:var(--color-on-primary);
  border:0;
  border-radius:var(--radius);
  font-family:var(--sans);
  font-size:var(--fs-md);
  font-weight:600;
  cursor:pointer;
  transition:background 200ms ease,opacity 200ms ease;
}
.ask-form button:hover{background:#1D4ED8}
.ask-form button[disabled]{opacity:.55;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:12px}
.chip-btn{
  padding:8px 14px;
  background:transparent;
  border:1px solid #475569;
  border-radius:999px;
  color:#CBD5E1;
  font-family:var(--sans);
  font-size:var(--fs-sm);
  cursor:pointer;
  transition:border-color 200ms ease,color 200ms ease,background 200ms ease;
}
.chip-btn:hover{border-color:#93C5FD;color:var(--color-on-primary);background:rgba(255,255,255,.06)}
.ask-answer{
  margin-top:var(--space-lg);
  max-width:760px;
  background:#0F172A;
  border:1px solid #334155;
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:20px var(--space-lg);
}
.ask-q{font-family:var(--mono);font-size:var(--fs-xs);color:#93C5FD;margin-bottom:12px;letter-spacing:.08em}
.ask-a{font-size:var(--fs-base);line-height:var(--lh-body);color:#E2E8F0;white-space:pre-wrap}
.ask-a.thinking{color:#94A3B8}
.ask-a .dot{animation:blink 1.3s infinite}
.ask-a .dot:nth-child(2){animation-delay:.2s}
.ask-a .dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.ask-foot{margin-top:var(--space-md);font-size:var(--fs-sm);color:#94A3B8}
.ask-foot a{color:#93C5FD}

/* ---------- blocks ---------- */
.block{padding:clamp(40px,6vw,72px) var(--space-lg);border-bottom:1px solid var(--line)}
.label{
  font-family:var(--mono);
  font-size:var(--fs-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
}
.block h2{font-size:clamp(24px,4.2vw,34px);margin-top:12px;color:var(--color-primary)}
.note{margin-top:12px;max-width:70ch;color:var(--ink-2);font-size:var(--fs-base)}
.fine{margin-top:var(--space-lg);max-width:70ch;color:var(--ink-3);font-size:var(--fs-sm)}
.lede{margin-top:var(--space-md);max-width:74ch;font-size:clamp(18px,2.6vw,21px);line-height:1.55;color:var(--color-secondary)}
.pull{
  margin-top:var(--space-lg);
  max-width:64ch;
  padding-left:var(--space-lg);
  border-left:3px solid var(--accent);
  font-size:clamp(17px,2.4vw,21px);
  color:var(--ink);
}

/* facts */
.facts{
  background:var(--bg-2);
  margin-top:var(--space-lg);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.fact{
  display:grid;
  grid-template-columns:176px 1fr;
  align-items:stretch;
  min-height:var(--row-min);
  border-top:1px solid var(--line);
}
.fact:first-child{border-top:0}
.fact .n{
  display:flex;
  white-space:nowrap;
  align-items:center;
  justify-content:flex-end;
  padding:20px var(--space-lg);
  border-right:1px solid var(--line);
  font-size:34px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
.fact .l{
  display:flex;
  align-items:center;
  padding:20px var(--space-lg);
  max-width:68ch;
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  color:var(--ink-2);
  text-wrap:pretty;
}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-top:var(--space-lg)}
.card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  box-shadow:var(--shadow-sm);
  transition:box-shadow 200ms ease,border-color 200ms ease;
}
.card:hover{box-shadow:var(--shadow-md);border-color:#CBD5E1}
.card h3{font-size:var(--fs-base);letter-spacing:-.005em;color:var(--color-primary)}
.card p{margin-top:var(--space-sm);font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink-2)}

/* governance */
.gov{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-top:var(--space-lg)}
.gov-col{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  border-top:4px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.gov-col p:last-child{margin-top:var(--space-sm);font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink-2)}
.gov-h{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}
.gov-allow{border-top-color:var(--ok)}
.gov-allow .gov-h{color:var(--ok)}
.gov-approve{border-top-color:var(--warn)}
.gov-approve .gov-h{color:var(--warn)}
.gov-deny{border-top-color:var(--deny)}
.gov-deny .gov-h{color:var(--deny)}

/* ai timeline */
.ai-line{
  margin-top:var(--space-lg);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.ai-line li{
  display:grid;
  grid-template-columns:112px 1fr;
  align-items:stretch;
  min-height:var(--row-min);
  border-top:1px solid var(--line);
}
.ai-line li:first-child{border-top:0}
.ai-line .y{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:20px var(--space-lg);
  border-right:1px solid var(--line);
  font-family:var(--mono);
  font-size:var(--fs-md);
  font-weight:500;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.ai-line span:last-child{
  display:flex;
  align-items:center;
  padding:20px var(--space-lg);
  max-width:68ch;
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  color:var(--ink-2);
  text-wrap:pretty;
}

/* jobs */
.job{padding:var(--space-lg) 0;border-top:1px solid var(--line)}
.job:first-of-type{border-top:0}
.job-head{display:grid;gap:var(--space-xs);margin-bottom:12px}
.job-head h3{font-size:19px;color:var(--color-primary)}
.org{font-size:var(--fs-md);color:var(--ink-2)}
.when{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.08em}
.job ul{display:grid;gap:var(--space-sm)}
.job li{position:relative;padding-left:var(--space-md);font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink-2)}
.job li::before{content:"";position:absolute;left:0;top:calc(.8em - 3px);width:6px;height:6px;border-radius:50%;background:var(--accent)}
.job strong{color:var(--ink);font-weight:600}
.gap-note{margin-top:var(--space-lg);padding:var(--space-md) var(--space-lg);background:var(--accent-soft);border:1px solid #BFDBFE;border-radius:var(--radius);font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink-2)}

/* evidence */
.ev{
  margin-top:var(--space-lg);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.ev-row{
  display:grid;
  grid-template-columns:264px 1fr;
  align-items:stretch;
  min-height:var(--row-min);
  border-top:1px solid var(--line);
}
.ev-row:first-child{border-top:0}
.ev-k{
  display:flex;
  align-items:center;
  padding:20px var(--space-lg);
  border-right:1px solid var(--line);
  font-weight:600;
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  color:var(--color-primary);
  text-wrap:pretty;
}
.ev-v{
  display:flex;
  align-items:center;
  padding:20px var(--space-lg);
  max-width:68ch;
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  color:var(--ink-2);
  text-wrap:pretty;
}

/* education */
.edu{margin-top:var(--space-lg);display:grid;gap:12px;max-width:82ch}
.edu li{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink-2);padding-left:var(--space-md);position:relative}
.edu li::before{content:"";position:absolute;left:0;top:calc(.8em - 3px);width:6px;height:6px;border-radius:50%;background:var(--accent)}
.edu strong{color:var(--ink);font-weight:600}

/* footer */
footer{background:var(--color-primary);color:#CBD5E1;padding:var(--space-2xl) 0}
.f-name{color:var(--color-on-primary);font-weight:600}
.f-links{display:flex;flex-wrap:wrap;gap:var(--space-lg);margin-top:12px;font-size:var(--fs-md)}
.f-links a{color:#93C5FD;text-decoration:none;border-bottom:1px solid transparent;transition:border-color 200ms ease}
.f-links a:hover{border-bottom-color:#93C5FD}
.f-note{margin-top:var(--space-lg);font-size:var(--fs-sm);line-height:var(--lh-body);max-width:62ch;color:#94A3B8}

/* ---------- responsive: 375 / 768 / 1024 / 1440 ---------- */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .gov{grid-template-columns:1fr}
}
@media (max-width:768px){
  .ev-row{grid-template-columns:1fr}
  .ev-k{border-right:0;padding:16px 20px 0}
  .ev-v{padding:4px 20px 16px}
  .ai-line li{grid-template-columns:96px 1fr}
  .ai-line .y,.ai-line span:last-child{padding-left:20px;padding-right:20px}
  .ask-form{flex-direction:column}
  .ask-form button{width:100%}
}
@media (max-width:620px){
  .cards,.gov{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr;min-height:0}
  .fact .n{
    justify-content:flex-start;
    border-right:0;
    padding:16px 20px 0;
    font-size:32px;
  }
  .fact .l{padding:6px 20px 18px}
}
@media (max-width:400px){
  body{font-size:16px}
  .wrap{padding:0 var(--space-md)}
  .block{padding-left:var(--space-md);padding-right:var(--space-md)}
  .hero-actions .btn{width:100%;text-align:center}
}

/* ---------- dark mode ---------- */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#E2E8F0;
    --ink-2:#A9B4C0;
    --ink-3:#8A96A3;
    --bg:#0B1220;
    --bg-2:#111A2B;
    --line:#243044;
    --accent:#60A5FA;
    --accent-soft:#14243D;
    --color-primary:#E2E8F0;
    --color-secondary:#CBD5E1;
    --color-muted:#1B2537;
    --color-ring:#60A5FA;
    --ok:#4ADE80;
    --warn:#FBBF24;
    --deny:#F87171;
  }
  .hero{background:var(--bg-2)}
  .btn{border-color:#475569;color:var(--ink)}
  .btn:hover{background:#1B2537}
  .btn-primary{background:var(--accent);border-color:var(--accent);color:#0B1220}
  .btn-primary:hover{background:#93C5FD;border-color:#93C5FD;color:#0B1220}
  .ask-section{background:#0F172A}
  .ask-form input,.ask-answer{background:#0B1220}
  .gap-note{background:var(--accent-soft);border-color:#1E3A5F}
  .card:hover{border-color:#334155}
  footer{background:#0F172A}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}