:root {
  --bg: #f7faff;
  --bg-soft: #eaf2ff;
  --card: #ffffff;
  --line: rgba(37, 82, 145, .15);
  --text: #142b4d;
  --muted: #5e718e;
  --blue: #2878d0;
  --blue-dark: #174a83;
  --max: 1180px;
  --radius: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--blue); color: #ffffff; }

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 78px; display: flex; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: auto; padding: 0 34px;
  background: rgba(247,250,255,.86); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(37,82,145,.08);
}
.logo { font: 700 22px/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.logo span, h1 span, h2 span, .green-text { color: var(--blue); }
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: #536985; font-size: 13px; transition: .25s ease; }
.nav-links a:hover { color: var(--blue); }
.nav-cta { border: 1px solid var(--line); padding: 10px 15px; border-radius: 999px; font-size: 13px; }
.nav-cta span { color: var(--blue); margin-left: 7px; }
.menu-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 22px; }

.section { max-width: var(--max); margin: auto; padding: 130px 28px; }
.hero {
  min-height: 100vh; max-width: none; padding: 170px max(28px, calc((100vw - var(--max))/2));
  position: relative; display: flex; align-items: center; overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0; opacity: .24;
  background-image: linear-gradient(rgba(37,82,145,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(37,82,145,.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to right, black, transparent 75%);
}
.hero-bg-number, .contact-bg-number {
  position: absolute; right: 4vw; top: 9vh;
  font: 700 clamp(260px, 38vw, 580px)/.8 "Space Grotesk", sans-serif;
  letter-spacing: -.1em; color: transparent; -webkit-text-stroke: 1px rgba(40,120,208,.13);
  user-select: none; animation: float99 7s ease-in-out infinite;
}
.hero-content { position: relative; z-index: 2; max-width: 820px; }
.eyebrow, .section-kicker { color: var(--blue); text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 700; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-right: 8px; box-shadow: 0 0 14px rgba(40,120,208,.35); }
.hero h1 { font: 600 clamp(68px, 10vw, 132px)/.92 "Space Grotesk", sans-serif; letter-spacing: -.07em; margin: 25px 0 20px; }
.hero-subtitle { font: 500 clamp(16px, 2vw, 22px)/1.4 "Space Grotesk", sans-serif; color: #405875; }
.hero-subtitle i { color: var(--blue); font-style: normal; padding: 0 7px; }
.hero-description { max-width: 550px; color: var(--muted); margin-top: 22px; font-size: 15px; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.btn { padding: 13px 19px; border-radius: 999px; font-size: 13px; font-weight: 700; transition: .25s ease; }
.btn span { margin-left: 8px; }
.btn-primary { background: var(--blue); color: #ffffff; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(40,120,208,.2); }
.btn-ghost { border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.hero-side { position: absolute; right: max(28px, calc((100vw - var(--max))/2)); bottom: 55px; z-index: 2; }
.side-card { padding: 17px 20px; border: 1px solid var(--line); background: rgba(255,255,255,.8); border-radius: 18px; min-width: 190px; box-shadow:0 12px 36px rgba(34,76,132,.08); }
.side-label { display:block; color: var(--muted); font-size: 9px; letter-spacing: .14em; margin-bottom: 4px; }
.side-card strong { display:block; font-size: 14px; }
.side-card small { color: var(--muted); font-size: 11px; }
.scroll-hint { color: #6e8098; font-size: 9px; letter-spacing: .14em; margin-top: 16px; text-align: right; }
.scroll-hint span { color: var(--blue); margin-left: 5px; }

.section-head { margin-bottom: 55px; }
.section-head h2 { font: 600 clamp(46px, 6vw, 76px)/.95 "Space Grotesk", sans-serif; letter-spacing: -.06em; margin-top: 12px; }
.split-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.section-note { max-width: 320px; color: var(--muted); font-size: 13px; }

.about-layout { display:grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items:center; }
.about-copy .large-copy { font: 500 25px/1.45 "Space Grotesk", sans-serif; color: #203a5e; max-width: 650px; }
.about-copy > p + p { color: var(--muted); max-width: 600px; margin-top: 24px; font-size: 14px; }
.mini-info { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 38px; }
.mini-info div { border-top: 1px solid var(--line); padding-top: 12px; }
.mini-info span { display:block; color: #70746f; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.mini-info strong { font-size: 13px; display:block; margin-top: 4px; }
.visual-card {
  aspect-ratio: 1; border-radius: 32px; border: 1px solid var(--line);
  background: radial-gradient(circle at 70% 30%, rgba(40,120,208,.13), transparent 35%), #e5efff;
  padding: 24px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
}
.photo-card {
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.5)),
    radial-gradient(circle at 35% 20%, rgba(40,120,208,.13), transparent 15%),
    linear-gradient(145deg, #e8f1ff, #dceaff 55%);
}
.visual-top,.visual-bottom { display:flex; justify-content:space-between; color:#536985; font-size:10px; letter-spacing:.12em; }
.visual-photo {
  flex:1; display:grid; place-items:center; margin:12px 0; border:1px solid rgba(37,82,145,.12);
  border-radius:22px; background:linear-gradient(135deg, rgba(255,255,255,.6), rgba(40,120,208,.08));
  position:relative; overflow:hidden;
}
.visual-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.skills-section { background: var(--bg-soft); max-width: none; padding-left: max(28px, calc((100vw - var(--max))/2)); padding-right: max(28px, calc((100vw - var(--max))/2)); }
.skills-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.skill-card { min-height:220px; padding:26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; transition:.3s ease; overflow:hidden; }
.skill-card:hover { background: #f5f9ff; transform: translateY(-4px); }
.skill-icon { color:var(--blue); font:600 20px "Space Grotesk"; margin-bottom: 45px; }
.skill-card h3 { font:600 19px "Space Grotesk"; }
.skill-card p { color:var(--muted); font-size:12px; margin-top:8px; max-width:220px; }
.skill-card > span { position:absolute; top:25px; right:25px; color:#8496ad; font-size:10px; }

.projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.project-large { grid-column:span 2; }
.project-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); overflow:hidden; transition:.3s ease; }
.project-card:hover { transform:translateY(-5px); border-color:rgba(40,120,208,.3); }
.project-image { min-height:260px; position:relative; overflow:hidden; }
.project-large .project-image { min-height:390px; }
.placeholder {
  background:
    radial-gradient(circle at 75% 35%, rgba(40,120,208,.18), transparent 25%),
    linear-gradient(135deg, #eaf2ff, #dceaff 60%);
}
.placeholder::after {
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(135deg, transparent 0 26px, rgba(255,255,255,.025) 27px 28px);
}
.placeholder.network { background: radial-gradient(circle at 75% 35%, rgba(40,120,208,.18), transparent 22%), linear-gradient(145deg,#e7f0ff,#d6e7ff 70%); }
.placeholder.web { background: radial-gradient(circle at 30% 60%, rgba(255,255,255,.6), transparent 25%), linear-gradient(145deg,#eaf2ff,#dceaff 70%); }
.placeholder.linux { background: radial-gradient(circle at 70% 40%, rgba(40,120,208,.12), transparent 25%), linear-gradient(145deg,#e7eef8,#d5e4f8 70%); }
.placeholder.fiber { background: radial-gradient(circle at 20% 40%, rgba(40,120,208,.18), transparent 20%), linear-gradient(145deg,#e5efff,#d4e6ff 70%); }
.placeholder.esp { background: radial-gradient(circle at 65% 60%, rgba(40,120,208,.15), transparent 25%), linear-gradient(145deg,#eaf3ff,#d9eaff 70%); }
.placeholder.design { background: radial-gradient(circle at 60% 45%, rgba(255,255,255,.6), transparent 25%), linear-gradient(145deg,#eef4ff,#dceaff 70%); }
.project-image > span { position:absolute; left:22px; top:20px; z-index:2; color:#536985; font-size:10px; letter-spacing:.13em; }
.project-image > b { position:absolute; right:25px; bottom:17px; z-index:2; font:700 clamp(38px,7vw,88px)/1 "Space Grotesk"; letter-spacing:-.07em; color:rgba(30,76,135,.12); }
.project-info { padding:23px; display:flex; justify-content:space-between; gap:20px; }
.project-number { color:var(--blue); font-size:10px; }
.project-info h3 { font:600 21px "Space Grotesk"; margin-top:3px; }
.project-info p:not(.project-number) { color:var(--muted); font-size:12px; max-width:550px; margin-top:7px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; }
.tags span { border:1px solid var(--line); color:#536985; padding:4px 8px; border-radius:999px; font-size:9px; }
.round-link { flex:0 0 auto; width:43px; height:43px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; transition:.25s; }
.round-link:hover { background:var(--blue); color:#ffffff; transform:rotate(45deg); }

.football-section { max-width:none; padding-left:max(28px, calc((100vw - var(--max))/2)); padding-right:max(28px, calc((100vw - var(--max))/2)); background:#eaf2ff; position:relative; overflow:hidden; display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }
.football-number { position:absolute; right:2%; bottom:-20%; font:700 520px/.8 "Space Grotesk"; color:transparent; -webkit-text-stroke:1px rgba(40,120,208,.12); pointer-events:none; }
.football-content { position:relative; z-index:2; }
.football-content h2 { font:600 clamp(52px,7vw,90px)/.9 "Space Grotesk"; letter-spacing:-.07em; margin:15px 0 30px; }
.football-quote { font:500 24px/1.35 "Space Grotesk"; }
.football-text { color:var(--muted); font-size:13px; max-width:420px; margin-top:20px; }
.football-gallery { position:relative; z-index:2; min-height:480px; }
.sport-photo { position:absolute; border:1px solid var(--line); border-radius:24px; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-direction:column; background:linear-gradient(145deg,#e1edff,#cbdfff); }
.sport-photo::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(135deg, rgba(20,72,132,.02), rgba(20,72,132,.16)); }
.sport-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sport-photo span,.sport-photo b { position:relative; z-index:2; }
.sport-photo span { font-size:9px; color:#536985; letter-spacing:.14em; }
.sport-a { width:48%; height:65%; right:22%; top:5%; transform:rotate(-4deg); }
.sport-b { width:45%; height:60%; right:0; bottom:2%; transform:rotate(5deg); }
.sport-c { width:35%; height:45%; left:2%; bottom:0; transform:rotate(-7deg); background:radial-gradient(circle at center,rgba(40,120,208,.2),transparent 45%),#dceaff; }

.education-section { max-width:none; padding-left:max(28px, calc((100vw - var(--max))/2)); padding-right:max(28px, calc((100vw - var(--max))/2)); }
.timeline { position:relative; padding:10px 0 10px 60px; }
.timeline-line { position:absolute; left:9px; top:0; bottom:0; width:1px; background:var(--line); }
.timeline-dot { position:absolute; left:0; top:6px; width:19px; height:19px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 7px rgba(40,120,208,.1); }
.timeline-item { display:grid; grid-template-columns:180px 1fr; gap:50px; padding-bottom:20px; }
.timeline-year { font:600 20px "Space Grotesk"; color:#405875; }
.timeline-content h3 { font:600 28px "Space Grotesk"; }
.timeline-content p { color:var(--muted); font-size:14px; margin-top:3px; }
.timeline-content span { display:inline-block; color:var(--blue); border:1px solid rgba(40,120,208,.2); border-radius:999px; font-size:9px; padding:4px 8px; margin-top:13px; }

.gallery-grid {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px; align-items:stretch;
}
.gallery-item {
  border:1px solid rgba(37,82,145,.12); border-radius:24px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:flex-start; flex-direction:column; padding:20px;
  background:linear-gradient(135deg,#eaf2ff,#dceaff); box-shadow: inset 0 0 0 1px rgba(37,82,145,.03);
  transition:transform .3s ease, border-color .3s ease; aspect-ratio:4 / 3;
}
.gallery-item:hover { transform:translateY(-5px); border-color:rgba(40,120,208,.28); }
.gallery-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-item::before {
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,72,132,.02), rgba(20,72,132,.2));
  z-index:1;
}
.gallery-item::after {
  content:""; position:absolute; inset:16px 18px auto auto; width:112px; height:112px; border-radius:50%;
  background:rgba(40,120,208,.12); filter:blur(20px); z-index:1;
}
.gallery-item span,.gallery-item b { position:relative; z-index:2; }
.gallery-item span { margin-top:auto; color:rgba(255,255,255,.9); font-size:9px; letter-spacing:.14em; }
.gallery-item b { color:#ffffff; font:600 22px "Space Grotesk"; margin-top:6px; }
.gallery-item.tall,.gallery-item.wide { grid-row:auto; grid-column:auto; }
.gallery-item.photo-1 { background:linear-gradient(135deg, rgba(40,120,208,.08), rgba(20,72,132,.2)), radial-gradient(circle at 30% 25%, rgba(40,120,208,.16), transparent 20%), linear-gradient(145deg,#e4efff,#d6e6ff 55%); }
.gallery-item.photo-2 { background:linear-gradient(135deg, rgba(40,120,208,.08), rgba(20,72,132,.2)), radial-gradient(circle at 70% 20%, rgba(255,255,255,.5), transparent 22%), linear-gradient(150deg,#eaf2ff,#d9e8ff 60%); }
.gallery-item.photo-3 { background:linear-gradient(135deg, rgba(40,120,208,.08), rgba(20,72,132,.2)), radial-gradient(circle at 60% 35%, rgba(40,120,208,.15), transparent 20%), linear-gradient(150deg,#e5efff,#d9eaff 58%); }
.gallery-item.photo-4 { background:linear-gradient(135deg, rgba(40,120,208,.08), rgba(20,72,132,.2)), radial-gradient(circle at 50% 35%, rgba(40,120,208,.14), transparent 18%), linear-gradient(160deg,#e7f0ff,#dceaff 60%); }
.gallery-item.photo-5 { background:linear-gradient(135deg, rgba(40,120,208,.08), rgba(20,72,132,.2)), radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 24%), linear-gradient(150deg,#e6edff,#d9e8ff 58%); }

.contact-section { min-height:85vh; position:relative; display:grid; place-items:center; padding:120px 28px; overflow:hidden; border-top:1px solid var(--line); }
.contact-bg-number { top:20%; right:10%; font-size:500px; opacity:.6; }
.contact-inner { width:min(900px,100%); position:relative; z-index:2; text-align:center; }
.contact-inner h2 { font:600 clamp(62px,9vw,115px)/.9 "Space Grotesk"; letter-spacing:-.08em; margin:18px 0 24px; }
.contact-inner > p:not(.section-kicker) { color:var(--muted); max-width:500px; margin:auto; font-size:13px; }
.contact-links { margin-top:45px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.contact-links a { min-width:150px; display:flex; justify-content:space-between; gap:35px; border:1px solid var(--line); border-radius:999px; padding:13px 17px; font-size:12px; transition:.25s; }
.contact-links a b { color:var(--blue); }
.contact-links a:hover { background:var(--blue); color:#ffffff; border-color:var(--blue); }
.contact-links a:hover b { color:#ffffff; }

footer { border-top:1px solid var(--line); padding:22px max(28px, calc((100vw - var(--max))/2)); display:flex; justify-content:space-between; color:#6e8098; font-size:10px; letter-spacing:.05em; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }
@keyframes float99 { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(16px) rotate(1deg); } }

.cursor-dot,.cursor-ring { position:fixed; pointer-events:none; z-index:100; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot { width:5px; height:5px; background:var(--blue); }
.cursor-ring { width:28px; height:28px; border:1px solid rgba(40,120,208,.45); transition:width .2s,height .2s; }
body.cursor-hover .cursor-ring { width:44px; height:44px; }

@media (max-width: 900px) {
  .nav-links,.nav-cta { display:none; }
  .menu-toggle { display:block; }
  .nav-links.open { position:absolute; top:78px; left:15px; right:15px; display:flex; flex-direction:column; gap:0; padding:10px; background:#ffffff; border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 36px rgba(34,76,132,.1); }
  .nav-links.open a { padding:12px; }
  .hero-side { display:none; }
  .about-layout,.football-section { grid-template-columns:1fr; gap:50px; }
  .skills-grid { grid-template-columns:repeat(2,1fr); }
  .projects-grid { grid-template-columns:1fr; }
  .project-large { grid-column:span 1; }
  .gallery-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:auto;
  }
  .gallery-item { grid-area:auto; }
  .football-gallery { min-height:420px; }
}

@media (max-width: 600px) {
  .navbar { height:68px; padding:0 20px; }
  .section { padding:90px 20px; }
  .hero { padding:130px 20px 90px; min-height:100svh; }
  .hero h1 { font-size:66px; }
  .hero-subtitle { font-size:14px; }
  .hero-subtitle i { padding:0 2px; }
  .hero-description { font-size:13px; }
  .hero-bg-number { font-size:270px; right:-20px; top:23%; }
  .section-head { margin-bottom:35px; }
  .section-head h2 { font-size:49px; }
  .split-head { display:block; }
  .section-note { margin-top:18px; }
  .about-copy .large-copy { font-size:20px; }
  .mini-info { grid-template-columns:1fr 1fr 1fr; }
  .mini-info strong { font-size:11px; }
  .visual-number { font-size:145px; }
  .skills-grid { grid-template-columns:1fr; }
  .skill-card { min-height:180px; }
  .skill-icon { margin-bottom:30px; }
  .project-image,.project-large .project-image { min-height:230px; }
  .project-info { padding:18px; }
  .project-info h3 { font-size:18px; }
  .football-section { padding-left:20px; padding-right:20px; }
  .football-gallery { min-height:330px; }
  .sport-a { width:53%; height:60%; }
  .sport-b { width:48%; height:53%; }
  .sport-c { width:38%; height:40%; }
  .sport-c b { font-size:70px; }
  .timeline { padding-left:38px; }
  .timeline-item { grid-template-columns:1fr; gap:10px; }
  .timeline-year { font-size:16px; }
  .timeline-content h3 { font-size:24px; }
  .gallery-grid { grid-template-columns:1fr; grid-auto-rows:190px; }
  .gallery-item.tall { grid-row:span 1; }
  .gallery-item.wide { grid-column:span 1; }
  .contact-inner h2 { font-size:64px; }
  .contact-links { flex-direction:column; }
  .contact-links a { width:100%; }
  footer { flex-direction:column; gap:7px; text-align:center; padding:20px; }
  .cursor-dot,.cursor-ring { display:none; }
}