/* ============================================
   VIPSpot 2025 - Main Stylesheet
   Author: VIPSpot
   Description: Modern, responsive CSS for a futuristic developer portfolio
   ============================================ */

/* ============================================
   CSS VARIABLES & CUSTOM PROPERTIES
   ============================================ */
:root {
    --neon-blue: #00f3ff;
    --neon-green: #39ff14;
    --neon-purple: #b967ff;
    --dark-bg: #0a0a1a;
    --dark-card: #12122a;
    --white: #ffffff;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-700: #374151;
    --gray-800: #1f2937;
    
    /* Matrix theme variables */
    --matrix-color: rgba(0,255,170,.85);
    --matrix-trail: 0.08;
}

/* Matrix theme overrides */
[data-matrix-theme="dawn"]      { --matrix-color: rgba(255,128,180,.85); --matrix-trail: .09; }
[data-matrix-theme="morning"]   { --matrix-color: rgba(0,255,170,.85);   --matrix-trail: .08; }
[data-matrix-theme="afternoon"] { --matrix-color: rgba(80,180,255,.85);  --matrix-trail: .08; }
[data-matrix-theme="evening"]   { --matrix-color: rgba(255,210,100,.88); --matrix-trail: .07; }
[data-matrix-theme="night"]     { --matrix-color: rgba(180,120,255,.90); --matrix-trail: .06; }
    
    /* Font sizes */
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-6xl: 3.75rem;
    
    /* Spacing */
    --spacing-2: 0.5rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    
    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 50%;
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}

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

body {
    background-color: var(--dark-bg);
    color: var(--white);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
    font-family: 'Roboto Mono', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-sprite {
    display: none;
}

/* Ensure early font usage for headers and force font loading */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', 'Roboto Mono', system-ui, sans-serif;
}

/* Force early font usage to prevent "not used within 5s" warnings */
html::before {
    content: '';
    font-family: 'Orbitron', 'Roboto Mono';
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* Avatar styles for user photo */
.avatar { 
    display: inline-block; 
}

/* Centered circular frame, no pseudo drift */
.avatar-frame {
  --ring: 10px;                /* thickness of the outer ring */
  display: inline-grid;
  place-items: center;
  padding: var(--ring);
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(34,211,238,.22), transparent 62%),
    radial-gradient(120% 120% at 50% 50%, rgba(167,139,250,.18), transparent 78%);
  /* Prevent any inherited bg from earlier wrapper tricks */
  background-clip: padding-box;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  isolation: isolate; /* avoids blending with section bg */
}

/* Your actual photo */
.avatar-img{
  display: block;              /* removes baseline gap */
  width: clamp(160px, 22vw, 280px);
  height: clamp(160px, 22vw, 280px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 40%;    /* nudge if you want more headroom */
  border: 2px solid rgba(34,211,238,.45);
}

/* --- KILL any legacy decorative circle still attached to the old wrapper --- */
/* If the previous markup used a class like .about-photo, .portrait, etc., these lines neutralize it safely. */
#about .about-photo,
#about .portrait,
#about .image-wrap { background: none !important; }
#about .about-photo::before,
#about .about-photo::after,
#about .portrait::before,
#about .portrait::after,
#about .image-wrap::before,
#about .image-wrap::after { content: none !important; }

.hover-neon:hover { color: var(--neon); }

.avatar-img:hover {
    transform: scale(1.05);
    border-color: var(--neon-blue);
    box-shadow: 0 15px 40px rgba(0, 243, 255, 0.2);
}

/* ============================================
   ACCESSIBILITY STYLES
   ============================================ */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background-color: var(--neon-blue);
    color: var(--dark-bg);
    padding: 8px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    z-index: 1000;
    font-weight: bold;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 6px;
}

/* Focus styles for better accessibility */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--neon-blue);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   MATRIX BACKGROUND ANIMATION
   ============================================ */
#matrix-canvas,
#matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.15;
    pointer-events: none;
}

/* ============================================
   TYPOGRAPHY EFFECTS
   ============================================ */

/* Typewriter effect */
.typewriter h1 {
    overflow: hidden;
    border-right: 0.15em solid var(--neon-blue);
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0.15em;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--neon-blue); }
}

/* Glitch effect */
.glitch {
    position: relative;
    display: inline-block;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.glitch::before {
    animation: glitch-effect 3s infinite;
    color: #ff00ff;
    z-index: -1;
}

.glitch::after {
    animation: glitch-effect 2s infinite;
    color: #00ffff;
    z-index: -2;
}

@keyframes glitch-effect {
    0% { transform: translate(0); }
    20% { transform: translate(-5px, 5px); }
    40% { transform: translate(-5px, -5px); }
    60% { transform: translate(5px, 5px); }
    80% { transform: translate(5px, -5px); }
    100% { transform: translate(0); }
}

/* ============================================
   PROJECT CARD FLIP ANIMATION
   ============================================ */
.project-card {
    perspective: 1000px;
    cursor: pointer;
}

.project-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.project-card:hover .project-card-inner,
.project-card:focus-within .project-card-inner {
    transform: rotateY(180deg);
}

.project-card-front,
.project-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-6);
}

.project-card-back {
    transform: rotateY(180deg);
}

.project-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
}

.project-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   FLOATING ANIMATION
   ============================================ */
.floating {
    animation: float 6s ease-in-out infinite;
}

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

/* ============================================
   FORM STYLES
   ============================================ */
.form-group {
    position: relative;
    margin-bottom: var(--spacing-8);
}

.form-input {
    width: 100%;
    padding: var(--spacing-4);
    background: transparent;
    border: 1px solid rgba(0, 243, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--white);
    font-family: 'Roboto Mono', monospace;
    font-size: var(--text-base);
    transition: all var(--transition-normal);
    resize: vertical;
}

.form-input:focus {
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
}

.form-input:invalid:not(:placeholder-shown) {
    border-color: #ff4444;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
}

.form-label {
    position: absolute;
    left: var(--spacing-4);
    top: var(--spacing-4);
    padding: 0 var(--spacing-2);
    background: var(--dark-bg);
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--transition-normal);
    pointer-events: none;
    font-family: 'Roboto Mono', monospace;
    font-size: var(--text-base);
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
    top: -0.5rem;
    color: var(--neon-blue);
    font-size: var(--text-sm);
    font-weight: 500;
}

.error-message {
    display: block;
    color: #ff4444;
    font-size: var(--text-sm);
    margin-top: var(--spacing-2);
    min-height: 1.2em;
}

/* ============================================
   BUTTON STYLES
   ============================================ */
.cta-button {
    position: relative;
    overflow: hidden;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 243, 255, 0.2),
        transparent
    );
    transition: left 0.5s;
    /* Prevent pseudo-element from intercepting taps */
    pointer-events: none;
}

.cta-button:hover::before {
    left: 100%;
}

/* Mobile touch optimization for CTA */
#cta-build {
    position: relative;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* CTA wrapper isolation for stacking context safety */
.hero-content {
    isolation: isolate;
    z-index: 5;
    position: relative;
}

/* Ensure contact anchor lands correctly below header */
#contact {
    scroll-margin-top: 80px;
}

/* Subtle "arrived" focus/target cue for sighted users */
#contact:target h2,
#contact:focus-within h2 {
    outline: 2px solid var(--neon-blue);
    outline-offset: .25rem;
}

/* Tactile feedback for touch devices */
.cta-button:active {
    transform: translateY(1px) scale(0.995);
}

.cta-button:focus-visible {
    outline: 2px solid var(--neon-blue);
    outline-offset: 4px;
}

/* ============================================
   TECH STACK GRID
   ============================================ */

/* Hidden sprite container */
.tech-sprite-container {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.tech-sprite-container svg {
    display: none;
}

/* ============================================
   TECH GRID STYLES
   ============================================ */
.tech-grid {
    --gap: 0.9rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--gap);
    margin-block: 1.25rem 2rem;
    padding: 0;
    list-style: none;
}

.tech-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    color: var(--white);
    cursor: pointer;
    will-change: transform;
    position: relative;
    overflow: hidden;
}

.tech-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.tech-pill:hover {
    transform: translateY(-2px);
    border-color: var(--neon-blue);
    box-shadow: 0 0 18px rgba(0, 237, 255, 0.18);
}

.tech-pill:hover::before {
    left: 100%;
}

.tech-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: currentColor;
}

/* Brand accent colors on hover */
.tech-pill[aria-label="React"]:hover {
    color: #61DAFB;
    border-color: #61DAFB;
    box-shadow: 0 0 18px rgba(97, 218, 251, 0.2);
}

.tech-pill[aria-label="TypeScript"]:hover {
    color: #3178C6;
    border-color: #3178C6;
    box-shadow: 0 0 18px rgba(49, 120, 198, 0.2);
}

.tech-pill[aria-label="JavaScript"]:hover {
    color: #F7DF1E;
    border-color: #F7DF1E;
    box-shadow: 0 0 18px rgba(247, 223, 30, 0.2);
}

.tech-pill[aria-label="WordPress"]:hover {
    color: #21759B;
    border-color: #21759B;
    box-shadow: 0 0 18px rgba(33, 117, 155, 0.2);
}

.tech-pill[aria-label="Angular"]:hover {
    color: #DD0031;
    border-color: #DD0031;
    box-shadow: 0 0 18px rgba(221, 0, 49, 0.2);
}

.tech-pill[aria-label="Tailwind CSS"]:hover {
    color: #38BDF8;
    border-color: #38BDF8;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.2);
}

.tech-pill[aria-label="Vue.js"]:hover {
    color: #4FC08D;
    border-color: #4FC08D;
    box-shadow: 0 0 18px rgba(79, 192, 141, 0.2);
}

.tech-pill[aria-label="Nuxt"]:hover {
    color: #00DC82;
    border-color: #00DC82;
    box-shadow: 0 0 18px rgba(0, 220, 130, 0.2);
}

.tech-pill[aria-label="Next.js"]:hover {
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.2);
}

.tech-pill[aria-label="Laravel"]:hover {
    color: #FF2D20;
    border-color: #FF2D20;
    box-shadow: 0 0 18px rgba(255, 45, 32, 0.2);
}

.tech-pill[aria-label="Node.js"]:hover {
    color: #5FA04E;
    border-color: #5FA04E;
    box-shadow: 0 0 18px rgba(95, 160, 78, 0.2);
}

/* ============================================
   3D TILT & SHINE FOR TECH CHIPS
   ============================================ */
.tech-grid[data-tilt] {
    perspective: 900px;
}

.tech-grid[data-tilt] .tech-pill {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    /* driven by CSS vars set in JS */
    transform:
        translateZ(var(--elev, 0px))
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg));
    box-shadow:
        0 0 0 rgba(0,0,0,0),
        0 0 calc(20px + var(--glow, 0px)) rgba(0, 237, 255, 0.12);
    will-change: transform;
}

/* subtle rim + internal glow that reacts to tilt */
.tech-grid[data-tilt] .tech-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    background:
        radial-gradient(120% 120% at calc(50% + var(--glow-x,0px)) calc(0% + var(--glow-y,0px)),
          rgba(0, 237, 255, .18), transparent 55%);
    transform: translateZ(1px);
    opacity: .6;
}

/* reflective sheen sweep on hover/focus */
.tech-grid[data-tilt] .tech-pill::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 12px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.06) 47%,
        rgba(255,255,255,.22) 50%,
        rgba(255,255,255,.06) 53%,
        transparent 100%);
    transform: translateZ(2px) translateX(var(--shine-x, -160%))
               rotate(var(--shine-rot, 0deg));
    opacity: var(--shine-o, 0);
    transition: opacity 0.18s ease;
    mix-blend-mode: screen; /* pretty on dark */
}

.tech-grid[data-tilt] .tech-pill:hover::after,
.tech-grid[data-tilt] .tech-pill:focus-visible::after {
    animation: tech-shine 900ms ease;
    opacity: .8;
}

@keyframes tech-shine {
    0%   { --shine-x: -160%; opacity: 0; }
    30%  { opacity: .7; }
    100% { --shine-x: 160%;  opacity: 0; }
}

/* Accessibility & performance */
@media (prefers-reduced-motion: reduce) {
    .tech-grid[data-tilt] .tech-pill {
        transform: none !important;
    }
    .tech-grid[data-tilt] .tech-pill::after {
        animation: none;
        opacity: 0;
    }
}

.loading-spinner {
    display: inline-block;
}

.loading-spinner.show {
    display: inline-block;
}

.loading-spinner.hidden {
    display: none;
}

/* ============================================
   MODAL STYLES
   ============================================ */
.modal {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    opacity: 0;
    transition: all var(--transition-normal);
}

.modal:not(.hidden) .modal-content {
    transform: scale(1);
    opacity: 1;
}

.modal-title {
    color: var(--neon-blue);
    margin-bottom: var(--spacing-4);
}

.modal-body {
    color: var(--gray-300);
    line-height: 1.8;
}

.modal-body h4 {
    color: var(--neon-green);
    margin-bottom: var(--spacing-4);
    font-family: 'Orbitron', sans-serif;
}

.modal-body ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: var(--spacing-6);
}

.modal-body li {
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-body li:before {
    content: '▶';
    color: var(--neon-blue);
    margin-right: var(--spacing-2);
}

.modal-body .tech-tags {
    display: flex;
    gap: var(--spacing-2);
    margin: var(--spacing-4) 0;
    flex-wrap: wrap;
}

.modal-body .tech-tag {
    background: var(--neon-purple);
    color: var(--dark-bg);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
}

.modal-body .project-links {
    display: flex;
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
}

.modal-body .project-link {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    background: transparent;
    border: 2px solid var(--neon-blue);
    color: var(--neon-blue);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-normal);
}

.modal-body .project-link:hover {
    background: var(--neon-blue);
    color: var(--dark-bg);
    transform: translateY(-2px);
}

.modal-body .project-link.secondary {
    border-color: var(--neon-green);
    color: var(--neon-green);
}

.modal-body .project-link.secondary:hover {
    background: var(--neon-green);
    color: var(--dark-bg);
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-card);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--neon-blue);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-green);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--neon-blue) var(--dark-card);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-glow {
    text-shadow: 0 0 10px currentColor;
}

.border-glow {
    box-shadow: 0 0 10px currentColor;
}

.glass-effect {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.05);
}

.hidden {
    display: none !important;
}

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

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Mobile First - Base styles for mobile */
.split-screen {
    flex-direction: column;
}

.hero-content {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-4);
}

.tech-icons {
    justify-content: center;
    gap: var(--spacing-2);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .tech-icons {
        gap: var(--spacing-4);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .split-screen {
        flex-direction: row;
    }
    
    .hero-content {
        padding: var(--spacing-16) var(--spacing-4);
    }
    
    .tech-icons {
        justify-content: flex-start;
    }
    
    /* Mobile menu adjustments */
    #mobile-menu-button {
        display: none;
    }
    
    #mobile-menu {
        display: none !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 1200px;
    }
    
    .hero-content {
        padding: var(--spacing-20) var(--spacing-4);
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --neon-blue: #ffffff;
        --neon-green: #ffffff;
        --neon-purple: #ffffff;
        --dark-bg: #000000;
        --dark-card: #111111;
    }
    
    .form-input {
        border-width: 2px;
    }
    
    button, a {
        outline: 2px solid white;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    body {
        background: white;
        color: black;
    }
    
    #matrix-canvas,
    #matrix-bg,
    .floating,
    .modal {
        display: none !important;
    }
    
    .project-card-inner {
        transform: none !important;
    }
    
    .project-card-back {
        position: relative;
        transform: none;
        display: block;
        margin-top: 1rem;
    }
    
    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* Footer socials – unify behavior for every icon in the list */
[role="list"][aria-label="Social media links"] a {
  color: #9ca3af;
  transition: transform .12s ease, color .12s ease;
}
[role="list"][aria-label="Social media links"] a:hover {
  color: var(--neon);
  transform: translateY(-1px) scale(1.04);
}
[role="list"][aria-label="Social media links"] a:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
  border-radius: .5rem;
}

/* ============================================
   CSP-SAFE UTILITY CLASSES (no inline styles)
   ============================================ */

/* Body overflow control for modals */
.body-overflow-hidden {
  overflow: hidden !important;
}

.body-overflow-auto {
  overflow: auto !important;
}

/* Element visibility controls */
.element-hidden {
  display: none !important;
}

.element-block {
  display: block !important;
}

.element-inline-block {
  display: inline-block !important;
}

/* Text color for character count */
.text-warning {
  color: #ff4444 !important;
}

.text-neutral {
  color: #9ca3af !important;
}

/* Reduced motion animations */
.animation-duration-fast {
  --animation-duration: 0.01ms;
  --transition-duration: 0.01ms;
}

/* Build stamp styling */
.build-stamp {
  position: fixed;
  right: 12px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  opacity: 0.8;
  user-select: none;
  pointer-events: none;
  font: 12px/1 system-ui;
}

/* Social icons styling */
.social { 
    display: flex; 
    gap: 1.25rem; 
    align-items: center; 
    justify-content: center; 
    margin-top: 3rem;
}

.social .icon { 
    width: 28px; 
    height: 28px; 
    fill: #9ca3af; 
    display: block; 
    transition: transform 0.12s ease, fill 0.12s ease; 
}

.social-link:hover .icon,
.social-link:focus-visible .icon { 
    fill: var(--neon-blue); 
    transform: translateY(-1px) scale(1.05); 
}

.social-link { 
    outline: none; 
}

.social-link:focus-visible { 
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.35); 
    border-radius: 0.5rem; 
}

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

/* ============================================
   FEATURED PENS SECTION - PREMIUM 3D EFFECTS
   ============================================ */
.pens-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Pens inherit the same 3D system as tech chips */
.pens-grid[data-tilt] { 
    perspective: 900px; 
}

.pens-grid .tilt-card {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background: var(--dark-card, #12122a);
    transform-style: preserve-3d;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    transform:
        translateZ(var(--elev, 0px))
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg));
    box-shadow:
        0 0 0 rgba(0,0,0,0),
        0 0 calc(20px + var(--glow, 0px)) rgba(0, 237, 255, 0.12);
}

.pens-grid .tilt-card::before {
    content: ""; 
    position: absolute; 
    inset: 0; 
    border-radius: 16px; 
    pointer-events: none;
    background:
        radial-gradient(120% 120% at calc(50% + var(--glow-x,0px)) calc(0% + var(--glow-y,0px)),
        rgba(0, 237, 255, .18), transparent 55%);
    transform: translateZ(1px);
    opacity: .55;
}

.pens-grid .tilt-card::after {
    content: ""; 
    position: absolute; 
    inset: -1px; 
    border-radius: 16px; 
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%,
        rgba(255,255,255,.06) 47%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.06) 53%, transparent 100%);
    transform: translateZ(2px) translateX(var(--shine-x,-160%)) rotate(var(--shine-rot,0deg));
    opacity: var(--shine-o,0);
    transition: opacity .18s ease;
    mix-blend-mode: screen;
}

.pens-grid .tilt-card:hover::after,
.pens-grid .tilt-card:focus-visible::after { 
    animation: tech-shine 900ms ease; 
    opacity: .8; 
}

.pen-card img { 
    display: block; 
    width: 100%; 
    height: auto; 
    aspect-ratio: 16/9;
    object-fit: cover;
}

.pen-meta {
    position: absolute; 
    inset: auto 0 0 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.8));
    color: var(--white);
    z-index: 3;
}

.pen-title { 
    display: block; 
    font-weight: 700; 
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--neon-green);
}

.pen-cta { 
    opacity: 0.8; 
    font-size: 0.875rem; 
    color: var(--gray-300);
}

.pen-card:focus-visible { 
    outline: 2px solid var(--neon-blue); 
    outline-offset: 4px; 
}

@media (prefers-reduced-motion: reduce) {
    .pens-grid .tilt-card { 
        transform: none !important; 
    }
    .pens-grid .tilt-card::after { 
        animation: none; 
        opacity: 0; 
    }
}

/* ============================================
   PREMIUM CONTACT FORM
   ============================================ */
:root{
  --panel: #0a1220;
  --panel-2: #0f172a;
  --border: #1a2a3b;
  --text: #dfe7ff;
  --muted: #93a4c3;
  --muted-2: #8893a8;
  --neon: #26f4ff; /* cyan */
  --neon-2: #9dff70; /* green */
  --shadow: #00131b;
}

/* Card container (glass-lite) */
.contact-card{
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--neon) 18%, var(--border));
  border-radius: 16px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 0 0 1px #073b44 inset, 0 0 40px #00f0ff1a;
  backdrop-filter: blur(8px);
}

.contact-title{
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--text);
}

/* Layout */
.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.span-2{ grid-column: 1 / -1; }

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

/* Floating fields */
.field{ position: relative; }

.field input,
.field textarea{
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  outline: none;
  padding: 16px 44px 14px 14px; /* space for optional icon */
  transition: border-color .15s, box-shadow .15s, transform .12s;
}

/* Placeholder trick for floating labels */
.field input::placeholder,
.field textarea::placeholder{ color: transparent; }
.field label{
  position: absolute;
  left: 12px;
  top: 14px;
  color: var(--muted);
  pointer-events: none;
  background: transparent;
  padding: 0 6px;
  transition: all .14s ease;
}

/* float when value or focus */
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field input:focus + label,
.field textarea:focus + label{
  top: -9px;
  left: 10px;
  font-size: .78rem;
  color: var(--neon);
  background: var(--panel);
  border-radius: 6px;
}

/* Focus glow */
.field input:focus,
.field textarea:focus{
  border-color: var(--neon);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--neon) 25%, transparent);
}

/* Optional right icon */
.field .icon{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--muted);
  pointer-events: none;
}

/* Meta (counter) */
.field .meta{
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: .75rem;
  color: var(--muted-2);
}

/* Help text (for future validation states) */
.help{
  margin: 6px 2px 0;
  font-size: .82rem;
  color: var(--muted-2);
}

/* Neon button with spinner */
.btn-neon{
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 16px 20px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #02121b;
  background: linear-gradient(90deg, #00eaff, #00ffd0 60%, var(--neon-2) 120%);
  box-shadow: 0 0 35px #00f7ff33, 0 10px 25px var(--shadow);
  position: relative;
  cursor: pointer;
  transition: transform .12s, box-shadow .2s, opacity .2s;
}
.btn-neon:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 45px #00f7ff55, 0 12px 28px var(--shadow);
}
.btn-neon:disabled{ opacity: .6; cursor: not-allowed; }
.btn-neon .spinner{
  display: none;
  width: 18px; height: 18px;
  margin-left: 10px;
  border: 2px solid #02121b;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
.btn-neon.loading .spinner{ display: inline-block; }
@keyframes spin{ to{ transform: rotate(360deg);} }

.actions .fineprint{
  margin: 10px 6px 0;
  color: var(--muted-2);
  font-size: .86rem;
}
.actions .fineprint a{ color: var(--neon); text-decoration: underline; }

/* Character counter */
.char-counter{
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: .75rem;
  color: var(--muted-2);
  font-family: var(--mono);
  transition: color .2s ease;
}
.char-counter.warning{ color: #ffaa00; }
.char-counter.error{ color: #ff5555; }

/* Status message styling */
.status{
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: .9rem;
  text-align: center;
  transition: all .3s ease;
}
.status.success{
  color: #00ff88;
  background: color-mix(in oklab, #00ff88 15%, transparent);
  border: 1px solid color-mix(in oklab, #00ff88 30%, transparent);
}
.status.error{
  color: #ff5555;
  background: color-mix(in oklab, #ff5555 15%, transparent);
  border: 1px solid color-mix(in oklab, #ff5555 30%, transparent);
}
.status.info{
  color: var(--neon);
  background: color-mix(in oklab, var(--neon) 15%, transparent);
  border: 1px solid color-mix(in oklab, var(--neon) 30%, transparent);
}

/* Enhanced form validation states */
.field input.valid,
.field textarea.valid{
  border-color: #00ff88;
  box-shadow: 0 0 0 3px color-mix(in oklab, #00ff88 20%, transparent);
}
.field input.invalid,
.field textarea.invalid{
  border-color: #ff5555;
  box-shadow: 0 0 0 3px color-mix(in oklab, #ff5555 20%, transparent);
}

/* Loading button state */
.btn-neon.loading{
  opacity: .8;
  cursor: wait;
}

/* Hide honeypot safely (no layout shift, no screen reader) */
.hp-field{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

/* Status message styling */
#contact-status{
  margin-top: 12px;
  font-size: .9rem;
  text-align: center;
  color: var(--text);
}

/* ============================================
   VIPSPOT BACK-TO-TOP COMPONENT
   ============================================ */

/* Component size and positioning */
.vipspot-top{
  --size: 64px;
  position: fixed;
  right: 28px; bottom: 28px;
  width: var(--size); height: var(--size);
  border: none; background: transparent; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  filter: drop-shadow(0 12px 40px rgba(0,212,170,.35));
  z-index: 1000;

  /* hidden by default */
  opacity: 0; transform: translateY(10px) scale(.96);
  pointer-events: none; transition: .28s ease;
}
.vipspot-top.show{ 
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; 
}

/* Progress ring */
.vipspot-top .ring{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.vipspot-top .ring .track{
  fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; 
}
.vipspot-top .ring .progress{
  fill: none; stroke: var(--neon-blue);
  stroke-width: 4; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  filter: drop-shadow(0 0 10px var(--neon-blue));
  stroke-dasharray: 151; stroke-dashoffset: 151;
  transition: stroke-dashoffset .15s linear;
}

/* Glyph arrow with neon button face */
.vipspot-top .glyph{
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, rgba(0,243,255,.25), rgba(0,0,0,.1) 60%),
             linear-gradient(180deg, rgba(0,243,255,.18), rgba(0,243,255,0));
  color: #eafff9; font-size: 16px; font-weight: 800; letter-spacing: .05em;
  border: 1px solid rgba(57,255,207,.35);
  box-shadow: inset 0 0 0 1px rgba(0,243,255,.18), 0 0 0 3px rgba(0,243,255,.08);
  transition: transform .2s ease;
}
.vipspot-top:hover .glyph{ 
  transform: translateY(-1px) scale(1.02); 
}

/* Glow aura */
.vipspot-top .glow{
  position: absolute; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(60px 60px at 50% 50%, rgba(0,243,255,.35), transparent 60%);
  filter: blur(10px); pointer-events: none; opacity: .9;
}

/* Stars / micro particles */
.vipspot-top .stars{ 
  position: absolute; inset: 0; pointer-events: none; 
}
.vipspot-top .stars i{
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--neon-blue); opacity: .8; filter: blur(.3px);
  animation: float 3.4s ease-in-out infinite;
}
.vipspot-top .stars i:nth-child(1){ top: 6px; left: 8px; animation-delay: .0s }
.vipspot-top .stars i:nth-child(2){ top: 10px; right: 8px; animation-delay: .5s }
.vipspot-top .stars i:nth-child(3){ bottom: 10px; left: 10px; animation-delay: 1s }
.vipspot-top .stars i:nth-child(4){ bottom: 8px; right: 12px; animation-delay: 1.5s }
.vipspot-top .stars i:nth-child(5){ top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: 2s }

@keyframes float{
  0%,100%{ transform: translateY(0) scale(1) }
  50%{ transform: translateY(-3px) scale(1.08) }
}

/* Launch micro-animation */
.vipspot-top.launch .glyph{ 
  animation: launch .55s cubic-bezier(.2,.8,.2,1) 
}
@keyframes launch{
  0%{ transform: translateY(0) scale(1) }
  40%{ transform: translateY(-10px) scale(1.06) }
  100%{ transform: translateY(0) scale(1) }
}

/* Mobile responsive positioning */
@media (max-width: 640px){ 
  .vipspot-top{ 
    right: 20px; bottom: 20px; 
    --size: 56px;
  } 
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .vipspot-top, .vipspot-top .glyph, .vipspot-top .stars i{ 
    transition: none; animation: none; 
  }
}

/* === VIPSpot Neon Facebook Hover (footer) === */
:root {
  --vip-bg0: #0b0f17;
  --vip-bg1: #101927;
  --vip-ink: #dff7ff;
  --vip-muted: #8aa6a0;
  --vip-cyan: #00e6c3;    /* VIP neon */
  --vip-glare: #86fff0;
}

.fb-btn {
  --h: 44px;
  --pad-x: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--h);
  padding: 0 var(--pad-x);
  border-radius: calc(var(--h) / 2 + 6px);
  background: radial-gradient(130% 180% at 20% 30%, rgba(0,230,195,0.08), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.04));
  color: var(--vip-ink);
  text-decoration: none;
  letter-spacing: .2px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.08);
  outline: none;
  position: relative;
  transform: translateZ(0);
  transition: transform .25s ease, filter .25s ease, border-color .25s ease, box-shadow .25s ease;
  will-change: transform;
}

.fb-btn .ico {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .95;
}

.fb-btn .label {
  font-size: 14px;
  font-weight: 600;
}

.fb-btn .p {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--vip-glare), transparent 60%);
  opacity: 0;
  pointer-events: none;
}

.fb-btn .p1 { left: 12%; top: -6px; animation: fbStar 2.2s ease-in-out infinite; }
.fb-btn .p2 { right: 10%; top: -10px; animation: fbStar 2.8s ease-in-out infinite .2s; }
.fb-btn .p3 { left: 16%; bottom: -8px; animation: fbStar 3s ease-in-out infinite .1s; }
.fb-btn .p4 { right: 14%; bottom: -12px; animation: fbStar 2.6s ease-in-out infinite .3s; }

@keyframes fbStar {
  0%, 100% { transform: translateY(0) scale(.7); opacity: 0; }
  30% { opacity: .7; }
  50% { transform: translateY(-3px) scale(1); }
}

.fb-btn:hover,
.fb-btn:focus-visible {
  border-color: rgba(0,230,195,.35);
  box-shadow:
    0 0 0 2px rgba(0,230,195,.15),
    0 6px 22px rgba(0,230,195,.16),
    0 0 50px rgba(0,230,195,.08) inset;
  filter: saturate(1.04);
}

.fb-btn:focus-visible {
  outline: 2px solid rgba(0,230,195,.45);
  outline-offset: 2px;
}

/* Reduced motion: keep glow but disable sparkle motion */
@media (prefers-reduced-motion: reduce) {
  .fb-btn { transition: none; }
  .fb-btn .p { animation: none; opacity: .35; }
}

/* Slightly smaller on narrow screens */
@media (max-width: 520px) {
  .fb-btn { --h: 40px; --pad-x: 14px; }
  .fb-btn .label { font-size: 13px; }
}

/* Legacy footer social styles (for other links) */
.social-link .icon {
  transition: transform .2s ease, filter .2s ease, color .2s ease;
  display: inline-block;
}
.social-link:focus-visible {
  outline: 2px solid #00e6c3;
  outline-offset: 3px;
  border-radius: 10px;
}