:root{
  --bg:#050807;
  --panel:#0b100c;
  --panel2:#0d1410;
  --text:#f2efd9;
  --muted:#b8b39c;
  --accent:#14ef5e;
  --accent2:#ff9750;
  --accent3:#b38dff;
  --border: rgba(242,239,217,.11);
  --border-strong: rgba(242,239,217,.2);
  --shadow: 0 22px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --max: 1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Avenir Next", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1200px 850px at 10% 4%, rgba(255,151,80,.12), transparent 60%),
    radial-gradient(900px 700px at 86% 18%, rgba(20,239,94,.09), transparent 56%),
    radial-gradient(900px 700px at 80% 84%, rgba(179,141,255,.08), transparent 60%),
    linear-gradient(180deg, #060907 0%, #040605 100%);
  color: var(--text);
  line-height:1.55;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration: underline; }

.container{
  width:min(var(--max), calc(100% - 2rem));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  top:-50px; left:1rem;
  background: rgba(9,14,11,.94);
  padding:.75rem 1rem;
  border:1px solid var(--border);
  border-radius:12px;
  color: var(--text);
  z-index: 999;
}
.skip-link:focus{ top:1rem; }

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(5,8,7,.72);
  border-bottom:1px solid rgba(242,239,217,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .9rem 0;
  gap: 1rem;
}
.logo{ display:flex; align-items:center; gap:.6rem; font-weight:700; }
.logo-text{ letter-spacing: .01em; }
.logo-mark{
  display:grid; place-items:center;
  width:34px;height:34px;
  border:1px solid rgba(20,239,94,.32);
  border-radius:12px;
  background:
    radial-gradient(circle at 35% 30%, rgba(20,239,94,.18), transparent 55%),
    rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px rgba(20,239,94,.08);
}
.nav-toggle{
  display:none;
  border:1px solid rgba(242,239,217,.12);
  background: rgba(255,255,255,.025);
  color: var(--text);
  border-radius:12px;
  padding:.55rem .75rem;
  cursor:pointer;
}
.nav-menu{
  display:flex;
  align-items:center;
  gap: 1rem;
}
.nav-menu a{ color: var(--muted); }
.nav-menu .btn{ color: var(--text); }
.nav-menu a:hover{
  color: var(--text);
  text-decoration:none;
  text-shadow: 0 0 12px rgba(20,239,94,.15);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.9rem 1.05rem;
  border-radius: 999px;
  border:1px solid rgba(20,239,94,.38);
  background: linear-gradient(180deg, rgba(12,18,14,.96), rgba(8,12,10,.94));
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px rgba(20,239,94,.07),
    0 10px 28px rgba(0,0,0,.28);
  cursor:pointer;
  text-decoration:none !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{
  border-color: rgba(20,239,94,.62);
  box-shadow:
    inset 0 0 0 1px rgba(20,239,94,.14),
    0 14px 32px rgba(0,0,0,.32);
  filter: none;
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(20,239,94,.18),
    inset 0 0 0 1px rgba(20,239,94,.16),
    0 12px 30px rgba(0,0,0,.3);
}
.btn-ghost{
  background: rgba(255,255,255,.02);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn-ghost:hover{ background: rgba(255,255,255,.04); border-color: rgba(242,239,217,.32); }
.btn-small{ padding:.55rem .8rem; }

/* Sections */
.section{
  position: relative;
  padding: 4.9rem 0;
}
.section > .container{
  position: relative;
  z-index: 1;
}
.section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(820px 260px at 12% 0%, rgba(20,239,94,.045), transparent 60%),
    radial-gradient(680px 240px at 88% 100%, rgba(255,151,80,.04), transparent 60%);
  pointer-events:none;
}
.section.alt{
  background:
    radial-gradient(800px 300px at 10% 15%, rgba(255,151,80,.05), transparent 60%),
    radial-gradient(700px 280px at 90% 75%, rgba(179,141,255,.045), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008));
  border-top:1px solid rgba(242,239,217,.08);
  border-bottom:1px solid rgba(242,239,217,.08);
}
.section-head{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom: 1.35rem;
}
.section-head .muted{ max-width: 58ch; }
h1,h2,h3,h4{ line-height:1.15; margin:0; }
h1{ font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing:-.02em; }
h2{
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  letter-spacing:-.03em;
  color: var(--text);
  font-family: "Clash Display", "Satoshi", "Avenir Next", "Helvetica Neue", sans-serif;
}
h3{ font-size: 1.1rem; }
h4{ font-size: .95rem; }
.lead{ font-size: 1.05rem; color: rgba(242,239,217,.88); }
.muted{ color: var(--muted); }
.tiny{ font-size:.85rem; }

main section h2{
  display:inline-block;
  position:relative;
  padding-bottom: .45rem;
}
main section h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: clamp(52px, 8vw, 96px);
  height: 2px;
  background: linear-gradient(90deg, rgba(20,239,94,.9), rgba(20,239,94,0));
}

.eyebrow{
  display:inline-flex;
  gap:.5rem;
  color: var(--muted);
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.accent{ color: var(--accent); }

/* Hero */
.hero{ padding: 5rem 0 4rem; }

.hero-kinetic{
  --hero-bg: #050807;
  --hero-bg-2: #080d0b;
  --hero-cream: #f2efd9;
  --hero-neon: #14ef5e;
  --hero-orange: #ff9750;
  --hero-lilac: #b38dff;
  position: relative;
  padding: 0 0 4.75rem;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 18% 14%, rgba(255,151,80,.09), transparent 58%),
    radial-gradient(900px 700px at 78% 58%, rgba(20,239,94,.08), transparent 60%),
    linear-gradient(180deg, var(--hero-bg-2), var(--hero-bg));
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hero-kinetic::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 14%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.02) 0 1px,
      transparent 1px 48px
    );
  opacity: .35;
  pointer-events:none;
}
.hero-kinetic .container{
  position: relative;
  z-index: 1;
}

.hero-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  min-height: 42px;
  padding: .65rem 1rem;
  font-size: .93rem;
  color: #061008;
  background: linear-gradient(90deg, #13e958, #b2f26a);
  border-bottom: 1px solid rgba(0,0,0,.24);
}
.hero-banner-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0b0f0d;
  box-shadow: 0 0 0 3px rgba(11,15,13,.12);
  animation: heroPulseDot 1.8s ease-in-out infinite;
}

.hero-stage{
  position: relative;
  min-height: clamp(540px, 72vh, 820px);
  padding: 1.2rem 0 0;
  border-top: 1px solid rgba(255,255,255,.09);
}
.hero-copy{
  position: relative;
  z-index: 2;
  padding: clamp(1.3rem, 3vw, 2.1rem) 0 0;
}
.hero-eyebrow{
  color: rgba(242,239,217,.66);
  letter-spacing: .11em;
  font-size: .84rem;
}
.hero-intro{
  margin: .95rem 0 .4rem;
  color: rgba(242,239,217,.88);
  font-size: .98rem;
}
.hero-intro strong{
  color: var(--hero-cream);
  font-weight: 700;
}

.hero-display{
  margin: 0;
  color: var(--hero-cream);
  font-family: "Clash Display", "Satoshi", "Avenir Next", "Helvetica Neue", sans-serif;
  font-size: clamp(3.25rem, 11.2vw, 10.5rem);
  font-weight: 700;
  line-height: .84;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.hero-line{
  display:block;
  width: fit-content;
  animation: heroRise .85s cubic-bezier(.18,.89,.32,1.15) both;
  transform-origin: left center;
}
.hero-line-a{ animation-delay: .05s; }
.hero-line-b{
  margin-left: clamp(0rem, 9vw, 9rem);
  animation-delay: .16s;
}
.hero-line-c{
  display:flex;
  align-items:center;
  gap: clamp(.35rem, 1vw, .95rem);
  margin-left: clamp(1rem, 5.5vw, 6rem);
  animation-delay: .27s;
}
.hero-zap{
  width: clamp(1.35rem, 2.8vw, 3rem);
  height: clamp(2.5rem, 5vw, 5rem);
  flex: 0 0 auto;
  display:inline-block;
  background: linear-gradient(180deg, #29ff78 0%, #0bdb54 100%);
  clip-path: polygon(50% 0%, 84% 0%, 58% 42%, 88% 42%, 34% 100%, 47% 58%, 16% 58%);
  filter: drop-shadow(0 0 18px rgba(20,239,94,.4));
  transform: translateY(.05em) rotate(8deg);
  animation: heroZap 2.4s ease-in-out infinite 1s;
}

.hero-lead{
  max-width: 52ch;
  margin: clamp(1.35rem, 2vw, 1.85rem) 0 0;
  color: rgba(242,239,217,.78);
  font-size: 1.05rem;
}

.hero-lead-word{
  display: inline-block;
  will-change: transform, opacity, filter;
}

.hero-bottom{
  margin-top: 1.35rem;
  display:grid;
  grid-template-columns: minmax(250px, 1fr) auto;
  gap: .9rem 1.4rem;
  align-items:end;
}
.hero-bracket-note{
  position: relative;
  margin: 0;
  max-width: 34rem;
  color: rgba(242,239,217,.9);
  font-size: 1rem;
  line-height: 1.25;
  padding: .85rem 1.1rem;
}
.hero-bracket-note::before,
.hero-bracket-note::after{
  content:"";
  position:absolute;
  top: .05rem;
  bottom: .05rem;
  width: .65rem;
  border: 2px solid rgba(242,239,217,.9);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right: 0;
}
.hero-bracket-note::before{ left: 0; }
.hero-bracket-note::after{
  right: 0;
  transform: scaleX(-1);
}

.hero-kinetic .hero-cta{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin: 0;
}
.hero-kinetic .btn{
  min-width: 156px;
  padding: .9rem 1.15rem;
}
.hero-btn{
  background: rgba(9,15,11,.88);
  color: var(--hero-cream);
  border: 1px solid rgba(20,239,94,.62);
  box-shadow:
    inset 0 0 0 1px rgba(20,239,94,.12),
    0 10px 28px rgba(0,0,0,.35);
}
.hero-btn:hover{
  background: rgba(13,23,16,.95);
  filter: none;
}
.hero-btn-ghost{
  background: rgba(255,255,255,.02);
  color: var(--hero-cream);
  border-color: rgba(242,239,217,.3);
}
.hero-btn-ghost:hover{
  background: rgba(255,255,255,.05);
}

.hero-badges{
  list-style:none;
  padding:0;
  margin: 1.25rem 0 0;
  display:flex;
  flex-wrap:wrap;
  gap: .65rem;
}
.hero-badges li{
  color: rgba(242,239,217,.88);
  font-size: .86rem;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border-radius: 999px;
  padding: .5rem .75rem;
  backdrop-filter: blur(6px);
}

.hero-decor{
  position:absolute;
  z-index: 1;
  pointer-events:none;
}

.hero-decor-flower{
  top: clamp(1.2rem, 4vw, 2.4rem);
  left: clamp(8.5rem, 15vw, 12.5rem);
  width: clamp(52px, 7vw, 92px);
  height: clamp(52px, 7vw, 92px);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  transform: rotate(4deg);
  animation: heroFloat 7s ease-in-out infinite;
}
.hero-decor-flower span{
  display:block;
  background: linear-gradient(135deg, #ff9c58, #c295ff);
  opacity: .96;
}
.hero-decor-flower span:nth-child(1){ border-radius: 100% 12% 100% 16%; }
.hero-decor-flower span:nth-child(2){ border-radius: 12% 100% 16% 100%; }
.hero-decor-flower span:nth-child(3){ border-radius: 16% 100% 12% 100%; }
.hero-decor-flower span:nth-child(4){ border-radius: 100% 16% 100% 12%; }

.hero-decor-sun{
  top: clamp(14.5rem, 33vw, 21rem);
  left: clamp(25%, 40vw, 46%);
  width: clamp(60px, 8vw, 96px);
  height: clamp(32px, 4.4vw, 50px);
  border-radius: 100px 100px 0 0;
  background:
    radial-gradient(circle at 40% 25%, #ffd4be 0 14%, transparent 15%),
    linear-gradient(180deg, #ffb889, var(--hero-orange));
  border: 1px solid rgba(255,216,196,.4);
  box-shadow: 0 12px 24px rgba(255,132,63,.22);
  animation: heroBob 6.2s ease-in-out infinite;
}
.hero-decor-sun::after{
  content:"";
  position:absolute;
  inset:auto 14% 10% 14%;
  height: 30%;
  border-top: 2px solid rgba(23,23,23,.85);
  border-radius: 999px;
}

.hero-decor-bolt{
  top: clamp(17rem, 38vw, 24rem);
  left: clamp(55%, 63vw, 66%);
  width: clamp(48px, 6.4vw, 84px);
  height: clamp(74px, 10vw, 124px);
  background: linear-gradient(180deg, #27ff76, #09d750);
  clip-path: polygon(46% 0%, 89% 0%, 57% 39%, 92% 39%, 28% 100%, 43% 58%, 9% 58%);
  filter: drop-shadow(0 0 18px rgba(20,239,94,.34));
  transform: rotate(6deg);
  animation: heroBoltFloat 5.8s ease-in-out infinite;
}

.hero-decor-ribbon{
  top: clamp(21.5rem, 47vw, 29.5rem);
  left: clamp(61%, 69vw, 73%);
  width: clamp(84px, 12vw, 152px);
  height: clamp(44px, 6vw, 72px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 45%, #e8c7ff 0 18%, transparent 19%),
    radial-gradient(circle at 64% 55%, #b5a1ff 0 22%, transparent 23%),
    linear-gradient(135deg, rgba(227,171,255,.95), rgba(116,116,255,.9));
  filter: blur(.2px) drop-shadow(0 10px 16px rgba(113,96,255,.25));
  transform: rotate(26deg);
  animation: heroRibbon 7.5s ease-in-out infinite;
}
.hero-decor-ribbon::before,
.hero-decor-ribbon::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.18);
  transform-origin: center;
}
.hero-decor-ribbon::before{ transform: translate(-12%, 56%) rotate(-27deg); }
.hero-decor-ribbon::after{ transform: translate(14%, -52%) rotate(29deg); }

@keyframes heroRise{
  from{ opacity: 0; transform: translateY(20px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroFloat{
  0%,100%{ transform: translate3d(0,0,0) rotate(4deg); }
  50%{ transform: translate3d(0,-8px,0) rotate(-1deg); }
}
@keyframes heroBob{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-8px,0); }
}
@keyframes heroBoltFloat{
  0%,100%{ transform: translate3d(0,0,0) rotate(6deg); }
  50%{ transform: translate3d(4px,-10px,0) rotate(10deg); }
}
@keyframes heroRibbon{
  0%,100%{ transform: rotate(26deg) translateY(0); }
  50%{ transform: rotate(18deg) translateY(-10px); }
}
@keyframes heroZap{
  0%,100%{ transform: translateY(.05em) rotate(8deg) scale(1); }
  50%{ transform: translateY(-.02em) rotate(10deg) scale(1.05); }
}
@keyframes heroPulseDot{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.25); opacity: .72; }
}

/* Filters */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin: 1.2rem 0 1.3rem;
}
.project-scroll-hint{
  margin: 0 0 .65rem;
  color: rgba(242,239,217,.62);
  letter-spacing: .04em;
}
.project-scroll-shell{
  --project-scroll-height: auto;
  position: relative;
  min-height: var(--project-scroll-height);
}
.project-scroll-shell.is-static{
  min-height: 0;
}
.project-scroll-sticky{
  position: sticky;
  top: calc(68px + .85rem);
  display: grid;
  gap: .75rem;
}
.project-scroll-shell.is-static .project-scroll-sticky{
  position: static;
}
.project-grid-frame{
  border: 1px solid rgba(242,239,217,.08);
  border-radius: calc(var(--radius) + 2px);
  padding: 1rem;
  background:
    radial-gradient(700px 180px at 8% 0%, rgba(20,239,94,.04), transparent 70%),
    radial-gradient(700px 180px at 90% 5%, rgba(179,141,255,.04), transparent 72%),
    rgba(6,9,7,.58);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.012);
  overflow: hidden;
}
.project-scroll-shell.is-static .project-grid-frame{
  overflow: visible;
}
.project-scroll-progress{
  height: 3px;
  border-radius: 999px;
  background: rgba(242,239,217,.08);
  overflow: hidden;
}
.project-scroll-progress span{
  display:block;
  width:100%;
  height:100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(20,239,94,.95), rgba(179,141,255,.7), rgba(255,151,80,.85));
}
.chip{
  border:1px solid rgba(242,239,217,.12);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  padding:.55rem .8rem;
  border-radius: 999px;
  cursor:pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.chip:hover{
  color: var(--text);
  border-color: rgba(242,239,217,.24);
}
.chip.is-active{
  color: var(--text);
  border-color: rgba(20,239,94,.55);
  background: rgba(20,239,94,.1);
  box-shadow: inset 0 0 0 1px rgba(20,239,94,.08);
}

/* Project Grid */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (min-width: 921px){
  .project-track{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    gap: 1rem;
    transform: translate3d(var(--track-shift, 0px), 0, 0);
    will-change: transform;
  }
  .project-track .card{
    flex: 0 0 clamp(340px, 36vw, 440px);
    min-width: 0;
  }
  .project-track .thumb{
    height: 250px;
  }
  .project-scroll-shell.is-static .project-track{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    transform: none !important;
  }
  .project-scroll-shell.is-static .project-track .card{
    flex: initial;
  }
}
.card{
  position: relative;
  border:1px solid rgba(242,239,217,.1);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.012)),
    rgba(8,12,10,.9);
  overflow:hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  cursor:pointer;
  outline: none;
  transform: translate3d(var(--card-shift-x, 0px), var(--card-shift-y, 0px), 0) rotate(var(--card-tilt, 0deg));
  transform-origin: 50% 50%;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(20,239,94,.85), rgba(179,141,255,.55), rgba(255,151,80,.7));
  opacity: .75;
}
.card:hover{
  transform: translate3d(var(--card-shift-x, 0px), calc(var(--card-shift-y, 0px) - 4px), 0) rotate(var(--card-tilt, 0deg));
  border-color: rgba(20,239,94,.26);
  box-shadow:
    0 0 0 1px rgba(20,239,94,.08),
    0 20px 44px rgba(0,0,0,.32);
}
.card:focus-visible{
  box-shadow:
    0 0 0 3px rgba(20,239,94,.22),
    0 14px 38px rgba(0,0,0,.28);
}
.thumb{
  position: relative;
  isolation: isolate;
  height: 190px;
  background:
    radial-gradient(520px 240px at 15% 15%, rgba(20,239,94,.2), transparent 58%),
    radial-gradient(420px 220px at 90% 18%, rgba(255,151,80,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  display:flex;
  align-items:flex-end;
  padding: 1rem;
  border-bottom: 1px solid rgba(242,239,217,.08);
  overflow: hidden;
}
.thumb::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height: 34px;
  background:
    radial-gradient(circle at 14px 17px, rgba(255,151,80,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 24px 17px, rgba(242,239,217,.4) 0 2px, transparent 3px),
    radial-gradient(circle at 34px 17px, rgba(20,239,94,.6) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-bottom: 1px solid rgba(242,239,217,.07);
  z-index: 0;
}
.thumb::after{
  content:"";
  position:absolute;
  inset: 3.1rem .95rem .95rem .95rem;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)),
    radial-gradient(300px 140px at 20% 15%, rgba(20,239,94,.18), transparent 65%),
    radial-gradient(280px 140px at 84% 24%, rgba(179,141,255,.14), transparent 68%),
    rgba(5,8,7,.7);
  border: 1px solid rgba(242,239,217,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 10px 22px rgba(0,0,0,.25);
  transform: translateY(0) scale(1);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  z-index: 0;
}
.card:hover .thumb::after{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(20,239,94,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 14px 26px rgba(0,0,0,.3);
}
.card:nth-child(2) .thumb{
  background:
    radial-gradient(520px 240px at 16% 18%, rgba(255,151,80,.2), transparent 58%),
    radial-gradient(430px 230px at 88% 22%, rgba(179,141,255,.19), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.card:nth-child(3) .thumb{
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(179,141,255,.18), transparent 58%),
    radial-gradient(430px 210px at 85% 20%, rgba(20,239,94,.2), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.thumb-label{
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  font-size:.92rem;
  color: rgba(242,239,217,.94);
  border:1px solid rgba(242,239,217,.16);
  padding:.42rem .72rem;
  border-radius:999px;
  background: rgba(5,8,7,.4);
  backdrop-filter: blur(4px);
  font-weight: 600;
  letter-spacing: .01em;
}
.card-body{
  display:flex;
  flex-direction:column;
  gap: .55rem;
  padding: 1.1rem 1.1rem 1.15rem;
  min-height: 220px;
}
.card-pro-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: .45rem;
  margin: 0;
  font-size: .73rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(242,239,217,.54);
}
.card-index-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 2rem;
  height: 1.5rem;
  padding: 0 .45rem;
  border-radius: 999px;
  border: 1px solid rgba(20,239,94,.22);
  background: rgba(20,239,94,.06);
  color: rgba(242,239,217,.88);
  font-weight: 700;
  letter-spacing: .06em;
}
.card-pro-year,
.card-pro-role{
  display:inline-flex;
  align-items:center;
  gap: .35rem;
}
.card-pro-role::before{
  content:"";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(242,239,217,.28);
}
.card-body h3{
  color: var(--text);
  font-size: clamp(1.05rem, 1.2vw, 1.22rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
}
.card-subtitle{
  margin: 0;
  color: rgba(242,239,217,.54);
  font-size: .74rem;
  line-height: 1.25;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.card-summary{
  margin:.1rem 0 0;
  color: rgba(242,239,217,.68);
  font-size: .95rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-body > p:not(.card-subtitle):not(.card-summary){
  margin:.55rem 0 0;
  color: rgba(242,239,217,.62);
  font-size: .95rem;
  line-height: 1.45;
}
.tags{
  display:flex;
  gap:.45rem;
  margin-top:auto;
  flex-wrap:wrap;
}
.tags span{
  font-size:.8rem;
  color: rgba(242,239,217,.88);
  border:1px solid rgba(242,239,217,.12);
  background: rgba(255,255,255,.02);
  padding:.3rem .6rem;
  border-radius:999px;
}
.card-cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .8rem;
  margin-top: .35rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(242,239,217,.08);
  color: rgba(242,239,217,.74);
}
.card-cta-text{
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.card-cta-icon{
  display:grid;
  place-items:center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 1px solid rgba(242,239,217,.12);
  background: rgba(255,255,255,.015);
  color: rgba(242,239,217,.84);
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}
.card:hover .card-cta-row{
  color: rgba(242,239,217,.92);
}
.card:hover .card-cta-icon{
  transform: translate(2px, -2px);
  border-color: rgba(20,239,94,.25);
  background: rgba(20,239,94,.06);
}

/* About */
.about-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  align-items:start;
}
.about-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top: 1rem; }
.skill-list{
  list-style:none;
  padding:0;
  margin: .9rem 0 0;
  display:grid;
  gap:.65rem;
}
.skill-list li{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem .9rem;
  border:1px solid rgba(242,239,217,.1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    rgba(8,12,10,.68);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.skill-list li:hover{
  border-color: rgba(20,239,94,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transform: translateY(-2px);
}
.skill-list li > span:first-child{
  color: var(--text);
  font-weight: 600;
}
.mini-cards{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}
.mini{
  padding: 1rem;
  border:1px solid rgba(242,239,217,.1);
  border-radius: 14px;
  background:
    radial-gradient(260px 120px at 12% 10%, rgba(20,239,94,.05), transparent 70%),
    rgba(8,12,10,.72);
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}
.mini h4{ color: var(--text); }
.mini p{ margin-bottom: 0; }

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items:start;
}
.contact-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-top: 1rem;
}
.contact-card{
  border:1px solid rgba(242,239,217,.1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    rgba(8,12,10,.72);
  padding: .85rem .9rem;
  color: var(--muted);
  text-decoration:none !important;
  transition: border-color .2s ease, transform .2s ease, color .2s ease, box-shadow .2s ease;
}
.contact-card span{ color: rgba(20,239,94,.95); }
.contact-card:hover{
  color: var(--text);
  border-color: rgba(20,239,94,.26);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transform: translateY(-2px);
}

.form{
  border:1px solid rgba(242,239,217,.1);
  border-radius: var(--radius);
  background:
    radial-gradient(600px 220px at 10% 0%, rgba(179,141,255,.04), transparent 65%),
    radial-gradient(520px 220px at 88% 12%, rgba(20,239,94,.05), transparent 68%),
    rgba(8,12,10,.82);
  padding: 1.2rem;
  box-shadow: var(--shadow);
}
.field{ display:grid; gap:.35rem; margin-bottom: .85rem; }
label{ font-size:.9rem; color: rgba(242,239,217,.9); }
input, textarea{
  width:100%;
  padding:.85rem .9rem;
  border-radius: 14px;
  border:1px solid rgba(242,239,217,.12);
  background: rgba(4,6,5,.5);
  color: var(--text);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input::placeholder, textarea::placeholder{
  color: rgba(242,239,217,.42);
}
input:focus, textarea:focus{
  border-color: rgba(20,239,94,.45);
  background: rgba(5,8,6,.62);
  box-shadow: 0 0 0 3px rgba(20,239,94,.14);
}
.error{
  margin:0;
  color: #ffb4a0;
  min-height: 1.2em;
  font-size: .85rem;
}
.form-status{
  margin:.8rem 0 0;
  min-height: 1.2em;
  color: rgba(242,239,217,.92);
}

/* Footer */
.footer{
  border-top:1px solid rgba(242,239,217,.08);
  padding: 1.5rem 0;
  background:
    radial-gradient(700px 180px at 15% 0%, rgba(20,239,94,.035), transparent 65%),
    rgba(0,0,0,.22);
}
.footer-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer .muted{ color: rgba(242,239,217,.56); }

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
}
.modal.is-open{ display:block; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(1,3,2,.72);
  backdrop-filter: blur(4px);
}
.modal-panel{
  position:relative;
  width:min(980px, calc(100% - 2rem));
  margin: 5vh auto;
  border-radius: var(--radius);
  border:1px solid rgba(242,239,217,.11);
  background:
    radial-gradient(760px 260px at 12% 10%, rgba(20,239,94,.045), transparent 65%),
    radial-gradient(680px 240px at 90% 16%, rgba(179,141,255,.04), transparent 68%),
    rgba(10,14,11,.94);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-close{
  position:absolute;
  top:.75rem; right:.75rem;
  width:40px; height:40px;
  border-radius: 12px;
  border:1px solid rgba(242,239,217,.12);
  background: rgba(255,255,255,.02);
  color: var(--text);
  cursor:pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.modal-close:hover{
  border-color: rgba(20,239,94,.28);
  background: rgba(20,239,94,.06);
}
.modal-content{ padding: 1.4rem 1.4rem 1.6rem; }
.modal-meta{ margin:0; color: rgba(242,239,217,.56); font-size:.9rem; }
.modal-content h3{
  color: var(--text);
  font-family: "Clash Display", "Satoshi", "Avenir Next", "Helvetica Neue", sans-serif;
  letter-spacing: -.02em;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}
.modal-content h4{
  margin-top: 1rem;
  color: rgba(242,239,217,.92);
}
.modal-grid{
  margin-top: 1.1rem;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 1.2rem;
}
.modal-aside{
  display:grid;
  gap: .8rem;
}
.aside-box{
  border:1px solid rgba(242,239,217,.1);
  border-radius: 14px;
  padding: .9rem;
  background: rgba(255,255,255,.018);
}
.aside-box h4{ margin-top: 0; }
.link-list a{
  display:block;
  padding:.5rem .6rem;
  border-radius: 12px;
  border:1px solid rgba(242,239,217,.1);
  background: rgba(0,0,0,.2);
  color: var(--muted);
  margin-top:.5rem;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.link-list a:hover{
  color: var(--text);
  text-decoration:none;
  border-color: rgba(20,239,94,.24);
  background: rgba(20,239,94,.05);
}

@media (max-width: 920px){
  .project-scroll-shell{
    min-height: 0 !important;
  }
  .project-scroll-sticky{
    position: static;
    top: auto;
    gap: .5rem;
  }
  .project-grid-frame{
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .project-track{
    transform: none !important;
  }
  .project-track .card{
    flex: initial;
    --card-shift-x: 0px;
    --card-shift-y: 0px;
    --card-tilt: 0deg;
  }
  .project-scroll-progress{
    display:none;
  }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-stage{ min-height: 560px; }
  .hero-line-b{ margin-left: clamp(.2rem, 3vw, 1.3rem); }
  .hero-line-c{
    margin-left: clamp(.3rem, 2vw, 1rem);
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .hero-bottom{
    grid-template-columns: 1fr;
    align-items:start;
  }
  .hero-kinetic .hero-cta{ justify-content:flex-start; }
  .hero-decor-flower{
    left: auto;
    right: 1rem;
    top: 1.6rem;
  }
  .hero-decor-sun{
    left: auto;
    right: 7.5rem;
    top: 13.6rem;
  }
  .hero-decor-bolt{
    left: auto;
    right: 2.4rem;
    top: 17rem;
  }
  .hero-decor-ribbon{
    left: auto;
    right: .75rem;
    top: 22.5rem;
  }
  .about-grid, .contact-grid{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .project-grid-frame{
    padding: .35rem 0 0;
  }
  .card-body{
    min-height: 0;
  }
  .thumb{
    height: 180px;
  }
}
@media (max-width: 560px){
  .hero{ padding-top: 0; }
  .hero-banner{
    justify-content:flex-start;
    font-size: .8rem;
    line-height: 1.2;
    padding: .55rem .9rem;
  }
  .hero-stage{
    min-height: 500px;
    padding-top: .75rem;
  }
  .hero-display{
    font-size: clamp(2.5rem, 16vw, 4.4rem);
    line-height: .86;
  }
  .hero-intro{ margin-top: .75rem; }
  .hero-lead{ font-size: .98rem; }
  .hero-bracket-note{
    font-size: .92rem;
    padding: .72rem .95rem;
  }
  .hero-kinetic .btn{
    min-width: 0;
    flex: 1 1 9.5rem;
  }
  .hero-badges{ gap: .5rem; }
  .hero-badges li{ font-size: .8rem; }
  .hero-decor-sun{
    width: 56px;
    height: 30px;
    right: 5.8rem;
    top: 11.5rem;
  }
  .hero-decor-bolt{
    width: 44px;
    height: 70px;
    right: .8rem;
    top: 14.5rem;
  }
  .hero-decor-ribbon{ display:none; }
  .grid{ grid-template-columns: 1fr; }
  .thumb{
    height: 176px;
  }
  .card-body{
    padding: .95rem .95rem 1rem;
    min-height: 0;
  }
  .card-body h3{
    font-size: 1.05rem;
  }
  .card-subtitle{
    font-size: .7rem;
    letter-spacing: .09em;
  }
  .card-summary{
    font-size: .92rem;
  }
  .contact-cards{ grid-template-columns: 1fr; }
  .mini-cards{ grid-template-columns: 1fr; }
  .nav-toggle{ display:inline-flex; }
  .nav-menu{
    position:absolute;
    right:1rem; top:64px;
    width:min(260px, calc(100% - 2rem));
    padding:.9rem;
    border:1px solid rgba(242,239,217,.12);
    border-radius: 16px;
    background:
      radial-gradient(260px 160px at 85% 10%, rgba(20,239,94,.05), transparent 70%),
      rgba(10,14,11,.96);
    box-shadow: var(--shadow);
    display:none;
    flex-direction:column;
    align-items:stretch;
  }
  .nav-menu.is-open{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  .project-scroll-shell{
    min-height: 0 !important;
  }
  .project-scroll-sticky{
    position: static;
    top: auto;
  }
  .project-grid-frame{
    overflow: visible;
  }
  .project-track{
    transform: none !important;
  }
  .project-scroll-progress{ display:none; }
  .hero-banner-dot,
  .hero-line,
  .hero-zap,
  .hero-decor-flower,
  .hero-decor-sun,
  .hero-decor-bolt,
  .hero-decor-ribbon{
    animation: none !important;
  }
}

/* ==========================================================================
   Digital Playground Theme Overrides
   ========================================================================== */

:root{
  --bg: #0F1117;
  --panel: #121826;
  --panel2: #181f31;
  --text: #F8FAFC;
  --muted: #94A3B8;
  --accent: #8B5CF6;
  --accent2: #00E5FF;
  --accent3: #FF3CAC;
  --accent-rgb: 139,92,246;
  --accent2-rgb: 0,229,255;
  --accent3-rgb: 255,60,172;
  --border: rgba(148,163,184,.18);
  --border-strong: rgba(148,163,184,.28);
  --shadow: 0 24px 70px rgba(2,6,23,.5);
  --radius: 20px;
}

html{
  background: var(--bg);
  scroll-behavior: smooth;
}

::selection{
  background: rgba(var(--accent-rgb), .35);
  color: var(--text);
}

body{
  font-family: "Manrope", "Inter", "Segoe UI", sans-serif;
  background:
    radial-gradient(1000px 700px at 10% 4%, rgba(var(--accent3-rgb), .12), transparent 58%),
    radial-gradient(900px 680px at 84% 12%, rgba(var(--accent-rgb), .14), transparent 58%),
    radial-gradient(840px 620px at 76% 84%, rgba(var(--accent2-rgb), .1), transparent 62%),
    linear-gradient(180deg, #0c0f16 0%, #0f1117 42%, #0b1018 100%);
  color: var(--text);
}

a:hover{
  text-decoration: none;
}

h1, h2, h3{
  font-family: "Sora", "Space Grotesk", sans-serif;
}

h4{
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: .01em;
}

.eyebrow,
.card-subtitle,
.modal-meta,
.form-console label{
  font-family: "Space Grotesk", "Manrope", sans-serif;
}

.header{
  background: rgba(15,17,23,.62);
  border-bottom-color: rgba(148,163,184,.12);
  box-shadow: 0 14px 34px rgba(2,6,23,.24);
}

.nav{
  padding: .95rem 0;
}

.logo{
  gap: .7rem;
}

.logo-text{
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
}

.logo-mark{
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border-color: rgba(var(--accent-rgb), .38);
  background:
    radial-gradient(circle at 35% 30%, rgba(var(--accent-rgb), .18), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(var(--accent2-rgb), .12), transparent 60%),
    rgba(255,255,255,.02);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), .1),
    0 0 0 1px rgba(var(--accent2-rgb), .06);
}

.logo-mark img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.95);
  filter:
    saturate(1.08)
    drop-shadow(0 0 8px rgba(var(--accent2-rgb), .24))
    drop-shadow(0 0 10px rgba(var(--accent-rgb), .2));
}

.nav-toggle{
  border-color: rgba(148,163,184,.24);
  background: rgba(255,255,255,.02);
}

.nav-menu a{
  color: rgba(148,163,184,.92);
}

.nav-menu > a:not(.btn){
  position: relative;
  padding-block: .15rem;
}

.nav-menu > a:not(.btn)::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.15rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent2-rgb), .95), rgba(var(--accent-rgb), .9), rgba(var(--accent3-rgb), .9));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .24s ease;
}

.nav-menu > a:not(.btn):hover::after,
.nav-menu > a:not(.btn):focus-visible::after{
  transform: scaleX(1);
}

.nav-menu a:hover{
  color: var(--text);
  text-shadow:
    0 0 16px rgba(var(--accent-rgb), .18),
    0 0 18px rgba(var(--accent2-rgb), .14);
}

.btn,
.chip,
.contact-card{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(var(--btn-mx, 0px), var(--btn-my, 0px), 0);
}

.btn::after,
.chip::after,
.contact-card::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(200px 120px at var(--btn-shine-x, 50%) var(--btn-shine-y, 50%), rgba(var(--accent2-rgb), .2), transparent 60%),
    radial-gradient(180px 120px at calc(var(--btn-shine-x, 50%) - 10%) calc(var(--btn-shine-y, 50%) - 12%), rgba(var(--accent-rgb), .18), transparent 64%);
  transition: opacity .25s ease;
}

.btn:hover::after,
.chip:hover::after,
.contact-card:hover::after{
  opacity: 1;
}

.btn{
  border-color: rgba(var(--accent-rgb), .4);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    rgba(18,24,38,.86);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), .08),
    0 10px 28px rgba(2,6,23,.3);
  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.btn:hover{
  border-color: rgba(var(--accent2-rgb), .42);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), .14),
    0 14px 36px rgba(2,6,23,.34),
    0 0 0 1px rgba(var(--accent2-rgb), .1);
  transform: translate3d(var(--btn-mx, 0px), calc(var(--btn-my, 0px) - 2px), 0);
}

.btn:focus-visible{
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), .2),
    inset 0 0 0 1px rgba(var(--accent-rgb), .16),
    0 12px 32px rgba(2,6,23,.3);
}

.btn-ghost{
  border-color: rgba(148,163,184,.22);
  background: rgba(255,255,255,.018);
}

.btn-ghost:hover{
  border-color: rgba(var(--accent2-rgb), .32);
  background: rgba(255,255,255,.04);
}

.section::before{
  background:
    radial-gradient(820px 260px at 10% 0%, rgba(var(--accent-rgb), .07), transparent 60%),
    radial-gradient(680px 260px at 86% 100%, rgba(var(--accent2-rgb), .06), transparent 62%);
}

.section.alt{
  background:
    radial-gradient(820px 320px at 12% 15%, rgba(var(--accent-rgb), .06), transparent 60%),
    radial-gradient(700px 300px at 92% 70%, rgba(var(--accent3-rgb), .05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.008));
  border-top-color: rgba(148,163,184,.1);
  border-bottom-color: rgba(148,163,184,.1);
}

.muted{
  color: var(--muted);
}

main section h2::after{
  background: linear-gradient(90deg, rgba(var(--accent2-rgb), .95), rgba(var(--accent-rgb), .7), rgba(var(--accent-rgb), 0));
}

[data-reveal]{
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity .6s cubic-bezier(.2,.72,.2,1) var(--reveal-delay, 0ms),
    transform .6s cubic-bezier(.2,.72,.2,1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="card"]{
  transform: translate3d(0, 22px, 0) scale(.985);
}

.is-visible[data-reveal]{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

.cursor-follower{
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent2-rgb), .45);
  background: radial-gradient(circle at 35% 35%, rgba(var(--accent2-rgb), .22), rgba(var(--accent-rgb), .08) 55%, transparent 72%);
  box-shadow:
    0 0 20px rgba(var(--accent2-rgb), .16),
    0 0 26px rgba(var(--accent-rgb), .08);
  pointer-events: none;
  z-index: 120;
  opacity: 0;
  transform: translate3d(-999px,-999px,0) scale(.7);
  transition:
    opacity .18s ease,
    width .18s ease,
    height .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.cursor-follower::before{
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: rgba(var(--accent2-rgb), .22);
  opacity: .8;
}

.cursor-follower.is-visible{
  opacity: 1;
}

.cursor-follower.is-active{
  width: 38px;
  height: 38px;
  border-color: rgba(var(--accent-rgb), .55);
  background: radial-gradient(circle at 50% 50%, rgba(var(--accent3-rgb), .16), rgba(var(--accent-rgb), .12) 60%, transparent 76%);
  box-shadow:
    0 0 30px rgba(var(--accent-rgb), .2),
    0 0 36px rgba(var(--accent2-rgb), .12);
}

.cursor-follower.is-active::before{
  inset: 9px;
  background: rgba(var(--accent2-rgb), .18);
}

/* Hero */
.hero-kinetic{
  --hero-bg: #0f1117;
  --hero-bg-2: #0b0f18;
  --hero-cream: #f8fafc;
  --hero-neon: var(--accent);
  --hero-orange: var(--accent2);
  --hero-lilac: var(--accent3);
  --hero-mx: 0;
  --hero-my: 0;
  --hero-scroll: 0;
  background:
    radial-gradient(1100px 720px at 12% 12%, rgba(var(--accent-rgb), .16), transparent 58%),
    radial-gradient(920px 680px at 85% 28%, rgba(var(--accent2-rgb), .12), transparent 62%),
    radial-gradient(800px 640px at 70% 82%, rgba(var(--accent3-rgb), .08), transparent 64%),
    linear-gradient(180deg, #0a0d15, #0f1117 44%, #0c1018);
  border-bottom-color: rgba(148,163,184,.09);
}

.hero-kinetic::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 16%),
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,.06) 0 1px,
      transparent 1px 56px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(148,163,184,.03) 0 1px,
      transparent 1px 56px
    );
  opacity: .3;
}

.hero-banner{
  min-height: 44px;
  color: rgba(248,250,252,.92);
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), .18), rgba(var(--accent2-rgb), .14) 45%, rgba(var(--accent3-rgb), .14)),
    rgba(255,255,255,.01);
  border-bottom-color: rgba(148,163,184,.12);
  backdrop-filter: blur(10px);
}

.hero-banner-dot{
  background: var(--accent2);
  box-shadow:
    0 0 0 3px rgba(var(--accent2-rgb), .14),
    0 0 16px rgba(var(--accent2-rgb), .36);
}

.hero-stage{
  isolation: isolate;
  border-top-color: rgba(148,163,184,.1);
}

.hero-ambient{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: .55;
  transform: translate3d(0,0,0);
}

.hero-blob-a{
  width: clamp(220px, 26vw, 380px);
  height: clamp(220px, 26vw, 380px);
  top: 5%;
  left: -3%;
  background: radial-gradient(circle at 40% 40%, rgba(var(--accent-rgb), .32), rgba(var(--accent-rgb), .08) 55%, transparent 72%);
  transform: translate3d(calc(var(--hero-mx, 0) * -.25px), calc(var(--hero-my, 0) * -.22px), 0);
}

.hero-blob-b{
  width: clamp(240px, 29vw, 420px);
  height: clamp(240px, 29vw, 420px);
  top: 18%;
  right: 3%;
  background: radial-gradient(circle at 50% 45%, rgba(var(--accent2-rgb), .28), rgba(var(--accent2-rgb), .06) 58%, transparent 74%);
  transform: translate3d(calc(var(--hero-mx, 0) * .28px), calc(var(--hero-my, 0) * -.2px), 0);
}

.hero-blob-c{
  width: clamp(220px, 25vw, 360px);
  height: clamp(220px, 25vw, 360px);
  bottom: 6%;
  left: 34%;
  background: radial-gradient(circle at 55% 45%, rgba(var(--accent3-rgb), .26), rgba(var(--accent3-rgb), .06) 60%, transparent 74%);
  transform: translate3d(calc(var(--hero-mx, 0) * .15px), calc(var(--hero-my, 0) * .22px), 0);
}

.hero-orbit{
  position: absolute;
  inset: auto 2% 13% 2%;
  width: 96%;
  height: clamp(110px, 18vw, 180px);
  opacity: .78;
  transform: translate3d(calc(var(--hero-mx, 0) * .18px), calc(var(--hero-my, 0) * -.16px), 0);
}

.hero-orbit path{
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 10;
  animation: orbitDash 22s linear infinite;
}

.hero-orbit path:nth-child(1){
  stroke: rgba(var(--accent2-rgb), .42);
}

.hero-orbit path:nth-child(2){
  stroke: rgba(var(--accent-rgb), .36);
  animation-duration: 28s;
  animation-direction: reverse;
}

.hero-particles{
  position: absolute;
  inset: 0;
}

.hero-particles span{
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(248,250,252,.95);
  box-shadow:
    0 0 14px rgba(248,250,252,.35),
    0 0 18px rgba(var(--accent2-rgb), .24);
  opacity: .65;
  animation: heroParticleFloat 8s ease-in-out infinite;
}

.hero-particles span:nth-child(1){ top: 12%; left: 58%; animation-delay: 0s; }
.hero-particles span:nth-child(2){ top: 24%; left: 74%; width: 3px; height: 3px; animation-delay: .8s; }
.hero-particles span:nth-child(3){ top: 34%; left: 84%; width: 5px; height: 5px; animation-delay: 1.6s; }
.hero-particles span:nth-child(4){ top: 46%; left: 63%; animation-delay: 2.4s; }
.hero-particles span:nth-child(5){ top: 56%; left: 78%; width: 3px; height: 3px; animation-delay: 3.2s; }
.hero-particles span:nth-child(6){ top: 68%; left: 52%; animation-delay: 4s; }
.hero-particles span:nth-child(7){ top: 76%; left: 88%; width: 2px; height: 2px; animation-delay: 4.8s; }
.hero-particles span:nth-child(8){ top: 22%; left: 46%; width: 2px; height: 2px; animation-delay: 5.4s; }

.hero-copy{
  max-width: min(66rem, 100%);
  transform: translate3d(calc(var(--hero-mx, 0) * .09px), calc(var(--hero-my, 0) * .08px), 0);
}

.hero-eyebrow{
  color: rgba(148,163,184,.92);
  letter-spacing: .15em;
}

.hero-intro{
  color: rgba(248,250,252,.92);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-display{
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .83;
  text-transform: uppercase;
}

.hero-line{
  position: relative;
  color: transparent;
  background:
    linear-gradient(120deg,
      rgba(248,250,252,.98) 0%,
      rgba(248,250,252,.95) 26%,
      rgba(var(--accent2-rgb), .95) 58%,
      rgba(var(--accent-rgb), .96) 78%,
      rgba(var(--accent3-rgb), .9) 100%);
  background-size: 180% 100%;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(248,250,252,.16);
  filter:
    drop-shadow(0 10px 32px rgba(var(--accent-rgb), .18))
    drop-shadow(0 0 18px rgba(var(--accent2-rgb), .08));
}

.hero-line::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--accent2-rgb), .16);
  opacity: calc(.3 + (var(--hero-scroll, 0) * .45));
  pointer-events: none;
}

.hero-lead{
  color: rgba(148,163,184,.98);
  max-width: 56ch;
}

.hero-kinetic .hero-cta{
  gap: .9rem;
}

.hero-btn{
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .46);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .06)),
    rgba(18,24,38,.86);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), .1),
    0 16px 32px rgba(2,6,23,.32),
    0 0 0 1px rgba(var(--accent-rgb), .08);
}

.hero-btn:hover{
  border-color: rgba(var(--accent2-rgb), .44);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .08)),
    rgba(18,24,38,.9);
}

.hero-btn-ghost{
  border-color: rgba(148,163,184,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(15,17,23,.52);
}

.hero-btn-ghost:hover{
  border-color: rgba(var(--accent2-rgb), .28);
  background: rgba(255,255,255,.04);
}

.hero-badges li{
  color: rgba(248,250,252,.9);
  border-color: rgba(148,163,184,.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(18,24,38,.48);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.hero-decor-flower{
  top: clamp(.9rem, 2.5vw, 1.8rem);
  left: auto;
  right: clamp(1rem, 3.6vw, 3rem);
  width: clamp(40px, 4.8vw, 64px);
  height: clamp(40px, 4.8vw, 64px);
  opacity: .92;
}

.hero-decor-flower span{
  background: linear-gradient(135deg, rgba(var(--accent3-rgb), .95), rgba(var(--accent-rgb), .92) 55%, rgba(var(--accent2-rgb), .88));
}

.hero-decor-sun{
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,.7) 0 12%, transparent 13%),
    linear-gradient(180deg, rgba(var(--accent3-rgb), .95), rgba(var(--accent-rgb), .92));
  border-color: rgba(var(--accent3-rgb), .3);
  box-shadow:
    0 12px 30px rgba(var(--accent3-rgb), .18),
    0 0 26px rgba(var(--accent-rgb), .12);
}

.hero-decor-sun::after{
  border-top-color: rgba(8,11,17,.86);
}

.hero-decor-bolt{
  background: linear-gradient(180deg, rgba(var(--accent2-rgb), .98), rgba(var(--accent-rgb), .95));
  filter: drop-shadow(0 0 22px rgba(var(--accent2-rgb), .24));
}

.hero-decor-ribbon{
  background:
    radial-gradient(circle at 30% 45%, rgba(255,255,255,.45) 0 15%, transparent 16%),
    radial-gradient(circle at 64% 55%, rgba(var(--accent2-rgb), .32) 0 18%, transparent 19%),
    linear-gradient(135deg, rgba(var(--accent3-rgb), .92), rgba(var(--accent-rgb), .9), rgba(var(--accent2-rgb), .82));
  filter: blur(.1px) drop-shadow(0 12px 22px rgba(var(--accent-rgb), .2));
}

.hero-decor-ribbon::before,
.hero-decor-ribbon::after{
  border-color: rgba(248,250,252,.18);
}

@media (max-width: 920px){
  .hero-decor-flower{
    top: 1.1rem;
    right: .9rem;
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 560px){
  .hero-decor-flower{
    top: .95rem;
    right: .7rem;
    width: 40px;
    height: 40px;
  }
}

/* Filters & Project frame */
.project-grid-frame{
  border-color: rgba(148,163,184,.12);
  background:
    radial-gradient(740px 220px at 8% 0%, rgba(var(--accent-rgb), .07), transparent 70%),
    radial-gradient(740px 220px at 90% 5%, rgba(var(--accent2-rgb), .06), transparent 72%),
    rgba(12,16,24,.72);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.01),
    0 16px 42px rgba(2,6,23,.24);
}

.chip{
  border-color: rgba(148,163,184,.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(18,24,38,.65);
  color: rgba(148,163,184,.95);
  transition:
    border-color .2s ease,
    color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.chip:hover{
  color: var(--text);
  border-color: rgba(var(--accent2-rgb), .28);
  transform: translate3d(var(--btn-mx, 0px), calc(var(--btn-my, 0px) - 1px), 0);
}

.chip.is-active{
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .45);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .04)),
    rgba(18,24,38,.78);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), .08),
    0 8px 18px rgba(2,6,23,.18);
}

/* Project Cards (3D tilt + glow) */
.card{
  border-color: rgba(148,163,184,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(18,24,38,.86);
  box-shadow:
    0 12px 36px rgba(2,6,23,.28),
    inset 0 0 0 1px rgba(255,255,255,.01);
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--card-tilt-x, 0deg))
    rotateY(var(--card-tilt-y, 0deg))
    translate3d(var(--card-shift-x, 0px), calc(var(--card-shift-y, 0px) + (var(--card-hover-lift, 0px) * -1)), 0)
    rotate(var(--card-tilt, 0deg));
  transition:
    transform .2s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.card::before{
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--accent2-rgb), .95), rgba(var(--accent-rgb), .86), rgba(var(--accent3-rgb), .88));
  opacity: .9;
}

.card::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(320px 220px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(var(--accent2-rgb), .16), transparent 58%),
    radial-gradient(260px 220px at calc(var(--spot-x, 50%) - 12%) calc(var(--spot-y, 50%) - 10%), rgba(var(--accent-rgb), .14), transparent 64%);
  transition: opacity .22s ease;
}

.card:hover,
.card.is-tilting{
  border-color: rgba(var(--accent-rgb), .34);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), .1),
    0 20px 44px rgba(2,6,23,.36),
    0 0 28px rgba(var(--accent-rgb), .08);
}

.card:hover{
  transform:
    perspective(1100px)
    rotateX(var(--card-tilt-x, 0deg))
    rotateY(var(--card-tilt-y, 0deg))
    translate3d(var(--card-shift-x, 0px), calc(var(--card-shift-y, 0px) - 5px + (var(--card-hover-lift, 0px) * -1)), 0)
    rotate(var(--card-tilt, 0deg));
}

.card:hover::after,
.card.is-tilting::after{
  opacity: 1;
}

.card:focus-visible{
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), .22),
    0 14px 38px rgba(2,6,23,.3);
}

.thumb{
  border-bottom-color: rgba(148,163,184,.1);
  background:
    radial-gradient(520px 240px at 15% 12%, rgba(var(--accent-rgb), .22), transparent 58%),
    radial-gradient(420px 220px at 90% 18%, rgba(var(--accent2-rgb), .2), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}

.card:nth-child(2) .thumb{
  background:
    radial-gradient(520px 240px at 16% 18%, rgba(var(--accent3-rgb), .22), transparent 58%),
    radial-gradient(430px 230px at 88% 22%, rgba(var(--accent-rgb), .18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}

.card:nth-child(3) .thumb{
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(var(--accent2-rgb), .2), transparent 58%),
    radial-gradient(430px 210px at 85% 20%, rgba(var(--accent3-rgb), .18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}

.thumb::before{
  background:
    radial-gradient(circle at 14px 17px, rgba(var(--accent3-rgb), .88) 0 2px, transparent 3px),
    radial-gradient(circle at 24px 17px, rgba(248,250,252,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 34px 17px, rgba(var(--accent2-rgb), .8) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-bottom-color: rgba(148,163,184,.08);
}

.thumb::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.006)),
    radial-gradient(300px 140px at 20% 15%, rgba(var(--accent-rgb), .18), transparent 65%),
    radial-gradient(280px 140px at 84% 24%, rgba(var(--accent2-rgb), .15), transparent 68%),
    rgba(12,16,24,.76);
  border-color: rgba(148,163,184,.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.015),
    0 12px 24px rgba(2,6,23,.28);
}

.thumb-media{
  position: absolute;
  inset: 3.1rem .95rem .95rem .95rem;
  z-index: 1;
  width: calc(100% - 1.9rem);
  height: calc(100% - 4.05rem);
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.1);
  background: rgba(12,16,24,.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 8px 20px rgba(2,6,23,.22);
  transition: transform .35s ease, filter .35s ease, border-color .35s ease;
}

.thumb--image .thumb-label{
  background:
    linear-gradient(180deg, rgba(2,6,23,.7), rgba(2,6,23,.5)),
    rgba(15,17,23,.58);
}

.card:hover .thumb::after{
  border-color: rgba(var(--accent2-rgb), .18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.015),
    0 16px 28px rgba(2,6,23,.3);
}

.card:hover .thumb-media{
  transform: scale(1.02);
  filter: saturate(1.05);
  border-color: rgba(var(--accent2-rgb), .2);
}

.thumb-label{
  color: rgba(248,250,252,.95);
  border-color: rgba(var(--accent2-rgb), .18);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .05)),
    rgba(15,17,23,.58);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), .08),
    0 10px 20px rgba(2,6,23,.22);
}

.card-body{
  position: relative;
  z-index: 1;
}

.card-body,
.thumb-label{
  transform: translateZ(28px);
}

.card-pro-meta{
  color: rgba(148,163,184,.7);
}

.card-index-pill{
  border-color: rgba(var(--accent-rgb), .28);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), .04)),
    rgba(18,24,38,.64);
}

.card-pro-role::before{
  background: rgba(var(--accent2-rgb), .55);
}

.card-body h3{
  color: rgba(248,250,252,.98);
}

.card-subtitle{
  color: rgba(148,163,184,.76);
}

.card-summary{
  color: rgba(148,163,184,.92);
}

.card-body > p:not(.card-subtitle):not(.card-summary){
  color: rgba(148,163,184,.88);
}

.tags span{
  color: rgba(248,250,252,.94);
  border-color: rgba(148,163,184,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(18,24,38,.6);
}

.card-cta-row{
  border-top-color: rgba(148,163,184,.12);
  color: rgba(148,163,184,.9);
}

.card-cta-icon{
  border-color: rgba(148,163,184,.18);
  background: rgba(255,255,255,.015);
}

.card:hover .card-cta-row{
  color: var(--text);
}

.card:hover .card-cta-icon{
  border-color: rgba(var(--accent2-rgb), .24);
  background: rgba(var(--accent2-rgb), .06);
  color: rgba(var(--accent2-rgb), .95);
}

/* About */
.about-grid{
  gap: 2.1rem;
}

.about-col-main{
  display: grid;
  align-content: start;
  gap: .9rem;
}

.about-visual{
  --about-photo-inset: .75rem;
  position: relative;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 2 / 3;
  height: auto;
  justify-self: start;
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.14);
  background:
    radial-gradient(520px 220px at 18% 20%, rgba(var(--accent-rgb), .18), transparent 62%),
    radial-gradient(520px 220px at 82% 72%, rgba(var(--accent2-rgb), .14), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.008)),
    rgba(18,24,38,.72);
  overflow: hidden;
  box-shadow:
    0 16px 42px rgba(2,6,23,.3),
    inset 0 0 0 1px rgba(255,255,255,.01);
}

.about-visual::before,
.about-visual::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.about-visual::before{
  width: 240px;
  height: 240px;
  top: -72px;
  right: -50px;
  background: radial-gradient(circle at 35% 35%, rgba(var(--accent3-rgb), .3), rgba(var(--accent3-rgb), 0) 68%);
  filter: blur(4px);
}

.about-visual::after{
  width: 260px;
  height: 260px;
  bottom: -100px;
  left: -70px;
  background: radial-gradient(circle at 45% 45%, rgba(var(--accent2-rgb), .2), rgba(var(--accent2-rgb), 0) 72%);
}

.about-visual-ring{
  position: absolute;
  inset: 11% 16%;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .2);
  box-shadow:
    0 0 0 1px rgba(var(--accent2-rgb), .08),
    inset 0 0 40px rgba(var(--accent-rgb), .05);
  animation: aboutOrbit 13s linear infinite;
}

.about-visual-core{
  position: absolute;
  inset: 50% auto auto 50%;
  width: clamp(96px, 11vw, 134px);
  height: clamp(96px, 11vw, 134px);
  transform: translate(-50%, -50%);
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  letter-spacing: .12em;
  color: rgba(248,250,252,.98);
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb), .28), rgba(var(--accent2-rgb), .16) 55%, rgba(var(--accent3-rgb), .2)),
    rgba(18,24,38,.9);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow:
    0 18px 34px rgba(2,6,23,.28),
    0 0 34px rgba(var(--accent-rgb), .14),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

.about-visual-grid{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.about-visual-grid::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(148,163,184,.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(148,163,184,.05) 0 1px, transparent 1px 34px);
  opacity: .2;
  z-index: 2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
  pointer-events: none;
}

.about-visual-grid::after{
  content: "";
  position: absolute;
  inset: var(--about-photo-inset);
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.08);
  opacity: .75;
  z-index: 3;
  pointer-events: none;
}

.about-visual-photo{
  position: absolute;
  inset: var(--about-photo-inset);
  width: calc(100% - (var(--about-photo-inset) * 2));
  height: calc(100% - (var(--about-photo-inset) * 2));
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.1);
  background: rgba(10,12,18,.5);
  box-shadow:
    0 18px 28px rgba(2,6,23,.22),
    inset 0 0 0 1px rgba(255,255,255,.02);
  z-index: 1;
}

@media (max-width: 920px){
  .about-visual{
    justify-self: center;
  }
}

@media (max-width: 560px){
  .about-visual{
    --about-photo-inset: .55rem;
    max-width: 100%;
  }

  .about-visual-ring{
    inset: 10% 11%;
  }
}

.about-actions .btn{
  min-width: 150px;
}

.skill-list{
  gap: .75rem;
}

.skill-list li{
  position: relative;
  display: grid;
  gap: .35rem;
  padding: .85rem .95rem 1.85rem;
  border-color: rgba(148,163,184,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.01)),
    rgba(18,24,38,.7);
}

.skill-list li:hover{
  border-color: rgba(var(--accent-rgb), .26);
  box-shadow:
    0 14px 28px rgba(2,6,23,.22),
    0 0 0 1px rgba(var(--accent-rgb), .08);
}

.skill-list .skill-heading{
  color: rgba(248,250,252,.96);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: .02em;
}

.skill-list li > .muted{
  color: rgba(148,163,184,.95) !important;
  font-size: .9rem;
  line-height: 1.35;
}

.skill-list .skill-meter{
  position: absolute;
  left: .95rem;
  right: .95rem;
  bottom: .58rem;
  height: 7px;
  border-radius: 999px;
  background: rgba(148,163,184,.14);
  border: 1px solid rgba(148,163,184,.08);
  overflow: visible;
}

.skill-list .skill-meter-fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--skill-progress, 0) * 1%);
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(var(--accent2-rgb), .95), rgba(var(--accent-rgb), .92), rgba(var(--accent3-rgb), .88));
  box-shadow:
    0 0 12px rgba(var(--accent2-rgb), .18),
    0 0 18px rgba(var(--accent-rgb), .12);
}

.skill-list .skill-percent{
  position: absolute;
  left: clamp(1.35rem, calc(var(--skill-progress, 0) * 1%), calc(100% - 1.35rem));
  bottom: calc(100% + .45rem);
  transform: translateX(-50%);
  min-width: 2.7rem;
  padding: .18rem .42rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent2-rgb), .18);
  background: rgba(7,12,20,.92);
  box-shadow: 0 10px 24px rgba(2,6,23,.24);
  color: rgba(var(--accent2-rgb), .96);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.mini{
  border-color: rgba(148,163,184,.12);
  background:
    radial-gradient(280px 140px at 12% 10%, rgba(var(--accent-rgb), .08), transparent 70%),
    radial-gradient(240px 140px at 88% 85%, rgba(var(--accent2-rgb), .07), transparent 72%),
    rgba(18,24,38,.7);
  box-shadow: 0 12px 28px rgba(2,6,23,.22);
}

.mini h4{
  color: rgba(248,250,252,.96);
}

/* Contact + console form */
.contact-card{
  border-color: rgba(148,163,184,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.01)),
    rgba(18,24,38,.72);
  color: rgba(148,163,184,.95);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.008);
  transition:
    border-color .2s ease,
    transform .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.contact-card span{
  color: rgba(var(--accent2-rgb), .95);
}

.contact-card:hover{
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .24);
  box-shadow:
    0 14px 28px rgba(2,6,23,.24),
    0 0 0 1px rgba(var(--accent-rgb), .08);
  transform: translate3d(var(--btn-mx, 0px), calc(var(--btn-my, 0px) - 2px), 0);
}

.form{
  border-color: rgba(148,163,184,.14);
  background:
    radial-gradient(620px 240px at 10% 0%, rgba(var(--accent-rgb), .09), transparent 65%),
    radial-gradient(540px 240px at 90% 12%, rgba(var(--accent2-rgb), .08), transparent 68%),
    rgba(18,24,38,.82);
  box-shadow:
    0 20px 56px rgba(2,6,23,.3),
    inset 0 0 0 1px rgba(255,255,255,.01);
}

.form-console{
  position: relative;
  padding-top: 3.15rem;
  border-radius: 22px;
}

.form-console::before{
  content: "message.console";
  position: absolute;
  top: .9rem;
  left: 1.1rem;
  color: rgba(148,163,184,.88);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.form-console::after{
  content: "";
  position: absolute;
  top: 1.05rem;
  right: 1.15rem;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: rgba(var(--accent2-rgb), .95);
  box-shadow:
    0 0 14px rgba(var(--accent2-rgb), .35),
    0 0 20px rgba(var(--accent-rgb), .18);
  animation: consoleBlink 1.05s steps(1, end) infinite;
}

.form-console .field{
  gap: .45rem;
  margin-bottom: 1rem;
}

.form-console label{
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(148,163,184,.9);
}

.form-console label::before{
  content: ">";
  color: rgba(var(--accent2-rgb), .95);
  text-shadow: 0 0 12px rgba(var(--accent2-rgb), .28);
}

.form-console label::after{
  content: ":";
  color: rgba(148,163,184,.88);
}

.form-console .field:focus-within label{
  color: rgba(248,250,252,.94);
}

input,
textarea{
  border-color: rgba(148,163,184,.16);
  background: rgba(11,14,22,.66);
  color: var(--text);
}

input::placeholder,
textarea::placeholder{
  color: rgba(148,163,184,.56);
}

.form-console input,
.form-console textarea{
  border-radius: 12px;
  font-family: "Manrope", "Inter", sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.006);
}

input:focus,
textarea:focus{
  border-color: rgba(var(--accent2-rgb), .36);
  background: rgba(12,16,24,.78);
  box-shadow:
    0 0 0 3px rgba(var(--accent2-rgb), .12),
    0 0 0 1px rgba(var(--accent-rgb), .08);
}

.error{
  color: rgba(var(--accent3-rgb), .92);
}

.form-status{
  color: rgba(248,250,252,.94);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: .02em;
}

.form-status::after{
  content: "_";
  display: inline-block;
  margin-left: .18rem;
  color: rgba(var(--accent2-rgb), .95);
  animation: consoleBlink 1s steps(1, end) infinite;
}

/* Footer */
.footer{
  border-top-color: rgba(148,163,184,.1);
  background:
    radial-gradient(760px 220px at 15% 0%, rgba(var(--accent-rgb), .06), transparent 65%),
    radial-gradient(700px 220px at 90% 0%, rgba(var(--accent2-rgb), .04), transparent 68%),
    rgba(8,10,16,.4);
}

.footer .muted{
  color: rgba(148,163,184,.75);
}

/* Cinematic Case Study Modal */
.modal{
  z-index: 140;
}

.modal-backdrop{
  background:
    radial-gradient(700px 380px at 20% 15%, rgba(var(--accent-rgb), .16), transparent 70%),
    radial-gradient(700px 380px at 82% 24%, rgba(var(--accent2-rgb), .12), transparent 72%),
    rgba(6,8,14,.68);
  backdrop-filter: blur(10px) saturate(120%);
}

.modal-panel{
  width: min(1080px, calc(100% - 2rem));
  margin: 4vh auto;
  border-color: rgba(148,163,184,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008)),
    rgba(14,18,28,.95);
  box-shadow:
    0 36px 110px rgba(2,6,23,.48),
    0 0 0 1px rgba(255,255,255,.01);
}

.modal-close{
  top: .95rem;
  right: .95rem;
  z-index: 3;
  border-color: rgba(148,163,184,.18);
  background: rgba(15,17,23,.64);
}

.modal-close:hover{
  border-color: rgba(var(--accent2-rgb), .24);
  background: rgba(var(--accent2-rgb), .06);
}

.modal-content{
  padding: 0;
}

.modal-hero{
  position: relative;
  height: clamp(180px, 25vw, 260px);
  border-bottom: 1px solid rgba(148,163,184,.12);
  background:
    radial-gradient(620px 260px at 18% 22%, rgba(var(--accent-rgb), .22), transparent 60%),
    radial-gradient(640px 280px at 84% 34%, rgba(var(--accent2-rgb), .18), transparent 62%),
    radial-gradient(520px 260px at 65% 86%, rgba(var(--accent3-rgb), .1), transparent 66%),
    linear-gradient(180deg, rgba(12,16,24,.88), rgba(10,13,22,.94));
  overflow: hidden;
}

.modal-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, rgba(10,13,22,0), rgba(10,13,22,.6));
  pointer-events: none;
}

.modal-hero-grid{
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(148,163,184,.06) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(148,163,184,.05) 0 1px, transparent 1px 40px);
  opacity: .28;
}

.modal-hero-glow{
  position: absolute;
  border-radius: 50%;
  filter: blur(12px);
  opacity: .7;
}

.modal-hero-glow-a{
  width: 280px;
  height: 280px;
  left: -40px;
  top: -90px;
  background: radial-gradient(circle at 45% 45%, rgba(var(--accent-rgb), .36), rgba(var(--accent-rgb), 0) 70%);
}

.modal-hero-glow-b{
  width: 320px;
  height: 320px;
  right: -30px;
  top: -100px;
  background: radial-gradient(circle at 45% 45%, rgba(var(--accent2-rgb), .3), rgba(var(--accent2-rgb), 0) 72%);
}

.modal-hero-line{
  position: absolute;
  inset: auto 0 16px 0;
  width: 100%;
  height: 88px;
  opacity: .84;
  filter:
    drop-shadow(0 0 18px rgba(var(--accent2-rgb), .18))
    drop-shadow(0 0 22px rgba(var(--accent-rgb), .12));
}

.modal-hero-line path{
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal-hero-line path:nth-child(1){
  stroke: rgba(var(--accent2-rgb), .7);
}

.modal-hero-line path:nth-child(2){
  stroke: rgba(var(--accent-rgb), .72);
}

.modal-copy{
  padding: 1.35rem 1.35rem 1.55rem;
}

.modal-meta{
  color: rgba(148,163,184,.82);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#modalTitle{
  margin-top: .35rem;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: rgba(248,250,252,.98);
}

#modalSubtitle{
  margin-top: .5rem;
  color: rgba(148,163,184,.95);
  max-width: 58ch;
}

.modal-grid{
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
  gap: 1.1rem;
  align-items: start;
}

.modal-story{
  display: grid;
  gap: .85rem;
}

.modal-story-block{
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
  padding: .95rem 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
    rgba(18,24,38,.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.008);
}

.modal-story-block h4{
  margin: 0 0 .45rem;
  color: rgba(248,250,252,.9);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.modal-story-block p{
  margin: 0;
  color: rgba(148,163,184,.95);
  line-height: 1.55;
}

.modal-aside{
  gap: .85rem;
}

.aside-box{
  border-color: rgba(148,163,184,.14);
  border-radius: 16px;
  padding: .95rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008)),
    rgba(18,24,38,.56);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.008);
}

.aside-box h4{
  margin: 0 0 .45rem;
  color: rgba(248,250,252,.9);
  letter-spacing: .12em;
  font-size: .76rem;
  text-transform: uppercase;
}

.link-list a{
  border-color: rgba(148,163,184,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008)),
    rgba(15,17,23,.44);
  color: rgba(148,163,184,.92);
}

.link-list a:hover{
  color: var(--text);
  border-color: rgba(var(--accent2-rgb), .24);
  background:
    linear-gradient(180deg, rgba(var(--accent2-rgb), .09), rgba(var(--accent-rgb), .04)),
    rgba(15,17,23,.55);
}

.modal.is-open .modal-panel{
  animation: modalPanelIn .34s cubic-bezier(.2,.72,.2,1);
}

.modal.is-open .modal-hero{
  animation: modalHeroIn .42s cubic-bezier(.2,.72,.2,1);
}

.modal.is-open .modal-story-block,
.modal.is-open .aside-box{
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: modalSectionIn .46s cubic-bezier(.2,.72,.2,1) forwards;
}

.modal.is-open .modal-story-block:nth-child(1){ animation-delay: .05s; }
.modal.is-open .modal-story-block:nth-child(2){ animation-delay: .11s; }
.modal.is-open .modal-story-block:nth-child(3){ animation-delay: .17s; }
.modal.is-open .modal-story-block:nth-child(4){ animation-delay: .23s; }
.modal.is-open .modal-aside .aside-box:nth-child(1){ animation-delay: .13s; }
.modal.is-open .modal-aside .aside-box:nth-child(2){ animation-delay: .19s; }
.modal.is-open .modal-aside .aside-box:nth-child(3){ animation-delay: .25s; }

/* Mobile refinements and fullscreen case-study panel */
@media (max-width: 920px){
  .hero-copy{
    transform: none;
  }

  .hero-blob-a{ left: -10%; top: 4%; }
  .hero-blob-b{ right: -10%; top: 16%; }
  .hero-blob-c{ left: 18%; bottom: 10%; }

  .hero-orbit{
    inset: auto -6% 14% -6%;
    width: 112%;
    opacity: .6;
  }

  .card,
  .card:hover{
    transform:
      perspective(1100px)
      rotateX(0deg)
      rotateY(0deg)
      translate3d(var(--card-shift-x, 0px), var(--card-shift-y, 0px), 0)
      rotate(var(--card-tilt, 0deg));
  }

  .modal-panel{
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border-inline: 0;
    border-top: 0;
    border-bottom: 0;
    max-width: none;
  }

  .modal-content{
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .modal-hero{
    flex: 0 0 auto;
    height: 190px;
  }

  .modal-copy{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  .modal-grid{
    grid-template-columns: 1fr;
    gap: .95rem;
  }

  .modal-close{
    top: max(.75rem, env(safe-area-inset-top));
    right: 1rem;
  }
}

@media (max-width: 560px){
  .hero-banner{
    border-bottom-color: rgba(148,163,184,.08);
    background:
      linear-gradient(90deg, rgba(var(--accent-rgb), .14), rgba(var(--accent2-rgb), .1) 45%, rgba(var(--accent3-rgb), .1)),
      rgba(255,255,255,.01);
  }

  .hero-display{
    letter-spacing: -.045em;
  }

  .hero-line{
    -webkit-text-stroke-width: .6px;
  }

  .thumb-label{
    font-size: .8rem;
  }

  .form-console{
    padding-top: 3rem;
  }

  .form-console::before{
    left: .95rem;
  }

  .form-console::after{
    right: .95rem;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto;
  }

  [data-reveal]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cursor-follower{
    display: none !important;
  }

  .hero-orbit path,
  .hero-particles span,
  .about-visual-ring,
  .form-console::after,
  .form-status::after{
    animation: none !important;
  }

  .modal.is-open .modal-panel,
  .modal.is-open .modal-hero,
  .modal.is-open .modal-story-block,
  .modal.is-open .aside-box{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes orbitDash{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -240; }
}

@keyframes heroParticleFloat{
  0%, 100%{
    transform: translate3d(0,0,0) scale(1);
    opacity: .45;
  }
  50%{
    transform: translate3d(0,-10px,0) scale(1.2);
    opacity: .9;
  }
}

@keyframes aboutOrbit{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes consoleBlink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: .15; }
}

@keyframes modalPanelIn{
  from{
    opacity: .86;
    transform: translate3d(0, 14px, 0) scale(.988);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes modalHeroIn{
  from{
    opacity: .86;
    transform: translate3d(0, -10px, 0) scale(1.01);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes modalSectionIn{
  from{
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ==========================================================================
   Professional Clarity Pass (content-first, less gimmick)
   ========================================================================== */

.cursor-follower{
  display: none !important;
}

/* Hero: reduce visual noise and keep focus on name + CTA */
.hero-blob{
  opacity: .28;
  filter: blur(24px);
}

.hero-blob-c{
  opacity: .18;
}

.hero-orbit{
  opacity: .28;
}

.hero-orbit path{
  stroke-width: 1.2;
}

.hero-particles{
  opacity: .45;
}

.hero-particles span{
  opacity: .4;
  box-shadow:
    0 0 10px rgba(248,250,252,.2),
    0 0 10px rgba(var(--accent2-rgb), .12);
}

.hero-decor-sun,
.hero-decor-bolt,
.hero-decor-ribbon{
  display: none;
}

.hero-decor-flower{
  opacity: .8;
}

.hero-line{
  filter:
    drop-shadow(0 6px 18px rgba(var(--accent-rgb), .12))
    drop-shadow(0 0 10px rgba(var(--accent2-rgb), .06));
}

.hero-badges li{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(18,24,38,.38);
}

/* Project cards: remove gimmicky 3D feel, keep clean hierarchy */
.card{
  transform-style: flat;
  transform:
    translate3d(var(--card-shift-x, 0px), var(--card-shift-y, 0px), 0)
    rotate(var(--card-tilt, 0deg));
  border-color: rgba(148,163,184,.14);
  box-shadow:
    0 10px 26px rgba(2,6,23,.2),
    inset 0 0 0 1px rgba(255,255,255,.008);
}

.card:hover{
  transform:
    translate3d(var(--card-shift-x, 0px), calc(var(--card-shift-y, 0px) - 2px), 0)
    rotate(var(--card-tilt, 0deg));
  border-color: rgba(var(--accent-rgb), .22);
  box-shadow:
    0 12px 30px rgba(2,6,23,.24),
    0 0 0 1px rgba(var(--accent-rgb), .06);
}

.card::after{
  display: none;
}

.card::before{
  height: 1px;
  opacity: .7;
}

.card-body,
.thumb-label{
  transform: none;
}

.thumb::after{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.012),
    0 8px 18px rgba(2,6,23,.18);
}

.card:hover .thumb::after{
  transform: translateY(-1px) scale(1.005);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.012),
    0 10px 20px rgba(2,6,23,.2);
}

.thumb-label{
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), .06),
    0 6px 14px rgba(2,6,23,.14);
}

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

.card:hover .card-cta-icon{
  transform: translate(1px, -1px);
}

/* Buttons/links: keep subtle */
.btn{
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), .07),
    0 8px 20px rgba(2,6,23,.2);
}

.btn:hover{
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), .1),
    0 10px 24px rgba(2,6,23,.22),
    0 0 0 1px rgba(var(--accent2-rgb), .05);
}

.btn::after,
.chip::after,
.contact-card::after{
  opacity: 0 !important;
}

/* Contact (left column refresh) */
.contact-col-main{
  display: grid;
  align-content: start;
  gap: .95rem;
}

.contact-col-main > .muted{
  margin: 0;
  max-width: 34ch;
}

.contact-showcase{
  position: relative;
  margin-top: .15rem;
}

.contact-showcase::before{
  content: "";
  position: absolute;
  inset: -10% -6% auto auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(var(--accent2-rgb), .16) 0%,
      rgba(var(--accent-rgb), .12) 44%,
      transparent 72%);
  filter: blur(18px);
  pointer-events: none;
  opacity: .85;
}

.contact-showcase-visual{
  min-height: clamp(300px, 30vw, 390px);
}

.contact-visual-panel{
  position: relative;
  min-height: inherit;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(420px 240px at 14% 12%, rgba(var(--accent-rgb), .08), transparent 70%),
    radial-gradient(420px 260px at 84% 16%, rgba(var(--accent2-rgb), .08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.006)),
    rgba(18,24,38,.62);
  box-shadow:
    0 20px 48px rgba(2,6,23,.26),
    inset 0 0 0 1px rgba(255,255,255,.008);
}

.contact-visual-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .32;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.2));
  pointer-events: none;
}

.contact-visual-panel::after{
  content: "";
  position: absolute;
  inset: auto -18% 26% -12%;
  height: 2px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(var(--accent2-rgb), .12) 18%,
      rgba(var(--accent-rgb), .28) 48%,
      rgba(var(--accent2-rgb), .12) 78%,
      transparent 100%);
  box-shadow: 0 0 20px rgba(var(--accent2-rgb), .14);
  animation: contactLineSweep 5.2s ease-in-out infinite;
  pointer-events: none;
}

.contact-visual-ring{
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(255,255,255,.005);
  pointer-events: none;
}

.contact-visual-ring-a{
  width: 180px;
  height: 180px;
  top: -32px;
  right: -16px;
  opacity: .28;
  animation: contactFloatRingA 9s ease-in-out infinite;
}

.contact-visual-ring-b{
  width: 250px;
  height: 250px;
  bottom: -92px;
  left: -70px;
  opacity: .18;
  animation: contactFloatRingB 12s ease-in-out infinite;
}

.contact-radar{
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: clamp(170px, 19vw, 235px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(148,163,184,.15);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent2-rgb), .08) 0%, rgba(255,255,255,.01) 56%, transparent 76%),
    rgba(15,17,23,.35);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.01),
    0 18px 34px rgba(2,6,23,.24);
  overflow: hidden;
  z-index: 1;
}

.contact-radar-ring{
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(148,163,184,.12);
  transform: translate(-50%, -50%);
}

.contact-radar-ring-1{ width: 34%; height: 34%; }
.contact-radar-ring-2{ width: 60%; height: 60%; }
.contact-radar-ring-3{ width: 84%; height: 84%; }

.contact-radar-axis{
  position: absolute;
  background: rgba(148,163,184,.09);
}

.contact-radar-axis-x{
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.contact-radar-axis-y{
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.contact-radar-sweep{
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(var(--accent2-rgb), 0) 0%,
      rgba(var(--accent2-rgb), 0) 72%,
      rgba(var(--accent2-rgb), .08) 82%,
      rgba(var(--accent-rgb), .34) 94%,
      rgba(var(--accent2-rgb), 0) 100%);
  animation: contactRadarSweep 4.8s linear infinite;
  opacity: .95;
}

.contact-radar-core{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(var(--accent2-rgb), .95);
  box-shadow:
    0 0 12px rgba(var(--accent2-rgb), .42),
    0 0 22px rgba(var(--accent-rgb), .22);
  animation: contactCorePulse 2.3s ease-in-out infinite;
}

.contact-radar-core::before{
  content: "";
  position: absolute;
  inset: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(var(--accent2-rgb), .24);
  animation: contactCoreRing 2.3s ease-out infinite;
}

.contact-radar-orbit{
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  border: 1px dashed rgba(148,163,184,.12);
  animation: contactOrbitSpin 10s linear infinite reverse;
}

.contact-radar-orbiter{
  position: absolute;
  left: 50%;
  top: -5px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(248,250,252,.9);
  box-shadow:
    0 0 10px rgba(248,250,252,.3),
    0 0 14px rgba(var(--accent-rgb), .15);
}

.contact-radar-dot{
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(248,250,252,.86);
  box-shadow:
    0 0 8px rgba(248,250,252,.24),
    0 0 12px rgba(var(--accent2-rgb), .12);
  animation: contactDotPulse 2.6s ease-in-out infinite;
}

.contact-radar-dot-a{ top: 28%; left: 71%; animation-delay: .2s; }
.contact-radar-dot-b{ top: 62%; left: 25%; animation-delay: .9s; }
.contact-radar-dot-c{ top: 20%; left: 32%; animation-delay: 1.4s; }
.contact-radar-dot-d{ top: 74%; left: 66%; animation-delay: 1.9s; }

.contact-wave-panel{
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  min-height: 112px;
  padding: .8rem .9rem .75rem;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.13);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004)),
    rgba(15,17,23,.44);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.006),
    0 10px 24px rgba(2,6,23,.18);
  overflow: hidden;
}

.contact-wave-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg,
      rgba(148,163,184,.045) 0,
      rgba(148,163,184,.045) 1px,
      transparent 1px,
      transparent 14px);
  opacity: .45;
  pointer-events: none;
}

.contact-wave-panel::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36%;
  left: -38%;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(var(--accent2-rgb), .08),
      rgba(var(--accent-rgb), .12),
      transparent);
  filter: blur(1px);
  animation: contactPanelScan 4.2s ease-in-out infinite;
  pointer-events: none;
}

.contact-wave{
  position: relative;
  z-index: 1;
  height: 64px;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  align-items: end;
  gap: .28rem;
}

.contact-wave span{
  display: block;
  width: 100%;
  height: var(--h, 20px);
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      rgba(var(--accent2-rgb), .95) 0%,
      rgba(var(--accent-rgb), .72) 58%,
      rgba(var(--accent3-rgb), .38) 100%);
  box-shadow: 0 0 10px rgba(var(--accent2-rgb), .08);
  transform-origin: 50% 100%;
  animation: contactWavePulse 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .07s);
}

.contact-float-chip{
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: .3rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)),
    rgba(18,24,38,.66);
  color: rgba(226,232,240,.9);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow:
    0 8px 18px rgba(2,6,23,.2),
    inset 0 0 0 1px rgba(255,255,255,.008);
}

.contact-float-chip-a{
  top: 1.15rem;
  right: 1rem;
  animation: contactChipFloatA 4.2s ease-in-out infinite;
}

.contact-float-chip-b{
  top: 3.6rem;
  right: 3.8rem;
  animation: contactChipFloatB 5.2s ease-in-out infinite;
}

.contact-float-chip-c{
  top: 8.5rem;
  right: 1.35rem;
  animation: contactChipFloatA 5.6s ease-in-out infinite .4s;
}

.contact-float-chip-d{
  top: 11.6rem;
  right: 4.35rem;
  animation: contactChipFloatB 4.8s ease-in-out infinite .5s;
}

@keyframes contactRadarSweep{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes contactOrbitSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(-360deg); }
}

@keyframes contactDotPulse{
  0%, 100%{
    transform: scale(1);
    opacity: .72;
  }
  50%{
    transform: scale(1.22);
    opacity: 1;
  }
}

@keyframes contactCorePulse{
  0%, 100%{
    transform: translate(-50%, -50%) scale(1);
  }
  50%{
    transform: translate(-50%, -50%) scale(1.12);
  }
}

@keyframes contactCoreRing{
  0%{
    opacity: .65;
    width: 8px;
    height: 8px;
  }
  100%{
    opacity: 0;
    width: 64px;
    height: 64px;
  }
}

@keyframes contactWavePulse{
  0%, 100%{
    transform: scaleY(.82);
    opacity: .86;
  }
  50%{
    transform: scaleY(1.15);
    opacity: 1;
  }
}

@keyframes contactPanelScan{
  0%, 12%{ left: -38%; }
  58%{ left: 104%; }
  100%{ left: 104%; }
}

@keyframes contactLineSweep{
  0%, 100%{
    transform: translateX(-6%);
    opacity: .4;
  }
  50%{
    transform: translateX(5%);
    opacity: .9;
  }
}

@keyframes contactChipFloatA{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(0, -5px, 0); }
}

@keyframes contactChipFloatB{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(0, 4px, 0); }
}

@keyframes contactFloatRingA{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(4px, -6px, 0); }
}

@keyframes contactFloatRingB{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(-5px, 6px, 0); }
}

@media (max-width: 920px){
  .contact-showcase-visual{
    min-height: 340px;
  }

  .contact-float-chip{
    font-size: .66rem;
  }
}

@media (max-width: 560px){
  .contact-showcase-visual{
    min-height: 290px;
  }

  .contact-visual-panel{
    border-radius: 18px;
  }

  .contact-radar{
    width: min(48vw, 180px);
    top: .8rem;
    left: .8rem;
  }

  .contact-wave-panel{
    left: .8rem;
    right: .8rem;
    bottom: .8rem;
    min-height: 96px;
    padding: .65rem .75rem .65rem;
  }

  .contact-wave{
    height: 52px;
    gap: .22rem;
  }

  .contact-float-chip{
    min-height: 1.75rem;
    padding: .25rem .45rem;
    letter-spacing: .08em;
  }

  .contact-float-chip-c,
  .contact-float-chip-d{
    display: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .contact-visual-panel::after,
  .contact-radar-sweep,
  .contact-radar-orbit,
  .contact-radar-core,
  .contact-radar-core::before,
  .contact-radar-dot,
  .contact-wave span,
  .contact-wave-panel::after,
  .contact-float-chip,
  .contact-visual-ring{
    animation: none !important;
  }
}

/* GSAP owns hero motion when enabled to avoid double animation with CSS keyframes */
.hero-kinetic.is-gsap-ready .hero-line,
.hero-kinetic.is-gsap-ready .hero-banner-dot,
.hero-kinetic.is-gsap-ready .hero-decor-flower,
.hero-kinetic.is-gsap-ready .hero-decor-sun,
.hero-kinetic.is-gsap-ready .hero-decor-bolt,
.hero-kinetic.is-gsap-ready .hero-decor-ribbon,
.hero-kinetic.is-gsap-ready .hero-orbit path,
.hero-kinetic.is-gsap-ready .hero-particles span{
  animation: none !important;
}

.hero-kinetic.is-gsap-ready .hero-decor-sun,
.hero-kinetic.is-gsap-ready .hero-decor-bolt,
.hero-kinetic.is-gsap-ready .hero-decor-ribbon{
  display: block;
}

/* Header polish + scroll behavior */
.header{
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(15,17,23,.16);
  border-bottom-color: transparent;
  box-shadow: none;
  transition:
    transform .34s cubic-bezier(.2,.72,.2,1),
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
  will-change: transform;
}

.header::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 70%),
    radial-gradient(420px 120px at 14% 0%, rgba(var(--accent-rgb), .08), transparent 70%),
    radial-gradient(420px 120px at 86% 0%, rgba(var(--accent2-rgb), .07), transparent 70%);
  opacity: 0;
  transition: opacity .22s ease;
}

.header .nav{
  position: relative;
  margin: .45rem auto .4rem;
  padding: .72rem .95rem;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.008)),
    rgba(15,17,23,.62);
  box-shadow:
    0 14px 28px rgba(2,6,23,.2),
    inset 0 0 0 1px rgba(255,255,255,.006);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  transition:
    padding .22s ease,
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease,
    border-radius .22s ease;
}

.header.is-scrolled{
  background: rgba(15,17,23,.12);
}

.header.is-scrolled::before{
  opacity: 1;
}

.header.is-scrolled .nav{
  padding: .66rem .9rem;
  border-color: rgba(148,163,184,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(15,17,23,.74);
  box-shadow:
    0 16px 34px rgba(2,6,23,.24),
    inset 0 0 0 1px rgba(255,255,255,.008);
}

.header.is-hidden{
  transform: translateY(calc(-100% - .8rem));
}

.header.is-hidden:not(.is-menu-open){
  pointer-events: none;
}

.header.is-menu-open{
  transform: translateY(0) !important;
}

body.has-mobile-nav-open .header{
  transform: translateY(0) !important;
}

/* Anchor targets: leave room for the revealed sticky header */
#work,
#about,
#contact{
  scroll-margin-top: 7.2rem;
}

@media (max-width: 920px){
  .header .nav{
    margin: .35rem auto;
    padding: .68rem .75rem;
    border-radius: 16px;
  }

  .nav-menu{
    right: 0;
    top: calc(100% + .5rem);
    width: min(280px, calc(100vw - 2rem));
    border-color: rgba(148,163,184,.16);
    background:
      radial-gradient(280px 170px at 85% 10%, rgba(var(--accent-rgb), .09), transparent 70%),
      radial-gradient(280px 170px at 20% 100%, rgba(var(--accent2-rgb), .08), transparent 70%),
      rgba(12,15,22,.95);
    box-shadow:
      0 20px 38px rgba(2,6,23,.28),
      inset 0 0 0 1px rgba(255,255,255,.008);
  }

  #work,
  #about,
  #contact{
    scroll-margin-top: 6rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .header{
    transition: none;
  }

  .header::before,
  .header .nav{
    transition: none;
  }
}

/* Mobile: no decorative logo overlay in hero top if it competes with content */
@media (max-width: 560px){
  .hero-decor-flower{
    opacity: .65;
  }
}

/* Responsive stabilization pass */
html{
  -webkit-text-size-adjust: 100%;
}

body{
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe{
  max-width: 100%;
}

.about-col,
.contact-col-main,
.contact-grid > form,
.project-grid-frame,
.modal-copy,
.modal-story,
.modal-aside,
.hero-stage > *,
.about-grid > *,
.contact-grid > *,
.project-scroll-sticky{
  min-width: 0;
}

.card-body h3,
.card-body p,
.hero-lead,
.skill-list li > .muted,
#modalTitle,
#modalSubtitle,
.modal-story-block p,
.aside-box p,
.contact-col-main > .muted{
  overflow-wrap: anywhere;
}

@media (max-width: 920px){
  .nav{
    position: relative;
  }

  .nav-toggle{
    display: inline-flex;
  }

  .nav-menu{
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    width: min(280px, calc(100vw - 2rem));
    padding: .9rem;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 16px;
    background:
      radial-gradient(280px 170px at 85% 10%, rgba(var(--accent-rgb), .09), transparent 70%),
      radial-gradient(280px 170px at 20% 100%, rgba(var(--accent2-rgb), .08), transparent 70%),
      rgba(12,15,22,.95);
    box-shadow:
      0 20px 38px rgba(2,6,23,.28),
      inset 0 0 0 1px rgba(255,255,255,.008);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }

  .nav-menu.is-open{
    display: flex;
  }

  .hero-stage{
    min-height: clamp(460px, 74dvh, 560px);
  }

  .about-actions .btn{
    flex: 1 1 12rem;
  }

  .hero-kinetic .btn,
  .about-actions .btn{
    min-width: 0;
  }

  .contact-grid > form{
    width: 100%;
  }

  .contact-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form .btn[type="submit"]{
    width: 100%;
  }

  .modal-panel{
    max-height: 100dvh;
    overflow: hidden;
  }

  .modal-content{
    min-height: 100%;
  }

  .modal-copy{
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-left: max(1.1rem, env(safe-area-inset-left));
    padding-right: max(1.1rem, env(safe-area-inset-right));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

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

  .thumb{
    height: 186px;
  }
}

@media (max-width: 560px){
  .container{
    width: min(var(--max), calc(100% - 1.25rem));
  }

  .header .nav{
    margin: .3rem auto;
    padding: .62rem .65rem;
  }

  .nav-menu{
    left: 0;
    right: 0;
    width: auto;
    max-height: min(calc(100dvh - 5.5rem), 24rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hero-stage{
    min-height: clamp(400px, 70dvh, 500px);
  }

  .hero-copy{
    padding-top: 1rem;
  }

  .hero-display{
    font-size: clamp(2.05rem, 12.4vw, 3.45rem);
    line-height: .88;
    letter-spacing: -.05em;
  }

  .hero-line{
    width: 100%;
  }

  .hero-line-b{
    margin-left: 0;
  }

  .thumb{
    min-height: 0;
  }

  .thumb-media{
    object-fit: cover;
    padding: 0;
    background: rgba(12,16,24,.55);
  }

  .about-actions .btn{
    width: 100%;
    flex-basis: 100%;
  }

  .card-cta-row{
    align-items: flex-start;
  }

  .contact-showcase::before{
    display: none;
  }

  .modal-copy{
    padding-left: max(.95rem, env(safe-area-inset-left));
    padding-right: max(.95rem, env(safe-area-inset-right));
  }
}

/* Project thumbnails: keep every card preview the same size and ratio */
.thumb{
  display: block;
  height: auto;
  min-height: 0;
  padding: 3.1rem .95rem .95rem;
}

.thumb-media{
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* Keep the navbar visible across the entire portfolio */
.header,
.header.is-hidden,
.header.is-menu-open,
body.has-mobile-nav-open .header{
  transform: translateY(0) !important;
}

.header.is-hidden:not(.is-menu-open){
  pointer-events: auto;
}

/* Tablet portfolio pass */
.card{
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.thumb{
  flex: 0 0 auto;
}

.card-body{
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 761px) and (max-width: 1279px){
  .project-grid-frame{
    padding: .85rem;
  }

  .project-scroll-shell.is-static .project-track{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .thumb{
    padding: 3rem .85rem .85rem;
  }
}

@media (min-width: 761px) and (max-width: 920px){
  .card-body{
    padding: 1rem;
    min-height: 0;
  }

  .card-summary{
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 760px){
  .project-scroll-shell.is-static .project-track,
  .grid{
    grid-template-columns: 1fr;
  }

  .project-grid-frame{
    padding: .4rem 0 0;
  }

  .thumb{
    padding: 2.9rem .8rem .8rem;
  }
}