*, *::before, *::after { box-sizing: border-box; }

    body {
      background:
        radial-gradient(circle at 18%  0%,   rgba(56,189,248,0.18),  transparent 32rem),
        radial-gradient(circle at 82%  8%,   rgba(168,85,247,0.16),  transparent 30rem),
        radial-gradient(circle at 50% 100%,  rgba(34,197,94,0.08),   transparent 28rem),
        #050816;
      font-family: "DM Sans", sans-serif;
      color: #e2e8f0;
    }

    /* noise overlay */
    body::after {
      content: "";
      position: fixed; inset: 0;
      pointer-events: none;
      z-index: 1000;
      opacity: 0.022;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px;
    }

    h1, h2, h3, h4, h5 {
      font-family: "Syne", sans-serif;
      letter-spacing: -0.04em;
    }

    .mono { font-family: "JetBrains Mono", monospace; }

    /* grid bg */
    .grid-bg {
      background-image:
        linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent 70%);
    }

    /* glass — solid dark fill + white sheen (no backdrop-filter: it clips
       descenders of deep-tailed glyphs like Syne's g/p/y in Chromium) */
    .glass {
      background:
        linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
        linear-gradient(rgba(14,19,40,0.72), rgba(10,14,30,0.72));
      border: 1px solid rgba(255,255,255,0.11);
      box-shadow: 0 20px 70px rgba(0,0,0,0.30);
    }
    .glass-strong {
      background:
        linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.032)),
        linear-gradient(rgba(16,22,46,0.82), rgba(11,15,32,0.82));
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 24px 80px rgba(0,0,0,0.38);
    }

    /* gradient-border hero card */
    .grad-card {
      position: relative;
      border-radius: 2rem;
      background:
        linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.032)),
        linear-gradient(rgba(16,22,46,0.84), rgba(11,15,32,0.84));
      box-shadow: 0 24px 80px rgba(0,0,0,0.38);
    }
    .grad-card::before {
      content: "";
      position: absolute; inset: 0;
      border-radius: 2rem;
      padding: 1px;
      background: linear-gradient(135deg,
        rgba(125,211,252,0.55),
        rgba(196,181,253,0.40),
        rgba(134,239,172,0.20),
        rgba(125,211,252,0.06));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: destination-out;
      mask-composite: exclude;
      pointer-events: none;
    }

    /* gradient text */
    .gradient-text {
      background: linear-gradient(135deg, #e0f2fe 0%, #7dd3fc 35%, #c4b5fd 72%, #f5f3ff 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      display: inline-block;
      padding-right: 0.14em;
      margin-right: -0.14em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

    /* shine sweep */
    .shine { position: relative; overflow: hidden; }
    .shine::before {
      content: "";
      position: absolute;
      inset: -120% auto auto -80%;
      width: 65%; height: 300%;
      transform: rotate(25deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
      animation: shine 9s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes shine { 0%,40%{left:-90%} 65%,100%{left:140%} }

    /* typewriter cursor */
    .tw-cursor {
      display: inline-block;
      width: 2.5px; height: 1.15em;
      background: #7dd3fc;
      margin-left: 3px;
      vertical-align: middle;
      border-radius: 1px;
      animation: blink 1s step-end infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    /* scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-d1 { transition-delay: 0.08s; }
    .reveal-d2 { transition-delay: 0.18s; }
    .reveal-d3 { transition-delay: 0.28s; }
    .reveal-d4 { transition-delay: 0.38s; }

    /* tags */
    .tag {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 0.27rem 0.7rem;
      border-radius: 9999px;
      font-family: "JetBrains Mono", monospace;
      font-size: 0.69rem; font-weight: 500; letter-spacing: 0.025em;
      border: 1px solid rgba(125,211,252,0.22);
      background: rgba(125,211,252,0.055);
      color: #bae6fd;
      transition: border-color .2s, background .2s;
    }
    .tag:hover { border-color: rgba(125,211,252,0.45); background: rgba(125,211,252,0.11); }
    .tag-v { border-color: rgba(196,181,253,0.22); background: rgba(196,181,253,0.055); color: #ddd6fe; }
    .tag-v:hover { border-color: rgba(196,181,253,0.45); background: rgba(196,181,253,0.11); }
    .tag-g { border-color: rgba(134,239,172,0.22); background: rgba(134,239,172,0.055); color: #bbf7d0; }
    .tag-g:hover { border-color: rgba(134,239,172,0.45); background: rgba(134,239,172,0.11); }

    /* status badge */
    .status-badge {
      display: inline-flex; align-items: center; gap: 0.55rem;
      padding: 0.38rem 1rem 0.38rem 0.72rem;
      border-radius: 9999px;
      border: 1px solid rgba(110,231,183,0.28);
      background: rgba(110,231,183,0.07);
      font-family: "JetBrains Mono", monospace;
      font-size: 0.72rem; font-weight: 600;
      color: #6ee7b7; letter-spacing: 0.05em;
    }

    /* section accent line */
    .sec-line {
      width: 44px; height: 3px;
      border-radius: 2px;
      margin-bottom: 1.25rem;
    }

    /* expertise card hover */
    .exp-card {
      transition: transform 0.28s ease, box-shadow 0.28s ease;
      position: relative;
    }
    .exp-card:hover { transform: translateY(-5px); }
    .exp-card::after {
      content: "";
      position: absolute; inset: 0;
      border-radius: 1.5rem;
      background: radial-gradient(circle at 50% 0%, rgba(125,211,252,0.055), transparent 55%);
      opacity: 0; transition: opacity 0.28s; pointer-events: none;
    }
    .exp-card-v::after { background: radial-gradient(circle at 50% 0%, rgba(196,181,253,0.055), transparent 55%); }
    .exp-card-g::after { background: radial-gradient(circle at 50% 0%, rgba(134,239,172,0.055), transparent 55%); }
    .exp-card:hover::after { opacity: 1; }

    /* progress bar */
    .prog-track {
      height: 3px; border-radius: 2px;
      background: rgba(255,255,255,0.08);
      overflow: hidden; margin-top: 0.65rem;
    }
    .prog-fill {
      height: 100%; border-radius: 2px;
      background: linear-gradient(90deg, #7dd3fc, #c4b5fd);
      transform: scaleX(0); transform-origin: left;
      transition: transform 1.1s cubic-bezier(0.22,1,0.36,1) 0.35s;
    }
    .prog-fill-amber { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

    /* ping dot */
    @keyframes ping-anim { 75%,100%{ transform:scale(2.2); opacity:0; } }
    .ping-dot { animation: ping-anim 1.5s cubic-bezier(0,0,0.2,1) infinite; }

    /* nav underline */
    nav a { position: relative; transition: color 0.2s; }
    nav a::after {
      content: ""; position: absolute;
      bottom: -2px; left: 0;
      width: 0; height: 1px;
      background: #7dd3fc;
      transition: width 0.25s ease;
    }
    nav a:hover::after { width: 100%; }

    /* contact row */
    .contact-row { transition: border-color 0.25s, background 0.25s; }
    .contact-row:hover {
      border-color: rgba(125,211,252,0.28) !important;
      background: rgba(125,211,252,0.04) !important;
    }

/* Accessibility and hardening additions */
:root {
  --page-bg: #050816;
  --text-main: #e2e8f0;
  --sky: #7dd3fc;
  --violet: #c4b5fd;
  --emerald: #6ee7b7;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  transform: translateY(-150%);
  border-radius: 9999px;
  background: #e0f2fe;
  color: #020617;
  padding: 0.65rem 1rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid rgba(125, 211, 252, 0.55);
  outline-offset: 3px;
}

:focus-visible {
  outline: 3px solid rgba(125, 211, 252, 0.55);
  outline-offset: 4px;
}

.brand-copy {
  transform: translateZ(0);
  overflow: visible;
}

.brand-name {
  overflow: visible;
  padding-right: 6px;
  font-family: "DM Sans", sans-serif;
}

.sec-line-sky-violet {
  background: linear-gradient(90deg, #7dd3fc, #c4b5fd);
}

.sec-line-violet-sky {
  background: linear-gradient(90deg, #c4b5fd, #7dd3fc);
}

.sec-line-emerald-sky {
  background: linear-gradient(90deg, #6ee7b7, #7dd3fc);
}

noscript {
  position: relative;
  z-index: 10;
  display: block;
  margin: 1rem auto 0;
  max-width: 80rem;
  padding: 0 1.5rem;
  color: #cbd5e1;
  font-size: 0.875rem;
}

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

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  #particles {
    display: none;
  }
}