/* ------------------------------
   GLOBAL RESET + BASE STYLES
--------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #0d0d0d;
    color: #e5e5e5;
    font-family: "Inter", sans-serif;
    line-height: 1.7;
    overflow-x: hidden;
}

/* ------------------------------
   HEADER / NAVBAR
--------------------------------*/
.header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 18px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;

    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo-link {
    display: flex;
    align-items: center;
}

.logo-text {
    font-family: 'Great Vibes', cursive;
    font-size: 38px;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
    /* Adding subtle shadow for "not too thin" look */
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

.nav a {
    margin-left: 24px;
    text-decoration: none;
    color: #aaa;
    font-size: 15px;
    transition: 0.3s;
}

.nav a:hover,
.nav a.active {
    color: #4cc9f0;
}

/* ------------------------------
   SECTION STYLE
--------------------------------*/
.section {
    padding: 80px 12%;
    width: 100%;
}

.section-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 26px;
    color: #fff;
}

.text {
    font-size: 18px;
    color: #dcdcdc;
    max-width: 850px;
}

/* ------------------------------
   HERO SECTION
--------------------------------*/
.hero {
    padding-top: 160px;
    display: flex;
    justify-content: center;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    /* Ensures vertical centering */
    width: 100%;
}

/* Ensure no stray margins break alignment */
.hero-text h1,
.hero-text h2,
.hero-text p {
    margin-top: 0;
}

.hero-text {
    text-align: left;
}

.title {
    font-size: 52px;
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.1;
}

.name-highlight {
    background: linear-gradient(90deg, #4cc9f0, #4361ee, #f72585);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    font-size: 26px;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 24px;
}

.description {
    font-size: 18px;
    color: #b0b0b0;
    max-width: 500px;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Hero Socials */
.hero-socials {
    margin-top: 36px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.hero-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #1a1a1a;
    border-radius: 50%;
    transition: 0.3s;
    border: 1px solid #333;
    position: relative;
}

.hero-socials a:hover {
    background: #222;
    border-color: #4cc9f0;
    transform: translateY(-3px);
}

.hero-socials img {
    width: 20px;
    height: 20px;
}

/* Tooltip for Discord */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    bottom: 125%;
    /* Position above */
    left: 50%;
    margin-left: -70px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    pointer-events: none;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}


/* Hero Image */
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.image-blob img {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #1a1a1a;
    box-shadow: 0 0 30px rgba(76, 201, 240, 0.15);
}

.hero-buttons {
    margin-top: 30px;
}

.btn {
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
}

.primary {
    background: #4cc9f0;
    color: #0d0d0d;
    font-weight: 600;
}

.secondary {
    border: 1px solid #4cc9f0;
    color: #4cc9f0;
    margin-left: 14px;
}

.full {
    width: 100%;
}

/* ------------------------------
   GRID + CARD COMPONENT
--------------------------------*/
.grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
    background: #151515;
    border: 1px solid #242424;
    border-radius: 12px;
    transition: 0.3s;
    overflow: hidden;
    /* For image */
    display: flex;
    flex-direction: column;
}

.card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.card-content {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card:hover {
    border-color: #4cc9f0;
    transform: translateY(-4px);
    box-shadow: 0 0 30px rgba(76, 201, 240, 0.35);
}

.card h3 {
    margin-bottom: 10px;
    font-size: 20px;
    color: #fff;
}

.card p,
.card li {
    font-size: 15px;
    color: #ccc;
    font-weight: 300;
}

.card ul {
    margin-top: 12px;
    padding-left: 20px;
    margin-bottom: 20px;
}

.card li {
    margin-bottom: 6px;
}

/* ------------------------------
   STICKY LOGO BAR
--------------------------------*/
.tech-logos {
    margin-top: auto;
    /* Pushes to bottom */
    display: flex;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* Optional subtle separator */
}

.tech-logos img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    transition: 0.3s;
}

.tech-logos img:hover {
    transform: scale(1.15);
}

/* ------------------------------
   HORIZONTAL TECH STACK SECTION
--------------------------------*/

.techstack-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.tech-column {
    padding-right: 20px;
}

.tech-heading {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.underline {
    width: 60px;
    height: 3px;
    background: #4cc9f0;
    margin: 6px 0 18px 0;
    border-radius: 2px;
}

.tech-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    padding: 6px 0;
}

.tech-item img {
    width: 24px;
    height: 24px;
}

.tech-item span {
    font-size: 16px;
    color: #ddd;
}

/* Responsive */
@media (max-width: 900px) {
    .techstack-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .techstack-container {
        grid-template-columns: 1fr;
    }
}



/* ------------------------------
   CONTACT SECTION
--------------------------------*/
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    /* 1fr for info, slightly larger for form */
    gap: 60px;
    align-items: flex-start;
}

/* Connect Info (Left) */
.contact-info h3 {
    font-size: 24px;
    margin-bottom: 12px;
    color: #fff;
}

.contact-info p {
    color: #bbb;
    margin-bottom: 30px;
    font-size: 16px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: #ccc;
    margin-bottom: 20px;
    font-size: 16px;
    transition: 0.3s;
}

.contact-item:hover {
    color: #4cc9f0;
}



.contact-item img {
    width: 24px;
    height: 24px;
    /* Removed filter to show original colors */
}

/* Contact Card (Right) */
.contact-card {
    background: #111;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #242424;
    transition: border-color 0.3s;
}

.contact-card:hover {
    border-color: #333;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #aaa;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 14px;
    background: #1a1a1a;
    border: 1px solid #262626;
    border-radius: 6px;
    color: #eee;
    font-size: 15px;
    outline: none;
    transition: 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #4cc9f0;
    background: #202020;
}

.contact-form textarea {
    height: 140px;
    resize: vertical;
}

.contact-form button {
    margin-top: 6px;
    background: linear-gradient(90deg, #4cc9f0, #4c9af0);
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.contact-form button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* ------------------------------
   FOOTER
--------------------------------*/
.footer {
    padding: 40px 0;
    text-align: center;
    background: #0a0a0a;
    margin-top: 60px;
    border-top: 1px solid #1d1d1d;
}

.social-links {
    margin-bottom: 12px;
}

.social-links a {
    margin: 0 10px;
    display: inline-block;
}

.social-links img {
    width: 24px;
    transition: 0.3s;
    /* Removed filter to show original colors */
}

/* Visitor Counter */
.visitor-citation {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

#visitor-count {
    color: #4cc9f0;
    font-weight: 600;
}

/* Removed hover effect on social images */

/* ------------------------------
   ANIMATIONS (SUBTLE)
--------------------------------*/
.fade-in,
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s forwards;
}

.fade-up {
    animation-delay: 0.2s;
}

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

/* ------------------------------
   RESPONSIVE DESIGN
--------------------------------*/
@media (max-width: 900px) {
    .section {
        padding: 60px 8%;
    }

    /* Hide logo on mobile to save space */
    .logo-text {
        display: none;
    }

    /* Add more space for mobile hero to prevent overlap */
    .hero {
        padding-top: 160px;
    }

    .title {
        font-size: 40px;
    }

    .header {
        padding: 16px 24px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hero-text {
        text-align: center;
        order: 2;
        /* Image first on mobile? Or text first. Standard is Image first often, but text first is also good. Let's stick to text top for now or let default order play out. Actually default is text first. */
    }

    .description {
        margin: 0 auto 30px auto;
    }

    .hero-buttons {
        justify-content: center;
        display: flex;
    }

    .hero-socials {
        justify-content: center;
    }

    .image-blob img {
        width: 280px;
        height: 280px;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .title {
        font-size: 30px;
    }

    .nav a {
        margin-left: 14px;
    }
}

/* ... existing styles ... */

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}