@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
    --bg-base:        #0b0c10;
    --bg-surface:     #13151A;
    --bg-alt:         #16181D;
    --border:         #1E2028;
    --border-strong:  #252830;
    --text:           #ffffff;
    --text-muted:     #8B8D98;
    --text-secondary: #E4E4E7;
    --accent:         #00d094;
    --accent-hover:   #00b884;
    --nav-bg:         rgba(19,21,26,0.85);
    --shadow:         0 4px 24px rgba(0,0,0,0.4);
}
html.light {
    --bg-base:        #f0f2f5;
    --bg-surface:     #ffffff;
    --bg-alt:         #f8fafc;
    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;
    --text:           #0f172a;
    --text-muted:     #64748b;
    --text-secondary: #1e293b;
    --accent:         #00b884;
    --accent-hover:   #009e72;
    --nav-bg:         rgba(255,255,255,0.9);
    --shadow:         0 4px 24px rgba(0,0,0,0.08);
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-base);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.2s ease;
    position: relative;
}

/* ============================================================
   ANIMATED BACKGROUND GRID
   ============================================================ */
:root { --grid-opacity: 0.7; --grid-pulse-opacity: 0.3; }
html.light { --grid-opacity: 0.5; --grid-pulse-opacity: 0.2; }

.bg-grid {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    pointer-events: none;
    background-image: 
        radial-gradient(circle at 1.5px 1.5px, var(--accent) 1.5px, transparent 0);
    background-size: 40px 40px;
    opacity: var(--grid-opacity);
    
    /* Moving Shimmer Mask */
    mask-image: linear-gradient(135deg, 
        rgba(0,0,0,0.1) 0%, 
        rgba(0,0,0,1) 50%, 
        rgba(0,0,0,0.1) 100%);
    -webkit-mask-image: linear-gradient(135deg, 
        rgba(0,0,0,0.1) 0%, 
        rgba(0,0,0,1) 50%, 
        rgba(0,0,0,0.1) 100%);
    mask-size: 400% 400%;
    -webkit-mask-size: 400% 400%;
    
    animation: grid-shimmer 8s linear infinite;
}

html.light .bg-grid {
    background-image: 
        radial-gradient(circle at 1.5px 1.5px, var(--accent) 1.8px, transparent 0);
}

@keyframes grid-shimmer {
    0% { mask-position: 0% 0%; -webkit-mask-position: 0% 0%; }
    100% { mask-position: 133% 133%; -webkit-mask-position: 133% 133%; }
}

/* ============================================================
   OVERRIDE HARDCODED TAILWIND CLASSES FOR THEME
   ============================================================ */
.bg-\[\#0b0c10\], .bg-\[\#0B0C10\] { background-color: var(--bg-base) !important; }
.bg-\[\#13151A\]                    { background-color: var(--bg-surface) !important; }
.bg-\[\#16181D\]                    { background-color: var(--bg-alt) !important; }
.border-\[\#1E2028\]                { border-color: var(--border) !important; }
.border-\[\#252830\]                { border-color: var(--border-strong) !important; }
.text-white                         { color: var(--text) !important; }
.text-\[\#8B8D98\]                  { color: var(--text-muted) !important; }
.text-\[\#E4E4E7\]                  { color: var(--text-secondary) !important; }
.text-\[\#00d094\]                  { color: var(--accent) !important; }
.bg-\[\#00d094\]                    { background-color: var(--accent) !important; }
.border-\[\#00d094\]                { border-color: var(--accent) !important; }
.hover\:bg-\[\#00b884\]:hover        { background-color: var(--accent-hover) !important; }

html.light input, html.light select, html.light textarea {
    color: var(--text) !important;
    background-color: var(--bg-alt) !important;
}
html.light input::placeholder, html.light textarea::placeholder {
    color: var(--text-muted) !important;
}

/* ============================================================
   HEADER
   ============================================================ */
#site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0;
    height: 80px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
    pointer-events: none;
}
#site-header * {
    pointer-events: auto;
}

#site-header.scrolled {
    background-color: rgba(11, 12, 16, 0.7) !important;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: auto;
}

#site-header.header-hidden {
    transform: translateY(-100%);
}
.header-container {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Logo */
.site-logo {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.7rem; letter-spacing: -0.05em;
    text-decoration: none; flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.site-logo:hover { transform: scale(1.08); box-shadow: 0 0 16px rgba(0,208,148,0.3); }
html.light .site-logo { background: #0f172a; color: #fff; }

/* Desktop Nav Pill */
.desktop-nav {
    display: none;
    align-items: center; gap: 1.5rem;
    background-color: var(--nav-bg);
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.625rem 1.5rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
@media (min-width: 768px) { .desktop-nav { display: flex; } }

.nav-link {
    font-size: 0.875rem; font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.nav-link:hover, .nav-link.active { color: var(--text); }

/* Header Actions */
.header-actions {
    display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
}

/* Icon Buttons */
.icon-btn {
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); font-size: 1rem;
    text-decoration: none; flex-shrink: 0;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(0,208,148,0.2); }
.icon-btn.active { color: var(--accent); border-color: var(--accent); background-color: rgba(0,208,148,0.08); }

/* Theme Toggle */
#theme-toggle .ph-sun  { display: none; }
#theme-toggle .ph-moon { display: block; }
html.light #theme-toggle .ph-sun  { display: block; }
html.light #theme-toggle .ph-moon { display: none; }

/* Menu Toggle Button */
.menu-toggle {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    width: 2.25rem; height: 2.25rem;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem; cursor: pointer; padding: 0.5rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
}
@media (min-width: 768px) { .menu-toggle { display: none; } }
.menu-toggle:hover { border-color: var(--accent); box-shadow: 0 0 12px rgba(0,208,148,0.2); }

.menu-toggle .bar {
    display: block;
    width: 1.125rem; height: 1.5px;
    background-color: var(--text-muted);
    border-radius: 9999px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease, background-color 0.25s ease;
    transform-origin: center;
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background-color: var(--accent); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background-color: var(--accent); }
.menu-toggle[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 16px rgba(0,208,148,0.2); }

/* ============================================================
   MOBILE MENU
   ============================================================ */
#mobile-menu {
    position: fixed;
    inset: 0; z-index: 2000;
    visibility: hidden;
    pointer-events: none;
}
#mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* Backdrop */
.mm-backdrop {
    position: absolute; inset: 0;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.35s ease;
}
html.light .mm-backdrop { background-color: rgba(0,0,0,0.25); }
#mobile-menu.is-open .mm-backdrop { opacity: 1; }

/* Slide Panel */
.mm-panel {
    position: absolute;
    top: 0; left: 0; right: 0;
    background-color: var(--bg-base);
    border-bottom: 1px solid var(--border);
    transform: translateY(-100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
    display: flex; flex-direction: column;
    min-height: 100svh;
}
#mobile-menu.is-open .mm-panel { transform: translateY(0); }

/* Teal glow at bottom of panel */
.mm-panel::after {
    content: '';
    position: absolute; bottom: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.4;
}

/* Close Button — standalone, absolute top-right of panel */
.mm-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); font-size: 1rem;
    z-index: 10;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.25s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}
.mm-close:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(0,208,148,0.2);
    transform: rotate(90deg);
}

/* Nav Links */
.mm-nav {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1; padding: 2rem 1.5rem; gap: 0.1rem;
}

.mm-link {
    display: block;
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: 700; letter-spacing: -0.025em;
    color: var(--text-muted);
    text-decoration: none; padding: 0.3rem 1rem;
    line-height: 1.2;
    opacity: 0; transform: translateY(20px);
    transition: color 0.2s ease, opacity 0.35s ease, transform 0.35s ease;
    position: relative;
}
.mm-link::after {
    content: '';
    position: absolute; left: 1rem; bottom: 0;
    width: 0; height: 2px;
    background: var(--accent); border-radius: 9999px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(0,208,148,0.5);
}
.mm-link:hover { color: var(--text); }
.mm-link:hover::after { width: calc(100% - 2rem); }
.mm-link.active { color: var(--accent); }
.mm-link.active::after { width: 2rem; }

/* Stagger in */
#mobile-menu.is-open .mm-link { opacity: 1; transform: translateY(0); }
#mobile-menu.is-open .mm-link:nth-child(1) { transition-delay: 0.09s; }
#mobile-menu.is-open .mm-link:nth-child(2) { transition-delay: 0.14s; }
#mobile-menu.is-open .mm-link:nth-child(3) { transition-delay: 0.19s; }
#mobile-menu.is-open .mm-link:nth-child(4) { transition-delay: 0.24s; }
#mobile-menu.is-open .mm-link:nth-child(5) { transition-delay: 0.29s; }
#mobile-menu.is-open .mm-link:nth-child(6) { transition-delay: 0.34s; }

/* Footer Social */
.mm-footer {
    display: flex; justify-content: center; gap: 1rem;
    padding: 1.5rem; border-top: 1px solid var(--border);
    flex-shrink: 0;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.35s ease 0.4s, transform 0.35s ease 0.4s;
}
#mobile-menu.is-open .mm-footer { opacity: 1; transform: translateY(0); }
.mm-social {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 1.1rem; text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.mm-social:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   SCROLLBAR + SELECTION
   ============================================================ */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: var(--bg-base); }
::-webkit-scrollbar-thumb        { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--accent); }
::selection { background: rgba(0,208,148,0.25); color: var(--text); }

/* ============================================================
   CARDS / BORDERS TRANSITION
   ============================================================ */
.bg-\[\#16181D\] { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
html.light .bg-\[\#16181D\] { box-shadow: var(--shadow); }

/* ============================================================
   HERO MOCKUP ANIMATIONS
   ============================================================ */
.mockup-container {
    perspective: 1000px;
    position: relative;
}

.mockup-wrapper {
    position: relative;
    border-radius: 2.5rem;
    padding: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(0,208,148,0.1);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: float 6s ease-in-out infinite;
}

html.light .mockup-wrapper {
    box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 20px rgba(0,208,148,0.05);
}

.mockup-image {
    width: 100%;
    height: auto;
    border-radius: 2rem;
    display: block;
}

.mockup-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(0,208,148,0.15) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotateX(2deg) rotateY(-2deg); }
    50% { transform: translateY(-20px) rotateX(0deg) rotateY(2deg); }
}

/* ============================================================
   INTERACTIVE DOT GRID
   ============================================================ */
:root {
    --dot-base: #1E2028;
    --dot-active: #00d094;
}

html.light {
    --dot-base: #cbd5e1;
    --dot-active: #00b884;
}

.hero-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.dot-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.dot-grid__wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.dot-grid__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ============================================================
   CURVED LOOP MARQUEE
   ============================================================ */
.curved-loop-jacket {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none; /* Prevents browser scroll during swipe drag */
}

.curved-loop-svg {
    width: 100%;
    aspect-ratio: 100 / 12;
    overflow: visible;
    display: block;
    font-size: 3.5rem;
    fill: var(--text);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    transition: fill 0.3s ease;
}

@media (max-width: 768px) {
    .curved-loop-svg {
        font-size: 2.2rem;
    }
}

/* ============================================================
   FALLING TEXT PHYSICS SANDBOX
   ============================================================ */
.falling-text-container {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 180px; /* Provides room for the text to fall */
    max-width: 42rem; /* matches max-w-2xl */
    margin: 1.5rem auto 2.5rem auto; /* margins matching hero paragraph */
    text-align: center;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.falling-text-target {
    display: inline-block;
    width: 100%;
    font-size: 1.125rem; /* text-lg matching the normal hero paragraph */
    color: var(--text-muted);
    line-height: 1.6;
}

.falling-text-container.active .falling-text-target {
    width: 100%;
    height: 100%;
}

.falling-text-container.active .word {
    cursor: grab;
}

.falling-text-container.active .word:active {
    cursor: grabbing;
}

.word {
    display: inline-block;
    margin: 0 4px;
    user-select: none;
    -webkit-user-select: none;
}

.word.highlighted {
    color: var(--accent);
    font-weight: 700;
}

.falling-text-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ============================================================
   TRUE FOCUS TEXT ANIMATION
   ============================================================ */
.focus-container {
    position: relative;
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    margin: 0 auto;
    padding: 10px;
}

.focus-word {
    position: relative;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    cursor: pointer;
    transition: filter var(--duration, 0.5s) ease, color 0.3s ease;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    color: var(--text-secondary);
}

.focus-word.active {
    filter: blur(0) !important;
    color: var(--text);
}

.focus-frame {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    box-sizing: border-box;
    border: none;
    transition: transform var(--duration, 0.5s) cubic-bezier(0.25, 1, 0.5, 1),
                width var(--duration, 0.5s) cubic-bezier(0.25, 1, 0.5, 1),
                height var(--duration, 0.5s) cubic-bezier(0.25, 1, 0.5, 1),
                opacity var(--duration, 0.5s) ease;
}

.focus-frame .corner {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border: 3px solid var(--accent);
    filter: drop-shadow(0px 0px 4px var(--accent));
    border-radius: 2px;
    transition: border-color 0.3s ease, filter 0.3s ease;
}

.focus-frame .top-left {
    top: -8px;
    left: -8px;
    border-right: none;
    border-bottom: none;
}

.focus-frame .top-right {
    top: -8px;
    right: -8px;
    border-left: none;
    border-bottom: none;
}

.focus-frame .bottom-left {
    bottom: -8px;
    left: -8px;
    border-right: none;
    border-top: none;
}

.focus-frame .bottom-right {
    bottom: -8px;
    right: -8px;
    border-left: none;
    border-top: none;
}

/* ============================================================
   ROTATING TEXT ANIMATION
   ============================================================ */
#home-rotating-text {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    overflow: hidden;
    box-sizing: content-box; /* Height only constraints text content, padding is extra */
    height: 1.2em; /* Scales dynamically with parent h2 font-size! */
    align-items: center;
    justify-content: center;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.text-rotate {
    display: inline-flex;
    flex-wrap: nowrap; /* Prevents split letters wrapping */
    white-space: nowrap; /* Prevents word breaks */
    position: absolute;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.text-rotate-word {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}


.text-rotate-element {
    display: inline-block;
    will-change: transform, opacity;
}

.text-rotate-space {
    white-space: pre;
    display: inline-block;
}

/* ============================================================
   LOGO LOOP SKILLS SHOWCASE
   ============================================================ */
.logoloop {
    position: relative;
    overflow: hidden;
    width: 100%;
    --logoloop-gap: 48px;
    --logoloop-logoHeight: 36px;
    --logoloop-fadeColorAuto: var(--bg-base);
    padding: 1.5rem 0;
}

.logoloop__track {
    display: flex;
    width: max-content;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 0;
    align-items: center;
}

.logoloop__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.logoloop__item {
    flex: 0 0 auto;
    margin-right: var(--logoloop-gap);
    height: var(--logoloop-logoHeight);
    display: flex;
    align-items: center;
}

.logoloop__item img {
    height: var(--logoloop-logoHeight);
    width: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: grayscale(1) brightness(0.95);
    opacity: 0.75;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease, opacity 0.3s ease;
}

/* Color glow highlight on item hover */
.logoloop__item:hover img {
    transform: scale(1.15);
    filter: grayscale(0) brightness(1.1);
    opacity: 1;
}

/* Light theme logo brightness adjustment */
html.light .logoloop__item img {
    filter: grayscale(1) contrast(1.1) opacity(0.7);
}

html.light .logoloop__item:hover img {
    filter: grayscale(0) contrast(1) opacity(1);
}

.logoloop--fade::before,
.logoloop--fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(24px, 12%, 140px);
    pointer-events: none;
    z-index: 10;
}

.logoloop--fade::before {
    left: 0;
    background: linear-gradient(
        to right,
        var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%,
        rgba(0, 0, 0, 0) 100%
    );
}

.logoloop--fade::after {
    right: 0;
    background: linear-gradient(
        to left,
        var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* ============================================================
   STICKER PEEL INTERACTIVE BADGE
   ============================================================ */
:root {
    --sticker-rotate: -15deg;
    --sticker-p: 10px;
    --sticker-peelback-hover: 25%;
    --sticker-peelback-active: 35%;
    --sticker-start: calc(-1 * var(--sticker-p));
    --sticker-end: calc(100% + var(--sticker-p));
    --sticker-shadow-opacity: 0.5;
    --sticker-lighting-constant: 0.1;
    --peel-direction: 45deg;
    --sticker-width: 150px;
}

@media (max-width: 768px) {
    :root {
        --sticker-width: 100px;
    }
}

.sticker-container {
    position: relative;
    transform: rotate(var(--peel-direction));
    transform-origin: center;
    width: max-content;
    height: max-content;
}

.sticker-container * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.sticker-main {
    clip-path: polygon(
        var(--sticker-start) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-end) var(--sticker-end),
        var(--sticker-start) var(--sticker-end)
    );
    transition: clip-path 0.55s cubic-bezier(0.25, 1, 0.5, 1);
    filter: url(#dropShadow);
}

.sticker-main > * {
    transform: rotate(calc(-1 * var(--peel-direction)));
}

.sticker-lighting {
    filter: url(#pointLight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sticker-container:hover .sticker-main,
.sticker-container.touch-active .sticker-main {
    clip-path: polygon(
        var(--sticker-start) var(--sticker-peelback-hover),
        var(--sticker-end) var(--sticker-peelback-hover),
        var(--sticker-end) var(--sticker-end),
        var(--sticker-start) var(--sticker-end)
    );
}

.sticker-container:active .sticker-main {
    clip-path: polygon(
        var(--sticker-start) var(--sticker-peelback-active),
        var(--sticker-end) var(--sticker-peelback-active),
        var(--sticker-end) var(--sticker-end),
        var(--sticker-start) var(--sticker-end)
    );
}

.sticker-image {
    transform: rotate(var(--sticker-rotate));
    width: var(--sticker-width);
    height: auto;
    display: block;
    border-radius: 50%;
}

.flap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: calc(-100% - var(--sticker-p) - var(--sticker-p));
    clip-path: polygon(
        var(--sticker-start) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-start) var(--sticker-start)
    );
    transform: scaleY(-1);
    transition: all 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

.flap > * {
    transform: rotate(calc(-1 * var(--peel-direction)));
}

.sticker-container:hover .flap,
.sticker-container.touch-active .flap {
    clip-path: polygon(
        var(--sticker-start) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-end) var(--sticker-peelback-hover),
        var(--sticker-start) var(--sticker-peelback-hover)
    );
    top: calc(-100% + 2 * var(--sticker-peelback-hover) - 1px);
}

.sticker-container:active .flap {
    clip-path: polygon(
        var(--sticker-start) var(--sticker-start),
        var(--sticker-end) var(--sticker-start),
        var(--sticker-end) var(--sticker-peelback-active),
        var(--sticker-start) var(--sticker-peelback-active)
    );
    top: calc(-100% + 2 * var(--sticker-peelback-active) - 1px);
}

.flap-lighting {
    filter: url(#pointLightFlipped);
    display: flex;
    align-items: center;
    justify-content: center;
}

.flap-image {
    transform: rotate(var(--sticker-rotate));
    filter: url(#expandAndFill);
    width: var(--sticker-width);
    height: auto;
    display: block;
    border-radius: 50%;
}

.draggable {
    position: absolute;
    cursor: grab;
    will-change: transform;
    z-index: 50;
    padding: 10px;
}

.draggable:active {
    cursor: grabbing;
}

/* Touch screen optimizations */
@media (hover: none) and (pointer: coarse) {
    .draggable {
        cursor: default;
    }
    .sticker-container {
        touch-action: none;
    }
}

.sticker-main,
.flap {
    will-change: clip-path, transform;
}

/* ============================================================
   CIRCULAR GALLERY
   ============================================================ */
.circular-gallery-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.circular-gallery {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    position: absolute;
    inset: 0;
}

.circular-gallery:active {
    cursor: grabbing;
}

.circular-gallery:focus-visible {
    outline: 2px solid #00d094;
    outline-offset: 4px;
}

/* ============================================================
   PILL NAV BAR
   ============================================================ */
.pill-nav-container {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: max-content;
}

@media (max-width: 768px) {
    .pill-nav-container {
        width: 100%;
        left: 0;
        transform: none;
        padding: 0 1rem;
        box-sizing: border-box;
    }
}

.pill-nav {
    --nav-h: 48px;
    --logo: 36px;
    --pill-pad-x: 18px;
    --pill-gap: 4px;
    width: max-content;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap: 8px;
}

@media (max-width: 768px) {
    .pill-nav {
        width: 100%;
        justify-content: space-between;
        padding: 4px 8px;
        background: var(--track-bg, #13151A);
        border-radius: 9999px;
        border: 1px solid var(--pill-bg, #1E2028);
    }
}

.pill-nav-items {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--nav-h);
    background: var(--track-bg, #13151A);
    border-radius: 9999px;
    border: 1px solid var(--pill-bg, #1E2028);
}

.pill-logo {
    width: var(--nav-h);
    height: var(--nav-h);
    border-radius: 50%;
    background: var(--track-bg, #13151A);
    border: 1px solid var(--pill-bg, #1E2028);
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
}

.pill-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(2); /* Zoom the logo image by 2x */
}

.pill-list {
    list-style: none;
    display: flex;
    align-items: stretch;
    gap: var(--pill-gap);
    margin: 0;
    padding: 4px;
    height: 100%;
    box-sizing: border-box;
}

.pill-list > li {
    display: flex;
    height: 100%;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 var(--pill-pad-x);
    background: var(--pill-bg, #1e2028);
    color: var(--pill-text, #ffffff);
    text-decoration: none;
    border-radius: 9999px;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.15s ease;
}

.pill .hover-circle {
    position: absolute;
    left: 50%;
    bottom: 0;
    border-radius: 50%;
    background: var(--base, #00d094);
    z-index: 1;
    display: block;
    pointer-events: none;
    will-change: transform;
}

.pill .label-stack {
    position: relative;
    display: inline-block;
    line-height: 1;
    z-index: 2;
}

.pill .pill-label {
    position: relative;
    z-index: 2;
    display: inline-block;
    line-height: 1;
    will-change: transform;
}

.pill .pill-label-hover {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--hover-text, #000000);
    z-index: 3;
    display: inline-block;
    will-change: transform, opacity;
}

.pill.is-active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--base, #00d094);
    border-radius: 50%;
    z-index: 4;
}

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

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
}

.mobile-menu-button {
    width: var(--nav-h);
    height: var(--nav-h);
    border-radius: 50%;
    background: var(--track-bg, #13151A);
    border: 1px solid var(--pill-bg, #1E2028);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
    position: relative;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .mobile-menu-button {
        display: flex;
    }
}

.hamburger-line {
    width: 16px;
    height: 2px;
    background: var(--pill-text, #fff);
    border-radius: 1px;
    transition: transform 0.3s ease, y 0.3s ease;
    transform-origin: center;
}

.mobile-menu-popover {
    position: absolute;
    top: 4rem;
    left: 1rem;
    right: 1rem;
    background: var(--track-bg, #13151A);
    border: 1px solid var(--pill-bg, #1E2028);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 998;
    opacity: 0;
    transform-origin: top center;
    visibility: hidden;
    box-sizing: border-box;
}

.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-menu-popover .mobile-menu-link {
    display: block;
    padding: 12px 16px;
    color: var(--pill-text, #fff);
    background-color: var(--pill-bg, #1E2028);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-radius: 18px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-menu-popover .mobile-menu-link:hover,
.mobile-menu-popover .mobile-menu-link.is-active {
    cursor: pointer;
    background-color: var(--base, #00d094);
    color: var(--hover-text, #000000);
}

#theme-toggle {
    display: none !important;
}

#theme-toggle:hover {
    background: var(--base, #00d094);
    color: #000000;
    border-color: var(--base, #00d094);
}

#theme-toggle .ph-sun {
    display: none;
}
#theme-toggle .ph-moon {
    display: block;
}
html.light #theme-toggle .ph-sun {
    display: block;
}
html.light #theme-toggle .ph-moon {
    display: none;
}

/* ============================================================
   BORDER GLOW CARD EFFECT
   ============================================================ */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 28px;
  --glow-padding: 40px;
  --cone-spread: 25;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120F17);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  -webkit-mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  -webkit-mask-composite: source-out, destination-over, destination-over, destination-over, destination-over, destination-over;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* ============================================================
   THEME-AWARE ROTATING SERVICES SECTION
   ============================================================ */
.services-rotating-section {
    background-color: rgba(19, 21, 26, 0.45) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
html.light .services-rotating-section {
    background-color: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ============================================================
   GLOBAL BRAND TEAL ACCENT OVERRIDES FOR LIGHT MODE
   ============================================================ */
.text-\[\#00d094\] {
    color: var(--accent) !important;
}
.hover\:text-\[\#00d094\]:hover {
    color: var(--accent) !important;
}
.bg-\[\#00d094\] {
    background-color: var(--accent) !important;
}
.hover\:bg-\[\#00d094\]:hover {
    background-color: var(--accent) !important;
}
.border-\[\#00d094\] {
    border-color: var(--accent) !important;
}
.hover\:border-\[\#00d094\]:hover {
    border-color: var(--accent) !important;
}

/* Specific opacity variations for elements like the rotating text badge */
.bg-\[\#00d094\]\/10 {
    background-color: rgba(0, 208, 148, 0.1) !important;
}
html.light .bg-\[\#00d094\]\/10 {
    background-color: rgba(0, 184, 132, 0.1) !important;
}

.border-\[\#00d094\]\/20 {
    border-color: rgba(0, 208, 148, 0.2) !important;
}
html.light .border-\[\#00d094\]\/20 {
    border-color: rgba(0, 184, 132, 0.2) !important;
}

/* ============================================================
   SKILLS LOGO LOOP LIGHT MODE VISIBILITY & INVERSION
   ============================================================ */
/* Invert default-black simpleicons to white on dark mode */
body:not(.light) .logo-invert-on-dark {
    filter: invert(1) brightness(2) !important;
}
html:not(.light) .logo-invert-on-dark {
    filter: invert(1) brightness(2) !important;
}

/* Adjust grayscale opacity and brightness for logo loop items in light mode to get a uniform, premium gray silhouette */
html.light .logoloop__item img {
    filter: grayscale(1) brightness(0) opacity(0.5) !important;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Highlight brand logo in full color on hover in light mode */
html.light .logoloop__item:hover img {
    filter: none !important;
    opacity: 1 !important;
}

/* ============================================================
   GLASSMORPHIC & NEUMORPHIC FEATURED PROJECT CARDS
   ============================================================ */
.featured-project-card {
    background: rgba(19, 21, 26, 0.45) !important;
    --card-bg: rgba(19, 21, 26, 0.45) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 32px !important;
    box-shadow: 
        8px 8px 24px rgba(0, 0, 0, 0.45), 
        -8px -8px 24px rgba(255, 255, 255, 0.015),
        inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1),
                box-shadow 0.4s ease, 
                border-color 0.4s ease, 
                background-color 0.4s ease !important;
}

.featured-project-card:hover {
    background: rgba(28, 31, 38, 0.6) !important;
    --card-bg: rgba(28, 31, 38, 0.6) !important;
    border-color: rgba(0, 208, 148, 0.35) !important;
    box-shadow: 
        12px 12px 32px rgba(0, 0, 0, 0.55), 
        -12px -12px 32px rgba(255, 255, 255, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-8px) scale(1.015) !important;
}

/* Light mode overrides for featured project cards */
html.light .featured-project-card {
    background: rgba(255, 255, 255, 0.45) !important;
    --card-bg: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 
        8px 8px 20px rgba(100, 116, 139, 0.12), 
        -8px -8px 20px rgba(255, 255, 255, 0.85),
        inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

html.light .featured-project-card:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    --card-bg: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(0, 184, 132, 0.4) !important;
    box-shadow: 
        12px 12px 28px rgba(100, 116, 139, 0.18), 
        -12px -12px 28px rgba(255, 255, 255, 0.95),
        inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* Glassmorphic Project Card Badges */
.project-card-badge {
    transition: all 0.3s ease;
}
.badge-green {
    background: rgba(0, 208, 148, 0.12) !important;
    color: #00d094 !important;
    border: 1px solid rgba(0, 208, 148, 0.2) !important;
}
html.light .badge-green {
    background: rgba(0, 184, 132, 0.1) !important;
    color: #008f66 !important;
    border: 1px solid rgba(0, 184, 132, 0.25) !important;
}

.badge-purple {
    background: rgba(168, 85, 247, 0.12) !important;
    color: #a855f7 !important;
    border: 1px solid rgba(168, 85, 247, 0.2) !important;
}
html.light .badge-purple {
    background: rgba(168, 85, 247, 0.08) !important;
    color: #7e22ce !important;
    border: 1px solid rgba(168, 85, 247, 0.2) !important;
}

.badge-blue {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}
html.light .badge-blue {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.badge-emerald {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}
html.light .badge-emerald {
    background: rgba(16, 185, 129, 0.08) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

/* Glassmorphic Project Image Tags */
.project-tag {
    background: rgba(0, 0, 0, 0.6) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}
html.light .project-tag {
    background: rgba(255, 255, 255, 0.75) !important;
    color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   INTERACTIVE CIRCULAR GALLERY CONTAINER & WEBGL CANVAS LAYOUT
   ============================================================ */
.circular-gallery-wrapper {
    width: 100%;
    height: 380px; /* Mobile height */
    position: relative;
    overflow: hidden;
}
@media (min-width: 640px) {
    .circular-gallery-wrapper {
        height: 460px; /* Tablet height */
    }
}
@media (min-width: 1024px) {
    .circular-gallery-wrapper {
        height: 550px; /* Desktop height */
    }
}
#circular-gallery-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: grab;
    touch-action: none;
}
#circular-gallery-container:active {
    cursor: grabbing;
}
canvas.circular-gallery {
    width: 100% !important;
    height: 100% !important;
    display: block;
}