/* ============================================
   Sparkling Results — Styles
   All site styles in one external file for better maintainability.
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES & THEME
   ============================================ */
:root {
    --bg: #020617;
    --surface: #0f172a;
    --surface-soft: #111827;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #67e8f9;
    --accent-strong: #00f5ff;
    --accent-alt: #c026d3;
    --radius: 24px;
    --shadow: 0 30px 80px rgb(0 245 255 / 8%);
    --modal-bg: rgb(2 6 23 / 95%);

    color-scheme: dark; /* Helps native form controls (select dropdowns, etc.) render in dark mode */
}

.light-mode {
    --bg: #f8fafc;
    --surface: #fff;
    --surface-soft: #f1f5f9;
    --text: #0f172a;
    --text-muted: #475569;
    --accent: #0ea5e9;
    --accent-strong: #0284c8;
    --accent-alt: #c026d3;
    --shadow: 0 10px 30px rgb(15 23 42 / 10%);
    --modal-bg: rgb(248 250 252 / 98%);

    color-scheme: light;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: Inter, system-ui, sans-serif;

    /* RESTORED original dark background */
    background: radial-gradient(circle at top, rgb(103 232 249 / 12%), transparent 28%),
        linear-gradient(180deg, #04070f 0%, #070b16 35%, #020617 100%);
    color: var(--text);
    line-height: 1.65;
    position: relative;
    transition: background 0.4s ease, color 0.3s ease;
}

/* FIXED: Correct selector for when .light-mode class is on the body element itself */
body.light-mode {
    background: linear-gradient(180deg, #f8fafc 0%, #e0e7ff 100%);
    color: #0f172a;
}

/* Scroll lock for modals and mobile nav - replaces direct body.style.overflow manipulation */
body.no-scroll {
    overflow: hidden;
}

body::before,
body::after {
    content: '';
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.12;
    z-index: -1;
    transition: background 0.4s ease;
}

body::before {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgb(103 232 249 / 25%), transparent 55%);
    top: 18%;
    left: 6%;
}

body::after {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgb(192 38 211 / 18%), transparent 55%);
    bottom: 12%;
    right: 6%;
}

/* FIXED selectors for pseudo-elements */
body.light-mode::before {
    background: radial-gradient(circle, rgb(14 165 233 / 12%), transparent 55%);
    opacity: 0.08;
}

body.light-mode::after {
    background: radial-gradient(circle, rgb(192 38 211 / 10%), transparent 55%);
    opacity: 0.08;
}

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

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

button,
input,
textarea,
select {
    font: inherit;
}

.container {
    width: min(1140px, calc(100% - 2rem));
    margin: 0 auto;
}

.page-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    background: rgb(2 6 23 / 82%);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgb(103 232 249 / 12%);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.light-mode .page-header {
    background: rgb(248 250 252 / 92%);
    border-bottom-color: rgb(15 23 42 / 10%);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem 0;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.navbar-brand:hover {
    transform: translateY(-1px);
}

/* Updated logo-mark for animated SVG */
.logo-mark {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 16px 40px rgb(103 232 249 / 18%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.logo-mark svg {
    width: 100%;
    height: 100%;
    display: block;
}

.logo-mark.pulse {
    transform: scale(1.1);
    box-shadow: 0 22px 60px rgb(103 232 249 / 28%);
}

.brand-text {
    display: inline-block;
    line-height: 1.05;
}

.navbar-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    align-items: center;
}

.navbar-link {
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.navbar-link:hover,
.navbar-link:focus-visible {
    background: rgb(103 232 249 / 8%);
    color: var(--accent);
    transform: translateY(-1px);
    outline: none;
}

.light-mode .navbar-link:hover,
.light-mode .navbar-link:focus-visible {
    background: rgb(14 165 233 / 10%);
}

/* Light mode logo (navbar + form success): white inner background + black S for contrast */
.light-mode .logo-mark svg > circle:nth-of-type(2),
.light-mode .success-icon svg > circle:nth-of-type(2) {
    fill: #fff !important;
}

.light-mode .logo-mark svg text,
.light-mode .success-icon svg text {
    fill: #020617 !important;
    filter: drop-shadow(0 0 4px rgba(2, 6, 23, 0.25)) !important;
}

/* Light mode: replace white sparkles with black and navy blue so they are visible */
.light-mode .logo-mark svg .sparkle-black,
.light-mode .success-icon svg .sparkle-black {
    fill: #020617 !important;
}

.light-mode .logo-mark svg .sparkle-navy,
.light-mode .success-icon svg .sparkle-navy {
    fill: #1e3a8a !important;
}

.navbar-link.active {
    background: rgb(103 232 249 / 16%);
    color: var(--accent);
}

.theme-toggle {
    background: transparent;
    border: 1px solid rgb(103 232 249 / 25%);
    color: var(--text);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    font-size: 1.1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    background: rgb(103 232 249 / 10%);
    transform: scale(1.05);
}

.light-mode .theme-toggle {
    border-color: rgb(15 23 42 / 15%);
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

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

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
}

.lead {
    margin: 1.5rem 0 2rem;
    color: var(--text-muted);
    max-width: 38rem;
}

.hero {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
}

.hero::before {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgb(103 232 249 / 35%), transparent 58%);
    top: -80px;
    left: -60px;
}

.hero::after {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgb(192 38 211 / 28%), transparent 58%);
    bottom: -80px;
    right: -40px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: 3.5rem;
    align-items: center;
}

.hero-copy {
    max-width: 620px;
}

.hero-copy sup {
    color: var(--accent);
    font-weight: 700;
}

.hero-copy h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3rem, 4vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    margin-bottom: 1rem;
    background: linear-gradient(120deg, #fff, rgb(103 232 249 / 85%), rgb(239 68 255 / 80%));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 18px 45px rgb(20 29 38 / 12%);
}

.light-mode .hero-copy h1 {
    background: linear-gradient(120deg, #0f172a, #0ea5e9, #c026d3);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-copy p.lead {
    margin: 1.5rem 0 2rem;
    color: var(--text-muted);
    max-width: 30rem;
}

.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.scroll-hint:hover {
    opacity: 1;
    transform: translateY(1px);
}

.scroll-hint svg {
    animation: scroll-bob 1.6s ease-in-out infinite;
}

@keyframes scroll-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* ============================================
   BUTTONS & CALL-TO-ACTION
   ============================================ */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.8rem;
    border-radius: 999px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    cursor: pointer;

    /* Strip native button appearance + any default borders (browser/OS defaults can force
       a solid white/light fill *and* a 1px light/white top border/bevel for <button> elements
       in dark mode, even when background/border are set). This fixes the form submit button
       (.btn-primary.contact-submit) and secondary action buttons (Copy, "Send another message",
       "Email directly" etc.) in the contact form. */
    appearance: none;
    border: none;
}

.btn-primary::before,
.btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgb(255 255 255 / 18%), transparent 35%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.btn-primary:hover::before,
.btn-secondary:hover::before {
    opacity: 1;
}

/* Button text color: white in dark mode, black in light mode */
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-alt));
    color: #fff; /* white text on dark background */

    /* The outer shadow provides lift. The inset top shadow darkens the top edge of the
       gradient slightly. This prevents the light cyan start of the 135deg gradient (plus any
       remaining native bevel/anti-aliasing) from appearing as a "top white border" in dark mode
       on the form submit button. Light mode unaffected as the gradient + text color works fine there. */
    box-shadow: 
        0 22px 60px rgb(103 232 249 / 20%),
        inset 0 1px 2px rgb(0 0 0 / 35%);
}

.light-mode .btn-primary {
    color: #020617; /* black text on light background */
}

.btn-secondary {
    border: 2px solid var(--accent);
    color: var(--accent);
    background: transparent;
}

/* Subtle surface tint only in dark mode for .btn-secondary buttons (e.g. the ones inside
   the contact form success state and "Copy" buttons). This matches the treatment used for
   form inputs and stat cards, gives the outline buttons better definition/clickability against
   dark surfaces, and ensures any native button background (often a solid white or light fill
   from the browser/OS in dark mode) is fully overridden. Light mode stays pure transparent
   (standard outline on light card). Hover always wins with the accent fill anyway. */
body:not(.light-mode) .btn-secondary {
    background: rgb(255 255 255 / 4%);
}

.btn-secondary:hover {
    background: var(--accent);
    color: #020617;
    border-color: var(--accent);
    transform: translateY(-2px);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

.hero-card {
    position: relative;
    padding: 2rem;
    border-radius: var(--radius);
    background: rgb(15 23 42 / 70%);
    border: 1px solid rgb(103 232 249 / 12%);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.light-mode .hero-card {
    background: #fff;
    border-color: rgb(15 23 42 / 10%);
}

.hero-card::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(103 232 249 / 16%), transparent 60%);
    top: -40px;
    left: -30px;
    pointer-events: none;
}

/* Hero image wrapper for reliable square display */
.hero-image {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 1.6rem;
    position: relative;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

/* Canvas for hero sparkles (replaces DOM nodes for better perf on high-interaction mousemove) */
.hero-image .hero-sparkle-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 20px;
}

/* Handwritten signature - Caveat font + gradient like h1 + light/dark support */
.hero-signature {
    position: absolute;
    bottom: 8%; /* Moved down ~20px from previous 12% */
    right: 10%;
    font-family: Caveat, cursive;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    transform: rotate(-8deg);
    pointer-events: none;
    user-select: none;
    opacity: 0.95;
    text-shadow: 0 2px 10px rgb(0 0 0 / 50%);

    /* Same gradient style as the main h1 */
    background: linear-gradient(120deg, #fff, rgb(103 232 249 / 90%), rgb(239 68 255 / 85%));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.light-mode .hero-signature {
    background: linear-gradient(120deg, #0f172a, #0ea5e9, #c026d3);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 8px rgb(255 255 255 / 30%);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.stat {
    position: relative;
    overflow: hidden;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 18px;
    padding: 1.1rem;
}

.stat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgb(103 232 249 / 8%) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat:hover::after {
    opacity: 1;
}

.light-mode .stat {
    background: #f1f5f9;
    border-color: rgb(15 23 42 / 8%);
}

.stat strong {
    display: block;
    font-size: 1.35rem;
    color: var(--accent);
}

.section {
    padding: 6rem 0;
}

.section-heading {
    text-align: center;
    margin-bottom: 3rem;
}

.section-heading h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 3vw, 3.5rem);
}

.section-heading p {
    max-width: 720px;
    margin: 1rem auto 0;
    color: var(--text-muted);
}

.cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.work-card {
    cursor: pointer;
}

.work-card:hover {
    transform: translateY(-6px) rotate(-0.1deg);
    border-color: var(--accent);
}

.feature-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgb(103 232 249 / 12%);
    color: var(--accent);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.feature-tag:hover {
    transform: translateY(-1px);
    background: rgb(103 232 249 / 18%);
}

.work-showcase {
    margin-top: 2rem;
    display: grid;
    place-items: center;
}

.showcase-card {
    width: min(800px, 100%);
    padding: 2rem;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgb(15 23 42 / 95%), rgb(2 6 23 / 90%));
    border: 1px solid rgb(103 232 249 / 12%);
    box-shadow: 0 30px 90px rgb(0 0 0 / 18%);
    animation: float-slow 8s ease-in-out infinite;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    cursor: pointer;
}

.light-mode .showcase-card {
    background: #fff;
    border-color: rgb(15 23 42 / 10%);
}

.showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 100px rgb(0 0 0 / 25%);
}

.showcase-card.highlight {
    transform: translateY(-5px);
    box-shadow: 0 42px 120px rgb(103 232 249 / 22%);
    border-color: rgb(103 232 249 / 22%);
}

.showcase-runner {
    display: grid;
    gap: 1rem;
}

.showcase-runner-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.showcase-status {
    color: var(--text);
    font-size: 0.95rem;
    opacity: 0.8;
}

.showcase-output {
    margin-top: 1.5rem;
    padding: 1.4rem 1.2rem;
    border-radius: 20px;
    background: rgb(103 232 249 / 8%);
    border: 1px solid rgb(103 232 249 / 16%);
    color: #eaf7ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 0.98rem;
    min-height: 3.4rem;
    display: grid;
    place-items: center;
    text-align: center;
    letter-spacing: 0.01em;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.light-mode .showcase-output {
    background: #f1f5f9;
    border-color: rgb(14 165 233 / 20%);
    color: #0f172a;
}

.showcase-output.active {
    background: rgb(103 232 249 / 18%);
    transform: translateY(-2px);
}

.showcase-card pre {
    margin: 0;
    padding: 1.4rem 1.2rem;
    border-radius: 20px;
    background: rgb(7 11 22 / 95%);
    border: 1px solid rgb(103 232 249 / 12%);
    overflow-x: auto;
}

.light-mode .showcase-card pre {
    background: #f1f5f9;
    border-color: rgb(15 23 42 / 10%);
}

.showcase-card code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    color: #d8f7ff;
    font-size: 0.95rem;
    display: block;
    white-space: pre;
}

.light-mode .showcase-card code {
    color: #0f172a;
}

.showcase-card p {
    margin-top: 1rem;
    color: var(--text-muted);
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.showcase-label {
    display: inline-flex;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: rgb(103 232 249 / 12%);
    color: var(--accent);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    margin: 0 auto 1rem;
    text-transform: uppercase;
}

/* ============================================
   CARDS & CONTENT BLOCKS
   ============================================ */
.card {
    background: var(--surface);
    border: 1px solid rgb(103 232 249 / 8%);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.light-mode .card {
    background: #fff;
    border-color: rgb(15 23 42 / 8%);
}

.card:hover,
.card:focus-within {
    transform: translateY(-6px) rotate(-0.1deg);
    border-color: rgb(103 232 249 / 18%);
}

.card::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgb(103 232 249 / 14%), transparent 62%);
    top: -40px;
    right: -40px;
    pointer-events: none;
}

.card h3 {
    margin-bottom: 0.85rem;
    font-size: 1.35rem;
}

.card p {
    color: var(--text-muted);
}

.badge {
    display: inline-flex;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: rgb(103 232 249 / 8%);
    color: var(--accent);
    font-size: 0.95rem;
    margin-top: 1rem;
}

.light-mode .badge {
    background: rgb(14 165 233 / 10%);
    color: var(--accent);
}

.grid-two {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: start;
}

.grid-two > div:first-child {
    display: grid;
    gap: 2.2rem;
}

/* Skills Visualizer */

/* ============================================
   SKILLS VISUALIZER
   ============================================ */
.skills-visual {
    display: grid;
    gap: 1.1rem;
}

.skill {
    width: 100%;
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.skill-level {
    font-weight: 600;
    color: var(--accent);
}

.skill-bar {
    height: 8px;
    background: rgb(103 232 249 / 15%);
    border-radius: 999px;
    overflow: hidden;
}

.light-mode .skill-bar {
    background: rgb(14 165 233 / 15%);
}

.skill-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-alt));
    border-radius: 999px;
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: var(--skill-progress, 0%);
}

.contact-card {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid rgb(103 232 249 / 8%);
    box-shadow: var(--shadow);
}

.light-mode .contact-card {
    background: #fff;
    border-color: rgb(15 23 42 / 8%);
}

.contact-card h3 {
    margin-bottom: 1rem;
}

.contact-card p {
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.contact-card a {
    color: var(--accent);
}

/* ============================================
   CONTACT FORM (new standalone version)
   ============================================ */
.contact-form-intro {
    margin-bottom: 1.25rem;
    color: var(--text-muted);
}

.contact-form-intro.is-hidden {
    display: none;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.form-group {
    margin-bottom: 0.9rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    border: 1px solid rgb(103 232 249 / 18%);
    background: rgb(255 255 255 / 4%);
    color: var(--text);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.light-mode .form-group input,
.light-mode .form-group select,
.light-mode .form-group textarea {
    background: #f8fafc;
    border-color: rgb(15 23 42 / 12%);
    color: #0f172a;
}

/* Improve native <select> dropdown appearance (the popup list of options) in dark mode.
   Native selects are hard to fully theme, but these rules help in most browsers. */
.form-group select {
    background: rgb(255 255 255 / 4%);
    color: var(--text);
}

.form-group select option {
    background: var(--surface);
    color: var(--text);
}

.light-mode .form-group select {
    background: #f8fafc;
    color: #0f172a;
}

.light-mode .form-group select option {
    background: #fff;
    color: #0f172a;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(103 232 249 / 15%);
}

/* Temporary validation error flash - replaces direct .style.borderColor */
.form-group input.validation-flash,
.form-group select.validation-flash,
.form-group textarea.validation-flash {
    border-color: #f87171 !important;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.form-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
    opacity: 0.8;
}

.contact-submit {
    width: 100%;
    margin-top: 0.5rem;
}

/* Use class instead of inline style.display for the contact form visibility toggle */
#contact-form.is-hidden {
    display: none;
}

.email-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.email-address {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    padding: 0.4rem 0.6rem;
    background: rgb(103 232 249 / 8%);
    border-radius: 8px;
    color: var(--accent);
    text-decoration: none;
}

.copy-email-btn {
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
}

.contact-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Success state */
.contact-success {
    text-align: center;
    padding: 1rem 0.5rem;
}

.contact-success.hidden {
    display: none;
}

.success-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.5rem;
}

.success-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.contact-success h4 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.contact-success p {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.success-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Error display for in-page Formspree / network errors */
.contact-error {
    position: relative;
    background: rgb(248 113 113 / 12%);
    border: 1px solid #f87171;
    color: #ef4444;
    padding: 0.9rem 1.75rem 0.9rem 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.light-mode .contact-error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.contact-error.hidden {
    display: none;
}

.contact-error-close {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.15s ease, transform 0.15s ease;
    border-radius: 4px;
}

.contact-error-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

.contact-error-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.contact-error-message {
    display: block;
    padding-right: 0.5rem;
}

@media (width <= 720px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.footer {
    padding: 3rem 0;
    text-align: center;
    color: rgb(226 232 240 / 70%);
}

.light-mode .footer {
    color: #64748b;
}

.footer strong {
    color: var(--accent);
}

/* ============================================
   MOBILE NAV TOGGLE (hamburger)
   ============================================ */
.nav-toggle {
    display: none; /* shown on mobile via media query */
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0.4rem;
    background: transparent;
    border: 1px solid rgb(103 232 249 / 25%);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-toggle:hover {
    background: rgb(103 232 249 / 10%);
    border-color: var(--accent);
}

.light-mode .nav-toggle {
    border-color: rgb(15 23 42 / 15%);
}

.nav-toggle-icon {
    position: relative;
    width: 20px;
    height: 2px;
    background: currentcolor;
    border-radius: 2px;
    transition: transform 0.3s ease, background 0.3s ease;
    display: block;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentcolor;
    border-radius: 2px;
    transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }

/* Active (X) state */
.page-header.nav-open .nav-toggle-icon {
    background: transparent;
}

.page-header.nav-open .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.page-header.nav-open .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

@media (width <= 980px) {
    .hero-grid,
    .grid-two {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: 7rem;
    }

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

@media (width <= 720px) {
    .navbar {
        flex-direction: row;
        align-items: center;
        position: relative;
    }

    .nav-toggle {
        display: grid;
    }

    .navbar-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.5rem 1rem 1rem;
        background: rgb(2 6 23 / 97%);
        border-bottom: 1px solid rgb(103 232 249 / 12%);
        backdrop-filter: blur(16px);
        box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
        z-index: 90;

        /* Smooth animated reveal (no more abrupt display toggle) */
        display: flex;
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease;
    }

    .light-mode .navbar-list {
        background: rgb(248 250 252 / 98%);
        border-bottom-color: rgb(15 23 42 / 10%);
        box-shadow: 0 10px 30px rgb(15 23 42 / 12%);
    }

    .page-header.nav-open .navbar-list {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .navbar-link {
        padding: 0.85rem 1rem; /* larger, more comfortable touch targets */
        border-radius: 12px;
        display: block;
        min-height: 44px; /* iOS/Android recommended tap size */
        line-height: 1.2;
    }

    .hero-copy,
    .hero-card {
        text-align: center;
    }

    .hero-card {
        padding: 1.6rem;
    }

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

    .cards {
        grid-template-columns: 1fr;
    }

    .showcase-label {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
        margin: 0 auto 0.5rem;
    }

    .showcase-card {
        padding: 1rem;
    }
}

/* ============================================
   MODALS & PLAYGROUND
   ============================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(2 6 23 / 85%);
    backdrop-filter: blur(8px);
}

.light-mode .modal-backdrop {
    background: rgb(15 23 42 / 60%);
}

.modal-content {
    position: relative;
    background: var(--modal-bg);
    border: 1px solid rgb(103 232 249 / 20%);
    border-radius: var(--radius);
    padding: 2.5rem;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden auto; /* Prevent any horizontal scroll inside modal */
    box-shadow: 0 40px 120px rgb(0 0 0 / 40%);
    z-index: 1;
}

.light-mode .modal-content {
    background: #fff;
    border-color: rgb(15 23 42 / 10%);
    box-shadow: 0 20px 60px rgb(15 23 42 / 15%);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--accent);
}

.modal-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.modal-content .feature-tag {
    margin-bottom: 1.25rem;
}

.modal-content p {
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.modal-content .modal-links {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.modal-content .btn-primary,
.modal-content .btn-secondary {
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
}

/* Modal highlights list (moved from inline JS styles for maintainability) */
.highlights-list {
    margin: 0.75rem 0 1.5rem;
    padding-left: 1.25rem;
    color: var(--text-muted);
}

.highlights-item {
    margin-bottom: 0.35rem;
}

/* Playground specific */

/* ============================================
   PLAYGROUND CANVAS
   ============================================ */
.playground {
    width: 100%;
    height: 420px;
    background: rgb(2 6 23 / 60%);
    border: 1px solid rgb(103 232 249 / 30%);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    margin: 1.5rem 0;
    box-shadow: inset 0 0 60px rgb(0 0 0 / 30%);
    display: block; /* ensure canvas behaves well */
    touch-action: none; /* prevent scrolling/gestures on mobile so dragging draws instead of scrolling the modal or page */
    user-select: none;
}

.light-mode .playground {
    background: #f1f5f9;
    border-color: rgb(14 165 233 / 30%);
}

.playground-info {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.playground-controls {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

/* Playground action buttons (Burst / Clear All) use white text in dark mode.
   They are .btn-secondary (outline style). On hover they get the normal
   dark-text-on-accent treatment. This overrides the default accent-colored
   text so the labels remain legible against the dark canvas/modal background. */
body:not(.light-mode) .playground-controls .btn-secondary {
    color: #fff;
}

/* Full-screen playground on mobile: prevents having to scroll the modal while drawing,
   so pointer tracking doesn't get lost. Instructions text is also reduced via JS for mobile. */
@media (width <= 768px) {
    .modal:has(.playground) {
        padding: 0; /* remove outer padding so playground modal is truly full-screen */
    }

    .modal-content:has(.playground) {
        display: flex;
        flex-direction: column;
        padding: 0.5rem;
        max-width: 100%;
        width: 100%;
        height: 100dvh; /* dynamic viewport for mobile bars */
        max-height: none;
        border-radius: 0;
        border: none;
        margin: 0;
        overflow: hidden; /* canvas owns the space; no internal scroll */
        box-shadow: none;
    }

    .modal-content:has(.playground) .modal-close {
        top: 0.5rem;
        right: 0.75rem;
        font-size: 1.75rem;
    }

    .modal-content:has(.playground) h2 {
        flex: 0 0 auto;
        font-size: 1.35rem;
        margin-bottom: 0.25rem;
    }

    .modal-content:has(.playground) .feature-tag {
        display: none; /* save vertical space on mobile */
    }

    .modal-content:has(.playground) .playground-info {
        flex: 0 0 auto;
        font-size: 0.8rem;
        margin-bottom: 0.35rem;
        line-height: 1.3;
    }

    .modal-content:has(.playground) .playground {
        flex: 1 1 auto;
        min-height: 0; /* allows proper flex shrinking/growing for the canvas */
        height: auto; /* let flex control it */
        margin: 0.25rem 0;
        border-radius: 12px;
    }

    .modal-content:has(.playground) .playground-controls {
        flex: 0 0 auto;
        margin-top: 0.25rem;
        gap: 0.5rem;
    }
}

@keyframes sparkle-burst {
    0% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(calc(var(--tx) * 1.8), calc(var(--tx) * 1.8)) scale(0.35);
    }
}

.sparkle-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, var(--accent));
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    will-change: transform, opacity;
}

.sparkle-dot.persistent {
    width: 7px;
    height: 7px;
    opacity: 0.92;
}

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

/* Better focus visibility for custom interactive elements */
button:focus-visible,
a:focus-visible,
.navbar-link:focus-visible,
.card:focus-within,
.work-card:focus-within,
.showcase-card:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.light-mode button:focus-visible,
.light-mode a:focus-visible {
    outline-color: var(--accent-strong);
}

/* Light mode refinements for code / monospaced areas */
.light-mode .showcase-card pre,
.light-mode .showcase-card code {
    background: #f1f5f9;
    color: #0f172a;
    border-color: rgb(15 23 42 / 10%);
}