/* =========================
   Basic setup
========================= */
:root{
  --bg: #04070b;
  --fg: #e9f0ff;
  --muted: rgba(233,240,255,.72);
  --line: rgba(90, 160, 255, .35);
  --accent: #36b6ff;
  --accent2: #0b5cff;
  --card: rgba(15, 20, 28, .62);
  --shadow: rgba(54,182,255,.28);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg);
  background: radial-gradient(1200px 700px at 50% 20%, rgba(54,182,255,.10), transparent 60%),
              radial-gradient(800px 500px at 10% 10%, rgba(11,92,255,.12), transparent 55%),
              var(--bg);
  overflow-x: hidden;
}

/* nicer scroll */
html{ scroll-behavior: smooth; }
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,.02); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(54,182,255,.65), rgba(54,182,255,.18));
  border-radius: 999px;
}
@supports (scrollbar-color: auto){
  *{ scrollbar-color: rgba(54,182,255,.45) rgba(255,255,255,.03); scrollbar-width: thin; }
}

/* =========================
   Layout: snap panels
========================= */
.snap{
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.panel{
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  padding: clamp(22px, 4vw, 54px);
  display: grid;
  align-items: center;
  justify-items: center;
}

.decor-dot{
  position: absolute;
  left: 34px;
  top: 90px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 18px rgba(255,255,255,.25);
  opacity: .9;
}

/* =========================
   Floating nav
========================= */
.floating-nav .pill{
  position: fixed;
  z-index: 30;
  padding: 10px 14px;
  border-radius: 999px;
  color: rgba(233,240,255,.95);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .3px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(54,182,255,.25);
  box-shadow: 0 0 22px rgba(54,182,255,.14);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.floating-nav .pill:hover{
  transform: translateY(-2px);
  border-color: rgba(54,182,255,.55);
  background: rgba(255,255,255,.06);
}
.pill-left{ left: 34px; top: 28px; }
.pill-right{ right: 34px; bottom: 28px; top: auto; transform: none; }
.pill-right:hover{ transform: translateY(-2px); }

/* =========================
   Ribbon
========================= */
.ribbon{
  position: fixed;
  z-index: 30;
  top: 18px;
  right: -56px;
  transform: rotate(45deg);
  width: 200px;
  text-decoration: none;
}
.ribbon span{
  display: block;
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  color: rgba(233,240,255,.95);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(54,182,255,.22);
  box-shadow: 0 0 24px rgba(54,182,255,.14);
  backdrop-filter: blur(10px);
}


/* show these only while hero is in view */
.hero-only{
  opacity: 1;
  transition: opacity .22s ease, transform .22s ease;
}
body:not(.in-hero) .hero-only{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

/* =========================
   HERO
========================= */
.hero{
  place-items: center;
}

.hero-glow{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(350px 220px at 50% 38%, rgba(54,182,255,.22), transparent 60%),
              radial-gradient(520px 320px at 50% 45%, rgba(11,92,255,.14), transparent 68%);
  filter: blur(0px);
  opacity: .95;
}

.hero-inner{
  text-align: center;
  z-index: 2;
  transform: translateY(-18px);
}

.kicker{
  margin: 0 0 10px 0;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 600;
  color: rgba(233,240,255,.92);
  text-shadow: 0 0 18px rgba(54,182,255,.12);
}

.name{
  margin: 0;
  font-size: clamp(44px, 7.8vw, 86px);
  line-height: 1.0;
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(54,182,255,.26),
               0 0 80px rgba(54,182,255,.10);
  user-select: none;
  cursor: pointer;
}

.name .ch{
  display: inline-block;
  transform: translateY(0);
  will-change: transform;
}

.name.bounce .ch{
  animation: hop 520ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: calc(var(--i) * 28ms);
}

@keyframes hop{
  0%{ transform: translateY(0); }
  35%{ transform: translateY(-18px); }
  70%{ transform: translateY(3px); }
  100%{ transform: translateY(0); }
}

.sub{
  margin: 14px 0 24px 0;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 600;
  color: rgba(233,240,255,.88);
  letter-spacing: .4px;
}

.social{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.social-btn{
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: rgba(233,240,255,.88);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(54,182,255,.26);
  box-shadow: 0 0 22px rgba(54,182,255,.14);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  cursor: pointer;
}
.social-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(54,182,255,.55);
  background: rgba(255,255,255,.06);
}

/* =========================
   Big titles
========================= */
.big-title{
  line-height: .88;
  letter-spacing: 2px;
}
.word-solid{
  font-size: clamp(46px, 7.6vw, 92px);
  font-weight: 800;
  color: rgba(233,240,255,.96);
  text-shadow: 0 0 22px rgba(54,182,255,.10);
}
.word-stroke{
  font-size: clamp(46px, 7.6vw, 92px);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 2px rgba(54,182,255,.65);
  text-shadow: 0 0 28px rgba(54,182,255,.10);
  transform: translateX(12px);
}

/* =========================
   ABOUT layout
========================= */
.about-grid{
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.about-content{
  padding-top: 26px;
}

.about-card{
  background: var(--card);
  border: 1px solid rgba(54,182,255,.18);
  border-radius: 16px;
  padding: 18px 18px;
  box-shadow: 0 0 34px rgba(54,182,255,.10);
  backdrop-filter: blur(10px);
}


/* About: photo slot */
.about-card--split{
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  align-items: start;
}
.about-photo{
  margin: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.about-photo img{
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(54,182,255,.22);
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 26px rgba(54,182,255,.10);
}
.about-photo-hint{
  margin: 0;
  font-size: 11px;
  color: rgba(233,240,255,.55);
  text-align: center;
}
.about-text{ padding-top: 2px; }

@media (max-width: 680px){
  .about-card--split{ grid-template-columns: 1fr; }
  .about-photo{ justify-items: start; }
  .about-photo img{ width: 160px; height: 160px; }
}

.about-intro{
  margin: 0 0 14px 0;
  color: rgba(233,240,255,.82);
  font-size: 14px;
  line-height: 1.6;
}
.about-intro:last-child{ margin-bottom: 0; }
.accent{ color: rgba(54,182,255,.92); font-weight: 600; }

.timeline{
  margin-top: 26px;
  border-left: 2px solid rgba(54,182,255,.18);
  padding-left: 18px;
}

.tl-block{ margin: 18px 0; position: relative; }
.tl-block::before{
  content: "";
  position: absolute;
  left: -28px;
  top: 8px;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(54,182,255,.85);
  box-shadow: 0 0 18px rgba(54,182,255,.25);
}

.tl-title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(233,240,255,.92);
  margin-bottom: 6px;
}

.tl-role{
  font-size: 15px;
  font-weight: 700;
  color: rgba(233,240,255,.96);
  margin-bottom: 2px;
}
.tl-meta{
  font-size: 11px;
  color: rgba(233,240,255,.68);
  margin-bottom: 8px;
}
.handle{
  color: rgba(54,182,255,.92);
  font-weight: 600;
}

.handle-link{
  color: rgba(54,182,255,.92);
  font-weight: 600;
  text-decoration: none;
}
.handle-link:hover{
  text-decoration: underline;
  text-decoration-color: rgba(54,182,255,.35);
  text-underline-offset: 3px;
}
.handle-link:focus-visible{
  outline: 2px solid rgba(54,182,255,.35);
  outline-offset: 3px;
  border-radius: 6px;
}

.timeline ul{
  margin: 0;
  padding-left: 16px;
  color: rgba(233,240,255,.78);
  font-size: 13px;
  line-height: 1.55;
}

.mid-dot{
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 22px rgba(255,255,255,.18);
}

/* =========================
   TECH layout
========================= */
.tech-grid{
  grid-template-areas: "left right";
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(340px, 540px) max-content;
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  justify-content: center;
}

.tech-left{ grid-area: left; }
.tech-right{ grid-area: right; }

.tech-note{
  margin: 12px 0 0 0;
  max-width: 260px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(233,240,255,.72);
}

.mini-label{
  margin: 0 0 10px 0;
  font-size: 11px;
  color: rgba(233,240,255,.55);
  letter-spacing: .5px;
}

.icon-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.tech-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(54,182,255,.22);
  background: rgba(255,255,255,.03);
  color: rgba(233,240,255,.92);
  cursor: pointer;
  box-shadow: 0 0 24px rgba(54,182,255,.12);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tech-icon:hover{
  transform: translateY(-2px);
  border-color: rgba(54,182,255,.55);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 34px rgba(54,182,255,.20);
}
.brand-icon{
  width: 26px;
  height: 26px;
  display: block;
}

/* brand-tinted tiles */
.tech-icon[data-brand="node"]{ background: rgba(51,153,51,.12); border-color: rgba(51,153,51,.35); }
.tech-icon[data-brand="react"]{ background: rgba(97,218,251,.10); border-color: rgba(97,218,251,.35); }
.tech-icon[data-brand="mongo"]{ background: rgba(71,162,72,.11); border-color: rgba(71,162,72,.35); }
.tech-icon[data-brand="ts"]{ background: rgba(49,120,198,.12); border-color: rgba(49,120,198,.40); }
.tech-icon[data-brand="express"]{ background: rgba(255,255,255,.04); border-color: rgba(233,240,255,.18); }

.tech-icon[data-brand="mui"]{ background: rgba(0,127,255,.12); border-color: rgba(0,127,255,.40); }
.tech-icon[data-brand="tailwind"]{ background: rgba(6,182,212,.12); border-color: rgba(6,182,212,.40); }
.tech-icon[data-brand="sass"]{ background: rgba(204,102,153,.12); border-color: rgba(204,102,153,.38); }
.tech-icon[data-brand="figma"]{ background: rgba(242,78,30,.10); border-color: rgba(242,78,30,.36); }

.tech-icon[data-brand="postgres"]{ background: rgba(65,105,225,.10); border-color: rgba(65,105,225,.36); }
.tech-icon[data-brand="mysql"]{ background: rgba(68,121,161,.10); border-color: rgba(68,121,161,.36); }
.tech-icon[data-brand="sqlite"]{ background: rgba(0,150,136,.10); border-color: rgba(0,150,136,.34); }
.tech-icon[data-brand="redis"]{ background: rgba(220,56,45,.10); border-color: rgba(220,56,45,.36); }

.tech-icon[data-brand="js"]{ background: rgba(240,219,79,.10); border-color: rgba(240,219,79,.36); }
.tech-icon[data-brand="python"]{ background: rgba(53,114,165,.10); border-color: rgba(53,114,165,.36); }
.tech-icon[data-brand="java"]{ background: rgba(244,67,54,.08); border-color: rgba(244,67,54,.32); }
.tech-icon[data-brand="csharp"]{ background: rgba(115,40,150,.10); border-color: rgba(115,40,150,.34); }
.tech-icon[data-brand="php"]{ background: rgba(119,123,179,.10); border-color: rgba(119,123,179,.34); }
.tech-icon[data-brand="wordpress"]{ background: rgba(33,117,155,.10); border-color: rgba(33,117,155,.34); }
.tech-icon[data-brand="html"]{ background: rgba(227,79,38,.10); border-color: rgba(227,79,38,.34); }
.tech-icon[data-brand="css"]{ background: rgba(38,77,228,.10); border-color: rgba(38,77,228,.34); }

.tech-icon[data-brand="shopify"]{ background: rgba(149,191,71,.10); border-color: rgba(149,191,71,.34); }
.tech-icon[data-brand="ga4"]{ background: rgba(255,152,0,.10); border-color: rgba(255,152,0,.34); }

.tech-icon[data-brand="mssql"]{ background: rgba(204,41,54,.10); border-color: rgba(204,41,54,.34); }
.tech-icon[data-brand="docker"]{ background: rgba(36,150,237,.10); border-color: rgba(36,150,237,.34); }
.tech-icon[data-brand="github"]{ background: rgba(255,255,255,.04); border-color: rgba(233,240,255,.18); }

.tech-icon[data-brand="vscode"]{ background: rgba(0,122,204,.10); border-color: rgba(0,122,204,.34); }
.tech-icon[data-brand="windows"]{ background: rgba(0,120,215,.10); border-color: rgba(0,120,215,.34); }
.tech-icon[data-brand="linux"]{ background: rgba(255,193,7,.08); border-color: rgba(255,193,7,.30); }
.tech-icon[data-brand="eclipse"]{ background: rgba(45,41,97,.12); border-color: rgba(45,41,97,.36); }
.tech-icon[data-brand="unity"]{ background: rgba(255,255,255,.04); border-color: rgba(233,240,255,.18); }
.tech-icon[data-brand="office"]{ background: rgba(235,67,0,.10); border-color: rgba(235,67,0,.34); }
.tech-icon[data-brand="canva"]{ background: rgba(0,199,225,.10); border-color: rgba(0,199,225,.34); }
.tech-icon[data-brand="gimp"]{ background: rgba(255,255,255,.04); border-color: rgba(233,240,255,.18); }

.tech-icon[data-brand="sap"]{ background: rgba(0,113,206,.10); border-color: rgba(0,113,206,.34); }


.tech-icon:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}




/* glitch (cyberpunk-style, layered + paths + movement + opacity) */
.glitch{
  position: relative;
  display: inline-block;
  z-index: 0;            /* creates stacking context */
  isolation: isolate;    /* keeps blend effects contained */
  text-shadow:
    0 0 18px rgba(54,182,255,.18),
    0 0 42px rgba(11,92,255,.12);
}

.glitch::before,
.glitch::after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 110%;
  pointer-events: none;
  opacity: 0.0;
  filter: blur(.25px);
  will-change: transform, clip-path, opacity;
}

.glitch::before{
  color: #e0287d;
  transform: translate(10px, 8px);
  z-index: -1;
  mix-blend-mode: screen;
  animation:
    glitch-clip 3.8s step-end infinite,
    glitch-move 2.6s step-end infinite,
    glitch-opacity 4.8s step-end infinite;
}

.glitch::after{
  color: #1bc7fb;
  transform: translate(-10px, 5px);
  z-index: -1;
  mix-blend-mode: screen;
  animation:
    glitch-clip 4.2s step-end infinite,
    glitch-move 2.1s step-end infinite reverse,
    glitch-opacity 5.2s step-end infinite;
}

@keyframes glitch-opacity{
  0%{ opacity: 0.08; }
  5%{ opacity: 0.65; }
  20%{ opacity: 0.12; }
  35%{ opacity: 0.75; }
  45%{ opacity: 0.18; }
  60%{ opacity: 0.65; }
  80%{ opacity: 0.10; }
  100%{ opacity: 0.08; }
}

@keyframes glitch-move{
  0%{ transform: translate(0,0) skewX(0deg); }
  10%{ transform: translate(2px,-1px) skewX(-8deg); }
  15%{ transform: translate(-2px,1px) skewX(10deg); }
  22%{ transform: translate(6px,0) skewX(-12deg); }
  30%{ transform: translate(-6px,-1px) skewX(14deg); }
  42%{ transform: translate(12px,2px) skewX(-18deg); }
  55%{ transform: translate(-10px,1px) skewX(16deg); }
  62%{ transform: translate(4px,-2px) skewX(-8deg); }
  70%{ transform: translate(-3px,0) skewX(6deg); }
  82%{ transform: translate(9px,1px) skewX(-14deg); }
  100%{ transform: translate(0,0) skewX(0deg); }
}

@keyframes glitch-clip{
  0%{ clip-path: inset(80% 0 0 0); }
  5%{ clip-path: inset(10% 0 82% 0); }
  10%{ clip-path: inset(45% 0 45% 0); }
  12%{ clip-path: inset(0 0 92% 0); }
  18%{ clip-path: inset(66% 0 8% 0); }
  22%{ clip-path: inset(12% 0 66% 0); }
  28%{ clip-path: inset(78% 0 5% 0); }
  32%{ clip-path: inset(38% 0 52% 0); }
  36%{ clip-path: inset(0 0 88% 0); }
  42%{ clip-path: inset(72% 0 12% 0); }
  48%{ clip-path: inset(22% 0 64% 0); }
  54%{ clip-path: inset(56% 0 22% 0); }
  60%{ clip-path: inset(14% 0 72% 0); }
  68%{ clip-path: inset(82% 0 2% 0); }
  74%{ clip-path: inset(34% 0 54% 0); }
  80%{ clip-path: inset(6% 0 84% 0); }
  86%{ clip-path: inset(60% 0 24% 0); }
  92%{ clip-path: inset(26% 0 62% 0); }
  100%{ clip-path: inset(80% 0 0 0); }
}

/* =========================
   Responsiveness
========================= */
@media (max-width: 920px){
  .about-grid{ grid-template-columns: 1fr; }

  /* Tech Set: title first, then icons */
  .tech-grid{
    grid-template-areas:
      "right"
      "left";
    grid-template-columns: 1fr;
    gap: 26px;
    justify-content: center;
  }
  .tech-right{ justify-content: center; }
  .tech-title{ text-align: center; }

  .pill-right{ right: 18px; bottom: 18px; top: auto; transform: none; }
  .pill-right:hover{ transform: translateY(-2px); }
  .ribbon{ display: none; }
  .decor-dot{ left: 18px; top: 86px; }
  .word-stroke{ transform: translateX(8px); }
}

@media (max-width: 520px){
  .panel{ padding: 18px; }
  .social-btn{ width: 42px; height: 42px; }
}


/* fix dark icons */
.tech-icon[data-brand="express"] .brand-icon{ filter: invert(1); opacity: .85; }


/* Remove extra decorative dots (as requested) */
.decor-dot, .mid-dot{ display:none !important; }

/* Tech title alignment (keep it next to icons on desktop) */
.tech-right{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.tech-title{
  text-align: left;
}

/* Tooltip on tech icons */
.tech-icon{
  position: relative;
  overflow: visible;
}
.tech-icon::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  font-size: 11px;
  letter-spacing: .2px;
  color: rgba(233,240,255,.92);
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(54,182,255,.25);
  box-shadow: 0 0 18px rgba(54,182,255,.16);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  transition: opacity .14s ease, transform .14s ease;
}
.tech-icon:hover::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* =========================
   Accessibility + defaults
========================= */
:focus-visible{
  outline: 2px solid rgba(54,182,255,.75);
  outline-offset: 3px;
}
.inline-link{ color: rgba(54,182,255,.9); text-decoration: none; }
.inline-link:hover{ text-decoration: underline; }


.now-link{
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .4px;
  color: rgba(233,240,255,.78);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(54,182,255,.22);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 22px rgba(54,182,255,.12);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.now-link:hover{
  transform: translateY(-2px);
  border-color: rgba(54,182,255,.55);
  background: rgba(255,255,255,.06);
}


/* =========================
   Shared section layout
========================= */
.section-shell{
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.cards-grid{
  display: grid;
  gap: 14px;
}
.card{
  background: rgba(15, 20, 28, .62);
  border: 1px solid rgba(54,182,255,.18);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 0 34px rgba(54,182,255,.10);
  backdrop-filter: blur(10px);
}
.card h3{
  margin: 0 0 8px 0;
  font-size: 14px;
  letter-spacing: .2px;
}
.card p{
  margin: 0 0 12px 0;
  color: rgba(233,240,255,.78);
  font-size: 12px;
  line-height: 1.55;
}
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.chip{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: rgba(233,240,255,.84);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(54,182,255,.18);
}
.meta{ font-size: 11px; color: rgba(233,240,255,.58); }
.card-actions{
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(54,182,255,.12);
  border: 1px solid rgba(54,182,255,.35);
  color: rgba(233,240,255,.92);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(54,182,255,.65);
  background: rgba(54,182,255,.16);
}
.btn.ghost{
  background: rgba(255,255,255,.03);
  border-color: rgba(54,182,255,.22);
}

.btn.icon-btn{
  justify-content: flex-start;
  gap: 10px;
}
.btn .ico{
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.social-row-icons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.center-line{ display: flex; justify-content: center; padding-top: 6px; }
.divider{ height: 1px; background: rgba(54,182,255,.12); margin: 14px 0; }
.footer-note{
  margin: 10px 0 0 0;
  text-align: center;
  font-size: 12px;
  color: rgba(233,240,255,.55);
}


/* =========================
   Projects
========================= */
.projects-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project-card{
  padding: 0;
  overflow: hidden;
}
.project-card .card-body{
  padding: 16px;
}
.thumb{
  height: 120px;
  border-bottom: 1px solid rgba(54,182,255,.14);
  background: radial-gradient(600px 240px at 30% 20%, rgba(54,182,255,.24), transparent 60%),
              radial-gradient(520px 240px at 70% 30%, rgba(11,92,255,.18), transparent 65%),
              rgba(255,255,255,.02);
}
.thumb.t2{ background: radial-gradient(600px 240px at 30% 20%, rgba(11,92,255,.24), transparent 60%),
                    radial-gradient(520px 240px at 70% 30%, rgba(54,182,255,.16), transparent 65%),
                    rgba(255,255,255,.02); }
.thumb.t3{ background: radial-gradient(600px 240px at 30% 20%, rgba(54,182,255,.18), transparent 60%),
                    radial-gradient(520px 240px at 70% 30%, rgba(255,255,255,.08), transparent 65%),
                    rgba(255,255,255,.02); }
.thumb.t4{ background: radial-gradient(600px 240px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
                    radial-gradient(520px 240px at 70% 30%, rgba(54,182,255,.18), transparent 65%),
                    rgba(255,255,255,.02); }

@media (max-width: 920px){
  .projects-grid{ grid-template-columns: 1fr; }
}


/* =========================
   Services
========================= */
.section-lead{
  margin: 0;
  max-width: 860px;
  color: rgba(233,240,255,.78);
  font-size: 13px;
  line-height: 1.6;
}

.services-blocks{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.services-cta{
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(233,240,255,.70);
}
.services-cta-link{
  color: rgba(233,240,255,.86);
  text-decoration: none;
  border-bottom: 1px solid rgba(54,182,255,.22);
  padding-bottom: 2px;
}
.services-cta-link:hover{
  color: rgba(54,182,255,.92);
  border-bottom-color: rgba(54,182,255,.55);
}


.service-block h3{
  margin: 0 0 14px 0;
  font-size: 14px;
  letter-spacing: .2px;
}

.service-item + .service-item{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(54,182,255,.12);
}

.service-item h4{
  margin: 0 0 8px 0;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(233,240,255,.92);
}

.service-item p{
  margin: 0;
  color: rgba(233,240,255,.78);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 980px){
  .services-blocks{ grid-template-columns: 1fr; }
}



/* ===== Services: scan-friendly blocks ===== */
.service-block{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  cursor: pointer;
}

/* mini accent line */
.service-block::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: rgba(54,182,255,.55);
  opacity: .65;
}
.service-block--build::before{ opacity: .45; }
.service-block--measure::before{ opacity: .55; }

/* subtle per-column intensity */
.service-block--flow{ border-color: rgba(54,182,255,.22); box-shadow: 0 0 38px rgba(54,182,255,.10); }
.service-block--build{ border-color: rgba(54,182,255,.18); box-shadow: 0 0 34px rgba(54,182,255,.08); }
.service-block--measure{ border-color: rgba(54,182,255,.20); box-shadow: 0 0 36px rgba(54,182,255,.09); }

.service-block-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px 0;
}

.service-head-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.service-icon{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgba(233,240,255,.92);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(54,182,255,.18);
  box-shadow: 0 0 18px rgba(54,182,255,.10);
  flex: 0 0 auto;
}

.service-block h3{
  margin: 0;
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(233,240,255,.94);
  white-space: nowrap;
}

.service-badge{
  font-size: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(233,240,255,.90);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(54,182,255,.32);
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 600;
  flex: 0 0 auto;
}

/* more vertical rhythm + softer dividers */
.service-item + .service-item{
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(54,182,255,.08);
}

.service-item h4{
  color: rgba(233,240,255,.92);
}

/* hover = meaning */
.service-block:hover{
  transform: scale(1.01);
  border-color: rgba(54,182,255,.55);
  background: rgba(15, 20, 28, .72);
  box-shadow: 0 0 46px rgba(54,182,255,.16);
}
.service-block:hover h3{
  color: rgba(54,182,255,.92);
}
.service-block:hover .service-icon{
  color: rgba(233,240,255,1);
  border-color: rgba(54,182,255,.55);
  background: rgba(54,182,255,.10);
  box-shadow: 0 0 22px rgba(54,182,255,.16);
}



/* =========================
   GitHub
========================= */
.github-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.repo-top{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.repo-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(54,182,255,.85);
  box-shadow: 0 0 18px rgba(54,182,255,.22);
}
.repo-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* =========================
   Testimonials
========================= */
.testi-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.quote-card blockquote{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(233,240,255,.85);
}
.quote-card figcaption{
  margin-top: 12px;
  font-size: 11px;
  color: rgba(233,240,255,.58);
}
@media (max-width: 980px){
  .testi-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Contact
========================= */
.contact-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
label span{
  display: block;
  font-size: 11px;
  color: rgba(233,240,255,.62);
  margin-bottom: 6px;
}
input, textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(54,182,255,.18);
  background: rgba(255,255,255,.03);
  color: rgba(233,240,255,.9);
  outline: none;
}
input:focus, textarea:focus{
  border-color: rgba(54,182,255,.55);
  box-shadow: 0 0 0 3px rgba(54,182,255,.10);
}
.tiny{
  margin: 10px 0 0 0;
  font-size: 11px;
  color: rgba(233,240,255,.55);
}
.social-row{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Now page
========================= */
.now-page{ height: 100vh; overflow-y: auto; scroll-snap-type: none; }
.now-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.now-card ul{ margin: 0; padding-left: 18px; color: rgba(233,240,255,.78); font-size: 12px; line-height: 1.6; }
@media (max-width: 980px){
  .now-grid{ grid-template-columns: 1fr; }
}


/* subtle links (clickable, not screaming) */
.subtle-link{ color: inherit; text-decoration: none; border-bottom: 1px solid rgba(233,240,255,.18); }
.subtle-link:hover{ border-bottom-color: rgba(54,182,255,.55); }


/* pulse class to make role feel alive */
.glitch-pulse{ animation: rolePulse .24s ease-in-out; }
@keyframes rolePulse{ 0%{ transform: translateY(0); } 50%{ transform: translateY(-1px); } 100%{ transform: translateY(0); } }
/* =========================
   CV Section
========================= */
.cv .section-shell{
  width: min(1200px, 100%);
}
.cv .cv-wrap{
  width: 100%;
}
.cv .timeline{
  margin-top: 0;
  border-left: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.cv .tl-block{
  margin: 0;
  background: var(--card);
  border: 1px solid rgba(54,182,255,.18);
  border-radius: 16px;
  padding: 16px 16px 12px 16px;
  box-shadow: 0 0 34px rgba(54,182,255,.10);
  backdrop-filter: blur(10px);
}
.cv .tl-block::before{
  left: 16px;
  top: 16px;
  opacity: .9;
}
.cv .tl-title{
  margin-left: 14px;
  margin-top: 2px;
}
.cv .tl-item{
  margin-top: 12px;
}
@media (max-width: 920px){
  .cv .timeline{ grid-template-columns: 1fr; }
}

/* =========================
   Projects: highlight "More projects"
========================= */
.project-card.soon{
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(54,182,255,.04));
}
.project-card.soon .thumb{
  border-bottom-color: rgba(255,255,255,.14);
}

/* =========================
   Footer
========================= */
/* Contact socials (no separate footer) */
.contact-social{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.contact-social-btn{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(54,182,255,.18);
  color: rgba(233,240,255,.9);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.contact-social-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(54,182,255,.42);
  background: rgba(54,182,255,.08);
}
.contact-note{
  margin-top: 22px;
  font-size: 12px;
  opacity: .75;
}

.site-footer{
  padding: 22px clamp(22px, 4vw, 54px);
  border-top: 1px solid rgba(54,182,255,.14);
  background: radial-gradient(900px 380px at 50% 0%, rgba(54,182,255,.08), transparent 65%),
              rgba(0,0,0,.10);
}
.footer-inner{
  width: min(1200px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-social{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-social-btn{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(54,182,255,.18);
  color: rgba(233,240,255,.9);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.footer-social-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(54,182,255,.55);
  background: rgba(54,182,255,.10);
}
.footer-note{
  margin: 0;
  color: rgba(233,240,255,.55);
  font-size: 12px;
}

/* Footer as last panel (not sticky) */
.footer-panel{
  min-height: 100vh;
  display: grid;
  align-items: end;
  justify-items: stretch;
  padding: 0; /* footer handles its own padding */
}
.footer-panel .site-footer{
  width: 100%;
}

/* Icon-only chips (Projects / GitHub tech) */
.chip.icon-chip{
  padding: 6px;
  width: 34px;
  height: 28px;
  justify-content: center;
}
.chip.icon-chip .chip-icon{
  width: 16px;
  height: 16px;
  display: block;
}




/* =========================
   Contact + embedded footer
========================= */
.panel.contact{
  align-items: stretch; /* allow layout to push footer to bottom */
}
.panel.contact .section-shell{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* =========================
   Hover animations: Projects + Services
========================= */
.project-card,
.mini-card{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  will-change: transform;
}
.project-card:hover,
.mini-card:hover{
  transform: translateY(-4px);
  border-color: rgba(54,182,255,.42);
  box-shadow: 0 0 46px rgba(54,182,255,.16);
  background: rgba(15, 20, 28, .68);
}

.project-card .thumb{
  transition: transform .18s ease, filter .18s ease;
}
.project-card:hover .thumb{
  transform: scale(1.02);
  filter: brightness(1.05);
}


/* Contact section footer layout (visible in Let's Talk without extra scroll) */
.contact .section-shell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.contact .contact-footer-wrap{
  margin-top: auto;
  padding-top: 18px;
  padding-bottom: 18px;
}
.contact .contact-footer-wrap .site-footer{
  background: transparent;
}


/* =========================
   Contact layout fix (no footer panel, no sticky/space-between hacks)
========================= */
.panel.contact{
  align-items: flex-start;
}
.panel.contact .contact-shell{
  height: auto !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 28px;
  justify-content: start !important;
  align-content: start;
}
.panel.contact .big-title{
  margin: 0;
}
.panel.contact .contact-grid{
  grid-template-columns: 1fr;
  justify-items: start;
}
.panel.contact .contact-card{
  width: min(560px, 100%);
  padding: 18px 18px 14px;
}
.panel.contact .form label span{
  display: none; /* keep it clean, placeholders do the job */
}

/* Social row under contact box */
.contact-social{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.contact-social-btn{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,03);
  border: 1px solid rgba(54,182,255,18);
  color: rgba(233,240,255,9);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.contact-social-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(54,182,255,55);
  background: rgba(54,182,255,10);
}
.contact-note{
  margin: 10px 0 0;
  color: rgba(233,240,255,55);
  font-size: 12px;
}



/* =========================
   Footer (only visible on Let's Talk)
========================= */
.site-footer--contact{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
body.in-contact .site-footer--contact{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* prevent overlap in contact section */
.panel.contact{
  padding-bottom: calc(clamp(22px, 4vw, 54px) + 110px);
}



/* Honeypot field (contact form) */
.hp{ display:none !important; }

/* Contact: required privacy checkbox */
.panel.contact .form label.checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top: 2px;
}
.panel.contact .form label.checkbox span{
  display:inline !important;
  font-size: 11px;
  color: rgba(233,240,255,.72);
  line-height: 1.5;
}
.panel.contact .form label.checkbox input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: rgba(54,182,255,.85);
}


/* =========================
   Toasts (contact feedback)
========================= */
#toastHost{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 20, 28, .92);
  border: 1px solid rgba(233,240,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.38);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.25;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(8px);
  opacity: 0;
  animation: toastIn .28s ease-out forwards;
}

.toast--success{
  border-color: rgba(54, 182, 255, .45);
}

.toast--error{
  border-color: rgba(255, 90, 90, .55);
}

.toast.is-leaving{
  animation: toastOut .32s ease-in forwards;
}

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

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

@media (max-width: 520px){
  #toastHost{ left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (hover: none) and (pointer: coarse) {
  .snap { scroll-snap-type: none; }
  .panel { scroll-snap-align: none; }
}