/* ----------------------------------------------------







   DESIGN SYSTEM & CSS CUSTOM VARIABLES







   ---------------------------------------------------- */







:root {







    /* Color Tokens - Dark Obsidian Mode */







    --bg-base: #050508;







    --bg-surface: rgba(18, 18, 28, 0.6);







    --bg-surface-hover: rgba(26, 26, 38, 0.85);







    --border-color: rgba(255, 255, 255, 0.08);







    --border-color-hover: rgba(255, 255, 255, 0.2);







    







    --text-primary: #ffffff;







    --text-secondary: #8e8e93;







    --text-muted: #5b5b63;







    







    --color-primary: #00f2fe; /* Electric Cyan */







    --color-primary-rgb: 0, 242, 254;







    --color-secondary: #7000ff; /* Neon Purple */







    --color-secondary-rgb: 112, 0, 255;







    --color-accent: #00ff87; /* Success/Emerald */







    --color-accent-rgb: 0, 255, 135;







    







    --aurora-1: rgba(159, 255, 224, 0.11);







    --aurora-2: rgba(232, 106, 167, 0.11);







    --aurora-3: rgba(183, 255, 231, 0.05);







    







    --card-glow: 0 8px 32px 0 rgba(0, 242, 254, 0.05);







    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);















    /* Floating Tech Background Color System */







    --accent-muted-cobalt: rgba(74, 114, 184, 0.85);







    --accent-glow-blue: rgba(56, 189, 248, 0.85);







    --accent-soft-cyan: rgba(103, 232, 249, 0.85);







    --text-cool-white: rgba(226, 232, 240, 0.85);







    







    /* Typography */







    --font-heading: 'Outfit', sans-serif;







    --font-body: 'Plus Jakarta Sans', sans-serif;







    







    /* Layout */







    --nav-height: 80px;







    --container-width: 1200px;







    







    /* Animations */







    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);







    --transition-smooth: 0.3s cubic-bezier(0.25, 1, 0.5, 1);







    --transition-fast: 0.15s ease;







    







    /* === Responsive Typography System === */







    --font-size-xxs: 0.65rem;







    --font-size-xxs-line: 1.2;







    --font-size-xxs-mobile: clamp(0.6rem, 1.8vw, 0.75rem);







    







    --font-size-sm: 0.75rem;







    --font-size-sm-line: 1.3;







    --font-size-sm-mobile: clamp(0.65rem, 2vw, 0.85rem);







    







    --font-size-md: 0.875rem;







    --font-size-md-line: 1.4;







    --font-size-md-mobile: clamp(0.75rem, 2.2vw, 0.95rem);







    







    --font-size-lg: 1rem;







    --font-size-lg-line: 1.5;







    --font-size-lg-mobile: clamp(1rem, 2.5vw, 1.2rem);







    







    --font-size-xl: 1.25rem;







    --font-size-xl-line: 1.6;







    --font-size-xl-mobile: clamp(1.25rem, 3vw, 1.5rem);







    







    --font-size-2xl: 1.5rem;







    --font-size-2xl-line: 1.75;







    --font-size-2xl-mobile: clamp(1.5rem, 4vw, 2rem);







    







    --font-size-3xl: 2rem;







    --font-size-3xl-line: 1.8;







    --font-size-3xl-mobile: clamp(1.75rem, 5vw, 2.5rem);







    







    --font-size-4xl: 2.5rem;







    --font-size-4xl-line: 1.25;







    --font-size-4xl-mobile: clamp(2rem, 6vw, 3rem);







    







    --font-size-5xl: 3.5rem;







    --font-size-5xl-line: 1.15;







    --font-size-5xl-mobile: clamp(2.5rem, 8vw, 4rem);







    







    --font-size-6xl: 4.5rem;







    --font-size-6xl-line: 1.05;







    --font-size-6xl-mobile: clamp(3.5rem, 10vw, 5rem);







    







    /* === Responsive Spacing System === */







    --space-0: 0;







    --space-1: 0.25rem;







    --space-2: 0.5rem;







    --space-3: 0.75rem;







    --space-4: 1rem;







    --space-5: 1.25rem;







    --space-6: 1.5rem;







    --space-8: 2rem;







    --space-10: 2.5rem;







    --space-12: 3rem;







    







    /* === Breakpoint Spacings === */







    --header-mobile-padding: clamp(1rem, 3vw, 1.5rem);







    --section-padding-mobile: clamp(3rem, 8vw, 5rem);







    --section-padding-desktop: clamp(4rem, 12vw, 8rem);







    --card-padding-mobile: clamp(1rem, 3vw, 1.5rem);







    --card-padding-desktop: clamp(1.5rem, 4vw, 2.5rem);







    --gap-mobile: clamp(0.5rem, 2vw, 1rem);







    --gap-desktop: clamp(1rem, 3vw, 1.5rem);







    







    /* === Chatbot Specific === */







    --chatbot-launcher-width: clamp(3.5rem, 8vw, 4.2rem);







    --chatbot-launcher-height: clamp(3.5rem, 8vw, 4.2rem);







    --chatbot-panel-width: clamp(300px, 90vw, 420px);







    --chatbot-panel-bottom: clamp(0.75rem, 3vw, 1.5rem);







    --chatbot-message-padding: clamp(0.6rem, 2vw, 0.85rem);







    --chatbot-input-padding: clamp(0.4rem, 1.5vw, 0.6rem);







    







    /* === Reduced Motion === */







    --reduced-motion: prefers-reduced-motion;







}















/* Light Mode Overwrite */







body.light-theme {







    --bg-base: #f5f5fa;







    --bg-surface: rgba(255, 255, 255, 0.7);







    --bg-surface-hover: rgba(255, 255, 255, 0.95);







    --border-color: rgba(0, 0, 0, 0.08);







    --border-color-hover: rgba(0, 0, 0, 0.18);







    







    --text-primary: #121217;







    --text-secondary: #636366;







    --text-muted: #8e8e93;







    







    --color-primary: #0076ff; /* Luxury Blue */







    --color-primary-rgb: 0, 118, 255;







    --color-secondary: #5856d6; /* Royal Indigo */







    --color-secondary-rgb: 88, 86, 214;







    







    --aurora-1: rgba(0, 118, 255, 0.08);







    --aurora-2: rgba(88, 86, 214, 0.08);







    --aurora-3: rgba(0, 255, 135, 0.03);







    







    --card-glow: 0 8px 32px 0 rgba(0, 118, 255, 0.04);







    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.06);







}















/* Alternate dark mode: deeper blue-black surfaces with the same neon language. */







body.midnight-theme {







    --bg-base: #030711;







    --bg-surface: rgba(8, 16, 31, 0.68);







    --bg-surface-hover: rgba(12, 25, 45, 0.88);







    --border-color: rgba(137, 202, 255, 0.12);







    --border-color-hover: rgba(137, 202, 255, 0.28);







    --text-primary: #f2f7ff;







    --text-secondary: #8ca2bd;







    --text-muted: #53647b;







    --color-primary: #62e6ff;







    --color-primary-rgb: 98, 230, 255;







    --color-secondary: #8b7cff;







    --color-secondary-rgb: 139, 124, 255;







    --color-accent: #62f5b0;







    --color-accent-rgb: 98, 245, 176;







    --aurora-1: rgba(98, 230, 255, 0.13);







    --aurora-2: rgba(139, 124, 255, 0.13);







    --aurora-3: rgba(98, 245, 176, 0.06);







    --card-glow: 0 8px 32px rgba(98, 230, 255, 0.07);







    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.52);







}















/* ----------------------------------------------------







   GLOBAL STYLES & RESET







   ---------------------------------------------------- */







* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }







input, textarea { user-select: text; -webkit-user-select: text; }







html { scroll-behavior: initial; }







body { background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; transition: background-color var(--transition-smooth), color var(--transition-smooth); -webkit-font-smoothing: antialiased; }







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







ul { list-style: none; }







button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; outline: none; }







::-webkit-scrollbar { width: 8px; }







::-webkit-scrollbar-track { background: var(--bg-base); }







::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }







::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }







.container { max-width: var(--container-width); margin: 0 auto; padding: 0 2rem; width: 100%; }







.fullscreen-section { min-height: 100vh; display: flex; align-items: center; position: relative; padding: 6rem 0; }







.scroll-section { padding: 8rem 0; position: relative; z-index: 2; }







.text-gradient { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }







.glass-card { background: var(--bg-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-color); border-radius: 20px; padding: 2.5rem; box-shadow: var(--glass-shadow); transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease; }







.glass-card:hover { border-color: var(--border-color-hover); box-shadow: var(--glass-shadow), var(--card-glow); }







.hover-glow:hover { box-shadow: var(--glass-shadow), 0 0 40px rgba(var(--color-primary-rgb), .15); }







.section-header { 







    margin-bottom: 5rem; 







}







.section-header.align-center { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; }







.section-header.align-left { text-align: left; }







.section-header.align-between { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; }







.section-tag { font-family: var(--font-heading); font-weight: 700; font-size: .9rem; letter-spacing: 2px; color: var(--color-primary); text-transform: uppercase; display: block; margin-bottom: 1rem; }







.section-title { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; line-height: 1.1; letter-spacing: -1px; }







.section-subtitle { margin-top: 1rem; color: var(--text-secondary); font-size: 1.1rem; }















/* Buttons */







.btn {







    display: inline-flex;







    align-items: center;







    justify-content: center;







    gap: .8rem;







    padding: 1rem 2rem;







    border-radius: 30px;







    font-family: var(--font-heading);







    font-weight: 600;







    font-size: 1rem;







    cursor: pointer;







    transition: all var(--transition-smooth);







    position: relative;







    overflow: hidden;







}







.btn-primary {







    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);







    color: #ffffff;







    box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.25);







}







.btn-primary:hover {







    transform: translateY(-3px);







    box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.4);







}







.btn-secondary {







    background: var(--bg-surface);







    border: 1px solid var(--border-color);







    color: var(--text-primary);







}







.btn-secondary:hover {







    background: var(--bg-surface-hover);







    border-color: var(--text-muted);







    transform: translateY(-3px);







}







.btn.disabled-demo {







    opacity: 0.5;







    cursor: not-allowed;







}















body.light-theme .tech-bg-canvas {







    display: none !important;







}















body.light-theme .aurora-container {







    opacity: 0.35;







}















/* Reading Progress */







.reading-progress {







    position: fixed;







    top: 0;







    left: 0;







    height: 3px;







    width: 100%;







    transform: scaleX(0);







    transform-origin: left center;







    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));







    z-index: 1000;







}















/* Custom Cursor */







.custom-cursor-glow {







    position: fixed;







    top: 0;







    left: 0;







    width: 300px;







    height: 300px;







    background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(var(--color-primary-rgb), 0) 70%);







    border-radius: 50%;







    transform: translate(-50%, -50%);







    pointer-events: none;







    z-index: 9998;







    mix-blend-mode: screen;







    display: none;







    transition: opacity 0.3s ease;







    will-change: transform;







}







.custom-cursor-dot {







    position: fixed;







    top: 0;







    left: 0;







    width: 8px;







    height: 8px;







    background-color: var(--color-primary);







    border-radius: 50%;







    transform: translate(-50%, -50%);







    pointer-events: none;







    z-index: 9998;







    display: none;







    transition: background-color 0.3s ease;







    will-change: transform;







}







body.mouse-active .custom-cursor-glow,







body.mouse-active .custom-cursor-dot {







    display: block;







}















/* Cursor state on Hover */







body.hover-state .custom-cursor-dot {







    transform: translate(-50%, -50%) scale(4);







    background-color: var(--color-secondary);







    opacity: 0.3;







}















/* Original background layers. */







.aurora-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; overflow: hidden; pointer-events: none; opacity: .72; }







.blob { position: absolute; border-radius: 50%; filter: blur(130px); mix-blend-mode: screen; opacity: .45; animation: blob-float 25s infinite alternate ease-in-out; }







.blob-1 { width: 600px; height: 600px; background: var(--aurora-1); top: -200px; right: -100px; }







.blob-2 { width: 500px; height: 500px; background: var(--aurora-2); bottom: -150px; left: -100px; animation-delay: -5s; }







.blob-3 { width: 400px; height: 400px; background: var(--aurora-3); top: 30%; left: 40%; animation-delay: -10s; }







.noise-overlay {







    display: none !important;







}







.tech-bg-canvas {







    display: none !important;







}







body.light-theme .tech-bg-canvas {







    display: none !important;







}







body.light-theme .aurora-container { opacity: .35; }















/* Final cinematic preloader composition. */







.premium-preloader {







    position: fixed;







    top: 0;







    left: 0;







    width: 100vw;







    height: 100vh;







    z-index: 999999;







    display: grid;







    place-items: center;







    overflow: hidden;







    isolation: isolate;







    color: var(--text-primary);







    background: var(--bg-base);







    cursor: default;







    transition: opacity .8s ease, visibility .8s ease;







}















/* JS-gated initial hiding for Hero entrance elements to prevent FOUC / name flashing on page load */







html.js .hero-badge,







html.js .title-sub,







html.js .title-name,







html.js .hero-subtitle,







html.js .hero-description,







html.js .hero-ctas .btn,







html.js .hero-profile-orbit-stage {







    opacity: 0;







}







.premium-preloader::after {







    content: '';







    position: absolute;







    inset: 0;







    z-index: 0;







    pointer-events: none;







    background: radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, .38) 100%);







}







.premium-preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }







.premium-preloader.loaded .curtain-left { transform: translateX(-100%); }







.premium-preloader.loaded .curtain-right { transform: translateX(100%); }







.premium-preloader.loaded .preloader-content { opacity: 0; transform: translateY(-12px) scale(.98); }







.premium-preloader.loaded .intro-atmosphere { opacity: 0; transform: scale(1.12); transition: opacity .95s ease, transform 1.2s var(--ease-spring); }







.premium-preloader.loaded .preloader-orbit-stage { transform: scale(1.16); filter: blur(2px); transition: transform .85s var(--ease-spring), filter .85s ease; }







.premium-preloader.loaded .loader-progress { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--ease-spring); }







.premium-preloader::before { content: ''; position: absolute; inset: 12%; border: 1px solid rgba(var(--color-primary-rgb), .06); border-radius: 50%; transform: rotate(18deg) scaleX(1.7); pointer-events: none; animation: ambientPulse 5s ease-in-out infinite; }







.intro-atmosphere { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, rgba(var(--color-primary-rgb), .1), transparent 28%), radial-gradient(ellipse at 88% 80%, rgba(var(--color-secondary-rgb), .11), transparent 30%), var(--bg-base); }







.intro-atmosphere::before { content: ''; position: absolute; inset: -35%; opacity: .9; background: radial-gradient(ellipse at 50% 48%, rgba(var(--color-primary-rgb), .2), transparent 22%), radial-gradient(ellipse at 18% 22%, rgba(var(--color-secondary-rgb), .16), transparent 28%), radial-gradient(ellipse at 86% 78%, rgba(var(--color-accent-rgb), .1), transparent 24%); background-size: 120% 120%; animation: atmosphereDrift 14s ease-in-out infinite alternate; }







.intro-atmosphere::after { content: ''; position: absolute; inset: -20%; opacity: .32; background: linear-gradient(112deg, transparent 25%, rgba(var(--color-primary-rgb), .16) 42%, transparent 52%); transform: translateX(-45%) skewX(-12deg); animation: atmosphereSweep 9s ease-in-out infinite; }







.intro-grid { position: absolute; inset: -5%; opacity: .23; background-image: linear-gradient(rgba(var(--color-primary-rgb), .13) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--color-secondary-rgb), .13) 1px, transparent 1px); background-size: 5rem 5rem; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); animation: gridDrift 18s linear infinite; }







.intro-orb { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 20px 6px rgba(var(--color-primary-rgb), .5); animation: introFloat 7s ease-in-out infinite; }







.intro-orb-one { top: 29%; left: 24%; }







.intro-orb-two { right: 22%; bottom: 28%; animation-delay: -3s; }







.preloader-content { position: relative; z-index: 3; width: min(600px, calc(100vw - 2rem)); padding: 2rem 0; text-align: center; animation: preloaderLift 1.1s var(--ease-spring) both; transition: opacity .45s ease, transform .65s var(--ease-spring); }







.intro-greeting { position: relative; display: flex; align-items: baseline; justify-content: center; gap: .65rem; margin: 0 auto 2.2rem; overflow: hidden; color: var(--text-primary); font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.45rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: .02em; line-height: 1; }







.intro-name { white-space: nowrap; }







.intro-name > span { display: inline-block; opacity: 0; filter: blur(4px); transform: translateY(5px); animation: nameCharacterReveal .9s var(--ease-spring) calc(.2s + var(--char-index) * .035s) both; }







.intro-greeting b { color: var(--color-secondary); font-family: var(--font-heading); font-size: .7em; font-weight: 400; }







.intro-divider { opacity: 0; animation: dividerReveal .2s ease 1s both; }







.intro-greeting small { color: var(--color-primary); font-family: var(--font-heading); font-size: .52em; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; opacity: 0; animation: portfolioReveal .7s var(--ease-spring) 1.08s both; }







.intro-greeting::after { content: ''; position: absolute; top: -15%; bottom: -15%; left: -35%; width: 18%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), .48), transparent); transform: skewX(-18deg); animation: greetingHighlight .5s ease 1.95s both; }







.intro-topline, .intro-bottomline { position: absolute; left: clamp(1.25rem, 5vw, 4.5rem); right: clamp(1.25rem, 5vw, 4.5rem); z-index: 3; display: flex; justify-content: space-between; color: rgba(243, 240, 232, .42); font-family: var(--font-heading); font-size: .55rem; letter-spacing: 2px; text-transform: uppercase; }







.intro-topline { top: clamp(1.5rem, 5vw, 3rem); }







.intro-bottomline { bottom: clamp(1.5rem, 5vw, 3rem); }







.intro-bottomline .intro-signal { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 12px rgba(var(--color-primary-rgb), .8); animation: loaderSignal 1.6s ease-in-out infinite; }







.preloader-kicker { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.4rem; color: var(--color-primary); font-family: var(--font-heading); font-size: .58rem; font-weight: 600; letter-spacing: 2.8px; text-transform: uppercase; animation: loaderTextReveal .8s var(--ease-spring) .12s both; }







.intro-kicker-line { width: 24px; height: 1px; background: currentColor; opacity: .55; }







.intro-copy { display: flex; flex-direction: column; align-items: center; gap: .65rem; }







.intro-eyebrow { color: rgba(243, 240, 232, .5); font-family: var(--font-heading); font-size: .65rem; letter-spacing: 3px; text-transform: uppercase; animation: loaderTextReveal .8s var(--ease-spring) .24s both; }







.intro-copy strong { color: var(--text-primary); font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.45rem, 4.5vw, 2.9rem); font-weight: 600; letter-spacing: 0; line-height: .95; white-space: nowrap; animation: loaderTextReveal 1s var(--ease-spring) .34s both; }







.preloader-orbit-stage { position: relative; display: grid; place-items: center; width: min(16rem, 46vh, 72vw); aspect-ratio: 1; margin: 0 auto 2rem; transition: transform .85s var(--ease-spring), filter .85s ease; }







.orbit { position: absolute; border: 1px solid rgba(var(--color-primary-rgb), .22); border-radius: 50%; transform: rotate(-22deg); }







.orbit-one { width: 72%; height: 72%; border-top-color: var(--color-primary); border-bottom-color: transparent; animation: orbitSpin 8s linear infinite; }







.orbit-two { width: 88%; height: 43%; border-color: rgba(var(--color-secondary-rgb), .45); transform: rotate(42deg); animation: orbitSpinReverse 11s linear infinite; }







.orbit-three { width: 100%; height: 62%; border-color: rgba(var(--color-primary-rgb), .14); transform: rotate(-58deg); animation: orbitSpin 15s linear infinite; }







.signal { position: absolute; width: .42rem; height: .42rem; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 1rem rgba(var(--color-primary-rgb), .9); }







.signal-one { top: 16%; right: 22%; animation: signalFloat 4s ease-in-out infinite; }







.signal-two { bottom: 19%; left: 20%; background: var(--color-secondary); box-shadow: 0 0 1rem rgba(var(--color-secondary-rgb), .9); animation: signalFloat 4s ease-in-out -2s infinite; }







.preloader-monogram { position: relative; display: grid; place-items: center; width: 7rem; height: 7rem; margin: 0; border: 1px solid rgba(var(--color-primary-rgb), .5); border-radius: 50%; box-shadow: 0 0 0 1rem rgba(var(--color-primary-rgb), .035), inset 0 0 2rem rgba(var(--color-primary-rgb), .1); animation: monogramReveal 1.1s var(--ease-spring) .5s both; }







.preloader-monogram::before { content: ''; position: absolute; inset: -.65rem; border: 1px solid transparent; border-top-color: var(--color-secondary); border-right-color: rgba(var(--color-primary-rgb), .6); border-radius: 50%; animation: monogramOrbit 8s linear infinite; }







.preloader-monogram span { color: var(--color-primary); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.25rem; font-weight: 600; letter-spacing: -2px; text-shadow: 0 0 18px rgba(var(--color-primary-rgb), .5); }







.loader-progress { width: min(360px, 100%); margin: 0 auto; animation: loaderTextReveal .9s var(--ease-spring) .7s both; transition: opacity .35s ease, transform .5s var(--ease-spring); }







.loader-progress-topline, .loader-progress-footer { display: flex; align-items: center; justify-content: space-between; }







.loader-progress-topline, .loader-progress-footer { color: rgba(243, 240, 232, .55); font-family: var(--font-heading); font-size: .58rem; letter-spacing: 1.8px; text-transform: uppercase; }







.percentage-text { margin-bottom: 1rem; color: var(--color-primary); font-family: var(--font-heading); font-size: 1.4rem; font-weight: 500; letter-spacing: 1px; }







.percentage-text sup { margin-left: .1rem; color: var(--text-secondary); font-size: .65em; vertical-align: top; }







.loader-track { height: 2px; margin: 1rem 0 .75rem; background: rgba(243, 240, 232, .14); }







.loader-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); box-shadow: 0 0 14px rgba(var(--color-primary-rgb), .65); transition: width .22s ease-out; }







.loader-status { display: flex; align-items: center; gap: .45rem; margin-top: .9rem; color: var(--text-secondary); font-family: var(--font-heading); font-size: .55rem; letter-spacing: 1.8px; text-transform: uppercase; }







.status-pulse { width: .35rem; height: .35rem; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 .75rem rgba(var(--color-secondary-rgb), .8); animation: loaderSignal 1.4s ease-in-out infinite; }







.status-change { animation: statusChange .35s var(--ease-spring) both; }







.loader-progress-footer { color: rgba(243, 240, 232, .32); font-size: .48rem; letter-spacing: 1.4px; }







.curtain { position: absolute; top: 0; z-index: 1; width: 50%; height: 100%; background: var(--bg-base); transition: transform 1.2s cubic-bezier(.77, 0, .175, 1); }







.curtain-left { left: 0; transform-origin: left; }







.curtain-right { right: 0; transform-origin: right; }







@keyframes monogramReveal { from { opacity: 0; transform: scale(.7) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }







@keyframes nameCharacterReveal { from { opacity: 0; filter: blur(4px); transform: translateY(5px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }







@keyframes dividerReveal { from { opacity: 0; } to { opacity: 1; } }







@keyframes portfolioReveal { from { opacity: 0; letter-spacing: .42em; } to { opacity: 1; letter-spacing: .25em; } }







@keyframes greetingHighlight { from { left: -35%; opacity: 0; } 20% { opacity: 1; } to { left: 125%; opacity: 0; } }







@keyframes monogramOrbit { to { transform: rotate(360deg); } }







@keyframes orbitSpin { to { transform: rotate(338deg); } }







@keyframes orbitSpinReverse { to { transform: rotate(-318deg); } }







@keyframes signalFloat { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .45; } 50% { transform: translate3d(8px, -12px, 0); opacity: 1; } }







@keyframes ambientPulse { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }







@keyframes statusChange { from { opacity: .25; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }







@keyframes atmosphereDrift { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(5%, 3%, 0) scale(1.12); } }







@keyframes atmosphereSweep { 0%, 18% { transform: translateX(-45%) skewX(-12deg); opacity: 0; } 40% { opacity: .3; } 72%, 100% { transform: translateX(45%) skewX(-12deg); opacity: 0; } }







@keyframes gridDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(2.5rem, 2.5rem, 0); } }







@media (max-width: 600px) { .intro-greeting { gap: .45rem; margin-bottom: 1.5rem; font-size: 1.35rem; } .intro-greeting small { letter-spacing: .16em; } .preloader-orbit-stage { width: min(14rem, 68vw); margin-bottom: 1.75rem; } .preloader-monogram { width: 5.5rem; height: 5.5rem; } .preloader-monogram span { font-size: 1.8rem; } }







@media (prefers-reduced-motion: reduce) { .premium-preloader, .premium-preloader * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } }























.glass-navbar {







    position: fixed;







    top: 0;







    left: 50%;







    transform: translateX(-50%);







    width: calc(100% - 40px);







    max-width: var(--container-width);







    height: var(--nav-height);







    background: var(--bg-surface);







    backdrop-filter: blur(12px);







    -webkit-backdrop-filter: blur(12px);







    border: 1px solid var(--border-color);







    border-radius: 40px;







    z-index: 100;







    box-shadow: var(--glass-shadow);







    transition: transform var(--transition-smooth),







                background-color var(--transition-smooth),







                border-color var(--transition-smooth);







}















.glass-navbar.hidden {







    transform: translateX(-50%) translateY(-80px);







    visibility: hidden;







    opacity: 0;







}















@media (max-width: 1024px) {







    .glass-navbar {







        --nav-border-radius: 9999px;







        border-radius: var(--nav-border-radius);







    }







    .nav-menu {







        display: none !important;







    }







    .kbd-btn, .nav-cta-btn {







        display: none !important;







    }







    .nav-actions {







        display: flex !important;







        align-items: center;







        gap: 0.5rem;







    }







    .mobile-nav-toggle {







        display: flex !important;







        align-items: center;







        justify-content: center;







        width: 38px;







        height: 38px;







        border-radius: 50%;







        border: 1px solid var(--border-color);







        background: var(--bg-surface);







        cursor: pointer;







        flex-shrink: 0;







        transition: all var(--transition-fast);







    }







}















@media (max-width: 600px) {







    .glass-navbar {







        --nav-border-radius: 9999px;







        border-radius: var(--nav-border-radius);







        top: 0.65rem;







        left: 50%;







        transform: translateX(-50%);







        width: calc(100% - 1.25rem);







        padding: 0 0.85rem;







        height: 3.6rem;







    }















    .nav-container {







        height: 100%;







        padding: 0;







        display: flex;







        align-items: center;







        justify-content: space-between;







    }















    .nav-logo {







        font-size: 1.15rem;







        font-weight: 800;







        letter-spacing: -0.5px;







        flex-shrink: 0;







    }















    .logo-accent {







        color: var(--color-primary);







    }















    .nav-menu {







        display: none !important;







    }















    .nav-actions {







        display: flex !important;







        align-items: center;







        gap: 0.45rem;







    }















    .kbd-btn,







    .nav-cta-btn {







        display: none !important;







    }















    .icon-btn.theme-switcher {







        width: 34px;







        height: 34px;







        font-size: 0.85rem;







    }















    .mobile-nav-toggle {







        display: flex !important;







        align-items: center;







        justify-content: center;







        width: 34px;







        height: 34px;







        border-radius: 50%;







        border: 1px solid var(--border-color);







        background: var(--bg-surface);







        cursor: pointer;







        flex-shrink: 0;







        padding: 0;







        transition: all var(--transition-fast);







    }















    .mobile-nav-toggle span {







        display: block;







        width: 17px;







        height: 2px;







        background: var(--text-primary);







        transition: transform 0.3s ease, opacity 0.3s ease;







    }







}















@media (max-width: 400px) {







    .glass-navbar {







        height: 3.4rem;







        width: calc(100% - 1rem);







        padding: 0 0.7rem;







    }







    .nav-logo {







        font-size: 1.05rem;







    }







}















/* Keep desktop nav as-is above 1024px */







@media (min-width: 1025px) {







    .nav-menu {







        display: flex !important;







    }















    .mobile-nav-toggle {







        display: none !important;







    }







}







.nav-container {







    display: flex;







    align-items: center;







    justify-content: space-between;







    height: 100%;







    padding: 0 1.5rem;







}







.nav-logo {







    font-family: var(--font-heading);







    font-size: 1.5rem;







    font-weight: 900;







    letter-spacing: -1px;







}







.logo-accent {







    color: var(--color-primary);







}







.nav-menu {







    display: flex;







    gap: 2rem;







}







.nav-link {







    font-family: var(--font-heading);







    font-weight: 500;







    font-size: 0.95rem;







    color: var(--text-secondary);







    transition: color var(--transition-smooth);







    position: relative;







    padding: 0.5rem 0;







}







.nav-link:hover, .nav-link.active {







    color: var(--text-primary);







}







.nav-link::after {







    content: '';







    position: absolute;







    bottom: 0;







    left: 0;







    width: 100%;







    height: 2px;







    background: var(--color-primary);







    transform: scaleX(0);







    transform-origin: left center;







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);







}







.nav-link.active::after, .nav-link:hover::after {







    transform: scaleX(1);







}







.nav-actions {







    display: flex;







    align-items: center;







    gap: 1.2rem;







}







.icon-btn {







    width: 40px;







    height: 40px;







    border-radius: 50%;







    border: 1px solid var(--border-color);







    background: var(--bg-surface);







    display: flex;







    align-items: center;







    justify-content: center;







    cursor: pointer;







    transition: all var(--transition-smooth);







}







.icon-btn:hover {







    border-color: var(--border-color-hover);







    transform: translateY(-2px);







}







.kbd-btn {







    display: flex;







    align-items: center;







    gap: 4px;







    padding: 0.4rem 0.8rem;







    border-radius: 20px;







    border: 1px solid var(--border-color);







    background: rgba(0, 0, 0, 0.15);







    font-size: 0.75rem;







    font-weight: 600;







    cursor: pointer;







    transition: all var(--transition-smooth);







}







.kbd-btn:hover {







    background: rgba(0,0,0,0.3);







    border-color: var(--border-color-hover);







}







.kbd-key {







    background: var(--bg-base);







    padding: 1px 5px;







    border-radius: 4px;







    border: 1px solid var(--border-color);







}







.nav-cta-btn {







    padding: 0.6rem 1.4rem;







    background: var(--text-primary);







    color: var(--bg-base);







    border-radius: 25px;







    font-family: var(--font-heading);







    font-weight: 700;







    font-size: 0.9rem;







    transition: all var(--transition-smooth);







}







.nav-cta-btn:hover {







    transform: scale(1.05);







    box-shadow: 0 4px 15px rgba(255,255,255,0.1);







}







.mobile-nav-toggle {







    display: none;







    flex-direction: column;







    gap: 6px;







    cursor: pointer;







    width: 24px;







}







.mobile-nav-toggle span {







    display: block;







    width: 100%;







    height: 2px;







    background: var(--text-primary);







    transition: transform 0.3s ease, opacity 0.3s ease;







}















/* Mobile Drawer */







.mobile-drawer {







    position: fixed;







    top: 0;







    right: 0;







    width: min(300px, 82vw);







    height: 100vh;







    height: 100dvh;







    background: rgba(10, 10, 16, 0.96);







    backdrop-filter: blur(20px);







    -webkit-backdrop-filter: blur(20px);







    border-left: 1px solid var(--border-color);







    z-index: 10000;







    padding: 5.5rem 1.75rem 2rem;







    display: flex;







    flex-direction: column;







    justify-content: space-between;







    transform: translateX(100%);







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);







    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.65);







    will-change: transform;







}







.mobile-drawer.open {







    transform: translateX(0);







}







.mobile-nav-menu {







    display: flex;







    flex-direction: column;







    gap: 1.5rem;







}







.mobile-nav-link {







    font-family: var(--font-heading);







    font-size: 1.35rem;







    font-weight: 600;







    color: var(--text-secondary);







    transition: color var(--transition-smooth);







}







.mobile-nav-link:hover {







    color: var(--text-primary);







}







.theme-switcher-mobile {







    width: 100%;







    padding: 1rem;







    border: 1px solid var(--border-color);







    border-radius: 12px;







    cursor: pointer;







    font-family: var(--font-heading);







    font-weight: 600;







    display: flex;







    align-items: center;







    justify-content: center;







    gap: 10px;







}







































/* ----------------------------------------------------







   HERO SECTION







   ---------------------------------------------------- */







#hero {







    position: relative;







    overflow: hidden;







    background-color: #050508; /* Obsidian Black guaranteed dominant */







}







.hero-bg-grid {







    display: none !important;







}















/* ==========================================================================







   SEAMLESS PERSISTENT BACKGROUND SYSTEM & FEATHERED SECTION ACCENTS







   - Persistent Viewport-Fixed Layer (#persistent-digital-background)







   - Dominant Base: Obsidian Black (#050508)







   - Glass Surfaces: Deep Obsidian / Navy-Black (rgba(18, 18, 28, 0.6))







   - Accents: Muted Cobalt, Subtle Electric Blue, Soft Cyan, Cool White







   - Zero Seams, Zero Breaks, Zero Abrupt Color Shifts







   ========================================================================== */















/* Ensure main content sits above background while remaining transparent */







#main-content {







    position: relative;







    z-index: 2;







    background: transparent !important;







}















/* Ensure individual sections blend into the persistent background */







.fullscreen-section,







.about-section,







.skills-section,







.projects-section,







.experience-section,







.education-section,







.awards-section,







.contact-section {







    position: relative;







    background: transparent !important;







}















/* Persistent Viewport-Fixed Background Layer - Atmospheric Transparency */







.persistent-background {







    position: fixed;







    top: 0;







    left: 0;







    width: 100vw;







    height: 100vh;







    z-index: 0;







    pointer-events: none;







    overflow: hidden;







    background: transparent; /* Fully transparent: reveals aurora glows and canvas network */







    contain: layout paint;







}















/* Atmospheric Ambient Lighting - Transparent Luminous Gradients */







.persistent-atmosphere {







    position: absolute;







    inset: 0;







    width: 100%;







    height: 100%;







    pointer-events: none;







    background: 







        radial-gradient(circle at 75% 25%, rgba(56, 189, 248, 0.045) 0%, transparent 60%),







        radial-gradient(circle at 20% 70%, rgba(74, 114, 184, 0.04) 0%, transparent 55%),







        radial-gradient(circle at 50% 50%, rgba(5, 5, 8, 0.1) 0%, transparent 100%);







    opacity: 0.75;







}















/* Continuous Matrix Canvas Grid - Removed as requested */







.persistent-grid-canvas {







    display: none !important;







}















/* Ambient Floating Celestial Particles */







.persistent-particles {







    display: none !important;







}















.p-dot {







    position: absolute;







    width: 2px;







    height: 2px;







    background: rgba(226, 232, 240, 0.4);







    border-radius: 50%;







    box-shadow: 0 0 5px rgba(56, 189, 248, 0.5);







    animation: particleTwinkle 4s ease-in-out infinite alternate;







}















.p-dot.p-1 { top: 12%; left: 24%; animation-delay: 0s; }







.p-dot.p-2 { top: 22%; right: 28%; animation-delay: 0.9s; }







.p-dot.p-3 { top: 62%; left: 18%; animation-delay: 1.8s; }







.p-dot.p-4 { bottom: 16%; right: 22%; animation-delay: 2.7s; }







.p-dot.p-5 { top: 45%; left: 7%; animation-delay: 1.3s; }







.p-dot.p-6 { top: 50%; right: 8%; animation-delay: 2.2s; }







.p-dot.p-7 { bottom: 35%; left: 32%; animation-delay: 3.1s; }







.p-dot.p-8 { top: 35%; right: 15%; animation-delay: 0.5s; }















@keyframes particleTwinkle {







    0% { opacity: 0.15; transform: scale(0.8); }







    100% { opacity: 0.75; transform: scale(1.2); }







}















/* Persistent Coordinated Technology Icons */







.persistent-tech-field {







    position: absolute;







    inset: 0;







    width: 100%;







    height: 100%;







    pointer-events: none;







    perspective: 1100px;







    transform-style: preserve-3d;







    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);







}















/* Individual 3D Floating Tech Node - Ethereal, Transparent & Clean */







.tech-node {







    position: absolute;







    left: var(--node-x);







    top: var(--node-y);







    display: flex;







    align-items: center;







    justify-content: center;







    transform-style: preserve-3d;







    will-change: transform, opacity;







    transform: translate(-50%, -50%)







               rotateX(var(--rot-x, 0deg))







               rotateY(var(--rot-y, 0deg))







               rotateZ(var(--rot-z, 0deg));







    pointer-events: auto;







    cursor: pointer;







    user-select: none;







    opacity: 0.08; /* Pure resting atmospheric transparency across every icon */







    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 







                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 







                box-shadow 0.4s ease, 







                border-color 0.4s ease, 







                background 0.4s ease;







}















/* Ultra-Transparent Glassmorphic Tile - No dark opaque blocking */







.tech-node--glass {







    padding: 8px 9px;







    background: rgba(255, 255, 255, 0.006); /* Sheer translucent watermark */







    border: 1px solid rgba(255, 255, 255, 0.02);







    border-radius: 12px;







    box-shadow: none;







    backdrop-filter: none;







    -webkit-backdrop-filter: none;







}















.tech-node--glass::after {







    content: '';







    position: absolute;







    inset: 0;







    border-radius: inherit;







    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%, rgba(56, 189, 248, 0.03) 100%);







    pointer-events: none;







}















.tech-node__icon {







    display: inline-flex;







    align-items: center;







    justify-content: center;







    width: var(--node-size, 34px);







    height: var(--node-size, 34px);







    opacity: 0.45;







    color: var(--node-color, var(--text-cool-white));







    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;







    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));







}















.tech-node__icon svg {







    width: 100%;







    height: 100%;







    fill: currentColor;







}















.tech-node--glow .tech-node__icon svg {







    filter: drop-shadow(0 0 8px var(--node-color));







}















.tech-node--glow.tech-node--glass {







    border-color: rgba(56, 189, 248, 0.14);







    box-shadow: 







        0 6px 20px -4px rgba(0, 0, 0, 0.28),







        0 0 15px rgba(56, 189, 248, 0.1),







        0 0 0 1px rgba(255, 255, 255, 0.04) inset;







}















/* Interactive Hover - Illuminates dynamically when hovered */







.tech-node:hover {







    opacity: 0.95 !important;







    transform: translate(-50%, -50%) translateZ(36px) scale(1.15);







    background: rgba(20, 26, 44, 0.6);







    border-color: rgba(56, 189, 248, 0.55);







    box-shadow: 







        0 14px 28px -4px rgba(0, 0, 0, 0.55),







        0 0 24px rgba(56, 189, 248, 0.32),







        0 0 0 1px rgba(255, 255, 255, 0.3) inset;







    z-index: 100;







}















.tech-node:hover .tech-node__icon {







    opacity: 1 !important;







    transform: scale(1.08);







    filter: drop-shadow(0 0 12px var(--node-color));







}















.tech-node__label {







    position: absolute;







    bottom: -24px;







    left: 50%;







    transform: translateX(-50%) translateY(4px);







    font-size: 0.68rem;







    font-weight: 600;







    letter-spacing: 0.06em;







    color: var(--text-heading);







    white-space: nowrap;







    opacity: 0;







    pointer-events: none;







    transition: opacity 0.25s ease, transform 0.25s ease;







    background: rgba(8, 10, 18, 0.85);







    backdrop-filter: blur(8px);







    -webkit-backdrop-filter: blur(8px);







    padding: 3px 9px;







    border-radius: 6px;







    border: 1px solid rgba(255, 255, 255, 0.12);







    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);







}















.tech-node:hover .tech-node__label {







    opacity: 1;







    transform: translateX(-50%) translateY(0);







}















/* 3D Floating Animations with Subtle Axis Tilts */







.tech-node--float3DA { animation: float3DA var(--node-dur, 22s) ease-in-out var(--node-delay, 0s) infinite alternate; }







.tech-node--float3DB { animation: float3DB var(--node-dur, 25s) ease-in-out var(--node-delay, 0s) infinite alternate; }







.tech-node--float3DC { animation: float3DC var(--node-dur, 24s) ease-in-out var(--node-delay, 0s) infinite alternate; }







.tech-node--float3DD { animation: float3DD var(--node-dur, 27s) ease-in-out var(--node-delay, 0s) infinite alternate; }















@keyframes float3DA {







    0%   { transform: translate(-50%, -50%) rotateX(var(--rot-x, 0deg)) rotateY(var(--rot-y, 0deg)) rotateZ(var(--rot-z, 0deg)) translateY(0px); }







    100% { transform: translate(-50%, -50%) rotateX(calc(var(--rot-x, 0deg) + 5deg)) rotateY(calc(var(--rot-y, 0deg) - 6deg)) rotateZ(calc(var(--rot-z, 0deg) + 2deg)) translateY(-14px); }







}















@keyframes float3DB {







    0%   { transform: translate(-50%, -50%) rotateX(var(--rot-x, 0deg)) rotateY(var(--rot-y, 0deg)) rotateZ(var(--rot-z, 0deg)) translateY(0px); }







    100% { transform: translate(-50%, -50%) rotateX(calc(var(--rot-x, 0deg) - 6deg)) rotateY(calc(var(--rot-y, 0deg) + 5deg)) rotateZ(calc(var(--rot-z, 0deg) - 3deg)) translateY(-16px); }







}















@keyframes float3DC {







    0%   { transform: translate(-50%, -50%) rotateX(var(--rot-x, 0deg)) rotateY(var(--rot-y, 0deg)) rotateZ(var(--rot-z, 0deg)) translateY(0px); }







    100% { transform: translate(-50%, -50%) rotateX(calc(var(--rot-x, 0deg) + 6deg)) rotateY(calc(var(--rot-y, 0deg) + 5deg)) rotateZ(calc(var(--rot-z, 0deg) - 4deg)) translateY(-13px); }







}















@keyframes float3DD {







    0%   { transform: translate(-50%, -50%) rotateX(var(--rot-x, 0deg)) rotateY(var(--rot-y, 0deg)) rotateZ(var(--rot-z, 0deg)) translateY(0px); }







    100% { transform: translate(-50%, -50%) rotateX(calc(var(--rot-x, 0deg) - 5deg)) rotateY(calc(var(--rot-y, 0deg) - 6deg)) rotateZ(calc(var(--rot-z, 0deg) + 3deg)) translateY(-12px); }







}















/* Section Accent Layers (Feathered Edge Dissolves) */







.section-accent-layer {







    display: none !important;







}















.section-accent-svg {







    position: absolute;







    inset: 0;







    width: 100%;







    height: 100%;







    display: block;







}















@media (max-width: 768px) {







    .tech-node {







        transform: translate(-50%, -50%) scale(0.85);







    }







}























.hero-container {







    display: grid;







    grid-template-columns: 1.2fr 0.8fr;







    gap: 4rem;







    align-items: center;







    position: relative;







    z-index: 2;







}







.hero-badge {







    display: inline-flex;







    align-items: center;







    gap: 10px;







    padding: 0.5rem 1rem;







    background: var(--bg-surface);







    border: 1px solid var(--border-color);







    border-radius: 30px;







    margin-bottom: 2rem;







}







.badge-dot {







    width: 8px;







    height: 8px;







    border-radius: 50%;







    background-color: var(--color-accent);







}







.animate-pulse {







    animation: pulsing 1.5s infinite ease-in-out;







}







@keyframes pulsing {







    0% { transform: scale(0.9); opacity: 0.5; }







    50% { transform: scale(1.2); opacity: 1; }







    100% { transform: scale(0.9); opacity: 0.5; }







}







.badge-text {







    font-size: 0.8rem;







    font-weight: 600;







    letter-spacing: 0.5px;







    color: var(--text-secondary);







}







.hero-title {







    font-family: var(--font-heading);







    font-size: 4.5rem;







    font-weight: 900;







    line-height: 1.05;







    letter-spacing: -2px;







    margin-bottom: 1.5rem;







}







.title-sub {







    font-family: var(--font-body);







    font-size: 1.8rem;







    font-weight: 400;







    color: var(--text-secondary);







    display: block;







    letter-spacing: 0px;







    margin-bottom: 0.5rem;







    will-change: transform, opacity, clip-path;







}







.title-name {







    display: block;







    will-change: transform, opacity, clip-path;







}







.hero-subtitle {







    font-family: var(--font-heading);







    font-size: 2.2rem;







    font-weight: 700;







    margin-bottom: 1.5rem;







    color: var(--text-primary);







}







.typing-cursor {







    color: var(--color-primary);







    font-weight: 200;







    animation: blink 0.8s infinite;







}







@keyframes blink {







    0%, 100% { opacity: 1; }







    50% { opacity: 0; }







}







.hero-description {







    font-size: 1.15rem;







    color: var(--text-secondary);







    max-width: 600px;







    margin-bottom: 2.5rem;







    will-change: transform, opacity, clip-path;







}







.hero-ctas {







    display: flex;







    gap: 1.5rem;







}







.hero-visual {







    display: flex;







    justify-content: center;







    position: relative;







}







/* --- Hero Profile Visual (Preloader-Inspired Orbit Stage Layout) --- */







.hero-profile-orbit-stage {







    position: relative;







    width: 380px;







    height: 380px;







    display: flex;







    align-items: center;







    justify-content: center;







    margin: 0 auto;







    animation: floatInfinite 6s ease-in-out infinite;







}















/* Deep cosmic radial backdrop glow (behind everything) */







.profile-orbit-glow {







    position: absolute;







    inset: -32px;







    border-radius: 50%;







    background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.35) 0%, rgba(var(--color-secondary-rgb), 0.22) 55%, transparent 75%);







    filter: blur(58px);







    opacity: 0.75;







    z-index: 0;







    pointer-events: none;







    transition: opacity 0.5s ease, transform 0.5s ease;







}















.hero-profile-orbit-stage:hover .profile-orbit-glow {







    opacity: 0.95;







    transform: scale(1.08);







}















/* --- Preloader-Inspired Multi-Angle Orbital System (Background Z-Index: 1) --- */







.profile-orbit-system {







    position: absolute;







    width: 470px;







    height: 470px;







    top: 50%;







    left: 50%;







    transform: translate(-50%, -50%);







    z-index: 1;







    pointer-events: none;







    display: grid;







    place-items: center;







}















.profile-orbit-ring {







    position: absolute;







    border: 1px solid rgba(var(--color-primary-rgb), 0.22);







    border-radius: 50%;







}















/* Ring 1 (Intro Preloader orbit-one style) */







.ring-one {







    width: 78%;







    height: 78%;







    border-color: rgba(var(--color-primary-rgb), 0.3);







    border-top-color: var(--color-primary);







    border-bottom-color: transparent;







    transform: rotate(-22deg);







    animation: orbitSpin 8s linear infinite;







}















/* Ring 2 (Intro Preloader orbit-two style) */







.ring-two {







    width: 95%;







    height: 54%;







    border-color: rgba(var(--color-secondary-rgb), 0.5);







    transform: rotate(42deg);







    animation: orbitSpinReverse 11s linear infinite;







}















/* Ring 3 (Intro Preloader orbit-three style) */







.ring-three {







    width: 112%;







    height: 74%;







    border: 1px dashed rgba(var(--color-primary-rgb), 0.3);







    border-top-color: var(--color-accent);







    transform: rotate(-58deg);







    animation: orbitSpin 15s linear infinite;







}















/* --- Sparkling Orbiting Stars along Outer Orbit Paths --- */







.profile-orbit-sparkles {







    position: absolute;







    inset: 0;







    border-radius: 50%;







    animation: orbitSpin 22s linear infinite;







}















.sparkle {







    position: absolute;







    font-size: 1rem;







    color: var(--color-primary);







    text-shadow: 







        0 0 8px var(--color-primary),







        0 0 16px var(--color-accent);







    animation: sparkleTwinkle 2.5s ease-in-out infinite alternate;







    pointer-events: none;







}















.sparkle--1 { top: 2%; left: 48%; color: var(--color-accent); font-size: 1.25rem; animation-delay: 0s; }







.sparkle--2 { top: 28%; right: -2%; color: var(--color-primary); font-size: 0.95rem; animation-delay: 0.4s; }







.sparkle--3 { bottom: 4%; right: 22%; color: #ffffff; font-size: 1.35rem; animation-delay: 0.8s; }







.sparkle--4 { bottom: 22%; left: -2%; color: var(--color-secondary); font-size: 1.05rem; animation-delay: 1.2s; }







.sparkle--5 { top: 22%; left: 2%; color: var(--color-accent); font-size: 1.15rem; animation-delay: 1.6s; }







.sparkle--6 { bottom: 0%; left: 52%; color: var(--color-primary); font-size: 0.9rem; animation-delay: 2s; }















@keyframes sparkleTwinkle {







    0% {







        opacity: 0.3;







        transform: scale(0.7) rotate(0deg);







        filter: brightness(0.8);







    }







    50% {







        opacity: 1;







        transform: scale(1.45) rotate(90deg);







        filter: brightness(1.6);







    }







    100% {







        opacity: 0.4;







        transform: scale(0.8) rotate(180deg);







        filter: brightness(1);







    }







}















/* --- Main Circular Profile Avatar Core (Perfect Radius Size) --- */







.profile-avatar-core {







    position: relative;







    width: 310px;







    height: 310px;







    border-radius: 50%;







    padding: 4px;







    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent));







    box-shadow: 







        0 22px 55px rgba(0, 0, 0, 0.65),







        0 0 38px rgba(var(--color-primary-rgb), 0.35);







    z-index: 10;







    overflow: hidden;







    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;







}















.hero-profile-orbit-stage:hover .profile-avatar-core {







    transform: scale(1.05);







    box-shadow: 







        0 28px 70px rgba(0, 0, 0, 0.75),







        0 0 60px rgba(var(--color-primary-rgb), 0.5);







}















.profile-avatar-img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    object-position: center 15%;







    border-radius: 50%;







    display: block;







    transition: transform 0.5s var(--ease-spring);







}















.hero-profile-orbit-stage:hover .profile-avatar-img {







    transform: scale(1.06);







}















.profile-avatar-rim {







    position: absolute;







    inset: 0;







    border-radius: 50%;







    border: 1px solid rgba(255, 255, 255, 0.18);







    pointer-events: none;







}















.hero-scroll-indicator {







    position: absolute;







    bottom: -40px;







    left: 50%;







    transform: translateX(-50%);







}







.scroll-arrow {







    display: block;







    width: 30px;







    height: 50px;







    border: 2px solid var(--text-secondary);







    border-radius: 15px;







    position: relative;







}







.scroll-arrow-dot {







    width: 6px;







    height: 6px;







    background-color: var(--color-primary);







    border-radius: 50%;







    position: absolute;







    top: 10px;







    left: 50%;







    transform: translateX(-50%);







    animation: scroll-dot-bounce 1.5s infinite ease-in-out;







}







@keyframes scroll-dot-bounce {







    0% { top: 8px; opacity: 1; }







    50% { top: 25px; opacity: 0; }







    100% { top: 8px; opacity: 1; }







}







.hero-socials {







    position: absolute;







    right: 2rem;







    top: 50%;







    transform: translateY(-50%);







    display: flex;







    flex-direction: column;







    gap: 1.5rem;







    z-index: 10;







}







.social-icon-link {







    width: 44px;







    height: 44px;







    border-radius: 50%;







    border: 1px solid var(--border-color);







    background: var(--bg-surface);







    display: flex;







    align-items: center;







    justify-content: center;







    font-size: 1.1rem;







    color: var(--text-secondary);







    transition: all var(--transition-smooth);







}







.social-icon-link:hover {







    border-color: var(--color-primary);







    color: var(--color-primary);







    transform: translateX(-4px) scale(1.1);







    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.15);







}















/* ----------------------------------------------------







   ABOUT PROFILE SECTION







   ---------------------------------------------------- */







.about-grid {







    display: grid;







    grid-template-columns: 1fr 1fr;







    gap: 4rem;







    align-items: flex-start;







}







.narrative-card {







    border-left: 4px solid var(--color-primary);







}







.narrative-heading {







    font-family: var(--font-heading);







    font-size: 1.8rem;







    font-weight: 700;







    margin-bottom: 1.5rem;







}







.narrative-text {







    color: var(--text-secondary);







    margin-bottom: var(--space-3);







    max-width: 36rem;







    margin-left: auto;







    margin-right: auto;







    line-height: var(--font-size-md-line);







}















/* Ensure paragraphs don't span full width */







.narrative-text p {







    max-width: 36rem;







    margin: 0 auto;







}







.career-objective {







    margin-top: 2rem;







    padding-top: 1.5rem;







    border-top: 1px solid var(--border-color);







    color: var(--text-secondary);







}







.career-objective-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem 0; color: var(--text-primary); text-align: left; cursor: pointer; }







.career-objective-toggle > span { display: grid; gap: .2rem; }







.career-objective-toggle strong { font-size: .95rem; }







.career-objective-toggle small { color: var(--text-muted); font-size: .7rem; letter-spacing: .5px; }







.career-objective-toggle i { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); border-radius: 50%; color: var(--color-primary); font-size: .75rem; transition: transform .35s var(--ease-spring), border-color .3s ease, background .3s ease; }







.career-objective-toggle:hover i, .career-objective-toggle:focus-visible i { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), .08); }







.career-objective.is-open .career-objective-toggle i { transform: rotate(45deg); }







.career-objective-panel[hidden] { display: none; }







.career-objective-panel { display: grid; gap: .8rem; padding: 1.2rem 0 .25rem; }







.career-objective-panel p { padding-left: 1rem; border-left: 2px solid var(--color-primary); color: var(--text-secondary); font-size: .9rem; line-height: 1.55; opacity: 0; }







.career-objective-panel.panel-reveal p { animation: objectivePointReveal .55s var(--ease-spring) both; }







.career-objective-panel.panel-reveal p:nth-child(2) { animation-delay: .12s; }







.career-objective-panel.panel-reveal p:nth-child(3) { animation-delay: .24s; }







@keyframes objectiveReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }







@keyframes objectivePointReveal { from { opacity: 0; transform: translateX(-14px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: translateX(0); clip-path: inset(0 0 0 0); } }







.stats-grid {







    display: grid;







    grid-template-columns: 1fr 1fr;







    gap: 1.5rem;







    margin-bottom: 2rem;







}







.stat-card {







    padding: 1.5rem;







    text-align: center;







}







.slide-stat {







    opacity: 0;







    transform: translateY(28px) scale(.96);







    transition: opacity .7s var(--ease-spring), transform .7s var(--ease-spring), border-color .3s ease, box-shadow .3s ease;







    will-change: opacity, transform;







}







.slide-stat:nth-child(2) { transition-delay: .08s; }







.slide-stat:nth-child(3) { transition-delay: .16s; }







.slide-stat:nth-child(4) { transition-delay: .24s; }







.slide-stat.appear {







    opacity: 1;







    transform: translateY(0) scale(1);







}







.stat-num {







    font-family: var(--font-heading);







    font-size: 2.8rem;







    font-weight: 800;







    color: var(--color-primary);







    margin-bottom: 0.5rem;







}







.stat-label {







    font-size: 0.85rem;







    font-weight: 600;







    color: var(--text-secondary);







    text-transform: uppercase;







    letter-spacing: 0.5px;







}







.edu-highlights-card {







    padding: 1.5rem;







}







.card-subtitle {







    font-family: var(--font-heading);







    font-size: 1.1rem;







    font-weight: 600;







    margin-bottom: 1.5rem;







    display: flex;







    align-items: center;







    gap: 10px;







}







.edu-item {







    display: flex;







    gap: 1.5rem;







}







.edu-year {







    font-family: var(--font-heading);







    font-weight: 700;







    color: var(--color-secondary);







    font-size: 0.95rem;







    white-space: nowrap;







}







.edu-details h5 {







    font-size: 1rem;







    font-weight: 600;







    margin-bottom: 0.2rem;







}







.edu-details p {







    font-size: 0.85rem;







    color: var(--text-secondary);







}















/* ----------------------------------------------------







   SKILLS CONSTELLATION SECTION







   ---------------------------------------------------- */







.skills-constellation {







    display: grid;







    grid-template-columns: 1fr 1.2fr;







    gap: 4rem;







    align-items: center;







}















/* --- Interactive Constellation Visual --- */







.constellation-visual {







    position: relative;







    height: 520px;







    display: flex;







    align-items: center;







    justify-content: center;







}















.core-pulse {







    position: absolute;







    top: 50%;







    left: 50%;







    width: 150px;







    height: 150px;







    border-radius: 50%;







    border: 1px solid rgba(var(--color-primary-rgb), 0.22);







    transform: translate(-50%, -50%) scale(1);







    animation: pulseWave 4s ease-out infinite;







    pointer-events: none;







}







.core-pulse.p2 { animation-delay: 1.3s; }







.core-pulse.p3 { animation-delay: 2.6s; }







@keyframes pulseWave {







    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }







    100% { transform: translate(-50%, -50%) scale(2.9); opacity: 0; }







}















.sat-ring.paused {







    animation-play-state: paused;







}







.skill-core {







    position: relative;







    cursor: pointer;







    width: 150px;







    height: 150px;







    border-radius: 50%;







    background: radial-gradient(circle at 30% 30%, var(--color-primary) 0%, var(--color-secondary) 55%, rgba(112, 0, 255, 0.45) 100%);







    box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.45),







                0 0 90px rgba(var(--color-secondary-rgb), 0.3),







                inset 0 0 30px rgba(255, 255, 255, 0.12);







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







    color: #ffffff;







    font-family: var(--font-heading);







    z-index: 5;







    animation: coreFloat 6s ease-in-out infinite;







}







.core-title {







    font-weight: 900;







    font-size: 1.35rem;







    letter-spacing: 3px;







    text-shadow: 0 0 14px rgba(255, 255, 255, 0.45);







}







.core-sub {







    font-weight: 500;







    font-size: 0.75rem;







    letter-spacing: 5px;







    opacity: 0.9;







    margin-top: 2px;







}







@keyframes coreFloat {







    0%, 100% { transform: translateY(0); }







    50% { transform: translateY(-10px); }







}















.sat-ring {







    position: absolute;







    top: 50%;







    left: 50%;







    border-radius: 50%;







    border: 1px solid var(--border-color);







    transform: translate(-50%, -50%);







    pointer-events: none; /* let taps pass through the ring surface to nodes below */







}







.sat-ring-inner {







    width: 300px;







    height: 300px;







    animation: ringSpin 28s linear infinite;







}







.sat-ring-outer {







    width: 430px;







    height: 430px;







    border-color: rgba(var(--color-secondary-rgb), 0.3);







    animation: ringSpinRev 40s linear infinite;







}







@keyframes ringSpin {







    from { transform: translate(-50%, -50%) rotate(0deg); }







    to { transform: translate(-50%, -50%) rotate(360deg); }







}







@keyframes ringSpinRev {







    from { transform: translate(-50%, -50%) rotate(360deg); }







    to { transform: translate(-50%, -50%) rotate(0deg); }







}















.skill-satellite {







    position: absolute;







    top: 50%;







    left: 50%;







    width: 52px;







    height: 52px;







    pointer-events: auto;







    margin: -26px 0 0 -26px;







    border-radius: 50%;







    background: var(--bg-surface);







    border: 1px solid var(--border-color);







    color: var(--text-secondary);







    display: flex;







    align-items: center;







    justify-content: center;







    font-size: 1.15rem;







    cursor: pointer;







    z-index: 6;







    transform: rotate(var(--angle)) translate(150px) rotate(calc(-1 * var(--angle)));







    transition: all 0.3s ease;







}







.sat-ring-outer .skill-satellite {







    width: 58px;







    height: 58px;







    margin: -29px 0 0 -29px;







    font-size: 1.25rem;







    transform: rotate(var(--angle)) translate(215px) rotate(calc(-1 * var(--angle)));







}







.skill-satellite:hover {







    color: var(--color-primary);







    border-color: var(--color-primary);







    box-shadow: 0 0 22px rgba(var(--color-primary-rgb), 0.45);







}







.skill-satellite.active {







    color: #ffffff;







    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);







    border-color: transparent;







    box-shadow: 0 0 26px rgba(var(--color-primary-rgb), 0.55);







    scale: 1.12;







}







.satellite-tooltip {







    position: absolute;







    bottom: -32px;







    left: 50%;







    transform: translateX(-50%) scale(0.8);







    background: var(--bg-base);







    border: 1px solid var(--border-color);







    padding: 4px 10px;







    border-radius: 6px;







    font-size: 0.65rem;







    font-weight: 700;







    color: var(--text-primary);







    white-space: nowrap;







    opacity: 0;







    pointer-events: none;







    transition: all 0.2s ease;







    z-index: 7;







}







.skill-satellite:hover .satellite-tooltip,







.skill-satellite.active .satellite-tooltip {







    opacity: 1;







    transform: translateX(-50%) scale(1);







}















.constellation-hint {







    position: absolute;







    bottom: 0;







    left: 50%;







    transform: translateX(-50%);







    font-size: 0.75rem;







    letter-spacing: 1.5px;







    color: var(--text-muted);







    text-transform: uppercase;







    white-space: nowrap;







}















/* --- Center Detail Card (shown when a node is selected) --- */







.node-detail-card {







    position: absolute;







    top: 50%;







    left: 50%;







    transform: translate(-50%, -50%) scale(0.85);







    width: 300px;







    max-width: 86%;







    background: var(--bg-surface);







    backdrop-filter: blur(16px);







    -webkit-backdrop-filter: blur(16px);







    border: 1px solid var(--border-color);







    border-radius: 18px;







    padding: 1.5rem 1.4rem 1.4rem;







    box-shadow: var(--glass-shadow), 0 0 30px rgba(var(--color-primary-rgb), 0.15);







    z-index: 9;







    opacity: 0;







    visibility: hidden;







    pointer-events: none;







    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);







    text-align: center;







}







.node-detail-card.open {







    opacity: 1;







    visibility: visible;







    pointer-events: auto;







    transform: translate(-50%, -50%) scale(1);







}







.node-detail-close {







    position: absolute;







    top: 10px;







    right: 12px;







    width: 26px;







    height: 26px;







    border-radius: 50%;







    border: 1px solid var(--border-color);







    background: var(--bg-base);







    color: var(--text-secondary);







    font-size: 0.7rem;







    cursor: pointer;







    display: flex;







    align-items: center;







    justify-content: center;







    transition: opacity 0.5s ease, color var(--transition-smooth), border-color var(--transition-smooth);







}







.node-detail-close:hover {







    color: var(--color-primary);







    border-color: var(--color-primary);







}







.node-detail-tag {







    display: block;







    font-family: var(--font-heading);







    font-size: 0.7rem;







    font-weight: 700;







    letter-spacing: 2px;







    text-transform: uppercase;







    color: var(--color-primary);







}







.node-detail-title {







    font-family: var(--font-heading);







    font-size: 1.15rem;







    font-weight: 800;







    margin: 0.4rem 0 0.9rem;







}







.node-detail-chips {







    display: flex;







    flex-wrap: wrap;







    justify-content: center;







    gap: 0.5rem;







}







.node-detail-chip {







    padding: 0.35rem 0.7rem;







    background: rgba(var(--color-primary-rgb), 0.08);







    border: 1px solid var(--border-color);







    border-radius: 20px;







    font-size: 0.75rem;







    font-weight: 600;







    color: var(--text-primary);







}















.skills-details-wrapper {







    display: flex;







    flex-direction: column;







    gap: 2rem;







}







.skills-tabs {







    display: flex;







    flex-wrap: wrap;







    gap: 0.8rem;







    border-bottom: 1px solid var(--border-color);







    padding-bottom: 1.2rem;







}







.skill-tab-btn {







    padding: 0.6rem 1.2rem;







    border-radius: 20px;







    font-family: var(--font-heading);







    font-weight: 600;







    font-size: 0.9rem;







    color: var(--text-secondary);







    cursor: pointer;







    background: var(--bg-surface);







    border: 1px solid var(--border-color);







    transition: all var(--transition-smooth);







}







.skill-tab-btn:hover, .skill-tab-btn.active {







    color: var(--text-primary);







    border-color: var(--color-primary);







    background: rgba(var(--color-primary-rgb), 0.05);







}







.skill-tab-btn.active {







    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.14), rgba(var(--color-secondary-rgb), 0.12));







    border-color: var(--color-primary);







    box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.28), 0 0 32px rgba(var(--color-secondary-rgb), 0.16);







}







.skills-pane {







    display: none;







    animation: paneFadeIn 0.5s ease forwards;







}







.skills-pane.active {







    display: block;







}







@keyframes paneFadeIn {







    from { opacity: 0; transform: translateY(15px); }







    to { opacity: 1; transform: translateY(0); }







}







.pane-title {







    font-family: var(--font-heading);







    font-size: 1.5rem;







    font-weight: 700;







    margin-bottom: 0.5rem;







}







.pane-description {







    color: var(--text-secondary);







    margin-bottom: 1.8rem;







    font-size: 0.95rem;







}







.skills-chips {







    display: flex;







    flex-wrap: wrap;







    gap: 1rem;







}







.skill-chip {







    display: inline-flex;







    align-items: center;







    gap: 10px;







    padding: 0.8rem 1.4rem;







    background: var(--bg-surface);







    border: 1px solid var(--border-color);







    border-radius: 12px;







    font-weight: 600;







    font-size: 0.9rem;







    transition: all var(--transition-smooth);







}















/* Skills staggered reveal (JS-gated: if JS fails/delays, elements default to visible) */







html.js .reveal-up {







    opacity: 0;







    transform: translateY(24px);







    transition-delay: min(var(--delay, 0s), 0.3s);







    transition-property: opacity, transform;







    transition-duration: 0.35s;







    transition-timing-function: ease;







    will-change: transform, opacity;







    backface-visibility: hidden;







}







html.js .reveal-up.active,







html.js .reveal-up.is-visible {







    opacity: 1;







    transform: translateY(0);







}















/* Paragraph copy reveals preserve readability while adding a little depth. */







html.js .text-reveal {







    opacity: 0;







    transform: translateY(16px);







    filter: blur(4px);







    transition: opacity 0.75s ease, transform 0.75s var(--ease-spring), filter 0.75s ease;







    transition-delay: var(--text-delay, 0ms);







    will-change: opacity, transform, filter;







}







html.js .text-reveal.is-visible {







    opacity: 1;







    transform: translateY(0);







    filter: blur(0);







}















@media (prefers-reduced-motion: reduce) {







    html.js .text-reveal {







        opacity: 1;







        transform: none;







        filter: none;







        transition: none;







    }







}







.skill-chip.reveal-up {







    transition-delay: min(var(--delay, 0s), 0.3s), 0s;







    transition-property: opacity, transform, border-color, background-color;







    transition-duration: 0.35s, 0.35s, var(--transition-smooth), var(--transition-smooth);







    transition-timing-function: ease, ease, ease, ease;







}







.skill-tab-btn.reveal-up {







    transition-delay: min(var(--delay, 0s), 0.3s), 0s;







    transition-property: opacity, transform, color, border-color;







    transition-duration: 0.35s, 0.35s, var(--transition-smooth), var(--transition-smooth);







    transition-timing-function: ease, ease, ease, ease;







}















.skill-chip:hover,







.skill-chip.reveal-up:hover {







    border-color: var(--color-primary);







    transform: translateY(-3px);







    box-shadow: 0 0 14px rgba(var(--color-primary-rgb), 0.22), 0 0 28px rgba(var(--color-secondary-rgb), 0.14);







    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.06), rgba(var(--color-secondary-rgb), 0.05));







}







.skill-chip:hover {







    border-color: var(--color-primary);







    transform: translateY(-2px);







    background: var(--bg-surface-hover);







}







.skill-chip i {







    color: var(--color-primary);







}















/* ----------------------------------------------------







   PROJECTS SECTION







   ---------------------------------------------------- */







.projects-controls {







    display: flex;







    gap: 1.5rem;







    align-items: center;







    flex-wrap: wrap;







}







.search-box {







    position: relative;







    width: 250px;







}







.search-box i {







    position: absolute;







    left: 15px;







    top: 50%;







    transform: translateY(-50%);







    color: var(--text-secondary);







}







.search-box input {







    width: 100%;







    padding: 0.8rem 1rem 0.8rem 2.8rem;







    border-radius: 25px;







    border: 1px solid var(--border-color);







    background: var(--bg-surface);







    font-size: 0.9rem;







    transition: all var(--transition-smooth);







}







.search-box input:focus {







    border-color: var(--color-primary);







    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.1);







}







.project-filters {







    display: flex;







    gap: 0.5rem;







}







.filter-btn {







    padding: 0.6rem 1.2rem;







    border-radius: 20px;







    font-family: var(--font-heading);







    font-weight: 600;







    font-size: 0.85rem;







    color: var(--text-secondary);







    cursor: pointer;







    transition: all var(--transition-smooth);







}







.filter-btn.active, .filter-btn:hover {







    color: var(--text-primary);







    background: var(--bg-surface);







}















.projects-grid {







    display: grid;







    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));







    gap: 2.5rem;







    margin-top: 4rem;







}







.project-card {







    overflow: hidden;







    padding: 0;







    display: flex;







    flex-direction: column;







    height: 100%;







    position: relative;







}







.project-reveal {







    opacity: 0;







    transform: translateY(34px) scale(.975);







    transition: opacity .7s var(--ease-spring), transform .7s var(--ease-spring), border-color .3s ease, box-shadow .3s ease;







    will-change: opacity, transform;







}







.project-reveal:nth-child(2) { transition-delay: .08s; }







.project-reveal:nth-child(3) { transition-delay: .16s; }







.project-reveal:nth-child(4) { transition-delay: .24s; }







.project-reveal:nth-child(5) { transition-delay: .32s; }







.project-reveal:nth-child(6) { transition-delay: .4s; }







.project-reveal:nth-child(7) { transition-delay: .48s; }







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







.project-card-badge {







    position: absolute;







    top: 15px;







    right: 15px;







    z-index: 5;







    padding: 0.3rem 0.8rem;







    background: rgba(0, 0, 0, 0.6);







    backdrop-filter: blur(5px);







    border: 1px solid var(--border-color);







    border-radius: 12px;







    font-size: 0.75rem;







    font-weight: 700;







    color: var(--text-primary);







}







.featured-badge {







    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);







    border: none;







}







.project-card-image {







    height: 200px;







    overflow: hidden;







    position: relative;







    border-bottom: 1px solid var(--border-color);







}







.proj-img-mock {







    width: 100%;







    height: 100%;







    position: relative;







    display: flex;







    align-items: center;







    justify-content: center;







    overflow: hidden;







}







.proj-ai-bg { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); }







.proj-sentiment-bg { background: linear-gradient(135deg, #1d976c, #93f9b9); }







.proj-bi-bg { background: linear-gradient(135deg, #11998e, #38ef7d); }







.proj-cv-bg { background: linear-gradient(135deg, #141e30, #243b55); }







.proj-phoenix-bg { background: linear-gradient(135deg, #8a2387, #e94057, #f27121); }







.proj-aurafaz-bg { background: linear-gradient(135deg, #d4a574, #f5e6d3, #e8c5a0); }







.proj-brandtouch-bg { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); }















.proj-mesh-orb {







    position: absolute;







    width: 120px;







    height: 120px;







    border-radius: 50%;







    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);







    filter: blur(10px);







    animation: pulseOrb 4s infinite alternate;







}







@keyframes pulseOrb {







    0% { transform: scale(0.8); opacity: 0.5; }







    100% { transform: scale(1.2); opacity: 0.9; }







}







.proj-mock-code {







    font-family: monospace;







    font-size: 0.65rem;







    color: rgba(255,255,255,0.7);







    text-align: left;







    padding: 10px;







    background: rgba(0,0,0,0.4);







    border-radius: 8px;







    border: 1px solid rgba(255,255,255,0.1);







    z-index: 2;







    display: flex;







    flex-direction: column;







    gap: 4px;







}







.sentiment-chart-mock {







    display: flex;







    gap: 15px;







    align-items: flex-end;







    height: 100px;







}







.bar {







    width: 30px;







    border-radius: 6px 6px 0 0;







    height: var(--h);







    transform: scaleY(0);







    transform-origin: bottom;







    animation: barGrow 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;







}







@keyframes barGrow {







    to { transform: scaleY(1); }







}







.bar-pos { background-color: var(--color-accent); }







.bar-neg { background-color: #ff453a; }















.dashboard-circle-mock {







    width: 80px;







    height: 80px;







    border-radius: 50%;







    border: 8px solid rgba(255, 255, 255, 0.1);







    border-top-color: var(--color-primary);







    border-right-color: var(--color-secondary);







    animation: spin 3s linear infinite;







}







.dashboard-graph-mock {







    position: absolute;







    bottom: 20px;







    left: 20px;







    right: 20px;







    height: 40px;







    color: var(--color-primary);







    opacity: 0.8;







}







.mini-svg-graph {







    width: 100%;







    height: 100%;







}







.grid-parking-slots {







    display: grid;







    grid-template-columns: repeat(4, 1fr);







    gap: 10px;







    padding: 20px;







    width: 80%;







}







.slot {







    height: 50px;







    border-radius: 6px;







    border: 2px dashed rgba(255,255,255,0.2);







    position: relative;







}







.slot-occupied::after {







    content: '';







    position: absolute;







    top: 5px; left: 5px; right: 5px; bottom: 5px;







    background: rgba(255, 69, 58, 0.4);







    border: 1px solid #ff453a;







    border-radius: 4px;







}







.slot-vacant::after {







    content: '';







    position: absolute;







    top: 5px; left: 5px; right: 5px; bottom: 5px;







    background: rgba(48, 209, 88, 0.4);







    border: 1px solid #30d158;







    border-radius: 4px;







}







.nodes-connection-mock {







    position: relative;







    width: 120px;







    height: 120px;







}







.mock-node {







    position: absolute;







    width: 15px;







    height: 15px;







    border-radius: 50%;







    background-color: #ffffff;







}







.node-a { top: 10px; left: 50px; background-color: var(--color-primary); }







.node-b { bottom: 20px; left: 10px; background-color: var(--color-secondary); }







.node-c { bottom: 20px; right: 10px; background-color: var(--color-accent); }















.project-card-body {







    padding: 2rem;







    display: flex;







    flex-direction: column;







    gap: 1rem;







    flex-grow: 1;







}







.project-card-meta {







    display: flex;







    justify-content: space-between;







    font-size: 0.8rem;







    font-weight: 600;







    color: var(--text-secondary);







}







.proj-status {







    padding: 1px 6px;







    border-radius: 4px;







    font-size: 0.7rem;







    text-transform: uppercase;







}







.status-active { background: rgba(0, 242, 254, 0.1); color: var(--color-primary); }







.status-done { background: rgba(0, 255, 135, 0.1); color: var(--color-accent); }







.status-prod { background: rgba(112, 0, 255, 0.1); color: var(--color-secondary); }















.project-card-title {







    font-family: var(--font-heading);







    font-size: 1.4rem;







    font-weight: 700;







}







.project-card-summary {







    color: var(--text-secondary);







    font-size: 0.9rem;







    line-height: 1.5;







}







.project-card-tech {







    display: flex;







    flex-wrap: wrap;







    gap: 0.5rem;







    margin-top: auto;







}







.tech-badge {







    padding: 0.25rem 0.6rem;







    background: rgba(255,255,255,0.05);







    border: 1px solid var(--border-color);







    border-radius: 6px;







    font-size: 0.75rem;







    font-weight: 600;







    color: var(--text-secondary);







}







.btn-card-action {







    padding: 0.6rem 0;







    justify-content: flex-start;







    color: var(--color-primary);







    font-size: 0.9rem;







    font-weight: 700;







    cursor: pointer;







}







.btn-card-action i {







    transition: transform 0.2s ease;







}







.btn-card-action:hover i {







    transform: translateX(5px);







}















/* Card hover: ambient cyan/purple glow + lift */







.project-card:hover,
.project-card.is-tilted {







    transform: translateY(-8px);







    box-shadow: 0 15px 35px -10px rgba(0, 242, 254, 0.2),







                0 0 30px rgba(var(--color-secondary-rgb), 0.08);







}















/* Thumbnail zoom inside overflow:hidden wrapper */







.proj-img-mock {







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);







}







.project-card:hover .proj-img-mock,
.project-card.is-tilted .proj-img-mock {







    transform: scale(1.04);







}















/* Case Study arrow glides right on card hover */







.project-card:hover .btn-card-action i,
.project-card.is-tilted .btn-card-action i {







    transform: translateX(6px);







}















/* Tech badge hover glow */







.tech-badge {







    transition: all var(--transition-smooth);







}







.tech-badge:hover {







    color: var(--color-primary);







    border-color: var(--color-primary);







    background: rgba(var(--color-primary-rgb), 0.08);







    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.25);







}















/* 3D Perspective Card Tilt styling */







.tilt-card {







    transform-style: preserve-3d;







    perspective: 1000px;







}







.tilt-card > * {







    transform: translateZ(20px);







}















/* ----------------------------------------------------







   EXPERIENCE SECTION (TIMELINE)







   ---------------------------------------------------- */







.experience-timeline {







    position: relative;







    max-width: 800px;







    margin: 4rem auto 0;







    padding-left: 2rem;







}







.experience-timeline::before {







    content: '';







    position: absolute;







    left: 0;







    top: 0;







    height: 100%;







    width: 2px;







    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));







}







.timeline-item {







    position: relative;







    margin-bottom: 4rem;







}







.timeline-dot {







    position: absolute;







    left: -37px;







    top: 25px;







    width: 12px;







    height: 12px;







    background-color: var(--bg-base);







    border: 3px solid var(--color-primary);







    border-radius: 50%;







    box-shadow: 0 0 10px var(--color-primary);







    transition: transform 0.3s ease;







}







.timeline-item:hover .timeline-dot {







    transform: scale(1.4);







    background-color: var(--color-accent);







    border-color: var(--color-accent);







    box-shadow: 0 0 12px var(--color-accent);







}







.timeline-date {







    font-family: var(--font-heading);







    font-weight: 700;







    color: var(--color-primary);







    font-size: 1rem;







    margin-bottom: 0.5rem;







}







.timeline-content {







    padding: 2rem;







}















/* Academic Journey card reveal + hover */







.academic-card {







    transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.3s ease;







}







.academic-card.is-visible {







    opacity: 1;







    transform: translateY(0);







}







.academic-card:hover {







    transform: translateY(-4px) scale(1.02);







    box-shadow: 0 12px 32px -8px rgba(0, 242, 254, 0.35),







                0 0 0 1px rgba(0, 242, 254, 0.4);







    border-color: rgba(0, 242, 254, 0.5);







    z-index: 1;







}







.timeline-header {







    border-bottom: 1px solid var(--border-color);







    padding-bottom: 1rem;







    margin-bottom: 1rem;







}







.timeline-job {







    font-family: var(--font-heading);







    font-size: 1.4rem;







    font-weight: 700;







}







.timeline-company {







    font-family: var(--font-heading);







    font-weight: 600;







    color: var(--color-secondary);







    font-size: 1.1rem;







    margin-right: 1rem;







}







.timeline-location {







    font-size: 0.85rem;







    color: var(--text-secondary);







}







.timeline-details {







    display: flex;







    flex-direction: column;







    gap: 0.8rem;







}







.timeline-details li {







    position: relative;







    padding-left: 1.5rem;







    color: var(--text-secondary);







    font-size: 0.95rem;







}







.timeline-details li::before {







    content: '→';







    position: absolute;







    left: 0;







    color: var(--color-primary);







}















/* ----------------------------------------------------







   MERITS, AWARDS & CERTIFICATIONS







   ---------------------------------------------------- */







.merits-grid {







    display: grid;







    grid-template-columns: 1.1fr 0.9fr;







    gap: 4rem;







}







.merit-subheading {







    font-family: var(--font-heading);







    font-size: 1.6rem;







    font-weight: 700;







    margin-bottom: 2rem;







    display: flex;







    align-items: center;







    gap: 12px;







}







.pub-title {







    font-family: var(--font-heading);







    font-size: 1.4rem;







    font-weight: 700;







    line-height: 1.3;







    margin-bottom: 0.5rem;







}







.pub-journal {







    font-size: 0.9rem;







    color: var(--text-secondary);







    margin-bottom: 1rem;







}







.pub-description {







    color: var(--text-muted);







    font-size: 0.9rem;







    margin-bottom: 1.5rem;







}







.pub-actions {







    display: flex;







    justify-content: space-between;







    align-items: center;







    font-size: 0.85rem;







    font-weight: 600;







}















/* Awards & Publications cinematic reveal cards */







.awards-list {







    display: flex;







    flex-direction: column;







    gap: 1.1rem;







}







.award-reveal-item {







    position: relative;







    overflow: hidden;







    border-radius: 16px;







    background: var(--bg-surface);







    border: 1px solid var(--border-color);







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);







    will-change: transform;







}







.award-reveal-item::before {







    content: '';







    position: absolute;







    inset: -1px;







    border-radius: inherit;







    padding: 1px;







    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.65), rgba(var(--color-secondary-rgb), 0.65));







    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);







    -webkit-mask-composite: xor;







    mask-composite: exclude;







    opacity: 0;







    transition: opacity 0.35s ease;







    pointer-events: none;







    z-index: 1;







}







.award-reveal-item::after {







    content: '';







    position: absolute;







    inset: 0;







    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--color-primary-rgb), 0.13), transparent 70%);







    opacity: 0;







    transition: opacity 0.35s ease;







    pointer-events: none;







    z-index: 1;







}







.award-reveal-item:hover {







    transform: translateY(-5px);







    box-shadow: 0 16px 40px rgba(var(--color-primary-rgb), 0.16);







}







.award-reveal-item:hover::before,







.award-reveal-item:hover::after {







    opacity: 1;







}







.award-card,







.award-reveal-item .publication-card,







.award-reveal-item .cert-card {







    position: relative;







    display: flex;







    flex-direction: column;







    gap: 0.45rem;







    padding: 1.4rem 1.5rem;







    z-index: 0;







}







.award-card-head {







    display: flex;







    align-items: center;







    gap: 0.75rem;







    margin-bottom: 0.25rem;







}







.award-index {







    font-family: var(--font-heading);







    font-size: 0.72rem;







    font-weight: 700;







    letter-spacing: 1.5px;







    color: var(--text-muted);







}







.award-icon {







    width: 34px;







    height: 34px;







    border-radius: 10px;







    display: inline-flex;







    align-items: center;







    justify-content: center;







    font-size: 0.95rem;







    color: var(--color-primary);







    background: rgba(var(--color-primary-rgb), 0.08);







    border: 1px solid rgba(var(--color-primary-rgb), 0.25);







    flex-shrink: 0;







}







.award-year {







    margin-left: auto;







    font-family: var(--font-heading);







    font-size: 0.78rem;







    font-weight: 700;







    letter-spacing: 0.5px;







    color: var(--color-primary);







    border: 1px solid rgba(var(--color-primary-rgb), 0.25);







    background: rgba(var(--color-primary-rgb), 0.07);







    padding: 0.18rem 0.7rem;







    border-radius: 20px;







}







.award-name {







    font-family: var(--font-heading);







    font-size: 1.05rem;







    font-weight: 700;







}







.award-context {







    font-size: 0.85rem;







    color: var(--text-secondary);







    line-height: 1.5;







}















.certifications-grid {







    display: grid;







    grid-template-columns: 1fr;







    gap: 1.2rem;







}







.cert-card {







    padding: 1.5rem;







    display: flex;







    flex-direction: column;







    gap: 0.8rem;







}







.award-reveal-item .cert-card {







    gap: 0.8rem;







    overflow: hidden;







}







.award-reveal-item .cert-card::after {







    content: '';







    position: absolute;







    top: 0;







    left: 0;







    width: 55%;







    height: 100%;







    background: linear-gradient(105deg, transparent, rgba(var(--color-primary-rgb), 0.13), transparent);







    transform: translateX(-140%) skewX(-18deg);







    transition: transform 0.7s ease;







    pointer-events: none;







}







.award-reveal-item .cert-card:hover::after {







    transform: translateX(300%) skewX(-18deg);







}







.cert-card:hover .cert-badge {







    transform: scale(1.2);







    color: var(--color-primary);







}







.cert-badge {







    transition: transform 0.35s var(--ease-spring), color 0.35s ease;







}







.cert-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







}







.cert-provider {







    font-size: 0.75rem;







    font-weight: 700;







    color: var(--color-primary);







    text-transform: uppercase;







}







.cert-badge {







    color: var(--color-accent);







}







.cert-name {







    font-family: var(--font-heading);







    font-size: 1.05rem;







    font-weight: 650;







    line-height: 1.3;







}















/* Academic Journey Cards */







.journey-wrapper {







    margin-top: 5rem;







    padding: 2rem;







    position: relative;







    border-color: rgba(var(--color-primary-rgb), 0.14);







}







.journey-wrapper::before {







    content: '';







    position: absolute;







    inset: 0;







    border: 1px solid rgba(var(--color-secondary-rgb), 0.14);







    border-radius: inherit;







    pointer-events: none;







    opacity: 0.7;







}







.journey-wrapper.is-visible {







    animation: journeyWrapperFloat 6s ease-in-out 0.45s infinite;







}







.journey-wrapper:hover {







    animation-play-state: paused;







}















@keyframes journeyWrapperFloat {







    0%, 100% {







        transform: translateY(0);







        box-shadow: var(--glass-shadow), 0 0 0 1px rgba(var(--color-primary-rgb), 0.04);







    }







    50% {







        transform: translateY(-6px);







        box-shadow: var(--glass-shadow), 0 14px 36px rgba(var(--color-primary-rgb), 0.08), 0 0 0 1px rgba(var(--color-secondary-rgb), 0.1);







    }







}















@media (prefers-reduced-motion: reduce) {







    .journey-wrapper.is-visible {







        animation: none;







    }







}







.journey-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: 1.8rem;







    flex-wrap: wrap;







    gap: 1rem;







}







.journey-title {







    font-family: var(--font-heading);







    font-size: 1.1rem;







    font-weight: 700;







    display: flex;







    align-items: center;







    gap: 10px;







}







.journey-list {







    display: flex;







    gap: 1.2rem;







    overflow-x: auto;







    padding-bottom: 0.6rem;







}







.journey-card {







    min-width: 220px;







    flex: 1 0 220px;







    background: var(--bg-surface);







    border: 1px solid var(--border-color);







    border-radius: 14px;







    padding: 1.2rem 1.3rem;







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;







    position: relative;







    overflow: hidden;







}







.journey-card:hover {







    border-color: var(--color-primary);







    box-shadow: 0 0 18px rgba(var(--color-primary-rgb), 0.15);







    transform: translateY(-4px);







}







.journey-year {







    font-family: var(--font-heading);







    font-size: 1.6rem;







    font-weight: 800;







    line-height: 1.1;







    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);







    -webkit-background-clip: text;







    background-clip: text;







    -webkit-text-fill-color: transparent;







    display: block;







    margin-bottom: 0.5rem;







}







.journey-milestone {







    font-family: var(--font-heading);







    font-size: 0.95rem;







    font-weight: 700;







    margin-bottom: 0.3rem;







}







.journey-meta {







    font-size: 0.78rem;







    color: var(--text-secondary);







    line-height: 1.45;







}















/* Academic Journey Reveal-on-Scroll (JS-gated fallback: visible if JS fails) */







html.js .journey-reveal-item {







    opacity: 0;







    transform: translateY(30px);







    transition: opacity 0.35s ease, transform 0.35s ease;







    will-change: transform, opacity;







    backface-visibility: hidden;







}







html.js .journey-reveal-item.active,







html.js .journey-reveal-item.is-visible {







    opacity: 1;







    transform: translateY(0);







}















/* Directional Reveal-on-Scroll (JS-gated fallback: visible if JS fails) */







html.js .reveal-left {







    opacity: 0;







    transform: translateX(-60px);







    transition: opacity 0.35s ease, transform 0.35s ease;







    will-change: transform, opacity;







    backface-visibility: hidden;







}







html.js .reveal-left.active,







html.js .reveal-left.is-visible {







    opacity: 1;







    transform: translateX(0);







}







html.js .reveal-left.active.settled,







html.js .reveal-left.is-visible.settled {







    animation: floatInfiniteLeft 5.2s ease-in-out infinite;







}















html.js .reveal-right {







    opacity: 0;







    transform: translateX(60px);







    transition: opacity 0.35s ease, transform 0.35s ease;







    will-change: transform, opacity;







    backface-visibility: hidden;







}







html.js .reveal-right.active,







html.js .reveal-right.is-visible {







    opacity: 1;







    transform: translateX(0);







}







html.js .reveal-right.active.settled,







html.js .reveal-right.is-visible.settled {







    animation: floatInfiniteRight 5.8s ease-in-out infinite -1.8s;







}















/* Pause float animation on hover for smooth interactive feedback */







.narrative-card:hover,







.stat-card:hover,







.edu-highlights-card:hover,







.about-highlights:hover {







    animation-play-state: paused;







}















/* Slide from left reveal (for contact card) */







.slide-from-left {







    opacity: 0;







    transform: translateX(-100px);







    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);







    will-change: opacity, transform;







}







.slide-from-left.appear {







    opacity: 1;







    transform: translateX(0);







}







.slide-from-left.appear.settled {







    animation: floatInfiniteLeft 4.5s ease-in-out infinite;







}















@keyframes floatInfinite {







    0%, 100% {







        transform: translateX(0) translateY(0px);







    }







    50% {







        transform: translateX(0) translateY(-10px);







    }







}







@keyframes floatInfiniteLeft {







    0%, 100% {







        transform: translateY(0px);







    }







    50% {







        transform: translateY(-8px);







    }







}







@keyframes floatInfiniteRight {







    0%, 100% {







        transform: translateY(0px);







    }







    50% {







        transform: translateY(-9px);







    }







}















/* Academic Journey slide + float */







.slide-academic {







    opacity: 0;







    transform: translateX(80px);







    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);







    will-change: opacity, transform;







}







.slide-academic.appear {







    opacity: 1;







    transform: translateX(0);







}















@keyframes floatAcademic {







    0%, 100% {







        transform: translateY(0px);







    }







    50% {







        transform: translateY(-8px);







    }







}















/* ----------------------------------------------------







   CONTACT SECTION







   ---------------------------------------------------- */







.contact-wrapper {







    display: grid;







    grid-template-columns: 0.9fr 1.1fr;







    gap: 4rem;







    margin-top: 4rem;







}







.contact-tagline {







    color: var(--text-secondary);







    margin-bottom: 2rem;







}







.contact-info-list {







    display: flex;







    flex-direction: column;







    gap: 1.5rem;







    margin-bottom: 2.5rem;







}







.contact-info-item {







    display: flex;







    align-items: center;







    gap: 1.2rem;







    padding: 1rem;







    border-radius: 12px;







    background: rgba(255,255,255,0.02);







    border: 1px solid var(--border-color);







    transition: all var(--transition-smooth);







}







.contact-info-item:hover {







    background: var(--bg-surface-hover);







    border-color: var(--color-primary);







}







.info-icon {







    width: 44px;







    height: 44px;







    border-radius: 50%;







    background: rgba(0, 242, 254, 0.1);







    color: var(--color-primary);







    display: flex;







    align-items: center;







    justify-content: center;







    font-size: 1.1rem;







}







.info-text span {







    display: block;







    font-size: 0.75rem;







    color: var(--text-muted);







    text-transform: uppercase;







}







.info-text strong {







    font-size: 0.95rem;







}







.map-placeholder {







    height: 180px;







    background: radial-gradient(circle, #10101a 0%, #050508 100%);







    border: 1px solid var(--border-color);







    border-radius: 15px;







    position: relative;







    overflow: hidden;







}







.map-overlay {







    position: absolute;







    top: 0; left: 0; width: 100%; height: 100%;







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







    gap: 10px;







    font-family: var(--font-heading);







    font-weight: 600;







    color: var(--text-secondary);







}







.map-spin {







    font-size: 2rem;







    color: var(--color-primary);







    animation: spin 10s linear infinite;







}







@keyframes spin {







    0% { transform: rotate(0deg); }







    100% { transform: rotate(360deg); }







}















/* Direct Connect */







.direct-connect-card {







    display: flex;







    flex-direction: column;







    gap: 1.8rem;







    height: 100%;







}







.connect-title {







    font-family: var(--font-heading);







    font-size: 1.5rem;







    font-weight: 800;







}







.connect-subtitle {







    color: var(--text-secondary);







    font-size: 0.9rem;







}







.connect-email-btn {







    width: 100%;







    justify-content: center;







    font-size: 1.05rem;







    padding: 1.1rem 1.8rem;







}







.connect-divider {







    display: flex;







    align-items: center;







    gap: 1rem;







    color: var(--text-muted);







    font-size: 0.78rem;







    text-transform: uppercase;







    letter-spacing: 0.08em;







    text-align: center;







}







.connect-divider::before,







.connect-divider::after {







    content: "";







    flex: 1;







    height: 1px;







    background: var(--border-color);







}







.connect-socials {







    display: grid;







    grid-template-columns: 1fr 1fr;







    gap: 1.2rem;







    margin-top: auto;







}







.connect-social-card {







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







    gap: 10px;







    padding: 1.7rem 1rem;







    background: var(--bg-surface);







    border: 1px solid var(--border-color);







    border-radius: 14px;







    color: var(--text-primary);







    font-family: var(--font-heading);







    font-weight: 700;







    font-size: 0.92rem;







    transition: all var(--transition-smooth);







}







.connect-social-card i {







    font-size: 1.9rem;







    color: var(--color-primary);







}
.connect-social-card .connect-social-img {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 6px;
    object-fit: contain;
    transition: transform var(--transition-smooth, 0.25s ease);
}

.connect-social-card:hover .connect-social-img {
    transform: scale(1.12);
}








.connect-social-card:hover {







    transform: translateY(-4px);







    border-color: var(--color-primary);







    box-shadow: 0 0 18px rgba(var(--color-primary-rgb), 0.15);







    background: var(--bg-surface-hover);







}















/* ----------------------------------------------------







   FOOTER







   ---------------------------------------------------- */







.footer {







    border-top: 1px solid var(--border-color);







    padding: 4rem 0;







    position: relative;







    z-index: 2;







    background: var(--bg-base);







}







.footer-container {







    display: flex;







    justify-content: space-between;







    align-items: center;







    flex-wrap: wrap;







    gap: 2rem;







}







.footer-logo {







    display: flex;







    flex-direction: column;







    gap: 10px;







}







.footer-logo .logo-symbol {







    font-family: var(--font-heading);







    font-size: 1.8rem;







    font-weight: 900;







    color: var(--color-primary);







}







.footer-logo p {







    font-size: 0.85rem;







    color: var(--text-muted);







}







.footer-links {







    display: flex;







    gap: 2rem;







}







.footer-link {







    font-size: 0.9rem;







    color: var(--text-secondary);







    transition: color 0.2s ease;







}







.footer-link:hover {







    color: var(--text-primary);







}







.back-to-top {







    width: 44px;







    height: 44px;







    border-radius: 50%;







    border: 1px solid var(--border-color);







    background: var(--bg-surface);







    display: flex;







    align-items: center;







    justify-content: center;







    cursor: pointer;







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease,







                border-color var(--transition-smooth), background-color var(--transition-smooth);







}







.back-to-top:hover {







    transform: translateY(-4px);







    border-color: var(--color-primary);







    color: var(--color-primary);







}















/* ----------------------------------------------------







   COMMAND PALETTE







   ---------------------------------------------------- */







.command-palette-backdrop {







    position: fixed;







    top: 0; left: 0; width: 100%; height: 100%;







    background: rgba(0, 0, 0, 0.6);







    backdrop-filter: blur(8px);







    -webkit-backdrop-filter: blur(8px);







    z-index: 1000;







    display: flex;







    align-items: flex-start;







    justify-content: center;







    padding-top: 15vh;







    opacity: 0;







    visibility: hidden;







    transition: opacity 0.3s ease, transform 0.3s ease;







}







.command-palette-backdrop.open {







    opacity: 1;







    visibility: visible;







}







.command-palette {







    width: 100%;







    max-width: 600px;







    padding: 0;







    overflow: hidden;







    transform: translateY(-20px);







    transition: transform 0.3s var(--ease-spring);







}







.command-palette-backdrop.open .command-palette {







    transform: translateY(0);







}







.cmd-header {







    display: flex;







    align-items: center;







    padding: 1.2rem;







    border-bottom: 1px solid var(--border-color);







}







.cmd-icon {







    font-size: 1.2rem;







    color: var(--color-primary);







    margin-right: 15px;







}







.cmd-header input {







    flex-grow: 1;







    font-size: 1.05rem;







    color: var(--text-primary);







}







.cmd-close {







    cursor: pointer;







    color: var(--text-secondary);







    font-size: 1.1rem;







    transition: color 0.2s ease;







}







.cmd-close:hover {







    color: var(--text-primary);







}







.cmd-body {







    max-height: 350px;







    overflow-y: auto;







    padding: 1.2rem;







}







.cmd-section {







    margin-bottom: 1.5rem;







}







.cmd-section-title {







    font-size: 0.75rem;







    font-weight: 700;







    color: var(--text-muted);







    text-transform: uppercase;







    letter-spacing: 1px;







    margin-bottom: 0.8rem;







    padding-left: 0.5rem;







}







.cmd-option {







    display: flex;







    align-items: center;







    gap: 12px;







    padding: 0.8rem;







    border-radius: 10px;







    cursor: pointer;







    transition: background 0.2s ease;







}







.cmd-option:hover, .cmd-option.selected {







    background: rgba(255,255,255,0.04);







}







body.light-theme .cmd-option:hover, body.light-theme .cmd-option.selected {







    background: rgba(0,0,0,0.04);







}







.option-icon {







    color: var(--text-secondary);







    font-size: 1rem;







    width: 20px;







    text-align: center;







}







.cmd-option span {







    flex-grow: 1;







    font-size: 0.95rem;







}







.cmd-option kbd {







    background: var(--bg-base);







    border: 1px solid var(--border-color);







    padding: 1px 6px;







    border-radius: 4px;







    font-size: 0.7rem;







    font-weight: 600;







    color: var(--text-secondary);







}







.cmd-footer {







    padding: 0.8rem 1.2rem;







    border-top: 1px solid var(--border-color);







    font-size: 0.75rem;







    color: var(--text-muted);







    background: rgba(0,0,0,0.1);







}















/* ----------------------------------------------------







   CASE STUDY MODALS







   ---------------------------------------------------- */







#project-modal-backdrop {







    position: fixed;







    top: 0;







    left: 0;







    width: 100vw;







    height: 100vh;







    background: rgba(0, 0, 0, 0.8);







    backdrop-filter: blur(8px);







    -webkit-backdrop-filter: blur(8px);







    z-index: 9999;















    /* Hidden by default */







    display: none;







    align-items: center;







    justify-content: center;







}















/* Show the backdrop only when the 'active' class is added */







#project-modal-backdrop.active {







    display: flex;







}















/* Hide all individual modal cards by default */







.modal {







    display: none;







    width: 90%;







    max-width: 800px;







    max-height: 85vh;







    padding: 3rem;







    overflow: hidden;







    position: relative;







}















/* Only show the modal that gets the 'active' class */







.modal.active {







    display: flex;







    flex-direction: column;







}







.modal-close {







    position: absolute;







    top: 25px;







    right: 25px;







    width: 40px;







    height: 40px;







    border-radius: 50%;







    border: 1px solid var(--border-color);







    display: flex;







    align-items: center;







    justify-content: center;







    cursor: pointer;







    background: var(--bg-surface);







    transition: opacity 0.5s ease, border-color var(--transition-smooth), color var(--transition-smooth);







}







.modal-close:hover {







    border-color: var(--text-primary);







}







.modal-header {







    margin-bottom: 2rem;







}







.modal-tag {







    font-size: 0.8rem;







    font-weight: 700;







    color: var(--color-primary);







    text-transform: uppercase;







    display: block;







    margin-bottom: 0.5rem;







}







.modal-title {







    font-family: var(--font-heading);







    font-size: 2.2rem;







    font-weight: 800;







    line-height: 1.2;







    margin-bottom: 1rem;







}







.modal-tech-stack {







    display: flex;







    flex-wrap: wrap;







    gap: 0.5rem;







}







.scrollable-content {







    overflow-y: auto;







    flex-grow: 1;







    padding-right: 1rem;







}







.modal-gallery {







    margin-bottom: 2rem;







}







.modal-banner {







    height: 200px;







    border-radius: 15px;







    display: flex;







    flex-direction: column;







    justify-content: center;







    padding: 2.5rem;







    color: #ffffff;







    position: relative;







    overflow: hidden;







    border: 1px solid var(--border-color);







}







.modal-banner h3 {







    font-family: var(--font-heading);







    font-size: 1.8rem;







    font-weight: 850;







    margin-bottom: 0.5rem;







    z-index: 2;







}







.modal-banner p {







    font-size: 1rem;







    opacity: 0.8;







    z-index: 2;







}







.modal-banner::after {







    content: '';







    position: absolute;







    top: 0; left: 0; width: 100%; height: 100%;







    background: rgba(0, 0, 0, 0.2);







}







.modal-info-grid {







    display: grid;







    grid-template-columns: 1fr 1fr;







    gap: 2rem;







    margin-bottom: 2rem;







}







.modal-info-grid h4 {







    font-family: var(--font-heading);







    font-size: 1.1rem;







    font-weight: 700;







    margin-bottom: 0.8rem;







}







.modal-info-grid p {







    font-size: 0.95rem;







    color: var(--text-secondary);







    line-height: 1.6;







}







.modal-features {







    margin-bottom: 2rem;







}







.modal-features h4 {







    font-family: var(--font-heading);







    font-size: 1.1rem;







    font-weight: 700;







    margin-bottom: 1rem;







}







.modal-features ul {







    display: flex;







    flex-direction: column;







    gap: 0.8rem;







}







.modal-features li {







    position: relative;







    padding-left: 1.5rem;







    font-size: 0.95rem;







    color: var(--text-secondary);







}







.modal-features li::before {







    content: '•';







    position: absolute;







    left: 0;







    color: var(--color-primary);







    font-size: 1.2rem;







    line-height: 1;







}







.modal-metrics {







    display: flex;







    gap: 2rem;







    margin-bottom: 2.5rem;







    border-top: 1px solid var(--border-color);







    border-bottom: 1px solid var(--border-color);







    padding: 1.5rem 0;







}







.metric-box {







    display: flex;







    flex-direction: column;







}







.metric-num {







    font-family: var(--font-heading);







    font-size: 2rem;







    font-weight: 800;







    color: var(--color-primary);







}







.metric-lbl {







    font-size: 0.8rem;







    color: var(--text-secondary);







    font-weight: 600;







}







.modal-footer-ctas {







    display: flex;







    gap: 1.5rem;







}















/* ----------------------------------------------------







   TOAST SYSTEM







   ---------------------------------------------------- */







.toast-container {







    position: fixed;







    bottom: 30px;







    right: 30px;







    display: flex;







    flex-direction: column;







    gap: 10px;







    z-index: 10000;







}







.toast {







    background: var(--bg-surface);







    backdrop-filter: blur(10px);







    border: 1px solid var(--border-color);







    color: var(--text-primary);







    padding: 1rem 1.5rem;







    border-radius: 12px;







    box-shadow: var(--glass-shadow);







    display: flex;







    align-items: center;







    gap: 12px;







    font-size: 0.9rem;







    font-weight: 600;







    border-left: 4px solid var(--color-primary);







    transform: translateY(20px);







    opacity: 0;







    animation: toastShow 0.4s var(--ease-spring) forwards;







}







@keyframes toastShow {







    to { transform: translateY(0); opacity: 1; }







}







.toast-success { border-left-color: var(--color-accent); }







.toast-info { border-left-color: var(--color-primary); }















/* ----------------------------------------------------







   RESPONSIVENESS (CONSOLIDATED BREAKPOINTS)







   ---------------------------------------------------- */















/* Tier 1: Tablet & Compact Desktop (769px - 1024px) */







@media (max-width: 1024px) {







    .nav-menu {







        display: none !important;







    }







    .kbd-btn, .nav-cta-btn {







        display: none !important;







    }







    .mobile-nav-toggle {







        display: flex !important;







    }







    #hero.fullscreen-section {







        display: flex;







        flex-direction: column;







        align-items: center;







        justify-content: flex-start;







        min-height: auto;







        height: auto;







        padding-top: 6.5rem;







        padding-bottom: 3rem;







    }







    .hero-container {







        display: grid !important;







        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) !important;







        gap: 2rem !important;







        align-items: center !important;







        width: 100% !important;







        max-width: 100% !important;







        text-align: left !important;







    }







    .hero-content {







        display: flex !important;







        flex-direction: column !important;







        align-items: flex-start !important;







        text-align: left !important;







    }







    .hero-badge {







        margin: 0 0 1rem !important;







        display: inline-flex;







        align-self: flex-start !important;







    }







    .hero-title, .title-sub, .title-name, .hero-subtitle, .hero-description {







        text-align: left !important;







        justify-content: flex-start !important;







    }







    .hero-description {







        margin-left: 0 !important;







        margin-right: 0 !important;







        max-width: 600px;







    }







    .hero-ctas {







        justify-content: flex-start !important;







        flex-wrap: wrap;







    }







    .hero-visual {







        display: flex;







        justify-content: center;







        align-items: center;







        margin: 0 auto;







    }







    .hero-socials {







        position: relative;







        flex-direction: row;







        right: auto;







        top: auto;







        transform: none;







        justify-content: center;







        margin-top: 2rem;







        gap: 1rem;







    }







    .projects-grid {







        grid-template-columns: repeat(2, 1fr);







        gap: 2rem;







    }







    .about-grid {







        grid-template-columns: 1fr 1fr;







        gap: 2rem !important;







    }







    .skills-constellation {







        grid-template-columns: 1fr;







        gap: 2.5rem;







    }







    .merits-grid {







        grid-template-columns: 1fr;







        gap: 2.5rem;







    }







    .contact-wrapper {







        grid-template-columns: 1fr;







        gap: 2.5rem;







    }







}















/* Tier 2: Mobile & Tablet (481px - 768px) */







@media (max-width: 768px) {







    html, body {







        overflow-x: hidden;







        width: 100%;







        max-width: 100%;







    }







    #main-content {







        width: 100%;







        max-width: 100%;







        overflow: hidden;







    }







    .fullscreen-section {







        min-height: auto;







        padding: 5.5rem 0 3rem;







        width: 100%;







        max-width: 100%;







        overflow: hidden;







    }







    .scroll-section {







        padding: 4.5rem 0;







        width: 100%;







        max-width: 100%;







        overflow: hidden;







    }







    .container {







        padding: 0 1.25rem;







        width: 100%;







        max-width: 100%;







        box-sizing: border-box;







    }







    .glass-card {







        padding: 1.35rem 1.15rem;







        border-radius: 14px;







        width: 100%;







        box-sizing: border-box;







    }















    /* Section Headers - Harmonized alignment on mobile */







    .section-header,







    .section-header.align-left,







    .section-header.align-center,







    .section-header.align-between {







        text-align: center;







        margin-left: auto;







        margin-right: auto;







        margin-bottom: 2.25rem;







        width: 100%;







        max-width: 100%;







    }







    .section-tag {







        text-align: center;







        margin: 0 auto 0.65rem;







        display: inline-block;







        font-size: 0.82rem;







        letter-spacing: 2px;







    }







    .section-title {







        font-size: clamp(1.75rem, 5.5vw, 2.35rem);







        text-align: center;







        line-height: 1.2;







        letter-spacing: -0.5px;







        width: 100%;







    }







    .section-subtitle {







        font-size: 0.95rem;







        text-align: center;







        max-width: 540px;







        margin: 0.65rem auto 0;







        line-height: 1.55;







        width: 100%;







    }







    .section-header.align-between {







        display: flex;







        flex-direction: column;







        align-items: center;







        gap: 1.25rem;







        width: 100%;







    }







    .section-header.align-between > div:first-child {







        text-align: center;







        width: 100%;







    }















    /* Hero Section Responsive Typography & Elements */







    #hero.fullscreen-section {







        display: flex !important;







        flex-direction: column !important;







        align-items: center !important;







        justify-content: flex-start !important;







        min-height: auto !important;







        height: auto !important;







        padding: 5.25rem 0 2rem !important;







        width: 100% !important;







        max-width: 100% !important;







        overflow-x: hidden !important;







    }







    .hero-container {



        display: flex !important;



        flex-direction: column !important;



        align-items: center !important;



        text-align: center !important;



        gap: 1.25rem !important;



        width: 100% !important;



        max-width: 100% !important;



        box-sizing: border-box !important;



        padding: 1.5rem clamp(0.85rem, 3vw, 1.5rem) 2.5rem !important;



    }







    .hero-visual {



        order: -1 !important;



        display: flex !important;



        align-items: center !important;



        justify-content: center !important;



        width: 100% !important;



        margin: 0.25rem auto 1rem !important;



        overflow: visible !important;



    }







    .hero-profile-orbit-stage {



        width: clamp(140px, 40vw, 185px) !important;



        height: clamp(140px, 40vw, 185px) !important;



        margin: 0 auto !important;



        flex-shrink: 0 !important;



    }







    .profile-orbit-system {



        width: clamp(170px, 48vw, 225px) !important;



        height: clamp(170px, 48vw, 225px) !important;



    }







    .profile-avatar-core {



        width: clamp(100px, 28vw, 135px) !important;



        height: clamp(100px, 28vw, 135px) !important;



    }







    .hero-content {



        display: flex !important;



        flex-direction: column !important;



        align-items: center !important;



        text-align: center !important;



        width: 100% !important;



        max-width: 520px !important;



        margin: 0 auto !important;



    }







    .hero-badge {



        display: inline-flex !important;



        margin: 0 auto 0.75rem !important;



        padding: 0.35rem 0.85rem !important;



        font-size: 0.78rem !important;



        max-width: 100% !important;



        white-space: normal !important;



        word-break: break-word !important;



        align-self: center !important;



    }







    .badge-text {



        font-size: inherit !important;



    }







    .hero-title {



        font-size: clamp(1.85rem, 6.5vw, 2.5rem) !important;



        line-height: 1.15 !important;



        margin-bottom: 0.45rem !important;



        text-align: center !important;



        letter-spacing: normal !important;



        word-spacing: normal !important;



        width: 100% !important;



    }







    .title-sub {



        font-size: clamp(0.95rem, 3.2vw, 1.15rem) !important;



        text-align: center !important;



        margin-bottom: 0.25rem !important;



        letter-spacing: normal !important;



        color: var(--text-secondary) !important;



        display: block !important;



    }







    .title-name {



        font-size: inherit !important;



        line-height: inherit !important;



        text-align: center !important;



        letter-spacing: -0.01em !important;



        word-spacing: 0.1em !important;



        display: inline-block !important;



    }







    .hero-subtitle {



        font-size: clamp(1rem, 3.4vw, 1.25rem) !important;



        min-height: auto !important;



        margin-bottom: 1rem !important;



        text-align: center !important;



        justify-content: center !important;



        width: 100% !important;



        display: flex !important;



        align-items: center !important;



    }







    .typing-text-wrapper {



        text-align: center !important;



    }







    .hero-description {



        font-size: clamp(0.88rem, 2.8vw, 0.95rem) !important;



        line-height: 1.65 !important;



        margin: 0 auto 1.5rem !important;



        padding: 0 !important;



        text-align: center !important;



        max-width: 480px !important;



        width: 100% !important;



        color: var(--text-secondary) !important;



    }







    .hero-ctas {



        display: flex !important;



        flex-direction: row !important;



        justify-content: center !important;



        align-items: center !important;



        flex-wrap: wrap !important;



        gap: 0.75rem !important;



        width: 100% !important;



        margin: 0 auto !important;



    }







    .hero-ctas .btn {



        width: auto !important;



        min-width: 140px !important;



        min-height: 44px !important;



        padding: 0.65rem 1.35rem !important;



        font-size: 0.86rem !important;



        font-weight: 600 !important;



        border-radius: 999px !important;



        display: inline-flex !important;



        align-items: center !important;



        justify-content: center !important;



    }







    .hero-scroll-indicator {







        display: none !important;







    }







    .hero-visual {







        display: flex !important;







        align-items: center !important;







        justify-content: center !important;







        width: 100% !important;







        min-width: 0 !important;







        margin: 0 auto !important;







        overflow: visible !important;







    }







    .hero-profile-orbit-stage {







        width: clamp(105px, 32vw, 190px) !important;







        height: clamp(105px, 32vw, 190px) !important;







        margin: 0 auto !important;







        flex-shrink: 0 !important;







    }







    .profile-orbit-system {







        width: clamp(130px, 40vw, 235px) !important;







        height: clamp(130px, 40vw, 235px) !important;







    }







    .profile-avatar-core {







        width: clamp(80px, 24vw, 150px) !important;







        height: clamp(80px, 24vw, 150px) !important;







    }







    .hero-socials {







        position: relative !important;







        right: auto !important;







        top: auto !important;







        bottom: auto !important;







        left: auto !important;







        transform: none !important;







        display: flex !important;







        flex-direction: row !important;







        justify-content: center !important;







        align-items: center !important;







        margin: 1.25rem auto 0 !important;







        gap: 0.75rem !important;







        width: 100% !important;







        z-index: 5 !important;







    }















    /* About Section */



    .about-grid {



        grid-template-columns: 1fr !important;



        gap: 1.75rem !important;



        width: 100% !important;



    }







    .narrative-card {



        padding: clamp(1.25rem, 4vw, 1.75rem) !important;



        width: 100% !important;



        box-sizing: border-box !important;



    }







    .narrative-heading {



        font-size: 1.35rem !important;



        line-height: 1.35 !important;



        margin-bottom: 0.85rem !important;



    }







    .narrative-text {



        font-size: 0.92rem !important;



        line-height: 1.65 !important;



        margin-bottom: 0.85rem !important;



    }







    .stats-grid {



        display: grid !important;



        grid-template-columns: repeat(2, 1fr) !important;



        gap: 0.85rem !important;



        width: 100% !important;



        margin-bottom: 1.25rem !important;



    }







    .stat-card {



        padding: 1.25rem 0.75rem !important;



        text-align: center !important;



        min-height: 105px !important;



        border-radius: 14px !important;



        display: flex !important;



        flex-direction: column !important;



        justify-content: center !important;



        align-items: center !important;



        box-sizing: border-box !important;



    }







    .stat-num {



        font-size: 2.1rem !important;



        font-weight: 800 !important;



        color: #38bdf8 !important;



        line-height: 1.1 !important;



    }







    .stat-label {



        font-size: 0.76rem !important;



        font-weight: 600 !important;



        text-transform: uppercase !important;



        letter-spacing: 0.8px !important;



        color: var(--text-secondary) !important;



        margin-top: 0.35rem !important;



    }







    .academic-card {



        width: 100% !important;



        padding: 1.25rem 1.15rem !important;



        box-sizing: border-box !important;



    }



    .about-narrative,







    .about-highlights {







        width: 100%;







    }







    .narrative-card {







        width: 100%;







    }







    .narrative-heading {







        font-size: 1.35rem;







        line-height: 1.3;







        margin-bottom: 0.85rem;







        text-align: left;







    }







    .narrative-text {







        font-size: 0.92rem;







        line-height: 1.65;







        margin-bottom: 0.85rem;







        text-align: left;







        max-width: 100%;







    }







    .stats-grid {







        grid-template-columns: 1fr 1fr;







        gap: 0.75rem;







        margin-bottom: 1.5rem;







        width: 100%;







    }







    .stat-card {







        padding: 1.15rem 0.65rem;







        text-align: center;







        display: flex;







        flex-direction: column;







        align-items: center;







        justify-content: center;







        width: 100%;







    }







    .stat-num {







        font-size: 1.85rem;







    }







    .stat-label {







        font-size: 0.78rem;







    }







    .edu-highlights-card {







        width: 100%;







        padding: 1.25rem 1rem;







    }







    .edu-item {







        display: flex;







        flex-direction: column;







        gap: 0.35rem;







        width: 100%;







    }







    .edu-year {







        font-size: 0.85rem;







        color: var(--color-primary);







    }







    .edu-details h5 {







        font-size: 0.95rem;







        line-height: 1.35;







    }







    .edu-details p {







        font-size: 0.84rem;







        line-height: 1.45;







    }















    /* Skills Section */







    .skills-constellation {







        grid-template-columns: 1fr;







        gap: 2rem;







        width: 100%;







        max-width: 100%;







    }







    .constellation-visual {







        height: 320px;







        width: 100%;







        max-width: 320px;







        margin: 0 auto 1.5rem;







        position: relative;







        overflow: visible;







        display: flex;







        align-items: center;







        justify-content: center;







    }







    .sat-ring-inner {







        width: 170px;







        height: 170px;







    }







    .sat-ring-inner .skill-satellite {







        width: 38px;







        height: 38px;







        margin: -19px 0 0 -19px;







        font-size: 0.95rem;







        transform: rotate(var(--angle)) translate(85px) rotate(calc(-1 * var(--angle)));







    }







    .sat-ring-outer {







        width: 250px;







        height: 250px;







    }







    .sat-ring-outer .skill-satellite {







        width: 44px;







        height: 44px;







        margin: -22px 0 0 -22px;







        font-size: 1.05rem;







        transform: rotate(var(--angle)) translate(125px) rotate(calc(-1 * var(--angle)));







    }







    .skill-core {







        width: 76px;







        height: 76px;







    }







    .core-title {







        font-size: 0.8rem;







        letter-spacing: 2px;







    }







    .core-sub {







        font-size: 0.6rem;







        letter-spacing: 3px;







    }







    .constellation-hint {







        display: none;







    }







    .node-detail-card {







        width: min(290px, 92%);







        max-width: 92%;







        padding: 1.25rem 1rem 1rem;







        border-radius: 14px;







    }







    .skills-details-wrapper {







        width: 100%;







        max-width: 100%;







    }







    .skills-tabs {







        display: flex;







        flex-wrap: wrap;







        justify-content: center;







        gap: 0.6rem;







        padding-bottom: 1.25rem;







        border-bottom: 1px solid var(--border-color);







        width: 100%;







        max-width: 100%;







        box-sizing: border-box;







    }







    .skill-tab-btn {







        padding: 0.55rem 1rem;







        font-size: 0.85rem;







        white-space: normal;







        text-align: center;







        min-height: 42px;







        border-radius: 20px;







        display: inline-flex;







        align-items: center;







        justify-content: center;







    }







    .pane-title {







        font-size: 1.25rem;







        text-align: center;







        margin-bottom: 0.4rem;







    }







    .pane-description {







        font-size: 0.88rem;







        text-align: center;







        margin-bottom: 1.2rem;







    }







    .skills-chips {







        display: flex;







        flex-wrap: wrap;







        gap: 0.5rem;







        justify-content: center;







        width: 100%;







    }







    .skill-chip {







        padding: 0.52rem 0.82rem;







        font-size: 0.82rem;







        gap: 6px;







    }















    /* Projects Section */







    .projects-controls {







        flex-direction: column;







        align-items: stretch;







        gap: 0.85rem;







        width: 100%;







    }







    .search-box {







        width: 100%;







        height: 44px;







    }







    .project-filters {







        width: 100%;







        display: flex;







        gap: 0.4rem;







        overflow-x: auto;







        -webkit-overflow-scrolling: touch;







        padding-bottom: 0.35rem;







        flex-wrap: nowrap;







        scrollbar-width: none;







    }







    .project-filters::-webkit-scrollbar {







        display: none;







    }







    .filter-btn {







        flex-shrink: 0;







        padding: 0.45rem 0.85rem;







        font-size: 0.78rem;







        white-space: nowrap;







    }







    .projects-grid {







        display: flex !important;







        flex-direction: column !important;







        gap: 1.25rem !important;







        margin-top: 1.75rem;







        width: 100%;







        max-width: 440px;







        margin-left: auto;







        margin-right: auto;







    }







    @media (min-width: 520px) and (max-width: 768px) {







        .projects-grid {







            grid-template-columns: repeat(2, 1fr) !important;







            max-width: 100% !important;







            gap: 1.5rem !important;







        }







    }







    .project-card {







        width: 100%;







        overflow: hidden;







    }







    .project-card-image {







        height: clamp(145px, 40vw, 175px) !important;







        width: 100%;







    }







    .project-card-body {







        padding: 1.25rem 1.1rem;







        gap: 0.75rem;







        width: 100%;







    }







    .project-card-title {







        font-size: 1.18rem;







        line-height: 1.3;







        text-align: left;







    }







    .project-card-description,







    .project-card-summary {







        font-size: 0.86rem;







        line-height: 1.55;







        text-align: left;







    }







    .project-card-meta {







        flex-wrap: wrap;







        gap: 0.4rem;







        width: 100%;







    }







    .project-card-tech {







        display: flex;







        flex-wrap: wrap;







        gap: 0.4rem;







    }







    .tech-badge {







        padding: 0.22rem 0.55rem;







        font-size: 0.74rem;







    }







    .project-card-actions {







        display: flex !important;







        flex-direction: row !important;







        align-items: center !important;







        justify-content: space-between !important;







        flex-wrap: wrap;







        gap: 0.5rem;







        padding-top: 0.85rem;







        border-top: 1px solid var(--border-color);







        width: 100%;







    }







    .project-card-actions .btn-card-action {







        font-size: 0.82rem !important;







        padding: 0.35rem 0.65rem !important;







        min-height: 36px;







        display: inline-flex;







        align-items: center;







        width: auto !important;







    }







    .btn-card-demo {







        font-size: 0.78rem !important;







        padding: 0.35rem 0.75rem !important;







        min-height: 36px;







        border-radius: 999px;







        display: inline-flex;







        align-items: center;







        width: auto !important;







    }















    /* Experience Timeline */







    .experience-timeline {







        padding-left: 1.5rem;







        margin-top: 2rem;







        position: relative;







        max-width: 100%;







        width: 100%;







    }







    .experience-timeline::before {







        left: 0;







        width: 2px;







    }







    .timeline-dot {







        left: -29px;







        width: 10px;







        height: 10px;







        top: 22px;







    }







    .timeline-item {







        margin-bottom: 2.25rem;







        width: 100%;







        position: relative;







    }







    .timeline-content {







        padding: 1.25rem 1.1rem;







        width: 100%;







        border-radius: 14px;







    }







    .timeline-job {







        font-size: 1.15rem;







        line-height: 1.3;







        text-align: left;







    }







    .timeline-company {







        font-size: 0.95rem;







        margin-right: 0;







        display: block;







        margin-bottom: 0.35rem;







        text-align: left;







    }







    .timeline-location {







        display: inline-flex;







        align-items: center;







        gap: 0.35rem;







        font-size: 0.82rem;







        text-align: left;







    }







    .timeline-details li {







        font-size: 0.86rem;







        line-height: 1.55;







        padding-left: 1.2rem;







        text-align: left;







        word-break: break-word;







    }















    /* Merits & Certifications */







    .merits-grid {







        grid-template-columns: 1fr;







        gap: 2rem;







        width: 100%;







    }







    .merit-subheading {







        font-size: 1.18rem;







        text-align: left;







        margin-bottom: 1rem;







        width: 100%;







    }







    .awards-list {







        gap: 0.85rem;







        width: 100%;







    }







    .certifications-grid {







        grid-template-columns: 1fr;







        gap: 1rem;







        width: 100%;







    }







    .award-card,







    .award-reveal-item .publication-card,







    .award-reveal-item .cert-card {







        padding: 1.15rem 1rem;







        width: 100%;







    }







    .pub-title, .award-name, .cert-name {







        word-break: break-word;







        line-height: 1.35;







    }















    /* Contact Section */







    .contact-wrapper {







        margin-top: 2rem;







        gap: 2rem;







        grid-template-columns: 1fr;







        width: 100%;







    }







    .contact-details-card,







    .direct-connect-card {







        padding: 1.35rem 1.15rem;







        gap: 1.25rem;







        width: 100%;







    }







    .contact-details-card h3 {







        font-size: 1.35rem;







        text-align: left;







    }







    .contact-tagline {







        font-size: 0.88rem;







        text-align: left;







    }







    .contact-info-item {







        display: flex;







        align-items: center;







        gap: 0.85rem;







        width: 100%;







    }







    .info-text strong {







        font-size: 0.9rem;







        word-break: break-all;







        overflow-wrap: anywhere;







    }







    .connect-title {







        font-size: 1.35rem;







        text-align: left;







    }







    .connect-subtitle {







        font-size: 0.88rem;







        text-align: left;







    }







    .connect-email-btn {







        font-size: 0.92rem;







        padding: 0.9rem 1.2rem;







        width: 100%;







        justify-content: center;







        text-align: center;







        word-break: break-word;







    }







    .connect-socials {







        grid-template-columns: 1fr 1fr;







        gap: 0.75rem;







        width: 100%;







    }







    .connect-social-card {







        padding: 1.2rem 0.75rem;







        font-size: 0.82rem;







        text-align: center;







        justify-content: center;







    }















    /* Chatbot Floating Launcher & Footer Clearance */







    .portfolio-chatbot {







        right: 1rem;







        bottom: 1rem;







        z-index: 999;







    }







    .portfolio-chatbot-launcher {







        width: 3.25rem;







        height: 3.25rem;







        font-size: 1rem;







    }







    .portfolio-chatbot-panel {







        position: fixed;







        inset: 0.5rem;







        bottom: 0.5rem;







        width: auto;







        height: auto;







        max-height: none;







        border-radius: 16px;







    }







    .footer {







        padding: 2.5rem 0 5.5rem;







    }







    .footer-container {







        flex-direction: column;







        text-align: center;







        gap: 1rem;







        width: 100%;







    }







    .footer-links {







        justify-content: center;







        flex-wrap: wrap;







        gap: 1rem;







        width: 100%;







    }















    /* Modals */







    .modal {







        width: 95%;







        max-width: 95%;







        max-height: 90vh;







        padding: 1.35rem 1rem;







        border-radius: 16px;







    }







    .modal-header {







        margin-bottom: 1rem;







        padding-right: 2.5rem;







    }







    .modal-close {







        top: 10px;







        right: 10px;







        width: 34px;







        height: 34px;







        font-size: 0.85rem;







    }







    .modal-title {







        font-size: clamp(1.2rem, 5vw, 1.5rem);







        margin-bottom: 0.5rem;







    }







    .modal-info-grid {







        grid-template-columns: 1fr;







        gap: 1rem;







    }







    .dash-lightbox-toolbar {







        padding: 0.65rem 0.85rem;







        gap: 0.5rem;







    }







    .dash-lightbox-title {







        font-size: 0.92rem;







        max-width: 55vw;







        overflow: hidden;







        text-overflow: ellipsis;







        white-space: nowrap;







    }







    .dash-lightbox-stage {







        padding: 0.25rem 0.5rem;







    }







    .dash-nav-arrow {







        width: 36px;







        height: 36px;







        font-size: 0.85rem;







    }







    .command-palette {







        width: 92%;







        max-width: 92%;







        margin-top: 8vh;







    }







}















/* Tier 3: Smartphones (up to 480px) */







@media (max-width: 480px) {







    .container {







        padding: 0 0.85rem;







        width: 100%;







    }







    .scroll-section {







        padding: 3.25rem 0;







        width: 100%;







    }







    .fullscreen-section,







    #hero.fullscreen-section {







        padding: 5.25rem 0 2rem;







        min-height: auto;







        height: auto;







        width: 100%;







    }







    .glass-card {







        padding: 1.15rem 0.95rem;







        border-radius: 12px;







        width: 100%;







    }







    .section-header {







        margin-bottom: 2rem;







        width: 100%;







    }







    .section-tag {







        font-size: 0.78rem;







        letter-spacing: 1.5px;







        margin-bottom: 0.5rem;







    }







    .section-title {







        font-size: clamp(1.5rem, 6.5vw, 1.85rem);







        line-height: 1.2;







        letter-spacing: -0.5px;







        width: 100%;







    }







    .section-subtitle {







        font-size: 0.88rem;







        margin-top: 0.5rem;







        width: 100%;







    }







    .stats-grid {







        grid-template-columns: 1fr 1fr;







        gap: 0.6rem;







        margin-bottom: 1.25rem;







        width: 100%;







    }







    .stat-card {







        padding: 1rem 0.45rem;







        width: 100%;







    }







    .stat-num {







        font-size: 1.6rem;







    }







    .stat-label {







        font-size: 0.72rem;







    }







    .narrative-heading {







        font-size: 1.25rem;







        margin-bottom: 0.75rem;







    }







    .narrative-text {







        font-size: 0.88rem;







        line-height: 1.55;







        margin-bottom: 0.75rem;







        max-width: 100%;







    }







    .career-objective {







        margin-top: 1.25rem;







    }







    .career-objective-toggle {







        padding: 0.6rem 0;







        font-size: 0.82rem;







    }







    .career-objective-panel {







        padding-top: 0.75rem;







        font-size: 0.82rem;







    }







    .edu-highlights-card {







        padding: 1.1rem 0.95rem;







        width: 100%;







    }







    .card-subtitle {







        font-size: 0.95rem;







        margin-bottom: 0.75rem;







    }







    .edu-item {







        flex-direction: column;







        gap: 0.35rem;







    }







    .edu-year {







        font-size: 0.82rem;







    }







    .edu-details h5 {







        font-size: 0.88rem;







    }







    .edu-details p {







        font-size: 0.78rem;







    }







    /* Skills Section 480px */







    .constellation-visual {







        height: 290px;







        max-width: 290px;







        margin: 0 auto 1.25rem;







    }







    .sat-ring-inner {







        width: 150px;







        height: 150px;







    }







    .sat-ring-inner .skill-satellite {







        width: 36px;







        height: 36px;







        margin: -18px 0 0 -18px;







        font-size: 0.88rem;







        transform: rotate(var(--angle)) translate(75px) rotate(calc(-1 * var(--angle)));







    }







    .sat-ring-outer {







        width: 220px;







        height: 220px;







    }







    .sat-ring-outer .skill-satellite {







        width: 40px;







        height: 40px;







        margin: -20px 0 0 -20px;







        font-size: 0.95rem;







        transform: rotate(var(--angle)) translate(110px) rotate(calc(-1 * var(--angle)));







    }







    .skill-core {







        width: 66px;







        height: 66px;







    }







    .core-title {







        font-size: 0.72rem;







        letter-spacing: 1.5px;







    }







    .core-sub {







        font-size: 0.54rem;







        letter-spacing: 2.5px;







    }







    .node-detail-card {







        width: min(270px, 90%);







        padding: 1.1rem 0.9rem 0.9rem;







    }







    .skills-tabs {







        gap: 0.5rem;







        padding-bottom: 1rem;







    }







    .skill-tab-btn {







        padding: 0.5rem 0.85rem;







        font-size: 0.82rem;







        min-height: 40px;







    }







    .pane-title {







        font-size: 1.15rem;







        text-align: center;







    }







    .pane-description {







        font-size: 0.85rem;







        text-align: center;







        margin-bottom: 1rem;







    }







    .skills-chips {







        justify-content: center;







        gap: 0.5rem;







    }







    .skill-chip {







        padding: 0.45rem 0.75rem;







        font-size: 0.8rem;







    }







    /* Projects Section 480px */







    .projects-grid {







        display: flex !important;







        flex-direction: column !important;







        gap: 1.25rem !important;







        max-width: 100% !important;







        margin-left: auto !important;







        margin-right: auto !important;







    }







    .project-card-image {







        height: clamp(145px, 40vw, 175px) !important;







    }







    .project-card-body {







        padding: 1.15rem 1rem;







        gap: 0.65rem;







    }







    .project-card-title {







        font-size: 1.14rem;







        line-height: 1.28;







    }







    .project-card-description,







    .project-card-summary {







        font-size: 0.82rem;







        line-height: 1.48;







    }







    .project-card-actions {







        display: flex !important;







        flex-direction: row !important;







        align-items: center !important;







        justify-content: space-between !important;







        gap: 0.5rem !important;







        padding-top: 0.65rem !important;







        border-top: 1px solid var(--border-color) !important;







        width: 100% !important;







    }







    .project-card-actions .btn-card-action {







        width: auto !important;







        font-size: 0.8rem !important;







        padding: 0.35rem 0.65rem !important;







        min-height: 34px !important;







        display: inline-flex !important;







        align-items: center !important;







    }







    .project-card-actions .btn-card-demo {







        width: auto !important;







        font-size: 0.76rem !important;







        padding: 0.35rem 0.75rem !important;







        min-height: 34px !important;







        border-radius: 999px !important;







        display: inline-flex !important;







        align-items: center !important;







    }







    .experience-timeline {







        padding-left: 1.35rem;







    }







    .timeline-dot {







        left: -26px;







        width: 9px;







        height: 9px;







        top: 22px;







    }







    .timeline-content {







        padding: 1.15rem 0.9rem;







    }







    .connect-socials {







        gap: 0.65rem;







        width: 100%;







    }







    .connect-social-card {







        padding: 1.1rem 0.65rem;







        font-size: 0.78rem;







        gap: 6px;







    }







    .connect-social-card i {







        font-size: 1.4rem;







    }







    .modal {







        padding: 1.15rem 0.85rem;







        border-radius: 14px;







        width: 96%;







    }







    .modal-banner {







        height: 120px;







        padding: 1rem;







        border-radius: 10px;







    }







}















/* Tier 4: Small / Compact Mobile (320px - 360px) */







@media (max-width: 360px) {







    .container {







        padding: 0 0.65rem;







        width: 100%;







    }







    .hero-container {



        gap: 1.15rem !important;



        padding: 1.25rem 0.85rem 2rem !important;



    }







    .hero-badge {



        font-size: 0.74rem !important;



        padding: 0.3rem 0.75rem !important;



        margin-bottom: 0.65rem !important;



    }







    .hero-title {



        font-size: 1.85rem !important;



        margin-bottom: 0.35rem !important;



        letter-spacing: normal !important;



    }







    .title-sub {



        font-size: 0.95rem !important;



        margin-bottom: 0.2rem !important;



    }







    .title-name {



        font-size: 1.85rem !important;



        letter-spacing: -0.01em !important;



    }







    .hero-subtitle {



        font-size: 1rem !important;



        margin-bottom: 0.85rem !important;



    }







    .hero-description {



        font-size: 0.88rem !important;



        line-height: 1.6 !important;



        margin-bottom: 1.25rem !important;



    }







    .hero-ctas {



        gap: 0.65rem !important;



    }







    .hero-ctas .btn {



        min-height: 42px !important;



        font-size: 0.84rem !important;



        padding: 0.6rem 1.2rem !important;



    }







    .hero-profile-orbit-stage {



        width: 135px !important;



        height: 135px !important;



    }







    .profile-orbit-system {



        width: 165px !important;



        height: 165px !important;



    }







    .profile-avatar-core {



        width: 95px !important;



        height: 95px !important;



    }







    .hero-socials {







        margin: 1rem auto 0 !important;







        gap: 0.65rem !important;







    }







    .social-icon-link {







        width: 36px !important;







        height: 36px !important;







        font-size: 0.9rem !important;







    }







    .section-title {







        font-size: 1.4rem;







    }







    .project-card-image {







        height: 140px !important;







    }







    .project-card-body {







        padding: 1rem 0.85rem !important;







        gap: 0.55rem !important;







    }







    .project-card-title {







        font-size: 1.05rem !important;







    }







    .project-card-summary {







        font-size: 0.78rem !important;







    }







    .project-card-actions .btn-card-action {







        font-size: 0.74rem !important;







        padding: 0.3rem 0.5rem !important;







    }







    .project-card-actions .btn-card-demo {







        font-size: 0.7rem !important;







        padding: 0.3rem 0.55rem !important;







    }







    .stats-grid {







        gap: 0.45rem;







        width: 100%;







    }







    .stat-card {







        padding: 0.85rem 0.3rem;







    }







    .stat-num {







        font-size: 1.4rem;







    }







    .stat-label {







        font-size: 0.66rem;







    }







    /* Skills Section 360px */







    .constellation-visual {







        height: 260px;







        max-width: 260px;







        margin: 0 auto 1rem;







    }







    .sat-ring-inner {







        width: 130px;







        height: 130px;







    }







    .sat-ring-inner .skill-satellite {







        width: 32px;







        height: 32px;







        margin: -16px 0 0 -16px;







        font-size: 0.8rem;







        transform: rotate(var(--angle)) translate(65px) rotate(calc(-1 * var(--angle)));







    }







    .sat-ring-outer {







        width: 190px;







        height: 190px;







    }







    .sat-ring-outer .skill-satellite {







        width: 36px;







        height: 36px;







        margin: -18px 0 0 -18px;







        font-size: 0.88rem;







        transform: rotate(var(--angle)) translate(95px) rotate(calc(-1 * var(--angle)));







    }







    .skill-core {







        width: 58px;







        height: 58px;







    }







    .core-title {







        font-size: 0.65rem;







        letter-spacing: 1px;







    }







    .core-sub {







        font-size: 0.5rem;







        letter-spacing: 2px;







    }







    .node-detail-card {







        width: min(250px, 90%);







        padding: 1rem 0.75rem;







    }







    .skill-tab-btn {







        padding: 0.45rem 0.75rem;







        font-size: 0.78rem;







        min-height: 38px;







    }







    .skill-chip {







        padding: 0.4rem 0.65rem;







        font-size: 0.76rem;







    }







    .experience-timeline {







        padding-left: 1.2rem;







    }







    .timeline-dot {







        left: -24px;







        width: 8px;







        height: 8px;







        top: 21px;







    }







    .timeline-content {







        padding: 1rem 0.75rem;







    }







}















/* ----------------------------------------------------







   PERFORMANCE OVERRIDES (transform + opacity only)







   Replace generic `transition: all` with explicit,







   hardware-accelerated property lists.







   ---------------------------------------------------- */







.btn,







.icon-btn,







.kbd-btn,







.nav-cta-btn,







.social-icon-link,







.search-box,







.filter-btn,







.skill-tab-btn,







.skill-chip,







.satellite-tooltip,







.tech-badge,







.connect-social-card,







.contact-info-item {







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),







                opacity 0.5s ease,







                color var(--transition-smooth),







                border-color var(--transition-smooth),







                background-color var(--transition-smooth);







}







.skill-satellite {







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),







                opacity 0.5s ease,







                color 0.2s ease,







                border-color 0.2s ease;







}







.btn-card-action i {







    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;







}















.dashboard-breakdown { display: grid; gap: .55rem; margin: 1.25rem 0 1.5rem; }







.dashboard-breakdown details { border: 1px solid var(--border-color); border-radius: 10px; background: rgba(var(--color-primary-rgb), .035); transition: border-color var(--transition-fast); }







.dashboard-breakdown details[open] { border-color: rgba(var(--color-primary-rgb), .3); }







.dashboard-breakdown summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: .8rem .95rem; color: var(--text-primary); cursor: pointer; font-family: var(--font-heading); font-size: .9rem; font-weight: 700; list-style: none; }







.dashboard-breakdown summary::-webkit-details-marker { display: none; }







.dashboard-breakdown summary i { color: var(--color-primary); font-size: .7rem; transition: transform var(--transition-fast); margin-left: auto; }







.dashboard-breakdown details[open] summary i { transform: rotate(180deg); }







.dashboard-breakdown details p { padding: 0 .95rem .85rem; color: var(--text-secondary); font-size: .78rem; line-height: 1.55; }















/* Student Dashboard Embedded Showcase inside Details */







.badge-accent-tag {







    display: inline-block;







    padding: 0.15rem 0.5rem;







    background: rgba(var(--color-primary-rgb), 0.15);







    border: 1px solid rgba(var(--color-primary-rgb), 0.35);







    border-radius: 999px;







    color: var(--color-primary);







    font-size: 0.68rem;







    font-weight: 700;







    text-transform: uppercase;







    letter-spacing: 0.4px;







}















.dashboard-details-body {







    padding: 0.2rem 0.95rem 1rem;







}















.details-intro-text {







    padding: 0 0 0.85rem !important;







    color: var(--text-secondary);







    font-size: 0.82rem !important;







    line-height: 1.6;







}















.student-dashboards-embed-grid {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));







    gap: 1rem;







    margin-bottom: 1rem;







}















.dash-embed-card {







    background: #040814;







    border: 1.5px solid rgba(var(--color-primary-rgb), 0.45);







    border-radius: 14px;







    overflow: hidden;







    display: flex;







    flex-direction: column;







    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(var(--color-primary-rgb), 0.08);







    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);







}















.dash-embed-card:hover {







    border-color: var(--color-primary);







    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(var(--color-primary-rgb), 0.25);







    transform: translateY(-3px);







}















.dash-embed-header {







    display: flex;







    flex-direction: column;







    gap: 0.35rem;







    padding: 0.85rem 1rem;







    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);







    border-bottom: 1px solid rgba(255, 255, 255, 0.08);







}















.dash-embed-header-top {







    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: 0.5rem;







}















.dash-embed-badge {







    font-family: var(--font-heading);







    font-size: 0.75rem;







    font-weight: 800;







    color: var(--color-primary);







    display: inline-flex;







    align-items: center;







    gap: 0.35rem;







    padding: 0.2rem 0.55rem;







    background: rgba(var(--color-primary-rgb), 0.12);







    border: 1px solid rgba(var(--color-primary-rgb), 0.3);







    border-radius: 6px;







    letter-spacing: 0.3px;







    text-transform: uppercase;







}















.dash-embed-badge.badge-purple {







    color: #c084fc;







    background: rgba(168, 85, 247, 0.12);







    border-color: rgba(168, 85, 247, 0.3);







}















.dash-embed-meta {







    font-size: 0.7rem;







    color: var(--text-muted);







    font-weight: 500;







}















.dash-card-title {







    font-family: var(--font-heading);







    font-size: 0.95rem;







    font-weight: 700;







    color: #fff;







    margin: 0;







    line-height: 1.35;







}















.dash-embed-img-wrap {







    position: relative;







    background: #0b1437;







    overflow: hidden;







    cursor: pointer;







    aspect-ratio: 2640 / 1486;







    border-top: 1px solid rgba(255, 255, 255, 0.06);







    border-bottom: 1px solid rgba(255, 255, 255, 0.06);







}















.dash-embed-img {







    width: 100%;







    height: 100%;







    object-fit: contain;







    background: #0b1437;







    display: block;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







    transition: filter 0.3s ease;







}















.dash-embed-img-wrap:hover .dash-embed-img {







    filter: brightness(1.08);







}















.dash-embed-overlay {







    position: absolute;







    inset: 0;







    background: rgba(0, 0, 0, 0.4);







    display: flex;







    align-items: center;







    justify-content: center;







    opacity: 0;







    transition: opacity 0.25s ease;







    backdrop-filter: blur(2px);







    -webkit-backdrop-filter: blur(2px);







}















.dash-embed-img-wrap:hover .dash-embed-overlay {







    opacity: 1;







}















.dash-overlay-badge {







    display: inline-flex;







    align-items: center;







    gap: 0.5rem;







    padding: 0.55rem 1.1rem;







    border-radius: 999px;







    background: rgba(0, 0, 0, 0.85);







    border: 1.5px solid var(--color-primary);







    color: #fff;







    font-size: 0.8rem;







    font-weight: 700;







    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.4);







    transform: scale(0.9);







    transition: transform 0.25s ease;







}















.dash-embed-img-wrap:hover .dash-overlay-badge {







    transform: scale(1);







}















.dash-embed-footer {







    padding: 0.85rem 1rem;







    background: rgba(255, 255, 255, 0.015);







    display: flex;







    flex-direction: column;







    gap: 0.75rem;







}















.dash-footer-desc {







    padding: 0 !important;







    font-size: 0.76rem !important;







    color: var(--text-secondary) !important;







    line-height: 1.5;







}















.dash-card-btn-row {







    display: flex;







    align-items: center;







    gap: 0.6rem;







    flex-wrap: wrap;







}















.dash-action-btn {







    display: inline-flex;







    align-items: center;







    gap: 0.45rem;







    padding: 0.45rem 0.85rem;







    border-radius: 8px;







    font-size: 0.78rem;







    font-weight: 700;







    cursor: pointer;







    transition: all 0.2s ease;







    border: none;







}















.dash-action-btn.btn-fs {







    background: rgba(var(--color-primary-rgb), 0.12);







    border: 1px solid rgba(var(--color-primary-rgb), 0.35);







    color: var(--color-primary);







}















.dash-action-btn.btn-fs:hover {







    background: var(--color-primary);







    color: #000;







    box-shadow: 0 0 14px rgba(var(--color-primary-rgb), 0.4);







    transform: translateY(-1px);







}















.dash-action-btn.btn-goto {







    background: rgba(255, 255, 255, 0.05);







    border: 1px solid rgba(255, 255, 255, 0.12);







    color: var(--text-primary);







}















.dash-action-btn.btn-goto:hover {







    background: rgba(255, 255, 255, 0.12);







    border-color: rgba(255, 255, 255, 0.25);







    transform: translateY(-1px);







}















.details-demo-action-bar {







    display: flex;







    align-items: center;







    gap: 0.75rem;







    padding-top: 0.85rem;







    border-top: 1px solid rgba(255, 255, 255, 0.08);







    flex-wrap: wrap;







}















/* ----------------------------------------------------







   FULLSCREEN DASHBOARD LIGHTBOX STYLES







   ---------------------------------------------------- */







.dash-lightbox-backdrop {







    position: fixed;







    inset: 0;







    width: 100vw;







    height: 100vh;







    background: rgba(2, 4, 10, 0.96);







    backdrop-filter: blur(16px);







    -webkit-backdrop-filter: blur(16px);







    z-index: 100000;







    display: none;







    flex-direction: column;







    justify-content: space-between;







    opacity: 0;







    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);







    user-select: none;







}















.dash-lightbox-backdrop.active {







    display: flex;







    opacity: 1;







}















.dash-lightbox-toolbar {







    display: flex;







    align-items: center;







    justify-content: space-between;







    padding: 1rem 1.75rem;







    background: rgba(5, 8, 16, 0.85);







    border-bottom: 1px solid rgba(255, 255, 255, 0.08);







    gap: 1rem;







    flex-wrap: wrap;







}















.dash-lightbox-info {







    display: flex;







    flex-direction: column;







    gap: 0.25rem;







}















.dash-lightbox-tag {







    font-size: 0.72rem;







    font-weight: 700;







    color: var(--color-primary);







    text-transform: uppercase;







    letter-spacing: 0.6px;







    display: inline-flex;







    align-items: center;







    gap: 0.35rem;







}















.dash-lightbox-title {







    font-family: var(--font-heading);







    font-size: 1.15rem;







    font-weight: 800;







    color: #fff;







    margin: 0;







}















.dash-lightbox-controls {







    display: flex;







    align-items: center;







    gap: 0.6rem;







}















.dash-tool-btn {







    display: inline-flex;







    align-items: center;







    gap: 0.45rem;







    padding: 0.5rem 0.95rem;







    background: rgba(255, 255, 255, 0.06);







    border: 1px solid rgba(255, 255, 255, 0.12);







    border-radius: 8px;







    color: #fff;







    font-size: 0.82rem;







    font-weight: 600;







    text-decoration: none;







    cursor: pointer;







    transition: all 0.2s ease;







}















.dash-tool-btn:hover {







    background: rgba(var(--color-primary-rgb), 0.15);







    border-color: var(--color-primary);







    color: var(--color-primary);







}















.dash-tool-btn.dash-lightbox-close {







    width: 38px;







    height: 38px;







    padding: 0;







    border-radius: 50%;







    justify-content: center;







    font-size: 1rem;







    background: rgba(255, 255, 255, 0.08);







}















.dash-tool-btn.dash-lightbox-close:hover {







    background: #ef4444;







    border-color: #ef4444;







    color: #fff;







}















/* Lightbox Stage & Navigation Arrows */







.dash-lightbox-stage {







    position: relative;







    flex: 1 1 auto;







    min-height: 0;







    display: flex;







    align-items: center;







    justify-content: center;







    padding: 0.5rem 3.5rem;







    overflow: hidden;







    box-sizing: border-box;







}















.dash-nav-arrow {







    position: absolute;







    top: 50%;







    transform: translateY(-50%);







    width: 48px;







    height: 48px;







    border-radius: 50%;







    background: rgba(10, 15, 28, 0.9);







    border: 1.5px solid rgba(var(--color-primary-rgb), 0.5);







    color: #fff;







    font-size: 1.2rem;







    display: flex;







    align-items: center;







    justify-content: center;







    cursor: pointer;







    z-index: 20;







    transition: all 0.25s ease;







    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);







}















.dash-nav-arrow:hover {







    background: var(--color-primary);







    color: #000;







    border-color: var(--color-primary);







    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.6);







    transform: translateY(-50%) scale(1.1);







}















.dash-prev { left: 1rem; }







.dash-next { right: 1rem; }















.dash-lightbox-canvas {







    max-width: 100%;







    max-height: 100%;







    display: flex;







    align-items: center;







    justify-content: center;







    border: 2px solid rgba(var(--color-primary-rgb), 0.6);







    border-radius: 12px;







    overflow: hidden;







    background: #0b1437;







    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(var(--color-primary-rgb), 0.2);







    cursor: zoom-in;







    transition: box-shadow 0.3s ease;







    box-sizing: border-box;







}















.dash-lightbox-stage.is-zoomed {







    overflow: auto;







    align-items: flex-start;







}















.dash-lightbox-canvas.zoomed {







    max-width: none;







    max-height: none;







    cursor: zoom-out;







    margin: auto;







    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 50px rgba(var(--color-primary-rgb), 0.3);







}















.dash-lightbox-canvas.zoomed .dash-lightbox-img {







    max-width: none;







    max-height: none;







    width: 95vw;







    height: auto;







}















.dash-lightbox-img {







    max-width: 100%;







    max-height: calc(100vh - 170px);







    width: auto;







    height: auto;







    object-fit: contain;







    display: block;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







    transition: opacity 0.2s ease;







}















/* Lightbox Bottom Switcher & Hints */







.dash-lightbox-bottombar {







    display: flex;







    align-items: center;







    justify-content: space-between;







    padding: 0.85rem 1.75rem;







    background: rgba(5, 8, 16, 0.9);







    border-top: 1px solid rgba(255, 255, 255, 0.08);







    gap: 1rem;







    flex-wrap: wrap;







}















.dash-lightbox-switcher {







    display: flex;







    align-items: center;







    gap: 0.75rem;







}















.dash-thumb-btn {







    display: flex;







    align-items: center;







    gap: 0.6rem;







    padding: 0.35rem 0.75rem 0.35rem 0.35rem;







    background: rgba(255, 255, 255, 0.04);







    border: 1.5px solid rgba(255, 255, 255, 0.1);







    border-radius: 8px;







    cursor: pointer;







    transition: all 0.2s ease;







    text-align: left;







}















.dash-thumb-btn img {







    width: 48px;







    height: 30px;







    object-fit: cover;







    border-radius: 4px;







    display: block;







}















.dash-thumb-btn .thumb-info {







    display: flex;







    flex-direction: column;







}















.dash-thumb-btn .thumb-info strong {







    font-size: 0.75rem;







    color: #fff;







    line-height: 1.2;







}















.dash-thumb-btn .thumb-info span {







    font-size: 0.65rem;







    color: var(--text-muted);







}















.dash-thumb-btn:hover {







    border-color: rgba(var(--color-primary-rgb), 0.4);







    background: rgba(var(--color-primary-rgb), 0.08);







}















.dash-thumb-btn.active {







    border-color: var(--color-primary);







    background: rgba(var(--color-primary-rgb), 0.15);







    box-shadow: 0 0 14px rgba(var(--color-primary-rgb), 0.25);







}















.dash-thumb-btn.active .thumb-info strong {







    color: var(--color-primary);







}















.dash-lightbox-hint {







    font-size: 0.72rem;







    color: var(--text-muted);







}















/* ----------------------------------------------------







   PORTFOLIO ASSISTANT







   ---------------------------------------------------- */







.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; }







.portfolio-chatbot { position: fixed; right: 2rem; bottom: 2rem; z-index: 9000; font-family: var(--font-body); }







.portfolio-chatbot-launcher { position: relative; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border: 1px solid rgba(var(--color-primary-rgb), .45); border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 28px rgba(var(--color-primary-rgb), .22); cursor: pointer; font-size: 1.15rem; animation: chatbotFloat 4s ease-in-out infinite; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }







.portfolio-chatbot-launcher:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, .4), 0 0 36px rgba(var(--color-primary-rgb), .3); background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); }







.portfolio-chatbot-launcher:active { transform: scale(0.95); }







.chatbot-launcher-pulse { position: absolute; inset: -5px; border: 1px solid rgba(var(--color-primary-rgb), .28); border-radius: inherit; animation: chatbotPulse 2.8s ease-out infinite; pointer-events: none; }







.portfolio-chatbot-panel { position: absolute; right: 0; bottom: 5rem; display: flex; flex-direction: column; width: min(420px, calc(100vw - 2rem)); height: min(680px, calc(100vh - 7rem)); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; background: linear-gradient(155deg, rgba(14, 17, 25, .97), rgba(5, 7, 12, .97)); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 35px rgba(var(--color-primary-rgb), .07); transform-origin: bottom right; animation: chatbotPanelIn .25s var(--ease-spring) both; }







.portfolio-chatbot-panel[hidden] { display: none !important; }







.portfolio-chatbot-header { position: relative; display: block; padding: 1.15rem 1.2rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .08), transparent 65%); }







.chatbot-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; padding-right: 8.75rem; }







.chatbot-brand-mark { display: grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(var(--color-primary-rgb), .35); border-radius: 10px; color: var(--color-primary); background: rgba(var(--color-primary-rgb), .09); font-family: var(--font-heading); font-size: .72rem; font-weight: 800; letter-spacing: .08em; box-shadow: inset 0 0 14px rgba(var(--color-primary-rgb), .05); }







.chatbot-brand-copy { min-width: 0; }







.chatbot-eyebrow { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; color: var(--color-primary); font-size: .62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }







.chatbot-status-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 10px rgba(var(--color-accent-rgb), .7); }







.portfolio-chatbot-header h2 { max-width: 15rem; font-family: var(--font-heading); font-size: 1.22rem; line-height: 1.16; letter-spacing: -.01em; }







.portfolio-chatbot-header p { max-width: 14rem; margin-top: .3rem; color: var(--text-secondary); font-size: .7rem; line-height: 1.4; }







.portfolio-chatbot-actions { position: absolute; top: 1.15rem; right: 1.2rem; display: flex; align-items: flex-start; gap: .3rem; }







.chatbot-recruiter-action { display: inline-flex; align-items: center; gap: .28rem; min-height: 2rem; padding: 0 .48rem; border: 1px solid rgba(var(--color-primary-rgb), .3); border-radius: 999px; color: var(--color-primary); background: rgba(var(--color-primary-rgb), .05); cursor: pointer; font-size: .58rem; font-weight: 700; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }







.chatbot-recruiter-action:hover, .chatbot-recruiter-action:focus-visible { color: var(--text-primary); border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), .14); }







.chatbot-icon-button { align-self: flex-start; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-secondary); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }







.chatbot-icon-button:hover, .chatbot-icon-button:focus-visible { color: var(--text-primary); border-color: var(--color-primary); transform: translateY(-1px); }







.portfolio-chatbot-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 1.1rem 1.1rem 1.5rem; scrollbar-width: thin; }







.chatbot-message { display: flex; margin-bottom: .75rem; animation: chatbotMessageIn .35s var(--ease-spring) both; will-change: transform, opacity; }







.chatbot-message.user { justify-content: flex-end; }







.chatbot-bubble { max-width: 88%; padding: .72rem .85rem; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px 12px 12px 4px; color: var(--text-secondary); background: rgba(255, 255, 255, .045); font-size: .8rem; line-height: 1.55; white-space: pre-line; }







.chatbot-message.user .chatbot-bubble { border-color: rgba(var(--color-primary-rgb), .28); border-radius: 14px 14px 4px 14px; color: #fff; background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .2), rgba(var(--color-secondary-rgb), .2)); }







.chatbot-suggestions { margin-top: .8rem; }







.chatbot-welcome { max-width: 100%; padding: .2rem 0 .4rem; border: 0; background: transparent; }







.chatbot-welcome h3 { color: var(--text-primary); font-family: var(--font-heading); font-size: 1.08rem; line-height: 1.25; }







.chatbot-welcome p { max-width: 18rem; margin-top: .35rem; color: var(--text-secondary); font-size: .78rem; line-height: 1.55; }







.chatbot-welcome span { display: block; margin-top: .8rem; color: var(--text-primary); font-family: var(--font-heading); font-size: .72rem; font-weight: 700; }







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







.chatbot-primary-action { display: flex; align-items: flex-start; gap: .65rem; min-height: 4.55rem; padding: .75rem; border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-secondary); background: rgba(255, 255, 255, .025); cursor: pointer; text-align: left; transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); }







.chatbot-primary-action i { display: grid; place-items: center; flex: 0 0 1.7rem; width: 1.7rem; height: 1.7rem; border-radius: 7px; color: var(--color-primary); background: rgba(var(--color-primary-rgb), .1); font-size: .75rem; }







.chatbot-primary-action span { display: grid; gap: .22rem; min-width: 0; }







.chatbot-primary-action strong { color: var(--text-primary); font-family: var(--font-heading); font-size: .76rem; line-height: 1.15; }







.chatbot-primary-action small { color: var(--text-muted); font-size: .62rem; line-height: 1.3; }







.chatbot-primary-action:hover, .chatbot-primary-action:focus-visible { border-color: rgba(var(--color-primary-rgb), .45); background: rgba(var(--color-primary-rgb), .07); box-shadow: 0 5px 18px rgba(0, 0, 0, .16); transform: translateY(-2px); }







.chatbot-secondary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border-color); }







.chatbot-secondary-actions > span { flex-basis: 100%; margin-bottom: .1rem; color: var(--text-muted); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }







.chatbot-secondary-action { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem 0; color: var(--text-secondary); cursor: pointer; font-size: .68rem; transition: color var(--transition-fast), transform var(--transition-fast); }







.chatbot-secondary-action i { color: var(--color-primary); font-size: .65rem; }







.chatbot-secondary-action:hover, .chatbot-secondary-action:focus-visible { color: var(--text-primary); transform: translateY(-1px); }







.chatbot-suggestion, .chatbot-project-action { padding: .45rem .65rem; border: 1px solid rgba(var(--color-primary-rgb), .25); border-radius: 999px; color: var(--text-secondary); background: rgba(var(--color-primary-rgb), .05); cursor: pointer; font-size: .7rem; line-height: 1.2; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }







.chatbot-suggestion:hover, .chatbot-suggestion:focus-visible, .chatbot-project-action:hover, .chatbot-project-action:focus-visible { color: var(--text-primary); border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), .14); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), .15); }







.chatbot-project-card { margin-top: .75rem; padding: .8rem; border: 1px solid var(--border-color); border-radius: 10px; background: rgba(0, 0, 0, .12); }







.chatbot-project-card strong { display: block; color: var(--text-primary); font-family: var(--font-heading); font-size: .84rem; }







.chatbot-project-card span { display: block; margin: .18rem 0 .55rem; color: var(--text-muted); font-size: .7rem; }







.portfolio-chatbot-composer { flex-shrink: 0; padding: .85rem 1.1rem 1.1rem; border-top: 1px solid rgba(255, 255, 255, .09); background: rgba(3, 5, 9, .72); }







.portfolio-chatbot-form { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; padding: .32rem .32rem .32rem .85rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .045); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }







.portfolio-chatbot-form:focus-within { border-color: rgba(var(--color-primary-rgb), .55); background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .07); }







.portfolio-chatbot-form input { min-width: 0; flex: 1; color: var(--text-primary); font-size: .78rem; }







.portfolio-chatbot-form input::placeholder { color: var(--text-muted); }







.chatbot-send-button { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: var(--color-primary); cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast); }







.chatbot-send-button:hover, .chatbot-send-button:focus-visible { background: var(--color-secondary); transform: translateY(-1px); }







.chatbot-typing { display: inline-flex; gap: .22rem; align-items: center; }







.chatbot-typing i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--color-primary); animation: chatbotTyping 1s ease-in-out infinite; }







.chatbot-typing i:nth-child(2) { animation-delay: .12s; }.chatbot-typing i:nth-child(3) { animation-delay: .24s; }







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







@keyframes chatbotPulse { 0% { opacity: .7; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.22); } }







@keyframes chatbotPanelIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }







@keyframes chatbotMessageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }







@keyframes chatbotTyping { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }







@media (max-width: 600px) { .portfolio-chatbot { right: 1rem; bottom: 1rem; }.portfolio-chatbot-panel { position: fixed; inset: .75rem; bottom: .75rem; width: auto; height: auto; max-height: none; border-radius: 16px; transform-origin: bottom center; }.portfolio-chatbot-launcher { width: 3.4rem; height: 3.4rem; }.portfolio-chatbot-header { padding: 1rem; }.chatbot-brand { padding-right: 7.5rem; }.chatbot-brand-mark { flex-basis: 2.25rem; width: 2.25rem; height: 2.25rem; }.portfolio-chatbot-header h2 { max-width: 13rem; font-size: 1.08rem; }.portfolio-chatbot-header p { max-width: 12rem; margin-top: .35rem; }.portfolio-chatbot-actions { top: 1rem; right: 1rem; }.chatbot-recruiter-action { min-width: 2rem; padding: 0 .42rem; font-size: 0; }.chatbot-recruiter-action i { font-size: .72rem; }.chatbot-primary-grid { grid-template-columns: 1fr; }.chatbot-primary-action { min-height: 3.75rem; }.chatbot-welcome p { max-width: 16rem; } }







@media (prefers-reduced-motion: reduce) { .portfolio-chatbot-launcher, .chatbot-launcher-pulse, .portfolio-chatbot-panel, .chatbot-message, .chatbot-typing i { animation: none; } }















/* ============================================================







   PREMIUM CHATBOT ENHANCEMENTS







   ============================================================ */















/* --- Message Layout & Typography --- */







.chatbot-message {







    display: flex;







    margin-bottom: 1.1rem;







    animation: chatbotMessageInUser 350ms var(--ease-spring) both;







    will-change: transform, opacity;







}















.chatbot-message.assistant {







    animation: chatbotMessageInAssistant 400ms var(--ease-spring) both;







}















.chatbot-message.user {







    justify-content: flex-end;







}















.chatbot-bubble {







    max-width: 82%;







    padding: 0.95rem 1.1rem;







    border: 1px solid rgba(255, 255, 255, 0.08);







    border-radius: 18px 18px 18px 4px;







    color: var(--text-secondary);







    background: rgba(255, 255, 255, 0.035);







    font-size: 0.875rem;







    line-height: 1.7;







    white-space: pre-wrap;







    word-wrap: break-word;







    backdrop-filter: blur(16px);







    -webkit-backdrop-filter: blur(16px);







    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.02);







    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);







    overflow: hidden;







}















.chatbot-bubble-text {







    display: inline-block;







    opacity: 1;







    transform: translateY(0);







    transition: opacity 0.18s ease, transform 0.18s ease;







    will-change: opacity, transform;







}















.chatbot-message.user .chatbot-bubble {







    border-color: rgba(var(--color-primary-rgb), 0.22);







    border-radius: 18px 18px 4px 18px;







    color: #ffffff;







    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.18), rgba(var(--color-secondary-rgb), 0.16));







    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(var(--color-primary-rgb), 0.08);







}















.chatbot-bubble:hover {







    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);







}















.chatbot-message.user .chatbot-bubble:hover {







    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(var(--color-primary-rgb), 0.12);







}















/* --- Typography Hierarchy --- */







.chatbot-bubble h1,







.chatbot-bubble h2,







.chatbot-bubble h3,







.chatbot-bubble h4 {







    color: var(--text-primary);







    font-family: var(--font-heading);







    font-weight: 700;







    line-height: 1.3;







    margin: 0.75rem 0 0.4rem;







}















.chatbot-bubble h1 { font-size: 1.15rem; }







.chatbot-bubble h2 { font-size: 1.05rem; }







.chatbot-bubble h3 { font-size: 0.95rem; }







.chatbot-bubble h4 { font-size: 0.875rem; }















.chatbot-bubble p {







    margin: 0.55rem 0;







    color: inherit;







}















.chatbot-bubble p:first-child { margin-top: 0; }







.chatbot-bubble p:last-child { margin-bottom: 0; }















.chatbot-bubble strong,







.chatbot-bubble b {







    color: var(--text-primary);







    font-weight: 600;







}















.chatbot-bubble em,







.chatbot-bubble i {







    font-style: italic;







    opacity: 0.9;







}















.chatbot-bubble code {







    font-family: 'JetBrains Mono', 'Fira Code', monospace;







    font-size: 0.8em;







    padding: 0.15em 0.4em;







    background: rgba(0, 0, 0, 0.3);







    border-radius: 4px;







    color: var(--color-accent);







}















.chatbot-bubble pre {







    margin: 0.75rem 0;







    padding: 1rem;







    background: rgba(0, 0, 0, 0.4);







    border: 1px solid var(--border-color);







    border-radius: 12px;







    overflow-x: auto;







    font-family: 'JetBrains Mono', 'Fira Code', monospace;







    font-size: 0.75rem;







    line-height: 1.6;







}















.chatbot-bubble pre code {







    padding: 0;







    background: transparent;







    color: inherit;







}















.chatbot-bubble ul,







.chatbot-bubble ol {







    margin: 0.6rem 0 0.6rem 1.5rem;







    padding-left: 0.5rem;







}















.chatbot-bubble li {







    margin: 0.35rem 0;







    line-height: 1.6;







}















.chatbot-bubble ul li::marker {







    color: var(--color-primary);







}















.chatbot-bubble ol li::marker {







    color: var(--color-secondary);







    font-weight: 600;







}















.chatbot-bubble a {







    color: var(--color-primary);







    text-decoration: none;







    border-bottom: 1px solid transparent;







    transition: border-color var(--transition-fast), color var(--transition-fast);







}















.chatbot-bubble a:hover {







    color: var(--color-secondary);







    border-bottom-color: var(--color-secondary);







}















.chatbot-bubble mark {







    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.25), rgba(var(--color-secondary-rgb), 0.2));







    padding: 0.05em 0.25em;







    border-radius: 3px;







    color: var(--text-primary);







}















/* --- Assistant Identity --- */







.chatbot-assistant-identity {







    max-width: 100%;







    padding: 0.5rem 0 0.75rem;







    border: 0;







    background: transparent;







}















.chatbot-assistant-identity .chatbot-identity-dot {







    width: 8px;







    height: 8px;







    border-radius: 50%;







    background: var(--color-primary);







    flex-shrink: 0;







    margin-right: 0.5rem;







    animation: pulse 2s ease-in-out infinite;







}















.chatbot-assistant-identity .chatbot-identity-text {







    color: var(--text-secondary);







    font-family: var(--font-heading);







    font-size: 0.875rem;







    font-weight: 600;







    letter-spacing: 0.5px;







}















@keyframes pulse {







    0%, 100% { opacity: 1; }







    50% { opacity: 0.5; }







}















/* --- Welcome Message Reveal Animation --- */







.chatbot-welcome {







    max-width: 100%;







    padding: 0.5rem 0 0.75rem;







    border: 0;







    background: transparent;







}















.chatbot-welcome > * {







    opacity: 0;







    transform: translateY(12px);







    animation: chatbotWelcomeReveal 550ms var(--ease-spring) both;







}















.chatbot-welcome > *:nth-child(1) { animation-delay: 100ms; }







.chatbot-welcome > *:nth-child(2) { animation-delay: 220ms; }







.chatbot-welcome > *:nth-child(3) { animation-delay: 340ms; }















.chatbot-welcome h3 {







    color: var(--text-primary);







    font-family: var(--font-heading);







    font-size: 1.15rem;







    line-height: 1.3;







    font-weight: 700;







}















.chatbot-welcome h3 .highlight {







    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);







    -webkit-background-clip: text;







    -webkit-text-fill-color: transparent;







    background-clip: text;







}















.chatbot-welcome p {







    max-width: 22rem;







    margin-top: 0.5rem;







    color: var(--text-secondary);







    font-size: 0.85rem;







    line-height: 1.65;







}















.chatbot-welcome span {







    display: block;







    margin-top: 1rem;







    color: var(--text-primary);







    font-family: var(--font-heading);







    font-size: 0.78rem;







    font-weight: 700;







    letter-spacing: 0.3px;







}















@keyframes chatbotWelcomeReveal {







    from { opacity: 0; transform: translateY(14px); }







    to { opacity: 1; transform: translateY(0); }







}















/* --- Streaming Text Cursor --- */







.chatbot-bubble .streaming-cursor {







    display: inline-block;







    width: 0.12em;







    height: 1.05em;







    margin-left: 0.18rem;







    vertical-align: text-bottom;







    border-radius: 0.12em;







    background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 1), rgba(var(--color-secondary-rgb), 1));







    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.5);







    animation: chatbotCursorBlink 1s ease-in-out infinite;







    opacity: 0.95;







}















@keyframes chatbotCursorBlink {







    0%, 100% { opacity: 1; }







    50% { opacity: 0; }







}















/* --- Typing Indicator --- */







.chatbot-typing {







    display: inline-flex;







    gap: 4px;







    align-items: center;







    padding: 0.25rem 0.5rem;







}















.chatbot-typing i {







    width: 7px;







    height: 7px;







    border-radius: 50%;







    background: var(--color-primary);







    animation: chatbotTypingPremium 1.4s ease-in-out infinite;







    box-shadow: 0 0 8px var(--color-primary);







}















.chatbot-typing i:nth-child(2) { animation-delay: 0.15s; }







.chatbot-typing i:nth-child(3) { animation-delay: 0.3s; }















@keyframes chatbotTypingPremium {







    0%, 80%, 100% {







        opacity: 0.35;







        transform: translateY(0) scale(0.9);







    }







    40% {







        opacity: 1;







        transform: translateY(-4px) scale(1.1);







    }







}















/* --- Suggestion Chips (Pill-shaped, Glassmorphism) --- */







.chatbot-suggestion,







.chatbot-project-action,







.chatbot-secondary-action,







.chatbot-primary-action {







    border-radius: 999px;







    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);







}















.chatbot-suggestion {







    display: inline-flex;







    align-items: center;







    gap: 0.45rem;







    padding: 0.55rem 1rem;







    border: 1px solid rgba(var(--color-primary-rgb), 0.22);







    color: var(--text-secondary);







    background: rgba(var(--color-primary-rgb), 0.04);







    backdrop-filter: blur(10px);







    -webkit-backdrop-filter: blur(10px);







    cursor: pointer;







    font-size: 0.78rem;







    font-weight: 500;







    line-height: 1.2;







    white-space: nowrap;







}















.chatbot-suggestion:hover,







.chatbot-suggestion:focus-visible {







    color: var(--text-primary);







    border-color: var(--color-primary);







    background: rgba(var(--color-primary-rgb), 0.12);







    transform: translateY(-2px);







    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.15);







}















.chatbot-suggestion:active {







    transform: translateY(0) scale(0.98);







    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), .15);







}















.chatbot-project-action:active {







    transform: translateY(0) scale(0.98);







    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), .15);







}















.chatbot-suggestion i {







    color: var(--color-primary);







    font-size: 0.7rem;







    opacity: 0.8;







}















/* --- Primary Action Cards --- */







.chatbot-primary-grid {







    display: grid;







    grid-template-columns: repeat(2, minmax(0, 1fr));







    gap: 0.65rem;







}















.chatbot-primary-action {







    display: flex;







    flex-direction: column;







    align-items: flex-start;







    gap: 0.55rem;







    min-height: 100px;







    padding: 1rem;







    border: 1px solid var(--border-color);







    border-radius: 14px;







    color: var(--text-secondary);







    background: rgba(255, 255, 255, 0.02);







    cursor: pointer;







    text-align: left;







    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);







}















.chatbot-primary-action i {







    display: grid;







    place-items: center;







    flex: 0 0 2rem;







    width: 2rem;







    height: 2rem;







    border-radius: 8px;







    color: var(--color-primary);







    background: rgba(var(--color-primary-rgb), 0.1);







    font-size: 0.85rem;







}















.chatbot-primary-action span {







    display: grid;







    gap: 0.25rem;







    min-width: 0;







}















.chatbot-primary-action strong {







    color: var(--text-primary);







    font-family: var(--font-heading);







    font-size: 0.82rem;







    line-height: 1.2;







}















.chatbot-primary-action small {







    color: var(--text-muted);







    font-size: 0.65rem;







    line-height: 1.35;







}















.chatbot-primary-action:hover,







.chatbot-primary-action:focus-visible {







    border-color: rgba(var(--color-primary-rgb), 0.45);







    background: rgba(var(--color-primary-rgb), 0.06);







    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);







    transform: translateY(-3px);







}















/* --- Secondary Actions --- */







.chatbot-secondary-actions {







    display: flex;







    flex-wrap: wrap;







    align-items: center;







    gap: 0.35rem 0.85rem;







    margin-top: 1rem;







    padding-top: 0.85rem;







    border-top: 1px solid var(--border-color);







}















.chatbot-secondary-actions > span {







    flex-basis: 100%;







    margin-bottom: 0.15rem;







    color: var(--text-muted);







    font-size: 0.62rem;







    font-weight: 700;







    letter-spacing: 0.06em;







    text-transform: uppercase;







}















.chatbot-secondary-action {







    display: inline-flex;







    align-items: center;







    gap: 0.4rem;







    padding: 0.35rem 0.65rem;







    border: 1px solid rgba(var(--color-primary-rgb), 0.18);







    border-radius: 999px;







    color: var(--text-secondary);







    background: rgba(var(--color-primary-rgb), 0.03);







    backdrop-filter: blur(8px);







    -webkit-backdrop-filter: blur(8px);







    cursor: pointer;







    font-size: 0.72rem;







    font-weight: 500;







    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);







}















.chatbot-secondary-action i {







    color: var(--color-primary);







    font-size: 0.65rem;







}















.chatbot-secondary-action:hover,







.chatbot-secondary-action:focus-visible {







    color: var(--text-primary);







    border-color: var(--color-primary);







    background: rgba(var(--color-primary-rgb), 0.1);







    transform: translateY(-2px);







}















/* --- Project Card in Chat --- */







.chatbot-project-card {







    margin-top: 0.85rem;







    padding: 1rem;







    border: 1px solid var(--border-color);







    border-radius: 12px;







    background: rgba(0, 0, 0, 0.15);







    backdrop-filter: blur(8px);







    -webkit-backdrop-filter: blur(8px);







    animation: chatbotProjectCardIn 300ms var(--ease-spring) 100ms both;







}















@keyframes chatbotProjectCardIn {







    from { opacity: 0; transform: translateY(8px); }







    to { opacity: 1; transform: translateY(0); }







}















.chatbot-project-card strong {







    display: block;







    color: var(--text-primary);







    font-family: var(--font-heading);







    font-size: 0.9rem;







    margin-bottom: 0.25rem;







}















.chatbot-project-card span {







    display: block;







    margin: 0.2rem 0 0.65rem;







    color: var(--text-muted);







    font-size: 0.75rem;







    line-height: 1.5;







}















.chatbot-project-action {







    display: inline-flex;







    align-items: center;







    gap: 0.4rem;







    padding: 0.5rem 0.95rem;







    border: 1px solid rgba(var(--color-primary-rgb), 0.25);







    border-radius: 999px;







    color: var(--text-secondary);







    background: rgba(var(--color-primary-rgb), 0.05);







    backdrop-filter: blur(10px);







    -webkit-backdrop-filter: blur(10px);







    cursor: pointer;







    font-size: 0.72rem;







    font-weight: 600;







    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);







}















.chatbot-project-action:hover,







.chatbot-project-action:focus-visible {







    color: var(--text-primary);







    border-color: var(--color-primary);







    background: rgba(var(--color-primary-rgb), 0.14);







    transform: translateY(-2px);







    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.15);







}















/* --- Input Area --- */







.portfolio-chatbot-composer {







    flex-shrink: 0;







    padding: 0.85rem 1rem 1rem;







    border-top: 1px solid rgba(255, 255, 255, 0.07);







    background: linear-gradient(180deg, rgba(3, 5, 9, 0.6) 0%, rgba(3, 5, 9, 0.92) 100%);







    backdrop-filter: blur(16px);







    -webkit-backdrop-filter: blur(16px);







}















.portfolio-chatbot-form {







    display: flex;







    align-items: center;







    gap: 0.55rem;







    padding: 0.4rem 0.4rem 0.4rem 1rem;







    border: 1px solid rgba(255, 255, 255, 0.1);







    border-radius: 14px;







    background: rgba(255, 255, 255, 0.035);







    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);







}















.portfolio-chatbot-form:focus-within {







    border-color: rgba(var(--color-primary-rgb), 0.5);







    background: rgba(255, 255, 255, 0.05);







    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.06), inset 0 0 20px rgba(var(--color-primary-rgb), 0.03);







}















.portfolio-chatbot-form input {







    min-width: 0;







    flex: 1;







    color: var(--text-primary);







    font-size: 0.85rem;







    line-height: 1.5;







    padding: 0.35rem 0;







    border: none;







    outline: none;







    box-shadow: none;







    background: transparent;







}















.portfolio-chatbot-form input:focus,







.portfolio-chatbot-form input:focus-visible {







    border: none;







    outline: none;







    box-shadow: none;







}















.portfolio-chatbot-form input::placeholder {







    color: var(--text-muted);







}















.chatbot-send-button {







    display: grid;







    place-items: center;







    flex-shrink: 0;







    width: 2.25rem;







    height: 2.25rem;







    border-radius: 50%;







    color: #fff;







    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));







    cursor: pointer;







    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);







    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.3);







}















.chatbot-send-button:hover:not(:disabled),







.chatbot-send-button:focus-visible:not(:disabled) {







    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));







    transform: translateY(-2px) scale(1.05);







    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.45);







}















.chatbot-send-button:active:not(:disabled) {







    transform: translateY(0) scale(0.98);







}















.chatbot-send-button:disabled {







    opacity: 0.4;







    cursor: not-allowed;







    transform: none;







    box-shadow: none;







}















.chatbot-send-button i {







    transition: transform var(--transition-fast);







}















.chatbot-send-button:hover:not(:disabled) i {







    transform: translate(2px, -2px);







}















/* --- Message Entrance Animations --- */







@keyframes chatbotMessageInUser {







    from {







        opacity: 0;







        transform: translateX(24px) scale(0.96);







    }







    to {







        opacity: 1;







        transform: translateX(0) scale(1);







    }







}















@keyframes chatbotMessageInAssistant {







    from {







        opacity: 0;







        transform: translateY(8px) scale(0.96);







    }







    to {







        opacity: 1;







        transform: translateY(0) scale(1);







    }







}















/* --- Suggestions Container Layout --- */







.portfolio-chatbot-suggestions {







    display: flex;







    flex-wrap: wrap;







    gap: 0.45rem;







    margin-bottom: 0.55rem;







}















.chatbot-suggestion-list {







    display: flex;







    flex-wrap: wrap;







    gap: 0.4rem;







    margin-top: 0.8rem;







    padding-top: 0.6rem;







    border-top: 1px solid rgba(255, 255, 255, 0.09);







}















.chatbot-suggestion-list .chatbot-suggestion {







    flex: 0 0 auto;







    white-space: nowrap;







}















.chatbot-suggestion-list .chatbot-suggestion:hover {







    transform: translateY(-1px);







}















/* --- Responsive Adjustments --- */







@media (max-width: 480px) {







    .chatbot-bubble {







        max-width: 90%;







        padding: 0.85rem 0.95rem;







        font-size: 0.85rem;







    }







    







    .chatbot-primary-grid {







        grid-template-columns: 1fr;







    }







    







    .chatbot-primary-action {







        min-height: auto;







        flex-direction: row;







        align-items: center;







        padding: 0.85rem;







    }







    







    .chatbot-suggestion {







        padding: 0.4rem 0.7rem;







        font-size: 0.7rem;







        white-space: nowrap;







    }







    







    .chatbot-secondary-action {







        padding: 0.3rem 0.55rem;







        font-size: 0.7rem;







    }







    







    .portfolio-chatbot-panel {







        border-radius: 16px;







        inset: 0.5rem;







    }







    







    .portfolio-chatbot-form {







        padding: 0.35rem 0.35rem 0.35rem 0.85rem;







        border-radius: 12px;







    }







    







    .chatbot-send-button {







        width: 2rem;







        height: 2rem;







    }







}















@media (max-width: 600px) {







    .portfolio-chatbot { right: 1rem; bottom: 1rem; }







    .portfolio-chatbot-panel {







        position: fixed;







        inset: 0.75rem;







        bottom: 0.75rem;







        width: auto;







        height: auto;







        max-height: none;







        border-radius: 16px;







        transform-origin: bottom center;







    }







    .portfolio-chatbot-launcher { width: 3.4rem; height: 3.4rem; }







    .portfolio-chatbot-header { padding: 1rem; }







    .chatbot-brand { padding-right: 7.5rem; }







    .chatbot-brand-mark { flex-basis: 2.25rem; width: 2.25rem; height: 2.25rem; }







    .portfolio-chatbot-header h2 { max-width: 13rem; font-size: 1.08rem; }







    .portfolio-chatbot-header p { max-width: 12rem; margin-top: 0.35rem; }







    .portfolio-chatbot-actions { top: 1rem; right: 1rem; }







    .chatbot-recruiter-action { min-width: 2rem; padding: 0 0.42rem; font-size: 0; }







    .chatbot-recruiter-action i { font-size: 0.72rem; }







    .chatbot-primary-grid { grid-template-columns: 1fr; }







    .chatbot-primary-action { min-height: 3.75rem; }







    .chatbot-welcome p { max-width: 16rem; }







}















@media (prefers-reduced-motion: reduce) {







    .portfolio-chatbot-launcher,







    .chatbot-launcher-pulse,







    .portfolio-chatbot-panel,







    .chatbot-message,







    .chatbot-typing i,







    .chatbot-welcome > *,







    .chatbot-project-card,







    .chatbot-send-button,







    .chatbot-suggestion,







    .chatbot-primary-action,







    .chatbot-secondary-action,







    .chatbot-project-action {







        animation: none !important;







        transition-duration: 0.01ms !important;







    }







    







    .chatbot-bubble .streaming-cursor {







        animation: none;







        opacity: 1;







    }







}















/* --- Focus Visible Styles --- */







.chatbot-suggestion:focus-visible,







.chatbot-secondary-action:focus-visible,







.chatbot-primary-action:focus-visible,







.chatbot-project-action:focus-visible,







.chatbot-send-button:focus-visible,







.chatbot-icon-button:focus-visible,







.chatbot-recruiter-action:focus-visible {







    outline: none;







    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.35);







}















/* --- Scrollbar Styling for Messages --- */







.portfolio-chatbot-messages {







    scrollbar-width: thin;







    scrollbar-color: rgba(var(--color-primary-rgb), 0.3) transparent;







}















.portfolio-chatbot-messages::-webkit-scrollbar {







    width: 6px;







}















.portfolio-chatbot-messages::-webkit-scrollbar-track {







    background: transparent;







}















.portfolio-chatbot-messages::-webkit-scrollbar-thumb {







    background: rgba(var(--color-primary-rgb), 0.35);







    border-radius: 3px;







}















.portfolio-chatbot-messages::-webkit-scrollbar-thumb:hover {







    background: rgba(var(--color-primary-rgb), 0.55);







}















/* --- Loading State for Suggestions --- */







.portfolio-chatbot-suggestions.loading {







    opacity: 0.5;







    pointer-events: none;







}















.portfolio-chatbot-suggestions.loading::after {







    content: '';







    display: inline-block;







    width: 16px;







    height: 16px;







    margin-left: 0.75rem;







    border: 2px solid rgba(var(--color-primary-rgb), 0.25);







    border-top-color: var(--color-primary);







    border-radius: 50%;







    animation: chatbotSpin 0.8s linear infinite;







}















@keyframes chatbotSpin {







    to { transform: rotate(360deg); }







}















/* ----------------------------------------------------







   STUDENT ANALYTICS DASHBOARD DEMO MODAL STYLES







   ---------------------------------------------------- */







.project-card-actions {







    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: 0.75rem;







    margin-top: 1rem;







    padding-top: 0.75rem;







    border-top: 1px solid rgba(255, 255, 255, 0.06);







    flex-wrap: wrap;







}















.btn-card-demo {







    display: inline-flex;







    align-items: center;







    gap: 0.45rem;







    padding: 0.45rem 0.9rem !important;







    font-size: 0.8rem !important;







    font-weight: 700;







    color: var(--color-primary) !important;







    background: rgba(var(--color-primary-rgb), 0.08);







    border: 1px solid rgba(var(--color-primary-rgb), 0.35);







    border-radius: 999px;







    cursor: pointer;







    transition: all 0.25s ease;







}















.btn-card-demo:hover {







    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.25), rgba(var(--color-secondary-rgb), 0.25));







    border-color: var(--color-primary);







    color: #fff !important;







    box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.35);







    transform: translateY(-2px);







}















.btn-card-demo i {







    color: var(--color-primary);







    transition: transform 0.25s ease;







}















.btn-card-demo:hover i {







    transform: scale(1.15) rotate(10deg);







}















/* Student demo modal specific sizing */







.modal.student-demo-modal {







    max-width: 1100px;







    width: 95%;







    max-height: 92vh;







    padding: 2rem 2.2rem;







    background: linear-gradient(165deg, rgba(13, 17, 28, 0.98), rgba(7, 10, 18, 0.99));







    border: 1px solid rgba(var(--color-primary-rgb), 0.25);







    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7), 0 0 45px rgba(var(--color-primary-rgb), 0.12);







}















.modal-header-meta {







    display: flex;







    align-items: center;







    gap: 0.8rem;







    margin-bottom: 0.4rem;







    flex-wrap: wrap;







}















.demo-live-badge {







    display: inline-flex;







    align-items: center;







    gap: 0.4rem;







    padding: 0.2rem 0.65rem;







    background: rgba(16, 185, 129, 0.12);







    border: 1px solid rgba(16, 185, 129, 0.35);







    border-radius: 999px;







    color: #10b981;







    font-size: 0.72rem;







    font-weight: 700;







    text-transform: uppercase;







    letter-spacing: 0.5px;







}















.demo-pulse-dot {







    width: 7px;







    height: 7px;







    border-radius: 50%;







    background: #10b981;







    box-shadow: 0 0 8px #10b981;







    animation: livePulse 1.8s infinite;







}















@keyframes livePulse {







    0%, 100% { opacity: 1; transform: scale(1); }







    50% { opacity: 0.4; transform: scale(0.85); }







}















.modal-subtitle-text {







    color: var(--text-secondary);







    font-size: 0.95rem;







    margin-top: -0.4rem;







    margin-bottom: 0.85rem;







    line-height: 1.5;







}















/* View switcher control bar */







.demo-view-controls {







    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: 1rem;







    margin-bottom: 1.25rem;







    padding: 0.5rem;







    background: rgba(255, 255, 255, 0.025);







    border: 1px solid rgba(255, 255, 255, 0.07);







    border-radius: 14px;







    flex-wrap: wrap;







}















.demo-tab-group {







    display: flex;







    gap: 0.5rem;







    flex-wrap: wrap;







}















.demo-tab-btn {







    display: inline-flex;







    align-items: center;







    gap: 0.55rem;







    padding: 0.6rem 1.1rem;







    background: rgba(255, 255, 255, 0.04);







    border: 1px solid rgba(255, 255, 255, 0.08);







    border-radius: 10px;







    color: var(--text-secondary);







    font-family: var(--font-heading);







    font-size: 0.85rem;







    font-weight: 700;







    cursor: pointer;







    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);







}















.demo-tab-btn .tab-chip {







    padding: 0.15rem 0.45rem;







    background: rgba(255, 255, 255, 0.08);







    border-radius: 6px;







    font-size: 0.68rem;







    color: var(--text-muted);







}















.demo-tab-btn:hover {







    color: #fff;







    border-color: rgba(var(--color-primary-rgb), 0.4);







    background: rgba(var(--color-primary-rgb), 0.08);







}















.demo-tab-btn.active {







    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.2), rgba(var(--color-secondary-rgb), 0.15));







    border-color: var(--color-primary);







    color: #fff;







    box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.15);







}















.demo-tab-btn.active .tab-chip {







    background: rgba(var(--color-primary-rgb), 0.25);







    color: var(--color-primary);







    font-weight: 800;







}















.demo-actions-right {







    margin-left: auto;







}















.btn-demo-action {







    display: inline-flex;







    align-items: center;







    gap: 0.4rem;







    padding: 0.55rem 1rem;







    background: rgba(255, 255, 255, 0.04);







    border: 1px solid rgba(255, 255, 255, 0.1);







    border-radius: 10px;







    color: var(--text-secondary);







    font-size: 0.8rem;







    font-weight: 600;







    text-decoration: none;







    transition: all 0.2s ease;







}















.btn-demo-action:hover {







    color: var(--color-primary);







    border-color: var(--color-primary);







    background: rgba(var(--color-primary-rgb), 0.08);







}















/* Showcase Container & Interactive Display */







.demo-showcase-container {







    position: relative;







    border-radius: 14px;







    overflow: hidden;







    background: #0b1437;







    border: 1.5px solid rgba(var(--color-primary-rgb), 0.35);







    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55), 0 0 25px rgba(var(--color-primary-rgb), 0.15);







    margin-bottom: 1.5rem;







}















.demo-display-panel {







    display: none;







    width: 100%;







    animation: fadeInPanel 0.35s ease;







}















.demo-display-panel.active {







    display: block;







}















@keyframes fadeInPanel {







    from { opacity: 0; transform: scale(0.99); }







    to { opacity: 1; transform: scale(1); }







}















.dashboard-img-wrapper {







    position: relative;







    width: 100%;







    display: flex;







    align-items: center;







    justify-content: center;







    background: #0b1437;







    cursor: pointer;







    overflow: hidden;







}















.dashboard-preview-img {







    width: 100%;







    height: auto;







    display: block;







    object-fit: contain;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







    transition: filter 0.3s ease;







}















.dashboard-img-wrapper:hover .dashboard-preview-img {







    filter: brightness(1.03);







}















.dashboard-img-toolbar {







    position: relative;







    padding: 0.85rem 1.25rem;







    background: rgba(11, 20, 55, 0.95);







    border-top: 1px solid rgba(var(--color-primary-rgb), 0.25);







    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: 1rem;







    flex-wrap: wrap;







}















.dashboard-view-tag {







    font-size: 0.8rem;







    color: #e2e8f0;







    font-weight: 600;







    display: inline-flex;







    align-items: center;







    gap: 0.5rem;







}















.dashboard-view-tag i {







    color: var(--color-primary);







}















.dashboard-zoom-btn {







    display: inline-flex;







    align-items: center;







    gap: 0.4rem;







    font-size: 0.75rem;







    font-weight: 700;







    color: var(--color-primary);







    text-decoration: none;







    padding: 0.35rem 0.75rem;







    border-radius: 6px;







    background: rgba(var(--color-primary-rgb), 0.12);







    border: 1px solid rgba(var(--color-primary-rgb), 0.3);







    transition: all 0.2s ease;







}















.dashboard-zoom-btn:hover {







    background: var(--color-primary);







    color: #000;







}















/* KPI quick metrics strip */







.dashboard-kpi-strip {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));







    gap: 1rem;







    margin-bottom: 1.5rem;







}















.demo-kpi-card {







    display: flex;







    align-items: center;







    gap: 0.9rem;







    padding: 0.9rem 1.1rem;







    background: rgba(255, 255, 255, 0.03);







    border: 1px solid rgba(255, 255, 255, 0.08);







    border-radius: 12px;







    transition: transform 0.25s ease, border-color 0.25s ease;







}















.demo-kpi-card:hover {







    transform: translateY(-2px);







    border-color: rgba(var(--color-primary-rgb), 0.4);







    background: rgba(255, 255, 255, 0.05);







}















.kpi-icon-wrap {







    width: 42px;







    height: 42px;







    border-radius: 10px;







    display: flex;







    align-items: center;







    justify-content: center;







    font-size: 1.15rem;







    flex-shrink: 0;







}















.kpi-rev { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }







.kpi-stu { background: rgba(20, 184, 166, 0.15); color: #2dd4bf; border: 1px solid rgba(20, 184, 166, 0.3); }







.kpi-cert { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }







.kpi-fee { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }















.kpi-info {







    display: flex;







    flex-direction: column;







}















.kpi-num {







    font-family: var(--font-heading);







    font-size: 1.35rem;







    font-weight: 800;







    color: #fff;







    line-height: 1.15;







}















.kpi-lbl {







    font-size: 0.72rem;







    color: var(--text-secondary);







    display: flex;







    align-items: center;







    gap: 0.4rem;







}















.kpi-trend {







    font-size: 0.68rem;







    font-weight: 700;







}















.kpi-trend.up {







    color: #10b981;







}















/* Insights grid */







.demo-insights-grid {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));







    gap: 1rem;







    margin-top: 1.25rem;







}















.insight-tile {







    padding: 1.1rem;







    background: rgba(255, 255, 255, 0.025);







    border: 1px solid rgba(255, 255, 255, 0.07);







    border-radius: 12px;







    display: flex;







    flex-direction: column;







}















.insight-header {







    display: flex;







    align-items: center;







    gap: 0.5rem;







    margin-bottom: 0.5rem;







}















.insight-header i {







    color: var(--color-primary);







    font-size: 0.9rem;







}















.insight-header h5 {







    font-family: var(--font-heading);







    font-size: 0.88rem;







    font-weight: 700;







    color: var(--text-primary);







    margin: 0;







}















.insight-highlight {







    font-size: 0.8rem;







    color: var(--color-primary);







    margin-bottom: 0.35rem;







    font-weight: 600;







}















.insight-desc {







    font-size: 0.75rem;







    color: var(--text-muted);







    line-height: 1.5;







    margin: 0;







}















@media (max-width: 768px) {







    .modal.student-demo-modal,







    .modal.spotify-demo-modal,







    .modal.bigmart-demo-modal,







    .modal.zendimind-modal {







        padding: 1.5rem 1rem;







    }







    .demo-view-controls {







        flex-direction: column;







        align-items: stretch;







    }







    .demo-actions-right {







        margin-left: 0;







    }







    .demo-tab-btn {







        flex: 1;







        justify-content: center;







    }







    .dashboard-kpi-strip {







        grid-template-columns: 1fr 1fr;







    }







    .demo-insights-grid {







        grid-template-columns: 1fr;







    }







}















/* ----------------------------------------------------







   SPOTIFY MUSIC INTELLIGENCE DASHBOARD DEMO STYLES







   ---------------------------------------------------- */







.btn-spotify-demo {







    color: #1db954 !important;







    background: rgba(29, 185, 84, 0.1) !important;







    border-color: rgba(29, 185, 84, 0.35) !important;







}















.btn-spotify-demo:hover {







    background: linear-gradient(135deg, rgba(29, 185, 84, 0.3), rgba(16, 185, 129, 0.3)) !important;







    border-color: #1db954 !important;







    color: #fff !important;







    box-shadow: 0 0 16px rgba(29, 185, 84, 0.4) !important;







}















.btn-spotify-demo i {







    color: #1db954 !important;







}















.btn-spotify-demo:hover i {







    color: #fff !important;







}















.badge-spotify-tag {







    background: rgba(29, 185, 84, 0.15) !important;







    color: #1db954 !important;







    border: 1px solid rgba(29, 185, 84, 0.35) !important;







}















.badge-spotify {







    background: rgba(29, 185, 84, 0.15) !important;







    color: #1db954 !important;







    border: 1px solid rgba(29, 185, 84, 0.35) !important;







}















.spotify-card-border {







    border-color: rgba(29, 185, 84, 0.25) !important;







}















.spotify-card-border:hover {







    border-color: rgba(29, 185, 84, 0.5) !important;







    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(29, 185, 84, 0.15) !important;







}















.badge-spotify-overlay {







    border-color: rgba(29, 185, 84, 0.5) !important;







    background: rgba(10, 16, 22, 0.85) !important;







    color: #1db954 !important;







}















.btn-spotify-goto {







    background: rgba(29, 185, 84, 0.12) !important;







    color: #1db954 !important;







    border-color: rgba(29, 185, 84, 0.35) !important;







}















.btn-spotify-goto:hover {







    background: #1db954 !important;







    border-color: #1db954 !important;







    color: #000 !important;







    box-shadow: 0 0 18px rgba(29, 185, 84, 0.5) !important;







}















.single-embed-grid {







    grid-template-columns: 1fr !important;







}















/* Spotify Demo Modal Sizing & Accents */







.modal.spotify-demo-modal {







    max-width: 1100px;







    width: 95%;







    max-height: 92vh;







    padding: 2rem 2.2rem;







    background: linear-gradient(165deg, rgba(8, 14, 20, 0.98), rgba(4, 8, 12, 0.99));







    border: 1px solid rgba(29, 185, 84, 0.3);







    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 45px rgba(29, 185, 84, 0.15);







}















.spotify-meta-tag {







    background: rgba(29, 185, 84, 0.15);







    color: #1db954;







    border: 1px solid rgba(29, 185, 84, 0.35);







}















.badge-spotify-live {







    color: #1db954;







    border-color: rgba(29, 185, 84, 0.4);







    background: rgba(29, 185, 84, 0.12);







}















.dot-spotify {







    background: #1db954;







    box-shadow: 0 0 8px #1db954;







}















.tech-spotify {







    background: rgba(29, 185, 84, 0.12);







    color: #1db954;







    border-color: rgba(29, 185, 84, 0.3);







}















.spotify-mode-pill {







    display: inline-flex;







    align-items: center;







    gap: 0.5rem;







    padding: 0.5rem 1.1rem;







    border-radius: 999px;







    background: rgba(29, 185, 84, 0.12);







    border: 1px solid rgba(29, 185, 84, 0.35);







    color: #1db954;







    font-family: var(--font-heading);







    font-size: 0.85rem;







    font-weight: 700;







}















.btn-spotify-action {







    display: inline-flex;







    align-items: center;







    gap: 0.45rem;







    padding: 0.55rem 1rem;







    background: rgba(29, 185, 84, 0.12);







    border: 1px solid rgba(29, 185, 84, 0.35);







    border-radius: 10px;







    color: #1db954;







    font-size: 0.8rem;







    font-weight: 700;







    text-decoration: none;







    cursor: pointer;







    transition: all 0.2s ease;







}















.btn-spotify-action:hover {







    background: #1db954;







    color: #000;







    border-color: #1db954;







    box-shadow: 0 0 16px rgba(29, 185, 84, 0.45);







}















.spotify-showcase-box {







    border-color: rgba(29, 185, 84, 0.35);







    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(29, 185, 84, 0.15);







    background: #0c1219;







}















.spotify-img-toolbar {







    background: rgba(10, 16, 22, 0.98);







    border-top: 1px solid rgba(29, 185, 84, 0.25);







}















.spotify-zoom-btn {







    color: #1db954;







    background: rgba(29, 185, 84, 0.12);







    border-color: rgba(29, 185, 84, 0.35);







}















.spotify-zoom-btn:hover {







    background: #1db954;







    color: #000;







    box-shadow: 0 0 16px rgba(29, 185, 84, 0.5);







}















/* Spotify KPI Cards */







.spotify-kpi-card:hover {







    border-color: rgba(29, 185, 84, 0.45);







}















.kpi-tracks { background: rgba(29, 185, 84, 0.15); color: #1db954; border: 1px solid rgba(29, 185, 84, 0.3); }







.kpi-pop { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }







.kpi-artists { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }







.kpi-explicit { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }















/* ----------------------------------------------------







   BIGMART SALES ANALYSIS DASHBOARD DEMO STYLES







   ---------------------------------------------------- */







.btn-bigmart-demo {







    color: #f59e0b !important;







    background: rgba(245, 158, 11, 0.1) !important;







    border-color: rgba(245, 158, 11, 0.35) !important;







}















.btn-bigmart-demo:hover {







    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(251, 191, 36, 0.3)) !important;







    border-color: #f59e0b !important;







    color: #fff !important;







    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4) !important;







}















.btn-bigmart-demo i {







    color: #f59e0b !important;







}















.btn-bigmart-demo:hover i {







    color: #fff !important;







}















.badge-bigmart-tag {







    background: rgba(245, 158, 11, 0.15) !important;







    color: #f59e0b !important;







    border: 1px solid rgba(245, 158, 11, 0.35) !important;







}















.badge-bigmart {







    background: rgba(245, 158, 11, 0.15) !important;







    color: #f59e0b !important;







    border: 1px solid rgba(245, 158, 11, 0.35) !important;







}















.bigmart-card-border {







    border-color: rgba(245, 158, 11, 0.25) !important;







}















.bigmart-card-border:hover {







    border-color: rgba(245, 158, 11, 0.5) !important;







    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(245, 158, 11, 0.15) !important;







}















.badge-bigmart-overlay {







    border-color: rgba(245, 158, 11, 0.5) !important;







    background: rgba(18, 14, 6, 0.85) !important;







    color: #f59e0b !important;







}















.btn-bigmart-goto {







    background: rgba(245, 158, 11, 0.12) !important;







    color: #f59e0b !important;







    border-color: rgba(245, 158, 11, 0.35) !important;







}















.btn-bigmart-goto:hover {







    background: #f59e0b !important;







    border-color: #f59e0b !important;







    color: #000 !important;







    box-shadow: 0 0 18px rgba(245, 158, 11, 0.5) !important;







}















/* BigMart Demo Modal Sizing & Accents */







.modal.bigmart-demo-modal {







    max-width: 1100px;







    width: 95%;







    max-height: 92vh;







    padding: 2rem 2.2rem;







    background: linear-gradient(165deg, rgba(18, 14, 6, 0.98), rgba(10, 8, 3, 0.99));







    border: 1px solid rgba(245, 158, 11, 0.3);







    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 45px rgba(245, 158, 11, 0.15);







}















.bigmart-meta-tag {







    background: rgba(245, 158, 11, 0.15);







    color: #f59e0b;







    border: 1px solid rgba(245, 158, 11, 0.35);







}















.badge-bigmart-live {







    color: #f59e0b;







    border-color: rgba(245, 158, 11, 0.4);







    background: rgba(245, 158, 11, 0.12);







}















.dot-bigmart {







    background: #f59e0b;







    box-shadow: 0 0 8px #f59e0b;







}















.tech-bigmart {







    background: rgba(245, 158, 11, 0.12);







    color: #f59e0b;







    border-color: rgba(245, 158, 11, 0.3);







}















.bigmart-mode-pill {







    display: inline-flex;







    align-items: center;







    gap: 0.5rem;







    padding: 0.5rem 1.1rem;







    border-radius: 999px;







    background: rgba(245, 158, 11, 0.12);







    border: 1px solid rgba(245, 158, 11, 0.35);







    color: #f59e0b;







    font-family: var(--font-heading);







    font-size: 0.85rem;







    font-weight: 700;







}















.btn-bigmart-action {







    display: inline-flex;







    align-items: center;







    gap: 0.45rem;







    padding: 0.55rem 1rem;







    background: rgba(245, 158, 11, 0.12);







    border: 1px solid rgba(245, 158, 11, 0.35);







    border-radius: 10px;







    color: #f59e0b;







    font-size: 0.8rem;







    font-weight: 700;







    text-decoration: none;







    cursor: pointer;







    transition: all 0.2s ease;







}















.btn-bigmart-action:hover {







    background: #f59e0b;







    color: #000;







    border-color: #f59e0b;







    box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);







}















.bigmart-showcase-box {







    border-color: rgba(245, 158, 11, 0.35);







    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(245, 158, 11, 0.15);







    background: #f6ff00;







}















.bigmart-img-toolbar {







    background: rgba(18, 14, 6, 0.98);







    border-top: 1px solid rgba(245, 158, 11, 0.25);







}















.bigmart-zoom-btn {







    color: #f59e0b;







    background: rgba(245, 158, 11, 0.12);







    border-color: rgba(245, 158, 11, 0.35);







}















.bigmart-zoom-btn:hover {







    background: #f59e0b;







    color: #000;







    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);







}















/* BigMart KPI Cards */







.bigmart-kpi-card:hover {







    border-color: rgba(245, 158, 11, 0.45);







}















.kpi-bigmart-items { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }







.kpi-bigmart-mrp { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }







.kpi-bigmart-vis { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }







.kpi-bigmart-sup { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }















/* ----------------------------------------------------







   ZENDIMIND AI PROJECT CARD & MODAL STYLES







   ---------------------------------------------------- */







.proj-zendimind-bg {







    background: radial-gradient(circle at 50% 30%, #1e1b4b 0%, #0f172a 60%, #030712 100%);







    position: relative;







    border-radius: 12px;







}















.zendimind-mock-content {







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







    gap: 0.85rem;







    z-index: 2;







    padding: 1rem;







    width: 100%;







}















.zendimind-robot-halo {







    position: relative;







    width: 72px;







    height: 72px;







    border-radius: 50%;







    display: flex;







    align-items: center;







    justify-content: center;







    background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(14, 165, 233, 0.1) 70%, transparent 100%);







    box-shadow: 0 0 25px rgba(99, 102, 241, 0.4), inset 0 0 15px rgba(14, 165, 233, 0.3);







    border: 1.5px solid rgba(99, 102, 241, 0.4);







    animation: robotFloat 3.5s ease-in-out infinite alternate;







}















@keyframes robotFloat {







    0% { transform: translateY(0px) scale(1); box-shadow: 0 0 20px rgba(99, 102, 241, 0.35); }







    100% { transform: translateY(-5px) scale(1.04); box-shadow: 0 0 32px rgba(14, 165, 233, 0.55); }







}















.zendimind-robot-avatar {







    width: 52px;







    height: 52px;







    object-fit: contain;







    border-radius: 50%;







    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));







}















.zendimind-mock-badges {







    display: flex;







    align-items: center;







    gap: 0.45rem;







    flex-wrap: wrap;







    justify-content: center;







}















.z-badge {







    display: inline-flex;







    align-items: center;







    gap: 0.35rem;







    padding: 0.22rem 0.6rem;







    font-size: 0.68rem;







    font-weight: 600;







    color: #e2e8f0;







    background: rgba(15, 23, 42, 0.85);







    border: 1px solid rgba(99, 102, 241, 0.3);







    border-radius: 999px;







    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);







    backdrop-filter: blur(8px);







}















.z-badge i {







    color: #38bdf8;







}















.z-badge.z-live {







    background: rgba(16, 185, 129, 0.15);







    border-color: rgba(16, 185, 129, 0.4);







    color: #34d399;







}















.z-badge.z-live i {







    color: #10b981;







    animation: livePulse 1.8s infinite;







}















/* Card Demo Button for ZendiMind */







.btn-zendimind-demo {







    color: #38bdf8 !important;







    background: rgba(14, 165, 233, 0.1) !important;







    border-color: rgba(14, 165, 233, 0.35) !important;







    text-decoration: none;







}















.btn-zendimind-demo:hover {







    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(99, 102, 241, 0.3)) !important;







    border-color: #38bdf8 !important;







    color: #fff !important;







    box-shadow: 0 0 16px rgba(14, 165, 233, 0.45) !important;







}















.btn-zendimind-demo i {







    color: #38bdf8 !important;







    transition: transform 0.25s ease;







}















.btn-zendimind-demo:hover i {







    transform: translateY(-2px) scale(1.1);







    color: #fff !important;







}















/* ZendiMind Modal Styles */







.modal.zendimind-modal {







    max-width: 1050px;







    width: 95%;







    max-height: 92vh;







    padding: 2.2rem;







    background: linear-gradient(165deg, rgba(15, 23, 42, 0.98), rgba(8, 12, 24, 0.99));







    border: 1px solid rgba(99, 102, 241, 0.3);







    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 45px rgba(99, 102, 241, 0.15);







}















.zendimind-tag {







    background: rgba(99, 102, 241, 0.15);







    color: #818cf8;







    border: 1px solid rgba(99, 102, 241, 0.35);







}















.badge-zendimind-live {







    color: #38bdf8;







    border-color: rgba(14, 165, 233, 0.4);







    background: rgba(14, 165, 233, 0.12);







}















.dot-zendimind {







    background: #38bdf8;







    box-shadow: 0 0 8px #38bdf8;







}















.tech-zendimind {







    background: rgba(99, 102, 241, 0.15);







    color: #a5b4fc;







    border-color: rgba(99, 102, 241, 0.35);







}















/* Live Action Bar */







.zendimind-live-action-bar {







    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: 1.25rem;







    padding: 1rem 1.4rem;







    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.08));







    border: 1.5px solid rgba(99, 102, 241, 0.35);







    border-radius: 14px;







    margin-bottom: 1.5rem;







    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);







    flex-wrap: wrap;







}















.live-action-info {







    display: flex;







    align-items: center;







    gap: 1rem;







}















.live-action-robot {







    width: 44px;







    height: 44px;







    border-radius: 50%;







    background: rgba(99, 102, 241, 0.2);







    padding: 4px;







    border: 1px solid rgba(99, 102, 241, 0.4);







    box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);







}















.live-action-info h4 {







    font-size: 0.98rem;







    font-weight: 700;







    color: #fff;







    margin: 0 0 0.15rem 0;







}















.live-action-info p {







    font-size: 0.8rem;







    color: var(--text-secondary);







    margin: 0;







}















.btn-launch-app {







    display: inline-flex;







    align-items: center;







    gap: 0.5rem;







    padding: 0.65rem 1.3rem;







    font-size: 0.85rem;







    font-weight: 700;







    text-decoration: none;







    border-radius: 10px;







    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.4);







    transition: all 0.25s ease;







}















.btn-launch-app:hover {







    transform: translateY(-2px);







    box-shadow: 0 0 28px rgba(var(--color-primary-rgb), 0.6);







}















/* Banner */







.proj-zendimind-banner {







    display: flex;







    align-items: center;







    gap: 1.75rem;







    padding: 2rem 2.2rem;







    border-radius: 16px;







    background: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.3) 0%, rgba(15, 23, 42, 0.95) 70%);







    border: 1px solid rgba(99, 102, 241, 0.35);







    box-shadow: inset 0 0 30px rgba(99, 102, 241, 0.2);







}















.banner-robot-container {







    flex-shrink: 0;







    width: 80px;







    height: 80px;







    border-radius: 50%;







    display: flex;







    align-items: center;







    justify-content: center;







    background: rgba(99, 102, 241, 0.2);







    border: 2px solid rgba(99, 102, 241, 0.5);







    box-shadow: 0 0 25px rgba(99, 102, 241, 0.4);







}















.banner-robot-img {







    width: 64px;







    height: 64px;







    object-fit: contain;







    border-radius: 50%;







}















.banner-text-wrap h3 {







    font-size: 1.6rem;







    font-weight: 800;







    color: #fff;







    margin: 0 0 0.3rem 0;







    font-family: var(--font-heading);







}















.banner-text-wrap p {







    font-size: 0.92rem;







    color: #cbd5e1;







    margin: 0 0 0.75rem 0;







}















.banner-link-pill {







    display: inline-flex;







    align-items: center;







    gap: 0.45rem;







    padding: 0.25rem 0.8rem;







    background: rgba(255, 255, 255, 0.08);







    border: 1px solid rgba(255, 255, 255, 0.15);







    border-radius: 999px;







    font-size: 0.75rem;







    font-family: monospace;







    color: #38bdf8;







}















/* ZendiMind Features Grid */







.zendimind-features-grid {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));







    gap: 1rem;







    margin-top: 1rem;







}















.feature-item-card {







    display: flex;







    align-items: flex-start;







    gap: 0.9rem;







    padding: 1rem;







    background: rgba(255, 255, 255, 0.03);







    border: 1px solid rgba(255, 255, 255, 0.08);







    border-radius: 12px;







    transition: transform 0.25s ease, border-color 0.25s ease;







}















.feature-item-card:hover {







    transform: translateY(-2px);







    border-color: rgba(99, 102, 241, 0.4);







    background: rgba(255, 255, 255, 0.05);







}















.feat-icon {







    width: 38px;







    height: 38px;







    border-radius: 10px;







    background: rgba(99, 102, 241, 0.15);







    border: 1px solid rgba(99, 102, 241, 0.3);







    color: #818cf8;







    display: flex;







    align-items: center;







    justify-content: center;







    font-size: 1rem;







    flex-shrink: 0;







}















.feat-content h5 {







    font-size: 0.88rem;







    font-weight: 700;







    color: #fff;







    margin: 0 0 0.35rem 0;







}















.feat-content p {







    font-size: 0.78rem;







    color: var(--text-secondary);







    line-height: 1.5;







    margin: 0;







}















/* ZendiMind Card Showcase Preview (Full uncropped image, perfectly adjusted length) */







.project-card-image.zendimind-showcase-preview-wrap {







    width: 100%;







    height: auto !important;







    aspect-ratio: 1636 / 929 !important;







    position: relative;







    overflow: hidden;







    background: #0d111b;







    display: flex;







    align-items: center;







    justify-content: center;







    cursor: pointer;







    border-bottom: 1px solid rgba(255, 255, 255, 0.08);







}















.zendimind-showcase-preview-img {







    width: 100%;







    height: 100%;







    object-fit: fill;







    display: block;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







    transition: filter 0.3s ease;







}















.project-card:hover .zendimind-showcase-preview-img {







    filter: brightness(1.05);







}















/* Power BI Card Multi-Dashboard Preview (prevdash.png - 2:1 aspect ratio) */







.project-card-image.powerbi-preview-wrap {







    width: 100%;







    height: auto !important;







    aspect-ratio: 1774 / 887 !important;







    position: relative;







    overflow: hidden;







    background: #0d131f;







    cursor: pointer;







    border-bottom: 1px solid rgba(255, 255, 255, 0.08);







    display: flex;







    align-items: center;







    justify-content: center;







}















.powerbi-preview-img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    object-position: center;







    display: block;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;







}















.project-card:hover .powerbi-preview-img {







    transform: scale(1.03);







    filter: brightness(1.06);







}















/* The Brand Touch Card Showcase Preview (Full uncropped image, 1672 / 940 aspect ratio) */







.project-card-image.brandtouch-preview-wrap {







    width: 100%;







    height: auto !important;







    aspect-ratio: 1672 / 940 !important;







    position: relative;







    overflow: hidden;







    background: #09090b;







    cursor: pointer;







    border-bottom: 1px solid rgba(255, 255, 255, 0.08);







    display: flex;







    align-items: center;







    justify-content: center;







}















.brandtouch-preview-img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    object-position: center;







    display: block;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;







}















.project-card:hover .brandtouch-preview-img {







    transform: scale(1.03);







    filter: brightness(1.06);







}















.brandtouch-showcase-container {







    width: 100%;







    border-radius: 16px;







    overflow: hidden;







    background: #050508;







    border: 1.5px solid rgba(212, 175, 55, 0.35);







    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.15);







    margin-bottom: 1.5rem;







}















.brandtouch-modal-showcase-img {







    width: 100%;







    height: auto;







    display: block;







    object-fit: contain;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







}















.brandtouch-showcase-bar {







    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: 1rem;







    padding: 0.9rem 1.4rem;







    background: rgba(13, 15, 23, 0.95);







    flex-wrap: wrap;







    border-top: 1px solid rgba(212, 175, 55, 0.2);







}















.brandtouch-bar-info {







    display: flex;







    align-items: center;







    gap: 0.75rem;







    flex-wrap: wrap;







}















.brandtouch-bar-badge {







    display: inline-flex;







    align-items: center;







    gap: 0.35rem;







    font-size: 0.75rem;







    font-weight: 700;







    color: #f7d58b;







    background: rgba(212, 175, 55, 0.15);







    border: 1px solid rgba(212, 175, 55, 0.35);







    padding: 0.2rem 0.65rem;







    border-radius: 50px;







    letter-spacing: 0.3px;







}















.brandtouch-bar-url {







    font-size: 0.8rem;







    color: var(--text-secondary);







    font-family: monospace;







}















.btn-brandtouch-demo {







    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(245, 230, 211, 0.15) 100%) !important;







    border-color: rgba(212, 175, 55, 0.5) !important;







    color: #f7d58b !important;







}















.btn-brandtouch-demo:hover {







    background: linear-gradient(135deg, #d4af37 0%, #f5e6d3 100%) !important;







    color: #0b0c10 !important;







    border-color: #d4af37 !important;







    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4) !important;







}















/* AuraFaz Perfume Hub Styling */







.project-card-image.aurafaz-preview-wrap {







    width: 100%;







    height: auto !important;







    aspect-ratio: 1774 / 887 !important;







    position: relative;







    overflow: hidden;







    background: #18141b;







    cursor: pointer;







    border-bottom: 1px solid rgba(255, 255, 255, 0.08);







    display: flex;







    align-items: center;







    justify-content: center;







}















.aurafaz-preview-img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    object-position: center;







    display: block;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;







}















.project-card:hover .aurafaz-preview-img {







    transform: scale(1.03);







    filter: brightness(1.06);







}















.btn-aurafaz-demo {







    background: linear-gradient(135deg, rgba(212, 165, 116, 0.25) 0%, rgba(245, 230, 211, 0.15) 100%) !important;







    border-color: rgba(212, 165, 116, 0.5) !important;







    color: #f5d7b5 !important;







}















.btn-aurafaz-demo:hover {







    background: linear-gradient(135deg, #d4a574 0%, #f5e6d3 100%) !important;







    color: #1a1510 !important;







    border-color: #d4a574 !important;







    box-shadow: 0 0 20px rgba(212, 165, 116, 0.4) !important;







}















.aurafaz-showcase-container {







    width: 100%;







    border-radius: 16px;







    overflow: hidden;







    background: #0e0d11;







    border: 1.5px solid rgba(212, 165, 116, 0.35);







    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 165, 116, 0.15);







    margin-bottom: 1.5rem;







}















.aurafaz-modal-showcase-img {







    width: 100%;







    height: auto;







    display: block;







    object-fit: contain;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







}















.aurafaz-showcase-bar {







    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: 1rem;







    padding: 0.9rem 1.4rem;







    background: rgba(18, 16, 22, 0.95);







    flex-wrap: wrap;







    border-top: 1px solid rgba(212, 165, 116, 0.2);







}















.aurafaz-bar-info {







    display: flex;







    align-items: center;







    gap: 0.75rem;







    flex-wrap: wrap;







}















.aurafaz-bar-badge {







    display: inline-flex;







    align-items: center;







    gap: 0.35rem;







    font-size: 0.75rem;







    font-weight: 700;







    color: #f5d7b5;







    background: rgba(212, 165, 116, 0.15);







    border: 1px solid rgba(212, 165, 116, 0.35);







    padding: 0.2rem 0.65rem;







    border-radius: 50px;







    letter-spacing: 0.3px;







}















.aurafaz-bar-url {







    font-size: 0.8rem;







    color: var(--text-secondary);







    font-family: monospace;







}















/* Smart Parking AI Dashboard Showcase Preview (2:1 aspect ratio, uncropped) */







.project-card-image.parking-preview-wrap {







    width: 100%;







    height: auto !important;







    aspect-ratio: 1774 / 887 !important;







    position: relative;







    overflow: hidden;







    background: #040914;







    cursor: pointer;







    border-bottom: 1px solid rgba(255, 255, 255, 0.08);







    display: flex;







    align-items: center;







    justify-content: center;







}















.parking-preview-img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    object-position: center;







    display: block;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;







}















.project-card:hover .parking-preview-img {







    transform: scale(1.03);







    filter: brightness(1.06);







}















.parking-showcase-container {







    width: 100%;







    border-radius: 16px;







    overflow: hidden;







    background: #040813;







    border: 1.5px solid rgba(56, 189, 248, 0.35);







    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.15);







    margin-bottom: 1.5rem;







}















.parking-modal-showcase-img {







    width: 100%;







    height: auto;







    display: block;







    object-fit: contain;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







}















/* Modal Showcase Container */







.zendimind-showcase-container {







    width: 100%;







    border-radius: 16px;







    overflow: hidden;







    background: #060913;







    border: 1.5px solid rgba(99, 102, 241, 0.35);







    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(99, 102, 241, 0.15);







    margin-bottom: 0.5rem;







}















.zendimind-modal-showcase-img {







    width: 100%;







    height: auto;







    display: block;







    object-fit: contain;







    border-bottom: 1px solid rgba(255, 255, 255, 0.08);







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







}















.zendimind-showcase-bar {







    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: 1rem;







    padding: 0.9rem 1.4rem;







    background: rgba(11, 16, 32, 0.95);







    flex-wrap: wrap;







}















.showcase-bar-left {







    display: flex;







    flex-direction: column;







    gap: 0.2rem;







}















.showcase-bar-title {







    font-size: 0.88rem;







    font-weight: 700;







    color: #fff;







    display: inline-flex;







    align-items: center;







    gap: 0.45rem;







}















.showcase-bar-title i {







    color: #38bdf8;







}















.showcase-bar-sub {







    font-size: 0.74rem;







    color: var(--text-secondary);







}















.showcase-bar-btn {







    display: inline-flex;







    align-items: center;







    gap: 0.4rem;







    padding: 0.45rem 0.95rem;







    background: rgba(99, 102, 241, 0.15);







    border: 1px solid rgba(99, 102, 241, 0.4);







    border-radius: 8px;







    color: #38bdf8;







    font-size: 0.78rem;







    font-weight: 700;







    text-decoration: none;







    transition: all 0.2s ease;







}















.showcase-bar-btn:hover {







    background: var(--color-primary);







    color: #000;







    border-color: var(--color-primary);







    box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.5);







}















/* ==========================================================================







   FURTHER CREATIVITY: SPECULAR GLASS SHINE & NEURAL SKILL CHIPS







   ========================================================================== */







.skill-icon-svg {







    display: inline-flex;







    align-items: center;







    justify-content: center;







    width: 20px;







    height: 20px;







    flex-shrink: 0;







    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;







}















.skill-icon-svg svg {







    width: 100%;







    height: 100%;







    display: block;







}















.skill-chip {







    position: relative;







    overflow: hidden;







    backdrop-filter: blur(8px);







    -webkit-backdrop-filter: blur(8px);







    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),







                border-color 0.35s ease,







                background-color 0.35s ease,







                box-shadow 0.35s ease;







}















/* Specular Light-Sweep Animation across chip on hover */







.skill-chip::before {







    content: '';







    position: absolute;







    top: 0;







    left: -120%;







    width: 60%;







    height: 100%;







    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.15), transparent);







    transform: skewX(-20deg);







    transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);







    pointer-events: none;







}















.skill-chip:hover::before {







    left: 150%;







}















.skill-chip:hover {







    transform: translateY(-3px) scale(1.02);







    border-color: rgba(56, 189, 248, 0.45) !important;







    background: rgba(20, 20, 34, 0.85) !important;







    box-shadow: 0 8px 24px -4px rgba(56, 189, 248, 0.22),







                0 0 14px rgba(56, 189, 248, 0.12),







                inset 0 1px 0 rgba(255, 255, 255, 0.08);







}















.skill-chip:hover .skill-icon-svg {







    transform: scale(1.18);







    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.75));







}















/* Profile Celestial Orbit Rings Luminescence */







.profile-orbit-ring {







    border: 1px solid rgba(56, 189, 248, 0.22) !important;







    box-shadow: 0 0 18px rgba(56, 189, 248, 0.08), inset 0 0 12px rgba(59, 130, 246, 0.05);







}























/* Next Gen Phoenix Education Platform Preview (2:1 aspect ratio, uncropped) */







.project-card-image.phoenix-preview-wrap {







    width: 100%;







    height: auto !important;







    aspect-ratio: 1774 / 887 !important;







    position: relative;







    overflow: hidden;







    background: #060b17;







    cursor: pointer;







    border-bottom: 1px solid rgba(255, 255, 255, 0.08);







    display: flex;







    align-items: center;







    justify-content: center;







}















.phoenix-preview-img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    object-position: center;







    display: block;







    image-rendering: -webkit-optimize-contrast;







    image-rendering: high-quality;







    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;







}















.project-card:hover .phoenix-preview-img {







    transform: scale(1.03);







    filter: brightness(1.06);







}















.phoenix-showcase-container {







    width: 100%;







    border-radius: 16px;







    overflow: hidden;







    background: #040813;







    border: 1.5px solid rgba(56, 189, 248, 0.35);







    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.15);







    margin-bottom: 1.5rem;







}















.phoenix-modal-showcase-img {







    width: 100%;







    height: auto;







    display: block;







    object-fit: contain;







    image-rendering: -webkit-optimize-contrast;







}























/* Smart Parking Live Demo Button & Showcase Styling */







.btn-parking-demo {







    background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(14, 165, 233, 0.12) 100%) !important;







    border-color: rgba(56, 189, 248, 0.55) !important;







    color: #38bdf8 !important;







    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;







}















.btn-parking-demo:hover {







    background: linear-gradient(135deg, rgba(56, 189, 248, 0.38) 0%, rgba(14, 165, 233, 0.22) 100%) !important;







    border-color: rgba(56, 189, 248, 0.85) !important;







    box-shadow: 0 0 20px rgba(56, 189, 248, 0.45) !important;







    color: #ffffff !important;







    transform: translateY(-2px);







}







/* ZingyByte AI Food Concierge Showcase & Preview Styling */



.project-card-image.zingybyte-preview-wrap {



    position: relative;



    width: 100%;



    overflow: hidden;



    cursor: pointer;



    background: #040813;



    border-bottom: 1px solid rgba(255, 255, 255, 0.08);



    display: flex;



    align-items: center;



    justify-content: center;



}







.zingybyte-preview-img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    object-position: center;



    display: block;



    image-rendering: -webkit-optimize-contrast;



    image-rendering: high-quality;



    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;



}







.project-card:hover .zingybyte-preview-img {



    transform: scale(1.03);



    filter: brightness(1.06);



}







.zingybyte-showcase-container {



    width: 100%;



    border-radius: 16px;



    overflow: hidden;



    background: #040813;



    border: 1.5px solid rgba(56, 189, 248, 0.35);



    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.15);



    margin-bottom: 1.5rem;



}







.zingybyte-modal-showcase-img {



    width: 100%;



    height: auto;



    display: block;



    object-fit: contain;



    image-rendering: -webkit-optimize-contrast;



}



/* ==========================================================================

   MOBILE LAYOUT & ALIGNMENT ENHANCEMENTS (Max-Width: 768px)

   ========================================================================== */

@media (max-width: 768px) {

    /* About Profile Section: Clean 1-Column Flow */

    .about-grid {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: 100% !important;

        gap: 1.5rem !important;

        box-sizing: border-box !important;

    }



    .about-narrative {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;

    }



    .about-highlights {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 1.25rem !important;

        box-sizing: border-box !important;

    }



    .narrative-card {

        width: 100% !important;

        box-sizing: border-box !important;

        padding: clamp(1.25rem, 4vw, 1.75rem) !important;

        margin: 0 !important;

    }



    .stats-grid {

        display: grid !important;

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 0.85rem !important;

        width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;

    }



    .stat-card {

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 1.25rem 0.75rem !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        align-items: center !important;

        text-align: center !important;

        min-height: 100px !important;

    }



    .stat-num {

        font-size: 2.1rem !important;

        font-weight: 800 !important;

        color: #38bdf8 !important;

        line-height: 1.1 !important;

    }



    .stat-label {

        font-size: 0.76rem !important;

        font-weight: 600 !important;

        text-transform: uppercase !important;

        letter-spacing: 0.8px !important;

        color: var(--text-secondary) !important;

        margin-top: 0.35rem !important;

    }



    .edu-highlights-card {

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 1.35rem 1.15rem !important;

        margin: 0 0 2rem 0 !important;

    }



    /* Neutralize horizontal slide transforms on mobile to prevent misalignment & clipping */

    html.js .reveal-left,

    html.js .reveal-right,

    .slide-academic,

    .slide-from-left,

    .slide-from-right {

        transform: translateY(16px) !important;

        opacity: 0.1;

    }



    html.js .reveal-left.active,

    html.js .reveal-left.is-visible,

    html.js .reveal-right.active,

    html.js .reveal-right.is-visible,

    .slide-academic.appear,

    .slide-from-left.appear,

    .slide-from-right.appear {

        transform: translateY(0) !important;

        opacity: 1 !important;

    }

}

/* Chatbot Robot Mascot Styling */
.portfolio-chatbot-launcher {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.95) 0%, rgba(8, 14, 26, 0.98) 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.55) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.35) !important;
    padding: 0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.portfolio-chatbot-launcher:hover {
    transform: scale(1.08) translateY(-2px) !important;
    border-color: rgba(56, 189, 248, 0.9) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 28px rgba(56, 189, 248, 0.5) !important;
}

.portfolio-chatbot-launcher:active {
    transform: scale(0.96) !important;
}

.chatbot-robot-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none !important;
    background: transparent !important;
    display: block !important;
    border-radius: 50% !important;
    transform: scale(1.06) !important;
}

.chatbot-brand-mark.chatbot-robot-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25) !important;
}

.chatbot-header-robot {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transform: scale(1.06) !important;
}

@media (max-width: 640px) {
    .portfolio-chatbot-launcher {
        bottom: 1.15rem !important;
        right: 1.15rem !important;
        width: 48px !important;
        height: 48px !important;
        z-index: 9999 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chatbot-robot-video {
        display: none !important;
    }
    .portfolio-chatbot-launcher {
        background-image: url('chatbot-poster.png') !important;
        background-size: cover !important;
        background-position: center !important;
        animation: none !important;
    }
}


/* Bottom Sections (Experience, Awards, Contact, Footer) Mobile Refinements */
@media (max-width: 640px) {
    .experience-timeline {
        padding-left: 1.25rem !important;
        max-width: 440px !important;
        margin: 1.5rem auto 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .timeline-item {
        margin-bottom: 1.5rem !important;
    }
    .timeline-card {
        padding: 1.15rem 1rem !important;
        border-radius: 14px !important;
        background: rgba(13, 20, 36, 0.72) !important;
        border: 1px solid rgba(56, 189, 248, 0.2) !important;
    }
    .timeline-role {
        font-size: 1.02rem !important;
        line-height: 1.3 !important;
    }
    .timeline-meta {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        font-size: 0.74rem !important;
    }
    .merits-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        max-width: 440px !important;
        margin: 1.5rem auto 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .merit-subheading {
        font-size: 1.05rem !important;
        margin-bottom: 1rem !important;
    }
    .publication-card {
        padding: 1.15rem 1rem !important;
        border-radius: 14px !important;
        background: rgba(13, 20, 36, 0.72) !important;
        border: 1px solid rgba(56, 189, 248, 0.2) !important;
    }
    .pub-title {
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
    }
    .awards-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    .award-card {
        padding: 0.95rem 1rem !important;
        border-radius: 12px !important;
        background: rgba(13, 20, 36, 0.7) !important;
        border: 1px solid rgba(56, 189, 248, 0.18) !important;
    }
    .award-name {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }
    .award-context {
        font-size: 0.76rem !important;
        line-height: 1.4 !important;
    }
    .certifications-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.65rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .cert-card {
        padding: 0.75rem 0.8rem !important;
        border-radius: 10px !important;
        background: rgba(13, 20, 36, 0.75) !important;
        border: 1px solid rgba(56, 189, 248, 0.18) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height: 80px !important;
        box-sizing: border-box !important;
    }
    .cert-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 0.35rem !important;
    }
    .cert-provider {
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        color: #38bdf8 !important;
    }
    .cert-name {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .contact-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        max-width: 440px !important;
        margin: 1.5rem auto 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .contact-details-card,
    .direct-connect-card {
        padding: 1.15rem 1.1rem !important;
        border-radius: 16px !important;
        background: rgba(13, 20, 36, 0.75) !important;
        border: 1px solid rgba(56, 189, 248, 0.22) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    .contact-details-card h3,
    .connect-title {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        margin: 0 0 0.25rem 0 !important;
    }
    .contact-tagline,
    .connect-subtitle {
        font-size: 0.78rem !important;
        color: var(--text-secondary, #94a3b8) !important;
        margin-bottom: 1rem !important;
    }
    .contact-info-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.65rem !important;
        margin-bottom: 1rem !important;
    }
    .contact-info-item {
        display: flex !important;
        align-items: center !important;
        gap: 0.85rem !important;
        padding: 0.65rem 0.85rem !important;
        border-radius: 10px !important;
        background: rgba(15, 23, 42, 0.6) !important;
        border: 1px solid rgba(56, 189, 248, 0.15) !important;
        text-decoration: none !important;
        color: inherit !important;
        box-sizing: border-box !important;
    }
    .contact-info-item .info-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 8px !important;
        background: rgba(56, 189, 248, 0.12) !important;
        color: #38bdf8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
    }
    .contact-info-item .info-text {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.1rem !important;
        min-width: 0 !important;
    }
    .contact-info-item .info-text span {
        font-size: 0.68rem !important;
        color: var(--text-secondary, #94a3b8) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    .contact-info-item .info-text strong {
        font-size: 0.82rem !important;
        color: #f1f5f9 !important;
        font-weight: 600 !important;
        word-break: break-all !important;
    }
    .map-placeholder {
        height: 64px !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8)) !important;
        border: 1px solid rgba(56, 189, 248, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0.5rem !important;
    }
    .map-overlay {
        display: flex !important;
        align-items: center !important;
        gap: 0.65rem !important;
        font-size: 0.78rem !important;
        color: #38bdf8 !important;
        font-weight: 500 !important;
    }
    .connect-email-btn {
        width: 100% !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(129, 140, 248, 0.2)) !important;
        border: 1px solid rgba(56, 189, 248, 0.4) !important;
        color: #38bdf8 !important;
        box-shadow: 0 4px 16px rgba(56, 189, 248, 0.15) !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
    .connect-divider {
        margin: 1rem 0 !important;
        font-size: 0.72rem !important;
        color: var(--text-secondary, #94a3b8) !important;
        text-align: center !important;
    }
    .connect-socials {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.65rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .connect-social-card {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        min-height: 44px !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 10px !important;
        background: rgba(15, 23, 42, 0.6) !important;
        border: 1px solid rgba(56, 189, 248, 0.18) !important;
        text-decoration: none !important;
        color: #f1f5f9 !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }
    .connect-social-card i {
        font-size: 0.95rem !important;
        color: #38bdf8 !important;
    }
    .connect-social-card .connect-social-img {
        width: 1.05rem !important;
        height: 1.05rem !important;
        border-radius: 3px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }
    .footer {
        padding: 2.25rem 0 3.5rem 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: #060b14 !important;
        box-sizing: border-box !important;
    }
    .footer-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1.15rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .footer-logo {
        margin: 0 !important;
    }
    .footer-logo .logo-symbol {
        font-size: 1.5rem !important;
    }
    .footer-links {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.65rem 1.25rem !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .footer-link {
        font-size: 0.8rem !important;
        color: var(--text-secondary, #94a3b8) !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
    }
    .footer-link:hover {
        color: #38bdf8 !important;
    }
    .back-to-top {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: rgba(15, 23, 42, 0.8) !important;
        border: 1px solid rgba(56, 189, 248, 0.3) !important;
        color: #38bdf8 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        margin-top: 0.25rem !important;
    }
}

/* ==========================================================================
   DESKTOP ONLY: PREMIUM PROJECT CARD UI ENHANCEMENTS (Min-Width: 1025px)
   ========================================================================== */
@media (min-width: 1025px) {
    .projects-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 2.25rem;
        align-items: stretch;
    }

    .project-card {
        border-radius: 20px !important;
        background: linear-gradient(155deg, rgba(16, 23, 42, 0.75) 0%, rgba(9, 14, 26, 0.90) 100%) !important;
        backdrop-filter: blur(20px) saturate(170%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
        border: 1px solid rgba(56, 189, 248, 0.16) !important;
        box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
        transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* Top Specular Shimmer Highlight line */
    .project-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 5%, rgba(56, 189, 248, 0.5) 50%, rgba(168, 85, 247, 0.5) 80%, transparent 95%);
        opacity: 0.6;
        transition: opacity 0.4s ease, height 0.4s ease;
        z-index: 10;
        pointer-events: none;
    }

    /* Ambient Corner Glow on Hover */
    .project-card::after {
        content: '';
        position: absolute;
        top: -60px;
        right: -60px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s ease, transform 0.5s ease;
        z-index: 1;
    }

    .project-card:hover::after,
    .project-card.is-tilted::after {
        opacity: 1;
        transform: scale(1.2);
    }

    .project-card:hover::before,
    .project-card.is-tilted::before {
        opacity: 1;
        height: 2px;
    }

    .project-card:hover,
    .project-card.is-tilted {
        border-color: rgba(56, 189, 248, 0.45) !important;
        box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.85),
                    0 0 35px -5px rgba(56, 189, 248, 0.28),
                    0 0 15px rgba(168, 85, 247, 0.18) !important;
    }

    /* Image Container with Cyber Shimmer Skeleton Placeholder */
    .project-card-image {
        height: 220px !important;
        position: relative !important;
        overflow: hidden !important;
        border-bottom: 1px solid rgba(56, 189, 248, 0.12) !important;
        background: linear-gradient(110deg, #090e1a 12%, #141f36 28%, #090e1a 45%) !important;
        background-size: 200% 100% !important;
        animation: cardImgShimmer 2.2s linear infinite !important;
        cursor: pointer;
    }

    @keyframes cardImgShimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .project-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        filter: brightness(0.92) contrast(1.05);
        transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease, opacity 0.35s ease-out !important;
        content-visibility: auto;
    }

    .project-card:hover .project-card-image img,
    .project-card.is-tilted .project-card-image img {
        transform: scale(1.06) !important;
        filter: brightness(1.04) contrast(1.08) !important;
    }

    /* Cinematic Dark Vignette Overlay over Image */
    .project-card-image::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(9, 14, 26, 0.05) 0%, rgba(9, 14, 26, 0.2) 50%, rgba(9, 14, 26, 0.85) 100%);
        z-index: 2;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }

    .project-card:hover .project-card-image::before {
        opacity: 0.7;
    }

    /* Floating Status Badge on Top-Right */
    .project-card-badge {
        top: 14px !important;
        right: 14px !important;
        padding: 0.35rem 0.85rem !important;
        background: rgba(9, 14, 26, 0.75) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(56, 189, 248, 0.3) !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.6px !important;
        color: #e2e8f0 !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
        z-index: 4 !important;
        transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    }

    .project-card:hover .project-card-badge {
        border-color: rgba(56, 189, 248, 0.7) !important;
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.35) !important;
    }

    /* Card Body */
    .project-card-body {
        padding: 1.75rem 1.65rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.95rem !important;
        flex-grow: 1 !important;
        position: relative !important;
        z-index: 3 !important;
    }

    /* Category & Status Meta Row */
    .project-card-meta {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .proj-date {
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.9px !important;
        text-transform: uppercase !important;
        color: #38bdf8 !important;
    }

    .proj-status {
        padding: 0.2rem 0.65rem !important;
        border-radius: 999px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .status-done {
        background: rgba(34, 197, 94, 0.12) !important;
        color: #4ade80 !important;
        border: 1px solid rgba(34, 197, 94, 0.28) !important;
    }

    .status-prod {
        background: rgba(168, 85, 247, 0.12) !important;
        color: #c084fc !important;
        border: 1px solid rgba(168, 85, 247, 0.28) !important;
    }

    .status-active {
        background: rgba(56, 189, 248, 0.12) !important;
        color: #38bdf8 !important;
        border: 1px solid rgba(56, 189, 248, 0.28) !important;
    }

    /* Title */
    .project-card-title {
        font-family: var(--font-heading) !important;
        font-size: 1.32rem !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        color: #f8fafc !important;
        margin: 0 !important;
        transition: color 0.3s ease, text-shadow 0.3s ease !important;
    }

    .project-card:hover .project-card-title,
    .project-card.is-tilted .project-card-title {
        color: #ffffff !important;
        text-shadow: 0 0 20px rgba(56, 189, 248, 0.35) !important;
    }

    /* Summary */
    .project-card-summary {
        color: #94a3b8 !important;
        font-size: 0.91rem !important;
        line-height: 1.62 !important;
        margin: 0 !important;
    }

    /* Tech Stack Badges */
    .project-card-tech {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        margin-top: auto !important;
        padding-top: 0.4rem !important;
    }

    .tech-badge {
        padding: 0.3rem 0.72rem !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        font-size: 0.76rem !important;
        font-weight: 600 !important;
        color: #cbd5e1 !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .tech-badge:hover {
        background: rgba(56, 189, 248, 0.14) !important;
        border-color: rgba(56, 189, 248, 0.45) !important;
        color: #38bdf8 !important;
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.28) !important;
        transform: translateY(-2px) !important;
    }

    /* Case Study Action Button */
    .btn-card-action {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.75rem 1.15rem !important;
        border-radius: 12px !important;
        background: rgba(56, 189, 248, 0.06) !important;
        border: 1px solid rgba(56, 189, 248, 0.22) !important;
        color: #38bdf8 !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        margin-top: 0.35rem !important;
    }

    .btn-card-action i {
        font-size: 0.85rem !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease !important;
    }

    .project-card:hover .btn-card-action,
    .project-card.is-tilted .btn-card-action {
        background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(168, 85, 247, 0.18) 100%) !important;
        border-color: rgba(56, 189, 248, 0.55) !important;
        color: #ffffff !important;
        box-shadow: 0 0 22px rgba(56, 189, 248, 0.32) !important;
        transform: translateY(-2px) !important;
    }

    .project-card:hover .btn-card-action i,
    .project-card.is-tilted .btn-card-action i {
        transform: translateX(6px) !important;
        color: #38bdf8 !important;
    }
}

/* ============================================================
   CYBER-LUXURY ELEVATED CHATBOT UI - DESKTOP & MOBILE
   ============================================================ */

/* Chatbot Floating Launcher (Universal) */
.portfolio-chatbot-launcher {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 35%, rgba(15, 23, 42, 0.95), rgba(8, 12, 22, 0.98)) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(56, 189, 248, 0.35) !important;
    cursor: pointer !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease !important;
    overflow: hidden !important;
}

.portfolio-chatbot-launcher:hover {
    transform: scale(1.08) translateY(-3px) !important;
    border-color: rgba(56, 189, 248, 0.9) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 35px rgba(56, 189, 248, 0.55) !important;
}

.portfolio-chatbot-launcher:active {
    transform: scale(0.95) !important;
}

/* ------------------------------------------------------------
   DESKTOP CHATBOT PANEL (min-width: 769px)
   ------------------------------------------------------------ */
@media (min-width: 769px) {
    .portfolio-chatbot {
        position: fixed !important;
        bottom: 24px !important;
        right: 28px !important;
        z-index: 10000 !important;
    }

    .portfolio-chatbot-panel[hidden] {
        display: none !important;
    }

    .portfolio-chatbot-panel:not([hidden]) {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        bottom: calc(100% + 14px) !important;
        right: 0 !important;
        width: 410px !important;
        max-width: calc(100vw - 32px) !important;
        height: min(640px, calc(100vh - 100px)) !important;
        border-radius: 24px !important;
        background: linear-gradient(165deg, rgba(13, 18, 32, 0.96) 0%, rgba(7, 11, 20, 0.98) 100%) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border: 1px solid rgba(56, 189, 248, 0.22) !important;
        box-shadow: 0 25px 65px -12px rgba(0, 0, 0, 0.85),
                    0 0 35px -5px rgba(56, 189, 248, 0.18),
                    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        transform-origin: bottom right !important;
        animation: chatbotPanelIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
        z-index: 10000 !important;
    }

    /* Top Specular Shimmer Edge */
    .portfolio-chatbot-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1.5px;
        background: linear-gradient(90deg, transparent 5%, rgba(56, 189, 248, 0.6) 40%, rgba(168, 85, 247, 0.6) 75%, transparent 95%);
        z-index: 10;
        pointer-events: none;
    }
}

/* ------------------------------------------------------------
   HEADER (Desktop & Mobile)
   ------------------------------------------------------------ */
.portfolio-chatbot-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.16) !important;
    background: linear-gradient(180deg, rgba(19, 28, 48, 0.8) 0%, rgba(13, 19, 32, 0.6) 100%) !important;
    flex-shrink: 0 !important;
    gap: 0.75rem !important;
}

.chatbot-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
    flex: 1 !important;
    padding-right: 0 !important;
}

.chatbot-brand-mark {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex-basis: 42px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(15, 23, 42, 0.9) 80%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.chatbot-header-robot {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.chatbot-brand-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.chatbot-eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    color: #38bdf8 !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 0.15rem !important;
}

.chatbot-status-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 8px #22c55e, 0 0 14px rgba(34, 197, 94, 0.6) !important;
}

.portfolio-chatbot-header h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
}

.portfolio-chatbot-header p {
    color: #94a3b8 !important;
    font-size: 0.76rem !important;
    margin: 0.15rem 0 0 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.portfolio-chatbot-actions {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-shrink: 0 !important;
}

.chatbot-recruiter-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.35rem 0.65rem !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 999px !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08) !important;
    cursor: pointer !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    transition: all 0.25s ease !important;
}

.chatbot-recruiter-action:hover {
    color: #ffffff !important;
    background: rgba(56, 189, 248, 0.22) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
}

.chatbot-icon-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 50% !important;
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    font-size: 0.85rem !important;
}

.chatbot-icon-button:hover {
    color: #ffffff !important;
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* ------------------------------------------------------------
   MESSAGES SCROLLER & BUBBLES (Desktop & Mobile)
   ------------------------------------------------------------ */
.portfolio-chatbot-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 1.15rem 1.15rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.95rem !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(56, 189, 248, 0.25) transparent !important;
}

.portfolio-chatbot-messages::-webkit-scrollbar {
    width: 5px !important;
}

.portfolio-chatbot-messages::-webkit-scrollbar-track {
    background: transparent !important;
}

.portfolio-chatbot-messages::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.25) !important;
    border-radius: 10px !important;
}

.portfolio-chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.5) !important;
}

.chatbot-message {
    display: flex !important;
    width: 100% !important;
    margin-bottom: 0.35rem !important;
    animation: chatbotMsgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.chatbot-message.user {
    justify-content: flex-end !important;
}

.chatbot-message.assistant {
    justify-content: flex-start !important;
}

.chatbot-bubble {
    max-width: 86% !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    padding: 0.85rem 1.05rem !important;
    border-radius: 16px !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

.chatbot-message.assistant .chatbot-bubble {
    background: linear-gradient(155deg, rgba(22, 31, 50, 0.92) 0%, rgba(13, 19, 34, 0.96) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
    border-radius: 18px 18px 18px 4px !important;
    color: #f1f5f9 !important;
}

.chatbot-message.user .chatbot-bubble {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #6366f1 100%) !important;
    border: 1px solid rgba(125, 211, 252, 0.35) !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.32) !important;
    border-radius: 18px 18px 4px 18px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Embedded Project Card */
.chatbot-project-card {
    margin-top: 0.85rem !important;
    padding: 0.85rem 1rem !important;
    background: rgba(10, 15, 28, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
}

.chatbot-project-card strong {
    font-size: 0.95rem !important;
    color: #f8fafc !important;
}

.chatbot-project-card span {
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
}

.chatbot-project-card span:last-of-type {
    color: #38bdf8 !important;
    font-weight: 600 !important;
    font-size: 0.76rem !important;
}

.chatbot-project-action {
    align-self: flex-start !important;
    margin-top: 0.35rem !important;
    padding: 0.42rem 0.88rem !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(168, 85, 247, 0.18)) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.chatbot-project-action:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(168, 85, 247, 0.35)) !important;
    border-color: rgba(56, 189, 248, 0.7) !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Suggestion Chips in Conversation & Starter */
.chatbot-suggestion-list {
    margin-top: 0.85rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
}

.chatbot-suggestion-separator {
    width: 100% !important;
    height: 1px !important;
    background: rgba(56, 189, 248, 0.12) !important;
    margin-bottom: 0.25rem !important;
}

.portfolio-chatbot-suggestions {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.45rem !important;
    padding: 0.25rem 0 0.65rem !important;
    scrollbar-width: none !important;
}

.portfolio-chatbot-suggestions::-webkit-scrollbar {
    display: none !important;
}

.chatbot-suggestion {
    flex-shrink: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.42rem 0.85rem !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(56, 189, 248, 0.24) !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
}

.chatbot-suggestion:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.28) !important;
    transform: translateY(-1px) !important;
}

/* ------------------------------------------------------------
   COMPOSER & INPUT FORM (Desktop & Mobile)
   ------------------------------------------------------------ */
.portfolio-chatbot-composer {
    flex-shrink: 0 !important;
    padding: 0.85rem 1.15rem 1.15rem !important;
    background: rgba(9, 14, 26, 0.96) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.16) !important;
}

.portfolio-chatbot-form {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: rgba(18, 26, 44, 0.75) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.24) !important;
    border-radius: 999px !important;
    padding: 0.35rem 0.4rem 0.35rem 1.1rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s ease !important;
}

.portfolio-chatbot-form:focus-within {
    border-color: #38bdf8 !important;
    background: rgba(18, 26, 44, 0.95) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15), 0 0 18px rgba(56, 189, 248, 0.22) !important;
}

.portfolio-chatbot-form input {
    min-width: 0 !important;
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #f8fafc !important;
    font-size: 0.88rem !important;
    font-family: inherit !important;
}

.portfolio-chatbot-form input::placeholder {
    color: #64748b !important;
}

.chatbot-send-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.4) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.chatbot-send-button:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    filter: grayscale(0.5) !important;
    transform: none !important;
}

.chatbot-send-button:not(:disabled):hover {
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%) !important;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.6) !important;
    transform: scale(1.08) !important;
}

.chatbot-send-button:not(:disabled):active {
    transform: scale(0.95) !important;
}