*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#07090d;color:#f5f7fb;font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
:root{--muted:#9aa4b2;--line:rgba(255,255,255,.10);--card:rgba(255,255,255,.045);--accent:#7c5cff;--accent2:#20d9ff}
a{color:inherit;text-decoration:none}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:50;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.13),transparent 68%);pointer-events:none;transform:translate(-50%,-50%);z-index:0}
.nav{position:fixed;top:0;left:0;right:0;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);background:rgba(7,9,13,.72);backdrop-filter:blur(18px);z-index:40}
.brand{font-weight:800;letter-spacing:.12em}.brand span,footer span{color:var(--accent2)}.nav-links{display:flex;gap:28px}.nav-links a,.nav-cta{font-size:14px;color:#c8d0db}.nav-links a:hover{color:white}.nav-cta{border:1px solid var(--line);padding:10px 15px;border-radius:999px}
main{position:relative;z-index:1}.hero{min-height:100vh;display:flex;align-items:center;padding:120px 6vw 80px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:7vw;align-items:center;max-width:1450px;margin:auto;width:100%}
.eyebrow,.kicker{font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:#aab4c1}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#54f59d;margin-right:8px;box-shadow:0 0 16px #54f59d}
h1{font-size:clamp(54px,7vw,108px);line-height:.95;letter-spacing:-.06em;margin:24px 0 28px;max-width:980px}h2{font-size:clamp(38px,5vw,72px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 24px}h3{font-size:24px;letter-spacing:-.025em;margin:10px 0 12px}
.gradient-text{background:linear-gradient(100deg,#fff 0%,#9da8ff 38%,#53e6ff 72%,#fff 100%);background-size:180% 100%;-webkit-background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:180% 0}}.hero-sub,.section-copy,.about-copy p{color:var(--muted);font-size:18px;line-height:1.75;max-width:760px}
.hero-actions{display:flex;gap:12px;margin:34px 0 44px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 19px;border-radius:12px;font-weight:600;font-size:14px}.primary{background:white;color:#080a0f}.primary:hover{transform:translateY(-2px)}.ghost{border:1px solid var(--line);color:#d8dfea}.ghost:hover{background:rgba(255,255,255,.05)}
.hero-stats{display:flex;gap:34px;border-top:1px solid var(--line);padding-top:24px}.hero-stats div{display:flex;flex-direction:column;gap:5px}.hero-stats strong{font-size:16px}.hero-stats span{font-size:12px;color:var(--muted)}
.terminal-card{border:1px solid rgba(255,255,255,.13);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;transform:perspective(1000px) rotateY(-4deg) rotateX(2deg)}
.terminal-top{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#7f8a98;font:11px "JetBrains Mono",monospace}.dots{display:flex;gap:7px}.dots span{width:8px;height:8px;background:#52606f;border-radius:50%}
.terminal-body{padding:24px;font:13px/1.8 "JetBrains Mono",monospace}.terminal-body p{margin:4px 0}.muted{color:#65717f}.ok{color:#a9ffd0}.accent{color:#66e5ff}.terminal-divider{height:1px;background:var(--line);margin:18px 0}.mini-graph{height:100px;display:flex;gap:8px;align-items:flex-end}.mini-graph span{flex:1;background:linear-gradient(180deg,#6c65ff,#21d8ff);border-radius:4px 4px 0 0}.terminal-body small{color:#66717f}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.18}.orb-a{width:480px;height:480px;background:#5d3cff;right:10%;top:9%}.orb-b{width:360px;height:360px;background:#00d4ff;left:-10%;bottom:2%}
.logo-strip{display:flex;gap:52px;justify-content:center;flex-wrap:wrap;padding:24px 5vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:#586270;font:11px "JetBrains Mono",monospace;letter-spacing:.18em}
.section{padding:120px 6vw;max-width:1500px;margin:auto}.section-head{max-width:980px;margin-bottom:55px}.timeline{border-top:1px solid var(--line)}.timeline-card{display:grid;grid-template-columns:130px 1fr;padding:34px 0;border-bottom:1px solid var(--line)}.timeline-year{font:12px "JetBrains Mono",monospace;color:#687381;padding-top:8px}.timeline-content{max-width:900px}.timeline-content p,.bento-card p,.project-card p{color:var(--muted);line-height:1.7}.chip-row{display:flex;gap:8px}.chip{display:inline-flex;padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:#aab4c1;font-size:11px}
.ai-section{max-width:none;background:linear-gradient(180deg,transparent,rgba(124,92,255,.04),transparent)}.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.bento-card{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:24px;min-height:240px;transition:.25s ease}.bento-card:hover{transform:translateY(-4px);border-color:rgba(114,145,255,.35);background:rgba(255,255,255,.06)}.bento-card.large{grid-column:span 2;grid-row:span 2;min-height:500px}.icon{width:40px;height:40px;border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;font:12px "JetBrains Mono",monospace;margin-bottom:35px}.card-label{font:11px "JetBrains Mono",monospace!important;text-transform:uppercase;letter-spacing:.1em;color:#707b89!important}.architecture{display:flex;align-items:center;gap:12px;margin-top:38px;flex-wrap:wrap}.architecture div{padding:12px;border-radius:10px;border:1px solid var(--line);font:11px "JetBrains Mono",monospace;color:#b4bfcc}.architecture span{color:#596473}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project-card{border:1px solid var(--line);border-radius:18px;padding:26px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));min-height:340px;display:flex;flex-direction:column}.project-top{display:flex;justify-content:space-between;align-items:center}.project-num{font:12px "JetBrains Mono",monospace;color:#626c78}.project-card h3{font-size:30px;margin-top:42px}.tech{margin-top:auto;color:#728091;font:11px "JetBrains Mono",monospace}
.about-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none}.about-grid{max-width:1500px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:8vw}.skill-cloud{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}.skill-cloud span{border:1px solid var(--line);padding:8px 11px;border-radius:8px;font-size:12px;color:#abb5c2}
.cta-section{margin:90px 6vw;padding:48px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(120deg,rgba(124,92,255,.10),rgba(32,217,255,.05));display:flex;align-items:end;justify-content:space-between;gap:30px}.cta-section h2{max-width:900px;margin-bottom:0}
footer{padding:35px 6vw 48px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#64707e;font-size:12px}footer div{font-weight:800;color:#fff;letter-spacing:.12em}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}
@media(max-width:980px){.nav-links{display:none}.hero-grid,.about-grid{grid-template-columns:1fr}.terminal-card{max-width:650px;transform:none}.bento{grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr}.hero{padding-top:130px}.hero-stats{flex-wrap:wrap}.cta-section{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.section{padding:85px 5vw}.hero{padding-left:5vw;padding-right:5vw}.bento{grid-template-columns:1fr}.bento-card.large{grid-column:auto;grid-row:auto;min-height:unset}.timeline-card{grid-template-columns:1fr;gap:10px}.hero-actions{flex-direction:column;align-items:stretch}.hero-stats{gap:20px}.cta-section{margin:60px 5vw;padding:28px}footer{flex-direction:column;align-items:flex-start;gap:10px}}

.nav-actions{display:flex;align-items:center;gap:10px}
.nav-linkedin{font-size:14px;color:#c8d0db;padding:10px 12px}
.nav-linkedin:hover{color:#fff}

.about-grid-photo{grid-template-columns:.78fr 1.22fr;align-items:center}
.about-photo-wrap{position:relative;max-width:520px}
.about-photo{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;object-position:center 40%;border-radius:22px;border:1px solid var(--line);box-shadow:0 35px 90px rgba(0,0,0,.45)}
.photo-caption{position:absolute;left:16px;bottom:16px;padding:10px 12px;border:1px solid rgba(255,255,255,.15);background:rgba(7,9,13,.7);backdrop-filter:blur(14px);border-radius:10px;font:10px "JetBrains Mono",monospace;color:#d3dae4;letter-spacing:.08em;text-transform:uppercase}
.about-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:28px 0}
.about-facts div{border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:12px;padding:15px}
.fact-label{display:block;font:10px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:#697584;margin-bottom:6px}
.about-facts strong{font-size:14px}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
footer a:hover{color:#fff}

@media(max-width:980px){
  .about-grid-photo{grid-template-columns:1fr}
  .about-photo-wrap{max-width:620px}
}
@media(max-width:650px){
  .nav-linkedin{display:none}
  .about-facts{grid-template-columns:1fr 1fr}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1}
}


/* === Motion system === */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:100;pointer-events:none;
  background:rgba(255,255,255,.03)
}
.scroll-progress span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 14px rgba(32,217,255,.55)
}

.hero-word-reveal{
  background-size:180% 100%;
  animation:shine 7s linear infinite, heroReveal 1.2s cubic-bezier(.2,.7,.2,1) .25s both
}
@keyframes heroReveal{
  from{filter:blur(10px);opacity:0;transform:translateY(12px)}
  to{filter:blur(0);opacity:1;transform:translateY(0)}
}

.terminal-cursor{display:inline-block;color:var(--accent2);animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.terminal-result{opacity:0;transform:translateY(4px);transition:.35s ease}
.terminal-result.show{opacity:1;transform:none}

.ai-pipeline{
  display:grid;
  grid-template-columns:minmax(120px,1fr) 54px minmax(120px,1fr) 54px minmax(110px,1fr) 54px minmax(110px,1fr);
  gap:0;
  align-items:center;
  margin-top:42px;
  width:100%;
}
.ai-pipeline .pipeline-node{
  position:relative;
  padding:14px 12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  text-align:center;
  min-height:70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:.3s ease;
  overflow:hidden;
}
.ai-pipeline .pipeline-node::after{
  content:"";
  position:absolute;inset:-1px;
  border-radius:12px;
  background:linear-gradient(120deg,transparent 25%,rgba(86,166,255,.18),transparent 70%);
  transform:translateX(-120%);
  animation:nodeScan 5.5s ease-in-out infinite;
  pointer-events:none;
}
.ai-pipeline .pipeline-node:nth-of-type(3)::after{animation-delay:1.1s}
.ai-pipeline .pipeline-node:nth-of-type(5)::after{animation-delay:2.2s}
.ai-pipeline .pipeline-node:nth-of-type(7)::after{animation-delay:3.3s}
@keyframes nodeScan{
  0%,60%{transform:translateX(-120%)}
  82%,100%{transform:translateX(120%)}
}
.ai-pipeline .pipeline-node:hover{
  border-color:rgba(91,162,255,.5);
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.22),0 0 24px rgba(79,117,255,.10)
}
.node-main{font:600 12px "JetBrains Mono",monospace;color:#dbe3ee}
.pipeline-node small{
  margin-top:7px;
  font:9px "JetBrains Mono",monospace;
  letter-spacing:.12em;
  color:#6f7d8e
}
.pipeline-link{
  position:relative;height:1px;background:linear-gradient(90deg,rgba(124,92,255,.25),rgba(32,217,255,.45));
  overflow:visible
}
.pipeline-link::after{
  content:"";
  position:absolute;right:-1px;top:50%;
  width:5px;height:5px;border-top:1px solid rgba(83,230,255,.75);border-right:1px solid rgba(83,230,255,.75);
  transform:translateY(-50%) rotate(45deg)
}
.packet{
  position:absolute;
  top:50%;left:-2px;
  width:7px;height:7px;border-radius:50%;
  transform:translateY(-50%);
  background:#bff4ff;
  box-shadow:0 0 6px #79dfff,0 0 14px rgba(32,217,255,.85);
  animation:packetMove 2.8s linear infinite;
}
.packet.delay{animation-delay:.9s}
.packet.delay-2{animation-delay:1.8s}
@keyframes packetMove{
  0%{left:-2px;opacity:0}
  12%{opacity:1}
  86%{opacity:1}
  100%{left:calc(100% - 5px);opacity:0}
}

.tilt-card{transform-style:preserve-3d;will-change:transform}
.tilt-card:hover{transition:transform .12s ease}

@media(max-width:900px){
  .ai-pipeline{
    grid-template-columns:1fr;
    gap:10px;
  }
  .pipeline-link{
    width:1px;height:30px;margin:auto;
    background:linear-gradient(180deg,rgba(124,92,255,.25),rgba(32,217,255,.45))
  }
  .pipeline-link::after{
    right:auto;left:50%;top:auto;bottom:-1px;
    transform:translateX(-50%) rotate(135deg)
  }
  .packet{
    left:50%;top:-2px;transform:translateX(-50%);
    animation:packetMoveVertical 2.3s linear infinite
  }
  @keyframes packetMoveVertical{
    0%{top:-2px;opacity:0}
    12%{opacity:1}
    86%{opacity:1}
    100%{top:calc(100% - 5px);opacity:0}
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .cursor-glow{display:none}
}


/* === Clean MCP pipeline layout fix === */
.bento-card.large{
  overflow:hidden;
}

.ai-pipeline{
  width:100%;
  max-width:100%;
  display:grid;
  grid-template-columns:
    minmax(0,1.15fr)
    minmax(34px,.32fr)
    minmax(0,1.15fr)
    minmax(34px,.32fr)
    minmax(0,1fr)
    minmax(34px,.32fr)
    minmax(0,1.05fr);
  gap:0;
  align-items:center;
  margin-top:36px;
  overflow:hidden;
}

.ai-pipeline .pipeline-node{
  min-width:0;
  width:100%;
  min-height:68px;
  padding:12px 8px;
  border-radius:11px;
}

.ai-pipeline .node-main{
  display:block;
  font-size:clamp(9px,.75vw,12px);
  line-height:1.3;
  white-space:normal;
  overflow-wrap:anywhere;
}

.ai-pipeline .pipeline-node small{
  font-size:clamp(7px,.52vw,9px);
  line-height:1.2;
  white-space:nowrap;
}

.ai-pipeline .pipeline-link{
  min-width:0;
  width:100%;
  overflow:hidden;
}

.ai-pipeline .packet{
  width:6px;
  height:6px;
}

/* Tone down movement so it stays premium */
.ai-pipeline .pipeline-node::after{
  opacity:.7;
  animation-duration:7s;
}

.packet{
  animation-duration:3.4s;
}

.tilt-card{
  transition:transform .18s ease,border-color .25s ease,background .25s ease;
}

/* Don't tilt the large architecture card; it contains precise layout */
.bento-card.large.tilt-card{
  transform:none !important;
}

@media(max-width:1200px){
  .ai-pipeline{
    grid-template-columns:
      minmax(0,1fr)
      28px
      minmax(0,1fr)
      28px
      minmax(0,.9fr)
      28px
      minmax(0,1fr);
  }

  .ai-pipeline .pipeline-node{
    padding:10px 6px;
  }

  .ai-pipeline .node-main{
    font-size:10px;
  }

  .ai-pipeline .pipeline-node small{
    font-size:7px;
  }
}

@media(max-width:980px){
  .ai-pipeline{
    grid-template-columns:1fr;
    gap:8px;
    overflow:visible;
  }

  .ai-pipeline .pipeline-node{
    min-height:58px;
  }

  .ai-pipeline .node-main{
    font-size:11px;
  }

  .ai-pipeline .pipeline-node small{
    font-size:8px;
  }

  .pipeline-link{
    width:1px !important;
    height:24px !important;
    margin:auto;
    overflow:visible !important;
  }
}