:root {
      color-scheme: dark;
      --bg: #000000;
      --bg-2: #000000;
      --surface: #050708;
      --surface-strong: #080c0e;
      --surface-soft: #020303;
      --border: rgba(255, 255, 255, 0.16);
      --border-strong: rgba(255, 255, 255, 0.26);
      --text: #f7fbff;
      --muted: #b2bdd2;
      --dim: #7d8aa3;
      --cyan: #00e5ff;
      --blue: #003b4a;
      --violet: #082836;
      --mint: #66f2ff;
      --amber: #b8f7ff;
      --rose: #0f5f73;
      --accent-rgb: 0,229,255;
      --accent-bright-rgb: 0,245,255;
      --accent-soft-rgb: 102,242,255;
      --accent-pale-rgb: 217,230,239;
      --shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
      --neu-raised: 10px 10px 22px rgba(0,0,0,.92), -7px -7px 18px rgba(var(--accent-rgb),.045), inset 1px 1px 0 rgba(255,255,255,.045);
      --neu-inset: inset 8px 8px 16px rgba(0,0,0,.9), inset -5px -5px 14px rgba(var(--accent-rgb),.04);
      --neu-hover: 13px 13px 26px rgba(0,0,0,.95), -8px -8px 20px rgba(var(--accent-rgb),.075), inset 1px 1px 0 rgba(255,255,255,.06);
      --glass-shadow: var(--neu-raised);
      --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      --ease: cubic-bezier(.2, .8, .2, 1);
      --radius: 22px;
    }

    [data-theme="light"] {
      color-scheme: dark;
      --bg: #03251f;
      --bg-2: #041d18;
      --surface: #06372d;
      --surface-strong: #084335;
      --surface-soft: #021a15;
      --border: rgba(207, 255, 230, 0.18);
      --border-strong: rgba(207, 255, 230, 0.3);
      --text: #f3fff8;
      --muted: #b9dccc;
      --dim: #8fb9a6;
      --cyan: #9dffd2;
      --blue: #0b4e3f;
      --violet: #06372d;
      --mint: #7af0b2;
      --amber: #d9ffea;
      --rose: #1f7358;
      --accent-rgb: 157,255,210;
      --accent-bright-rgb: 184,255,218;
      --accent-soft-rgb: 122,240,178;
      --accent-pale-rgb: 217,255,234;
      --shadow: 0 28px 90px rgba(0, 23, 17, 0.32);
      --neu-raised: 10px 10px 22px rgba(0,20,15,.64), -7px -7px 18px rgba(177,255,214,.075), inset 1px 1px 0 rgba(255,255,255,.07);
      --neu-inset: inset 8px 8px 16px rgba(0,20,15,.58), inset -5px -5px 14px rgba(177,255,214,.055);
      --neu-hover: 13px 13px 26px rgba(0,20,15,.72), -8px -8px 20px rgba(177,255,214,.11), inset 1px 1px 0 rgba(255,255,255,.08);
      --glass-shadow: var(--neu-raised);
    }

    [data-theme="light"] body {
      background:
        radial-gradient(circle at 12% 18%, rgba(157, 255, 210, 0.18), transparent 28vw),
        radial-gradient(circle at 78% 8%, rgba(122, 240, 178, 0.12), transparent 30vw),
        radial-gradient(circle at 68% 62%, rgba(217, 255, 234, 0.1), transparent 24vw),
        linear-gradient(180deg, var(--bg), var(--bg-2) 48%, #021a15);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 10% 18%, rgba(var(--accent-rgb), 0.2), transparent 28vw),
        radial-gradient(circle at 82% 8%, rgba(0, 143, 178, 0.12), transparent 30vw),
        radial-gradient(circle at 68% 64%, rgba(var(--accent-soft-rgb), 0.07), transparent 24vw),
        linear-gradient(180deg, #000000, #000000 46%, #000000);
      color: var(--text);
      font-family: var(--font);
      line-height: 1.55;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 76px 76px;
      mask-image: linear-gradient(to bottom, black, transparent 78%);
      pointer-events: none;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb), .1), transparent 28rem),
        linear-gradient(120deg, rgba(255,255,255,.04), transparent 42%);
      pointer-events: none;
      transition: background .2s linear;
    }

    body.is-scrolling::after {
      opacity: .22;
    }

    body.is-scrolling .blob,
    body.is-scrolling .glass::before,
    body.is-scrolling .hero::before,
    body.is-scrolling .hero::after,
    body.is-scrolling .hero-copy,
    body.is-scrolling .btn::before,
    body.is-scrolling .social-chip,
    body.is-scrolling .profile-card,
    body.is-scrolling .metric,
    body.is-scrolling .floating-pill,
    body.is-scrolling .browser-line,
    body.is-scrolling .marquee-track,
    body.is-scrolling .feature-icon,
    body.is-scrolling .skill-chip,
    body.is-scrolling .project-icon {
      animation-play-state: paused !important;
    }

    body.is-scrolling .aurora,
    body.is-scrolling .hero::before,
    body.is-scrolling .hero::after {
      opacity: .28;
    }

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

    img {
      display: block;
      max-width: 100%;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    ::selection {
      color: #021017;
      background: var(--cyan);
    }

    .page-shell {
      position: relative;
      min-height: 100vh;
      isolation: isolate;
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 60;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--cyan), var(--mint), transparent);
      box-shadow: 0 0 22px rgba(var(--accent-rgb),.55);
      transform: scaleX(0);
      transform-origin: 0 50%;
      pointer-events: none;
    }

    .aurora {
      position: fixed;
      inset: 0;
      z-index: -1;
      overflow: hidden;
      pointer-events: none;
      filter: saturate(135%);
    }

    .blob {
      position: absolute;
      width: 38vw;
      height: 38vw;
      min-width: 360px;
      min-height: 360px;
      border-radius: 42% 58% 48% 52%;
      opacity: .32;
      filter: blur(10px);
      mix-blend-mode: screen;
      animation: none;
    }

    .blob.one {
      left: -12vw;
      top: 12vh;
      background: rgba(var(--accent-bright-rgb), .28);
    }

    .blob.two {
      right: -10vw;
      top: -8vh;
      background: rgba(var(--accent-rgb), .1);
      animation-delay: -5s;
    }

    .blob.three {
      right: 8vw;
      bottom: -18vh;
      background: rgba(0, 143, 178, .1);
      animation-delay: -9s;
    }

    @keyframes liquidFloat {
      0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); border-radius: 42% 58% 48% 52%; }
      50% { transform: translate3d(4vw, -4vh, 0) rotate(18deg) scale(1.08); border-radius: 58% 42% 62% 38%; }
      100% { transform: translate3d(-2vw, 5vh, 0) rotate(-12deg) scale(.96); border-radius: 36% 64% 44% 56%; }
    }

    .container {
      width: min(1180px, calc(100% - 40px));
      margin-inline: auto;
    }

    .glass {
      position: relative;
      overflow: hidden;
      contain: paint;
      border: 1px solid var(--border);
      background:
        linear-gradient(145deg, rgba(var(--accent-rgb),.055), rgba(255,255,255,.018) 38%, rgba(0,0,0,.62)),
        var(--surface);
      box-shadow: var(--glass-shadow);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transform: translateZ(0);
    }

    body.is-scrolling .glass {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    [data-theme="light"] .glass {
      background:
        linear-gradient(145deg, rgba(var(--accent-rgb), .09), rgba(255,255,255,.035) 38%, rgba(1,37,30,.56)),
        var(--surface);
    }

    .glass::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 34%, rgba(0,0,0,.22));
      opacity: .8;
      pointer-events: none;
      transform: translate3d(-8%, 0, 0);
      animation: none;
    }

    .glass::after {
      content: "";
      position: absolute;
      inset: auto 12% 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .82), rgba(var(--accent-pale-rgb), .38), transparent);
      opacity: .74;
      pointer-events: none;
    }

    @keyframes glassSweep {
      0% { transform: translate3d(-9%, -2%, 0); opacity: .42; }
      100% { transform: translate3d(9%, 2%, 0); opacity: .76; }
    }

    .nav {
      position: fixed;
      top: 18px;
      left: 0;
      right: 0;
      z-index: 20;
      transition: transform .35s var(--ease), top .35s var(--ease);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 66px;
      padding: 10px 12px 10px 18px;
      border: 1px solid rgba(var(--accent-rgb),.28);
      border-radius: 999px;
      background:
        linear-gradient(145deg, rgba(var(--accent-rgb),.12), rgba(255,255,255,.045) 34%, rgba(0,0,0,.88)),
        rgba(0,0,0,.92);
      box-shadow:
        12px 12px 26px rgba(0,0,0,.96),
        -8px -8px 22px rgba(var(--accent-rgb),.08),
        inset 1px 1px 0 rgba(255,255,255,.08),
        inset -6px -6px 14px rgba(0,0,0,.7);
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
    }

    .nav-inner::before {
      opacity: .95;
      background:
        linear-gradient(120deg, rgba(255,255,255,.12), transparent 30%, rgba(var(--accent-rgb),.06)),
        linear-gradient(180deg, rgba(var(--accent-rgb),.08), transparent);
    }

    [data-theme="light"] .nav-inner {
      border-color: rgba(var(--accent-rgb), .34);
      background:
        linear-gradient(145deg, rgba(var(--accent-rgb), .15), rgba(255,255,255,.045) 34%, rgba(2,37,31,.86)),
        rgba(4, 40, 32, .94);
      box-shadow: var(--neu-raised);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .brand-mark {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border-radius: 13px;
      color: #061018;
      background: conic-gradient(from 140deg, var(--cyan), var(--mint), var(--amber), var(--violet), var(--cyan));
      box-shadow: 0 0 30px rgba(var(--accent-bright-rgb), .32);
      animation: none;
    }

    @keyframes shimmerSpin {
      0%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
      50% { transform: rotate(7deg) scale(1.05); filter: brightness(1.22); }
    }

    .brand small {
      display: block;
      color: var(--muted);
      font-family: var(--mono);
      font-size: .66rem;
      font-weight: 600;
      letter-spacing: .08em;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 999px;
      background: var(--surface-soft);
      box-shadow: var(--neu-inset);
    }

    .nav-links a {
      position: relative;
      padding: 9px 14px;
      border-radius: 999px;
      color: var(--muted);
      font-size: .9rem;
      font-weight: 700;
      transition: color .25s var(--ease), background .25s var(--ease);
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: var(--text);
      background: rgba(255,255,255,.1);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .icon-btn,
    .menu-btn {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      background: var(--surface);
      box-shadow: var(--neu-raised);
      cursor: pointer;
      transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
    }

    .icon-btn:hover,
    .menu-btn:hover {
      transform: translateY(-2px);
      border-color: rgba(var(--accent-bright-rgb),.46);
      background: rgba(var(--accent-bright-rgb),.12);
    }

    .menu-btn {
      display: none;
    }

    .mobile-panel {
      display: none;
      margin-top: 10px;
      padding: 12px;
      border: 1px solid rgba(var(--accent-rgb),.24);
      border-radius: 24px;
      background:
        linear-gradient(145deg, rgba(var(--accent-rgb),.1), rgba(255,255,255,.035), rgba(0,0,0,.88)),
        rgba(0,0,0,.94);
      box-shadow: var(--neu-raised);
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
    }

    [data-theme="light"] .mobile-panel {
      border-color: rgba(var(--accent-rgb), .3);
      background:
        linear-gradient(145deg, rgba(var(--accent-rgb), .12), rgba(255,255,255,.035), rgba(2,37,31,.88)),
        rgba(4, 40, 32, .95);
    }

    .mobile-panel a {
      display: block;
      padding: 13px 14px;
      border-radius: 16px;
      color: var(--muted);
      font-weight: 700;
    }

    .mobile-panel a:hover {
      color: var(--text);
      background: rgba(255,255,255,.08);
    }

    .hero {
      position: relative;
      min-height: 100vh;
      padding: 132px 0 72px;
      display: grid;
      align-items: center;
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(var(--accent-rgb),.12);
      border-radius: 50%;
      pointer-events: none;
    }

    .hero::before {
      width: 44vw;
      height: 44vw;
      min-width: 380px;
      min-height: 380px;
      right: -12vw;
      top: 12vh;
      animation: none;
    }

    .hero::after {
      width: 28vw;
      height: 28vw;
      min-width: 260px;
      min-height: 260px;
      left: -10vw;
      bottom: 5vh;
      animation: none;
    }

    @keyframes orbitSlow {
      0% { transform: rotate(0deg) translate3d(0, 0, 0) scale(1); }
      50% { transform: rotate(180deg) translate3d(10px, -8px, 0) scale(1.04); }
      100% { transform: rotate(360deg) translate3d(0, 0, 0) scale(1); }
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(360px, .78fr);
      gap: 54px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      margin-bottom: 18px;
      padding: 9px 13px;
      border: 1px solid rgba(var(--accent-bright-rgb),.24);
      border-radius: 999px;
      color: var(--cyan);
      background: rgba(var(--accent-bright-rgb),.075);
      font-family: var(--mono);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .06em;
    }

    .pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--mint);
      box-shadow: 0 0 0 0 rgba(0,255,157,.65);
      animation: pulse 1.8s infinite;
    }

    @keyframes pulse {
      70% { box-shadow: 0 0 0 12px rgba(0,255,157,0); }
      100% { box-shadow: 0 0 0 0 rgba(0,255,157,0); }
    }

    h1 {
      max-width: 820px;
      font-size: clamp(3.2rem, 8.2vw, 7.6rem);
      line-height: .88;
      font-weight: 900;
      letter-spacing: 0;
    }

    .liquid-text {
      display: block;
      margin-top: 6px;
      color: transparent;
      background: linear-gradient(92deg, var(--cyan), var(--mint) 42%, var(--amber) 72%, var(--cyan));
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: gradientFlow 6s ease-in-out infinite;
    }

    @keyframes gradientFlow {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .hero-copy {
      max-width: 650px;
      margin-top: 24px;
      color: var(--muted);
      font-size: clamp(1rem, 1.8vw, 1.22rem);
      animation: none;
    }

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

    .type-line {
      display: flex;
      align-items: center;
      min-height: 34px;
      margin-top: 18px;
      color: var(--text);
      font-family: var(--mono);
      font-size: .94rem;
    }

    .typed {
      color: var(--cyan);
    }

    .cursor {
      display: inline-block;
      width: 9px;
      height: 1.15em;
      margin-left: 5px;
      background: var(--cyan);
      animation: blink 1s steps(2) infinite;
    }

    @keyframes blink {
      50% { opacity: 0; }
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 50px;
      padding: 0 20px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      background: var(--surface);
      font-weight: 800;
      box-shadow: var(--neu-raised);
      overflow: hidden;
      transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
    }

    .btn::before {
      content: "";
      position: absolute;
      inset: -80% -40%;
      background: linear-gradient(115deg, transparent, rgba(255,255,255,.26), transparent);
      transform: translateX(-64%) rotate(12deg);
      transition: transform .7s var(--ease);
      animation: none;
    }

    @keyframes buttonSheen {
      0%, 45% { transform: translateX(-72%) rotate(12deg); }
      72%, 100% { transform: translateX(72%) rotate(12deg); }
    }

    .btn:hover {
      transform: translateY(-3px);
      border-color: rgba(var(--accent-bright-rgb),.55);
      box-shadow: var(--neu-hover);
    }

    .btn:hover::before {
      transform: translateX(64%) rotate(12deg);
    }

    .btn-primary {
      color: #031015;
      border: 0;
      background: linear-gradient(135deg, var(--cyan), var(--mint) 54%, var(--amber));
      box-shadow: 0 18px 52px rgba(var(--accent-bright-rgb),.28);
    }

    .hero-socials {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .social-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 999px;
      color: var(--muted);
      background: var(--surface);
      box-shadow: var(--neu-raised);
      font-size: .88rem;
      font-weight: 700;
      transition: transform .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
      animation: none;
    }

    .social-chip:nth-child(2) { animation-delay: -1.1s; }
    .social-chip:nth-child(3) { animation-delay: -2.2s; }
    .social-chip:nth-child(4) { animation-delay: -3.3s; }

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

    .social-chip:hover {
      transform: translateY(-3px);
      color: var(--text);
      background: rgba(255,255,255,.1);
    }

    .demo-stack {
      position: relative;
      min-height: 600px;
      perspective: 1200px;
    }

    .profile-card {
      position: relative;
      z-index: 2;
      min-height: 560px;
      padding: 26px;
      border-radius: 34px;
      transform-style: preserve-3d;
      animation: none;
    }

    @keyframes cardBreathe {
      0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
      50% { transform: translateY(-10px) rotateX(1.4deg) rotateY(-1.8deg); }
    }

    .profile-top {
      position: relative;
      display: flex;
      align-items: center;
      gap: 16px;
      z-index: 1;
    }

    .avatar-wrap {
      position: relative;
      width: 96px;
      height: 96px;
      flex: 0 0 auto;
      border-radius: 29px;
      padding: 3px;
      background: conic-gradient(from 90deg, var(--cyan), var(--mint), var(--amber), var(--violet), var(--cyan));
      box-shadow: 0 0 52px rgba(var(--accent-bright-rgb),.24);
    }

    .avatar-wrap img {
      width: 100%;
      height: 100%;
      border-radius: 26px;
      object-fit: cover;
    }

    .status-dot {
      position: absolute;
      right: 2px;
      bottom: 2px;
      width: 18px;
      height: 18px;
      border: 3px solid #101522;
      border-radius: 50%;
      background: var(--mint);
      box-shadow: 0 0 18px rgba(0,255,157,.72);
    }

    .profile-title h2 {
      font-size: 1.75rem;
      line-height: 1;
      letter-spacing: 0;
    }

    .profile-title p {
      margin-top: 8px;
      color: var(--muted);
      font-weight: 700;
    }

    .terminal-card {
      position: relative;
      z-index: 1;
      margin-top: 24px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 22px;
      background: #000000;
      box-shadow: var(--neu-inset);
      font-family: var(--mono);
    }

    .terminal-dots {
      display: flex;
      gap: 7px;
      margin-bottom: 18px;
    }

    .terminal-dots span {
      width: 11px;
      height: 11px;
      border-radius: 50%;
    }

    .terminal-dots span:nth-child(1) { background: #0f5f73; }
    .terminal-dots span:nth-child(2) { background: var(--amber); }
    .terminal-dots span:nth-child(3) { background: var(--cyan); }

    .terminal-title,
    .terminal-path {
      position: relative;
      color: var(--mint);
      font-size: .78rem;
      font-weight: 800;
      margin-bottom: 12px;
      letter-spacing: .02em;
    }

    .code-row {
      display: flex;
      gap: 12px;
      padding: 6px 0;
      color: var(--muted);
      font-size: .86rem;
    }

    .code-row strong {
      color: var(--cyan);
      font-weight: 700;
    }

    .code-row span:last-child {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .metric-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 18px;
    }

    .metric {
      min-height: 98px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 20px;
      background: var(--surface);
      box-shadow: var(--neu-raised);
      animation: none;
    }

    .metric:nth-child(2) { animation-delay: -1.5s; }
    .metric:nth-child(3) { animation-delay: -3s; }

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

    .metric strong {
      display: block;
      font-size: 1.8rem;
      line-height: 1;
      letter-spacing: 0;
    }

    .metric span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .floating-pill {
      position: absolute;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 12px 14px;
      border-radius: 999px;
      color: var(--text);
      font-size: .84rem;
      font-weight: 800;
      animation: none;
    }

    .pill-one {
      top: 72px;
      right: -20px;
    }

    .pill-two {
      left: -24px;
      bottom: 138px;
      animation-delay: -2s;
    }

    @keyframes floatPill {
      0%, 100% { transform: translateY(0) rotate(-1deg); }
      50% { transform: translateY(-16px) rotate(1deg); }
    }

    .mini-browser {
      position: absolute;
      z-index: 1;
      right: 20px;
      bottom: 2px;
      width: 78%;
      padding: 16px;
      border-radius: 28px;
      transform: rotate(-4deg);
      opacity: .88;
    }

    .browser-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .browser-bar span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,.28);
    }

    .browser-line {
      height: 12px;
      margin-top: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(var(--accent-rgb),.36), rgba(var(--accent-soft-rgb),.14));
      background-size: 220% 100%;
      animation: none;
    }

    .browser-line.short {
      width: 64%;
      background: rgba(255,255,255,.13);
    }

    @keyframes lineFlow {
      0%, 100% { background-position: 0% 50%; transform: scaleX(.92); transform-origin: left; }
      50% { background-position: 100% 50%; transform: scaleX(1); transform-origin: left; }
    }

    .section {
      padding: 92px 0;
      position: relative;
      content-visibility: auto;
      contain-intrinsic-size: 900px;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 34px;
    }

    .section-kicker {
      display: inline-flex;
      margin-bottom: 12px;
      color: var(--cyan);
      font-family: var(--mono);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .section-title {
      max-width: 720px;
      font-size: clamp(2.2rem, 5vw, 4.7rem);
      line-height: .95;
      font-weight: 900;
      letter-spacing: 0;
    }

    .section-copy {
      max-width: 460px;
      color: var(--muted);
      font-size: 1rem;
    }

    .marquee {
      display: flex;
      width: 100%;
      overflow: hidden;
      border-block: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.035);
      mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    }

    .marquee-track {
      display: flex;
      min-width: max-content;
      animation: marquee 38s linear infinite;
    }

    .marquee span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 18px 24px;
      color: var(--muted);
      font-family: var(--mono);
      font-weight: 800;
      white-space: nowrap;
    }

    .marquee i {
      color: var(--cyan);
    }

    @keyframes marquee {
      to { transform: translateX(-50%); }
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .feature-card,
    .project-card,
    .stat-card,
    .contact-card {
      border-radius: var(--radius);
      contain: layout paint;
      transition: transform .32s var(--ease), border-color .32s var(--ease), background .32s var(--ease);
    }

    .feature-card {
      min-height: 260px;
      padding: 22px;
    }

    .feature-card:hover,
    .project-card:hover,
    .stat-card:hover,
    .contact-card:hover {
      transform: translateY(-8px);
      border-color: rgba(var(--accent-bright-rgb),.42);
      background: linear-gradient(145deg, rgba(var(--accent-rgb),.075), rgba(255,255,255,.022), rgba(0,0,0,.7));
      box-shadow: var(--neu-hover);
    }

    .feature-icon {
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      margin-bottom: 56px;
      border-radius: 16px;
      color: #031015;
      background: linear-gradient(135deg, var(--cyan), var(--mint));
      box-shadow: 0 16px 36px rgba(var(--accent-bright-rgb),.2);
    }

    .feature-card:nth-child(2) .feature-icon { animation-delay: -1.2s; }
    .feature-card:nth-child(3) .feature-icon { animation-delay: -2.4s; }
    .feature-card:nth-child(4) .feature-icon { animation-delay: -3.6s; }

    @keyframes iconHover {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
      50% { transform: translate3d(0, -8px, 0) rotate(4deg); }
    }

    .feature-card:nth-child(2) .feature-icon { background: linear-gradient(135deg, var(--cyan), var(--violet)); color: white; }
    .feature-card:nth-child(3) .feature-icon { background: linear-gradient(135deg, var(--amber), var(--cyan)); color: #031015; }
    .feature-card:nth-child(4) .feature-icon { background: linear-gradient(135deg, var(--mint), var(--cyan)); color: #031015; }

    .feature-card h3 {
      position: relative;
      margin-bottom: 10px;
      font-size: 1.15rem;
      letter-spacing: 0;
    }

    .feature-card p {
      position: relative;
      color: var(--muted);
      font-size: .94rem;
    }

    .terminal-story {
      margin-top: 18px;
      min-height: 310px;
      padding: 24px;
      border-radius: 28px;
      background:
        linear-gradient(145deg, rgba(var(--accent-rgb),.055), rgba(255,255,255,.018), rgba(0,0,0,.72)),
        #000000;
      box-shadow: var(--neu-inset);
      font-family: var(--mono);
    }

    .terminal-story pre {
      position: relative;
      min-height: 190px;
      white-space: pre-wrap;
      color: var(--text);
      font-size: .92rem;
      line-height: 1.75;
      overflow-wrap: anywhere;
    }

    .terminal-caret {
      position: relative;
      display: inline-block;
      width: 9px;
      height: 1.1rem;
      margin-top: 4px;
      background: var(--cyan);
      box-shadow: 0 0 18px rgba(var(--accent-rgb),.65);
      animation: blink 1s steps(2) infinite;
    }

    .terminal-story::before {
      content: "stdout";
      position: absolute;
      top: 18px;
      right: 22px;
      color: rgba(184,247,255,.42);
      font-family: var(--mono);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .skills-board {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 18px;
      align-items: stretch;
    }

    .about-panel {
      padding: 28px;
      border-radius: 30px;
    }

    .about-panel p {
      position: relative;
      color: var(--muted);
      margin-bottom: 18px;
    }

    .about-list {
      position: relative;
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .about-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      list-style: none;
      color: var(--text);
      font-weight: 700;
    }

    .about-list i {
      color: var(--mint);
    }

    .skill-cloud {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      gap: 12px;
      padding: 28px;
      border-radius: 30px;
    }

    .skill-chip {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 44px;
      padding: 0 14px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 999px;
      color: var(--text);
      background: var(--surface);
      box-shadow: var(--neu-raised);
      font-weight: 800;
      transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
    }

    .skill-chip:nth-child(3n) { animation-delay: -1.4s; }
    .skill-chip:nth-child(3n + 1) { animation-delay: -2.8s; }

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

    .skill-chip:hover {
      transform: translateY(-4px) scale(1.03);
      border-color: rgba(var(--accent-bright-rgb),.4);
      background: rgba(var(--accent-bright-rgb),.12);
    }

    .skill-chip img {
      width: 22px;
      height: 22px;
      object-fit: contain;
    }

    @keyframes chipRise {
      from { opacity: 0; transform: translateY(24px) scale(.94); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .project-card {
      min-height: 280px;
      padding: 22px;
    }

    .project-top {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 44px;
    }

    .project-icon {
      display: grid;
      width: 50px;
      height: 50px;
      place-items: center;
      border-radius: 18px;
      color: #061018;
      background: linear-gradient(135deg, var(--cyan), var(--mint));
    }

    @keyframes projectIconPulse {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
      50% { transform: translate3d(0, -5px, 0) scale(1.05); box-shadow: 0 16px 34px rgba(var(--accent-rgb),.16); }
    }

    .project-link {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      color: var(--muted);
      background: var(--surface);
      box-shadow: var(--neu-raised);
      transition: color .24s var(--ease), transform .24s var(--ease), background .24s var(--ease);
    }

    .project-link:hover {
      color: var(--text);
      transform: translateY(-3px);
      background: rgba(255,255,255,.12);
    }

    .project-card h3 {
      position: relative;
      margin-bottom: 10px;
      font-size: 1.34rem;
      letter-spacing: 0;
      text-transform: capitalize;
    }

    .project-command {
      position: relative;
      display: inline-flex;
      max-width: 100%;
      margin-bottom: 12px;
      padding: 7px 10px;
      border: 1px solid rgba(var(--accent-rgb),.16);
      border-radius: 999px;
      color: var(--mint);
      background: rgba(var(--accent-rgb),.055);
      font-family: var(--mono);
      font-size: .72rem;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .project-card p {
      position: relative;
      min-height: 0;
      color: var(--muted);
      font-size: .95rem;
    }

    .project-points {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-height: 0;
      margin-top: 18px;
    }

    .project-point {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 999px;
      color: var(--text);
      background: var(--surface);
      box-shadow: var(--neu-inset);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .01em;
    }

    .project-meta {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 20px;
    }

    .meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 999px;
      color: var(--muted);
      background: #000000;
      box-shadow: var(--neu-inset);
      font-size: .76rem;
      font-weight: 800;
    }

    .lang-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cyan);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .stat-card {
      min-height: 168px;
      padding: 24px;
    }

    .stat-card i {
      position: relative;
      color: var(--cyan);
      font-size: 1.4rem;
    }

    .stat-card strong {
      position: relative;
      display: block;
      margin-top: 28px;
      font-size: 2.55rem;
      line-height: 1;
      letter-spacing: 0;
    }

    .stat-card span {
      position: relative;
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-weight: 800;
    }

    .github-wall {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }

    .github-wall .glass {
      border-radius: 26px;
      padding: 10px;
    }

    .github-wall img {
      position: relative;
      width: 100%;
      min-height: 180px;
      border-radius: 18px;
      object-fit: cover;
    }

    .contact-layout {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 18px;
      align-items: stretch;
    }

    .contact-card {
      padding: 28px;
    }

    .contact-links {
      position: relative;
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 14px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 18px;
      color: var(--muted);
      background: var(--surface);
      box-shadow: var(--neu-raised);
      font-weight: 700;
      transition: color .24s var(--ease), transform .24s var(--ease), background .24s var(--ease);
    }

    .contact-item:hover {
      color: var(--text);
      transform: translateX(5px);
      background: rgba(255,255,255,.09);
    }

    .contact-item i {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border-radius: 12px;
      color: #061018;
      background: linear-gradient(135deg, var(--cyan), var(--mint));
    }

    .contact-form {
      position: relative;
      display: grid;
      gap: 13px;
      padding: 28px;
      border-radius: 30px;
    }

    .field {
      display: grid;
      gap: 7px;
    }

    .field label {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .field input,
    .field textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      color: var(--text);
      background: rgba(5, 7, 13, .48);
      box-shadow: var(--neu-inset);
      outline: 0;
      transition: border-color .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
    }

    .field input {
      height: 50px;
      padding: 0 15px;
    }

    .field textarea {
      min-height: 122px;
      resize: vertical;
      padding: 14px 15px;
    }

    .field input:focus,
    .field textarea:focus {
      border-color: rgba(var(--accent-bright-rgb),.52);
      background: rgba(5, 7, 13, .64);
      box-shadow: 0 0 0 4px rgba(var(--accent-bright-rgb),.1);
    }

    .footer {
      padding: 36px 0 46px;
      color: var(--muted);
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,.1);
      font-weight: 700;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .footer-links a:hover {
      color: var(--text);
    }

    .back-top {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 18;
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      background: rgba(255,255,255,.08);
      box-shadow: var(--glass-shadow);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
      transition: opacity .25s var(--ease), transform .25s var(--ease);
      cursor: pointer;
    }

    .back-top.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .reveal {
      opacity: 0;
      transform: translateY(34px) scale(.98);
      transition: opacity .75s var(--ease), transform .75s var(--ease);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .delay-1 { transition-delay: .08s; }
    .delay-2 { transition-delay: .16s; }
    .delay-3 { transition-delay: .24s; }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 26px;
      z-index: 40;
      padding: 12px 16px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      color: var(--text);
      background: rgba(8, 12, 22, .84);
      box-shadow: var(--glass-shadow);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      opacity: 0;
      transform: translate(-50%, 16px);
      pointer-events: none;
      transition: opacity .25s var(--ease), transform .25s var(--ease);
      font-weight: 800;
    }

    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    @media (max-width: 1040px) {
      .hero-grid,
      .skills-board,
      .contact-layout {
        grid-template-columns: 1fr;
      }

      .hero-grid {
        gap: 38px;
      }

      .demo-stack {
        max-width: 620px;
        min-height: 520px;
        margin-inline: auto;
        width: 100%;
      }

      .feature-grid,
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .projects-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .section-head {
        align-items: start;
        flex-direction: column;
      }
    }

    @media (max-width: 760px) {
      .aurora,
      .hero::before,
      .hero::after {
        display: none;
      }

      .glass:not(.nav-inner):not(.mobile-panel),
      .back-top,
      .toast {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .container {
        width: min(100% - 28px, 1180px);
      }

      .section {
        padding: 64px 0;
        contain-intrinsic-size: 720px;
      }

      .section-title {
        font-size: clamp(2rem, 11vw, 3.15rem);
        line-height: 1.05;
      }

      .section-copy,
      .hero-copy {
        font-size: 1rem;
      }

      .nav {
        top: 10px;
      }

      .nav-inner {
        min-height: 58px;
        padding: 8px 10px 8px 12px;
        border-radius: 20px;
      }

      .brand small,
      .nav-links,
      .nav-actions .btn {
        display: none;
      }

      .menu-btn {
        display: grid;
      }

      .mobile-panel.open {
        display: block;
      }

      .hero {
        min-height: auto;
        padding: 104px 0 46px;
      }

      h1 {
        font-size: clamp(2.65rem, 14vw, 4.25rem);
        line-height: .98;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .hero-socials {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .social-chip {
        justify-content: center;
      }

      .demo-stack {
        min-height: 0;
        padding-bottom: 0;
      }

      .profile-card {
        min-height: 0;
        padding: 16px;
        border-radius: 22px;
      }

      .profile-top {
        align-items: flex-start;
      }

      .avatar-wrap {
        width: 74px;
        height: 74px;
        border-radius: 20px;
      }

      .avatar-wrap img {
        border-radius: 17px;
      }

      .profile-title h2 {
        font-size: 1.35rem;
        line-height: 1.1;
      }

      .terminal-card {
        margin-top: 18px;
        padding: 14px;
        border-radius: 16px;
      }

      .code-row {
        gap: 8px;
        font-size: .76rem;
      }

      .floating-pill {
        display: none;
      }

      .metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .metric {
        min-height: 76px;
        padding: 12px 8px;
      }

      .metric strong {
        font-size: 1.35rem;
      }

      .metric span {
        font-size: .65rem;
      }

      .mini-browser {
        display: none;
      }

      .feature-grid,
      .projects-grid,
      .stats-grid,
      .github-wall {
        grid-template-columns: 1fr;
      }

      .feature-card,
      .project-card,
      .stat-card,
      .contact-card,
      .about-panel,
      .skill-cloud,
      .contact-form,
      .terminal-story {
        border-radius: 18px;
        padding: 18px;
      }

      .project-top {
        margin-bottom: 24px;
      }

      .project-points {
        margin-top: 14px;
      }

      .github-wall img {
        min-height: 0;
      }

      .contact-item {
        align-items: flex-start;
        overflow-wrap: anywhere;
      }

      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }

      .scroll-progress {
        transition: none !important;
      }
    }