:root {
    --bg-midnight: #08111f;
    --accent-cyan: #2ee6d6;
    --accent-pink: #ff4d8d;
    --card-bg-rgba: rgba(12, 22, 38, 0.56);
    --text-main: #f7fbff;
    --text-soft: rgba(247, 251, 255, 0.72);
    --line: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--accent-cyan), transparent 78%), transparent 28rem),
        radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--accent-pink), transparent 76%), transparent 30rem),
        linear-gradient(135deg, var(--bg-midnight), #101724 48%, #071016);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.glow-field-matrix {
    position: fixed;
    inset: 0;
    z-index: 0; /* Changed from -1 to 0 */
    overflow: hidden;
    pointer-events: none;
}

.hero-banner {
    width: 100%;
    min-height: 340px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.54)),
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.18), transparent 22rem),
        linear-gradient(120deg, #111c2c, #233548 44%, #151822);
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 1px solid var(--line);
    overflow: visible;
}

.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, black, transparent);
}

.hero-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 10%, rgba(255, 255, 255, 0.16) 42%, transparent 58%);
    animation: bannerSheen 8s ease-in-out infinite;
}

.profile-sphere-shell {
    position: absolute;
    left: 50%;
    bottom: -72px;
    width: 160px;
    height: 160px;
    transform: translateX(-50%);
    perspective: 900px;
}

.profile-3d-ball {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92), transparent 11%),
        radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.25), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.22)),
        #1f3148;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow:
        inset -28px -34px 52px rgba(0, 0, 0, 0.72),
        inset 18px 18px 34px rgba(255, 255, 255, 0.34),
        0 26px 70px rgba(0, 0, 0, 0.52),
        0 0 36px color-mix(in srgb, var(--accent-cyan), transparent 64%);
    animation: floatingCanvasBreath 4.8s ease-in-out infinite;
}

.sphere-ring {
    position: absolute;
    inset: -10px;
    border: 1px solid color-mix(in srgb, var(--accent-cyan), transparent 30%);
    border-radius: 50%;
    transform: rotateX(68deg) rotateZ(-10deg);
    animation: orbitRing 5.5s linear infinite;
}

.viewport-wrapper {
    width: min(1180px, calc(100% - 32px));
    margin: 106px auto 60px;
}

.identity-panel, .section-heading {
    text-align: center;
}

.eyebrow {
    color: var(--accent-cyan);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.glitch-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 6vw, 4.4rem);
    line-height: 1.02;
    text-shadow: 0 0 20px color-mix(in srgb, var(--accent-cyan), transparent 35%);
}

.section-heading {
    margin: 58px 0 22px;
}

.section-heading h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.35rem, 4vw, 2.1rem);
}

.floating-projects-band {
    overflow: hidden;
    margin: 48px 0 18px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.float-lane {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: driftProjects 28s linear infinite;
}

.float-project {
    width: 260px;
    min-height: 114px;
    padding: 18px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.065);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.grid-card {
    /* ... keep your existing properties ... */
    position: relative; /* Essential for containing the ::after element */
    overflow: hidden; 
}

.float-project h3, .grid-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    margin-bottom: 10px;
}

.float-project p, .grid-card p, .modal-copywriting p, .review-strip-card p {
    color: var(--text-soft);
    line-height: 1.55;
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.premium-glass-card, .grid-card, .review-strip-card {
    background: var(--card-bg-rgba);
    backdrop-filter: blur(20px) saturate(128%);
    -webkit-backdrop-filter: blur(20px) saturate(128%);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 58px rgba(0, 0, 0, 0.3);
}

.grid-card {
    appearance: none;
    border: 1px solid var(--line);
    color: #fff;
    text-align: left;
    min-height: 210px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.grid-card::after {
    content: "";
    position: absolute;
    /* Move these slightly to ensure they are visible inside the card padding */
    bottom: 20px; 
    right: 20px;
    width: 50px;
    height: 50px;
    border: 1px solid color-mix(in srgb, var(--accent-pink), transparent 35%);
    border-radius: 8px; /* Changed from 50% to a square/rounded-square look */
    pointer-events: none; /* Ensures it doesn't interfere with clicks */
    z-index: 1;
}

.grid-card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--accent-cyan), white 12%);
    box-shadow: 0 22px 74px rgba(0, 0, 0, 0.42);
}

.card-meta {
    color: var(--accent-pink);
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 22px;
    text-transform: uppercase;
}

.modal-backdrop-blur {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 22px;
    background: rgba(2, 5, 10, 0.72);
    backdrop-filter: blur(16px);
}

.modal-backdrop-blur.is-open { display: flex; }

.modal-container {

    width: min(1400px, 95vw);

    height: min(90vh, 900px);

    overflow: hidden;

    padding: 24px;

    position: relative;

    animation: modalFade .24s ease-out;
}

.modal-container.small-form { width: min(500px, 100%); }
.modal-container.large-list { width: min(1020px, 100%); }

.close-gate {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    
    /* Centering the "X" inside the button */
    display: flex;
    align-items: center;
    justify-content: center;
    
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    
    /* Reduced font size for better icon scale */
    font-size: 1.1rem; 
    line-height: 1;
    z-index: 3;
    
    /* Add cursor and transition for better UX */
    cursor: pointer;
    transition: background 0.2s ease;
}

.close-gate:hover {
    background: rgba(255, 255, 255, 0.15);
}

.review-close-btn{

    position:absolute;

    top:18px;
    right:18px;

    width:36px;
    height:36px;

    border-radius:10px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.6);

    font-size:1rem;

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:.2s;
}

.review-close-btn:hover{

    color:white;

    background:
        rgba(255,255,255,.08);
}

.modal-split-viewport {

    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(350px,.85fr);

    gap:30px;

    height:100%;
}

.slider-viewport {
    min-height: 340px;
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #05080c;
    border: 1px solid var(--line);
}

.slider-rail {
    display: flex;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide-frame {
    min-width: 100%;
    height: 100%;
}

.slide-frame img, .slide-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.floating-media-orbits{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;
}

.media-orbit-thumb{

    position:absolute;

    width:72px;

    height:72px;

    border-radius:18px;

    object-fit:cover;

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    opacity:.7;

    animation:orbitFloat 8s ease-in-out infinite;
}

@keyframes orbitFloat{

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

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

.slider-nav-arrows {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    pointer-events: none;
}

.slider-nav-arrows button {
    pointer-events: auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
}

.modal-copywriting {

    display:flex;

    flex-direction:column;

    gap:18px;

    height:100%;

    overflow-y:auto;

    padding:20px 12px;

    scrollbar-width:thin;
}

.modal-copywriting h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    margin-bottom: 18px;
}

#modalDesc {

    line-height:1.9;

    color:rgba(255,255,255,.78);

    white-space:pre-line;

    padding-right:10px;
}

#modalTechStack {

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.tech-pill {

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    font-size:.8rem;
}

#modalMeta {

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

#modalMeta span {

    padding:6px 12px;

    border-radius:999px;

    background:rgba(0,255,255,.08);

    border:1px solid rgba(0,255,255,.15);

    color:#76e6ff;

    font-size:.75rem;
}

.action-hyperlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.btn-premium-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--accent-pink), white 10%);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.btn-premium-glass.secondary {
    border-color: color-mix(in srgb, var(--accent-cyan), white 10%);
}

.btn-premium-glass:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--accent-pink), transparent 70%);
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent-pink), transparent 48%);
}

.reviews-heading { margin-top: 74px; }

.reviews-marquee-belt {
    overflow: hidden;
    padding: 20px 0 46px;
}

.marquee-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: loopMarquee 38s linear infinite;
}

.marquee-track:hover { animation-play-state: paused; }

.review-strip-card {
    width: 310px;
    min-height: 210px;
    padding: 18px;
}

.review-strip-card.pending {
    border-color: color-mix(in srgb, var(--accent-pink), white 12%);
}

.reviewer-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.reviewer-meta img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--accent-cyan);
}

.reviewer-meta a, .reviewer-meta h4 {
    color: #fff;
    font-size: 0.96rem;
    text-decoration: none;
}

.reviewer-meta small {
    display: block;
    color: var(--text-soft);
    font-size: 0.76rem;
    margin-top: 3px;
}

.stars {
    color: #ffd36a;
    margin-bottom: 10px;
}

.status-pill {
    display: inline-flex;
    margin-left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent-pink);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.marquee-controls {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

form {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

form input, form textarea, form select {
    width: 100%;
    min-height: 44px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #fff;
}

form textarea {
    min-height: 118px;
    resize: vertical;
}

form input::file-selector-button {
    border: 0;
    border-radius: 6px;
    padding: 8px 10px;
    margin-right: 10px;
    background: var(--accent-cyan);
    color: #031014;
    font-weight: 700;
}

.rating-label {
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.form-note {
    min-height: 20px;
    color: var(--accent-cyan);
    font-size: 0.86rem;
}

.all-reviews-scroll-bin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    max-height: 68vh;
    overflow-y: auto;
    margin-top: 22px;
    padding-right: 8px;
}

.floating-glass-node {
    position: absolute;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    backdrop-filter: blur(8px);
    animation: driftEngine 22s linear infinite;
}

@keyframes bannerSheen {
    0% { transform: translateX(-55%); opacity: 0; }
    45%, 55% { opacity: 0.8; }
    100% { transform: translateX(55%); }
}

@keyframes floatingCanvasBreath {
    0%, 100% { transform: translateY(0) rotateY(-8deg); }
    50% { transform: translateY(-14px) rotateY(8deg); }
}

@keyframes orbitRing {
    from { transform: rotateX(68deg) rotateZ(0); }
    to { transform: rotateX(68deg) rotateZ(360deg); }
}

@keyframes driftEngine {
    0% { transform: translateY(110vh) rotate(0deg); opacity: 0; }
    15%, 85% { opacity: 0.56; }
    100% { transform: translateY(-20vh) rotate(360deg); opacity: 0; }
}

@keyframes driftProjects {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes loopMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes tinyFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

@keyframes modalFade {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 780px) {
    .hero-banner { min-height: 270px; }
    .profile-sphere-shell { width: 132px; height: 132px; bottom: -58px; }
    .viewport-wrapper { margin-top: 88px; width: min(100% - 24px, 1180px); }
    .modal-split-viewport { grid-template-columns: 1fr; }
    .slider-viewport { min-height: 240px; }
    .modal-container { padding: 20px; }
    .review-strip-card { width: 284px; }
}

/* ==================================================
   UPGRADE MODULES: Added for New Link Sections
   ================================================== */

.module-container {
    background: var(--card-bg-rgba);
    backdrop-filter: blur(20px) saturate(128%);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 2.5rem;
    margin: 40px auto;
    width: min(1180px, calc(100% - 32px));
    transition: transform 0.3s ease;
}

.module-container:hover {
    border-color: color-mix(in srgb, var(--accent-cyan), white 12%);
}

.module-header {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem;
    text-align: center;
}

.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.btn-link-module {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s ease;
}

.btn-link-module:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    transform: translateY(-2px);
}

/* About Module Glass Styling */
.about-glass-card {
    background: var(--card-bg-rgba); /* Uses your theme's semi-transparent background */
    backdrop-filter: blur(20px) saturate(128%); /* Creates the primary frosted glass effect */
    -webkit-backdrop-filter: blur(20px) saturate(128%); /* Safari compatibility */
    border: 1px solid var(--line); /* Defines the panel edge */
    border-radius: 8px; /* Consistent rounding */
    box-shadow: 0 18px 58px rgba(0, 0, 0, 0.3); /* Adds depth */
    padding: 2.5rem;
    margin: 40px auto;
    width: min(1180px, calc(100% - 32px));
    text-align: center;
}

.about-glass-card h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--text-main);
    margin-bottom: 1.5rem;
}

.about-glass-card p {
    color: var(--text-soft); /* Uses your defined soft text color */
    line-height: 1.6;
}


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

::-webkit-scrollbar-thumb {
    background: rgba(46, 230, 214, 0.4);
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

.hero-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Keeps the banner balanced but allows it space */
    gap: 40px;
    align-items: start;
    width: min(1200px, calc(100% - 40px));
    margin: 40px auto;
}

.hero-layout, .viewport-wrapper {
    position: relative;
    z-index: 1; /* Keeps content above the background nodes */
}

.hero-left {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the logo and name horizontally */
    text-align: center;
    gap: 20px;
}

.profile-circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--accent-cyan);
}

.name-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem; /* Smaller font size as requested */
    color: #fff;
    margin: 0;
}

.intro-box {
    width: 100%;
    padding: 20px;
    background: var(--card-bg-rgba);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: left; /* Keeps intro text inside the box left-aligned */
}

.intro-box p {
    text-align: justify;
    line-height: 1.6;
    margin: 0;
    /* Add these to improve rendering */
    hyphens: auto; 
    word-break: break-word; 
    /* Ensures the text doesn't look stretched if the container is tight */
    text-justify: inter-word; 
}

.hero-right {
    width: 100%;
    aspect-ratio: 1.5 / 1; 
    background-size: contain; /* Changed from cover to prevent cropping */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Subtle Glass Effect */
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px); /* Reduced blur for better clarity */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 900px) {
    .hero-layout {
        grid-template-columns: 1fr;
    }

    .hero-right {
        order: -1; 
        aspect-ratio: 16 / 9;
        background-size: contain; 
        min-height: 200px;
        /* Re-apply glass effect properties if they get lost on mobile */
        background-color: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(5px);
    }

    .intro-box p {
        text-align: left;
        hyphens: none;
    }
}

.project-filter-bar{

    margin-bottom:40px;

    padding:26px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.filter-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.filter-header h3{
    font-size:1.2rem;
    font-weight:700;
}

.filter-icon{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:rgba(255,255,255,.05);

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

    font-size:1.2rem;
}

.filter-pills{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.filter-pill{

    padding:10px 18px;

    border-radius:999px;

    font-weight:600;

    font-size:.85rem;

    letter-spacing:.3px;

    transition:.3s ease;
}

.filter-pill:hover{
    transform:translateY(-2px);

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

    color:var(--accent-cyan);
}

.filter-pill.active{

    background:
        linear-gradient(
            135deg,
            #53e4ff,
            #ff5cb8
        );

    color:#07111c;

    font-weight:700;

    box-shadow:
        0 10px 30px rgba(83,228,255,.25);
}

.grid-card{

    position:relative;

    display:flex;
    flex-direction:column;

    gap:18px;

    min-height:280px;

    padding:28px;

    border:none;

    cursor:pointer;

    text-align:left;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.03)
        );

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s ease;

    overflow:hidden;
}

.grid-card:hover{

    transform:translateY(-8px);

    border-color:rgba(83,228,255,.35);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);
}

.project-card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.project-category{

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:1.5px;

    color:#63ddff;

    font-weight:700;
}

.project-status-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#32ffb4;

    box-shadow:
        0 0 15px #32ffb4;
}

.project-title{

    margin:0;

    font-size:1.35rem;

    font-weight:700;

    line-height:1.35;

    color:white;
}

.project-description{

    margin:0;

    color:rgba(255,255,255,.68);

    line-height:1.7;

    font-size:.92rem;
}

.project-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.mini-tag{

    padding:8px 14px;

    border-radius:999px;

    background:
        rgba(83,228,255,.08);

    border:
        1px solid rgba(83,228,255,.15);

    color:#9eeeff;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.3px;
}

.project-footer{

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:18px;

    border-top:
        1px solid rgba(255,255,255,.06);
}

.project-meta{

    display:flex;

    flex-direction:column;

    gap:4px;
}

.project-status{

    color:#7fe7ff;

    font-size:.8rem;

    font-weight:600;
}

.project-year{

    color:rgba(255,255,255,.45);

    font-size:.75rem;
}

.project-arrow{

    font-size:1.5rem;

    color:#7fe7ff;

    transition:.3s;
}

.grid-card:hover .project-arrow{

    transform:translateX(8px);
}

.empty-project-state{

    grid-column:1/-1;

    padding:60px;

    text-align:center;
}

@media (max-width: 1000px) {

    .modal-container {

        width:95vw;

        height:90vh;
    }

    .modal-split-viewport {

        grid-template-columns:1fr;

        overflow-y:auto;
    }

    .slider-viewport {

        min-height:280px;

        height:280px;
    }

    .modal-copywriting {

        overflow:visible;

        height:auto;
    }
}

/* ========================================
   CONNECT SECTION
======================================== */

#socialLinksModule{

    position:relative;

    overflow:hidden;

    padding:38px;

    border-radius:32px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(24px);
}

/* top heading */

.connect-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:28px;
}

.connect-header-left h3{

    margin:0;

    font-size:1.6rem;

    font-weight:700;
}

.connect-header-left p{

    margin-top:8px;

    color:rgba(255,255,255,.65);
}

/* availability badge */

.availability-status{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:
        rgba(46,255,180,.08);

    border:
        1px solid rgba(46,255,180,.18);
}

.availability-status::before{

    content:'';

    width:10px;
    height:10px;

    border-radius:50%;

    background:#2effb4;

    box-shadow:0 0 12px #2effb4;
}

.contact-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:22px;
}

.contact-card{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:28px;

    border-radius:24px;

    text-decoration:none;

    color:white;

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(255,255,255,.06);

    transition:.35s ease;

    overflow:hidden;
}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:
        rgba(120,220,255,.25);

    box-shadow:
        0 25px 50px rgba(0,0,0,.35);
}

#socialLinksModule{

    position:relative;

    overflow:hidden;

    padding:38px;

    border-radius:32px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(24px);
}


.contact-card{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:28px;

    border-radius:24px;

    text-decoration:none;

    color:white;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(255,255,255,.08);

    transition:.35s ease;

    overflow:hidden;
}

.contact-card::after{

    content:'';

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    top:-80px;

    right:-80px;

    background:
        radial-gradient(
            rgba(83,228,255,.12),
            transparent 70%
        );

    pointer-events:none;
}

.contact-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );

    border:
        1px solid rgba(255,255,255,.08);

    font-size:1.5rem;
}

.contact-card h4{

    margin:0;

    font-size:1.1rem;

    font-weight:700;
}

.contact-card p{

    margin:0;

    line-height:1.7;

    color:rgba(255,255,255,.68);

    font-size:.92rem;
}

.contact-footer{

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:16px;

    border-top:
        1px solid rgba(255,255,255,.05);
}

.contact-link-label{

    color:#79e5ff;

    font-weight:600;
}

.contact-arrow{

    font-size:1.3rem;

    transition:.3s;
}

.contact-card:hover .contact-arrow{

    transform:translateX(6px);
}

.connect-cta{

    margin-top:30px;

    padding:26px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(75,160,255,.08),
            rgba(46,255,180,.05)
        );

    border:
        1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;
}

@media (max-width:768px){

    .connect-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .connect-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:28px;
    }

    .connect-cta{

        flex-direction:column;

        align-items:flex-start;
    }

    .contact-grid{

        grid-template-columns:1fr;
    }
}

/* ========================================
   CONTACT SECTION
======================================== */

.contact-section{

    margin-top:40px;
    margin-bottom:40px;
}

.contact-panel{

    display:grid;

    grid-template-columns:
        420px 1fr;

    gap:30px;

    padding:40px;

    border-radius:32px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

    backdrop-filter:blur(24px);

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

    border:
        1px solid rgba(255,255,255,.08);

    overflow:hidden;

    position:relative;
}

.contact-panel::before{

    content:'';

    position:absolute;

    width:420px;
    height:420px;

    right:-180px;
    top:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(83,228,255,.12),
            transparent 70%
        );

    pointer-events:none;
}

/* ========================================
   LEFT SIDE
======================================== */

.contact-info{

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.contact-info h2{

    margin:12px 0 18px;

    font-size:2rem;

    font-weight:700;

    line-height:1.2;
}

.contact-intro{

    color:rgba(255,255,255,.68);

    line-height:1.8;

    margin-bottom:30px;
}

.contact-details{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.contact-detail{

    display:flex;

    gap:16px;

    align-items:flex-start;

    padding:18px;

    border-radius:18px;

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(255,255,255,.06);
}

.contact-detail span{

    font-size:1.3rem;
}

.contact-detail strong{

    display:block;

    margin-bottom:4px;

    color:white;
}

.contact-detail p{

    margin:0;

    color:rgba(255,255,255,.65);
}

/* ========================================
   FORM SIDE
======================================== */

.contact-form-panel{

    display:flex;

    align-items:center;
}

#contactForm{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:18px;
}

.contact-row{

    display:grid;

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

    gap:18px;
}

#contactForm input,
#contactForm textarea{

    width:100%;

    padding:16px 18px;

    border-radius:16px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.08);

    color:white;

    font-size:.95rem;

    outline:none;

    transition:.3s ease;
}

#contactForm textarea{

    resize:vertical;

    min-height:180px;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder{

    color:
        rgba(255,255,255,.45);
}

#contactForm input:focus,
#contactForm textarea:focus{

    border-color:
        rgba(83,228,255,.35);

    box-shadow:
        0 0 0 4px rgba(83,228,255,.08);
}

/* ========================================
   BUTTON
======================================== */

#submitBtn{

    width:max-content;

    min-width:200px;

    margin-top:8px;

    font-weight:700;

    letter-spacing:.4px;
}

#submitBtn:disabled{

    opacity:.7;

    cursor:not-allowed;
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 1000px){

    .contact-panel{

        grid-template-columns:1fr;

        padding:28px;
    }

    .contact-row{

        grid-template-columns:1fr;
    }

    .contact-info h2{

        font-size:1.7rem;
    }
}

@media (max-width: 768px){

    .contact-panel{

        padding:24px;
    }

    .contact-info h2{

        font-size:1.5rem;
    }

    #submitBtn{

        width:100%;
    }
}


/* ==========================================
   DRAWER
========================================== */

.reviews-drawer{
    position:fixed;
    top:0;
    right:-100%;
    width:520px;
    max-width:100%;
    height:100vh;

    display:flex;
    flex-direction:column;

    background:rgba(10,15,30,.92);
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);

    border-left:1px solid rgba(255,255,255,.08);

    z-index:9999;

    transition:.45s ease;
}

.reviews-drawer.open{
    right:0;
}

.drawer-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;
}

.drawer-overlay.open{

    opacity:1;

    visibility:visible;
}

.drawer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:24px 28px;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.drawer-header h2{
    margin:0;
    font-size:1.5rem;
}

.drawer-content{
    flex:1;
    overflow-y:auto;

    padding:24px;

    display:grid;
    gap:18px;
}

.drawer-content::-webkit-scrollbar{
    width:8px;
}

.drawer-content::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:999px;
}

.review-card-full{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:20px;

    display:flex;
    flex-direction:column;
    gap:16px;

    height:auto;
    min-height:unset;
    max-height:none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.review-card-full:hover{
    transform:translateY(-2px);

    border-color:rgba(255,255,255,.14);

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);
}


/* ========================================
   Reviews
======================================== */

.review-modal{

    width:min(720px,95vw);

    padding:40px;

    border-radius:32px;

    background:
    linear-gradient(
        180deg,
        rgba(15,20,35,.96),
        rgba(8,12,20,.96)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(40px);

    box-shadow:
        0 40px 120px rgba(0,0,0,.55),
        0 0 0 1px rgba(83,228,255,.05);

    position:relative;

    overflow:hidden;
}

.review-modal::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    top:-150px;
    right:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(83,228,255,.12),
            transparent 70%
        );

    pointer-events:none;
}

.review-modal h2{

    font-size:2rem;

    margin-bottom:24px;

    font-weight:700;

    letter-spacing:-.03em;
}

.review-modal input,
.review-modal textarea{

    width:100%;

    background:
        rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:16px 18px;

    color:white;

    margin-bottom:14px;

    transition:.25s;
}

.review-modal input:focus,
.review-modal textarea:focus{

    outline:none;

    border-color:#34d7ff;

    box-shadow:
        0 0 0 4px rgba(52,215,255,.15);
}

.star-picker{
    display:flex;
    flex-direction:row-reverse;
    justify-content:center;
    gap:4px;
}

.star-picker input{
    display:none;
}

.star-picker label{
    font-size:2.4rem;
    color:rgba(255,255,255,.2);
    cursor:pointer;
    transition:.25s;
}

.star-picker label:hover,
.star-picker label:hover ~ label{
    color:#ffd54f;
}

.star-picker input:checked ~ label{
    color:#ffd54f;
}

.star-picker span{
    font-size:2rem;
    color:rgba(255,255,255,.25);
    transition:.2s;
}

.star-picker label:hover span{
    color:#ffd54f;
    transform:scale(1.1);
}

.star-picker input:checked + span{
    color:#ffd54f;
}

.review-modal button{

    height:56px;

    border:none;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #00d4ff,
            #00ffa3
        );

    color:#071018;

    font-weight:700;

    cursor:pointer;

    transition:.25s;
}

.review-modal button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 15px 35px rgba(0,212,255,.3);
}

.review-card{

    width:420px;

    min-height:260px;

    padding:28px;

    border-radius:28px;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        rgba(18,24,38,.95),
        rgba(10,14,22,.95)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(24px);

    transition:.35s ease;
}

.review-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(83,228,255,.12),
        transparent 45%
    );

    opacity:0;

    transition:.35s;

    pointer-events:none;
}

.review-card:hover{

    transform:
        translateY(-8px);

    border-color:
        rgba(83,228,255,.25);

    box-shadow:
        0 30px 70px rgba(0,0,0,.35);
}

.review-card:hover::before{

    opacity:1;
}

.review-avatar{
    width:56px;
    height:56px;

    border-radius:50%;
    object-fit:cover;

    flex-shrink:0;

    border:2px solid rgba(255,255,255,.1);
}

.review-top h4{
    margin:0;

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;

    color:#fff;
    font-size:15px;
    font-weight:600;

    word-break:break-word;
}

.review-profile-link{
    color:#fff;
    text-decoration:none;

    position:relative;
    z-index:2;
}

.review-profile-link:hover{
    color:#8cbcff;
}

.review-card-full p{
    margin:0;

    line-height:1.8;
    color:var(--text-soft);

    max-height:90px;
    overflow:hidden;

    position:relative;

    transition:max-height .35s ease;
}

.verified-badge{
    display:inline-flex;
    align-items:center;

    padding:4px 10px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;

    color:#8fffc2;

    background:
        rgba(0,255,120,.08);

    border:
        1px solid rgba(0,255,120,.18);
}

.review-text{
    position:relative;

    overflow:hidden;

    max-height:120px;

    line-height:1.8;

    color:rgba(255,255,255,.82);

    word-break:break-word;
}

.review-text.has-overflow::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:24px;

    pointer-events:none;

    background:linear-gradient(
        to bottom,
        rgba(10,15,30,0),
        rgba(10,15,30,.95)
    );
}

/* =========================================
   Drawer Review Cards
========================================= */

.review-card-full p{
    position:relative;

    overflow:hidden;

    max-height:90px;

    line-height:1.75;

    color:rgba(255,255,255,.82);

    word-break:break-word;

    transition:max-height .35s ease;
}

.review-card-full.has-overflow p::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:50px;

    pointer-events:none;

    background:linear-gradient(
        to bottom,
        rgba(10,15,30,0),
        rgba(10,15,30,.95)
    );
}

.review-card-full.expanded p{
    max-height:none;
}

.review-card-full.expanded p::after{
    display:none;
}

.review-card-full.has-overflow{
    cursor:pointer;
}

/* Optional Hover */

.review-card-full.has-overflow:hover{
    transform:translateY(-2px);
}

.review-stars{

    margin-top:6px;

    color:#ffcf4d;

    letter-spacing:2px;
}

.review-modal form{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.review-modal textarea{
    min-height:140px;
    resize:none;
}

.review-top{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}

.review-user-info{
    flex:1;
}

.review-user-info h4{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0;
}

.reviews-marquee-belt{

    position:relative;

    overflow:hidden;

    margin-top:40px;
}

.marquee-track{
    display:flex;
    gap:24px;

    width:max-content;

    animation:none;
}

.marquee-track.marquee-active{
    animation:
        reviewMarquee 40s linear infinite;
}

.marquee-track:hover{
    animation-play-state:paused;
}

@keyframes reviewMarquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

.marquee-track::-webkit-scrollbar{
    display:none;
}

.drawer-close-btn{
    width:36px;
    height:36px;

    border:none;
    border-radius:10px;

    background:rgba(255,255,255,.06);

    color:#fff;

    cursor:pointer;

    font-size:20px;
}

.drawer-close-btn:hover{
    background:rgba(255,255,255,.12);
}

.drawer-close-btn:hover{
    transform:translateY(-2px);

    background:
        rgba(255,255,255,.1);

    border-color:
        rgba(83,228,255,.3);
}

.modal-backdrop-blur {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: 0.25s ease;
    z-index: 9999;
}

.modal-backdrop-blur.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.premium-glass-card.payment-modal {
    width: min(420px, 92vw);
    padding: 28px;
    border-radius: 20px;

    background: rgba(20, 20, 30, 0.75);
    backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 25px 80px rgba(0,0,0,0.6);

    position: relative;

    animation: popIn 0.25s ease;
}

@keyframes popIn {
    from {
        transform: scale(0.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* CLOSE BUTTON — THIS is your main fix */
.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 36px;
    height: 36px;

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

    background: rgba(255,255,255,0.06);
    color: white;

    font-size: 20px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: 0.2s ease;
}

.modal-close:hover {
    background: rgba(255,255,255,0.12);
    transform: scale(1.05);
}

/* PayPal container */
.paypal-shell {
    margin-top: 16px;
    padding: 16px;

    border-radius: 16px;

    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);

    backdrop-filter: blur(10px);
}

.contra-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
}

.contra-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}