:root{
  --bg:#040211;
  --bg2:#0a0520;
  --accent1:#ff5cae;
  --accent2:#7c5cff;
  --accent3:#5ce1ff;
  --accent4:#ffd15c;
  --text:#f6f3ff;
  --text-dim:#aea0d6;
  --card:#150c2e88;
  --card-solid:#150c2ee6;
  --card-border:#ffffff1e;
  --radius:24px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 12% 8%, #ff5cae22, transparent 42%),
    radial-gradient(circle at 88% 15%, #5ce1ff1c, transparent 42%),
    radial-gradient(circle at 50% 95%, #7c5cff26, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3,.logo,.num,.eyebrow,.kicker{font-family:'Space Grotesk','Inter',sans-serif;}
.noise{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Persistent 3D background ---------- */
#bg3d{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0;
  pointer-events:none; mix-blend-mode:screen; opacity:.85;
}

/* ---------- Nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw;
  backdrop-filter:blur(16px);
  background:#04021155;
  border-bottom:1px solid #ffffff12;
}
.logo{
  font-weight:800; font-size:1.3rem; letter-spacing:.5px;
  background:linear-gradient(90deg,var(--accent1),var(--accent3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
nav{display:flex; gap:2rem;}
nav a{
  font-size:.9rem; color:var(--text-dim); font-weight:600;
  position:relative; transition:color .2s;
}
nav a:hover, nav a.active{color:var(--text);}
nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  transition:width .25s;
}
nav a:hover::after, nav a.active::after{width:100%;}
.nav-toggle{display:none;}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8rem 6vw 4rem; position:relative; z-index:2; overflow:hidden;
}
.hero.hero-sm{min-height:50vh; padding:9rem 6vw 3rem;}
.hero-inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  transform-style:preserve-3d; will-change:transform;}
.floating-shape{
  position:absolute; z-index:1; pointer-events:none; border-radius:26%;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  opacity:.18; filter:blur(.5px); transform-style:preserve-3d;
  animation:float3d 10s ease-in-out infinite;
  box-shadow:0 20px 60px -20px #ff5cae66;
}
.shape-a{width:110px; height:110px; top:16%; left:7%; animation-delay:0s;}
.shape-b{width:60px; height:60px; top:68%; left:11%; background:linear-gradient(135deg,var(--accent3),var(--accent2)); animation-delay:2.2s;}
.shape-c{width:80px; height:80px; top:20%; right:8%; background:linear-gradient(135deg,var(--accent4),var(--accent1)); animation-delay:4.1s;}
.shape-d{width:46px; height:46px; top:66%; right:13%; background:linear-gradient(135deg,var(--accent2),var(--accent3)); animation-delay:1.3s;}
@keyframes float3d{
  0%,100%{ transform:translateY(0) rotate3d(1,1,0,0deg);}
  50%{ transform:translateY(-30px) rotate3d(1,1,.3,180deg);}
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem 1.1rem; border-radius:999px;
  background:#ffffff0c; border:1px solid #ffffff22;
  font-size:.78rem; color:var(--text-dim); margin-bottom:2rem; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase;
}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--accent3); box-shadow:0 0 12px var(--accent3);}
h1{
  font-size:clamp(3rem, 8.5vw, 6.4rem); line-height:.98; font-weight:800; letter-spacing:-2.5px;
  max-width:17ch;
}
.hero-sm h1{font-size:clamp(2.2rem,5.5vw,3.8rem); max-width:22ch; letter-spacing:-1.5px;}
h1 .grad, .grad{
  background:linear-gradient(100deg, var(--accent1), var(--accent2) 45%, var(--accent3) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{
  margin-top:1.8rem; font-size:clamp(1.05rem,2vw,1.35rem); color:var(--text-dim);
  max-width:46ch; font-weight:400; line-height:1.6;
}
.hero-cta{display:flex; gap:1rem; margin-top:2.8rem; flex-wrap:wrap; justify-content:center;}
.btn{
  padding:1rem 2.1rem; border-radius:14px; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; border:none;
  transition:transform .2s ease, box-shadow .2s ease; font-family:inherit;
}
.btn-primary{
  background:linear-gradient(100deg, var(--accent1), var(--accent2));
  color:#050214;
  box-shadow:0 10px 30px -8px #ff5cae66;
}
.btn-primary:hover{transform:translateY(-3px) translateZ(10px); box-shadow:0 16px 34px -8px #ff5cae88;}
.btn-primary:active{transform:translateY(0) scale(.97);}
.btn-ghost{
  background:#ffffff0c; color:var(--text); border:1px solid #ffffff26;
}
.btn-ghost:hover{background:#ffffff1a; transform:translateY(-3px) translateZ(10px);}
.btn-ghost:active{transform:translateY(0) scale(.97);}

.scroll-hint{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  color:var(--text-dim); font-size:.72rem; letter-spacing:3px; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  animation:bob 2.2s ease-in-out infinite;
}
.scroll-hint span{width:1px; height:34px; background:linear-gradient(var(--accent3), transparent);}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,10px);}}

/* ---------- Sections shared ---------- */
section{position:relative; z-index:2; padding:8rem 6vw; max-width:1240px; margin:0 auto;}
section.narrow{max-width:820px;}
.section-head{margin-bottom:3.6rem; max-width:60ch; display:flex; align-items:flex-end; gap:1.2rem;}
.section-head .idx{
  font-family:'Space Grotesk',sans-serif; font-size:.85rem; font-weight:700; color:var(--text-dim);
  border:1px solid #ffffff26; border-radius:999px; padding:.3rem .8rem; letter-spacing:1px;
  flex-shrink:0; margin-bottom:.35rem;
}
.kicker{
  font-size:.8rem; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent3); margin-bottom:.8rem; display:block;
}
.section-head h2{font-size:clamp(2.1rem,4.6vw,3.2rem); font-weight:800; letter-spacing:-1px; line-height:1.05;}
.section-head p{color:var(--text-dim); margin-top:1rem; font-size:1.05rem;}

/* ---------- Bento base ---------- */
.bento{display:grid; gap:1.1rem;}
.bento-cell{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:1.7rem; backdrop-filter:blur(14px);
  position:relative; overflow:hidden;
  transform-style:preserve-3d; transition:transform .15s ease-out, box-shadow .3s, border-color .25s;
  will-change:transform;
}
.bento-cell::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%), #ffffff17, transparent 45%);
  transition:opacity .3s;
}
.bento-cell:hover::after{opacity:1;}
.bento-cell:hover{border-color:#ffffff3a; box-shadow:0 30px 60px -26px #7c5cff77;}

/* ---------- About (bento) ---------- */
.about-grid{grid-template-columns:repeat(6,1fr);}
.about-text{grid-column:span 6;}
@media (min-width:860px){ .about-text{grid-column:span 4;} }
.about-text p{color:var(--text-dim); font-size:1.08rem; line-height:1.85; margin-bottom:1.25rem;}
.about-text strong{color:var(--text);}
.metric-grid{grid-column:span 6; display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem;}
@media (min-width:860px){ .metric-grid{grid-column:span 2;} }
.metric-cell{--tint:#7c5cff44;}
.metric-cell::before{
  content:""; position:absolute; top:-30%; right:-30%; width:70%; height:70%; border-radius:50%;
  background:radial-gradient(circle, var(--tint), transparent 70%); filter:blur(14px); pointer-events:none;
}
.metric-cell .num{font-size:2rem; font-weight:800; display:block; position:relative;
  background:linear-gradient(90deg,var(--accent4),var(--accent1)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.metric-cell .label{color:var(--text-dim); font-size:.84rem; margin-top:.4rem; display:block; position:relative; line-height:1.4;}

/* ---------- Skills (bento) ---------- */
.skills-grid{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .skills-grid{grid-template-columns:repeat(2,1fr);} }
.skill-cell .icon{font-size:1.8rem; margin-bottom:.9rem; display:block; transform:translateZ(30px);}
.skill-cell h3{font-size:1.04rem; font-weight:700; margin-bottom:.45rem; transform:translateZ(20px);}
.skill-cell p{font-size:.86rem; color:var(--text-dim); line-height:1.55; transform:translateZ(10px);}

/* ---------- Projects (bento, one featured) ---------- */
.projects-grid{grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; grid-auto-rows:1fr;}
@media (max-width:900px){ .projects-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .projects-grid{grid-template-columns:1fr;} }
.project-cell{display:flex; flex-direction:column; gap:1.1rem;}
.project-cell.featured{grid-column:span 2; grid-row:span 2;}
@media (max-width:900px){ .project-cell.featured{grid-column:span 2; grid-row:span 1;} }
.project-cell::before{
  content:""; position:absolute; top:-40%; right:-30%; width:60%; height:60%; border-radius:50%;
  background:radial-gradient(circle, var(--tint,#ff5cae55), transparent 70%);
  filter:blur(10px); pointer-events:none;
}
.tag-row{display:flex; gap:.5rem; flex-wrap:wrap; transform:translateZ(24px); position:relative;}
.tag{
  font-size:.72rem; font-weight:700; padding:.32rem .75rem; border-radius:999px;
  background:#ffffff12; color:var(--text-dim); border:1px solid #ffffff1c;
}
.project-cell h3{font-size:1.35rem; font-weight:800; transform:translateZ(30px); position:relative;}
.featured h3{font-size:1.7rem;}
.project-cell p{color:var(--text-dim); font-size:.95rem; line-height:1.65; transform:translateZ(16px); position:relative;}
.stack{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; padding-top:.6rem; transform:translateZ(12px); position:relative;}
.stack span{
  font-size:.72rem; color:var(--text); background:#ffffff0d; padding:.28rem .6rem; border-radius:8px;
  border:1px solid #ffffff16;
}
.blog-meta{display:flex; gap:.8rem; align-items:center; font-size:.78rem; color:var(--text-dim); transform:translateZ(18px); position:relative;}
.blog-meta .dot-sep{width:4px; height:4px; border-radius:50%; background:var(--text-dim);}
.read-more{margin-top:auto; padding-top:.6rem; font-weight:700; color:var(--accent3); font-size:.88rem; transform:translateZ(20px); display:inline-flex; align-items:center; gap:.4rem; position:relative;}

/* ---------- Work ---------- */
.work-card{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:2.3rem; display:grid; grid-template-columns:auto 1fr; gap:1.7rem; align-items:start;
  position:relative; backdrop-filter:blur(14px); transform-style:preserve-3d; transition:transform .15s ease-out, box-shadow .3s;
  will-change:transform;
}
.work-card:hover{box-shadow:0 30px 60px -22px #5ce1ff55;}
.work-card .badge{
  width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent2),var(--accent3)); font-size:1.5rem; flex-shrink:0;
  transform:translateZ(30px); box-shadow:0 14px 24px -8px #5ce1ff77;
}
.work-card h3{font-size:1.3rem; font-weight:800; margin-bottom:.6rem;}
.work-card p{color:var(--text-dim); line-height:1.75; font-size:.98rem;}
.work-card ul{margin-top:1rem; padding-left:1.1rem; color:var(--text-dim); font-size:.94rem; line-height:1.9;}

/* ---------- Article (blog post) ---------- */
.article-body{color:var(--text-dim); font-size:1.1rem; line-height:1.9;}
.article-body h2{color:var(--text); font-size:1.55rem; margin:2.5rem 0 1.1rem; font-weight:800; letter-spacing:-.5px;}
.article-body p{margin-bottom:1.35rem;}
.article-body strong{color:var(--text);}
.article-body blockquote{
  border-left:3px solid var(--accent2); padding:.5rem 0 .5rem 1.5rem; margin:1.8rem 0;
  color:var(--text); font-style:italic; background:#ffffff08; border-radius:0 12px 12px 0;
}
.article-body ul{margin:1rem 0 1.4rem 1.3rem;}
.article-body li{margin-bottom:.5rem;}
.article-meta{display:flex; gap:1rem; align-items:center; color:var(--text-dim); font-size:.88rem; margin-bottom:1rem; flex-wrap:wrap;}
.article-meta .dot-sep{width:4px; height:4px; border-radius:50%; background:var(--text-dim);}
.back-link{display:inline-flex; align-items:center; gap:.4rem; color:var(--accent3); font-weight:700; font-size:.9rem; margin-bottom:2rem;}
.back-link:hover{text-decoration:underline;}

/* ---------- Comments ---------- */
.comments-wrap{margin-top:4rem; border-top:1px solid #ffffff14; padding-top:2.6rem;}
.comments-wrap h3{font-size:1.35rem; font-weight:800; margin-bottom:1.6rem;}
.comment-form{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:1.7rem; display:grid; gap:.9rem; margin-bottom:2.2rem; backdrop-filter:blur(14px);
}
.consent-row{
  display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color:var(--text-dim); line-height:1.5;
}
.consent-row input[type="checkbox"]{
  width:auto; margin-top:.2rem; flex-shrink:0; accent-color:var(--accent2); cursor:pointer;
}
.consent-row a{color:var(--accent3); text-decoration:underline;}
footer a{color:var(--text-dim); text-decoration:underline;}
footer a:hover{color:var(--text);}
.comment-form input, .comment-form textarea{
  width:100%; padding:.85rem 1rem; border-radius:12px; border:1px solid #ffffff22;
  background:#04021166; color:var(--text); font-family:inherit; font-size:.95rem; resize:vertical;
}
.comment-form input:focus, .comment-form textarea:focus{outline:2px solid var(--accent2); border-color:transparent;}
.comment-form textarea{min-height:110px;}
.comment-form .cf-row{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;}
.comment-note{font-size:.8rem; color:var(--text-dim);}
.comment-status{font-size:.85rem; margin-top:.4rem; min-height:1.2em;}
.comment-status.ok{color:var(--accent3);}
.comment-status.err{color:var(--accent1);}
.comment-list{display:grid; gap:1.1rem;}
.comment-item{
  background:#ffffff08; border:1px solid #ffffff14; border-radius:16px; padding:1.25rem 1.5rem;
}
.comment-item .c-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem;}
.comment-item .c-author{font-weight:700; font-size:.92rem;}
.comment-item .c-date{font-size:.78rem; color:var(--text-dim);}
.comment-item .c-text{color:var(--text-dim); font-size:.92rem; line-height:1.6;}
.comment-empty{color:var(--text-dim); font-size:.9rem;}

/* ---------- Contact ---------- */
.contact-wrap{
  background:linear-gradient(120deg,#170a38,#1f0f42);
  border:1px solid #ffffff1e; border-radius:32px; padding:4.2rem 3rem; text-align:center;
  position:relative; overflow:hidden;
}
.contact-wrap::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 20%, #ff5cae33, transparent 50%), radial-gradient(circle at 80% 80%, #5ce1ff2e, transparent 50%);
  pointer-events:none;
}
.contact-wrap h2{font-size:clamp(1.9rem,4.2vw,2.7rem); font-weight:800; margin-bottom:1rem; position:relative; letter-spacing:-1px;}
.contact-wrap p{color:var(--text-dim); max-width:44ch; margin:0 auto 2.2rem; position:relative;}
.contact-links{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative;}

footer{
  text-align:center; padding:2.8rem 6vw 3rem; color:var(--text-dim); font-size:.85rem; position:relative; z-index:2;
}
footer .heart{color:var(--accent1);}

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

@media (max-width:820px){
  nav{display:none;}
  .metric-grid{grid-template-columns:repeat(2,1fr);}
  .work-card{grid-template-columns:1fr;}
  .contact-wrap{padding:2.8rem 1.6rem;}
}