:root {
    --accent: #ff8a00;
    --accent-2: #ffb347;
    --bg: #0e0f12;
    --bg-elev: #15171c;
    --text: #e6e8eb;
    --muted: #9aa3ad;
    --ok: #00d1b2;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 16px;
    --maxw: 1100px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
    body{display:flex;min-height:100vh;flex-direction:column}

    /* Nav */
    nav{
    position:sticky; top:0; z-index:1000;
    background:linear-gradient(180deg, rgba(21,23,28,.9), rgba(21,23,28,.7));
    backdrop-filter: blur(8px);
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:space-between;
    padding: 1rem 2rem;
    }
    .brand{display:flex;align-items:center;gap:.8rem;font-weight:800;letter-spacing:.3px}
    .brand .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(255,138,0,.7)}
    .brand .name{font-size:1.15rem}
    .nav-links{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
    .nav-links a{
    color:var(--text); text-decoration:none; font-weight:600; opacity:.85;
    padding:.4rem .7rem; border-radius:10px; transition:.2s;
    }
    .nav-links a:hover{background:rgba(255,255,255,.06);opacity:1}
    .btn-toggle{
    border:1px solid rgba(255,255,255,.12); background:transparent;color:var(--text);
    padding:.45rem .7rem;border-radius:10px;cursor:pointer;font-weight:600
    }

    main{flex:1}
    section{
    max-width:var(--maxw); margin:3rem auto; padding:2.2rem;
    background:var(--bg-elev); border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius); box-shadow:var(--shadow);
    opacity:0; transform: translateY(30px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    display:none;
    }
    section.visible{opacity:1; transform:none}
    h1, h2{margin:0 0 1rem}
    h1{font-size:2.2rem; letter-spacing:.2px}
    h2{
    font-size:1.6rem; color:var(--text);
    border-bottom:2px solid rgba(255,255,255,.08); padding-bottom:.6rem
    }
    .lede{color:var(--muted); line-height:1.6}
    .chip{
    display:inline-flex; align-items:center; gap:.4rem;
    background:rgba(255,138,0,.12); border:1px solid rgba(255,138,0,.28);
    color:var(--accent); padding:.35rem .6rem; border-radius:999px; font-weight:700; font-size:.85rem
    }

    /* Hero */
    .hero{
    display:grid; gap:2.4rem; grid-template-columns: 1.3fr .7fr; align-items:center;
    background:
    radial-gradient(1200px 400px at 20% -10%, rgba(255,138,0,.12), transparent 60%),
    radial-gradient(800px 300px at 110% 0%, rgba(255,179,71,.08), transparent 60%);
    }
    .hero .title{font-size:2.6rem; line-height:1.15}
    .hero p{color:var(--muted); font-size:1.05rem}
    .hero .statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
    .stat{
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
    border-radius:14px; padding:.9rem
    }
    .stat b{font-size:1.2rem;color:var(--accent)}
    .stat span{display:block;color:var(--muted);font-size:.9rem}

    /* Timeline */
    .timeline{margin:1rem 0;display:grid;gap:1rem}
    .timeline .row {
    display: grid;
    grid-template-columns: 80px 1fr 140px; /* logo | what | when */
    align-items: center; /* ⬅ vertical centering */
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    }

    .logo-col {
    display: flex;
    align-items: center;   /* center vertically inside logo-col */
    justify-content: center;
    }

    .logo-inline-big {
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
    }

    .timeline .what {
    line-height: 1.5;
    }

    .timeline .what ul.lede {
    margin: .4rem 0 0;
    padding-left: 1.2rem;
    color: var(--muted);
    }

    .timeline .when {
    font-weight: 700;
    color: var(--accent);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    }
    .logo-inline{height:22px; vertical-align:-4px; margin-left:.35rem; opacity:.95}

    /* Logo grids */
    .logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-top:1rem}
    .logo-card{
    background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
    border-radius:14px; padding:1rem; display:flex;justify-content:center;align-items:center;min-height:84px
    }
    .logo-card img{
    max-width:100%; max-height:44px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
    }

    .logo-card.yuno{ background:#3e4fe0; border-color:#3e4fe0; }
    .logo-card.mercadolibre{ background:#ffe600; border-color:#ffe600; }
    .logo-card.klar{ background:#2cd4c4; border-color:#2cd4c4; }
    .row.yuno{
    background: rgba(62,79,224,.16);
    border-color: rgba(62,79,224,.35);
    }
    .row.mercadolibre{
    background: rgba(255,230,0,.24);
    border-color: rgba(255,230,0,.45);
    }
    .row.klar{
    background: rgba(44,212,196,.18);
    border-color: rgba(44,212,196,.38);
    }

    .logo-card img{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
    .tech-label{margin-top:.6rem;text-align:center;color:var(--muted);font-size:.95rem}

    /* Grid of skill cards */
    .skills-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1rem; margin-top:1rem;
    }

    .skill-card{
    display:flex; gap:.9rem; align-items:center;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px; padding:1rem;
    }

    .skill-card img{
    width:32px; height:32px; object-fit:contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.35));
    }

    .skill-info h3{
    margin:0 0 .2rem 0; font-size:1.05rem; display:flex; align-items:center; gap:.5rem;
    }
    .skill-info p{
    margin:0; color:var(--muted); font-size:.95rem;
    }

    .skill-card.python      { background:#3776ab10; border-color:#3776ab44; }
    .skill-card.go          { background:#00add810; border-color:#00add844; }
    .skill-card.rust        { background:#dea58410; border-color:#dea58444; }
    .skill-card.terraform   { background:#7b42bc10; border-color:#7b42bc44; }
    .skill-card.docker      { background:#0db7ed10; border-color:#0db7ed44; }
    .skill-card.aws         { background:#ff990010; border-color:#ff990044; }
    .skill-card.mysql       { background:#00618a10; border-color:#00618a44; }
    .skill-card.kubernetes  { background:#326ce510; border-color:#326ce544; }
    .skill-card.splunk      { background:#69be2810; border-color:#69be2844; }
    .skill-card.crowdstrike { background:#e3061310; border-color:#e3061344; }
    .skill-card.tenable     { background:#00a5b510; border-color:#00a5b544; }
    .skill-card.forcepoint  { background:#00b14010; border-color:#00b14044; }
    .skill-card.jumpcloud   { background:#2f8cff10; border-color:#2f8cff44; }
    .skill-card.okta        { background:#0a7cff10; border-color:#0a7cff44; }
    .skill-card.paloalto    { background:#ff6f0010; border-color:#ff6f0044; }
    .skill-card.qualys      { background:#ed1c2410; border-color:#ed1c2444; }
    .skill-card.rundeck     { background:#e5393510; border-color:#e5393544; }



    /* Footer */
    footer{
    margin-top:auto; text-align:center; padding:2rem 1rem;
    color:var(--muted); border-top:1px solid rgba(255,255,255,.08)
    }
    .social{display:flex;gap:.8rem;justify-content:center;margin-top:.6rem;flex-wrap:wrap}
    .social a{
    color:var(--text); text-decoration:none; padding:.5rem .8rem; border-radius:999px;
    border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02)
    }
    .social a:hover{border-color:rgba(255,138,0,.5); color:var(--accent)}

    /* Responsive */
    @media (max-width:900px){
    .hero{grid-template-columns:1fr}
    }
    @media (prefers-reduced-motion: reduce){
    section{transition:none}
    .bar > span{transition:none}
    }

    @media (max-width: 720px) {
    .stats { grid-template-columns: 1fr; }
    .hobby-columns { grid-template-columns: 1fr; }
  }

  /* ——— HOBBIES (detailed cards) ——— */
  #hobbies { margin-top: 4rem; }
  #hobbies .hobby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
  .hobby-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 1.25rem; border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(6px); }
  .hobby-header h3 { font-size: 1.25rem; margin: 0; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin: .75rem 0 0; }
  .stats div { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); padding: .6rem .7rem; border-radius: 10px; }
  .stats dt { font-size: .75rem; opacity: .7; }
  .stats dd { margin: .1rem 0 0; font-weight: 600; }
  .flags { margin-top: .75rem; font-size: 1.4rem; }
  
  /* Accent colors */
  .hobby-card.golf     { --h-accent: 120; }
  .hobby-card.snowboard{ --h-accent: 200; }
  .hobby-card.travel   { --h-accent: 35;  }
  .hobby-card { box-shadow: 0 0 0 1px hsl(var(--h-accent, 30) 80% 60% / .08), 0 6px 24px -12px hsl(var(--h-accent, 30) 80% 60% / .25), var(--shadow); }
  .hobby-header h3 { text-shadow: 0 0 24px hsl(var(--h-accent, 30) 80% 60% / .25); }
  
  @media (max-width: 720px) { .stats { grid-template-columns: 1fr; } }