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

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    color: lightgray;
    overflow-x: hidden;
}

html { scroll-behavior: smooth; }

:root {
    --blue: #72a1de;
    --blue-dim: #72a1de40;
    --blue-glow: #72a1de80;
    --purple: #6600c5;
    --dark: #020b18;
    --dark2: #080020;
    --card-bg: #06101ecc;
}

/* =============================================
   CONTAINER
   ============================================= */
.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
    background-color: #001f7c18;
}

.back-vid {
    position: fixed;
    right: 0; bottom: 0;
    z-index: -1;
    mix-blend-mode: overlay;
}

@media (max-aspect-ratio: 16/9) { .back-vid { width: auto; height: 100%; } }
@media (min-aspect-ratio: 16/9) { .back-vid { width: 100%; height: auto; } }

/* =============================================
   HEADER
   ============================================= */
header {
    display: flex;
    position: fixed;
    top: 0; right: 0; left: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 70px;
    background: linear-gradient(135deg, rgba(6,16,30,0.85), rgba(2,11,24,0.9));
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 #72a1de30, 0 4px 30px #00000080;
    z-index: 999;
    border-bottom: 1px solid #72a1de20;
}

.left { display: flex; align-items: center; }
.left img { width: 38px; margin: 0 12px; filter: drop-shadow(0 0 6px var(--blue-glow)); }

header ul {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px 20px;
    border-radius: 50px;
    background: rgba(0,0,40,0.4);
    backdrop-filter: blur(10px);
    border: 1px solid #72a1de20;
    box-shadow: 0 0 20px #72a1de15;
    list-style: none;
    margin: 0;
}

header ul li { list-style: none; }

header ul a {
    text-decoration: none;
    color: #ffffffcc;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 30px;
    transition: all 0.3s;
}

header ul a:hover {
    color: white;
    background: #72a1de15;
}

.box-icons { display: flex; gap: 12px; }

.box-icons p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 36px; height: 36px;
    border: 1px solid #72a1de50;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    background: #72a1de08;
}

.box-icons p:hover {
    background: var(--blue);
    color: #000;
    box-shadow: 0 0 20px var(--blue-glow);
    transform: translateY(-2px);
}

/* =============================================
   BLACKHOLE
   ============================================= */
.blackhole-box {
    position: absolute;
    top: 0; width: 100%;
    display: flex;
    justify-content: center;
    z-index: -1;
    mix-blend-mode: lighten;
}
.blackhole-box video { width: 100%; margin-top: -23.5%; }

/* =============================================
   HERO
   ============================================= */
.hero {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: space-between;
}

.hero-info { position: absolute; left: 5%; }

.hero-info .hero-info-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid #72a1de40;
    background: linear-gradient(135deg, #72a1de10, #6600c510);
    box-shadow: 0 0 15px #72a1de20;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}

.hero-info h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 64px;
    max-width: 620px;
    font-weight: 700;
    line-height: 72px;
    margin-top: 28px;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.hero-info p {
    max-width: 520px;
    line-height: 28px;
    margin-bottom: 36px;
    font-size: 17px;
    color: #ffffffaa;
    font-weight: 300;
}

.hero-info button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    border: 1px solid #72a1de60;
    background: linear-gradient(135deg, #72a1de15, #6600c515);
    box-shadow: 0 0 20px #72a1de30, inset 0 1px 0 #72a1de30;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.hero-info button:hover {
    box-shadow: 0 0 35px #72a1de60, inset 0 1px 0 #72a1de50;
    transform: translateY(-2px);
    background: linear-gradient(135deg, #72a1de25, #6600c525);
}

/* =============================================
   GRADIENT TEXT
   ============================================= */
.gradient {
    background: linear-gradient(to right, #00d4d0, #7e42a7, #6600c5, #6070fd, #2a46ff, #0099ff, #00c8c8);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-gradient 3s linear infinite;
}
@keyframes animate-gradient { to { background-position: 200%; } }

/* =============================================
   SKILLS VIDEO
   ============================================= */
.skills-video-box { position: absolute; right: 3%; }
.skills-video { height: 900px; mix-blend-mode: lighten; }

/* =============================================
   SCROLL DOWN
   ============================================= */
.scroll-down {
    height: 50px; width: 30px;
    border: 2px solid #ffffff60;
    position: absolute;
    left: 49%; bottom: 8%;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 0 15px #ffffff30;
}
.scroll-down::before, .scroll-down::after {
    content: "";
    position: absolute;
    top: 20%; left: 50%;
    height: 10px; width: 10px;
    transform: translate(-50%, -100%) rotate(45deg);
    border: 2px solid #ffffff80;
    border-top: transparent;
    border-left: transparent;
    animation: scroll-down 2s ease-in-out infinite;
}
.scroll-down::before { top: 30%; animation-delay: 0.5s; }
@keyframes scroll-down {
    0% { opacity: 0; }
    30%, 60% { opacity: 1; }
    100% { top: 90%; opacity: 0; }
}

/* =============================================
   INFO SECTION
   ============================================= */
.info-section {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 80%;
    margin-top: 100px;
}

.section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* =============================================
   INFO CARDS GRID
   ============================================= */
.info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    margin-top: 30px;
}

.card {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    height: 40vh;
    overflow: hidden;
    border: 1px solid #72a1de20;
    background: linear-gradient(145deg, #06101eee, #0a0525ee);
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, #72a1de08, transparent 60%);
    pointer-events: none;
}

.card:hover {
    box-shadow: 0 0 40px #72a1de30, 0 20px 60px #00000060;
    border-color: #72a1de50;
    transform: translateY(-4px);
}

.card h1 {
    position: absolute;
    margin: 0;
    bottom: 40%;
    left: 6%;
    font-size: 22px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    z-index: 1;
    color: white;
    letter-spacing: 0.3px;
}

.card p {
    position: absolute;
    bottom: 4%;
    left: 6%;
    z-index: 1;
    max-width: 290px;
    color: #ffffffaa;
    font-size: 12px;
    line-height: 20px;
}

.card img {
    width: 80%;
    height: 50%;
    object-fit: cover;
    opacity: 0.85;
}

.card video {
    margin-top: 10%;
    width: 70%;
    height: 50%;
    object-fit: cover;
    mix-blend-mode: lighten;
}

.card button {
    position: absolute;
    bottom: 5%; left: 6%;
    padding: 9px 22px;
    border: 1px solid #72a1de40;
    background: linear-gradient(135deg, #72a1de10, #6600c510);
    color: #ffffffcc;
    border-radius: 20px;
    box-shadow: 0 0 10px #72a1de20;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
    font-weight: 600;
}

.card button:hover {
    box-shadow: 0 0 20px #72a1de50;
    border-color: #72a1de80;
    transform: translateY(-1px);
}

.card:nth-child(3) { grid-row: span 2; height: 83vh; }
.card:nth-child(3) p { bottom: 12%; }
.card:nth-child(3) h1 { bottom: 21%; }
.card:nth-child(4) { grid-column: span 2; }
.card:nth-child(4) p { max-width: 650px; }
.card:nth-child(4) h1 { bottom: 35%; }

/* =============================================
   PROFILE CARD (card:nth-child(1))
   ============================================= */
.card:nth-child(1) {
    height: auto !important;
    min-height: 520px;
}

.profile-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 520px !important;
    padding: 36px 24px 32px !important;
    overflow: hidden !important;
    gap: 0 !important;
}

.profile-bg-glow {
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, #72a1de18 0%, transparent 70%);
    top: 5%; left: 50%;
    transform: translateX(-50%);
    animation: profileBgPulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes profileBgPulse {
    0%,100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
    50% { transform: translateX(-50%) scale(1.3); opacity: 1; }
}

.profile-photo-wrap {
    position: relative;
    width: 220px; height: 220px;
    margin-bottom: 20px;
    flex-shrink: 0;
    z-index: 1;
}

.profile-photo {
    width: 220px !important;
    height: 220px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: top !important;
    border: 3px solid var(--blue) !important;
    box-shadow: 0 0 30px var(--blue-glow), 0 0 80px #72a1de20 !important;
    position: relative;
    z-index: 1;
    display: block !important;
}

.profile-glow-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid #72a1de40;
    animation: profileRingPulse 2.5s ease-in-out infinite;
    z-index: 0;
}

.profile-glow-ring2 {
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    border: 1px solid #72a1de18;
    animation: profileRingPulse 2.5s ease-in-out infinite 0.7s;
    z-index: 0;
}

@keyframes profileRingPulse {
    0%,100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.06); opacity: 1; }
}

.profile-name {
    position: static !important;
    bottom: auto !important; left: auto !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 26px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0 0 10px 0 !important;
    z-index: 1;
    letter-spacing: 0.5px !important;
}

.profile-card p {
    position: static !important;
    bottom: auto !important; left: auto !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 19px !important;
    max-width: 230px !important;
    margin: 0 0 16px 0 !important;
    z-index: 1;
    color: #ffffff80 !important;
}

.profile-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 1;
}

.profile-tags span {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #72a1de40;
    background: #72a1de10;
    color: var(--blue);
    letter-spacing: 0.5px;
}

/* =============================================
   PROJECTS SECTION
   ============================================= */
.my-project {
    display: flex;
    flex-direction: column;
    gap: 80px;
    align-items: center;
    position: relative;
    width: 80%;
    margin-top: 140px;
    margin-bottom: 700px;
}

.project-card {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8%;
    justify-content: center;
}

.project-vidbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    mix-blend-mode: exclusion;
    position: relative;
    cursor: pointer;
    transition: all 0.4s;
    min-width: 400px;
}

.project-vidbox video {
    object-fit: cover;
    width: 100%;
    box-shadow: 0 0 20px #72a1de40;
    border-radius: 20px;
    transition: all 0.4s;
}

.project-card video:hover {
    box-shadow: 0 0 40px #72a1de80;
}

.project-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 50%;
    padding-left: 8%;
}

.project-info h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-wrap: nowrap;
    margin: 0 0 8px 0;
    max-width: 450px;
    letter-spacing: 0.5px;
}

.project-info p {
    width: 90%;
    max-width: 400px;
    min-width: 300px;
    margin: 0 0 20px 0;
    color: #ffffffaa;
    font-size: 14px;
    line-height: 22px;
}

.project-info button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    padding: 12px 28px;
    border-radius: 10px;
    border: 1px solid #72a1de50;
    background: linear-gradient(135deg, #72a1de12, #6600c512);
    box-shadow: 0 0 15px #72a1de25;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;
    font-weight: 600;
}

.project-info button:hover {
    box-shadow: 0 0 30px #72a1de60;
    transform: translateY(-2px);
}

.hover-sign {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 100px;
}

.hover-sign::before, .hover-sign::after {
    content: "👆";
    text-align: center;
    position: absolute;
    font-size: 50px;
    top: 20%; left: 40%;
    border-radius: 40px;
    animation: hover-animation 4s ease-in-out infinite;
}

.hover-sign.active { display: none; }

@keyframes hover-animation {
    0%   { transform: translate(100%, 50%) rotate(30deg); }
    100% { transform: translateX(80%) rotate(20deg); }
}

/* =============================================
   PROJECT TAGS / PILLS
   ============================================= */
.proj-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue);
    border: 1px solid #72a1de40;
    border-radius: 30px;
    padding: 4px 14px;
    margin-bottom: 10px;
    background: #72a1de10;
}

.proj-tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 22px;
}

.proj-tech-pills span {
    font-size: 11px;
    padding: 3px 11px;
    border-radius: 20px;
    background: #72a1de0d;
    border: 1px solid #72a1de30;
    color: #72a1decc;
    font-weight: 600;
}

/* =============================================
   PROJECT VISUALS
   ============================================= */
.proj-visual {
    width: 100%;
    height: 300px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background: var(--dark);
    border: 1px solid #72a1de25;
    box-shadow: 0 0 40px #72a1de15, inset 0 1px 0 #72a1de15;
}

/* MAP */
.map-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(#72a1de06 1px, transparent 1px),
        linear-gradient(90deg, #72a1de06 1px, transparent 1px);
    background-size: 40px 40px;
}
.map-roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-line { stroke-dashoffset: 0; animation: dashFlow 2s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -30; } }

.pulse-ring  { animation: pulseRing 1.5s ease-out infinite; transform-origin: 100px 180px; }
.pulse-ring2 { animation: pulseRing 1.5s ease-out infinite 0.3s; transform-origin: 100px 180px; }
.pulse-ring3 { animation: pulseRing2 1.5s ease-out infinite; transform-origin: 400px 80px; }
@keyframes pulseRing  { 0% { opacity:1; r:14; } 100% { opacity:0; r:28; } }
@keyframes pulseRing2 { 0% { opacity:1; r:14; } 100% { opacity:0; r:28; } }

.car-icon {
    position: absolute;
    font-size: 22px;
    z-index: 10;
    filter: drop-shadow(0 0 8px var(--blue));
    animation: carDrive 5s linear infinite;
}
@keyframes carDrive {
    0%   { left:18%; top:62%; }
    30%  { left:48%; top:62%; }
    50%  { left:48%; top:30%; }
    80%  { left:78%; top:30%; }
    100% { left:78%; top:30%; opacity:0; }
}

.map-stats {
    position: absolute;
    bottom: 12px; left: 12px;
    display: flex; flex-direction: column; gap: 6px;
    z-index: 10;
}

.stat-pill {
    display: flex; align-items: center; gap: 7px;
    background: #000d1acc;
    border: 1px solid #72a1de25;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    color: lightgray;
    backdrop-filter: blur(6px);
}

.sdot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.sdot.green { background:#00ff88; box-shadow:0 0 6px #00ff88; animation:blinkDot 1s infinite; }
.sdot.blue  { background:var(--blue); box-shadow:0 0 6px var(--blue); }
@keyframes blinkDot { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.map-label {
    position: absolute;
    font-size: 10px; font-weight: 700;
    color: white;
    background: #000d1acc;
    padding: 3px 8px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    z-index: 10;
}
.pickup-label  { top:57%; left:12%; }
.dropoff-label { top:20%; left:73%; }

.map-fare {
    position: absolute;
    top: 12px; right: 12px;
    background: #72a1de15;
    border: 1px solid #72a1de50;
    color: var(--blue);
    font-size: 16px; font-weight: 700;
    padding: 5px 14px;
    border-radius: 12px;
    backdrop-filter: blur(6px);
    z-index: 10;
}
.map-fare span { font-size: 10px; opacity: 0.7; }

/* ECG */
.ecg-container { position:absolute; top:0; left:0; right:0; height:70px; overflow:hidden; }
.ecg-svg { width:100%; height:70px; }
.ecg-line {
    fill:none; stroke:#00ff88; stroke-width:2;
    filter:drop-shadow(0 0 4px #00ff88);
    stroke-dasharray:1000; stroke-dashoffset:1000;
    animation:drawEcg 3s linear infinite;
}
@keyframes drawEcg {
    0%  { stroke-dashoffset:1000; opacity:1; }
    80% { stroke-dashoffset:0; opacity:1; }
    100%{ stroke-dashoffset:0; opacity:0; }
}
.ecg-scan {
    position:absolute; top:0; left:-10px;
    width:3px; height:70px;
    background:linear-gradient(to bottom, transparent, #00ff8880, transparent);
    animation:scanLine 3s linear infinite;
}
@keyframes scanLine { 0%{left:-10px;} 100%{left:110%;} }

/* Neural */
.neural-wrap { position:absolute; top:70px; left:0; right:0; height:185px; }
.neural-svg  { position:absolute; inset:0; width:100%; height:100%; }
.n-node { position:absolute; border-radius:50%; transform:translate(-50%,-50%); }
.inp-n { width:12px; height:12px; background:var(--blue); box-shadow:0 0 8px var(--blue); animation:nodePulse 2s ease-in-out infinite; }
.hid-n { width:10px; height:10px; background:var(--purple); box-shadow:0 0 6px var(--purple); animation:nodePulse 2s ease-in-out infinite 0.3s; }
.out-n { width:16px; height:16px; background:#ff4466; box-shadow:0 0 12px #ff4466; animation:nodePulse 1s ease-in-out infinite; }
@keyframes nodePulse {
    0%,100%{ transform:translate(-50%,-50%) scale(1); }
    50%    { transform:translate(-50%,-50%) scale(1.3); }
}
.n-label { position:absolute; font-size:9px; color:#72a1de90; transform:translateY(-50%); white-space:nowrap; }
.out-label { font-size:10px; color:#ff446690; left:90% !important; }

/* Risk */
.risk-meter { position:absolute; bottom:10px; left:10px; right:10px; z-index:10; }
.risk-bar-wrap { height:5px; background:#72a1de15; border-radius:10px; overflow:hidden; margin-bottom:5px; }
.risk-bar {
    height:100%; width:23%;
    background:linear-gradient(to right, #00ff88, var(--blue));
    border-radius:10px;
    box-shadow:0 0 8px var(--blue);
    animation:riskAnim 6s ease-in-out infinite;
}
@keyframes riskAnim {
    0%  { width:23%; background:linear-gradient(to right,#00ff88,var(--blue)); }
    40% { width:67%; background:linear-gradient(to right,#ffaa00,#ff6600); }
    70% { width:82%; background:linear-gradient(to right,#ff4466,#cc0000); }
    100%{ width:23%; background:linear-gradient(to right,#00ff88,var(--blue)); }
}
.risk-label { font-size:11px; color:#ffffffaa; }
.low-risk  { color:#00ff88; font-weight:700; }
.high-risk { color:#ff4466; font-weight:700; }
.med-risk  { color:#ffaa00; font-weight:700; }

.heart-icon {
    position:absolute; top:10px; right:14px;
    font-size:28px;
    animation:heartBeat 0.8s ease-in-out infinite;
    filter:drop-shadow(0 0 8px #ff4466);
    z-index:10;
}
@keyframes heartBeat {
    0%,100%{ transform:scale(1); }
    14%    { transform:scale(1.2); }
    28%    { transform:scale(1); }
    42%    { transform:scale(1.15); }
    70%    { transform:scale(1); }
}

/* Chat */
.chat-ui { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--dark); }
.chat-header-bar {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px;
    background:#0a1628;
    border-bottom:1px solid #72a1de20;
}
.chat-avatar-sm {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:white; flex-shrink:0;
}
.chat-info { flex:1; }
.chat-title { font-size:13px; font-weight:700; color:white; }
.chat-status { font-size:10px; color:#72a1de80; display:flex; align-items:center; gap:5px; }
.online-dot {
    display:inline-block; width:7px; height:7px; border-radius:50%;
    background:#00ff88; box-shadow:0 0 6px #00ff88;
    animation:blinkDot 1.5s infinite;
}
.signal-badge {
    font-size:9px; font-weight:700; letter-spacing:1px;
    color:var(--blue); border:1px solid #72a1de40;
    border-radius:8px; padding:3px 8px; background:#72a1de10;
}
.chat-messages {
    flex:1; overflow:hidden;
    padding:10px 14px;
    display:flex; flex-direction:column; gap:8px;
}
.chat-msg { display:flex; align-items:flex-end; gap:7px; animation:msgFadeIn 0.4s ease both; }
.chat-msg.right { flex-direction:row-reverse; }
.msg-av {
    width:24px; height:24px; border-radius:50%;
    background:linear-gradient(135deg,var(--purple),var(--blue));
    display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:700; color:white; flex-shrink:0;
}
.msg-content { display:flex; flex-direction:column; max-width:70%; }
.msg-name { font-size:9px; color:#72a1de80; margin-bottom:3px; }
.bubble { padding:7px 12px; border-radius:14px; font-size:12px; line-height:1.4; }
.left-b  { background:#0d1f3c; border:1px solid #72a1de25; color:lightgray; border-bottom-left-radius:4px; }
.right-b { background:linear-gradient(135deg,#1a3a6e,#72a1de35); border:1px solid #72a1de40; color:white; border-bottom-right-radius:4px; align-self:flex-end; }
@keyframes msgFadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
.typing-bar { display:flex; align-items:center; gap:8px; padding:4px 14px; font-size:10px; color:#72a1de80; }
.typing-dots { display:flex; gap:3px; align-items:center; }
.typing-dots span { width:5px; height:5px; border-radius:50%; background:var(--blue); animation:typingBounce 1.2s ease-in-out infinite; }
.typing-dots span:nth-child(2){ animation-delay:0.2s; }
.typing-dots span:nth-child(3){ animation-delay:0.4s; }
@keyframes typingBounce {
    0%,60%,100%{ transform:translateY(0); opacity:0.5; }
    30%{ transform:translateY(-4px); opacity:1; }
}
.chat-input-row {
    display:flex; align-items:center; gap:8px;
    padding:8px 14px;
    border-top:1px solid #72a1de15;
    background:#060f1e;
}
.chat-fake-input {
    flex:1; background:#0d1f3c;
    border:1px solid #72a1de25; border-radius:20px;
    padding:7px 14px; font-size:12px; color:var(--blue);
    overflow:hidden; white-space:nowrap;
}
.chat-send-btn {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:14px; color:white;
    box-shadow:0 0 10px #72a1de50; flex-shrink:0;
}
.conn-nodes { position:absolute; top:0; right:0; width:60px; height:100%; pointer-events:none; }
.conn-node  { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--blue); }
.conn-pulse {
    position:absolute; inset:-5px; border-radius:50%;
    border:1px solid #72a1de40;
    animation:connPulse 2s ease-out infinite;
}
@keyframes connPulse { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(3);opacity:0;} }
@keyframes neuralFire {
    0%,100%{ stroke:#72a1de15; stroke-width:1; }
    50%    { stroke:#72a1de60; stroke-width:1.5; }
}

/* =============================================
   SKILLS SECTION
   ============================================= */
.skills-section { display:flex; flex-direction:column; align-items:center; position:relative; }
.skills-box {
    width:100%; height:90vh; position:relative;
    display:flex; align-items:flex-start; justify-content:center;
    mix-blend-mode:lighten; opacity:0.8;
}
.skills-image { width:70%; mix-blend-mode:difference; }
.Designer { position:absolute; display:flex; flex-direction:column; align-items:flex-start; top:25%; left:5%; max-width:300px; }
.Designer h1 { font-family:'Rajdhani',sans-serif; font-size:48px; display:flex; align-items:center; margin-bottom:8px; }
.Designer p { line-height:23px; color:#ffffffaa; font-size:13px; }
.coder { position:absolute; display:flex; flex-direction:column; align-items:flex-start; top:25%; right:5%; max-width:300px; }
.coder h1 { font-family:'Rajdhani',sans-serif; font-size:48px; display:flex; align-items:center; margin-bottom:8px; }
.coder p { line-height:23px; color:#ffffffaa; font-size:13px; }

/* SLIDER */
.slider {
    position:absolute; bottom:5%; right:20%;
    width:60%; height:var(--height);
    overflow:hidden;
    mask-image:linear-gradient(to right, transparent, #000 10% 90%, transparent);
    mix-blend-mode:difference; opacity:0.7;
}
.slider .list { display:flex; width:100%; min-width:calc(var(--width) * var(--quantity)); position:relative; }
.slider .list .item {
    width:var(--width); height:var(--height);
    position:absolute; left:100%;
    animation:autoRun 10s linear infinite;
    transition:filter 0.5s;
    animation-delay:calc((10s / var(--quantity)) * (var(--position) - 1) - 10s) !important;
}
.slider .list .item img { width:100%; }
@keyframes autoRun { from{left:100%;} to{left:calc(var(--width)*-1);} }
.slider:hover .item { animation-play-state:paused !important; filter:grayscale(1); }
.slider .item:hover { filter:grayscale(0); }

/* =============================================
   CONTACT SECTION
   ============================================= */
.contact-section {
    width:80%; height:100vh;
    display:flex; justify-content:center; gap:10%; align-items:center;
    position:relative;
}
.contact-section h1 { position:absolute; top:10%; left:40%; }

.social-box { display:flex; flex-direction:column; gap:22px; }
.social-box a {
    color:#ffffffcc; text-decoration:none;
    font-size:18px; text-wrap:nowrap;
    transition:all 0.3s;
    display:flex; align-items:center;
}
.social-box a:hover { color:white; transform:translateX(4px); }
.social-box i { color:var(--blue); font-size:26px; margin-right:12px; }
.social-icons a i { color:white; margin-top:40px; }

.contact-box p { max-width:400px; margin-top:24px; margin-bottom:6px; font-size:13px; color:#ffffffaa; }

.contact-box input {
    padding:10px 16px;
    background:#0d1f3c;
    color:lightgray;
    width:85%;
    border:1px solid #72a1de30;
    outline:none;
    border-radius:10px;
    font-size:13px;
    transition:all 0.3s;
}
.contact-box input:focus {
    border-color:#72a1de80;
    box-shadow:0 0 15px #72a1de20;
}

.contact-box button {
    margin-top:24px;
    display:inline-flex; align-items:center; gap:8px;
    color:white;
    padding:13px 30px;
    border-radius:10px;
    border:1px solid #72a1de50;
    background:linear-gradient(135deg,#72a1de15,#6600c515);
    box-shadow:0 0 15px #72a1de25;
    cursor:pointer;
    transition:all 0.3s;
    font-size:14px;
    font-weight:600;
}
.contact-box button:hover {
    box-shadow:0 0 30px #72a1de60;
    transform:translateY(-2px);
}

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */
.autoBlur {
    animation:autoBlurAnimation linear both;
    animation-timeline:view();
}
@keyframes autoBlurAnimation {
    0%   { filter:blur(40px); }
    35%,65%{ filter:blur(0); opacity:1; }
    100% { filter:blur(40px); opacity:0; }
}

.autoDisplay {
    animation:autoDisplayAnimation both;
    animation-timeline:view();
}
@keyframes autoDisplayAnimation {
    from{ filter:blur(10px); transform:translateY(-200px) scale(0); }
    50% { opacity:1; filter:blur(0); transform:translateX(0) scale(1); }
}

.fadein-left {
    animation:fadeInLeftAnimation both;
    animation-timeline:view();
}
@keyframes fadeInLeftAnimation {
    0%    { opacity:0; transform:translateX(-500px) scale(0.2); filter:blur(10px); }
    35%,65%{ opacity:1; transform:translateX(0) scale(1); filter:blur(0); }
    100%  { filter:blur(10px); }
}

/* =============================================
   SIDEBAR
   ============================================= */
.menu-icon { font-size:32px; cursor:pointer; display:none; color:white; }

.sidebar {
    position:fixed; right:0; top:0; bottom:70%;
    width:0%;
    background:linear-gradient(160deg,#000d1af0,#000508f5);
    z-index:999;
    box-shadow:0 0 40px #72a1de30;
    backdrop-filter:blur(16px);
    opacity:0;
    border-bottom-left-radius:100%;
    border-left:1px solid #72a1de20;
}

.close-icon { font-size:46px; color:lightgray; padding-left:12px; cursor:pointer; }

.sidebar ul { padding-left:24px; margin-top:10px; }
.sidebar ul li { list-style:none; margin-bottom:28px; }
.sidebar ul li a {
    text-decoration:none; color:lightgray;
    font-family:'Rajdhani',sans-serif;
    font-size:32px; font-weight:700;
    letter-spacing:1px;
    transition:all 0.3s;
}
.sidebar ul li a:hover { color:var(--blue); text-shadow:0 0 20px var(--blue-glow); }

.social-sidebar { padding-left:20px; margin-top:50px; }
.social-sidebar a { font-size:32px; padding:5px; cursor:pointer; transition:0.3s; }

.sidebar.open-sidebar  { animation:openSideBarAnimation 1.5s forwards; }
.sidebar.close-sidebar { animation:closeSideBarAnimation 1.5s forwards; }

@keyframes openSideBarAnimation {
    to{ width:80%; opacity:1; bottom:0; border-radius:0; }
}
@keyframes closeSideBarAnimation {
    from{ width:80%; opacity:1; bottom:0; border-radius:0; }
    to  { width:0; opacity:0; bottom:70%; border-bottom-left-radius:50%; }
}

/* =============================================
   NAV SCROLL ACTIVE
   ============================================= */
header ul a.nav-link { position:relative; transition:all 0.3s; }

header ul a.nav-link::after {
    content:''; position:absolute;
    bottom:-4px; left:0;
    width:0%; height:2px;
    background:linear-gradient(to right,var(--blue),var(--purple));
    border-radius:2px;
    transition:width 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow:0 0 6px var(--blue);
}

header ul a.nav-link.active,
header ul a.nav-link:hover {
    color:white !important;
    background:#72a1de20;
}

header ul a.nav-link.active::after,
header ul a.nav-link:hover::after { width:100%; }

.sidebar ul li a.nav-link { position:relative; transition:all 0.3s; }
.sidebar ul li a.nav-link.active { color:var(--blue) !important; text-shadow:0 0 15px var(--blue-glow); }

.nav-flash {
    position:fixed; inset:0;
    background:radial-gradient(ellipse at center, #72a1de12, transparent 70%);
    pointer-events:none;
    z-index:9998; opacity:0;
    animation:navFlashAnim 0.7s ease-out forwards;
}
@keyframes navFlashAnim { 0%{opacity:1;} 100%{opacity:0;} }

/* =============================================
   RESPONSIVE
   ============================================= */
@media screen and (max-width:1200px) {
    .blackhole-box video { margin-top:-20%; }
    .hero-info h1 { font-size:42px; max-width:420px; line-height:48px; }
    .hero-info p  { max-width:320px; }
    .skills-video-box { right:0%; }
    .skills-video-box video { height:500px; }
    .info-cards { grid-template-columns:1fr 1fr; }
    .card:nth-child(3) { grid-column:span 2; height:70vh; }
    .info-cards .card h1 { font-size:20px; }
    .card video { height:60%; margin-top:5%; }
    .my-project { margin-bottom:200px; scale:0.85; }
    .contact-section .section-title { left:30%; }
}

@media screen and (max-width:700px) {
    header { position:fixed; height:55px; }
    header ul { display:none; }
    header .box-icons { display:none; }
    .menu-icon { display:inline; }
    .blackhole-box video { width:100%; margin-top:-15%; }
    .autoBlur { animation:none; }
    .hero { flex-direction:column; top:0; bottom:0; left:0; right:0; }
    .hero-info { bottom:5%; }
    .scroll-down { bottom:5%; }
    .hero .skills-video-box { height:200px; top:5%; }
    .info-cards { grid-template-columns:1fr; }
    .card:nth-child(3) { grid-column:span 1; height:70vh; }
    .card video { width:100%; }
    .container { height:100%; }
    .project-vidbox video { width:250px; margin-left:-100px; }
    .project-info { overflow:hidden; padding-left:0; margin-left:-50px; }
    .project-info h1 { font-size:20px; max-width:200px; text-wrap:wrap; }
    .project-info p  { font-size:10px; max-width:200px; min-width:0; }
    .project-info button { padding:5px 10px; }
    .my-project { margin-bottom:600px; }
    .project-card { flex-direction:column; margin-left:25%; gap:30px; }
    .project-vidbox { min-width:200px; }
    .project-info { width:85%; }
    .project-info h1 { text-wrap:nowrap; }
    .project-info p  { max-width:300px; }
    .Designer { top:15%; left:18%; }
    .Designer h1 { margin-bottom:0; margin-top:70px; }
    .coder { top:50%; left:18%; }
    .coder h1 { margin-bottom:0; }
    .slider .list .item img { width:70%; }
    .contact-section { flex-direction:column; margin-top:100px; margin-bottom:50px; }
    .social-box { margin-left:-90px; }
}

@media screen and (max-width:480px) {
    .hero .skills-video-box { display:none; }
    .blackhole-box { overflow:hidden; }
    .blackhole-box video { width:140%; margin-top:-27%; }
    .left { scale:0.9; margin-left:-30px; }
    .left h2 { font-size:20px; }
    .hero { scale:0.9; }
    .hero-info { bottom:15%; }
    .hero-info h1 { font-size:36px; }
    .scroll-down { bottom:15%; left:60%; }
    .section-title { font-size:28px; }
    .info-cards { display:flex; flex-direction:column; }
    .card { min-height:20rem; }
    .card h1 { font-size:18px; bottom:30%; }
    .project-card { height:50%; }
    .project-info p { margin-bottom:15px; }
    .project-info { margin-left:-80px; }
    .skills-box { height:120vh; margin-right:30px; }
    .slider { bottom:0%; }
    .contact-section { scale:0.9; height:120vh; }
    .contact-section .section-title { top:-30px; left:25%; }
}