/* Minimal reset */
*, *::before, *::after { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0 }

/* Theme variables */
:root{
    /* Light mode defaults */
    --bg: #f7fafc; /* very light neutral */
    --card: #ffffff;
    --muted: #6b7280;
    --text: #0b1220; /* dark text for light bg */
    --outline-border: #e6e9ee;
    --accent: #7c3aed; /* violet */
    --accent-2: #06b6d4; /* cyan */
    --radius: 12px;
    --radius-xl: 28px; /* larger, Apple-like */
    --card-blur: 10px;
    --container:1100px;
    color-scheme: light;
    /* particle colors (rgb triples) used by JS to draw particles/lines */
    --particle-rgb: 11,18,32; /* dark particles for light background */
    --particle-line-rgb: 11,18,32;
    /* optional background gradient for light mode */
    --bg-gradient: linear-gradient(180deg, #fbfdff 0%, #f3f6fb 100%);
    --canvas-opacity: 0.55;
    /* card/background tuning */
    --card-bg: rgba(255,255,255,0.94);
    --card-border: rgba(11,18,32,0.04);
    --card-shadow: 0 10px 30px rgba(2,6,23,0.06);
}

/* Light theme defaults (used above). Add dark theme overrides via .theme-dark on html */
.theme-dark{
    --bg:#0b1220;
    --card:#0f1724;
    --muted:#9ca3af;
    --text:#dbeafe;
    --outline-border:rgba(255,255,255,0.06);
    --accent:#7c3aed;
    --accent-2:#06b6d4;
    color-scheme: dark;
    --particle-rgb: 255,255,255;
    --particle-line-rgb: 255,255,255;
    --bg-gradient: none;
    --canvas-opacity: 0.9;
    --card-bg: rgba(15,23,36,0.78);
    --card-border: rgba(255,255,255,0.04);
    --card-shadow: 0 30px 80px rgba(2,6,23,0.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
    background: var(--bg-gradient, var(--bg));
    color: var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.container{
    width:clamp(280px,90%,var(--container));
    margin:0 auto;
    padding:0 20px;
}

/* Ensure cards and panels sit above the canvas and use the themed glass background */
.card, .hero-card, .contact-card, .visual-box, .site-header, .site-footer {
    position: relative;
    z-index: 2;
}

/* Header */
.site-header{
    background:transparent;
    padding:18px 0;
}
.header-inner{
    display:flex;
    align-items:center;
    gap:24px;
}
.brand{
    font-weight:700;
    color:var(--accent);
    text-decoration:none;
    font-size:1.125rem;
}

.theme-toggle{margin-left:8px;background:transparent;border:0;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:1rem}
.theme-toggle[aria-pressed="true"]{background:rgba(11,18,32,0.06)}
.main-nav ul{
    list-style:none;
    display:flex;
    gap:18px;
    margin:0;
    padding:0;
}
.main-nav a{
    color:var(--text);
    text-decoration:none;
    font-weight:600;
}
.nav-toggle{
    margin-left:auto;
    display:none;
    background:transparent;
    border:0;
    font-size:1.25rem;
    cursor:pointer;
}

/* Hero */
.hero{padding:36px 0}
.hero-card{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:28px;
    align-items:center;
    padding:36px;
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    -webkit-backdrop-filter: blur(var(--card-blur));
    backdrop-filter: blur(var(--card-blur));
}
.hero-content h1{
    font-size:2rem;
    margin:0 0 12px 0;
}
.lead{color:var(--muted);margin:0 0 18px 0}
.actions{margin:0}
.btn{
    display:inline-block;
    padding:10px 16px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:all .18s ease;
}
.btn.primary{
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    color:white;
    box-shadow:0 8px 24px rgba(124,58,237,0.18);
}
.btn.primary:hover{transform:translateY(-3px)}
.btn.outline{
    margin-left:10px;
    border:1px solid var(--outline-border);
    color:var(--muted);
    background:transparent;
}

.hero-visual{display:flex;align-items:center;justify-content:center}
.visual-box{
    width:240px;height:240px;border-radius:20px;
    background:linear-gradient(135deg, rgba(124,58,237,0.12), rgba(6,182,212,0.08));
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);
    font-weight:700;
    border:1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.avatar{display:block;width:100%;height:auto;max-width:220px;aspect-ratio: 1 / 1;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,0.06);box-shadow:0 16px 40px rgba(2,6,23,0.12);}
@media(max-width:700px){.avatar{max-width:160px}}

/* Footer */
.site-footer{padding:26px 0;margin-top:28px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.footer-inner .social{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.footer-inner a{text-decoration:none;color:inherit}

/* Canvas background container (covers body behind main content) */
.bg-canvas{
    position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--canvas-opacity,0.9);
}

/* Ensure key content sits above the canvas */
.site-header, .hero-card, .site-footer {
    position:relative;
    z-index:1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .visual-box, .btn{transition:none}
    *{animation:none!important}
}

/* Responsive */
@media (max-width:900px){
    .hero-card{grid-template-columns:1fr;}
    .hero-visual{order:-1}
}
@media (max-width:700px){
    .hero-card{padding:20px;border-radius:16px}
    .visual-box{width:180px;height:180px;border-radius:14px}
}
@media (max-width:700px){
    .main-nav{display:none}
    .nav-toggle{display:block}
    .main-nav.open {
    display: block;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--card-bg);
    padding: 16px 20px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 26px rgba(11,18,32,0.15);
    border: 1px solid var(--outline-border);
    z-index: 1000; /* ✅ ensures it's above hero and other elements */
}

    .main-nav.open ul{flex-direction:column;gap:8px}
    .header-inner{position:relative}
}

/* small utility */
.text-center{text-align:center}

/* Form validation / feedback */
.invalid{outline:2px solid rgba(220,38,38,0.12);box-shadow:0 0 0 3px rgba(220,38,38,0.04)}
.shake{animation:shake .36s ease}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}100%{transform:translateX(0)}}

/* Card utility follows theme */
.card{padding:16px;background:var(--card-bg);border-radius:10px;border:1px solid var(--card-border);box-shadow:var(--card-shadow)}

/* Contact page specific */
.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;padding:28px}
.contact-info h2{margin:0 0 8px 0;font-size:1.25rem}
.contact-info .muted{color:var(--muted)}
.methods{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.method{background:transparent;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.method strong{display:block;margin-bottom:4px;font-weight:700}
.method a{color:var(--accent);text-decoration:none}
.method-links a{color:var(--muted);text-decoration:none}

.contact-form form{display:flex;flex-direction:column;gap:12px}
.form-row label{display:block;margin-bottom:6px;font-weight:600}
.form-row input,.form-row textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--outline-border);background:transparent;color:var(--text);font-size:0.95rem}
.form-row input:focus,.form-row textarea:focus{outline:none;box-shadow:0 6px 20px rgba(124,58,237,0.08);border-color:rgba(124,58,237,0.18)}
.form-actions{display:flex;gap:12px;align-items:center}
.form-status{margin-top:10px;color:var(--muted);font-size:0.95rem}

@media(max-width:900px){
    .contact-card{grid-template-columns:1fr}
}

/* External link thumbnails in Works */
.external-link-row{display:flex;gap:12px;align-items:center}
.external-thumb{width:64px;height:48px;flex:0 0 64px;border-radius:8px;overflow:hidden;border:1px solid rgba(11,18,32,0.04);box-shadow:0 6px 18px rgba(11,18,32,0.04);display:flex;align-items:center;justify-content:center}
.external-link-row strong{display:block}

@media(max-width:700px){
    .external-link-row{gap:10px}
    .external-thumb{width:56px;height:42px;flex-basis:56px}
/* Strong override for mobile overlay menu — paste at the end of your CSS */
@media (max-width:700px) {
  .main-nav.open {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--card-bg) !important;
    padding: 16px 20px !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 12px 40px rgba(11,18,32,0.22) !important;
    border: 1px solid var(--outline-border) !important;
    z-index: 99999 !important; /* very high to ensure it's above everything */
    -webkit-backdrop-filter: blur(var(--card-blur)) !important;
    backdrop-filter: blur(var(--card-blur)) !important;
  }

  /* make sure header sits below the menu */
  .site-header, .header-inner {
    position: relative !important;
    z-index: 1000 !important;
  }

  /* if hero or any card had large z-index, ensure they stay below the menu */
  .hero-card, .card, .visual-box, .site-footer {
    z-index: 500 !important;
  }
}
}