/* TakeMakeTick Custom Styles - helix.css */

/* Color Variables with Unique Names */
:root {
    --ocean-blue: #3a86ff;
    --sky-whisper: #e6f0ff;
    --midnight-depth: #0b4cb2;
    --forest-emerald: #28a745;
    --sunrise-amber: #ffc107;
    --sunset-coral: #fd7e14;
    --storm-cloud: #6c757d;
    --pearl-white: #ffffff;
    --shadow-grey: #f8f9fa;
    --charcoal-black: #212529;
}

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

body {
    font-family: 'Nunito', sans-serif;
    line-height: 1.7;
    color: var(--charcoal-black);
    background-color: var(--pearl-white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', serif;
    font-weight: 680;
    color: var(--midnight-depth);
}

/* Navigation Styles */
.MainNavigationFrame {
    background-color: var(--midnight-depth);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 13px 0;
    box-shadow: 0 3px 21px rgba(0,0,0,0.1);
}

.NavigationContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.PrimaryNavigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.BrandIdentity img {
    filter: brightness(0) invert(1);
    height: 42px;
    width: auto;
}

.MobileToggleInput {
    display: none;
}

.MobileToggleLabel {
    display: none;
    cursor: pointer;
    padding: 21px;
    z-index: 2;
}

.HamburgerIcon {
    width: 34px;
    height: 3px;
    background: var(--pearl-white);
    position: relative;
    transition: all 0.34s ease;
}

.HamburgerIcon:before,
.HamburgerIcon:after {
    content: '';
    position: absolute;
    width: 34px;
    height: 3px;
    background: var(--pearl-white);
    transition: all 0.34s ease;
}

.HamburgerIcon:before {
    top: -9px;
}

.HamburgerIcon:after {
    top: 9px;
}

.NavigationWrapper {
    display: flex;
    align-items: center;
}

.NavigationList {
    display: flex;
    list-style: none;
    gap: 42px;
}

.NavigationItem {
    position: relative;
}

.NavigationLink {
    color: var(--pearl-white);
    text-decoration: none;
    font-size: 17px;
    font-weight: 520;
    transition: color 0.27s ease;
    padding: 13px 0;
}

.NavigationLink:hover {
    color: var(--sunrise-amber);
}

/* Mobile Navigation */
@media screen and (max-width: 890px) {
    .MobileToggleLabel {
        display: block;
    }

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

    .NavigationList {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 21px;
    }

    .NavigationItem {
        width: 100%;
        text-align: center;
    }

    .NavigationLink {
        display: inline-block;
        padding: 13px 27px;
        font-size: 19px;
        color: var(--midnight-depth);
    }

    .MobileToggleInput:checked ~ .NavigationWrapper {
        left: 0;
    }

    .MobileToggleInput:checked ~ .MobileToggleLabel .HamburgerIcon {
        background: transparent;
    }

    .MobileToggleInput:checked ~ .MobileToggleLabel .HamburgerIcon:before {
        transform: rotate(45deg);
        top: 0;
    }

    .MobileToggleInput:checked ~ .MobileToggleLabel .HamburgerIcon:after {
        transform: rotate(-45deg);
        top: 0;
    }
}

/* Hero Section */
.HeroShowcaseArea {
    background: linear-gradient(135deg, var(--sunrise-amber) 0%, var(--sunset-coral) 100%);
    min-height: 89vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 89px;
    position: relative;
    overflow: hidden;
}

.HeroContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
    width: 100%;
}

.HeroContentWrapper {
    display: flex;
    align-items: center;
    min-height: 55vh;
}

.HeroTextBlock {
    max-width: 640px;
}

.HeroMainTitle {
    font-size: 4.2rem;
    color: var(--charcoal-black);
    font-weight: 890;
    margin-bottom: 27px;
    line-height: 1.1;
}

.AccentHighlight {
    color: var(--midnight-depth);
}

.HeroDescription {
    font-size: 1.4rem;
    color: var(--charcoal-black);
    margin-bottom: 42px;
    line-height: 1.6;
}

.HeroActionButtons {
    display: flex;
    gap: 27px;
    flex-wrap: wrap;
}

.PrimaryActionButton, .SecondaryActionButton {
    padding: 17px 34px;
    border-radius: 42px;
    text-decoration: none;
    font-weight: 650;
    font-size: 17px;
    transition: all 0.27s ease;
    display: inline-block;
}

.PrimaryActionButton {
    background-color: var(--midnight-depth);
    color: var(--pearl-white);
    border: 2px solid var(--midnight-depth);
}

.PrimaryActionButton:hover {
    background-color: transparent;
    color: var(--midnight-depth);
}

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

.SecondaryActionButton:hover {
    background-color: var(--midnight-depth);
    color: var(--pearl-white);
}

.HeroImageSlider {
    margin-top: -7%;
    position: relative;
    z-index: 1;
}

.SliderContainer {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.SliderImage {
    width: 100%;
    height: auto;
    border-radius: 13px;
    box-shadow: 0 13px 42px rgba(0,0,0,0.2);
    display: none;
}

.SliderImage.ActiveSlide {
    display: block;
}

/* Features Section */
.FeaturesPresentationArea {
    padding: 134px 0;
    background-color: var(--shadow-grey);
}

.FeaturesContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.FeaturesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 55px;
}

.FeatureBlock {
    text-align: center;
    padding: 42px 27px;
    background: var(--pearl-white);
    border-radius: 13px;
    box-shadow: 0 7px 27px rgba(0,0,0,0.08);
    transition: transform 0.27s ease;
}

.FeatureBlock:hover {
    transform: translateY(-8px);
}

.FeatureIconFrame {
    margin-bottom: 27px;
}

.FeatureIcon {
    width: 67px;
    height: 67px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
}

.FeatureTitle {
    font-size: 1.5rem;
    margin-bottom: 21px;
    color: var(--midnight-depth);
}

.FeatureDescription {
    color: var(--storm-cloud);
    line-height: 1.7;
    font-size: 16px;
}

/* About Section */
.AboutPresentationSection {
    padding: 134px 0;
}

.AboutContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

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

.AboutHeader {
    position: relative;
    margin-bottom: 89px;
}

.AboutMainTitle {
    font-size: 2.8rem;
    margin-bottom: 13px;
    line-height: 1.2;
}

.AboutSubtitle {
    font-size: 17px;
    color: var(--storm-cloud);
    margin-bottom: 0;
}

.AboutLabel {
    position: absolute;
    top: 50%;
    font-size: 134px;
    color: #eef3f6;
    transform: translateY(-50%);
    z-index: -1;
    left: -67px;
    line-height: 1;
    font-weight: 890;
}

.AboutImageFrame {
    box-shadow: 0 0 27px rgba(0,0,0,0.1);
    border-radius: 13px;
    overflow: hidden;
}

.AboutImageFrame img {
    width: 100%;
    height: auto;
    display: block;
}

.AboutContentTitle {
    font-size: 1.9rem;
    margin-bottom: 27px;
}

.AboutDescription {
    color: var(--storm-cloud);
    margin-bottom: 34px;
    line-height: 1.7;
}

.AboutActionButton {
    background-color: var(--midnight-depth);
    color: var(--pearl-white);
    padding: 13px 27px;
    border-radius: 27px;
    text-decoration: none;
    transition: background-color 0.27s ease;
}

.AboutActionButton:hover {
    background-color: var(--ocean-blue);
}

/* Statistics Section */
.StatisticsDisplayArea {
    position: relative;
    z-index: 0;
    padding: 134px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.StatsOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
}

.StatsContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
    position: relative;
    z-index: 1;
}

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

.StatsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 55px;
    max-width: 1040px;
    width: 100%;
}

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

.StatContent {
    text-align: center;
}

.StatIconContainer {
    width: 89px;
    height: 89px;
    margin: 0 auto 27px;
    position: relative;
    z-index: 0;
}

.StatIconContainer:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    border: 1px solid var(--sunrise-amber);
    z-index: -1;
    transition: all 0.34s ease;
    border-radius: 50%;
}

.StatIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    filter: brightness(0) saturate(100%) invert(76%) sepia(69%) saturate(406%) hue-rotate(354deg) brightness(106%) contrast(104%);
}

.StatNumber {
    font-weight: 620;
    font-size: 2.1rem;
    color: var(--sunrise-amber);
    display: block;
    margin-bottom: 8px;
}

.StatLabel {
    font-weight: 520;
    font-size: 15px;
    color: var(--pearl-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.StatContent:hover .StatIconContainer:after {
    transform: rotate(135deg);
    background: var(--sunrise-amber);
}

.StatContent:hover .StatIcon {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

/* Offers Section */
.OffersShowcaseSection {
    padding: 134px 0;
    background-color: var(--shadow-grey);
}

.OffersContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.OffersHeader {
    text-align: center;
    margin-bottom: 89px;
}

.OffersHeaderContent {
    max-width: 640px;
    margin: 0 auto;
}

.OffersTitle {
    font-size: 3.8rem;
    font-family: "Georgia", serif;
    margin-bottom: 27px;
}

.OffersDescription {
    font-size: 1.3rem;
    font-weight: 340;
    color: var(--storm-cloud);
}

.OfferBlock {
    display: flex;
    background: var(--pearl-white);
    margin-bottom: 55px;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 8px 34px rgba(0,0,0,0.1);
}

.OfferImageLink {
    width: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 420px;
    display: block;
}

.OfferImageRight {
    order: 2;
}

.OfferContent {
    width: 50%;
    padding: 67px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.OfferContentLeft {
    order: 1;
}

.OfferPricing {
    display: block;
    margin-bottom: 21px;
}

.OfferPrice {
    font-size: 2.7rem;
    color: var(--sunset-coral);
    font-weight: 340;
}

.OfferTitle {
    font-size: 2.1rem;
    margin-bottom: 21px;
    color: var(--charcoal-black);
}

.OfferLeadText {
    font-size: 1.3rem;
    font-weight: 340;
    margin-bottom: 21px;
    color: var(--storm-cloud);
}

.OfferDetailsText {
    margin-bottom: 27px;
    line-height: 1.8;
    color: var(--storm-cloud);
}

.OfferActionButton {
    padding: 13px 34px;
    border-radius: 55px;
    background-color: var(--sunset-coral);
    color: var(--pearl-white);
    text-decoration: none;
    font-weight: 620;
    display: inline-block;
    transition: background-color 0.27s ease;
}

.OfferActionButton:hover {
    background-color: var(--midnight-depth);
}

.OffersFooterAction {
    text-align: center;
    margin-top: 67px;
}

.ViewAllOffersButton {
    padding: 21px 55px;
    background-color: var(--sunset-coral);
    color: var(--pearl-white);
    text-decoration: none;
    border-radius: 55px;
    font-weight: 620;
    font-size: 1.1rem;
    transition: background-color 0.27s ease;
}

.ViewAllOffersButton:hover {
    background-color: var(--midnight-depth);
}

/* Testimonials Section */
.TestimonialsShowcaseSection {
    background: var(--charcoal-black);
    padding: 134px 0 89px 0;
}

.TestimonialsContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.TestimonialsHeader {
    text-align: center;
    margin-bottom: 89px;
}

.TestimonialsTitle {
    color: var(--pearl-white);
    font-size: 3.4rem;
    font-weight: 680;
    margin-bottom: 27px;
    text-transform: uppercase;
}

.TestimonialsDescription {
    color: var(--pearl-white);
    margin-bottom: 0;
    font-size: 1.2rem;
}

.TestimonialsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 55px;
}

.TestimonialBlock {
    margin-bottom: 55px;
    text-align: center;
}

.TestimonialIcon {
    width: 55px;
    height: 55px;
    margin-bottom: 27px;
    filter: brightness(0) saturate(100%) invert(76%) sepia(69%) saturate(406%) hue-rotate(354deg) brightness(106%) contrast(104%);
}

.TestimonialTitle {
    font-size: 1.4rem;
    color: var(--pearl-white);
    font-weight: 580;
    text-transform: uppercase;
    margin: 27px 0 34px 0;
}

.TestimonialText {
    color: var(--storm-cloud);
    font-weight: 540;
    line-height: 1.7;
}

/* FAQ Section */
.FAQPresentationArea {
    padding: 144px 0;
    background: #fafafa;
}

.FAQContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.FAQHeaderSection {
    text-align: center;
    margin-bottom: 89px;
}

.FAQSubtitle {
    color: var(--sunset-coral);
    font-size: 1.9rem;
    font-weight: 420;
    margin-bottom: 21px;
    display: block;
}

.FAQMainTitle {
    font-size: 3.1rem;
    font-weight: 720;
    color: var(--midnight-depth);
    text-transform: uppercase;
}

.FAQContentArea {
    max-width: 890px;
    margin: 0 auto;
}

.AccordionContainer {
    background: transparent;
}

.AccordionItem {
    border: none;
    margin-bottom: 21px;
    border-radius: 0;
}

.AccordionHeader {
    padding: 0;
    border: none;
    background: transparent;
}

.AccordionButton {
    font-size: 18px;
    color: var(--midnight-depth);
    font-weight: 620;
    text-decoration: none;
    padding: 27px 34px;
    display: block;
    width: 100%;
    text-align: left;
    position: relative;
    background: #f2f8fd;
    transition: 0.27s;
    border: none;
    cursor: pointer;
    border-radius: 8px;
}

.AccordionButton:after {
    content: "−";
    position: absolute;
    right: 34px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 21px;
    color: var(--midnight-depth);
    font-weight: bold;
}

.AccordionButton.collapsed:after {
    content: "+";
}

.AccordionButton:hover {
    color: var(--sunset-coral);
}

.AccordionCollapse {
    display: none;
}

.AccordionCollapse.show {
    display: block;
}

.AccordionBody {
    padding: 21px 34px;
    font-size: 16px;
    line-height: 1.7;
    color: #525252;
    border: 1px solid #f2f8fd;
    border-top: 0;
    background: var(--pearl-white);
    border-radius: 0 0 8px 8px;
}

/* Age Restriction Notice */
.AgeRestrictionNotice {
    background: var(--forest-emerald);
    padding: 67px 0;
    text-align: center;
}

.RestrictionContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.RestrictionTitle {
    color: var(--pearl-white);
    font-size: 2.1rem;
    margin-bottom: 21px;
    font-weight: 680;
}

.RestrictionText {
    color: var(--pearl-white);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 34px;
    max-width: 890px;
    margin-left: auto;
    margin-right: auto;
}

.ResponsibleGamingLinks {
    display: flex;
    justify-content: center;
    gap: 27px;
    flex-wrap: wrap;
}

.ResponsibleLink {
    background: var(--pearl-white);
    color: var(--forest-emerald);
    padding: 13px 27px;
    border-radius: 27px;
    text-decoration: none;
    font-weight: 620;
    transition: all 0.27s ease;
}

.ResponsibleLink:hover {
    background: var(--midnight-depth);
    color: var(--pearl-white);
}

/* Footer */
.MainFooterSection {
    background: var(--midnight-depth);
    color: var(--pearl-white);
    padding: 89px 0 34px 0;
}

.FooterContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.FooterGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 55px;
    margin-bottom: 55px;
}

.FooterLogo {
    height: 82px;
    filter: brightness(0) invert(1);
    margin-bottom: 21px;
}

.FooterBrandText {
    color: var(--storm-cloud);
    line-height: 1.7;
    font-size: 15px;
}

.FooterColumnTitle {
    color: var(--pearl-white);
    font-size: 1.3rem;
    margin-bottom: 27px;
    font-weight: 620;
}

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

.FooterLinksList li {
    margin-bottom: 13px;
}

.FooterLink {
    color: var(--storm-cloud);
    text-decoration: none;
    transition: color 0.27s ease;
    font-size: 15px;
}

.FooterLink:hover {
    color: var(--sunrise-amber);
}

.ContactDetails {
    color: var(--storm-cloud);
    font-size: 15px;
}

.ContactItem {
    margin-bottom: 8px;
}

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

.RegulatorIcon {
    height: 42px;
    width: auto;
    filter: brightness(0) invert(1);
    transition: opacity 0.27s ease;
}

.RegulatorLink:hover .RegulatorIcon {
    opacity: 0.7;
}

.FooterBottomSection {
    border-top: 1px solid #495057;
    padding-top: 34px;
    text-align: center;
}

.CopyrightText {
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 1600px) {
    .AboutLabel {
        font-size: 110px;
        left: -55px;
    }
}

@media (max-width: 1200px) {
    .HeroMainTitle {
        font-size: 3.4rem;
    }

    .OffersTitle {
        font-size: 3.1rem;
    }

    .TestimonialsTitle {
        font-size: 2.8rem;
    }
}

@media (max-width: 890px) {
    .AboutContentGrid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .AboutLabel {
        display: none;
    }

    .OfferBlock {
        flex-direction: column;
    }

    .OfferImageLink, .OfferContent {
        width: 100%;
    }

    .OfferImageLink {
        min-height: 280px;
        order: 1 !important;
    }

    .OfferContent {
        order: 2 !important;
        padding: 42px 27px;
    }

    .HeroMainTitle {
        font-size: 2.8rem;
    }

    .FeaturesPresentationArea, .AboutPresentationSection,
    .StatisticsDisplayArea, .OffersShowcaseSection,
    .TestimonialsShowcaseSection, .FAQPresentationArea {
        padding: 89px 0;
    }
}

@media (max-width: 640px) {
    .NavigationContainer, .HeroContainer, .FeaturesContainer,
    .AboutContainer, .StatsContainer, .OffersContainer,
    .TestimonialsContainer, .FAQContainer, .RestrictionContainer,
    .FooterContainer {
        padding: 0 21px;
    }

    .HeroMainTitle {
        font-size: 2.3rem;
    }

    .HeroActionButtons {
        flex-direction: column;
        align-items: flex-start;
    }

    .PrimaryActionButton, .SecondaryActionButton {
        width: 100%;
        text-align: center;
    }

    .FeaturesGrid, .TestimonialsGrid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .FooterGrid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

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

    .ResponsibleLink {
        width: 200px;
        text-align: center;
    }
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(34px);
    transition: all 0.89s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Counter Animation */
@keyframes countUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.FooterTopSection li a,
.FooterTopSection p{
    color: #fff;
}

/* About Page Specific Styles */

/* Active Navigation Link */
.NavigationLink.active {
    color: var(--sunrise-amber);
    position: relative;
}

.NavigationLink.active:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sunrise-amber);
}

/* About Hero Section */
.AboutHeroDisplayArea {
    background: linear-gradient(142deg, var(--ocean-blue) 0%, var(--midnight-depth) 100%);
    padding: 178px 0 134px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.AboutHeroContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.AboutHeroTitle {
    font-size: 4.7rem;
    color: var(--pearl-white);
    font-weight: 890;
    margin-bottom: 27px;
    line-height: 1.1;
}

.HeroAccentWord {
    color: var(--sunrise-amber);
}

.AboutHeroSubtext {
    font-size: 1.4rem;
    color: var(--sky-whisper);
    margin-bottom: 55px;
    max-width: 890px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.AboutHeroBadges {
    display: flex;
    justify-content: center;
    gap: 42px;
    flex-wrap: wrap;
}

.HeroBadgeItem {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    padding: 17px 27px;
    border-radius: 42px;
    backdrop-filter: blur(13px);
    border: 1px solid rgba(255,255,255,0.2);
}

.BadgeIcon {
    width: 27px;
    height: 27px;
    margin-right: 13px;
    filter: brightness(0) saturate(100%) invert(76%) sepia(69%) saturate(406%) hue-rotate(354deg) brightness(106%) contrast(104%);
}

.HeroBadgeItem span {
    color: var(--pearl-white);
    font-weight: 620;
    font-size: 15px;
}

/* Company Story Section */
.CompanyStorySection {
    padding: 144px 0;
    background: var(--pearl-white);
}

.StoryContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

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

.StoryImageBlock {
    position: relative;
}

.StoryMainImage {
    width: 100%;
    height: auto;
    border-radius: 21px;
    box-shadow: 0 13px 55px rgba(0,0,0,0.15);
}

.StoryImageOverlay {
    position: absolute;
    bottom: -34px;
    right: -34px;
    background: var(--midnight-depth);
    padding: 34px;
    border-radius: 21px;
    text-align: center;
    box-shadow: 0 8px 34px rgba(0,0,0,0.2);
}

.OverlayIcon {
    width: 42px;
    height: 42px;
    margin-bottom: 13px;
    filter: brightness(0) saturate(100%) invert(76%) sepia(69%) saturate(406%) hue-rotate(354deg) brightness(106%) contrast(104%);
}

.OverlayContent h4 {
    color: var(--pearl-white);
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.OverlayContent p {
    color: var(--sky-whisper);
    font-size: 14px;
    margin: 0;
}

.SectionLabel {
    color: var(--sunset-coral);
    font-size: 15px;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 21px;
    display: block;
}

.StoryMainHeading {
    font-size: 2.8rem;
    color: var(--midnight-depth);
    margin-bottom: 34px;
    line-height: 1.2;
}

.StoryContentText p {
    color: var(--storm-cloud);
    line-height: 1.8;
    margin-bottom: 21px;
    font-size: 16px;
}

.StoryMetrics {
    display: flex;
    gap: 42px;
    margin-top: 42px;
}

.MetricItem {
    text-align: center;
}

.MetricItem strong {
    display: block;
    font-size: 2.1rem;
    color: var(--midnight-depth);
    font-weight: 720;
    margin-bottom: 8px;
}

.MetricItem span {
    color: var(--storm-cloud);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Core Values Section */
.CoreValuesSection {
    padding: 144px 0;
    background: var(--shadow-grey);
}

.ValuesContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.ValuesHeader {
    text-align: center;
    margin-bottom: 89px;
}

.ValuesSubheading {
    color: var(--sunset-coral);
    font-size: 15px;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 21px;
    display: block;
}

.ValuesMainTitle {
    font-size: 3.2rem;
    color: var(--midnight-depth);
    margin-bottom: 27px;
    line-height: 1.2;
}

.ValuesDescription {
    font-size: 1.2rem;
    color: var(--storm-cloud);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.ValuesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 42px;
}

.ValueCard {
    background: var(--pearl-white);
    padding: 42px 34px;
    border-radius: 21px;
    text-align: center;
    box-shadow: 0 8px 34px rgba(0,0,0,0.08);
    transition: transform 0.34s ease, box-shadow 0.34s ease;
}

.ValueCard:hover {
    transform: translateY(-13px);
    box-shadow: 0 21px 55px rgba(0,0,0,0.15);
}

.ValueIconWrapper {
    width: 89px;
    height: 89px;
    background: var(--sky-whisper);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 27px auto;
    transition: background-color 0.34s ease;
}

.ValueCard:hover .ValueIconWrapper {
    background: var(--ocean-blue);
}

.ValueIcon {
    width: 42px;
    height: 42px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
    transition: filter 0.34s ease;
}

.ValueCard:hover .ValueIcon {
    filter: brightness(0) invert(1);
}

.ValueTitle {
    font-size: 1.4rem;
    color: var(--midnight-depth);
    margin-bottom: 21px;
    font-weight: 680;
}

.ValueDescription {
    color: var(--storm-cloud);
    line-height: 1.7;
    font-size: 15px;
}

/* Team Section */
.TeamShowcaseArea {
    padding: 144px 0;
    background: var(--pearl-white);
}

.TeamContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.TeamHeaderSection {
    text-align: center;
    margin-bottom: 89px;
}

.TeamSectionLabel {
    color: var(--sunset-coral);
    font-size: 15px;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 21px;
    display: block;
}

.TeamMainHeading {
    font-size: 3.2rem;
    color: var(--midnight-depth);
    margin-bottom: 27px;
    line-height: 1.2;
}

.TeamIntroText {
    font-size: 1.2rem;
    color: var(--storm-cloud);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.TeamMembersGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 55px;
}

.TeamMemberCard {
    text-align: center;
    transition: transform 0.34s ease;
}

.TeamMemberCard:hover {
    transform: translateY(-8px);
}

.MemberImageFrame {
    position: relative;
    margin-bottom: 27px;
    border-radius: 21px;
    overflow: hidden;
    box-shadow: 0 13px 42px rgba(0,0,0,0.15);
}

.MemberImage {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.34s ease;
}

.TeamMemberCard:hover .MemberImage {
    transform: scale(1.05);
}

.MemberOverlay {
    position: absolute;
    top: 21px;
    right: 21px;
    background: var(--midnight-depth);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.MemberIcon {
    width: 27px;
    height: 27px;
    filter: brightness(0) saturate(100%) invert(76%) sepia(69%) saturate(406%) hue-rotate(354deg) brightness(106%) contrast(104%);
}

.MemberRole {
    font-size: 1.3rem;
    color: var(--midnight-depth);
    margin-bottom: 13px;
    font-weight: 680;
}

.MemberDescription {
    color: var(--storm-cloud);
    line-height: 1.7;
    font-size: 15px;
}

/* Licensing Section */
.LicensingComplianceArea {
    padding: 144px 0;
    background: var(--shadow-grey);
}

.LicensingContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.LicensingLayout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 89px;
    align-items: start;
}

.LicensingLabel {
    color: var(--forest-emerald);
    font-size: 15px;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 21px;
    display: block;
}

.LicensingHeading {
    font-size: 2.8rem;
    color: var(--midnight-depth);
    margin-bottom: 42px;
    line-height: 1.2;
}

.LicenseInfoCard {
    display: flex;
    align-items: center;
    background: var(--pearl-white);
    padding: 34px;
    border-radius: 21px;
    margin-bottom: 34px;
    box-shadow: 0 8px 27px rgba(0,0,0,0.08);
}

.LicenseIcon {
    width: 55px;
    height: 55px;
    margin-right: 27px;
    filter: brightness(0) saturate(100%) invert(40%) sepia(87%) saturate(450%) hue-rotate(93deg) brightness(93%) contrast(95%);
}

.LicenseContent h4 {
    color: var(--midnight-depth);
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.LicenseContent p {
    color: var(--storm-cloud);
    margin-bottom: 5px;
    font-size: 14px;
}

.ComplianceText p {
    color: var(--storm-cloud);
    line-height: 1.8;
    margin-bottom: 21px;
    font-size: 16px;
}

.RegulatoryTitle {
    color: var(--midnight-depth);
    font-size: 1.3rem;
    margin-bottom: 27px;
    text-align: center;
}

.RegulatoryGrid {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.RegulatoryItem {
    text-align: center;
    padding: 21px;
    background: var(--pearl-white);
    border-radius: 13px;
    box-shadow: 0 5px 21px rgba(0,0,0,0.06);
}

.RegulatoryLogo {
    height: 42px;
    width: auto;
    margin-bottom: 13px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
}

.RegulatoryItem p {
    color: var(--storm-cloud);
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

/* Contact Information Section */
.ContactInformationArea {
    padding: 144px 0;
    background: var(--pearl-white);
}

.ContactContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

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

.ContactSectionLabel {
    color: var(--ocean-blue);
    font-size: 15px;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 21px;
    display: block;
}

.ContactMainTitle {
    font-size: 2.8rem;
    color: var(--midnight-depth);
    margin-bottom: 42px;
    line-height: 1.2;
}

.ContactInfoBlocks {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.ContactInfoItem {
    display: flex;
    align-items: flex-start;
    padding: 27px;
    background: var(--shadow-grey);
    border-radius: 21px;
    transition: transform 0.27s ease;
}

.ContactInfoItem:hover {
    transform: translateX(8px);
}

.ContactIcon {
    width: 42px;
    height: 42px;
    margin-right: 21px;
    margin-top: 5px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
}

.ContactContent h4 {
    color: var(--midnight-depth);
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 680;
}

.ContactContent p {
    color: var(--storm-cloud);
    line-height: 1.6;
    font-size: 15px;
    margin: 0;
}

.MapPlaceholder {
    background: var(--shadow-grey);
    padding: 89px 42px;
    border-radius: 21px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.MapIcon {
    width: 89px;
    height: 89px;
    margin-bottom: 27px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
}

.MapPlaceholder h4 {
    color: var(--midnight-depth);
    font-size: 1.4rem;
    margin-bottom: 21px;
}

.MapPlaceholder p {
    color: var(--storm-cloud);
    line-height: 1.7;
    max-width: 280px;
}

/* Responsive Design for About Page */
@media (max-width: 1200px) {
    .AboutHeroTitle {
        font-size: 3.8rem;
    }

    .StoryContentLayout, .LicensingLayout, .ContactLayout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .StoryImageOverlay {
        position: static;
        margin-top: 27px;
        align-self: flex-start;
    }
}

@media (max-width: 890px) {
    .AboutHeroDisplayArea {
        padding: 144px 0 89px 0;
    }

    .AboutHeroTitle {
        font-size: 3.1rem;
    }

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

    .HeroBadgeItem {
        width: 280px;
        justify-content: center;
    }

    .StoryMetrics {
        justify-content: center;
        flex-wrap: wrap;
        gap: 27px;
    }

    .ValuesGrid, .TeamMembersGrid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .CompanyStorySection, .CoreValuesSection, .TeamShowcaseArea,
    .LicensingComplianceArea, .ContactInformationArea {
        padding: 89px 0;
    }
}

@media (max-width: 640px) {
    .AboutHeroTitle {
        font-size: 2.5rem;
    }

    .AboutHeroSubtext {
        font-size: 1.2rem;
    }

    .StoryMainHeading, .ValuesMainTitle, .TeamMainHeading,
    .LicensingHeading, .ContactMainTitle {
        font-size: 2.3rem;
    }

    .ContactInfoItem {
        flex-direction: column;
        text-align: center;
    }

    .ContactIcon {
        margin-right: 0;
        margin-bottom: 13px;
        margin-top: 0;
    }

    .RegulatoryGrid {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .RegulatoryItem {
        flex: 1;
        min-width: 120px;
    }
}

/* Order Page Styles */

/* Order Hero Section */
.OrderHeroSection {
    background: linear-gradient(128deg, var(--sunset-coral) 0%, var(--sunrise-amber) 100%);
    padding: 178px 0 134px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.OrderHeroContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.OrderHeroTitle {
    font-size: 4.2rem;
    color: var(--pearl-white);
    font-weight: 890;
    margin-bottom: 27px;
    line-height: 1.1;
}

.OrderAccent {
    color: var(--midnight-depth);
}

.OrderHeroDescription {
    font-size: 1.3rem;
    color: var(--pearl-white);
    margin-bottom: 55px;
    max-width: 790px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    opacity: 0.95;
}

.OrderHeroFeatures {
    display: flex;
    justify-content: center;
    gap: 42px;
    flex-wrap: wrap;
}

.HeroFeatureItem {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.15);
    padding: 17px 27px;
    border-radius: 34px;
    backdrop-filter: blur(13px);
    border: 1px solid rgba(255,255,255,0.25);
    transition: transform 0.34s ease;
}

.HeroFeatureItem:hover {
    transform: translateY(-5px);
}

.HeroFeatureIcon {
    width: 24px;
    height: 24px;
    margin-right: 13px;
    filter: brightness(0) invert(1);
}

.HeroFeatureItem span {
    color: var(--pearl-white);
    font-weight: 620;
    font-size: 15px;
}

/* Membership Plans Section */
.MembershipPlansArea {
    padding: 144px 0;
    background: var(--shadow-grey);
}

.PlansContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.PlansHeader {
    text-align: center;
    margin-bottom: 89px;
}

.PlansSubheading {
    color: var(--sunset-coral);
    font-size: 15px;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 21px;
    display: block;
}

.PlansMainTitle {
    font-size: 3.4rem;
    color: var(--midnight-depth);
    margin-bottom: 27px;
    line-height: 1.2;
}

.PlansDescription {
    font-size: 1.2rem;
    color: var(--storm-cloud);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.PlansGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 42px;
    max-width: 1200px;
    margin: 0 auto;
}

.PlanCard {
    background: var(--pearl-white);
    border-radius: 21px;
    padding: 42px 34px;
    position: relative;
    box-shadow: 0 8px 34px rgba(0,0,0,0.08);
    transition: all 0.34s ease;
    border: 2px solid transparent;
}

.PlanCard:hover {
    transform: translateY(-13px);
    box-shadow: 0 21px 67px rgba(0,0,0,0.15);
}

.PopularPlan {
    border-color: var(--ocean-blue);
    transform: scale(1.05);
}

.PopularPlan:hover {
    transform: scale(1.05) translateY(-13px);
}

.PopularBadge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ocean-blue);
    color: var(--pearl-white);
    padding: 8px 21px;
    border-radius: 21px;
    font-size: 13px;
    font-weight: 680;
    display: flex;
    align-items: center;
    gap: 8px;
}

.BadgeIcon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.PlanHeader {
    text-align: center;
    margin-bottom: 34px;
}

.PlanIcon {
    width: 55px;
    height: 55px;
    margin-bottom: 21px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
}

.PlanTitle {
    font-size: 1.5rem;
    color: var(--midnight-depth);
    margin-bottom: 13px;
    font-weight: 680;
}

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

.PriceAmount {
    font-size: 2.1rem;
    color: var(--sunset-coral);
    font-weight: 720;
    line-height: 1;
}

.PricePeriod {
    font-size: 14px;
    color: var(--storm-cloud);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.PlanFeatures {
    margin-bottom: 34px;
}

.FeatureItem {
    display: flex;
    align-items: center;
    margin-bottom: 17px;
    padding: 8px 0;
}

.FeatureCheck {
    width: 21px;
    height: 21px;
    margin-right: 13px;
    filter: brightness(0) saturate(100%) invert(40%) sepia(87%) saturate(450%) hue-rotate(93deg) brightness(93%) contrast(95%);
}

.FeatureItem span {
    color: var(--storm-cloud);
    font-size: 15px;
    line-height: 1.4;
}

.SelectPlanButton {
    width: 100%;
    padding: 17px 34px;
    background: var(--midnight-depth);
    color: var(--pearl-white);
    border: none;
    border-radius: 34px;
    font-size: 16px;
    font-weight: 620;
    cursor: pointer;
    transition: all 0.27s ease;
    position: relative;
    overflow: hidden;
}

.SelectPlanButton:hover {
    background: var(--ocean-blue);
    transform: translateY(-2px);
}

.PremiumButton {
    background: var(--ocean-blue);
}

.PremiumButton:hover {
    background: var(--midnight-depth);
}

/* Order Form Section */
.OrderFormSection {
    padding: 144px 0;
    background: var(--pearl-white);
}

.FormContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.FormLayout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 89px;
    align-items: start;
}

.FormSectionLabel {
    color: var(--ocean-blue);
    font-size: 15px;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 21px;
    display: block;
}

.FormMainTitle {
    font-size: 2.8rem;
    color: var(--midnight-depth);
    margin-bottom: 27px;
    line-height: 1.2;
}

.FormDescription {
    color: var(--storm-cloud);
    line-height: 1.8;
    margin-bottom: 42px;
    font-size: 16px;
}

.FormBenefits {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.BenefitItem {
    display: flex;
    align-items: flex-start;
    padding: 21px;
    background: var(--shadow-grey);
    border-radius: 13px;
    transition: transform 0.27s ease;
}

.BenefitItem:hover {
    transform: translateX(8px);
}

.BenefitIcon {
    width: 34px;
    height: 34px;
    margin-right: 17px;
    margin-top: 3px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
}

.BenefitContent h4 {
    color: var(--midnight-depth);
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 680;
}

.BenefitContent p {
    color: var(--storm-cloud);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* Form Styling */
.OrderFormWrapper {
    background: var(--shadow-grey);
    padding: 42px;
    border-radius: 21px;
    box-shadow: 0 13px 55px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.OrderFormWrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--ocean-blue) 0%, var(--sunset-coral) 100%);
}

.FormHeader {
    text-align: center;
    margin-bottom: 42px;
}

.FormHeaderIcon {
    width: 55px;
    height: 55px;
    margin-bottom: 21px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
}

.FormTitle {
    font-size: 1.8rem;
    color: var(--midnight-depth);
    margin-bottom: 8px;
    font-weight: 680;
}

.FormSubtitle {
    color: var(--storm-cloud);
    font-size: 15px;
    margin: 0;
}

.FormFieldsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    margin-bottom: 34px;
}

.FormFieldGroup {
    position: relative;
}

.FullWidth {
    grid-column: 1 / -1;
}

.FieldLabel {
    display: flex;
    align-items: center;
    color: var(--midnight-depth);
    font-size: 15px;
    font-weight: 620;
    margin-bottom: 13px;
}

.LabelIcon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
}

.FormField {
    width: 100%;
    padding: 17px 21px;
    border: 2px solid transparent;
    border-radius: 13px;
    background: var(--pearl-white);
    font-size: 15px;
    color: var(--midnight-depth);
    transition: all 0.27s ease;
    position: relative;
    z-index: 1;
}

.FormField:focus {
    outline: none;
    border-color: var(--ocean-blue);
    background: var(--pearl-white);
    box-shadow: 0 5px 21px rgba(58, 134, 255, 0.15);
}

.FormField::placeholder {
    color: var(--storm-cloud);
    opacity: 0.7;
}

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

.SelectWrapper {
    position: relative;
}

.FormSelect {
    appearance: none;
    cursor: pointer;
    padding-right: 55px;
}

.SelectArrow {
    position: absolute;
    right: 21px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(42%) sepia(3%) saturate(1200%) hue-rotate(203deg) brightness(96%) contrast(88%);
    pointer-events: none;
}

.FieldUnderline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ocean-blue) 0%, var(--sunset-coral) 100%);
    transform: scaleX(0);
    transition: transform 0.27s ease;
    transform-origin: left;
}

.FormField:focus + .FieldUnderline {
    transform: scaleX(1);
}

/* Form Consent */
.FormConsent {
    margin-bottom: 34px;
    padding: 27px;
    background: var(--pearl-white);
    border-radius: 13px;
    border: 1px solid rgba(58, 134, 255, 0.2);
}

.ConsentCheckbox {
    display: flex;
    align-items: flex-start;
    margin-bottom: 17px;
    position: relative;
}

.ConsentCheckbox:last-child {
    margin-bottom: 0;
}

.ConsentInput {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.CustomCheckbox {
    width: 24px;
    height: 24px;
    border: 2px solid var(--storm-cloud);
    border-radius: 5px;
    margin-right: 13px;
    position: relative;
    transition: all 0.27s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.CheckIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
    transition: transform 0.27s ease;
}

.ConsentInput:checked + .CustomCheckbox {
    background: var(--ocean-blue);
    border-color: var(--ocean-blue);
}

.ConsentInput:checked + .CustomCheckbox .CheckIcon {
    transform: translate(-50%, -50%) scale(1);
}

.ConsentLabel {
    color: var(--storm-cloud);
    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
}

/* Form Submission */
.FormSubmission {
    text-align: center;
}

.SubmitButton {
    background: linear-gradient(135deg, var(--ocean-blue) 0%, var(--sunset-coral) 100%);
    color: var(--pearl-white);
    border: none;
    padding: 21px 55px;
    border-radius: 42px;
    font-size: 17px;
    font-weight: 680;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.34s ease;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 21px;
}

.SubmitButton:hover {
    transform: translateY(-3px);
    box-shadow: 0 13px 34px rgba(58, 134, 255, 0.3);
}

.SubmitIcon {
    width: 21px;
    height: 21px;
    filter: brightness(0) invert(1);
    transition: transform 0.27s ease;
}

.SubmitButton:hover .SubmitIcon {
    transform: translateX(5px);
}

.SubmitRipple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: translate(-50%, -50%);
    transition: all 0.67s ease;
}

.SubmitButton:active .SubmitRipple {
    width: 300px;
    height: 300px;
}

.SubmissionNote {
    color: var(--storm-cloud);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.NoteIcon {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(42%) sepia(3%) saturate(1200%) hue-rotate(203deg) brightness(96%) contrast(88%);
}

/* Trust Indicators */
.TrustIndicatorsSection {
    padding: 89px 0;
    background: var(--midnight-depth);
}

.TrustContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
    text-align: center;
}

.TrustTitle {
    color: var(--pearl-white);
    font-size: 2.1rem;
    margin-bottom: 13px;
    font-weight: 680;
}

.TrustDescription {
    color: var(--sky-whisper);
    font-size: 1.1rem;
    margin-bottom: 55px;
    line-height: 1.6;
}

.TrustMetrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 42px;
    max-width: 890px;
    margin: 0 auto;
}

.TrustMetric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.TrustIcon {
    width: 55px;
    height: 55px;
    margin-bottom: 21px;
    filter: brightness(0) saturate(100%) invert(76%) sepia(69%) saturate(406%) hue-rotate(354deg) brightness(106%) contrast(104%);
}

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

.MetricNumber {
    font-size: 2.5rem;
    color: var(--sunrise-amber);
    font-weight: 720;
    line-height: 1;
    margin-bottom: 8px;
}

.MetricLabel {
    color: var(--pearl-white);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Thank You Page Styles */

/* Thank You Hero */
.ThankYouHeroSection {
    background: linear-gradient(135deg, var(--forest-emerald) 0%, var(--ocean-blue) 100%);
    padding: 178px 0 134px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ThankYouContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.SuccessIcon {
    position: relative;
    display: inline-block;
    margin-bottom: 42px;
}

.MainSuccessIcon {
    width: 89px;
    height: 89px;
    filter: brightness(0) invert(1);
    z-index: 2;
    position: relative;
}

.SuccessRing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 134px;
    height: 134px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: successPulse 2s ease-in-out infinite;
}

.SuccessParticles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--pearl-white);
    border-radius: 50%;
    animation: particleFloat 3s ease-in-out infinite;
}

.Particle:nth-child(1) {
    top: -67px;
    left: -21px;
    animation-delay: 0s;
}

.Particle:nth-child(2) {
    top: -21px;
    right: -67px;
    animation-delay: 0.5s;
}

.Particle:nth-child(3) {
    bottom: -67px;
    right: -21px;
    animation-delay: 1s;
}

.Particle:nth-child(4) {
    bottom: -21px;
    left: -67px;
    animation-delay: 1.5s;
}

.ThankYouTitle {
    font-size: 4.2rem;
    color: var(--pearl-white);
    font-weight: 890;
    margin-bottom: 27px;
    line-height: 1.1;
}

.ThankYouAccent {
    color: var(--sunrise-amber);
}

.ThankYouMessage {
    font-size: 1.4rem;
    color: var(--pearl-white);
    margin-bottom: 55px;
    max-width: 790px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    opacity: 0.95;
}

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

.ConfirmationCard {
    background: rgba(255,255,255,0.15);
    padding: 34px 42px;
    border-radius: 21px;
    backdrop-filter: blur(13px);
    border: 1px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    gap: 21px;
    text-align: left;
}

.ConfirmationIcon {
    width: 42px;
    height: 42px;
    filter: brightness(0) saturate(100%) invert(76%) sepia(69%) saturate(406%) hue-rotate(354deg) brightness(106%) contrast(104%);
}

.ConfirmationContent h3 {
    color: var(--pearl-white);
    font-size: 1.2rem;
    margin-bottom: 8px;
    font-weight: 680;
}

.ConfirmationContent p {
    color: var(--sky-whisper);
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.4;
}

.ReferenceNumber {
    font-weight: 620;
    color: var(--sunrise-amber);
}

.ConfirmationTime {
    font-size: 13px !important;
    opacity: 0.8;
}

/* Next Steps Section */
.NextStepsSection {
    padding: 144px 0;
    background: var(--pearl-white);
}

.NextStepsContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.NextStepsHeader {
    text-align: center;
    margin-bottom: 89px;
}

.NextStepsLabel {
    color: var(--ocean-blue);
    font-size: 15px;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 21px;
    display: block;
}

.NextStepsTitle {
    font-size: 3.2rem;
    color: var(--midnight-depth);
    margin-bottom: 27px;
    line-height: 1.2;
}

.NextStepsDescription {
    font-size: 1.2rem;
    color: var(--storm-cloud);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.StepsTimeline {
    display: flex;
    flex-direction: column;
    gap: 55px;
    max-width: 890px;
    margin: 0 auto;
    position: relative;
}

.StepsTimeline:before {
    content: '';
    position: absolute;
    left: 42px;
    top: 55px;
    bottom: 55px;
    width: 3px;
    background: linear-gradient(180deg, var(--ocean-blue) 0%, var(--sunset-coral) 100%);
    z-index: 0;
}

.TimelineStep {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    position: relative;
    z-index: 1;
}

.StepNumber {
    width: 89px;
    height: 89px;
    background: var(--shadow-grey);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    border: 4px solid var(--pearl-white);
    box-shadow: 0 8px 27px rgba(0,0,0,0.1);
}

.StepIcon {
    width: 34px;
    height: 34px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
    position: absolute;
}

.StepDigit {
    font-size: 1.1rem;
    font-weight: 720;
    color: var(--pearl-white);
    background: var(--ocean-blue);
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 13px;
}

.StepContent {
    flex: 1;
    padding-top: 13px;
}

.StepTitle {
    font-size: 1.4rem;
    color: var(--midnight-depth);
    margin-bottom: 13px;
    font-weight: 680;
}

.StepDescription {
    color: var(--storm-cloud);
    line-height: 1.7;
    margin-bottom: 13px;
    font-size: 15px;
}

.StepTime {
    display: inline-block;
    background: var(--sunrise-amber);
    color: var(--charcoal-black);
    padding: 5px 13px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 620;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Confirmation Benefits */
.ConfirmationBenefitsArea {
    padding: 144px 0;
    background: var(--shadow-grey);
}

.BenefitsContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 34px;
}

.BenefitsHeader {
    text-align: center;
    margin-bottom: 89px;
}

.BenefitsTitle {
    font-size: 3.2rem;
    color: var(--midnight-depth);
    margin-bottom: 27px;
    line-height: 1.2;
}

.BenefitsDescription {
    font-size: 1.2rem;
    color: var(--storm-cloud);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

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

.BenefitCard {
    background: var(--pearl-white);
    padding: 42px 27px;
    border-radius: 21px;
    text-align: center;
    box-shadow: 0 8px 34px rgba(0,0,0,0.08);
    transition: all 0.34s ease;
    position: relative;
    overflow: hidden;
}

.BenefitCard:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ocean-blue) 0%, var(--sunset-coral) 100%);
    transform: scaleX(0);
    transition: transform 0.34s ease;
    transform-origin: left;
}

.BenefitCard:hover {
    transform: translateY(-8px);
    box-shadow: 0 21px 67px rgba(58, 134, 255, 0.15);
}

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

.BenefitIconFrame {
    width: 89px;
    height: 89px;
    background: var(--sky-whisper);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 27px auto;
    transition: all 0.34s ease;
}

.BenefitCard:hover .BenefitIconFrame {
    background: var(--ocean-blue);
    transform: scale(1.1);
}

.BenefitIcon {
    width: 42px;
    height: 42px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
    transition: filter 0.34s ease;
}

.BenefitCard:hover .BenefitIcon {
    filter: brightness(0) invert(1);
}

.BenefitTitle {
    font-size: 1.3rem;
    color: var(--midnight-depth);
    margin-bottom: 17px;
    font-weight: 680;
}

.BenefitText {
    color: var(--storm-cloud);
    line-height: 1.7;
    font-size: 15px;
}

/* Thank You Contact Section */
.ThankYouContactSection {
    padding: 144px 0;
    background: var(--pearl-white);
}

.ContactLayout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 89px;
    align-items: start;
}

.ContactTitle {
    font-size: 2.4rem;
    color: var(--midnight-depth);
    margin-bottom: 21px;
    line-height: 1.2;
}

.ContactDescription {
    color: var(--storm-cloud);
    line-height: 1.8;
    margin-bottom: 42px;
    font-size: 16px;
}

.ContactMethods {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.ContactMethod {
    display: flex;
    align-items: flex-start;
    padding: 27px;
    background: var(--shadow-grey);
    border-radius: 17px;
    transition: all 0.27s ease;
}

.ContactMethod:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 27px rgba(0,0,0,0.1);
}

.ContactMethodIcon {
    width: 42px;
    height: 42px;
    margin-right: 21px;
    margin-top: 3px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
}

.ContactMethodContent h4 {
    color: var(--midnight-depth);
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 680;
}

.ContactMethodContent p {
    color: var(--storm-cloud);
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.5;
}

.ContactMethodContent span {
    color: var(--ocean-blue);
    font-size: 13px;
    font-weight: 620;
}

.QuickActionsCard {
    background: var(--shadow-grey);
    padding: 42px 34px;
    border-radius: 21px;
    box-shadow: 0 8px 34px rgba(0,0,0,0.08);
}

.ActionsTitle {
    font-size: 1.4rem;
    color: var(--midnight-depth);
    margin-bottom: 27px;
    text-align: center;
    font-weight: 680;
}

.ActionButtons {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.ActionButton {
    display: flex;
    align-items: center;
    padding: 17px 21px;
    background: var(--pearl-white);
    border-radius: 13px;
    text-decoration: none;
    color: var(--midnight-depth);
    transition: all 0.27s ease;
    font-weight: 520;
    font-size: 15px;
}

.ActionButton:hover {
    background: var(--ocean-blue);
    color: var(--pearl-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 21px rgba(58, 134, 255, 0.25);
}

.ActionIcon {
    width: 21px;
    height: 21px;
    margin-right: 13px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2065%) hue-rotate(213deg) brightness(94%) contrast(103%);
    transition: filter 0.27s ease;
}

.ActionButton:hover .ActionIcon {
    filter: brightness(0) invert(1);
}

/* Animations */
@keyframes successPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.7;
    }
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-13px) scale(1.2);
        opacity: 1;
    }
}

/* Responsive Design for Order & Thank You Pages */
@media (max-width: 1200px) {
    .OrderHeroTitle, .ThankYouTitle {
        font-size: 3.4rem;
    }

    .FormLayout, .ContactLayout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

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

    .PopularPlan {
        transform: none;
    }

    .PopularPlan:hover {
        transform: translateY(-13px);
    }
}

@media (max-width: 890px) {
    .OrderHeroSection, .ThankYouHeroSection {
        padding: 144px 0 89px 0;
    }

    .OrderHeroTitle, .ThankYouTitle {
        font-size: 2.8rem;
    }

    .OrderHeroFeatures, .HeroFeatureItem {
        flex-direction: column;
        align-items: center;
    }

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

    .StepsTimeline:before {
        display: none;
    }

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

    .StepContent {
        padding-top: 0;
    }

    .TrustMetrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 27px;
    }

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

    .ConfirmationCard {
        flex-direction: column;
        text-align: center;
    }

    .MembershipPlansArea, .OrderFormSection, .NextStepsSection,
    .ConfirmationBenefitsArea, .ThankYouContactSection {
        padding: 89px 0;
    }
}

@media (max-width: 640px) {
    .OrderHeroTitle, .ThankYouTitle {
        font-size: 2.3rem;
    }

    .PlansGrid {
        grid-template-columns: 1fr;
    }

    .OrderFormWrapper {
        padding: 27px;
    }

    .FormBenefits {
        gap: 17px;
    }

    .BenefitItem {
        flex-direction: column;
        text-align: center;
    }

    .BenefitIcon {
        margin-right: 0;
        margin-bottom: 13px;
        margin-top: 0;
    }

    .TrustMetrics {
        grid-template-columns: 1fr;
    }

    .ContactMethods {
        gap: 21px;
    }

    .ContactMethod {
        flex-direction: column;
        text-align: center;
    }

    .ContactMethodIcon {
        margin-right: 0;
        margin-bottom: 13px;
        margin-top: 0;
    }

    .MainSuccessIcon {
        width: 67px;
        height: 67px;
    }

    .SuccessRing {
        width: 110px;
        height: 110px;
    }
}