/* Custom Variables */
:root {
    --ocean-depth: #5e548e;
    --pearl-shine: #eeecf4;
    --midnight-purple: #433b64;
    --pure-canvas: #ffffff;
    --shadow-whisper: rgba(94, 84, 142, 0.13);
    --transition-flow: cubic-bezier(0.23, 1, 0.32, 1);
    --border-magic: 9999px;
    --spacing-rhythm: 1.618rem;
    --font-primary: 'Montserrat', sans-serif;
}

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

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.7;
    color: var(--midnight-purple);
    background-color: var(--pure-canvas);
    overflow-x: hidden;
}

/* Typography System */
h1 {
    font-size: 3.052rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-rhythm);
}

h2 {
    font-size: 2.441rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: calc(var(--spacing-rhythm) * 0.8);
}

h3 {
    font-size: 1.953rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: calc(var(--spacing-rhythm) * 0.6);
}

h4 {
    font-size: 1.563rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: calc(var(--spacing-rhythm) * 0.5);
}

p {
    margin-bottom: var(--spacing-rhythm);
    font-weight: 400;
}

/* Layout Containers */
.mainWrapper {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 21px;
}

/* Navigation Styles */
.primaryNavigation {
    background: var(--pure-canvas);
    box-shadow: 0 2px 21px var(--shadow-whisper);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.34s var(--transition-flow);
}

.navigationArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 0;
    position: relative;
}

.brandIdentity img {
    height: 47px;
    width: auto;
    transition: transform 0.27s var(--transition-flow);
}

.brandIdentity:hover img {
    transform: scale(1.05);
}

.menuToggleInput {
    display: none;
}

.mobileMenuLabel {
    display: none;
}

.burgerIcon {
    width: 29px;
    height: 3px;
    background: var(--midnight-purple);
    position: relative;
    transition: all 0.31s var(--transition-flow);
}

.burgerIcon:before,
.burgerIcon:after {
    content: '';
    position: absolute;
    width: 29px;
    height: 3px;
    background: var(--midnight-purple);
    transition: all 0.31s var(--transition-flow);
}

.burgerIcon:before {
    top: -8px;
}

.burgerIcon:after {
    top: 8px;
}

.navigationContainer {
    display: flex;
    align-items: center;
    gap: 34px;
}

.menuElement {
    list-style: none;
}

.menuLink {
    color: var(--midnight-purple);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.28s var(--transition-flow);
    position: relative;
}

.menuLink::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--ocean-depth);
    transition: width 0.28s var(--transition-flow);
}

.menuLink:hover::after {
    width: 100%;
}

/* Button Styles */
.primaryCallToAction,
.secondaryCallToAction,
.largeCta,
.submitButton {
    display: inline-block;
    padding: 13px 27px;
    border-radius: var(--border-magic);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.29s var(--transition-flow);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.primaryCallToAction,
.largeCta,
.submitButton {
    background: var(--ocean-depth);
    color: var(--pure-canvas);
    box-shadow: 0 7px 21px rgba(94, 84, 142, 0.26);
}

.primaryCallToAction:hover,
.largeCta:hover,
.submitButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 34px rgba(94, 84, 142, 0.34);
}

.secondaryCallToAction {
    background: transparent;
    color: var(--ocean-depth);
    border: 2px solid var(--ocean-depth);
}

.secondaryCallToAction:hover {
    background: var(--ocean-depth);
    color: var(--pure-canvas);
    transform: translateY(-2px);
}

.largeCta {
    padding: 17px 42px;
    font-size: 18px;
}

/* Section Spacing */
section {
    padding: 89px 0;
}

.heroPresentation {
    padding-top: 144px;
    padding-bottom: 89px;
    background: linear-gradient(135deg, var(--pearl-shine) 0%, var(--pure-canvas) 100%);
}

/* Hero Section */
.heroContentGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
}

.presentationText h1 {
    color: var(--midnight-purple);
    margin-bottom: calc(var(--spacing-rhythm) * 1.2);
}

.presentationText p {
    font-size: 18px;
    color: var(--midnight-purple);
    margin-bottom: calc(var(--spacing-rhythm) * 1.5);
    opacity: 0.87;
}

.actionButtons {
    display: flex;
    gap: 21px;
    flex-wrap: wrap;
}

.heroVisual img {
    width: 100%;
    height: auto;
    border-radius: 21px;
    box-shadow: 0 13px 42px var(--shadow-whisper);
    transition: transform 0.39s var(--transition-flow);
}

.heroVisual img:hover {
    transform: scale(1.02);
}

/* Feature Grid Layouts */
.featureGrid {
    display: grid;
    gap: 42px;
    margin-top: 55px;
}

.threeColumnLayout {
    grid-template-columns: repeat(3, 1fr);
}

.fourColumnGrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
}

.doubleColumn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
}

.singleColumn {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.tripleColumn {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;
}

/* Feature Blocks */
.featureBlock {
    background: var(--pure-canvas);
    padding: 34px;
    border-radius: 21px;
    box-shadow: 0 8px 27px var(--shadow-whisper);
    transition: all 0.32s var(--transition-flow);
}

.featureBlock:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 42px rgba(94, 84, 142, 0.18);
}

.featureImage img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 13px;
    margin-bottom: 21px;
}

/* Section Headers */
.sectionHeader {
    margin-bottom: 55px;
}

.centerAligned {
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.sectionHeader h2 {
    color: var(--midnight-purple);
}

.sectionHeader p {
    font-size: 18px;
    color: var(--midnight-purple);
    opacity: 0.8;
}

/* Success Metrics */
.successMetrics {
    margin-top: 34px;
}

.metricItem {
    margin-bottom: 27px;
    padding-bottom: 21px;
    border-bottom: 1px solid rgba(94, 84, 142, 0.13);
}

.metricItem:last-child {
    border-bottom: none;
}

.metricItem h4 {
    color: var(--ocean-depth);
    margin-bottom: 8px;
}

/* Income Features */
.incomeFeature {
    text-align: center;
    padding: 27px 21px;
}

.incomeFeature h3 {
    color: var(--ocean-depth);
    font-size: 1.4rem;
}

/* CTA Section */
.callToAction {
    background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--midnight-purple) 100%);
    color: var(--pure-canvas);
}

.callToAction h2,
.callToAction p {
    color: var(--pure-canvas);
}

.ctaDetails {
    margin-top: 21px;
    opacity: 0.9;
}

/* Contact Section */
.contactSection {
    background: var(--pearl-shine);
}

.businessDetails {
    margin-top: 34px;
}

.detailItem {
    margin-bottom: 27px;
}

.detailItem h4 {
    color: var(--ocean-depth);
    margin-bottom: 8px;
}

/* Form Styles */
.inquiryForm {
    background: var(--pure-canvas);
    padding: 42px;
    border-radius: 21px;
    box-shadow: 0 13px 42px var(--shadow-whisper);
}

.formGroup {
    margin-bottom: 27px;
}

.formGroup label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--midnight-purple);
}

.formGroup input,
.formGroup select,
.formGroup textarea {
    width: 100%;
    padding: 13px 17px;
    border: 2px solid rgba(94, 84, 142, 0.21);
    border-radius: var(--border-magic);
    font-size: 16px;
    font-family: var(--font-primary);
    transition: all 0.28s var(--transition-flow);
    background: var(--pure-canvas);
}

.formGroup input:focus,
.formGroup select:focus,
.formGroup textarea:focus {
    outline: none;
    border-color: var(--ocean-depth);
    box-shadow: 0 0 0 3px rgba(94, 84, 142, 0.13);
}

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

/* Footer */
.mainFooter {
    background: var(--midnight-purple);
    color: var(--pure-canvas);
    padding: 55px 0 27px;
}

.footerContent {
    margin-bottom: 34px;
}

.footerSection h3,
.footerSection h4 {
    color: var(--pure-canvas);
    margin-bottom: 21px;
}

.footerLinks {
    list-style: none;
}

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

.footerLinks a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.28s var(--transition-flow);
}

.footerLinks a:hover {
    color: var(--pure-canvas);
}

.footerBottom {
    padding-top: 27px;
    border-top: 1px solid rgba(255, 255, 255, 0.21);
    text-align: center;
    opacity: 0.8;
}

/* Mobile Navigation */
@media screen and (max-width: 890px) {
    .mobileMenuLabel {
        display: block;
        cursor: pointer;
        padding: 17px;
        z-index: 2;
    }

    .navigationContainer {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: var(--pure-canvas);
        transition: all 0.34s var(--transition-flow);
        padding-top: 89px;
        flex-direction: column;
        align-items: center;
    }

    .menuElement {
        width: 100%;
        text-align: center;
        margin: 17px 0;
    }

    .menuLink {
        display: inline-block;
        padding: 13px 27px;
        font-size: 18px;
    }

    .menuToggleInput:checked ~ .navigationContainer {
        left: 0;
    }

    .menuToggleInput:checked ~ .mobileMenuLabel .burgerIcon {
        background: transparent;
    }

    .menuToggleInput:checked ~ .mobileMenuLabel .burgerIcon:before {
        transform: rotate(45deg);
        top: 0;
    }

    .menuToggleInput:checked ~ .mobileMenuLabel .burgerIcon:after {
        transform: rotate(-45deg);
        top: 0;
    }
}

/* Responsive Design */
@media screen and (max-width: 1280px) {
    .mainWrapper {
        padding: 0 34px;
    }

    .heroContentGrid {
        gap: 42px;
    }

    .featureGrid {
        gap: 34px;
    }
}

@media screen and (max-width: 1024px) {
    .threeColumnLayout {
        grid-template-columns: repeat(2, 1fr);
    }

    .fourColumnGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tripleColumn {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 890px) {
    h1 {
        font-size: 2.441rem;
    }

    h2 {
        font-size: 1.953rem;
    }

    .heroContentGrid,
    .doubleColumn {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .actionButtons {
        justify-content: center;
    }

    section {
        padding: 55px 0;
    }

    .heroPresentation {
        padding-top: 110px;
        text-align: center;
    }

    .inquiryForm {
        padding: 27px;
    }
}

@media screen and (max-width: 640px) {
    .mainWrapper {
        padding: 0 21px;
    }

    .threeColumnLayout,
    .fourColumnGrid,
    .tripleColumn {
        grid-template-columns: 1fr;
    }

    .featureBlock {
        padding: 27px;
    }

    .actionButtons {
        flex-direction: column;
        align-items: center;
    }

    .primaryCallToAction,
    .secondaryCallToAction {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}

/* Services Page Specific Styles */
.servicesIntro {
    padding-top: 144px;
    padding-bottom: 55px;
    background: linear-gradient(135deg, var(--pearl-shine) 0%, var(--pure-canvas) 100%);
}

.serviceOfferings {
    padding: 89px 0;
}

.servicePackage {
    background: var(--pure-canvas);
    border-radius: 21px;
    box-shadow: 0 13px 42px var(--shadow-whisper);
    overflow: hidden;
    transition: all 0.34s var(--transition-flow);
    position: relative;
}

.servicePackage:hover {
    transform: translateY(-8px);
    box-shadow: 0 21px 55px rgba(94, 84, 142, 0.21);
}

.serviceImage {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.serviceImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.42s var(--transition-flow);
}

.servicePackage:hover .serviceImage img {
    transform: scale(1.05);
}

.packageContent {
    padding: 34px;
}

.packageContent h3 {
    color: var(--ocean-depth);
    margin-bottom: 17px;
}

.packageContent p {
    margin-bottom: 21px;
    color: var(--midnight-purple);
    opacity: 0.87;
}

.serviceFeatures {
    margin: 27px 0;
}

.featuresList {
    list-style: none;
    padding: 0;
}

.featuresList li {
    padding: 8px 0;
    position: relative;
    padding-left: 21px;
    color: var(--midnight-purple);
}

.featuresList li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ocean-depth);
    font-weight: bold;
}

.pricingInfo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 27px 0;
}

.servicePrice {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ocean-depth);
}

.pricingNote {
    font-size: 14px;
    color: var(--midnight-purple);
    opacity: 0.7;
}

.serviceBooking {
    width: 100%;
    text-align: center;
    margin-top: 21px;
}

.additionalBenefits {
    background: var(--pearl-shine);
    padding: 89px 0;
}

.benefitsGrid {
    margin-top: 55px;
}

.benefitItem {
    text-align: center;
    padding: 27px 17px;
}

.benefitItem h4 {
    color: var(--ocean-depth);
    margin-bottom: 13px;
}

.servicesCta {
    background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--midnight-purple) 100%);
    color: var(--pure-canvas);
    padding: 89px 0;
}

.servicesCta h2,
.servicesCta p {
    color: var(--pure-canvas);
}

/* Thank You Page Specific Styles */
.thankYouHero {
    padding-top: 144px;
    padding-bottom: 89px;
    background: linear-gradient(135deg, var(--pearl-shine) 0%, var(--pure-canvas) 100%);
    text-align: center;
}

.successIndicator {
    margin-bottom: 34px;
}

.checkmarkIcon {
    width: 89px;
    height: 89px;
    background: var(--ocean-depth);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 42px;
    color: var(--pure-canvas);
    font-weight: bold;
    animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.confirmationMessage {
    font-size: 18px;
    color: var(--midnight-purple);
    opacity: 0.87;
    max-width: 600px;
    margin: 0 auto;
}

.nextStepsInfo {
    padding: 89px 0;
}

.processSteps {
    margin-top: 55px;
}

.stepItem {
    text-align: center;
    padding: 34px 21px;
}

.stepNumber {
    width: 55px;
    height: 55px;
    background: var(--ocean-depth);
    color: var(--pure-canvas);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto 21px;
}

.stepItem h3 {
    color: var(--ocean-depth);
    margin-bottom: 13px;
}

.additionalResources {
    background: var(--pearl-shine);
    padding: 89px 0;
}

.preparationTips {
    margin-top: 27px;
}

.preparationTips h4 {
    color: var(--ocean-depth);
    margin-bottom: 17px;
}

.tipsList {
    list-style: none;
    padding: 0;
}

.tipsList li {
    padding: 8px 0 8px 21px;
    position: relative;
    color: var(--midnight-purple);
}

.tipsList li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ocean-depth);
    font-weight: bold;
}

.contactReminder {
    padding: 89px 0;
    text-align: center;
}

.contactDetails {
    display: flex;
    justify-content: center;
    gap: 55px;
    margin: 34px 0;
    flex-wrap: wrap;
}

.detailBox {
    text-align: center;
    min-width: 250px;
}

.detailBox h4 {
    color: var(--ocean-depth);
    margin-bottom: 13px;
}

.contactPhone {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--midnight-purple);
}

.alternativeActions {
    display: flex;
    gap: 21px;
    justify-content: center;
    margin-top: 42px;
    flex-wrap: wrap;
}

/* Responsive adjustments for new pages */
@media screen and (max-width: 1024px) {
    .servicesGrid.threeColumnLayout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .processSteps.threeColumnLayout {
        grid-template-columns: 1fr;
        gap: 27px;
    }
}

@media screen and (max-width: 890px) {
    .contactDetails {
        flex-direction: column;
        gap: 27px;
    }

    .alternativeActions {
        flex-direction: column;
        align-items: center;
    }

    .alternativeActions .primaryCallToAction,
    .alternativeActions .secondaryCallToAction {
        width: 100%;
        max-width: 280px;
    }
}

@media screen and (max-width: 640px) {
    .servicePackage {
        margin-bottom: 27px;
    }

    .packageContent {
        padding: 21px;
    }

    .servicePrice {
        font-size: 1.8rem;
    }

    .checkmarkIcon {
        width: 68px;
        height: 68px;
        font-size: 32px;
    }
}