:root {
    --bg:        #0a0a0c;
    --bg-card:   #12121a;
    --bg-glass:  rgba(18, 18, 26, 0.6);
    --text:      #e8e8ec;
    --text-dim:  #6b6b7a;
    --accent:    #c8f070;
    --accent-dim:rgba(200,240,112,.15);
    --red:       #ff6b6b;
    --border:    rgba(255,255,255,.06);
    --radius:    14px;
  }

  *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body {
    font-family:'Inter', sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  a { color:inherit; text-decoration:none; }
  img { max-width:100%; }

  body::before {
    content:'';
    position:fixed;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:999;
  }

  nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 48px;
    background:rgba(10,10,12,.6);
    backdrop-filter:blur(18px) saturate(1.4);
    border-bottom:1px solid var(--border);
    transition:padding .3s;
  }
  nav.scrolled { padding:14px 48px; }
  .nav-logo {
    font-family:'JetBrains Mono', monospace;
    font-size:15px; font-weight:400;
    letter-spacing:-.5px;
  }
  .nav-logo span { color:var(--accent); }
  .nav-links { display:flex; gap:36px; }
  .nav-links a {
    font-size:13px; font-weight:400; color:var(--text-dim);
    letter-spacing:.5px; text-transform:uppercase;
    position:relative; transition:color .3s;
  }
  .nav-links a::after {
    content:''; position:absolute; bottom:-4px; left:0;
    width:0; height:1px; background:var(--accent);
    transition:width .3s;
  }
  .nav-links a:hover { color:var(--text); }
  .nav-links a:hover::after { width:100%; }

  .hero {
    min-height:100vh;
    display:flex; flex-direction:column;
    justify-content:flex-end;
    padding:0 48px 100px;
    position:relative;
    overflow:hidden;
  }

  .orb {
    position:absolute; border-radius:50%;
    filter:blur(120px);
    opacity:.45;
    animation:drift 12s ease-in-out infinite alternate;
  }
  .orb-1 { width:600px; height:600px; background:#c8f070; top:-200px; right:-150px; animation-delay:0s; opacity:.2; }
  .orb-2 { width:500px; height:500px; background:#4a90d9; bottom:-100px; left:-200px; animation-delay:-4s; opacity:.18; }
  .orb-3 { width:300px; height:300px; background:#c8f070; bottom:100px; right:30%; animation-delay:-8s; opacity:.08; }

  @keyframes drift {
    to { transform:translate(60px, -40px) scale(1.1); }
  }

  .hero-grid {
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:60px 60px;
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 100%, black 20%, transparent 80%);
    mask-image:radial-gradient(ellipse 80% 60% at 50% 100%, black 20%, transparent 80%);
  }

  .hero-content { position:relative; z-index:2; max-width:820px; }

  .hero-badge {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--accent-dim);
    border:1px solid rgba(200,240,112,.25);
    border-radius:40px;
    padding:7px 16px 7px 10px;
    margin-bottom:40px;
    animation:fadeUp .8s .2s both;
  }
  .hero-badge .dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 8px var(--accent);
    animation:pulse 2s infinite;
  }
  .hero-badge span {
    font-family:'JetBrains Mono', monospace;
    font-size:12px; color:var(--accent); letter-spacing:.3px;
  }
  @keyframes pulse {
    0%,100% { opacity:1; }
    50%      { opacity:.4; }
  }

  .hero h1 {
    font-family:'Playfair Display', Georgia, serif;
    font-size:clamp(52px, 8vw, 96px);
    font-weight:700;
    line-height:1.05;
    letter-spacing:-2px;
    color:#fff;
    animation:fadeUp .9s .35s both;
  }
  .hero h1 em {
    font-style:italic;
    color:var(--accent);
    position:relative;
  }

  .hero-sub {
    margin-top:32px;
    font-size:17px; color:var(--text-dim);
    max-width:520px; line-height:1.7;
    font-weight:300;
    animation:fadeUp .9s .5s both;
  }

  .hero-cta {
    margin-top:48px;
    display:flex; gap:16px; align-items:center;
    animation:fadeUp .9s .65s both;
  }
  .btn-primary {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--accent); color:#0a0a0c;
    padding:14px 32px; border-radius:40px;
    font-size:14px; font-weight:500; letter-spacing:.3px;
    transition:box-shadow .3s, transform .2s;
    cursor:pointer;
  }
  .btn-primary:hover {
    box-shadow:0 0 32px rgba(200,240,112,.35);
    transform:translateY(-1px);
  }
  .btn-secondary {
    display:inline-flex; align-items:center; gap:8px;
    color:var(--text-dim);
    padding:14px 24px; border-radius:40px;
    font-size:14px; font-weight:400;
    border:1px solid var(--border);
    transition:border-color .3s, color .3s;
    cursor:pointer;
  }
  .btn-secondary:hover { border-color:var(--accent); color:var(--text); }

  .hero-scroll-hint {
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
    color:var(--text-dim); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
    animation:fadeUp 1s .9s both;
  }
  .hero-scroll-hint .line {
    width:1px; height:32px; background:linear-gradient(to bottom, var(--accent), transparent);
    animation:scrollPulse 2s infinite;
  }
  @keyframes scrollPulse {
    0%,100% { opacity:1; transform:scaleY(1); }
    50%     { opacity:.3; transform:scaleY(.6); }
  }

  @keyframes fadeUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
  }

  section { padding:120px 48px; }
  .section-label {
    display:inline-flex; align-items:center; gap:12px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px; color:var(--accent); letter-spacing:1.5px;
    text-transform:uppercase; margin-bottom:20px;
  }
  .section-label::before {
    content:''; width:28px; height:1px; background:var(--accent);
  }
  .section-title {
    font-family:'Playfair Display', Georgia, serif;
    font-size:clamp(34px, 5vw, 52px);
    font-weight:700; color:#fff;
    letter-spacing:-1px; line-height:1.15;
    max-width:600px;
  }
  .section-title em { font-style:italic; color:var(--accent); }

  #about { background:linear-gradient(180deg, var(--bg) 0%, #0e0e14 100%); }
  .about-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:80px;
    align-items:center; margin-top:72px; max-width:1100px;
  }
  .about-text p {
    color:var(--text-dim); font-size:16px; line-height:1.9;
    margin-bottom:20px; font-weight:300;
  }
  .about-text p strong { color:var(--text); font-weight:500; }
  .about-stats {
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
    margin-top:40px;
  }
  .stat-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px 24px;
    transition:border-color .3s;
  }
  .stat-card:hover { border-color:rgba(200,240,112,.3); }
  .stat-num {
    font-family:'Playfair Display', serif;
    font-size:32px; font-weight:700; color:#fff;
  }
  .stat-num span { color:var(--accent); }
  .stat-label { font-size:12px; color:var(--text-dim); margin-top:4px; letter-spacing:.3px; }

  .about-visual {
    position:relative; display:flex; justify-content:center; align-items:center;
  }
  .avatar-ring {
    width:340px; height:340px; border-radius:50%;
    background:conic-gradient(var(--accent), #4a90d9, var(--accent));
    padding:3px;
    animation:spin 20s linear infinite;
  }
  @keyframes spin { to { transform:rotate(360deg); } }
  .avatar-inner {
    width:100%; height:100%; border-radius:50%;
    background:var(--bg-card);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .avatar-placeholder {
    width:100%; height:100%; border-radius:50%;
    background:linear-gradient(135deg, #1a1a2e, #16213e);
    display:flex; align-items:center; justify-content:center;
  }
  .avatar-placeholder .initials {
    font-family:'Playfair Display', serif;
    font-size:72px; font-weight:700; color:#fff; opacity:.9;
  }
  .floating-tag {
    position:absolute; background:var(--bg-card);
    border:1px solid var(--border); border-radius:40px;
    padding:10px 18px; font-size:13px; color:var(--text);
    display:flex; align-items:center; gap:8px;
    box-shadow:0 8px 32px rgba(0,0,0,.3);
    white-space:nowrap;
  }
  .floating-tag .icon { font-size:16px; }
  .tag-1 { top:10%; left:-10%; animation:float1 6s ease-in-out infinite; }
  .tag-2 { bottom:12%; right:-5%; animation:float2 7s ease-in-out infinite; }
  .tag-3 { top:60%; left:-15%; animation:float3 5s ease-in-out infinite; }
  @keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
  @keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
  @keyframes float3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

  #skills { background:#0e0e14; }
  .skills-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:20px; margin-top:64px; max-width:1100px;
  }
  .skill-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:32px 28px;
    transition:transform .3s, border-color .3s, box-shadow .3s;
    cursor:default;
    position:relative; overflow:hidden;
  }
  .skill-card::before {
    content:''; position:absolute; top:0; left:0; right:0;
    height:2px; background:var(--accent); opacity:0;
    transition:opacity .3s;
  }
  .skill-card:hover { transform:translateY(-4px); border-color:rgba(200,240,112,.25); box-shadow:0 12px 40px rgba(30, 114, 34, 0.7) }
  .skill-card:hover::before { opacity:1; }
  .skill-icon { font-size:28px; margin-bottom:16px; }
  .skill-card h3 { font-size:17px; font-weight:500; color:#fff; margin-bottom:8px; }
  .skill-card p { font-size:13px; color:var(--text-dim); line-height:1.6; }
  .skill-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
  .skill-tag {
    background:rgba(200,240,112,.08); border:1px solid rgba(200,240,112,.15);
    color:var(--accent); font-size:11px; padding:4px 10px;
    border-radius:20px; font-family:'JetBrains Mono', monospace;
  }


  #projects { background:var(--bg); }
  .projects-list { margin-top:72px; max-width:900px; }
  .project-item {
    display:grid; grid-template-columns:60px 1fr auto;
    gap:24px; align-items:start;
    padding:36px 0;
    border-bottom:1px solid var(--border);
    transition:opacity .3s;
    cursor:pointer;
  }
  .project-item:first-child { padding-top:0; }
  .project-item:hover { opacity:.7; }
  .project-num {
    font-family:'JetBrains Mono', monospace;
    font-size:13px; color:var(--text-dim); padding-top:2px;
  }
  .project-info h3 {
    font-family:'Playfair Display', serif;
    font-size:22px; font-weight:700; color:#fff;
    margin-bottom:6px;
  }
  .project-info p { font-size:14px; color:var(--text-dim); max-width:560px; }
  .project-meta {
    display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;
  }
  .project-tag {
    font-size:11px; background:rgba(255,255,255,.05);
    color:var(--text-dim); padding:4px 10px; border-radius:14px;
    border:1px solid var(--border);
  }
  .project-arrow {
    font-size:20px; color:var(--text-dim);
    transition:color .3s, transform .3s;
    padding-top:2px;
  }
  .project-item:hover .project-arrow { color:var(--accent); transform:translate(3px,-3px); }

  /* ─── WRITING ─── */
  #writing { background:#0e0e14; }
  .writing-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:24px; margin-top:64px; max-width:1100px;
  }
  .write-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
    transition:transform .3s, border-color .3s;
    cursor:pointer;
  }
  .write-card:hover { transform:translateY(-4px); border-color:rgba(200,240,112,.25); }
  .write-card-img {
    height:170px;
    display:flex; align-items:flex-end; padding:20px;
    position:relative; overflow:hidden;
  }
  .write-card-img-bg {
    position:absolute; inset:0;
    transition:transform .5s;
  }
  .write-card:hover .write-card-img-bg { transform:scale(1.05); }
  .img-1 { background:linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }
  .img-2 { background:linear-gradient(135deg, #2d132c 0%, #3b1f3f 50%, #1b0a1e 100%); }
  .img-3 { background:linear-gradient(135deg, #0a1628 0%, #1a2d4a 50%, #0d1f3c 100%); }
  .write-card-img .cat {
    position:relative; z-index:1;
    font-size:11px; font-family:'JetBrains Mono', monospace;
    color:var(--accent); letter-spacing:1px; text-transform:uppercase;
    background:var(--accent-dim); border:1px solid rgba(200,240,112,.2);
    padding:4px 10px; border-radius:14px;
  }
  .write-card-body { padding:24px; }
  .write-card-body h3 { font-size:17px; font-weight:500; color:#fff; margin-bottom:8px; line-height:1.4; }
  .write-card-body p { font-size:13px; color:var(--text-dim); line-height:1.6; }
  .write-card-footer {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:16px;
  }
  .write-date { font-size:12px; color:var(--text-dim); font-family:'JetBrains Mono', monospace; }
  .write-read { font-size:12px; color:var(--accent); }

  #contact {
    background:var(--bg);
    text-align:center;
    position:relative; overflow:hidden;
  }
  #contact .orb { filter:blur(140px); }
  .contact-inner { position:relative; z-index:2; max-width:640px; margin:0 auto; }
  .contact-inner .section-label { justify-content:center; }
  .contact-inner .section-label::before { display:none; }
  .contact-inner .section-title { max-width:100%; text-align:center; }
  .contact-desc {
    margin-top:20px; color:var(--text-dim); font-size:16px; font-weight:300;
  }
  .contact-links {
    display:flex; justify-content:center; gap:16px; margin-top:48px; flex-wrap:wrap;
  }
  .contact-btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 28px; border-radius:40px;
    font-size:14px; font-weight:400;
    border:1px solid var(--border);
    background:var(--bg-card);
    color:var(--text);
    transition:border-color .3s, transform .2s, box-shadow .3s;
    cursor:pointer;
  }
  .contact-btn:hover {
    border-color:var(--accent);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.3);
  }
  .contact-btn .cb-icon { font-size:16px; }

  footer {
    padding:40px 48px;
    border-top:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center;
  }
  footer .foot-left {
    font-family:'JetBrains Mono', monospace;
    font-size:12px; color:var(--text-dim);
  }
  footer .foot-left span { color:var(--accent); }
  footer .foot-right { font-size:12px; color:var(--text-dim); }

  .reveal {
    opacity:0; transform:translateY(30px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  }
  .reveal.visible { opacity:1; transform:translateY(0); }

  @media (max-width:768px) {
    nav { padding:18px 24px; }
    nav.scrolled { padding:12px 24px; }
    .nav-links { gap:20px; }
    .hero { padding:0 24px 80px; }
    section { padding:80px 24px; }
    .about-grid { grid-template-columns:1fr; gap:48px; }
    .avatar-ring { width:260px; height:260px; }
    .project-item { grid-template-columns:1fr; gap:8px; }
    .project-num { display:none; }
    footer { flex-direction:column; gap:12px; text-align:center; }
  }