:root{
    --ink:#0E0D0C;
    --card:#18140F;
    --card-2:#211B14;
    --taupe:#A9927D;
    --ember:#9A2F35;
    --ember-bright:#C23B42;
    --gold:#D4AF37;
    --off-white:#F3EFE8;
    --muted:#8C8478;
    --line: rgba(243,239,232,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    background:var(--ink);
    color:var(--off-white);
    font-family:'Manrope',sans-serif;
    overflow-x:hidden;
}
.display{font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:0.01em;}
.mono{font-family:'JetBrains Mono',monospace;}

a{color:inherit; text-decoration:none;}

body::before{
    content:"";
    position:fixed; inset:0;
    background:radial-gradient(ellipse at 50% -10%, rgba(154,47,53,0.20), transparent 55%);
    pointer-events:none;
    z-index:0;
}

header{
    position:fixed; top:0; left:0; right:0;
    z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 6vw;
    background:linear-gradient(to bottom, rgba(14,13,12,0.92), transparent);
    transition:background .3s ease;
}
header.scrolled{ background:rgba(14,13,12,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.brand{
    font-family:'Anton',sans-serif;
    font-size:1.1rem;
    letter-spacing:0.08em;
}
.brand span{color:var(--ember-bright);}
nav{display:flex; gap:2.4vw;}
nav a{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
    position:relative;
    padding-bottom:4px;
}
nav a:hover{color:var(--off-white);}
nav a::after{
    content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--ember-bright); transition:width .25s ease;
}
nav a:hover::after{width:100%;}
.nav-toggle{display:none;}

/* ---------- HERO with full-bleed background photo (Messi.com style) ---------- */
.hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    padding:0 6vw;
    z-index:1;
    border-bottom:1px solid var(--line);
    overflow:hidden;
    isolation:isolate;
}
.hero-bg{
    position:absolute; inset:0;
    z-index:-2;
    background-image:url('hero-bg.jpg');
    background-size:cover;
    background-position:center 22%;
    filter:grayscale(55%) contrast(1.08) brightness(0.75);
    transform:scale(1.03);
}
.hero-bg-overlay{
    position:absolute; inset:0;
    z-index:-1;
    background:
      linear-gradient(180deg, rgba(14,13,12,0.55) 0%, rgba(14,13,12,0.35) 35%, rgba(14,13,12,0.88) 92%, var(--ink) 100%),
      linear-gradient(90deg, rgba(14,13,12,0.92) 0%, rgba(14,13,12,0.55) 42%, rgba(14,13,12,0.25) 68%, rgba(14,13,12,0.55) 100%),
      radial-gradient(ellipse at 30% 45%, rgba(154,47,53,0.28), transparent 60%);
}
.hero-grid{
    display:grid;
    grid-template-columns:1.25fr 0.9fr;
    align-items:center;
    gap:4vw;
    width:100%;
    padding-top:70px;
}
.kicker{
    font-family:'JetBrains Mono',monospace;
    font-size:0.78rem;
    letter-spacing:0.25em;
    color:var(--ember-bright);
    display:flex; align-items:center; gap:12px;
    margin-bottom:22px;
}
.kicker::before{content:""; width:34px; height:1px; background:var(--ember-bright); display:inline-block;}
h1.name{
    font-size:clamp(3.2rem, 8vw, 7.2rem);
    line-height:0.92;
    color:var(--off-white);
    text-shadow:0 4px 30px rgba(0,0,0,0.5);
}
h1.name em{
    font-style:normal;
    color:transparent;
    -webkit-text-stroke:1.5px var(--off-white);
}
.role{
    margin-top:22px;
    font-size:1.05rem;
    color:var(--taupe);
    max-width:46ch;
    line-height:1.6;
}
.hero-cta{
    margin-top:38px;
    display:flex; gap:16px; flex-wrap:wrap;
}
.btn{
    font-family:'JetBrains Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:14px 26px;
    border:1px solid var(--off-white);
    display:inline-block;
    transition:all .25s ease;
}
.btn:hover{background:var(--off-white); color:var(--ink);}
.btn.filled{background:var(--ember); border-color:var(--ember);}
.btn.filled:hover{background:var(--ember-bright); border-color:var(--ember-bright); color:var(--off-white);}

.card-wrap{ position:relative; display:flex; justify-content:center;}
.player-card{
    width:min(320px, 100%);
    background:linear-gradient(160deg, var(--card-2), var(--card) 60%);
    border:1px solid var(--line);
    border-radius:18px;
    padding:26px 24px 22px;
    position:relative;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.75);
    backdrop-filter:blur(2px);
}
.player-card::before{
    content:"";
    position:absolute; inset:-1px;
    border-radius:18px;
    padding:1px;
    background:linear-gradient(160deg, var(--gold), transparent 40%, transparent 60%, var(--ember-bright));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
}
.card-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:14px;
}
.ovr{
    font-family:'Anton',sans-serif;
    font-size:2.4rem;
    color:var(--gold);
    line-height:1;
}
.ovr small{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:0.6rem;
    letter-spacing:0.15em;
    color:var(--muted);
    margin-top:4px;
}
.pos-tag{
    font-family:'JetBrains Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.1em;
    color:var(--muted);
    text-align:right;
}
.photo-frame{
    width:100%;
    aspect-ratio:1/1.05;
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--line);
    margin-bottom:16px;
    background:#000;
}
.photo-frame img{width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(15%) contrast(1.05);}
.card-name{
    font-family:'Anton',sans-serif;
    font-size:1.15rem;
    text-align:center;
    letter-spacing:0.03em;
    margin-bottom:14px;
}
.stat-row{
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
    font-family:'JetBrains Mono',monospace;
}
.stat-row div{text-align:center;}
.stat-row .num{color:var(--gold); font-size:1rem; font-weight:700;}
.stat-row .lab{font-size:0.6rem; letter-spacing:0.08em; color:var(--muted); margin-top:2px;}

section{
    position:relative; z-index:1;
    padding:110px 6vw;
    border-bottom:1px solid var(--line);
}
.section-head{
    display:flex; align-items:baseline; gap:20px; margin-bottom:60px;
}
.section-no{
    font-family:'JetBrains Mono',monospace;
    color:var(--ember-bright);
    font-size:0.85rem;
}
.section-title{
    font-family:'Anton',sans-serif;
    font-size:clamp(2.2rem, 4.5vw, 3.6rem);
}
.section-title span{color:var(--taupe);}

.about-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:start;
}
.about-grid p{
    font-size:1.15rem; line-height:1.85; color:var(--off-white); opacity:0.92;
}
.about-meta{
    display:grid; grid-template-columns:1fr 1fr; gap:22px 30px;
    font-family:'JetBrains Mono',monospace;
    font-size:0.85rem;
    align-content:start;
}
.about-meta div{border-top:1px solid var(--line); padding-top:12px;}
.about-meta b{display:block; color:var(--muted); font-size:0.65rem; letter-spacing:0.1em; margin-bottom:6px; text-transform:uppercase;}

.stats-list{display:flex; flex-direction:column; gap:26px;}
.stat-item{}
.stat-item .top{display:flex; justify-content:space-between; margin-bottom:10px; font-family:'JetBrains Mono',monospace; font-size:0.85rem;}
.stat-item .top .val{color:var(--gold);}
.bar-track{height:8px; background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--ember), var(--gold)); width:0%; border-radius:6px; transition:width 1.4s cubic-bezier(.2,.8,.2,1);}

.skills-two-col{display:grid; grid-template-columns:1.1fr 0.9fr; gap:6vw;}
.side-note{
    background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px;
    font-family:'JetBrains Mono',monospace; font-size:0.8rem; line-height:2;
    align-self:start;
}
.side-note b{display:block; color:var(--gold); font-size:0.7rem; letter-spacing:0.12em; margin-bottom:14px; text-transform:uppercase; font-family:'JetBrains Mono',monospace;}
.tagchip{
    display:inline-block; border:1px solid var(--line); padding:4px 10px; border-radius:20px; margin:3px 4px 3px 0; font-size:0.72rem; color:var(--taupe);
}

.timeline{border-left:1px solid var(--line); margin-left:8px;}
.t-row{
    position:relative; padding:0 0 46px 34px;
}
.t-row:last-child{padding-bottom:0;}
.t-row::before{
    content:""; position:absolute; left:-6px; top:4px; width:11px; height:11px; border-radius:50%;
    background:var(--ink); border:2px solid var(--ember-bright);
}
.t-year{font-family:'JetBrains Mono',monospace; color:var(--ember-bright); font-size:0.78rem; letter-spacing:0.08em; margin-bottom:6px;}
.t-title{font-family:'Anton',sans-serif; font-size:1.3rem; margin-bottom:6px;}
.t-sub{color:var(--taupe); font-size:0.95rem;}
.t-score{
    font-family:'JetBrains Mono',monospace; margin-top:10px; display:inline-block;
    color:var(--gold); font-size:0.85rem; border:1px solid var(--line); padding:4px 10px; border-radius:20px;
}

.trophy-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.trophy{
    background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px 24px;
    position:relative; overflow:hidden;
}
.trophy::after{
    content:"◆"; position:absolute; right:18px; top:18px; color:var(--gold); font-size:0.9rem; opacity:0.7;
}
.trophy .yr{font-family:'JetBrains Mono',monospace; color:var(--ember-bright); font-size:0.75rem; letter-spacing:0.1em; margin-bottom:12px;}
.trophy h3{font-family:'Anton',sans-serif; font-size:1.25rem; margin-bottom:10px; line-height:1.2;}
.trophy p{color:var(--muted); font-size:0.88rem; line-height:1.6;}

.contact-wrap{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:6vw; align-items:end;
}
.contact-big{
    font-family:'Anton',sans-serif;
    font-size:clamp(2.4rem, 6vw, 4.6rem);
    line-height:1.05;
}
.contact-big a{border-bottom:2px solid var(--ember-bright); transition:color .25s ease;}
.contact-big a:hover{color:var(--gold); border-color:var(--gold);}
.contact-list{font-family:'JetBrains Mono',monospace; font-size:0.9rem; display:flex; flex-direction:column; gap:16px;}
.contact-list div{display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:14px;}
.contact-list b{color:var(--muted); font-weight:500; letter-spacing:0.05em; text-transform:uppercase; font-size:0.72rem;}

footer{
    padding:28px 6vw; text-align:center;
    font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--muted);
    letter-spacing:0.05em;
}
footer span{color:var(--ember-bright);}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.show{opacity:1; transform:translateY(0);}

@media (max-width: 880px){
    header{padding:18px 5vw;}
    nav{position:fixed; top:0; right:-100%; height:100vh; width:70%; background:var(--card); flex-direction:column; justify-content:center; align-items:flex-start; gap:26px; padding:40px; transition:right .3s ease; border-left:1px solid var(--line);}
    nav.open{right:0;}
    .nav-toggle{display:block; font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.1em; border:1px solid var(--off-white); padding:8px 12px; background:none; color:var(--off-white); z-index:110;}
    .hero-grid{grid-template-columns:1fr; text-align:left;}
    .hero-bg{background-position:65% 20%;}
    .card-wrap{margin-top:50px;}
    .about-grid, .skills-two-col, .contact-wrap{grid-template-columns:1fr; gap:40px;}
    .trophy-grid{grid-template-columns:1fr;}
    section{padding:80px 6vw;}
}