:root {

    --bg-void: #050017;

    --bg-deep: #09012a;

    --bg-panel: rgba(14, 6, 38, 0.82);

    --primary: #9c4dff;

    --primary-soft: rgba(156, 77, 255, 0.26);

    --accent: #ff8df9;

    --accent-soft: rgba(255, 141, 249, 0.22);

    --gradient-main: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);

    --cyan: #4af5ff;

    --text: #f8f6ff;

    --text-soft: #cbc3e8;

    --border: rgba(156, 77, 255, 0.32);

    --shadow: 0 50px 120px rgba(10, 0, 40, 0.6);

    --shadow-soft: 0 35px 80px rgba(12, 0, 35, 0.45);

    --radius-xl: 36px;

    --radius-lg: 26px;

    --radius-md: 18px;

}



* {

    box-sizing: border-box;

}



::selection {

    background: rgba(255, 141, 249, 0.3);

    color: var(--text);

}



body {

    margin: 0;

    font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    background: radial-gradient(circle at 15% 15%, rgba(156, 77, 255, 0.28), transparent 55%),

        radial-gradient(circle at 85% -5%, rgba(255, 141, 249, 0.18), transparent 60%),

        var(--bg-void);

    color: var(--text);

    min-height: 100vh;

    overflow-x: hidden;

}



body::before,

body::after {

    content: "";

    position: fixed;

    width: 560px;

    height: 560px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(156, 77, 255, 0.22), transparent 65%);

    filter: blur(120px);

    z-index: -3;

    pointer-events: none;

}

body::before { top: -220px; left: -200px; }

body::after { bottom: -260px; right: -160px; }



.background-noise {

    position: fixed;

    inset: 0;

    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4"/></filter><rect width="320" height="320" filter="url(%23n)" opacity="0.1"/></svg>');

    opacity: 0.25;

    pointer-events: none;

    z-index: -2;

}



.background-glow {

    position: fixed;

    inset: -20% -30% auto -30%;

    height: 160vh;

    pointer-events: none;

    z-index: -2;

}



.background-glow .glow {

    position: absolute;

    width: 60vw;

    height: 60vw;

    border-radius: 50%;

    filter: blur(160px);

    opacity: 0.55;

    animation: drift 20s ease-in-out infinite;

}

.background-glow .glow--1 { top: -12%; left: -10%; background: rgba(156, 77, 255, 0.45); }

.background-glow .glow--2 { top: 28%; right: -12%; background: rgba(255, 141, 249, 0.24); animation-delay: 5s; }

.background-glow .glow--3 { bottom: -8%; left: 32%; background: rgba(74, 245, 255, 0.18); animation-delay: 10s; }



.neon-grid {

    position: fixed;

    inset: 0;

    background:

        linear-gradient(transparent 95%, rgba(156, 77, 255, 0.18) 100%) 0 0 / 100% 80px,

        linear-gradient(90deg, transparent 95%, rgba(156, 77, 255, 0.18) 100%) 0 0 / 80px 100%;

    mix-blend-mode: screen;

    opacity: 0.08;

    animation: gridPulse 16s linear infinite;

    pointer-events: none;

    z-index: -1;

}



.scanlines {

    position: fixed;

    inset: 0;

    background: linear-gradient(transparent 90%, rgba(0, 0, 0, 0.2) 100%);

    background-size: 100% 4px;

    opacity: 0.08;

    mix-blend-mode: overlay;

    animation: scanlines 7s linear infinite;

    pointer-events: none;

    z-index: -1;

}



.transition-overlay {

    position: fixed;

    inset: 0;

    background: linear-gradient(130deg, rgba(12, 3, 32, 0.95), rgba(4, 0, 16, 0.95));

    z-index: 999;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease;

}



.transition-overlay.is-active {

    opacity: 1;

    pointer-events: auto;

}



.section.is-highlight {

    box-shadow: 0 0 0 3px rgba(156, 77, 255, 0.4), 0 25px 70px rgba(156, 77, 255, 0.25);

    transition: box-shadow 0.6s ease;

}



.nav {

    position: absolute;

    top: 24px;

    left: 0;

    right: 0;

    margin: 0 clamp(24px, 5vw, 90px);

    padding: 18px clamp(24px, 4vw, 50px);

    border-radius: 32px;

    backdrop-filter: blur(18px);

    background: rgba(12, 4, 35, 0.84);

    border: 1px solid rgba(156, 77, 255, 0.32);

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 50;

    box-shadow: 0 28px 80px rgba(9, 0, 35, 0.45);

}



.nav__brand { display: inline-flex; align-items: center; gap: 14px; font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.nav__logo { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(156, 77, 255, 0.6)); }



.nav__checkbox { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; clip: rect(0,0,0,0); clip-path: inset(50%); overflow: hidden; }

.nav__links { display: flex; gap: 30px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; }

.nav__links a { color: rgba(248, 244, 255, 0.65); position: relative; padding: 6px 0; transition: color 0.3s ease; }

.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--gradient-main); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }

.nav__links a:hover { color: var(--text); }

.nav__links a:hover::after { transform: scaleX(1); }



.nav__toggle { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 8px; }

.nav__toggle span { width: 28px; height: 2px; border-radius: 999px; background: var(--text); }



.hero {

    position: relative;

    min-height: 115vh;

    padding: 32px clamp(24px, 6vw, 90px) 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.hero::before {

    content: "";

    position: absolute;

    inset: 16% auto auto -18%;

    width: 420px;

    height: 420px;

    background: radial-gradient(circle, rgba(156, 77, 255, 0.35), transparent 70%);

    filter: blur(80px);

    z-index: -1;

    pointer-events: none;

}



.hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(40px, 6vw, 90px); align-items: stretch; padding-top: 160px; }

.hero__content { display: flex; flex-direction: column; gap: 28px; max-width: 560px; }

.hero__badge { align-self: flex-start; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.28em; padding: 10px 22px; border-radius: 999px; background: rgba(156, 77, 255, 0.22); border: 1px solid rgba(156, 77, 255, 0.35); box-shadow: inset 0 0 14px rgba(156, 77, 255, 0.28); }

.hero__title { position: relative; margin: 0; font-family: "Rajdhani", sans-serif; font-size: clamp(3.8rem, 6vw, 6rem); letter-spacing: 0.18em; text-transform: uppercase; }

.hero__title span:last-child { background: linear-gradient(90deg, #ffffff 0%, #d5c6ff 40%, #ffa6f9 100%); -webkit-background-clip: text; color: transparent; }

.hero__glitch { position: absolute; inset: 0; color: rgba(255, 136, 255, 0.65); mix-blend-mode: screen; transform: translate(4px, 4px); text-shadow: -4px 0 rgba(74, 245, 255, 0.5); animation: glitch 3s infinite; }

.hero p { margin: 0; font-size: 1.08rem; color: var(--text-soft); line-height: 1.75; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 18px; }



.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 34px; border-radius: 999px; font-weight: 600; letter-spacing: 0.08em; border: 1px solid transparent; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }

.button--primary { background: var(--gradient-main); color: #fff; box-shadow: 0 24px 65px rgba(91, 27, 255, 0.35); }

.button--primary:hover { transform: translateY(-3px); box-shadow: 0 34px 85px rgba(91, 27, 255, 0.45); }

.button--ghost { background: rgba(255, 255, 255, 0.04); color: var(--text); border: 1px solid rgba(156, 77, 255, 0.35); }

.button--ghost:hover { background: rgba(213, 102, 255, 0.15); }



.hero__quickgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 22px 22px 20px; border-radius: 26px; background: rgba(15, 5, 40, 0.82); border: 1px solid rgba(156, 77, 255, 0.32); box-shadow: inset 0 0 18px rgba(156, 77, 255, 0.2); }

.hero__quickgrid p { margin: 6px 0 0; font-size: 0.96rem; color: rgba(248, 244, 255, 0.75); }

.hero__quicklabel { font-family: "Rajdhani", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-size: 0.8rem; display: inline-flex; align-items: center; gap: 8px; }

.hero__quicklabel::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 14px rgba(255, 141, 249, 0.6); }



.hero__panel { position: relative; display: grid; gap: 22px; align-content: start; }

.panel__glass { padding: 28px; border-radius: var(--radius-xl); background: rgba(13, 4, 36, 0.85); border: 1px solid rgba(156, 77, 255, 0.35); box-shadow: var(--shadow-soft); display: grid; gap: 20px; animation: floatCard 12s ease-in-out infinite; }

.panel__header { display: flex; align-items: center; justify-content: space-between; font-family: "Rajdhani", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(248, 244, 255, 0.7); }

.panel__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: rgba(255, 141, 249, 0.2); border: 1px solid rgba(255, 141, 249, 0.35); font-size: 0.74rem; letter-spacing: 0.16em; }

.panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

.panel__list li { display: grid; gap: 6px; padding-left: 18px; border-left: 2px solid rgba(156, 77, 255, 0.35); }

.panel__list span { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); font-size: 0.9rem; }

.panel__list small { color: rgba(248, 244, 255, 0.65); }

.panel__footer { display: inline-flex; align-items: center; gap: 12px; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }

.hero__badgeboard { display: grid; gap: 10px; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; background: rgba(9, 3, 24, 0.78); border: 1px solid rgba(156, 77, 255, 0.28); border-radius: 24px; padding: 20px 24px; animation: pulseGlow 6s ease-in-out infinite; }



.hero__wave { position: absolute; bottom: 18px; left: 50%; width: 92%; max-width: 980px; display: flex; flex-direction: column; gap: 6px; transform: translateX(-50%); pointer-events: none; opacity: 0.65; }

.wave-line { height: 2px; background: linear-gradient(90deg, transparent, rgba(156, 77, 255, 0.75), transparent); animation: wave 6s ease-in-out infinite; }

.wave-line:nth-child(2) { animation-delay: 1s; }

.wave-line:nth-child(3) { animation-delay: 2s; }



.scroll-hint { position: absolute; bottom: 30px; left: 50%; width: 32px; height: 62px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.24); transform: translateX(-50%); overflow: hidden; }

.scroll-hint::after { content: ""; position: absolute; top: 12px; left: 50%; width: 6px; height: 6px; border-radius: 999px; background: #fff; transform: translate(-50%, 0); animation: scroll 1.8s infinite; }



.ticker {
    position: relative;
    overflow: hidden;
    border-block: 1px solid rgba(156, 77, 255, 0.24);
    background: rgba(9, 3, 24, 0.78);
    padding: 0 clamp(24px, 6vw, 100px);
}

.ticker::before,
.ticker::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    pointer-events: none;
    z-index: 1;
}

.ticker::before {
    left: 0;
    background: linear-gradient(90deg, rgba(9, 3, 24, 0.9), transparent);
}

.ticker::after {
    right: 0;
    background: linear-gradient(-90deg, rgba(9, 3, 24, 0.9), transparent);
}

.ticker__inner {
    display: flex;
    align-items: center;
    gap: clamp(40px, 8vw, 90px);
    padding: 14px 0;
    white-space: nowrap;
    animation: ticker 26s linear infinite;
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: rgba(248, 244, 255, 0.7);
}

.ticker__inner span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ticker__inner span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 16px rgba(255, 141, 249, 0.6);
}

main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(80px, 11vw, 150px);
    padding: clamp(60px, 8vw, 120px) clamp(24px, 6vw, 110px) clamp(120px, 10vw, 170px);
    z-index: 1;
}

.section {
    position: relative;
    display: grid;
    gap: clamp(32px, 5vw, 56px);
    padding: clamp(42px, 6vw, 84px);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(156, 77, 255, 0.22);
    background: linear-gradient(150deg, rgba(10, 2, 30, 0.9), rgba(4, 0, 18, 0.82));
    box-shadow: 0 50px 120px rgba(6, 0, 20, 0.45);
    backdrop-filter: blur(24px);
}

.section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(156, 77, 255, 0.08), transparent 55%);
    z-index: -1;
}

.section > * {
    position: relative;
    z-index: 1;
}

.section h2 {
    margin: 0;
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(2.8rem, 5vw, 3.6rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.1;
}

.section h3 {
    margin: 0;
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    color: var(--text);
}

.section p {
    margin: 0;
    color: var(--text-soft);
    font-size: 1.02rem;
    line-height: 1.8;
}

.section--panels {
    background: linear-gradient(160deg, rgba(11, 3, 36, 0.94), rgba(6, 0, 24, 0.84));
    border-color: rgba(140, 85, 255, 0.35);
}

.section--modules {
    background: linear-gradient(160deg, rgba(8, 0, 24, 0.94), rgba(15, 0, 32, 0.86));
    border-color: rgba(95, 53, 255, 0.3);
}

.section--accent {
    background: linear-gradient(150deg, rgba(22, 3, 46, 0.94), rgba(8, 0, 28, 0.88));
    border-color: rgba(255, 141, 249, 0.28);
    box-shadow: 0 60px 140px rgba(120, 25, 110, 0.38);
}

.section--pulse {
    background: linear-gradient(160deg, rgba(10, 6, 38, 0.95), rgba(2, 0, 18, 0.85));
    border-color: rgba(74, 245, 255, 0.26);
}

.section--split {
    background: linear-gradient(150deg, rgba(9, 3, 30, 0.94), rgba(5, 0, 24, 0.84));
}

.section--showcase {
    background: linear-gradient(160deg, rgba(12, 2, 34, 0.94), rgba(6, 0, 20, 0.82));
}

.section__heading {
    display: grid;
    gap: 16px;
    max-width: 600px;
}

.section__heading .eyebrow {
    justify-self: start;
}

.section__heading p {
    max-width: 520px;
}

.eyebrow {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(156, 77, 255, 0.4);
    background: rgba(156, 77, 255, 0.14);
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: rgba(248, 244, 255, 0.75);
}

.section__grid {
    display: grid;
    gap: clamp(32px, 5vw, 60px);
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.section__grid--reverse {
    direction: rtl;
}

.section__grid--reverse > * {
    direction: ltr;
}

.about__card {
    display: grid;
    gap: 28px;
    background: rgba(11, 3, 28, 0.86);
    border: 1px solid rgba(156, 77, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4.5vw, 42px);
    box-shadow: var(--shadow-soft);
}

.about__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.about__stats span {
    display: block;
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: 0.1em;
    color: var(--text);
}

.about__stats small {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.68rem;
    color: rgba(248, 244, 255, 0.62);
}

.feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.feature-list li {
    position: relative;
    padding-left: 24px;
    color: var(--text-soft);
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(255, 141, 249, 0.6);
}

.callout {
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    background: rgba(255, 141, 249, 0.1);
    border: 1px solid rgba(255, 141, 249, 0.25);
    color: var(--text);
    line-height: 1.6;
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(24px, 5vw, 42px);
}

.panel {
    display: grid;
    gap: 18px;
    padding: clamp(24px, 5vw, 34px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(156, 77, 255, 0.3);
    background: rgba(11, 3, 30, 0.82);
    box-shadow: inset 0 0 28px rgba(156, 77, 255, 0.12), 0 28px 70px rgba(7, 0, 22, 0.4);
}

.panel__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(74, 245, 255, 0.14);
    border: 1px solid rgba(74, 245, 255, 0.28);
    color: rgba(74, 245, 255, 0.9);
}

.panel__status {
    color: var(--cyan);
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(24px, 5vw, 40px);
}

.module-card {
    display: grid;
    gap: 18px;
    padding: clamp(26px, 5vw, 36px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(156, 77, 255, 0.28);
    background: rgba(10, 3, 32, 0.86);
    box-shadow: inset 0 0 32px rgba(156, 77, 255, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.module-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    font-size: 0.92rem;
    color: rgba(248, 244, 255, 0.7);
}

.module-card li {
    position: relative;
    padding-left: 18px;
}

.module-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(156, 77, 255, 0.8);
    box-shadow: 0 0 10px rgba(156, 77, 255, 0.5);
}

.module-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 90px rgba(30, 0, 60, 0.45);
}

.cards {
    display: grid;
    gap: clamp(24px, 4vw, 36px);
}

.cards--enhanced {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card {
    position: relative;
    display: grid;
    gap: 16px;
    padding: clamp(24px, 4.5vw, 34px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 141, 249, 0.24);
    background: rgba(20, 6, 46, 0.82);
    box-shadow: inset 0 0 26px rgba(255, 141, 249, 0.15), 0 28px 70px rgba(30, 0, 60, 0.4);
    overflow: hidden;
}

.card::after {
    content: "";
    position: absolute;
    inset: -60% 40% auto -30%;
    height: 140%;
    background: radial-gradient(circle, rgba(255, 141, 249, 0.25), transparent 60%);
    transform: rotate(12deg);
    pointer-events: none;
}

.card__badge {
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: rgba(255, 141, 249, 0.9);
}

.pulse__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(24px, 5vw, 40px);
}

.pulse-card {
    display: grid;
    gap: 18px;
    padding: clamp(26px, 5vw, 34px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(74, 245, 255, 0.28);
    background: rgba(4, 12, 32, 0.82);
    box-shadow: inset 0 0 28px rgba(74, 245, 255, 0.15), 0 30px 90px rgba(0, 40, 70, 0.45);
}

.pulse-card__meta {
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
    color: rgba(74, 245, 255, 0.85);
}

.section--split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(32px, 6vw, 60px);
    align-items: stretch;
}

.split__content {
    display: grid;
    gap: 24px;
}

.steps {
    counter-reset: steps;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.steps li {
    counter-increment: steps;
    display: grid;
    gap: 6px;
    padding: 18px 22px 18px 60px;
    border-radius: var(--radius-md);
    background: rgba(12, 4, 32, 0.7);
    border: 1px solid rgba(156, 77, 255, 0.26);
    position: relative;
}

.steps li::before {
    content: counter(steps, decimal-leading-zero);
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Rajdhani", sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    color: var(--accent);
}

.steps__title {
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text);
}

.steps__text {
    color: rgba(248, 244, 255, 0.7);
}

.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.split__visual {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: clamp(24px, 5vw, 36px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(13, 4, 36, 0.82);
    box-shadow: var(--shadow-soft);
}

.video-card {
    display: grid;
    gap: 16px;
    text-align: center;
}

.video-card__badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(74, 245, 255, 0.18);
    border: 1px solid rgba(74, 245, 255, 0.32);
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: rgba(74, 245, 255, 0.9);
}

.showcase__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(24px, 5vw, 40px);
}

.showcase__item {
    display: grid;
    gap: 14px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(156, 77, 255, 0.24);
    background: rgba(8, 0, 24, 0.82);
    box-shadow: 0 30px 80px rgba(10, 0, 40, 0.45);
}

.showcase__item img {
    width: 100%;
    display: block;
}

.showcase__item figcaption {
    padding: 18px 22px 22px;
    font-size: 0.92rem;
    color: rgba(248, 244, 255, 0.78);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline {
    position: relative;
    display: grid;
    gap: 38px;
    padding-left: 34px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(156, 77, 255, 0.4), transparent);
}

.timeline__item {
    position: relative;
    display: grid;
    gap: 10px;
}

.timeline__dot {
    position: absolute;
    left: -34px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 24px rgba(255, 141, 249, 0.6);
}

.timeline__content {
    padding: 18px 24px;
    border-radius: var(--radius-md);
    background: rgba(12, 4, 32, 0.76);
    border: 1px solid rgba(156, 77, 255, 0.32);
    box-shadow: inset 0 0 22px rgba(156, 77, 255, 0.12);
    display: grid;
    gap: 10px;
}

.rules {
    display: grid;
    gap: 18px;
}

.rules ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 12px;
    color: rgba(248, 244, 255, 0.76);
}

.whitelist {
    display: grid;
    gap: 20px;
    padding: clamp(28px, 5vw, 36px);
    border-radius: var(--radius-lg);
    background: rgba(12, 4, 36, 0.78);
    border: 1px solid rgba(255, 141, 249, 0.25);
    box-shadow: inset 0 0 26px rgba(255, 141, 249, 0.12);
}

.contact {
    display: grid;
    gap: 24px;
}

.contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
}

.contact__grid h3 {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.contact__grid a {
    color: var(--accent);
    text-decoration: none;
}

.contact__grid a:hover {
    color: #fff;
}

footer {
    margin-top: clamp(80px, 10vw, 140px);
    padding: clamp(32px, 5vw, 48px) clamp(24px, 6vw, 110px) clamp(60px, 8vw, 90px);
    border-top: 1px solid rgba(156, 77, 255, 0.24);
    background: rgba(5, 0, 16, 0.9);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: 0.92rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 0.16em;
}

.footer__brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(156, 77, 255, 0.6));
}

.footer__links {
    display: inline-flex;
    align-items: center;
    gap: 28px;
}

.footer__links a {
    color: rgba(248, 244, 255, 0.65);
    transition: color 0.3s ease;
}

.footer__links a:hover {
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--text);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp 0.8s ease forwards;
}

[data-animate="float-up"] {
    animation-name: floatUp;
}

[data-animate="fade-up"] {
    animation-name: fadeUp;
}

[data-delay="1"] { animation-delay: 0.15s; }
[data-delay="2"] { animation-delay: 0.3s; }
[data-delay="3"] { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .background-glow .glow,
    .hero__glitch,
    .wave-line,
    .ticker__inner {
        animation: none;
    }
}

@media (max-width: 1080px) {
    .nav {
        margin: 0 clamp(18px, 5vw, 60px);
    }

    .hero {
        padding: 28px clamp(18px, 6vw, 70px) 90px;
    }

    main {
        padding: clamp(60px, 10vw, 110px) clamp(18px, 6vw, 80px) clamp(110px, 12vw, 150px);
    }

    footer {
        padding-inline: clamp(18px, 6vw, 80px);
    }
}

@media (max-width: 960px) {
    .nav {
        padding: 16px clamp(20px, 5vw, 40px);
    }

    .nav__toggle {
        display: inline-flex;
    }

    .nav__links {
        position: fixed;
        inset: 100px clamp(18px, 8vw, 36px) auto clamp(18px, 8vw, 36px);
        border-radius: var(--radius-lg);
        padding: 26px;
        background: rgba(7, 0, 20, 0.92);
        backdrop-filter: blur(24px);
        border: 1px solid rgba(156, 77, 255, 0.32);
        flex-direction: column;
        gap: 18px;
        transform: scale(0.9);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .nav__checkbox:checked ~ .nav__links {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
}

@media (max-width: 760px) {
    .section {
        padding: clamp(32px, 8vw, 60px);
    }

    .section h2 {
        font-size: clamp(2.2rem, 9vw, 3rem);
    }

    .panel-grid,
    .module-grid,
    .cards--enhanced,
    .pulse__grid,
    .contact__grid,
    .showcase__grid {
        grid-template-columns: 1fr;
    }

    .section__grid--reverse {
        direction: ltr;
    }

    .steps li {
        padding-left: 56px;
    }

    footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .nav {
        padding: 14px 18px;
    }

    .hero__grid {
        padding-top: 120px;
    }

    .ticker__inner {
        font-size: 0.7rem;
        gap: 30px;
    }

    footer {
        letter-spacing: 0.1em;
        font-size: 0.82rem;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes drift {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(6%, -4%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes gridPulse {
    0% { opacity: 0.04; }
    50% { opacity: 0.12; }
    100% { opacity: 0.04; }
}

@keyframes scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

@keyframes glitch {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(4px, -3px); }
    40% { transform: translate(-3px, 2px); }
    60% { transform: translate(2px, -1px); }
    80% { transform: translate(-2px, 3px); }
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 18px rgba(156, 77, 255, 0.35); }
    50% { box-shadow: 0 0 28px rgba(156, 77, 255, 0.55); }
}

@keyframes wave {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.65; }
    50% { transform: translateX(-50%) scaleX(1.1); opacity: 1; }
}

@keyframes scroll {
    0% { transform: translate(-50%, 0); opacity: 1; }
    60% { opacity: 0.4; }
    100% { transform: translate(-50%, 18px); opacity: 0; }
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}