:root{
    --bg: #0a0e1a;
    --bg-soft: #10152b;
    --card: #131a33;
    --line: #232b4d;
    --text: #e8ecf7;
    --text-dim: #8992b8;
    --cyan: #00e5ff;
    --magenta: #ff3ea5;
    --amber: #ffb800;
    --gradient: linear-gradient(120deg, var(--cyan), var(--magenta) 55%, var(--amber));
    --radius: 14px;
    --maxw: 1120px;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
  }
  ::selection{ background: var(--magenta); color: #fff; }

  h1,h2,h3{ font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
  .mono{ font-family: 'JetBrains Mono', monospace; }
  a{ color: inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
  section{ position: relative; }

  /* ===== Background aurora mesh ===== */
  .aurora{
    position: fixed; inset: 0; z-index: 0; pointer-events:none;
    background:
      radial-gradient(600px circle at 15% 20%, rgba(0,229,255,0.16), transparent 60%),
      radial-gradient(700px circle at 85% 10%, rgba(255,62,165,0.14), transparent 60%),
      radial-gradient(500px circle at 50% 90%, rgba(255,184,0,0.10), transparent 60%);
  }

  /* ===== Nav ===== */
  header{
    position: sticky; top:0; z-index: 50;
    backdrop-filter: blur(14px);
    background: rgba(10,14,26,0.75);
    border-bottom: 1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 32px; max-width: var(--maxw); margin:0 auto;
  }
  .logo{ font-weight:700; font-size:1.15rem; }
  .logo span{ background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .nav-links{ display:flex; gap:32px; list-style:none; }
  .nav-links a{ color: var(--text-dim); font-size:0.92rem; font-weight:500; transition: color .2s; position:relative; }
  .nav-links a:hover{ color: var(--text); }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px;
    background: var(--gradient); transition: width .25s;
  }
  .nav-links a:hover::after{ width:100%; }
  .burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; z-index: 60; }
  .burger span{ width:24px; height:2px; background: var(--text); transition: .3s; }

  /* ===== Hero ===== */
  .hero{
    min-height: 92vh; display:flex; flex-direction:column; justify-content:center;
    padding: 100px 0 60px;
  }

  .hero-grid{
    display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items:center;
  }

  .hero-text h1{
    font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight:700; line-height:1.04;
  }

  .hero-photo{
    position:relative; aspect-ratio: 4/5; border-radius: 22px; overflow:hidden;
    border: 1px solid var(--line); justify-self:center; width:100%; max-width: 360px;
    cursor: pointer; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s;
  }
  .hero-photo:hover{ transform: translateY(-4px); border-color: rgba(0,229,255,0.4); }
  .hero-photo:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 4px; }
  .hero-photo img{
    width:100%; height:100%; object-fit:cover; position:relative; z-index:1;
    filter: saturate(1.05);
    transition: transform .5s ease;
  }
  .hero-photo:hover img{ transform: scale(1.04); }
  .hero-photo-hint{
    position:absolute; left:50%; bottom:16px; z-index:2; transform: translate(-50%, 6px);
    font-size:0.72rem; color: var(--text); background: rgba(10,14,26,0.7);
    border:1px solid var(--line); padding:6px 14px; border-radius:100px;
    opacity:0; transition: opacity .25s ease, transform .25s ease;
    backdrop-filter: blur(6px); pointer-events:none; letter-spacing:0.04em;
  }
  .hero-photo:hover .hero-photo-hint,
  .hero-photo:focus-visible .hero-photo-hint{ opacity:1; transform: translate(-50%, 0); }
  .hero-photo-glow{
    position:absolute; inset:-30%; z-index:0; filter: blur(60px); opacity:.55;
    background: var(--gradient); background-size: 200% 200%; animation: shift 8s ease infinite;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace; font-size:0.82rem; color: var(--cyan);
    border:1px solid rgba(0,229,255,0.3); padding: 6px 14px; border-radius: 100px;
    margin-bottom: 28px; width: fit-content;
  }
  .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

  .hero h1{
    font-size: clamp(2.6rem, 7vw, 5.2rem); font-weight:700; line-height:1.02;
    max-width: 900px;
  }
  .hero h1 .grad{
    background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
    background-size: 200% 200%; animation: shift 6s ease infinite;
  }
  @keyframes shift{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

  .hero p.sub{ margin-top:22px; font-size: 1.1rem; color: var(--text-dim); max-width: 560px; }

  .terminal{
    margin-top: 32px; font-family:'JetBrains Mono', monospace; font-size:1rem; color: var(--text);
  }
  .terminal .prompt{ color: var(--amber); }
  .cursor{ display:inline-block; width:9px; height:1.1em; background: var(--cyan); margin-left:2px; vertical-align:-2px; animation: blink 1s step-end infinite; }
  @keyframes blink{ 50%{ opacity:0; } }

  .hero-cta{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }
  .btn{
    padding: 14px 28px; border-radius: 100px; font-weight:600; font-size:0.95rem;
    display:inline-flex; align-items:center; gap:8px; transition: transform .2s, box-shadow .2s;
    border: 1px solid transparent; cursor:pointer;
  }
  .btn-primary{ background: var(--gradient); color: #0a0e1a; }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,62,165,0.25); }
  .btn-ghost{ border-color: var(--line); color: var(--text); }
  .btn-ghost:hover{ border-color: var(--cyan); color: var(--cyan); }

  /* ===== Section heading ===== */
  .head{ margin-bottom: 48px; }
  .head .tag{ font-family:'JetBrains Mono', monospace; color: var(--magenta); font-size:0.85rem; }
  .head h2{ font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top:10px; }

  section.pad{ padding: 110px 0; }
  .line-top{ border-top: 1px solid var(--line); }

  /* ===== About ===== */
  .about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start; }
  .about-grid p{ color: var(--text-dim); margin-bottom: 16px; }
  .stat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat{ border:1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--card); }
  .stat b{ font-family:'Space Grotesk', sans-serif; font-size: 2rem; background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat span{ display:block; color: var(--text-dim); font-size:0.85rem; margin-top:4px; }

  /* ===== Skills ===== */
  .skill-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .skill-card{ border:1px solid var(--line); border-radius: var(--radius); padding:26px; background: var(--card); transition: border-color .2s, transform .2s; }
  .skill-card:hover{ border-color: var(--cyan); transform: translateY(-4px); }
  .skill-card h3{ font-size:1.05rem; margin-bottom:14px; }
  .tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .tags span{
    font-family:'JetBrains Mono', monospace; font-size:0.78rem; color: var(--text-dim);
    border:1px solid var(--line); padding:5px 10px; border-radius:6px;
  }

  /* ===== Skills carousel ===== */
  .skills-carousel{
    position: relative; overflow: hidden; padding: 4px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .skills-track{
    display:flex; gap: 20px; width: max-content;
    animation: marquee 26s linear infinite;
  }
  .skills-carousel.paused .skills-track,
  .skills-carousel:hover .skills-track{ animation-play-state: paused; }
  @keyframes marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  .skills-track .skill-card{ min-width: 260px; flex: 0 0 auto; cursor: grab; }
  .skills-track .skill-card:active{ cursor: grabbing; }

  @media (prefers-reduced-motion: reduce){
    .skills-track{ animation: none; }
  }

  /* ===== Projects ===== */
  .projects{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .project-card{
    border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--card);
    transition: transform .3s, box-shadow .3s; position:relative;
  }
  .project-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
  .project-thumb{
    height: 190px; position:relative; overflow:hidden;
    display:flex; align-items:flex-end; justify-content:flex-start;
  }
  .project-thumb img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition: transform .5s ease, filter .4s ease;
    filter: saturate(0.9) brightness(0.85);
  }
  .project-card:hover .project-thumb img{ transform: scale(1.06); filter: saturate(1.05) brightness(0.95); }
  .project-thumb .glow{
    position:absolute; inset:0; opacity:.45; mix-blend-mode: color; pointer-events:none;
  }
  .project-thumb b{
    font-family:'JetBrains Mono', monospace; color:#fff; font-size:0.82rem; z-index:2; opacity:.9;
    padding: 10px 14px; background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
    width:100%;
  }
  .p1 .glow{ background: radial-gradient(circle at 30% 30%, var(--cyan), transparent 70%); }
  .p2 .glow{ background: radial-gradient(circle at 70% 40%, var(--magenta), transparent 70%); }
  .p3 .glow{ background: radial-gradient(circle at 50% 60%, var(--amber), transparent 70%); }
  .p4 .glow{ background: radial-gradient(circle at 40% 50%, var(--cyan), var(--magenta) 70%, transparent 80%); }
  .project-body{ padding: 22px 24px 26px; }
  .project-body h3{ font-size:1.15rem; margin-bottom:8px; }
  .project-body p{ color: var(--text-dim); font-size:0.92rem; margin-bottom: 14px; }
  .project-links{ display:flex; gap:16px; font-family:'JetBrains Mono', monospace; font-size:0.82rem; }
  .project-links a{ color: var(--cyan); }
  .project-links a:hover{ text-decoration: underline; }

  /* ===== Contact ===== */
  .contact-box{
    border:1px solid var(--line); border-radius: 20px; padding: 60px 50px; background: var(--card);
    text-align:center; position:relative; overflow:hidden;
  }
  .contact-box::before{
    content:''; position:absolute; inset:-2px; z-index:-1; opacity:.5; filter: blur(60px);
    background: var(--gradient);
  }
  .contact-box h2{ font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom:16px; }
  .contact-box p{ color: var(--text-dim); max-width:480px; margin:0 auto 32px; }

  footer{ padding: 40px 0; text-align:center; color: var(--text-dim); font-size:0.85rem; border-top:1px solid var(--line); }
  footer .social{ display:flex; gap:20px; justify-content:center; margin-bottom:16px; }
  footer .social a{ color: var(--text-dim); transition:color .2s; }
  footer .social a:hover{ color: var(--cyan); }

  /* ===== Lightbox ===== */
  .lightbox{
    position: fixed; inset:0; z-index: 200;
    display:flex; align-items:center; justify-content:center;
    visibility: hidden; opacity:0;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .lightbox.open{
    visibility: visible; opacity:1;
    transition: opacity .3s ease, visibility 0s linear 0s;
  }
  .lightbox-backdrop{
    position:absolute; inset:0;
    background: rgba(5,7,15,0.86);
    backdrop-filter: blur(10px);
  }
  .lightbox-close{
    position:absolute; top:26px; right:32px; z-index:3;
    width:44px; height:44px; border-radius:50%;
    background: var(--card); border:1px solid var(--line); color: var(--text);
    font-size:1.1rem; cursor:pointer; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition: transform .25s ease, border-color .25s ease, opacity .25s ease .05s;
    opacity:0; transform: scale(.7) rotate(-45deg);
  }
  .lightbox.open .lightbox-close{ opacity:1; transform: scale(1) rotate(0deg); }
  .lightbox-close:hover{ border-color: var(--magenta); color: var(--magenta); transform: scale(1.08) rotate(90deg); }

  .lightbox-stage{
    position:relative; z-index:2;
    width: min(78vw, 460px); aspect-ratio: 4/5;
    transform: scale(.55) translateY(30px); opacity:0;
    transition: transform 0s, opacity 0s;
  }
  .lightbox.open .lightbox-stage{
    animation: pop-in .55s cubic-bezier(.2, 1.4, .3, 1) forwards;
  }
  .lightbox.closing .lightbox-stage{
    animation: pop-out .28s cubic-bezier(.4,0,1,1) forwards;
  }
  @keyframes pop-in{
    0%{ transform: scale(.5) translateY(40px); opacity:0; }
    60%{ transform: scale(1.03) translateY(-4px); opacity:1; }
    100%{ transform: scale(1) translateY(0); opacity:1; }
  }
  @keyframes pop-out{
    0%{ transform: scale(1) translateY(0); opacity:1; }
    100%{ transform: scale(.6) translateY(20px); opacity:0; }
  }

  .lightbox-frame-glow{
    position:absolute; inset:-16px; z-index:0; border-radius: 28px;
    filter: blur(38px); opacity:.6;
    background: var(--gradient); background-size:200% 200%;
    animation: shift 6s ease infinite;
  }
  .lightbox-stage img{
    position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
    border-radius:22px; border:1px solid var(--line);
    box-shadow: 0 30px 70px rgba(0,0,0,0.55);
  }

  @media (max-width:640px){
    .lightbox-stage{ width: 84vw; }
    .lightbox-close{ top:18px; right:18px; width:38px; height:38px; }
  }

  /* ===== Promo popup ===== */
  .promo-overlay{
    position: fixed; inset:0; z-index: 300;
    display:flex; align-items:center; justify-content:center;
    padding: 20px;
    visibility: hidden; opacity:0;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .promo-overlay.open{
    visibility: visible; opacity:1;
    transition: opacity .3s ease, visibility 0s linear 0s;
  }
  .promo-backdrop{
    position:absolute; inset:0;
    background: rgba(5,7,15,0.86);
    backdrop-filter: blur(10px);
  }
  .promo-card{
    position:relative; z-index:2;
    width: min(92vw, 420px);
    background: var(--card); border:1px solid var(--line); border-radius: 20px;
    padding: 36px 30px 30px;
    text-align:center; overflow:hidden;
    transform: scale(.55) translateY(30px); opacity:0;
    transition: transform 0s, opacity 0s;
  }
  .promo-overlay.open .promo-card{
    animation: pop-in .55s cubic-bezier(.2, 1.4, .3, 1) forwards;
  }
  .promo-overlay.closing .promo-card{
    animation: pop-out .28s cubic-bezier(.4,0,1,1) forwards;
  }
  .promo-card::before{
    content:''; position:absolute; inset:-2px; z-index:-1; opacity:.5; filter: blur(60px);
    background: var(--gradient);
  }
  .promo-close{
    position:absolute; top:14px; right:14px; z-index:3;
    width:36px; height:36px; border-radius:50%;
    background: var(--bg-soft); border:1px solid var(--line); color: var(--text);
    font-size:1rem; cursor:pointer; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition: transform .25s ease, border-color .25s ease, color .25s ease;
  }
  .promo-close:hover{ border-color: var(--magenta); color: var(--magenta); transform: scale(1.08) rotate(90deg); }
  .promo-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace; font-size:0.75rem; color: var(--amber);
    border:1px solid rgba(255,184,0,0.3); padding: 5px 12px; border-radius: 100px;
    margin-bottom: 18px;
  }
  .promo-eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
  .promo-card h3{ font-size: 1.4rem; margin-bottom: 12px; }
  .promo-card h3 .grad{
    background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .promo-card p{ color: var(--text-dim); font-size: 0.92rem; margin-bottom: 24px; }
  .promo-card .btn{ width:100%; justify-content:center; }
  .promo-fine{
    display:block; margin-top:14px; font-family:'JetBrains Mono', monospace;
    font-size: 0.72rem; color: var(--text-dim); opacity:.75;
  }
  .promo-dismiss{
    display:block; margin-top:16px; font-size:0.82rem; color: var(--text-dim);
    text-decoration: underline; cursor:pointer; background:none; border:none;
    font-family: 'Inter', sans-serif;
  }
  .promo-dismiss:hover{ color: var(--text); }

  @media (max-width:380px){
    .promo-card{ padding: 30px 20px 24px; }
  }

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

  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
  }

  /* ===== Responsive ===== */
  @media (max-width: 860px){
    .hero-grid{ grid-template-columns: 1fr; gap: 40px; }
    .hero-photo{ order:-1; max-width: 280px; }
    .about-grid{ grid-template-columns: 1fr; gap:36px; }
    .skill-cols{ grid-template-columns: 1fr 1fr; }
    .projects{ grid-template-columns: 1fr; }
  }
  @media (max-width: 640px){
    .wrap{ padding: 0 20px; }
    nav{ padding: 15px 20px; }
    .nav-links{
      position:fixed; top:0; right:0; height:100dvh; width: min(82vw, 320px);
      background: var(--bg-soft); flex-direction:column; justify-content:center; align-items:center;
      clip-path: inset(0 0 0 100%); transition: clip-path .3s ease; gap: 30px;
      border-left: 1px solid var(--line);
    }
    .nav-links.open{ clip-path: inset(0); }
    .burger{ display:flex; }
    .skill-cols{ grid-template-columns: 1fr; }
    .stat-grid{ grid-template-columns: 1fr 1fr; }
    .hero{ min-height:auto; padding: 56px 0 72px; }
    .hero-grid{ gap:32px; }
    .hero-photo{ max-width:240px; }
    .hero h1{ font-size:clamp(2.15rem, 11vw, 2.75rem); }
    .hero p.sub{ font-size:1rem; }
    .terminal{ margin-top:24px; font-size:0.88rem; white-space:nowrap; }
    .hero-cta{ margin-top:32px; gap:12px; }
    .btn{ justify-content:center; padding:13px 20px; }
    .head{ margin-bottom:32px; }
    .skills-track .skill-card{ width:min(260px, calc(100vw - 52px)); min-width:0; }
    .project-thumb{ height:175px; }
    .project-body{ padding:20px; }
    .contact-box{ padding: 40px 24px; }
    .contact-box .btn{ max-width:100%; overflow-wrap:anywhere; }
    section.pad{ padding: 70px 0; }
  }

  @media (max-width: 380px){
    .wrap{ padding:0 16px; }
    nav{ padding:14px 16px; }
    .stat-grid{ grid-template-columns:1fr; }
    .hero-cta{ flex-direction:column; }
    .hero-cta .btn{ width:100%; }
    .contact-box{ padding:32px 16px; }
    footer{ padding:32px 16px; }
  }