:root {
    --ink: #d7e0ff; 
    --mint: #4eedc3; 
    --lightblue: #00d0ffff;
    --blue: #0051ffff;
    --darkblue: #0e0065ff;
    --cyan: rgba(0, 249, 255, 0.98);
    --pink1: #ffc2f8;
    --pink2: #ef8df2;
    --pink3: #fd6cff;
    --pink4: #ff69f2;
    --hotpink: #ff0099;
    --sonicpink: #ff00d9;
    --lightpurple: #c38fffff;
    --purple: #9b4dff;
    --cyberpurple: #7c00f0;
    --darkpurple: #3a1e7a;
    --darkerpurple: #260051ff;
    --glass-bg: rgba(18, 20, 35, .55);
    --glass-bd: rgba(255,255,255,.12);
    --submenu-bg: rgb(13 15 25);
    --shadow-1: 0 18px 50px rgba(0,0,0,.45);
    --shadow-neon: 0 0 40px rgba(70,243,255,.15), 0 0 40px rgba(155,77,255,.12);
}

html,body { 
    background: #07080b; 
    color: var(--ink); 
}

/* bootstrap classes extended */
.mt-10 {
    margin-top: 10rem;
}
.vh-100 {
    height: 100vh;
}
.vh-80 {
    height: 80vh;
}
.vh-50 {
    height: 50vh;
}
.fs-7 {
    font-size: 14px !important;
}
.fs-8 {
    font-size: 13px !important;
}
.fs-8 {
    font-size: 12px !important;
}

/* transparent navbar */
.navbar.bg-transparent { 
    background: transparent !important; 
}
.nav-link.dropdown-toggle.show {
    color: var(--sonicpink);
}
.dropdown-item:focus, .dropdown-item:hover
{
    background-color: transparent !important;
}
.navbar .nav-link, .dropdown-item { 
    padding: 0.23rem 0.5rem;
    color: var(--ink); 
    border: 1px solid;
    border-radius: 0.25rem;
    border-color: transparent;
    transition: color .15s 
                ease-in-out, background-color .15s 
                ease-in-out, border-color .15s 
                ease-in-out, box-shadow .15s 
                ease-in-out;
}
.navbar .nav-link:hover, .dropdown-item:hover { 
    border: 1px solid var(--sonicpink);
    color: var(--pink2);
}

.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler:hover {
    box-shadow: none;
}
/* pink (light) when: menu open, hover, or active (using important only on this)*/
.navbar-toggler:hover .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28239%2C141%2C242%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22 M4 15h22 M4 23h22'/%3e%3c/svg%3e") !important;
}
/* sonicpink when */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C0%2C217%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22 M4 15h22 M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler {
    border-color: transparent;
}
.navbar-toggler:hover {
    border: 1px solid var(--sonicpink);
}
/* multi-level dropdown positioning */
.dropdown-submenu {
    position: relative;
}

/* hide nested menu by default */
.dropdown-submenu > .dropdown-menu {
    display: none;
    top: 0;
    left: 100%;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    background-color: var(--submenu-bg);
}

/* show when parent li has .show */
.dropdown-submenu.show > .dropdown-menu {
    display: block;
}

.dropdown-submenu.show .submenu-toggle {
    color: var(--sonicpink);
}

/* caret for nested submenu toggles */
.submenu-toggle {
    position: relative;
    padding-right: 3.5rem; 
}

.submenu-toggle::after {
    content: "▾";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    opacity: 0.8;
}

/* rotate caret when submenu is open */
.dropdown-submenu.show > .submenu-toggle::after {
    transform: translateY(-50%) rotate(-90deg);
}

/* HERO */
.section-hero {
    position: relative; 
    min-height: 80svh; 
    display: flex; 
    align-items: center;
    isolation: isolate; /* ensures overlay sits beneath content */
}
.section-hero::after{
    /* gradient + vignette*/
    content: ""; 
    position: absolute; 
    inset: 0; 
    z-index: -1;
    /* linear-gradient(180deg, rgba(10,15,26,.1), rgba(10,15,26,.6) 55%, rgba(10,15,26,.85) 100%) */
    background:
    radial-gradient(60% 80% at 95% 20%, rgba(255, 0, 238, 0.52), transparent 60%),
    radial-gradient(71% 104% at -5% 72%, rgba(43, 0, 255, 0.44), transparent 60%);
    box-shadow: inset 0 -120px 180px rgba(0,0,0,.55);
}
.hero-title{
    font-weight: 800; line-height: 1.08;
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    background: linear-gradient(
    90deg, 
    var(--blue) 0%,
    var(--blue) 20%,
    var(--lightblue) 50%, 
    var(--mint) 100%
    );
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent;
    text-shadow: 0 0 28px rgba(70,243,255,.25);
}
.hero-sub{ 
    color: #cfd6ff; 
}
.social {
    width: 36px;
}
.btn:hover {
    border-color: var(--sonicpink);
    color: var(--pink2);
}
.btn-gradient {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* geometry – SAME in normal + hover */
    padding: 0.6rem 1.2rem;
    border-radius: 0.235rem;
    border: 0;
    line-height: 1;              /* stabilizes height */
    font-weight: bold;

    /* visuals */
    color: var(--submenu-bg);
    background: linear-gradient(90deg, var(--cyberpurple), var(--sonicpink));
    box-shadow: var(--shadow-1), var(--shadow-neon);
    cursor: pointer;

    transition:
    color .3s ease,
    background .3s ease,
    -webkit-text-fill-color .3s ease;
}

.btn-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.235rem;
    padding: 2px;
    background: linear-gradient(90deg, var(--cyberpurple), var(--sonicpink));
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.btn-gradient:hover {
    /* no geometry changes → no layout shift */
    background: linear-gradient(90deg, var(--cyberpurple), var(--sonicpink));
    background-clip: border-box;
    -webkit-background-clip: text, border-box;
    -webkit-text-fill-color: transparent;
    color: transparent;
    box-shadow: var(--shadow-1), var(--shadow-neon);
}

/* not used yet bc idk */
.btn-outline {
    position: relative;
    padding: 0.6rem 1.2rem;
    font-weight: bold;
    border-radius: 4px;
    border: 2px solid transparent; /* paint the gradient on border using bg-clip */
    background: linear-gradient(90deg, var(--cyberpurple), var(--sonicpink));
    background-clip: border-box;
    -webkit-background-clip: text, border-box;
    -webkit-text-fill-color: transparent; /* text shows gradient */
    color: transparent; /* fallback */
    box-shadow: var(--shadow-1), var(--shadow-neon);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;
    padding: 2px; /* thickness of border */
    background: linear-gradient(90deg, var(--cyberpurple), var(--sonicpink));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* on hover fill with gradient */
.btn-outline:hover {
    -webkit-text-fill-color: #fff;
    color: #fff;
    background: linear-gradient(90deg, var(--cyberpurple), var(--sonicpink));
}

/* band that the cards overlap */
.band { 
    background: linear-gradient(
    45deg, 
    var(--darkerpurple) 0%,
    var(--darkerpurple) 60%, 
    var(--darkblue) 100%
    ); 
    position: relative;
    padding: 10rem 0;
    margin: 0 0 12rem 0;
}

.glass {
    background: var(--glass-bg); 
    border: 1px solid var(--glass-bd);
    backdrop-filter: blur(70px) saturate(130%); 
    -webkit-backdrop-filter: blur(70px) saturate(130%);
    box-shadow: var(--shadow-1), var(--shadow-neon);
}
.glass2 {
    background: var(--glass-bg); 
    border: 1px solid var(--glass-bd);
    backdrop-filter: blur(70px) saturate(130%); 
    -webkit-backdrop-filter: blur(70px) saturate(130%);
}
.cyber-glass-pink {
    background: var(--glass-bg); 
    border: 1px solid var(--sonicpink);
    backdrop-filter: blur(70px) saturate(130%); 
    -webkit-backdrop-filter: blur(70px) saturate(130%);
    box-shadow: var(--shadow-1), var(--shadow-neon);
}
.cyber-glass-cyan {
    background: var(--glass-bg); 
    border: 1px solid var(--cyan);
    backdrop-filter: blur(70px) saturate(130%); 
    -webkit-backdrop-filter: blur(70px) saturate(130%);
    box-shadow: var(--shadow-1), var(--shadow-neon);
}

/* gradient headline mid-page */
.grad-line {
    font-weight: 700; 
    text-align: center;
    font-size: clamp(1.2rem, 2.2vw, 2.6rem);
}

/* sponsors row */
.sponsors { 
    opacity: .9; 
}
.sponsors img { 
    max-height: 34px; 
    filter: brightness(1.2) contrast(1.1); 
    opacity: .9; 
}

/* lower feature cards */
.card.feature { 
    background: linear-gradient(
    180deg, 
    rgba(255, 0, 200, 0.463) 0%,
    rgba(255, 0, 200, 0.214) 20%,
    rgba(255, 0, 200, 0.112) 30%,
    rgba(55, 0, 73, 0.08) 60%, 
    rgba(1, 13, 41, 0.485) 100%
    ); 
    border-radius: 18px; 
    border: 1px solid var(--sonicpink); 
}
.card-title {
    opacity: 0.7;
}
/* ------------ */
/* text colors */
/* ------------ */
.text-cyan {
    color: var(--cyan);
}
.text-lightpurple { 
    color: var(--lightpurple); 
}
.text-purple {
    color: var(--purple);
}
.text-pink {
    color: var(--sonicpink);
}
.gradientTextPinkSimple {
    background: linear-gradient(
    -45deg, 
    var(--cyan), 
    var(--sonicpink)
    );
    -webkit-background-clip: text; /* For Safari and Chrome */
    background-clip: text;
    color: transparent;
}
.gradientTextPink {
    background: linear-gradient(
    90deg, 
    /* var(--hotpink) 0%, */
    var(--sonicpink) 0%,
    var(--cyberpurple) 60%,
    var(--lightblue) 80%,
    var(--cyan) 100%
    );
    -webkit-background-clip: text; /* For Safari and Chrome */
    background-clip: text;
    color: transparent;
    font-weight: 800;
}
.gradientTextBlue {
    background: linear-gradient(
    90deg, 
    var(--cyberpurple) 0%,
    var(--cyberpurple) 30%,
    var(--lightblue) 80%,
    var(--lightblue) 100%
    );
    -webkit-background-clip: text; /* For Safari and Chrome */
    background-clip: text;
    color: transparent;
    font-weight: 800;
}
.glowTextCyan {
    color: var(--cyan);
    text-shadow: 0 0 35px rgba(107, 245, 255, 0.82);
}
.blob-clip{
    --img1: url("/assets/img/robot-holding-world.png");
    --img2: url("/assets/img/digital-wave-bg.png");
    --grad1: linear-gradient(-45deg, var(--cyan), var(--sonicpink));
    --grad2: linear-gradient(-45deg, var(--cyberpurple), var(--sonicpink));
    --grad3: linear-gradient(-45deg, var(--cyan), var(--mint));
    --bg: var(--img2); /* default background */

    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    background: var(--bg) center/cover no-repeat;
    clip-path: shape(from 84.55% 41.43%,curve to 85.82% 59.19% with 83.48% 50.00%,curve to 83.36% 77.10% with 88.15% 68.37%,curve to 67.34% 81.29% with 78.57% 85.82%,curve to 49.18% 80.36% with 56.11% 76.76%,curve to 33.06% 83.35% with 42.25% 83.95%,curve to 15.00% 76.94% with 23.88% 82.76%,curve to 14.50% 60.56% with 6.13% 71.13%,curve to 14.29% 39.34% with 22.87% 50.00%,curve to 15.85% 24.28% with 5.72% 28.68%,curve to 35.27% 23.03% with 25.98% 19.87%,curve to 50.55% 23.77% with 44.56% 26.18%,curve to 63.42% 22.94% with 56.54% 21.36%,curve to 77.96% 28.69% with 70.31% 24.53%,curve to 84.55% 41.43% with 85.61% 32.85%);
}
.blob-outline {
    position: relative;
    width: 35vw;
    aspect-ratio: 1;
    clip-path: path("M84.55% 41.43% C85.82% 59.19% 83.48% 50.00% 83.36% 77.10% … Z"); /* your blob path */
}

/* gradient border */
.blob-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 6px; /* border thickness */
    border-radius: inherit; /* helps mask edges */
    background: linear-gradient(-45deg, var(--cyan), var(--sonicpink));
    -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    clip-path: inherit;
}

.circle-ring {
    position: relative;
    width: 240px;
    aspect-ratio: 1;
}
.ring{
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
}
.ring-1 { 
    width: 100%; 
    height: 100%; 
    background: #111022;
}
.ring-2 { 
    width: 88%;  
    height: 88%;  
    background: var(--pink4); 
}
.ring-3 { 
    width: 85%;  
    height: 85%;  
    background: #111022;
}
/* sit behind everything, ignore clicks */
.starfield{
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}
.starfield-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    /* IMPORTANT: lets users click the page normally */
    pointer-events: none;
    z-index: 0;
    /* removes inline-block whitespace issues */
    display: block;
}

/* respect user preferences: stop animation */
@media (prefers-reduced-motion: reduce){
    .starfield{ animation: none; }
}

@media (max-width: 768px) {
    .navbar-collapse.show {
    background: var(--glass-bg); 
    border: 1px solid var(--glass-bd);
    backdrop-filter: blur(70px) saturate(130%); 
    -webkit-backdrop-filter: blur(70px) saturate(130%);
    box-shadow: var(--shadow-1), var(--shadow-neon);
    }
    .section-hero {
    align-items: start;
    padding: 9rem 0 0 0;
    }

    .vh-50, .vh-80 {
        height: auto;
    }
}