:root {
                    --bg-dark: #050510;
                    --glass: rgba(255, 255, 255, 0.08);
                    --border-glass: rgba(255, 255, 255, 0.15);
                    --primary: #7b61ff;
                    --primary-dark: #6147bd;
                    --text-muted: #b5b5c3;
                    --transition-base: 0.3s ease;
                  }

                  /* Fix dropdown/select options for dark theme */
                  .form-select,
                  .form-control,
                  select {
                    background-color: rgba(255, 255, 255, 0.05) !important;
                    color: #fff !important;
                  }

                  .form-select option,
                  select option {
                    background-color: #1a1a2e !important;
                    color: #fff !important;
                    padding: 10px;
                  }

                  .form-select option:hover,
                  .form-select option:checked,
                  select option:hover,
                  select option:checked {
                    background-color: #7b61ff !important;
                    color: #fff !important;
                  }

                  /* Contact form select styling */
                  .contact-select option {
                    background-color: #1a1a2e !important;
                    color: #fff !important;
                  }

                  /* Smooth scrolling for better UX */
                  html {
                    scroll-behavior: smooth;
                  }

                  /* Reduced motion for accessibility */
                  @media (prefers-reduced-motion: reduce) {
                    html {
                      scroll-behavior: auto;
                    }
                    *, *::before, *::after {
                      animation-duration: 0.01ms !important;
                      animation-iteration-count: 1 !important;
                      transition-duration: 0.01ms !important;
                    }
                  }

                  /* Add gabarito font into all title*/
                  h1,
                  h2 {
                    font-family: 'Gabarito', sans-serif;

                  }

                  body {
                    margin: 0;
                    padding: 0;
                    overflow-x: hidden;
                    font-family: "Inter", sans-serif;
                    background: radial-gradient(#0b0b24, #020210);
                    background-attachment: fixed;
                    color: #fff;
                    min-height: 100vh;
                  }

                  body::after {
                    content: '';
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.04"/%3E%3C/svg%3E');
                    pointer-events: none;
                    z-index: -1;
                    opacity: 0.04;
                  }

                  /* NAVBAR */
                  .navbar-glass {
                    background: linear-gradient(180deg,
                        rgba(255, 255, 255, 0.08),
                        rgba(255, 255, 255, 0.02));
                    backdrop-filter: blur(14px);
                    border: 1px solid var(--border-glass);
                    border-radius: 60px;
                    padding: 12px 24px;
                  }

                  .navbar-logo {
                    height: 40px;
                    width: auto;
                  }

                  .navbar-brand {
                    font-weight: 700;
                    letter-spacing: 1px;
                  }

                  .nav-link {
                    color: #dcdce8 !important;
                    padding: 8px 18px !important;
                    border-radius: 30px;
                  }

                  .nav-link.active {
                    background: var(--glass);
                  }

                  /* Focus states for accessibility */
                  .nav-link:focus-visible,
                  .btn-primary-gradient:focus-visible,
                  .btn-outline-light:focus-visible,
                  a:focus-visible {
                    outline: 2px solid var(--primary);
                    outline-offset: 2px;
                  }

                  /* Skip to content link for accessibility */
                  .skip-link {
                    position: absolute;
                    top: -100%;
                    left: 50%;
                    transform: translateX(-50%);
                    background: var(--primary-dark);
                    color: #fff;
                    padding: 12px 24px;
                    border-radius: 8px;
                    z-index: 9999;
                    transition: top 0.3s ease;
                  }

                  .skip-link:focus {
                    top: 10px;
                  }

                  .btn-primary-gradient {
                    background: #6147bd;
                    border: none;
                    border-radius: 30px;
                    padding: 10px 24px;
                    color: #fff;
                    font-weight: 600;
                    position: relative;
                    overflow: hidden;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 15px rgba(97, 71, 189, 0.4);
                  }

                  .btn-primary-gradient:hover {
                    /* transform: translateY(-3px); */
                    background: #7155d9;
                    box-shadow: 0 10px 25px rgba(123, 97, 255, 0.6);
                  }



                  /* HERO */
                  .hero {
                    position: relative;
                    min-height: 100vh;
                    display: flex;
                    align-items: center;
                    /* justify-content: center; removed to let row handle it */
                    padding: 140px 0 100px;
                    /* text-align: left; default */
                    /* background-color: #020210; Removed for seamless background */
                    overflow: hidden;
                    /* z-index: 1; Removed to allow background shapes to be behind everything */
                  }

                  /* Dynamic Background Elements */
                  .hero::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: radial-gradient(circle at 30% 40%, rgba(123, 97, 255, 0.12) 0%, rgba(2, 2, 16, 0) 60%);
                    z-index: -1;
                    animation: pulse 6s ease-in-out infinite;
                    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
                    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
                  }

                  /* Hero noise moved to body for seamless texture */

                  .hero-shapes {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100vh;
                    overflow: hidden;
                    z-index: -1;
                    pointer-events: none;
                  }

                  .hero-shape {
                    position: absolute;
                    filter: blur(90px);
                    opacity: 0.5;
                    animation: float 12s ease-in-out infinite;
                  }

                  .hero-shape-1 {
                    top: -10%;
                    left: -5%;
                    width: 45vw;
                    height: 45vw;
                    background: rgba(111, 75, 255, 0.25);
                    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
                    animation-delay: 0s;
                  }

                  .hero-shape-2 {
                    bottom: -10%;
                    right: -10%;
                    width: 35vw;
                    height: 35vw;
                    background: rgba(45, 212, 191, 0.15);
                    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
                    animation-delay: -5s;
                  }

                  .hero-content {
                    position: relative;
                    z-index: 2;
                  }

                  .hero-badge {
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    padding: 8px 16px;
                    border-radius: 30px;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    background: rgba(255, 255, 255, 0.05);
                    font-size: 14px;
                    margin-bottom: 30px;
                    backdrop-filter: blur(10px);
                    animation: fadeInUp 0.8s ease-out forwards;
                    opacity: 0;
                    color: #dcdce8;
                  }

                  .badge-icon img {
                    animation: spin 2000ms linear infinite;
                  }

                  @keyframes spin {
                    from {
                      transform: rotate(0deg);
                    }

                    to {
                      transform: rotate(360deg);
                    }
                  }

                  .hero h1 {
                    font-size: clamp(3rem, 6vw, 4.8rem);
                    font-weight: 700;
                    line-height: 1.1;
                    margin-bottom: 24px;
                    background: linear-gradient(135deg, #fff 0%, #a5a5b5 100%);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                    animation: fadeInUp 0.8s ease-out 0.2s forwards;
                    opacity: 0;
                    letter-spacing: -1.5px;
                  }

                  .hero h1 span {
                    color: #6147bd;
                    -webkit-text-fill-color: #6147bd;
                    /* font-style: italic; */
                  }

                  .hero p {
                    color: var(--text-muted);
                    max-width: 540px;
                    margin-bottom: 40px;
                    font-size: 18px;
                    line-height: 1.6;
                    animation: fadeInUp 0.8s ease-out 0.4s forwards;
                    opacity: 0;
                  }

                  .hero .btn-lg {
                    padding: 14px 32px;
                    border-radius: 40px;
                    font-size: 16px;
                    font-weight: 600;
                    animation: fadeInUp 0.8s ease-out 0.6s forwards;
                    opacity: 0;
                    position: relative;
                    overflow: hidden;
                    transition: all 0.3s ease;
                  }

                  .hero .btn-lg:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 10px 25px rgba(123, 97, 255, 0.4);

                  }



                  /* Button Shine Effect */
                  /* Button Shine Effect - Global */
                  .btn-primary-gradient::after,
                  .btn-primary::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -120%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                    transform: skewX(-20deg);
                    transition: 0.5s;
                  }

                  .btn-primary-gradient:hover::after,
                  .btn-primary:hover::after {
                    left: 100%;
                  }

                  /* Outline Button Styles */
                  .btn-outline-light {
                    border: 1px solid rgba(255, 255, 255, 0.3);
                    color: #fff;
                    background: transparent;
                  }

                  .btn-outline-light:hover {
                    background: rgba(255, 255, 255, 0.1);
                    border-color: #fff;
                    color: #fff;
                    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
                  }

                  /* Visual Mockup Styles */
                  .hero-visual {
                    height: 500px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    perspective: 1000px;
                    animation: fadeInUp 1s ease-out 0.4s forwards;
                    opacity: 0;
                  }

                  .glass-ui-card {
                    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    backdrop-filter: blur(20px);
                    border-radius: 20px;
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
                  }

                  .main-ui {
                    width: 380px;
                    padding: 20px;
                    transform: rotateY(-12deg) rotateX(6deg);
                    transition: transform 0.5s ease;
                  }

                  .hero-visual:hover .main-ui {
                    transform: rotateY(-5deg) rotateX(2deg) translateY(-10px);
                  }

                  /* UI Layout */
                  .ui-header {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    padding-bottom: 15px;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                  }

                  .ui-dots span {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.2);
                    display: inline-block;
                    margin-right: 6px;
                  }

                  .ui-title {
                    margin-left: auto;
                    font-size: 12px;
                    color: rgba(255, 255, 255, 0.5);
                    font-weight: 600;
                    letter-spacing: 0.5px;
                  }

                  .ui-message {
                    display: flex;
                    gap: 12px;
                    margin-bottom: 16px;
                  }

                  .ui-avatar {
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 10px;
                    font-weight: bold;
                    color: #fff;
                    flex-shrink: 0;
                  }

                  .ui-text .name {
                    display: block;
                    font-size: 12px;
                    font-weight: 500;
                    color: #fff;
                    margin-bottom: 2px;
                  }

                  .ui-text p {
                    font-size: 13px;
                    color: #b5b5c3;
                    margin: 0;
                    line-height: 1.4;
                    opacity: 1;
                    animation: none;
                    max-width: 100%;
                  }

                  .ui-input {
                    margin-top: 20px;
                    background: rgba(0, 0, 0, 0.3);
                    border-radius: 12px;
                    padding: 10px 14px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;
                    color: rgba(255, 255, 255, 0.4);
                  }

                  .ui-send {
                    color: #7b61ff;
                    cursor: pointer;
                  }

                  /* Floating Cards */
                  .floating-card {
                    position: absolute;
                    padding: 12px 16px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    min-width: 160px;
                    animation: floatCard 6s ease-in-out infinite;
                  }

                  .card-1 {
                    top: 15%;
                    right: 0;
                    animation-delay: 1s;
                  }

                  .card-2 {
                    bottom: 20%;
                    left: -20px;
                    animation-delay: 2s;
                  }

                  .icon-box-sm {
                    width: 36px;
                    height: 36px;
                    border-radius: 10px;
                    background: rgba(255, 255, 255, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }

                  .avatars-stack span {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    border: 2px solid #1a1a2e;
                    margin-right: -10px;
                  }

                  @keyframes floatCard {

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

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

                  /* Animations */
                  @keyframes fadeInUp {
                    from {
                      opacity: 0;
                      transform: translateY(30px);
                    }

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

                  @keyframes float {

                    0%,
                    100% {
                      transform: translate(0, 0) rotate(0deg);
                    }

                    33% {
                      transform: translate(30px, -40px) rotate(8deg);
                    }

                    66% {
                      transform: translate(-20px, 20px) rotate(-4deg);
                    }
                  }

                  @keyframes pulse {

                    0%,
                    100% {
                      opacity: 0.4;
                    }

                    50% {
                      opacity: 0.7;
                    }
                  }

                  /* MOBILE & TABLET HERO */
                  @media (max-width: 991px) {
                    .navbar-glass {
                      border-radius: 20px;
                      padding: 12px 20px;
                    }

                    .navbar-collapse {
                      margin-top: 10px;
                      text-align: center;
                    }

                    .navbar-nav {
                      width: 100%;
                    }

                    .hero {
                      text-align: center;
                      padding: 120px 15px 80px;
                      /* justify-content: center; */
                    }

                    .hero-badge {
                      margin: 0 auto 24px;
                    }

                    /* badge icon is spin this .png file  */



                    .hero h1 {
                      font-size: 3rem;
                    }

                    .hero p {
                      margin-left: auto;
                      margin-right: auto;
                    }

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

                    /* Optional: Show visual scaled down? Or keep hidden? 
                       User said "Fully mobile responsive". 
                       If we hide it, it's responsive. 
                       Let's leave it hidden (d-none d-lg-block in HTML) for cleaner mobile UX. 
                    */
                  }

                  /* Tiny Mobile */
                  @media (max-width: 480px) {
                    .hero h1 {
                      font-size: 2.4rem;
                    }

                    .hero-actions {
                      flex-direction: column;
                      gap: 16px;
                    }

                    .hero .btn-lg {
                      width: 100%;
                    }
                  }

                  /* ABOUT SECTION */
                  .about-section {
                    padding: 110px 16px;
                    /* background: radial-gradient(#0b0b24, #020210); */
                  }

                  .section-badge {
                    display: inline-block;
                    padding: 8px 20px;
                    border-radius: 30px;
                    background: rgba(255, 255, 255, 0.08);
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    font-size: 14px;
                    color: #fff;
                  }

                  .about-title {
                    font-size: clamp(2rem, 5vw, 3.5rem);
                    font-weight: 700;
                    margin-bottom: 20px;
                  }

                  .about-desc {
                    max-width: 900px;
                    font-size: 16px;
                    color: #b5b5c3;
                    line-height: 1.7;
                  }

                  .about-subdesc {
                    max-width: 800px;
                    margin: 30px auto 0;
                    color: #d0d0e4;
                    font-size: 15px;
                  }

                  /* ABOUT CARDS */
                  .about-card {
                    height: 100%;
                    padding: 40px 25px;
                    border-radius: 24px;
                    background: linear-gradient(180deg,
                        rgba(255, 255, 255, 0.08),
                        rgba(255, 255, 255, 0.02));
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    backdrop-filter: blur(14px);
                    transition: all 0.3s ease;
                    text-align: center;
                  }

                  .about-card:hover {
                    /* transform: translateY(-8px); */
                    border-color: rgba(255, 255, 255, 0.25);
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                    transform: translateY(-8px);
                    border-color: #7b61ff;
                  }

                  .about-card h4 {
                    margin-top: 20px;
                    font-weight: 600;
                  }

                  .about-card p {
                    color: #b5b5c3;
                    font-size: 14px;
                    margin-top: 10px;
                  }

                  /* ICON BOX */
                  .icon-box {
                    width: 60px;
                    height: 60px;
                    border-radius: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto;
                    font-size: 24px;
                    background: linear-gradient(135deg, #7b61ff, #a18bff);
                    color: #fff;
                  }

                  /* MOBILE */
                  @media (max-width: 768px) {
                    .about-section {
                      padding: 70px 15px;
                    }
                  }

                  /* =========================
               TEAM SECTION
           ========================= */

                  .team-section {
                    padding: 100px 0;
                    /* background: radial-gradient(circle at top, #0b0b24, #020210); */
                  }

                  .team-title {
                    font-size: clamp(2rem, 5vw, 3rem);
                    font-weight: 700;
                    text-align: center;
                    color: #ffffff;
                  }

                  .team-subtitle {
                    text-align: center;
                    color: #b5b5c3;
                    font-size: 15px;
                    margin-top: 10px;
                    margin-bottom: 60px;
                  }

                  /* =========================
   GRID – 5 PER ROW
========================= */

                  .cards-grid-5 {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    gap: 24px;
                    max-width: 1400px;
                    margin: 0 auto;
                    padding: 0 20px;
                  }

                  /* =========================
   TEAM CARD
========================= */

                  .team-card-v2 {
                    background: linear-gradient(180deg,
                        rgba(255, 255, 255, 0.08),
                        rgba(0, 0, 0, 0.9));
                    border-radius: 28px;
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    overflow: hidden;
                    transition: all 0.35s ease;
                    height: 300px;
                    display: flex;
                    flex-direction: column;
                  }

                  /* Hover */
                  .team-card-v2:hover {
                    /* transform: translateY(-8px); */
                    border-color: rgba(255, 255, 255, 0.25);
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                  }

                  .team-card-v2 .team-img img {
                    transition: transform 0.5s ease;
                  }

                  .team-card-v2:hover .team-img img {
                    transform: scale(1.06);
                  }

                  /* =========================
   IMAGE
========================= */

                  .team-img {
                    padding: 10px;
                  }

                  .team-img img {
                    width: 100%;
                    height: 200px;
                    object-fit: cover;
                    border-radius: 22px;
                  }

                  /* =========================
   CARD BODY
========================= */

                  .team-card-body {
                    padding: 14px 18px 18px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  }

                  .team-card-body h5 {
                    font-size: 12px;
                    font-weight: 600;
                    margin-bottom: 2px;
                    color: #ffffff;
                  }

                  .team-card-body span {
                    font-size: 10px;
                    color: #9fa0b5;
                  }

                  /* =========================
   SOCIAL ICONS
========================= */

                  .team-icons {
                    display: flex;
                    gap: 8px;
                  }

                  .team-icons a {
                    width: 32px;
                    height: 32px;
                    border-radius: 8px;
                    /* border: 1px solid rgba(255, 255, 255, 0.25); */
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #cfcfff;
                    font-size: 14px;
                    transition: all 0.3s ease;
                    text-decoration: none;
                  }

                  .team-icons a:hover {
                    /* background: #7b61ff; */
                    /* border-color: #7b61ff; */
                    color: #ffffff;
                  }

                  /* =========================
   RESPONSIVE BREAKPOINTS
========================= */

                  /* Large tablets / small laptops */
                  @media (max-width: 1200px) {
                    .cards-grid-5 {
                      grid-template-columns: repeat(3, 1fr);
                    }
                  }

                  /* Tablets */
                  @media (max-width: 768px) {
                    .team-section {
                      padding: 70px 0;
                    }

                    .cards-grid-5 {
                      grid-template-columns: repeat(2, 1fr);
                      gap: 20px;
                    }

                    .team-card-v2 {
                      height: auto;
                    }

                    .team-img img {
                      height: 280px;
                    }
                  }

                  /* Mobile */
                  @media (max-width: 480px) {
                    .cards-grid-5 {
                      grid-template-columns: 1fr;
                    }

                    .team-title {
                      font-size: 26px;
                    }

                    .team-subtitle {
                      font-size: 14px;
                    }

                    .team-img img {
                      height: 260px;
                    }
                  }

                  /* =========================
   TEAM CARD V3 (New Design)
========================= */
                  .team-card-v3 {
                    background: linear-gradient(180deg,
                        rgba(255, 255, 255, 0.08),
                        rgba(255, 255, 255, 0.02));
                    /* Very dark background */
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    border-radius: 24px;
                    padding: 12px;
                    /* Inset padding for the content/image */
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;
                    height: 100%;
                  }

                  .team-card-v3:hover {
                    /* transform: translateY(-5px); */
                    border-color: rgba(255, 255, 255, 0.25);
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                    /* transform: translateY(-8px); */
                    /* border-color: #7b61ff; */
                  }

                  .team-card-v3-img {
                    width: 100%;
                    height: 220px;
                    /* aspect-ratio: 1 / 1; Removed to fit size better */
                    border-radius: 16px;
                    overflow: hidden;
                    margin-bottom: 20px;
                  }

                  .team-card-v3-img img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: top;
                    transition: transform 0.5s ease;
                  }

                  .team-card-v3:hover .team-card-v3-img img {
                    transform: scale(1.06);
                    /* Subtle zoom on hover */
                  }

                  .team-card-v3-content {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    /* Align bottom to match baseline effectively */
                    padding: 0 4px 8px 4px;
                  }

                  .team-info {
                    text-align: left;
                  }

                  .team-info h5 {
                    color: #fff;
                    font-size: 15px;
                    /* specific size */
                    font-weight: 600;
                    margin: 0 0 5px 0;
                  }

                  .team-info span {
                    color: #7d7d8e;
                    /* Muted gray */
                    font-size: 11px;
                    display: block;
                  }

                  .team-social-v3 {
                    display: flex;
                    gap: 8px;
                  }

                  .social-icon-box {
                    width: 40px;
                    height: 40px;
                    background: rgba(255, 255, 255, 0.08);
                    /* Re-enabled background */
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.3s ease;
                    text-decoration: none;
                  }

                  .social-icon-box svg,
                  .social-icon-box img {
                    width: 22px;
                    height: 22px;
                    fill: #fff;
                    opacity: 0.8;
                    transition: 0.3s;
                    object-fit: contain;
                  }

                  /* Filter for IMG tags to make them white if they are colored/black */
                  .social-icon-box img {
                    filter: brightness(0) invert(1);
                  }

                  .social-icon-box:hover {
                    background: rgba(255, 255, 255, 0.2);
                    transform: translateY(-3px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                  }

                  .social-icon-box:hover svg,
                  .social-icon-box:hover img {
                    opacity: 1;
                    transform: scale(1.1);
                  }


                  /* RESOURCES SECTION */
                  .resources-section {
                    padding: 110px 16px;
                    /* background: radial-gradient( #0c0c2a, #020210); */
                  }

                  .resources-title {
                    font-size: clamp(2.2rem, 5vw, 3.5rem);
                    font-weight: 700;
                  }

                  .resources-subtitle {
                    max-width: 800px;
                    color: #b5b5c3;
                    font-size: 15px;
                    margin-top: 10px;
                  }

                  /* FILTER BUTTONS */
                  .resource-filters {
                    display: flex;
                    gap: 14px;
                    justify-content: center;
                    flex-wrap: wrap;
                  }

                  .filter-btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    padding: 10px 26px;
                    border-radius: 14px;
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    background: #fff;
                    color: #1b1b2e;
                    font-size: 14px;
                    transition: 0.3s;
                    cursor: pointer;
                  }

                  .filter-btn svg {
                    width: 18px;
                    height: 18px;
                    fill: currentColor;
                  }

                  .filter-btn.active,
                  .filter-btn:hover {
                    background: #6147bd;
                    color: #fff;
                    border-color: #6147bd;
                  }

                  /* RESOURCE CARD */
                  .resource-card {
                    height: 100%;
                    border-radius: 26px;
                    background: linear-gradient(180deg,
                        rgba(255, 255, 255, 0.08),
                        rgba(255, 255, 255, 0.02));
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    overflow: hidden;
                    position: relative;
                    transition: 0.3s;
                  }

                  .resource-card:hover {
                    /* transform: translateY(-8px); */
                    border-color: rgba(255, 255, 255, 0.25);
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                  }

                  /* IMAGE */
                  .resource-card img {
                    width: 100%;
                    height: 180px;
                    object-fit: cover;
                    transition: transform 0.5s ease;
                  }

                  .resource-card:hover img {
                    transform: scale(1.06);
                  }

                  /* TAG */
                  .resource-tag {
                    position: absolute;
                    top: 14px;
                    right: 14px;
                    padding: 6px 14px;
                    font-size: 12px;
                    border-radius: 20px;
                    background: rgba(0, 0, 0, 0.6);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    z-index: 2;
                  }

                  /* BODY */
                  .resource-body {
                    padding: 22px;
                    text-align: left;
                  }

                  .resource-body h5 {
                    margin-bottom: 8px;
                  }

                  .resource-body p {
                    font-size: 14px;
                    color: #b5b5c3;
                    line-height: 1.6;
                  }

                  /* LINK */
                  .resource-link {
                    display: inline-block;
                    margin-top: 14px;
                    color: #7b61ff;
                    text-decoration: none;
                    font-size: 14px;
                  }

                  .resource-link:hover {
                    text-decoration: underline;
                  }

                  /* MOBILE */
                  @media (max-width: 768px) {
                    .resources-section {
                      padding: 80px 15px;
                    }
                  }

                  /* ===============================
         EVENTS SECTION
      ================================ */



                  .events-section {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 110px 16px;

                  }

                  .events-header {
                    text-align: center;
                    margin-bottom: 56px;
                  }

                  .events-pill {
                    display: inline-block;
                    padding: 8px 20px;
                    border-radius: 30px;
                    background: rgba(255, 255, 255, 0.08);
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    font-size: 14px;
                    color: #fff;
                  }

                  .events-header h2 {
                    font-size: 42px;
                    font-weight: 700;
                    margin-bottom: 12px;
                    /* margin-top: 30px; */
                  }

                  .events-header p {
                    color: var(--text-muted);
                    max-width: 620px;
                    margin: 0 auto;
                    font-size: 15px;
                  }

                  .events-subtitle {
                    font-size: 24px;
                    margin: 48px 0 24px;
                    text-align: center;
                    font-weight: 600;
                  }

                  /* Grid */
                  .events-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(280px, 380px));
                    gap: 24px;
                    justify-content: center;
                  }

                  /* Card */
                  .event-card {
                    position: relative;
                    border-radius: 22px;
                    background: linear-gradient(180deg,
                        rgba(255, 255, 255, 0.08),
                        rgba(255, 255, 255, 0.02));
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                  }

                  .event-card:hover {
                    border-color: rgba(255, 255, 255, 0.25);
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                    /* transform: translateY(-6px); */
                  }

                  .event-card:hover .event-img img {
                    transform: scale(1.06);
                  }

                  .event-card.past {
                    /* opacity: 0.85; */
                  }

                  /* Badge */
                  .event-badge {
                    position: absolute;
                    top: 14px;
                    left: 14px;
                    background: rgba(0, 0, 0, 0.7);
                    padding: 4px 10px;
                    border-radius: 999px;
                    font-size: 11px;
                    z-index: 2;
                  }

                  .event-badge.muted {
                    /* opacity: 0.7; */
                  }

                  /* Image */
                  .event-img {
                    height: 180px;
                    overflow: hidden;
                  }

                  .event-img img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.5s ease;
                  }

                  /* Body */
                  .event-body {
                    padding: 18px 18px 20px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                  }

                  .event-body h4 {
                    font-size: 18px;
                  }

                  .event-body p {
                    font-size: 13px;
                    color: var(--text-muted);
                  }

                  .event-meta {
                    list-style: none;
                    padding: 0;
                    margin: 8px 0 12px;
                    font-size: 12px;
                    color: var(--text-muted);
                  }

                  .event-meta li {
                    margin-bottom: 4px;
                  }

                  /* Button full width */
                  .btn-primary.full {
                    width: 100%;
                    justify-content: center;
                  }

                  /* Responsive */
                  @media (max-width: 600px) {
                    .events-header h2 {
                      font-size: 28px;
                    }
                  }

                  /* ===============================
         FINAL CTA SECTION
      ================================ */

                  .final-cta {
                    padding: 80px 16px 100px;
                  }

                  .final-cta-card {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 64px 32px;

                    border-radius: 32px;
                    border: 1px solid rgba(255, 255, 255, 0.15);

                    background:
                      radial-gradient(circle at top right, rgba(111, 75, 255, 0.35), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(111, 75, 255, 0.25), transparent 45%),
                      rgba(8, 8, 24, 0.85);

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

                    text-align: center;
                  }

                  .final-cta-card h2 {
                    font-size: 48px;
                    font-weight: 700;
                    margin-bottom: 16px;
                  }

                  .final-cta-card p {
                    max-width: 720px;
                    margin: 0 auto 32px;
                    font-size: 15px;
                    line-height: 1.6;
                    color: var(--text-muted);
                  }

                  /* Buttons */
                  .final-cta-actions {
                    display: flex;
                    justify-content: center;
                    gap: 16px;
                    flex-wrap: wrap;
                  }

                  .final-cta-actions .btn-primary,
                  .final-cta-actions .btn-outline {
                    min-width: 200px;
                  }

                  /* ===============================
         RESPONSIVE
      ================================ */

                  @media (max-width: 900px) {
                    .final-cta-card h2 {
                      font-size: 36px;
                    }
                  }

                  @media (max-width: 600px) {
                    .final-cta {
                      padding: 56px 12px 80px;
                    }

                    .final-cta-card {
                      padding: 40px 20px;
                      border-radius: 24px;
                    }

                    .final-cta-card h2 {
                      font-size: 28px;
                    }

                    .final-cta-card p {
                      font-size: 14px;
                    }

                    .final-cta-actions {
                      flex-direction: column;
                      gap: 12px;
                    }

                    .final-cta-actions a {
                      width: 100%;
                    }
                  }



                  .btn-primary {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;

                    height: 48px;
                    padding: 0 32px;

                    border-radius: 999px;
                    background: #6147bd;
                    color: #ffffff;

                    font-size: 15px;
                    font-weight: 600;
                    text-decoration: none;
                    white-space: nowrap;

                    border: none;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 4px 15px rgba(97, 71, 189, 0.4);

                    transition: all 0.3s ease;
                  }

                  .btn-primary:hover {
                    transform: translateY(-3px);
                    background: #7155d9;
                    box-shadow: 0 10px 25px rgba(123, 97, 255, 0.6);
                  }

                  /* Outline button */
                  .btn-outline {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;

                    height: 48px;
                    padding: 0 32px;

                    border-radius: 999px;
                    background: transparent;
                    color: #ffffff;

                    font-size: 15px;
                    font-weight: 600;
                    text-decoration: none;
                    white-space: nowrap;

                    border: 1.5px solid rgba(124, 92, 255, 0.65);
                    cursor: pointer;

                    box-shadow:
                      inset 0 0 0 1px rgba(124, 92, 255, 0.25);

                    transition:
                      background-color 0.2s ease,
                      border-color 0.2s ease,
                      transform 0.2s ease;
                  }

                  .btn-outline:hover {
                    background: rgba(255, 255, 255, 0.1);
                    border-color: #fff;
                    color: #fff;
                    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
                    transform: translateY(-3px);
                  }

                  /* ===============================
         BUTTON GROUP RESPONSIVE
      ================================ */

                  .final-cta-actions {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 16px;
                    flex-wrap: wrap;
                  }

                  @media (max-width: 600px) {

                    .btn-primary,
                    .btn-outline {
                      width: 100%;
                      max-width: 360px;
                    }
                  }


                  /* Testimonials */
                  /* ================= TESTIMONIALS / COMMUNITY ================= */

                  .reviews-grid-container {
                    width: 100%;
                    overflow: hidden;
                    position: relative;
                    padding: 40px 0;
                    -webkit-mask-image: linear-gradient(to right,
                        transparent,
                        black 8%,
                        black 92%,
                        transparent);
                    mask-image: linear-gradient(to right,
                        transparent,
                        black 8%,
                        black 92%,
                        transparent);
                  }

                  .reviews-grid {
                    display: flex;
                    width: max-content;
                    animation: scroll 45s linear infinite;
                  }

                  .review-card-set {
                    display: flex;
                    flex-shrink: 0;
                  }

                  /* ===== CARD ===== */
                  .testimonial-card {
                    width: 310px;
                    min-height: 286px;
                    padding: 24px;
                    margin: 16px;
                    border-radius: 16px;
                    flex-shrink: 0;

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

                    border: 1px solid rgba(255, 255, 255, 0.12);
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
                    color: #e5e7eb;
                  }

                  /* Header */
                  .card-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  }

                  .stars {
                    display: flex;
                    gap: 4px;
                  }

                  .stars svg {
                    width: 18px;
                    height: 18px;
                  }

                  /* Pill */
                  .pill {
                    padding: 6px 12px;
                    font-size: 11px;
                    border-radius: 999px;
                    border: 1px solid rgba(255, 255, 255, 0.4);
                    white-space: nowrap;
                  }

                  /* Quote */
                  .quote {
                    font-size: 15px;
                    line-height: 1.6;
                    color: #d1d5db;
                    flex-grow: 1;
                  }

                  /* Author */
                  .author {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    margin-top: auto;
                  }

                  .avatar img {
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    object-fit: cover;
                  }

                  .author-info .name {
                    font-size: 15px;
                    font-weight: 700;
                    color: #fff;
                  }

                  .author-info .title {
                    font-size: 13px;
                    color: #9ca3af;
                  }

                  /* ===== ANIMATION ===== */
                  @keyframes scroll {
                    from {
                      transform: translateX(0);
                    }

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

                  /* ================= RESPONSIVE ================= */

                  @media (max-width: 768px) {

                    /* Container keeps the same looping behavior as desktop */
                    .reviews-grid-container {
                      padding: 20px 0;
                    }

                    /* Keep infinite scroll animation on mobile */
                    .reviews-grid {
                      animation: scroll 30s linear infinite;
                    }

                    /* Keep the card sets visible for the loop effect */
                    .review-card-set {
                      display: flex;
                      flex-shrink: 0;
                    }

                    /* Card styling for mobile */
                    .testimonial-card {
                      width: 260px;
                      min-height: 260px;
                      margin: 12px;
                      padding: 20px;

                      /* Visual cleanups */
                      border: 1px solid rgba(255, 255, 255, 0.15);
                      background-color: #312e81;
                    }

                    .quote {
                      font-size: 14px;
                    }

                    .author-info .name {
                      font-size: 14px;
                    }
                  }

                  @media (max-width: 480px) {
                    .reviews-grid-container {
                      padding: 16px 0;
                    }

                    /* Smaller cards on very small screens */
                    .testimonial-card {
                      width: 300px;
                      min-height: 240px;
                      margin: 10px;
                      padding: 16px;
                    }

                    /* Faster animation for smaller screens */
                    .reviews-grid {
                      animation: scroll 25s linear infinite;
                    }
                  }

                  /* ===== FOOTER BASE (MOBILE FIRST) ===== */
                  .site-footer {
                    margin-top: auto;
                    color: #ffffff;
                    background: linear-gradient(120deg, #59168b, #1c398e, #59168b);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 40px 16px 24px;
                  }

                  /* main container width like 1440 layout */
                  .footer-main,
                  .footer-bottom {
                    width: 100%;
                    max-width: 1100px;
                  }

                  /* ===== TOP SECTION ===== */
                  .footer-main {
                    display: flex;
                    justify-content: center;
                  }

                  .footer-top {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 24px;
                    text-align: center;
                    margin-bottom: 40px;
                  }

                  .footer-brand {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    /* ⬅ This ensures proper centering */
                    justify-content: center;
                    width: 100%;
                  }

                  .footer-brand img {
                    display: block;
                    height: 48px;
                    /* Slightly bigger like Figma */
                    margin: 0 auto 12px;
                    /* ⬅ True centering */
                  }

                  .footer-brand p {
                    margin: 0;
                    font-size: 14px;
                    max-width: 620px;
                    line-height: 1.7;
                    color: rgba(243, 246, 255, 0.9);
                    margin-bottom: 15px;
                  }

                  /* Social icons row */
                  .footer-socials {
                    display: flex;
                    gap: 16px;
                    justify-content: center;
                    align-items: center;
                    margin-top: 28px;
                  }

                  /* reset default link styles */
                  .footer-socials a {
                    text-decoration: none;
                  }

                  /* the rounded glass boxes */
                  /* .footer-socials a {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);

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

  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
} */

                  /* icon inside */
                  .footer-socials a img {
                    width: 46px;
                    height: 46px;
                    display: block;
                  }

                  /* hover effect (same tilt you liked) */
                  /* .footer-socials a:hover {
  transform: rotateZ(-10deg) scale(1.06);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
} */

                  /* Contact line */
                  .footer-contact {
                    display: flex;
                    flex-direction: column;
                    /* mobile: stacked */
                    gap: 8px;
                    align-items: center;
                    justify-content: center;
                    font-size: 13px;
                    color: rgba(233, 237, 255, 0.95);
                    margin-top: 10px;
                  }

                  .footer-contact p {
                    margin: 0;
                    white-space: nowrap;
                  }

                  /* ===== BOTTOM SECTION ===== */
                  .footer-bottom {
                    border-top: 1px solid rgba(255, 255, 255, 0.2);
                    margin-top: 24px;
                    padding-top: 14px;
                    display: flex;
                    flex-direction: column;
                    /* mobile: stacked */
                    gap: 10px;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    color: rgba(230, 235, 255, 0.95);
                  }

                  .footer-bottom p {
                    margin: 0;
                  }

                  /* Links row */
                  .footer-links {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                  }

                  .footer-links a {
                    color: rgba(255, 255, 255, 0.88);
                    text-decoration: none;
                    font-size: 12px;
                  }

                  .footer-links a:hover {
                    text-decoration: underline;
                  }

                  /* Dot between links */
                  .footer-links span {
                    display: inline-block;
                    font-size: 13px;
                    transform: translateY(-1px);
                  }

                  .footer-socials img:hover {
                    transform: rotateZ(-12deg) scale(1.06);
                    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.18));
                  }

                  /* ===== TABLET & DESKTOP ===== */
                  @media (min-width: 768px) {
                    .site-footer {
                      padding: 50px 24px 28px;
                    }

                    .footer-contact {
                      flex-direction: row;
                      /* row on tablet+ */
                      gap: 28px;
                      margin-top: 16px;
                      margin-bottom: 40px;
                    }

                    .footer-bottom {
                      flex-direction: row;
                      justify-content: space-between;
                      align-items: center;
                      gap: 0;
                      margin-top: 32px;
                    }

                    .footer-bottom p {
                      text-align: left;
                    }
                  
                  }

                  @media (min-width: 1024px) {
                    .site-footer {
                      padding: 60px 32px 32px;
                      min-height: 474px;
                      /* match Figma height on desktop */
                    }

                    .footer-top {
                      gap: 28px;
                    }

                    
                  }


                  /* ── CONTACT SECTION ──────────────────────────────────────────── */

                  .main {
                    flex: 1;
                  }

                  .contact-section {
                    max-width: 1200px;
                    margin: 25px auto;
                    padding: 120px 24px 80px;
                  }

                  /* GRID: info panel + form */
                  .contact-grid {
                    display: flex;
                    flex-direction: column;
                    gap: 48px;
                  }

                  /* ── LEFT INFO PANEL ────────────────────────────────────────────── */
                  .contact-info-panel {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 32px;
                  }

                  .contact-title {
                    font-size: 42px;
                    font-weight: 700;
                    line-height: 1.15;
                    margin: 0;
                  }

                  .contact-title-gradient {
                    background: linear-gradient(90deg, #a78bfa, #7c3aed);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                  }

                  .contact-subtitle {
                    font-size: 14px;
                    color: var(--text-muted);
                    line-height: 1.7;
                    margin: 0;
                    max-width: 440px;
                  }

                  /* contact info items */
                  .contact-info-list {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                  }

                  .contact-info-item {
                    display: flex;
                    align-items: flex-start;
                    gap: 16px;
                  }

                  .contact-info-icon {
                    flex-shrink: 0;
                    width: 44px;
                    height: 44px;
                    background: rgba(124, 58, 237, 0.25);
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #a78bfa;
                  }

                  .contact-info-label {
                    display: block;
                    font-size: 11px;
                    font-weight: 600;
                    letter-spacing: 0.1em;
                    color: var(--text-muted);
                    margin-bottom: 4px;
                  }

                  .contact-info-text {
                    margin: 0;
                    font-size: 15px;
                    font-weight: 500;
                    color: #fff;
                    line-height: 1.5;
                  }

                  /* benefits card */
                  .contact-benefits {
                    background: rgba(255, 255, 255, 0.04);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 16px;
                    padding: 24px 28px;
                    display: flex;
                    flex-direction: column;
                    gap: 14px;
                  }

                  .contact-benefit-item {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    font-size: 14px;
                    color: var(--text-muted);
                  }

                  .contact-benefit-check {
                    flex-shrink: 0;
                    width: 22px;
                    height: 22px;
                    background: #16a34a;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                    color: #fff;
                    font-weight: 700;
                  }

                  /* ── RIGHT FORM ─────────────────────────────────────────────────── */
                  .contact-form {
                    flex: 1.1;
                    display: flex;
                    flex-direction: column;
                    gap: 18px;
                    background: transparent;
                    border: none;
                  }

                  /* two-column rows */
                  .contact-row {
                    display: flex;
                    flex-direction: column;
                    gap: 18px;
                  }

                  .contact-field {
                    display: flex;
                    flex-direction: column;
                    gap: 7px;
                  }

                  .contact-field label {
                    font-size: 14px;
                    color: var(--text-muted);
                  }

                  .contact-field input,
                  .contact-field textarea,
                  .contact-select {
                    width: 100%;
                    background: rgba(255, 255, 255, 0.05);
                    border: 1px solid rgba(255, 255, 255, 0.12);
                    border-radius: 10px;
                    color: #eee;
                    padding: 14px 18px;
                    font-size: 14px;
                    font-family: inherit;
                    outline: none;
                    transition: border-color 0.2s;
                    box-sizing: border-box;
                  }

                  .contact-select {
                    appearance: none;
                    -webkit-appearance: none;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b5b5c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: right 16px center;
                    cursor: pointer;
                  }

                  .contact-select option {
                    background: #0f0f1e;
                    color: #eee;
                  }

                  .contact-field input::placeholder,
                  .contact-field textarea::placeholder {
                    color: rgba(148, 163, 184, 0.55);
                  }

                  .contact-field input:focus,
                  .contact-field textarea:focus,
                  .contact-select:focus {
                    border-color: #7c3aed;
                    background: rgba(124, 58, 237, 0.08);
                  }

                  .contact-field textarea {
                    min-height: 160px;
                    resize: vertical;
                    height: auto;
                  }

                  /* checkbox row */
                  .contact-footer {
                    margin-top: 4px;
                  }

                  .contact-checkbox {
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    font-size: 14px;
                    color: var(--text-muted);
                    cursor: pointer;
                  }

                  .contact-checkbox input {
                    width: 16px;
                    height: 16px;
                    accent-color: #7c3aed;
                    flex-shrink: 0;
                  }

                  .contact-link {
                    color: #a78bfa;
                    text-decoration: underline;
                  }

                  .contact-link:hover {
                    color: #c4b5fd;
                  }

                  /* submit button */
                  .contact-submit {
                    width: 100%;
                    padding: 16px;
                    border-radius: 999px;
                    border: none;
                    font-size: 16px;
                    font-weight: 600;
                    font-family: inherit;
                    color: #fff;
                    background: linear-gradient(90deg, #7c3aed, #a855f7);
                    cursor: pointer;
                    transition: opacity 0.2s, transform 0.1s;
                    margin-top: 8px;
                  }

                  .contact-submit:hover {
                    opacity: 0.9;
                    transform: translateY(-1px);
                  }

                  .contact-submit:active {
                    transform: translateY(0);
                  }

                  /* ── RESPONSIVE ─────────────────────────────────────────────────── */

                  @media (min-width: 900px) {
                    .contact-grid {
                      flex-direction: row;
                      align-items: flex-start;
                      gap: 60px;
                              margin-top: 16px;
                    }

                    .contact-row {
                      flex-direction: row;
                    }

                    .contact-field {
                      flex: 1;
                    }

                    .contact-info-panel {
                      max-width: 420px;
                    }
                  }

                  @media (max-width: 480px) {
                    .contact-title {
                      font-size: 32px;
                    }

                    .contact-section {
                      padding: 100px 16px 60px;
                    }
                  }

                  /* ===============================
                     UTILITY CLASSES
                  ================================ */

                  /* Visually hidden but accessible to screen readers */
                  .visually-hidden {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border: 0;
                  }

                  /* Loading state for buttons */
                  .btn-loading {
                    position: relative;
                    pointer-events: none;
                    opacity: 0.7;
                  }

                  .btn-loading::after {
                    content: '';
                    position: absolute;
                    width: 16px;
                    height: 16px;
                    top: 50%;
                    left: 50%;
                    margin-left: -8px;
                    margin-top: -8px;
                    border: 2px solid transparent;
                    border-top-color: #ffffff;
                    border-radius: 50%;
                    animation: button-spin 0.8s linear infinite;
                  }

                  @keyframes button-spin {
                    to {
                      transform: rotate(360deg);
                    }
                  }

                  /* Hover effects for cards */
                  .about-card,
                  .resource-card,
                  .event-card,
                  .team-card-v3 {
                    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
                  }

                  /* Form validation styles */
                  .contact-field input:invalid:not(:placeholder-shown),
                  .contact-field textarea:invalid:not(:placeholder-shown) {
                    border-color: #ef4444;
                  }

                  .contact-field input:valid:not(:placeholder-shown),
                  .contact-field textarea:valid:not(:placeholder-shown) {
                    border-color: #22c55e;
                  }

                  /* Better selection colors */
                  ::selection {
                    background: rgba(97, 71, 189, 0.3);
                    color: #fff;
                  }

                  /* Scrollbar styling for webkit browsers */
                  ::-webkit-scrollbar {
                    width: 8px;
                    height: 8px;
                  }

                  ::-webkit-scrollbar-track {
                    background: rgba(255, 255, 255, 0.05);
                  }

                  ::-webkit-scrollbar-thumb {
                    background: rgba(97, 71, 189, 0.5);
                    border-radius: 4px;
                  }

                  ::-webkit-scrollbar-thumb:hover {
                    background: rgba(97, 71, 189, 0.7);
                  }

                  /* Navbar scrolled state */
                  .navbar.scrolled .navbar-glass {
                    background: linear-gradient(180deg,
                        rgba(10, 10, 30, 0.95),
                        rgba(10, 10, 30, 0.9));
                    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
                  }