:root {
    --quantumIndigo: #4F46E5;
    --synthAzure: #06B6D4;
    --digitalCharcoal: #1F2937;
    --neuralCharcoal: #111827;
    --quantumWhite: #F8FAFC;
    --synthGray: #64748B;
    --errorSignal: #EF4444;
    --successPulse: #10B981;
    --warningBeam: #F59E0B;
    
    --gradientPrimary: linear-gradient(135deg, var(--quantumIndigo), var(--synthAzure));
    --gradientSecondary: linear-gradient(135deg, var(--synthAzure), var(--quantumIndigo));
    --gradientDark: linear-gradient(135deg, var(--digitalCharcoal), var(--neuralCharcoal));
    
    --fontPrimary: 'Exo 2', sans-serif;
    --borderRadius: 12px;
    --shadowQuantum: 0 10px 25px rgba(79, 70, 229, 0.1);
    --shadowSynth: 0 4px 15px rgba(6, 182, 212, 0.2);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fontPrimary);
    background: var(--neuralCharcoal);
    color: var(--quantumWhite);
    line-height: 1.6;
    overflow-x: hidden;
}

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

.quantumNavigator {
    background: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--quantumIndigo);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: var(--transition);
}

.quantumNavigator .codebaseContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.synthLogoWrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.digitalIdentity {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--synthAzure);
}

.quantumBrand {
    font-size: 24px;
    font-weight: 700;
    color: var(--quantumWhite);
    text-decoration: none;
    background: var(--gradientPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: var(--transition);
}

.quantumBrand:hover {
    transform: scale(1.05);
}

.neuralNavigation {
    display: flex;
    gap: 30px;
}

.synthLink {
    color: var(--quantumWhite);
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--borderRadius);
    position: relative;
    transition: var(--transition);
}

.synthLink::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--gradientPrimary);
    border-radius: var(--borderRadius);
    opacity: 0;
    transition: var(--transition);
    z-index: -1;
}

.synthLink:hover::before,
.synthLink.activePulse::before {
    width: 100%;
    opacity: 0.2;
}

.synthLink:hover {
    color: var(--synthAzure);
    transform: translateY(-2px);
}

.synthLink.activePulse {
    color: var(--synthAzure);
}

.quantumHero {
    padding: 80px 0;
    background: var(--gradientDark);
    position: relative;
    overflow: hidden;
}

.quantumHero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="%2306B6D4" opacity="0.1"/></svg>') repeat;
    animation: digitialFloat 20s linear infinite;
}

@keyframes digitialFloat {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-50px, -50px) rotate(360deg); }
}

.heroMatrix {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.heroLeft {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.verticalHeading {
    font-size: 80px;
    font-weight: 700;
    background: var(--gradientPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-orientation: mixed;
    height: 300px;
    animation: quantumPulse 3s ease-in-out infinite;
}

@keyframes quantumPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.topicsList {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.topicItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid var(--quantumIndigo);
    border-radius: var(--borderRadius);
    transition: var(--transition);
}

.topicItem:hover {
    background: rgba(6, 182, 212, 0.1);
    border-color: var(--synthAzure);
    transform: translateX(10px);
}

.topicItem i {
    font-size: 20px;
    color: var(--synthAzure);
}

.heroCenter {
    display: flex;
    justify-content: center;
}

.quantumButton {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--gradientPrimary);
    color: var(--quantumWhite);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--borderRadius);
    box-shadow: var(--shadowQuantum);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.quantumButton::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: var(--transition);
}

.quantumButton:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.3);
}

.quantumButton:hover::before {
    left: 100%;
}

.quantumButton.large {
    padding: 20px 40px;
    font-size: 18px;
}

.heroRight {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skillCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: rgba(6, 182, 212, 0.1);
    border: 2px solid transparent;
    border-radius: var(--borderRadius);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.skillCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradientSecondary);
    opacity: 0;
    transition: var(--transition);
    z-index: -1;
}

.skillCard:hover {
    border-color: var(--synthAzure);
    transform: translateY(-5px);
}

.skillCard:hover::before {
    opacity: 0.1;
}

.skillIcon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradientPrimary);
    border-radius: 50%;
    font-size: 24px;
    color: var(--quantumWhite);
}

.skillLabel {
    font-weight: 600;
    text-align: center;
}

.dataStreamHeader {
    text-align: center;
    margin-bottom: 60px;
}

.quantumTitle {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    background: var(--gradientPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.synthBorder {
    width: 100px;
    height: 4px;
    background: var(--gradientPrimary);
    margin: 0 auto;
    border-radius: 2px;
}

.neuralCard {
    background: rgba(31, 41, 55, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: var(--borderRadius);
    padding: 30px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.neuralCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: var(--gradientPrimary);
    transition: var(--transition);
}

.neuralCard:hover {
    border-color: var(--synthAzure);
    transform: translateY(-5px);
    box-shadow: var(--shadowSynth);
}

.neuralCard:hover::before {
    left: 0;
}

.cardTerminal {
    background: var(--neuralCharcoal);
    padding: 8px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--synthAzure);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.terminalPrompt {
    color: var(--synthAzure);
}

.cyborgHeading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--quantumWhite);
}

.quantumText {
    color: var(--synthGray);
    line-height: 1.7;
}

.missionStatement {
    padding: 60px 0;
    background: var(--digitalCharcoal);
}

.programDatabank {
    padding: 80px 0;
    background: var(--neuralCharcoal);
}

.programGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.programCard {
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: var(--borderRadius);
    padding: 30px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.programCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradientPrimary);
    transform: scaleX(0);
    transition: var(--transition);
}

.programCard:hover {
    border-color: var(--synthAzure);
    transform: translateY(-10px);
    box-shadow: var(--shadowQuantum);
}

.programCard:hover::before {
    transform: scaleX(1);
}

.programIcon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradientPrimary);
    border-radius: 50%;
    font-size: 36px;
    color: var(--quantumWhite);
}

.programTitle {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--quantumWhite);
}

.programDesc {
    color: var(--synthGray);
    margin-bottom: 25px;
    line-height: 1.6;
}

.programLink {
    display: inline-block;
    padding: 12px 24px;
    background: transparent;
    color: var(--synthAzure);
    text-decoration: none;
    border: 2px solid var(--synthAzure);
    border-radius: var(--borderRadius);
    font-weight: 600;
    transition: var(--transition);
}

.programLink:hover {
    background: var(--synthAzure);
    color: var(--neuralCharcoal);
    transform: scale(1.05);
}

.ageGroupMatrix {
    padding: 80px 0;
    background: var(--digitalCharcoal);
}

.ageGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.ageCard {
    text-align: center;
    padding: 40px 20px;
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: var(--borderRadius);
    transition: var(--transition);
}

.ageCard:hover {
    background: rgba(6, 182, 212, 0.1);
    transform: translateY(-5px);
}

.ageNumber {
    font-size: 48px;
    font-weight: 700;
    background: var(--gradientSecondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 15px;
}

.ageTitle {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--quantumWhite);
}

.ageDesc {
    color: var(--synthGray);
}

.featuresTerminal {
    padding: 80px 0;
    background: var(--neuralCharcoal);
}

.featuresGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.featureModule {
    text-align: center;
    padding: 30px;
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: var(--borderRadius);
    transition: var(--transition);
}

.featureModule:hover {
    border-color: var(--quantumIndigo);
    transform: translateY(-5px);
    box-shadow: var(--shadowQuantum);
}

.featureIcon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradientPrimary);
    border-radius: 50%;
    font-size: 30px;
    color: var(--quantumWhite);
}

.featureTitle {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--quantumWhite);
}

.featureText {
    color: var(--synthGray);
    line-height: 1.6;
}

.statsDisplay {
    padding: 60px 0;
    background: var(--digitalCharcoal);
}

.statsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.statModule {
    text-align: center;
    padding: 30px;
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid var(--quantumIndigo);
    border-radius: var(--borderRadius);
    transition: var(--transition);
}

.statModule:hover {
    background: rgba(6, 182, 212, 0.1);
    border-color: var(--synthAzure);
    transform: scale(1.05);
}

.statNumber {
    font-size: 36px;
    font-weight: 700;
    background: var(--gradientPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.statLabel {
    color: var(--synthGray);
    font-weight: 600;
}

.testimonialsGrid {
    padding: 80px 0;
    background: var(--neuralCharcoal);
}

.testimonialFlow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonialCard {
    padding: 30px;
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: var(--borderRadius);
    transition: var(--transition);
}

.testimonialCard:hover {
    border-color: var(--synthAzure);
    transform: translateY(-5px);
    box-shadow: var(--shadowSynth);
}

.testimonialText {
    color: var(--quantumWhite);
    font-style: italic;
    margin-bottom: 15px;
    line-height: 1.6;
}

.testimonialAuthor {
    color: var(--synthAzure);
    font-weight: 600;
}

.callToAction {
    padding: 80px 0;
    background: var(--gradientDark);
}

.callToAction .neuralCard {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.galleryShowcase {
    padding: 80px 0;
    background: var(--digitalCharcoal);
}

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

.galleryCard {
    transition: var(--transition);
}

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

.imageFrame {
    position: relative;
    border-radius: var(--borderRadius);
    overflow: hidden;
    background: rgba(31, 41, 55, 0.8);
    border: 2px solid rgba(79, 70, 229, 0.3);
    transition: var(--transition);
}

.imageFrame:hover {
    border-color: var(--synthAzure);
    box-shadow: var(--shadowQuantum);
}

.galleryImage {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: var(--transition);
}

.imageFrame:hover .galleryImage {
    transform: scale(1.05);
}

.imageOverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(17, 24, 39, 0.95));
    padding: 30px 20px 20px;
    transform: translateY(100%);
    transition: var(--transition);
}

.imageFrame:hover .imageOverlay {
    transform: translateY(0);
}

.overlayTitle {
    color: var(--quantumWhite);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 8px;
    background: var(--gradientPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.overlayDesc {
    color: var(--synthGray);
    font-size: 14px;
    line-height: 1.4;
}

.additionalFeedback {
    padding: 80px 0;
    background: var(--neuralCharcoal);
}

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

.aboutQuantumSpace,
.contactQuantumSpace,
.legalQuantumSpace {
    padding: 40px 0 80px;
}

.missionControlPanel {
    padding: 60px 0;
}

.algorithmicGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
}

.testimonialsMatrix {
    padding: 80px 0;
    background: var(--digitalCharcoal);
}

.feedbackGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonialContent {
    padding: 20px 0;
}

.authorData {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
}

.authorName {
    color: var(--synthAzure);
    font-weight: 700;
}

.authorAge {
    color: var(--synthGray);
    font-size: 14px;
}

.teamDatabank {
    padding: 80px 0;
    background: var(--neuralCharcoal);
}

.communicationHub {
    padding: 60px 0;
}

.contactMatrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.formTerminal {
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: var(--borderRadius);
    overflow: hidden;
}

.terminalHeader {
    background: var(--neuralCharcoal);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(79, 70, 229, 0.3);
}

.terminalControls {
    display: flex;
    gap: 8px;
}

.controlDot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.redDot { background: #EF4444; }
.yellowDot { background: #F59E0B; }
.greenDot { background: #10B981; }

.terminalTitle {
    color: var(--synthAzure);
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.quantumForm {
    padding: 30px;
}

.inputMatrix {
    display: grid;
    gap: 25px;
}

.dataField {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dataField.fullWidth {
    grid-column: 1 / -1;
}

.fieldLabel {
    color: var(--quantumWhite);
    font-weight: 600;
    font-size: 14px;
}

.neuralInput,
.neuralSelect,
.neuralTextarea {
    padding: 12px 16px;
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: var(--borderRadius);
    color: var(--quantumWhite);
    font-family: var(--fontPrimary);
    transition: var(--transition);
}

.neuralInput:focus,
.neuralSelect:focus,
.neuralTextarea:focus {
    outline: none;
    border-color: var(--synthAzure);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
}

.neuralTextarea {
    resize: vertical;
    min-height: 120px;
}

.errorSignal {
    color: var(--errorSignal);
    font-size: 12px;
    display: none;
}

.errorSignal.active {
    display: block;
}

.transmitButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    background: var(--gradientPrimary);
    color: var(--quantumWhite);
    border: none;
    border-radius: var(--borderRadius);
    font-family: var(--fontPrimary);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
}

.transmitButton:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadowQuantum);
}

.contactDatabank {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.infoPanel {
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: var(--borderRadius);
    padding: 30px;
}

.contactGrid {
    display: grid;
    gap: 25px;
}

.contactItem {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contactIcon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradientPrimary);
    border-radius: 50%;
    font-size: 20px;
    color: var(--quantumWhite);
    flex-shrink: 0;
}

.contactText h3 {
    color: var(--quantumWhite);
    font-weight: 700;
    margin-bottom: 5px;
}

.contactText p {
    color: var(--synthGray);
    line-height: 1.4;
}

.responseTimePanel {
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid var(--quantumIndigo);
    border-radius: var(--borderRadius);
    padding: 25px;
    text-align: center;
}

.responseContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.responseIcon {
    font-size: 40px;
    color: var(--synthAzure);
}

.responseContent h3 {
    color: var(--quantumWhite);
    font-weight: 700;
}

.responseContent p {
    color: var(--synthGray);
    line-height: 1.5;
}

.modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.modalOverlay.active {
    opacity: 1;
    visibility: visible;
}

.modalTerminal {
    background: var(--digitalCharcoal);
    border: 1px solid var(--quantumIndigo);
    border-radius: var(--borderRadius);
    overflow: hidden;
    transform: scale(0.8);
    transition: var(--transition);
    max-width: 400px;
    width: 90%;
}

.modalOverlay.active .modalTerminal {
    transform: scale(1);
}

.modalContent {
    padding: 40px;
    text-align: center;
}

.successIcon {
    font-size: 60px;
    color: var(--successPulse);
    margin-bottom: 20px;
}

.modalContent h2 {
    color: var(--quantumWhite);
    margin-bottom: 15px;
}

.modalContent p {
    color: var(--synthGray);
    margin-bottom: 25px;
    line-height: 1.6;
}

.modalButton {
    padding: 12px 30px;
    background: var(--gradientPrimary);
    color: var(--quantumWhite);
    border: none;
    border-radius: var(--borderRadius);
    font-family: var(--fontPrimary);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.modalButton:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadowQuantum);
}

.legalContent {
    max-width: 900px;
    margin: 0 auto;
}

.policySection {
    margin-bottom: 40px;
}

.sectionHeading {
    font-size: 28px;
    font-weight: 700;
    color: var(--quantumWhite);
    margin-bottom: 20px;
    background: var(--gradientPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cookieTypeCard,
.dataTypeCard,
.serviceCard {
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: var(--borderRadius);
    padding: 20px;
    margin-bottom: 20px;
    transition: var(--transition);
}

.cookieTypeCard:hover,
.dataTypeCard:hover,
.serviceCard:hover {
    border-color: var(--synthAzure);
    background: rgba(6, 182, 212, 0.1);
}

.cookieType,
.dataType,
.serviceType {
    font-size: 20px;
    font-weight: 700;
    color: var(--synthAzure);
    margin-bottom: 10px;
}

.browserList {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.browserItem {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: var(--borderRadius);
    transition: var(--transition);
}

.browserItem:hover {
    border-color: var(--quantumIndigo);
    background: rgba(31, 41, 55, 0.8);
}

.browserItem i {
    font-size: 24px;
    color: var(--synthAzure);
}

.contactInfo {
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: var(--borderRadius);
    padding: 20px;
    margin: 20px 0;
}

.contactInfo p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--quantumWhite);
}

.contactInfo i {
    color: var(--synthAzure);
}

.usageList,
.termsList,
.responsibilityList,
.prohibitedList {
    list-style: none;
    padding-left: 0;
}

.usageList li,
.termsList li,
.responsibilityList li,
.prohibitedList li {
    padding: 10px 0 10px 30px;
    position: relative;
    color: var(--synthGray);
    line-height: 1.6;
}

.usageList li::before,
.termsList li::before,
.responsibilityList li::before,
.prohibitedList li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--synthAzure);
    font-weight: 700;
}

.paymentTerms,
.refundTerms {
    background: rgba(79, 70, 229, 0.05);
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: var(--borderRadius);
    padding: 25px;
    margin-bottom: 20px;
}

.paymentType,
.refundType {
    font-size: 20px;
    font-weight: 700;
    color: var(--quantumIndigo);
    margin-bottom: 15px;
}

.rightsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.rightItem {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--successPulse);
    border-radius: var(--borderRadius);
    transition: var(--transition);
}

.rightItem:hover {
    background: rgba(16, 185, 129, 0.2);
    transform: translateY(-2px);
}

.rightItem i {
    font-size: 20px;
    color: var(--successPulse);
}

.limitationGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.limitationItem {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warningBeam);
    border-radius: var(--borderRadius);
    transition: var(--transition);
}

.limitationItem:hover {
    background: rgba(245, 158, 11, 0.2);
    transform: translateY(-2px);
}

.limitationItem i {
    font-size: 20px;
    color: var(--warningBeam);
}

.updateInfo {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: var(--borderRadius);
}

.lastUpdate,
.effectiveDate {
    color: var(--synthGray);
    font-size: 14px;
    margin: 5px 0;
}

.digitalFootprint {
    background: var(--neuralCharcoal);
    border-top: 2px solid var(--quantumIndigo);
    padding: 50px 0 30px;
}

.footerMatrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footerColumn h3 {
    color: var(--quantumWhite);
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 18px;
}

.footerTitle {
    background: var(--gradientPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footerLinks {
    list-style: none;
}

.footerLinks li {
    margin-bottom: 10px;
}

.footerLinks a {
    color: var(--synthGray);
    text-decoration: none;
    transition: var(--transition);
}

.footerLinks a:hover {
    color: var(--synthAzure);
    transform: translateX(5px);
}

.contactData p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--synthGray);
}

.contactData i {
    color: var(--synthAzure);
    width: 20px;
}

.copyrightZone {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(79, 70, 229, 0.3);
    color: var(--synthGray);
}

@media (max-width: 768px) {
    .heroMatrix {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .quantumNavigator .codebaseContainer {
    display: flex;
    flex-direction: column;
}
    
    .verticalHeading {
        text-orientation: initial;
        height: auto;
        font-size: 36px;
    }
    
    .heroRight {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .contactMatrix {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .algorithmicGrid {
        grid-template-columns: 1fr;
    }
    
    .neuralNavigation {
        gap: 15px;
    }
    
    .synthLink {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    .quantumTitle {
        font-size: 28px;
    }
    
    .cyborgHeading {
        font-size: 20px;
    }
    
    .imageMatrix {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .extraTestimonials {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .galleryImage {
        height: 200px;
    }
}