/* ───────────────────────── Design tokens ───────────────────────── */
  :root{
    --bg:#f4f2ee;                 /* LinkedIn warm canvas */
    --card:#ffffff;
    --ink:rgba(0,0,0,.90);
    --ink-2:rgba(0,0,0,.60);
    --ink-3:rgba(0,0,0,.45);
    --border:rgba(0,0,0,.10);
    --border-soft:rgba(0,0,0,.06);
    --brand:#0a66c2;              /* LinkedIn blue */
    --brand-ink:#ffffff;
    --brand-dark:#004182;
    --brand-soft:rgba(10,102,194,.10);
    --green:#01754f;              /* open-to-work green */
    --green-soft:rgba(1,117,79,.12);
    --chip:#f6f8fa;
    --shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05);
    --shadow-lift:0 6px 22px rgba(0,0,0,.12);
    --radius:12px;
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  [data-theme="dark"]{
    --bg:#000000;
    --card:#1b1f23;
    --ink:rgba(255,255,255,.92);
    --ink-2:rgba(255,255,255,.62);
    --ink-3:rgba(255,255,255,.45);
    --border:rgba(255,255,255,.16);
    --border-soft:rgba(255,255,255,.09);
    --brand:#70b5f9;
    --brand-ink:#0b1520;
    --brand-dark:#a8d4ff;
    --brand-soft:rgba(112,181,249,.14);
    --green:#3ddc97;
    --green-soft:rgba(61,220,151,.14);
    --chip:#22282d;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.4);
    --shadow-lift:0 8px 26px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--font);font-size:15px;line-height:1.55;
    -webkit-font-smoothing:antialiased;
    transition:background .3s ease,color .3s ease;
  }
  a{color:var(--brand);text-decoration:none}
  a:hover{text-decoration:underline}
  :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
  svg{flex:none}

  /* placeholder styling — dotted = "edit me" */
  .ph{border-bottom:2px dotted var(--ink-3);cursor:help}

  /* ───────────────────────── Top navigation ───────────────────────── */
  .topnav{
    position:sticky;top:0;z-index:60;
    background:color-mix(in srgb,var(--card) 88%,transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border-soft);
  }
  .topnav .inner{
    max-width:860px;margin:0 auto;padding:10px 16px;
    display:flex;align-items:center;gap:14px;
  }
  .brand{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap}
  .brand:hover{text-decoration:none}
  .navlinks{display:flex;gap:2px;margin-left:4px;flex:1;overflow-x:auto;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{
    padding:6px 10px;border-radius:999px;font-size:13.5px;font-weight:600;
    color:var(--ink-2);white-space:nowrap;transition:background .15s,color .15s;
  }
  .navlinks a:hover{background:var(--brand-soft);color:var(--brand);text-decoration:none}
  .navlinks a.active{background:var(--brand);color:var(--brand-ink)}
  .nav-actions{display:flex;gap:8px}
  .icon-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:34px;min-width:34px;padding:0 10px;border-radius:999px;
    border:1px solid var(--border);background:transparent;color:var(--ink-2);
    font:inherit;font-size:13px;font-weight:600;cursor:pointer;
    transition:background .15s,color .15s,border-color .15s,transform .1s;
  }
  .icon-btn:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
  .icon-btn:active{transform:scale(.96)}
  .progress{position:absolute;left:0;bottom:-1px;height:2.5px;width:0;
    background:linear-gradient(90deg,var(--brand),var(--green));transition:width .1s linear}

  /* ───────────────────────── Layout ───────────────────────── */
  .wrap{max-width:860px;margin:0 auto;padding:16px 16px 80px}
  .card{
    background:var(--card);border:1px solid var(--border-soft);
    border-radius:var(--radius);box-shadow:var(--shadow);
    margin-bottom:14px;overflow:hidden;
  }
  .card .pad{padding:20px 24px}
  h2{font-size:19px;font-weight:700;margin:0 0 4px}
  .sub{color:var(--ink-2);font-size:13.5px;margin:0 0 16px}
  .sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}

  /* ───────────────────────── Profile card ───────────────────────── */
  .cover{
    height:172px;position:relative;overflow:hidden;
    background:linear-gradient(118deg,#06263f 0%,#0a4f96 45%,#0a66c2 72%,#3f8fd8 100%);
  }
  .cover::before{ /* faint blueprint grid */
    content:"";position:absolute;inset:0;opacity:.14;
    background:
      repeating-linear-gradient(90deg,rgba(255,255,255,.7) 0 1px,transparent 1px 54px),
      repeating-linear-gradient(0deg,rgba(255,255,255,.7) 0 1px,transparent 1px 54px);
  }
  .cover::after{ /* drifting light blob */
    content:"";position:absolute;top:-70%;left:-20%;width:70%;height:240%;
    background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent 70%);
    filter:blur(6px);animation:drift 12s ease-in-out infinite alternate;
  }
  @keyframes drift{from{transform:translateX(0) rotate(8deg)}to{transform:translateX(130%) rotate(8deg)}}
  .cover .cover-tag{
    position:absolute;right:16px;bottom:12px;color:rgba(255,255,255,.85);
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  }

  .profile{padding:0 24px 22px;position:relative}
  .avatar-wrap{width:152px;height:152px;margin-top:-78px;position:relative}
  .ring{
    position:absolute;inset:-7px;border-radius:50%;
    background:conic-gradient(var(--green) 0 22%,transparent 22% 28%,
                              var(--green) 28% 47%,transparent 47% 53%,
                              var(--green) 53% 72%,transparent 72% 78%,
                              var(--green) 78% 97%,transparent 97%);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
            mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
    animation:spin 16s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .avatar{
    position:absolute;inset:0;border-radius:50%;
    background:linear-gradient(135deg,#0a66c2,#06263f);
    border:4px solid var(--card);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:44px;font-weight:800;letter-spacing:1px;
    box-shadow:var(--shadow);
  }
  .avatar img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
  .id-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-top:14px}
  h1{font-size:26px;font-weight:800;margin:0;line-height:1.2}
  .open-badge{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--green-soft);color:var(--green);
    border:1px solid var(--green);
    font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:999px;
    margin-bottom:3px;
  }
  .open-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);
    animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}

  .headline{font-size:16.5px;color:var(--ink);margin:8px 0 2px;min-height:26px;font-weight:500}
  .caret{display:inline-block;width:2px;height:1.05em;background:var(--brand);
    vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .loc{color:var(--ink-2);font-size:14px;display:flex;align-items:center;gap:6px;margin-top:4px}

  .contact-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
  .chip-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 16px;border-radius:999px;font-size:14px;font-weight:600;
    border:1px solid var(--brand);color:var(--brand);background:transparent;
    cursor:pointer;transition:background .15s,color .15s,transform .12s,box-shadow .15s;
  }
  .chip-btn:hover{background:var(--brand-soft);text-decoration:none;transform:translateY(-1px)}
  .chip-btn.primary{background:var(--brand);color:var(--brand-ink)}
  .chip-btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:var(--brand-ink)}

  .stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
    margin-top:22px;padding-top:18px;border-top:1px solid var(--border-soft);
  }
  .stat{text-align:center}
  .stat .n{font-size:26px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
  .stat .l{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.3}

  /* ───────────────────────── About / see-more clamp ───────────────────────── */
  .clamp{position:relative;max-height:7.6em;overflow:hidden;transition:max-height .45s ease}
  .clamp::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:3.2em;
    background:linear-gradient(transparent,var(--card));
    transition:opacity .3s;
  }
  .clamp.open{max-height:60em}
  .clamp.open::after{opacity:0}
  .see-more{
    background:none;border:none;color:var(--ink-2);font:inherit;font-weight:700;
    font-size:13.5px;cursor:pointer;padding:6px 0 0;
  }
  .see-more:hover{color:var(--brand);text-decoration:underline}
  .about p{margin:0 0 12px}
  .about strong{font-weight:700}

  /* ───────────────────────── Skills ───────────────────────── */
  .search-box{
    display:flex;align-items:center;gap:8px;
    border:1px solid var(--border);border-radius:999px;
    padding:7px 14px;background:var(--chip);min-width:210px;
  }
  .search-box input{border:none;outline:none;background:none;color:var(--ink);
    font:inherit;font-size:13.5px;width:100%}
  .search-box svg{color:var(--ink-3)}

  .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px}
  .tab{
    padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;
    border:1px solid var(--border);background:transparent;color:var(--ink-2);
    cursor:pointer;transition:all .15s;
  }
  .tab:hover{border-color:var(--brand);color:var(--brand)}
  .tab.active{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}

  .skill-group h4{font-size:13px;font-weight:700;color:var(--ink-2);
    text-transform:uppercase;letter-spacing:.08em;margin:16px 0 8px}
  .skills:not(.searching) .skill-group{display:none}
  .skills:not(.searching) .skill-group.on{display:block}
  .skills:not(.searching) .skill-group.on h4{display:none}
  .skills.searching .skill-group.empty{display:none}

  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .skill{
    background:var(--chip);border:1px solid var(--border-soft);color:var(--ink);
    font-size:13px;font-weight:500;padding:5px 12px;border-radius:999px;
    transition:transform .12s,border-color .15s,background .15s;
    animation:pop .3s ease backwards;
  }
  .skill:hover{transform:translateY(-2px);border-color:var(--brand);background:var(--brand-soft)}
  .skill.hide{display:none}
  .skill mark{background:var(--brand-soft);color:var(--brand);border-radius:3px;padding:0 1px}
  @keyframes pop{from{opacity:0;transform:scale(.85)}}
  .search-count{font-size:12.5px;color:var(--ink-3);margin-top:12px;min-height:1em}

  /* ───────────────────────── Experience ───────────────────────── */
  .xp-list{position:relative;margin-top:6px}
  .xp-list::before{ /* timeline spine */
    content:"";position:absolute;left:23px;top:14px;bottom:14px;width:2px;
    background:linear-gradient(var(--border),var(--border) 85%,transparent);
  }
  .xp{
    position:relative;display:grid;grid-template-columns:48px 1fr;gap:16px;
    padding:18px 0;border-bottom:1px solid var(--border-soft);
  }
  .xp:last-child{border-bottom:none}
  .logo{
    width:48px;height:48px;border-radius:10px;position:relative;z-index:1;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px;
    box-shadow:var(--shadow);
  }
  .xp h3{font-size:16.5px;font-weight:700;margin:0}
  .role{font-size:14.5px;font-weight:600;color:var(--ink);margin:1px 0 0}
  .meta{font-size:13px;color:var(--ink-2);margin-top:2px}
  .meta .dur{color:var(--ink);font-weight:600}
  .meta a{color:var(--ink-2)}
  .meta a:hover{color:var(--brand)}
  .xp .blurb{margin:10px 0 0;color:var(--ink);font-size:14.5px}

  .proj{margin-top:12px;border:1px solid var(--border-soft);border-radius:10px;overflow:hidden;
    transition:border-color .2s}
  .proj:hover{border-color:var(--border)}
  .proj-head{
    width:100%;display:flex;align-items:center;gap:10px;text-align:left;
    background:var(--chip);border:none;cursor:pointer;color:var(--ink);
    font:inherit;font-size:14px;font-weight:700;padding:11px 14px;
  }
  .proj-head:hover{color:var(--brand)}
  .proj-head .chev{margin-left:auto;transition:transform .3s ease;color:var(--ink-3)}
  .proj.open .proj-head .chev{transform:rotate(180deg)}
  .proj-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
  .proj.open .proj-body{grid-template-rows:1fr}
  .proj-inner{min-height:0;overflow:hidden}
  .proj-inner > div{padding:6px 16px 16px}
  .proj ul{margin:8px 0;padding-left:20px}
  .proj li{margin:5px 0;font-size:14px;color:var(--ink)}
  .proj h5{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--ink-2);margin:14px 0 4px}

  .stack-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
  .stack-row .lbl{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-right:2px}
  .tag{
    font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:6px;
    background:var(--brand-soft);color:var(--brand);border:1px solid transparent;
  }

  /* ───────────────────────── Portfolio ───────────────────────── */
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px}
  .pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pf{
    border:1px solid var(--border-soft);border-radius:10px;padding:16px;
    background:var(--card);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s,opacity .25s;
  }
  .pf:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--brand)}
  .pf.hide{display:none}
  .pf h4{font-size:14.5px;font-weight:700;margin:0 0 3px}
  .pf .dom{font-size:12.5px;color:var(--ink-2);margin-bottom:3px}
  .pf .who{font-size:12px;color:var(--ink-3);margin-bottom:10px}
  .pf .tags{display:flex;flex-wrap:wrap;gap:5px}
  .pf-count{font-size:12.5px;color:var(--ink-3);margin-top:12px}

  /* ───────────────────────── Working style / edu ───────────────────────── */
  .ws{list-style:none;margin:0;padding:0}
  .ws li{display:flex;gap:12px;padding:9px 0;font-size:14.5px}
  .ws svg{color:var(--green);margin-top:3px}
  .edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .mini h3{font-size:15px;margin:0 0 8px}
  .mini p{margin:4px 0;font-size:14px;color:var(--ink)}
  .mini .faint{color:var(--ink-2);font-size:13px}
  .lang-bar{height:6px;border-radius:999px;background:var(--chip);overflow:hidden;margin:5px 0 12px}
  .lang-bar span{display:block;height:100%;width:0;border-radius:999px;
    background:linear-gradient(90deg,var(--brand),var(--green));transition:width 1.1s ease}

  footer{color:var(--ink-3);font-size:12.5px;text-align:center;padding:22px 12px 0}

  .totop{
    position:fixed;right:18px;bottom:18px;z-index:50;
    width:42px;height:42px;border-radius:50%;border:1px solid var(--border);
    background:var(--card);color:var(--brand);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;
    transform:translateY(8px);transition:opacity .25s,transform .25s;
  }
  .totop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
  .totop:hover{background:var(--brand-soft)}

  /* ───────────────────────── Scroll reveal ───────────────────────── */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}

  /* ───────────────────────── Responsive ───────────────────────── */
  @media (max-width:680px){
    .stats{grid-template-columns:repeat(2,1fr);gap:16px 8px}
    .pf-grid,.edu-grid{grid-template-columns:1fr}
    .avatar-wrap{width:120px;height:120px;margin-top:-62px}
    .avatar{font-size:34px}
    .cover{height:132px}
    h1{font-size:22px}
    .sec-head .search-box{width:100%}
    .brand{display:none}
  }

  /* ───────────────────────── Reduced motion ───────────────────────── */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
  }

  /* ───────────────────────── Print ───────────────────────── */
  @media print{
    :root{--bg:#fff;--card:#fff;--shadow:none;--shadow-lift:none}
    body{font-size:12px}
    .topnav,.totop,.tabs,.filters,.search-box,.see-more,.nav-actions,
    .search-count,.pf-count,.cover::after{display:none!important}
    .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid;margin-bottom:10px}
    .clamp{max-height:none}
    .clamp::after{display:none}
    .proj-body{grid-template-rows:1fr!important}
    .skills .skill-group{display:block!important}
    .skills .skill-group h4{display:block!important}
    .pf.hide,.skill.hide{display:inline-flex!important}
    .pf.hide{display:block!important}
    .ring{animation:none}
    a{color:#000}
  }