@font-face { font-family: DefaultFont; src: url('fonts/times-new-roman/times.ttf');}
@font-face { font-family: Acherus; src: url('fonts/acherus/acherus_militant_1_-_bold.otf.otf');}
@font-face { font-family: AeogoPixellated; src: url('fonts/aeogo_pixellated/AeogoPixellated-Regular.ttf');}
@font-face { font-family: Aicon; src: url('fonts/aicon/AICON-Regular.otf'); }
@font-face { font-family: Airlock; src: url('fonts/airlock/Airlock.otf'); }
@font-face { font-family: Anta; src: url('fonts/anta/fonts/ttf/Anta-Regular.ttf'); }
@font-face { font-family: Box; src: url('fonts/box/TTF/BOXRounded-Regular.ttf'); }
@font-face { font-family: Charito; src: url('fonts/charito/Charito.ttf'); }
@font-face { font-family: Crition; src: url('fonts/crition/CritionFont-Regular.ttf'); }
@font-face { font-family: District; src: url('fonts/district/District.ttf'); }
@font-face { font-family: DuctileDisplay; src: url('fonts/ductile_display/Ductile Display.otf'); }
@font-face { font-family: FullGass; src: url('fonts/full_gass/FONT/FULL-GASS.ttf'); }
@font-face { font-family: Layn; src: url('fonts/layn/Layn/Layn.ttf'); }
@font-face { font-family: Matrixtype; src: url('fonts/matrixtype/Matrixtype.ttf'); }
@font-face { font-family: MidnightLetters; src: url('fonts/midnight_letters/MidnightLetters.ttf'); }
@font-face { font-family: MonaspaceArgon; src: url('fonts/monaspace/fonts/otf/MonaspaceArgon-Regular.otf'); }
@font-face { font-family: MonaspaceKrypton; src: url('fonts/monaspace/fonts/otf/MonaspaceKrypton-Regular.otf'); }
@font-face { font-family: MonaspaceNeon; src: url('fonts/monaspace/fonts/otf/MonaspaceNeon-Regular.otf'); }
@font-face { font-family: MonaspaceRadon; src: url('fonts/monaspace/fonts/otf/MonaspaceRadon-Regular.otf'); }
@font-face { font-family: MonaspaceXenon; src: url('fonts/monaspace/fonts/otf/MonaspaceXenon-Regular.otf'); }
@font-face { font-family: Monobloco; src: url('fonts/monobloco/Monobloco.otf'); }
@font-face { font-family: Nextstep; src: url('fonts/nextstep/FONT/NEXTSTEP.ttf'); }
@font-face { font-family: Quantum; src: url('fonts/quantum/quantum.ttf'); }
@font-face { font-family: Skateblade; src: url('fonts/sb_skate_blade/font/Skateblade-Regular.ttf'); }
@font-face { font-family: SpacerR; src: url('fonts/spacer_r/SPACERR-Regular.ttf'); }
@font-face { font-family: StargazeCircle; src: url('fonts/stargaze/STARGAZE - Circle.otf'); }
@font-face { font-family: StargazeSquare; src: url('fonts/stargaze/STARGAZE - Square.otf'); }
@font-face { font-family: Tsing; src: url('fonts/tsing/Tsing.ttf'); }
@font-face { font-family: TuringAbstract; src: url('fonts/turing/TTF/Turing Abstract.ttf'); }
@font-face { font-family: TuringBlock; src: url('fonts/turing/TTF/Turing Block.ttf'); }
@font-face { font-family: TuringOutline; src: url('fonts/turing/TTF/Turing Outline.ttf'); }
@font-face { font-family: Voyager; src: url('fonts/voyager/VOYAGER.ttf'); }
@font-face { font-family: Xyber; src: url('fonts/xyber/XYBER - Regular.otf'); }

/* Font application classes */
.font-default { font-family: DefaultFont, sans-serif; }
.font-acherus { font-family: Acherus, sans-serif; }
.font-aeogo-pixellated { font-family: AeogoPixellated, sans-serif; }
.font-aicon { font-family: Aicon, sans-serif; }
.font-airlock { font-family: Airlock, sans-serif; }
.font-anta { font-family: Anta, sans-serif; }
.font-box { font-family: Box, sans-serif; }
.font-charito { font-family: Charito, sans-serif; }
.font-crition { font-family: Crition, sans-serif; }
.font-district { font-family: District, sans-serif; }
.font-ductile-display { font-family: DuctileDisplay, sans-serif; }
.font-full-gass { font-family: FullGass, sans-serif; }
.font-layn { font-family: Layn, sans-serif; }
.font-matrixtype { font-family: Matrixtype, sans-serif; }
.font-midnight-letters { font-family: MidnightLetters, sans-serif; }
.font-monaspace-argon { font-family: MonaspaceArgon, sans-serif; }
.font-monaspace-krypton { font-family: MonaspaceKrypton, sans-serif; }
.font-monaspace-neon { font-family: MonaspaceNeon, sans-serif; }
.font-monaspace-radon { font-family: MonaspaceRadon, sans-serif; }
.font-monaspace-xenon { font-family: MonaspaceXenon, sans-serif; }
.font-monobloco { font-family: Monobloco, sans-serif; }
.font-nextstep { font-family: Nextstep, sans-serif; }
.font-quantum { font-family: Quantum, sans-serif; }
.font-skateblade { font-family: Skateblade, sans-serif; }
.font-spacer-r { font-family: SpacerR, sans-serif; }
.font-stargaze-circle { font-family: StargazeCircle, sans-serif; }
.font-stargaze-square { font-family: StargazeSquare, sans-serif; }
.font-tsing { font-family: Tsing, sans-serif; }
.font-turing-abstract { font-family: TuringAbstract, sans-serif; }
.font-turing-block { font-family: TuringBlock, sans-serif; }
.font-turing-outline { font-family: TuringOutline, sans-serif; }
.font-voyager { font-family: Voyager, sans-serif; }
.font-xyber { font-family: Xyber, sans-serif; }

/* Specific font styles for preview */
.option-default { font-family: DefaultFont; }
.option-acherus { font-family: Acherus; }
.option-aeogo-pixellated { font-family: AeogoPixellated; }
.option-aicon { font-family: Aicon; }
.option-airlock { font-family: Airlock; }
.option-anta { font-family: Anta; }
.option-box { font-family: Box; }
.option-charito { font-family: Charito; }
.option-crition { font-family: Crition; }
.option-district { font-family: District; }
.option-ductile-display { font-family: DuctileDisplay; }
.option-full-gass { font-family: FullGass; }
.option-layn { font-family: Layn; }
.option-matrixtype { font-family: Matrixtype; }
.option-midnight-letters { font-family: MidnightLetters; }
.option-monaspace-argon { font-family: MonaspaceArgon; }
.option-monaspace-krypton { font-family: MonaspaceKrypton; }
.option-monaspace-neon { font-family: MonaspaceNeon; }
.option-monaspace-radon { font-family: MonaspaceRadon; }
.option-monaspace-xenon { font-family: MonaspaceXenon; }
.option-monobloco { font-family: Monobloco; }
.option-nextstep { font-family: Nextstep; }
.option-quantum { font-family: Quantum; }
.option-skateblade { font-family: Skateblade; }
.option-spacer-r { font-family: SpacerR; }
.option-stargaze-circle { font-family: StargazeCircle; }
.option-stargaze-square { font-family: StargazeSquare; }
.option-tsing { font-family: Tsing; }
.option-turing-abstract { font-family: TuringAbstract; }
.option-turing-block { font-family: TuringBlock; }
.option-turing-outline { font-family: TuringOutline; }
.option-voyager { font-family: Voyager; }
.option-xyber { font-family: Xyber; }














* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-family: DefaultFont;
}

body {
    background-color: #0a0a1a;
    color: #e0e0ff;
    line-height: 1.6;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(28, 28, 80, 0.3) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(40, 10, 60, 0.3) 0%, transparent 20%);
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background: linear-gradient(to right, #0c0c2e, #1a1a4a);
    padding: 20px 0;
    border-bottom: 2px solid #3a3a8a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

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

.logo {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(45deg, #6a5af9, #d66efd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 15px rgba(106, 90, 249, 0.5);
}




/* Font Switcher Styles */
.font-switcher {
    position: relative;
    margin-left: 20px;
}

.font-dropdown {
    background: linear-gradient(145deg, #151540, #0f0f28);
    border: 1px solid #3a3a8a;
    border-radius: 8px;
    padding: 8px 12px;
    color: #b8b8ff;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 150px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23b8b8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 35px;
    transition: all 0.3s ease;
}

.font-dropdown:hover {
    border-color: #6a5af9;
    box-shadow: 0 0 10px rgba(106, 90, 249, 0.3);
}

.font-dropdown:focus {
    outline: none;
    border-color: #6a5af9;
    box-shadow: 0 0 15px rgba(106, 90, 249, 0.5);
}

/* Font preview options */
.font-dropdown option {
    background: #151540;
    color: #b8b8ff;
    padding: 10px;
    font-size: 0.9rem;
}

/* Header adjustments for the new element */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    display: flex;
    align-items: center;
}

nav ul {
    display: flex;
    list-style: none;
    margin-right: 20px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .font-switcher {
        margin-left: 10px;
        margin-top: 10px;
    }
    
    .font-dropdown {
        min-width: 120px;
        font-size: 0.8rem;
    }
    
    .header-content {
        flex-wrap: wrap;
    }
    
    nav {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 15px;
    }
    
    nav ul {
        margin-right: 0;
    }
}


/* Ensure logo maintains its style */
.logo {
    /* Keep logo consistent */
    /* font-family: Acherus !important;  */
}


























nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 25px;
}

nav ul li a {
    color: #b8b8ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: color 0.3s;
    padding: 5px 10px;
    border-radius: 4px;
}

nav ul li a:hover {
    color: #6a5af9;
    background-color: rgba(106, 90, 249, 0.1);
}

.hero {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(26, 26, 74, 0.7) 0%, rgba(10, 10, 26, 0) 70%);
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #6a5af9, #d66efd, #6a5af9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(106, 90, 249, 0.4);
}

.hero p {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 0 auto 30px;
    color: #c0c0ff;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(45deg, #6a5af9, #d66efd);
    color: white;
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 5px 15px rgba(106, 90, 249, 0.4);
    margin: 10px;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(106, 90, 249, 0.6);
}

.secondary-button {
    background: transparent;
    border: 2px solid #6a5af9;
    color: #b8b8ff;
}

.game-info {
    padding: 80px 0;
    background-color: rgba(15, 15, 40, 0.7);
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.5rem;
    color: #e0e0ff;
}

.section-title span {
    color: #6a5af9;
}

.info-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.info-card {
    flex: 1;
    min-width: 300px;
    background: linear-gradient(145deg, #151540, #0f0f28);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid #2a2a5a;
    transition: transform 0.3s;
}

.info-card:hover {
    transform: translateY(-10px);
}

.info-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #b8b8ff;
    display: flex;
    align-items: center;
}

.info-card h3 i {
    margin-right: 10px;
    color: #6a5af9;
}

.card-gallery {
    padding: 80px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

.gallery-item {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s;
    background: linear-gradient(145deg, #151540, #0f0f28);
    border: 1px solid #2a2a5a;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.caption {
    padding: 15px;
    text-align: center;
    font-weight: 600;
    color: #b8b8ff;
}

.how-to-play {
    padding: 80px 0;
    background-color: rgba(15, 15, 40, 0.7);
}

.steps {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 50px;
}

.step {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 20px;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #6a5af9, #d66efd);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(106, 90, 249, 0.4);
}

.step h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #b8b8ff;
}

footer {
    background: linear-gradient(to right, #0c0c2e, #1a1a4a);
    padding: 50px 0 20px;
    border-top: 2px solid #3a3a8a;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section {
    flex: 1;
    min-width: 250px;
}

.footer-section h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #b8b8ff;
}

.footer-section p, .footer-section a {
    color: #a0a0e0;
    margin-bottom: 10px;
    display: block;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: #6a5af9;
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #2a2a5a;
    color: #8080c0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }
    
    nav ul {
        margin-top: 20px;
        justify-content: center;
    }
    
    nav ul li {
        margin: 0 10px;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
}

























.factions {
    padding: 80px 0;
    background-color: rgba(10, 10, 26, 0.8);
}

.factions-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 50px;
}

.faction-showcase {
    background: linear-gradient(145deg, #151540, #0f0f28);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid #2a2a5a;
    transition: transform 0.3s, box-shadow 0.3s;
}

.faction-showcase:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(106, 90, 249, 0.2);
}

.faction-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    align-items: start;
    margin-bottom: 30px;
}

.faction-content.reverse {
    grid-template-columns: 2fr 1fr;
}

.faction-content.reverse .faction-info {
    order: -1;
}

.faction-info {
    display: flex;
    flex-direction: column;
}

.faction-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.faction-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(45deg, #6a5af9, #d66efd);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    box-shadow: 0 5px 15px rgba(106, 90, 249, 0.4);
    overflow: hidden;
}

.faction-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.faction-name {
    font-size: 2rem;
    color: #b8b8ff;
    margin: 0;
}

.faction-description {
    color: #c0c0ff;
    line-height: 1.7;
    font-size: 1.1rem;
}

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

.card-preview {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s;
    background: rgba(20, 20, 50, 0.6);
    border: 1px solid #3a3a8a;
}

.card-preview:hover {
    transform: scale(1.5);
}

.card-preview img {
    width: 100%;
    /* height: 280px; */
    object-fit: cover;
    display: block;
}

/* Faction-specific accent colors */
.faction-showcase:nth-child(1) {
    border-top: 4px solid #ff6b6b;
}

.faction-showcase:nth-child(2) {
    border-top: 4px solid #4ecdc4;
}

.faction-showcase:nth-child(3) {
    border-top: 4px solid #ffd166;
}

.faction-showcase:nth-child(4) {
    border-top: 4px solid #06d6a0;
}

.faction-showcase:nth-child(5) {
    border-top: 4px solid #118ab2;
}

.faction-showcase:nth-child(6) {
    border-top: 4px solid #9d4edd;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .faction-content,
    .faction-content.reverse {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .faction-content.reverse .faction-info {
        order: 0;
    }
    
    .faction-header {
        flex-direction: column;
        text-align: center;
    }
    
    .faction-logo {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .faction-cards {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}







.creator-ecosystem {
    padding: 100px 0;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a4a 100%);
    position: relative;
    overflow: hidden;
}

.creator-ecosystem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(106, 90, 249, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(214, 110, 253, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.creator-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.creator-text {
    padding-right: 20px;
}

.creator-text h2 {
    font-size: 3rem;
    margin-bottom: 30px;
    background: linear-gradient(45deg, #6a5af9, #d66efd, #6a5af9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.2;
}

.creator-text h2 span {
    display: block;
    font-size: 2.5rem;
}

.creator-highlight {
    color: #6a5af9;
    font-weight: 700;
}

.creator-features {
    margin: 40px 0;
}

.creator-feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(106, 90, 249, 0.1);
    border-radius: 12px;
    border-left: 4px solid #6a5af9;
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #6a5af9, #d66efd);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.feature-text h4 {
    color: #b8b8ff;
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.feature-text p {
    color: #c0c0ff;
    line-height: 1.6;
    margin: 0;
}

.creator-visual {
    position: relative;
}

.creator-card-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    perspective: 1000px;
}

.showcase-card {
    background: linear-gradient(145deg, #151540, #0f0f28);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    border: 2px solid #3a3a8a;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.showcase-card:nth-child(1) {
    transform: rotate(-5deg) translateY(20px);
    animation: float-card-1 6s ease-in-out infinite;
}

.showcase-card:nth-child(2) {
    transform: rotate(3deg) translateY(-10px);
    animation: float-card-2 7s ease-in-out infinite 1s;
}

.showcase-card:nth-child(3) {
    transform: rotate(-2deg) translateY(15px);
    animation: float-card-3 5s ease-in-out infinite 0.5s;
}

.showcase-card:nth-child(4) {
    transform: rotate(4deg) translateY(-5px);
    animation: float-card-4 6.5s ease-in-out infinite 1.5s;
}

.showcase-card:hover {
    transform: scale(1.05) rotate(0deg) !important;
    box-shadow: 0 20px 40px rgba(106, 90, 249, 0.3);
    z-index: 10;
}

.card-preview-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(45deg, #2a2a5a, #3a3a8a);
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #6a5af9;
}

.card-user-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.card-info h4 {
    color: #b8b8ff;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.card-info p {
    color: #c0c0ff;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.creator-cta {
    margin-top: 40px;
    text-align: center;
}

.creator-cta-button {
    display: inline-block;
    background: linear-gradient(45deg, #6a5af9, #d66efd);
    color: white;
    padding: 18px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(106, 90, 249, 0.4);
    position: relative;
    overflow: hidden;
}

.creator-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.creator-cta-button:hover::before {
    left: 100%;
}

.creator-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(106, 90, 249, 0.6);
}

@keyframes float-card-1 {
    0%, 100% { transform: rotate(-5deg) translateY(20px); }
    50% { transform: rotate(-5deg) translateY(5px); }
}

@keyframes float-card-2 {
    0%, 100% { transform: rotate(3deg) translateY(-10px); }
    50% { transform: rotate(3deg) translateY(5px); }
}

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

@keyframes float-card-4 {
    0%, 100% { transform: rotate(4deg) translateY(-5px); }
    50% { transform: rotate(4deg) translateY(-15px); }
}

/* Responsive Design */
@media (max-width: 968px) {
    .creator-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .creator-text {
        padding-right: 0;
        text-align: center;
    }
    
    .creator-text h2 {
        font-size: 2.5rem;
    }
    
    .creator-text h2 span {
        font-size: 2rem;
    }
    
    .creator-card-showcase {
        grid-template-columns: repeat(2, 1fr);
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .creator-card-showcase {
        grid-template-columns: 1fr;
    }
    
    .showcase-card {
        transform: none !important;
        animation: none !important;
    }
    
    .showcase-card:hover {
        transform: scale(1.02) !important;
    }
}











.testimonials {
    padding: 100px 0;
    background: linear-gradient(135deg, #0f0f28 0%, #1a1a4a 100%);
    position: relative;
    overflow: hidden;
}

.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 10%, rgba(255, 107, 107, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(255, 209, 102, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.testimonial-card {
    background: linear-gradient(145deg, #151540, #0f0f28);
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border: 1px solid #2a2a5a;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(106, 90, 249, 0.2);
    border-color: #3a3a8a;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 5rem;
    color: rgba(106, 90, 249, 0.2);
    font-family: serif;
    line-height: 1;
}

.testimonial-content {
    color: #c0c0ff;
    line-height: 1.7;
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.testimonial-author {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(45deg, #6a5af9, #d66efd);
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(106, 90, 249, 0.4);
}

.author-info h4 {
    color: #b8b8ff;
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.author-info p {
    color: #8080c0;
    margin: 0;
    font-size: 0.9rem;
}

.testimonial-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #2a2a5a;
}

.faction-badge {
    background: rgba(106, 90, 249, 0.2);
    color: #b8b8ff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.achievement-badge {
    display: flex;
    align-items: center;
    color: #8080c0;
    font-size: 0.9rem;
}

.achievement-badge::before {
    content: '⭐';
    margin-right: 5px;
}

/* Specific testimonial accents */
.testimonial-card:nth-child(1) {
    border-top: 4px solid #ff6b6b;
}

.testimonial-card:nth-child(2) {
    border-top: 4px solid #4ecdc4;
}

.testimonial-card:nth-child(3) {
    border-top: 4px solid #ffd166;
}

.testimonial-card:nth-child(4) {
    border-top: 4px solid #06d6a0;
}

.testimonial-card:nth-child(5) {
    border-top: 4px solid #118ab2;
}

.testimonial-card:nth-child(6) {
    border-top: 4px solid #9d4edd;
}

/* Highlight phrases */
.highlight-phrase {
    color: #6a5af9;
    font-weight: 600;
}

.raw-phrase {
    color: #ff6b6b;
    font-weight: 600;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .testimonial-card {
        padding: 30px 20px;
    }
    
    .testimonial-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Animation for cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.testimonial-card {
    animation: fadeInUp 0.6s ease-out;
}

.testimonial-card:nth-child(2) {
    animation-delay: 0.1s;
}

.testimonial-card:nth-child(3) {
    animation-delay: 0.2s;
}

.testimonial-card:nth-child(4) {
    animation-delay: 0.3s;
}

.testimonial-card:nth-child(5) {
    animation-delay: 0.4s;
}

.testimonial-card:nth-child(6) {
    animation-delay: 0.5s;
}