:root {
    --flame-red: #d62828;
    --soft-rose: #fbe9e9;
    --deep-crimson: #961c1c;
    --steel-gray: #4a5568;
    --light-mist: #f7fafc;
    --charcoal-black: #2d3748;
    --warm-white: #ffffff;
    --shadow-dark: rgba(0, 0, 0, 0.1);
    --shadow-light: rgba(0, 0, 0, 0.05);
}

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

body {
    font-family: 'Noto Sans', sans-serif;
    line-height: 1.6;
    color: var(--deep-crimson);
    background-color: var(--warm-white);
    font-size: 16px;
    overflow-x: hidden;
}

.TopMenu {
    background-color: var(--warm-white);
    box-shadow: 0 3px 12px var(--shadow-dark);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.MenuContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
}

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

.CompanyLogo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.28s ease-out;
}

.CompanyLogo:hover {
    transform: translateY(-2px);
}

.LogoImage {
    width: 42px;
    height: 42px;
    margin-right: 14px;
    border-radius: 6px;
}

.BrandText {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--flame-red);
    letter-spacing: -0.5px;
}

.NavigationLinks {
    display: flex;
    align-items: center;
    gap: 42px;
}

.NavLink {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--deep-crimson);
    text-decoration: none;
    padding: 12px 0;
    position: relative;
    transition: color 0.32s ease;
}

.NavLink::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--flame-red);
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.NavLink:hover,
.NavLink--active {
    color: var(--flame-red);
}

.NavLink:hover::after,
.NavLink--active::after {
    width: 100%;
}

.MobileMenuToggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.MenuLine {
    width: 26px;
    height: 3px;
    background-color: var(--deep-crimson);
    transition: all 0.3s ease;
    border-radius: 2px;
}

.MainBanner {
    background: linear-gradient(135deg, var(--soft-rose) 0%, var(--warm-white) 100%);
    padding: 140px 0 90px;
    min-height: 650px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.MainBanner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(214, 40, 40, 0.08) 0%, transparent 70%);
    transform: rotate(-15deg);
    z-index: 1;
}

.BannerContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.ContentGrid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 68px;
    align-items: center;
    min-height: 480px;
}

.TextColumn {
    padding-right: 20px;
}

.PrimaryHeading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 3.4rem;
    line-height: 1.15;
    color: var(--deep-crimson);
    margin-bottom: 26px;
    letter-spacing: -1.2px;
}

.LeadParagraph {
    font-size: 18px;
    line-height: 1.7;
    color: var(--steel-gray);
    margin-bottom: 38px;
    font-weight: 400;
    max-width: 540px;
}

.ActionGroup {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.PrimaryButton {
    background-color: var(--flame-red);
    color: var(--warm-white);
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(214, 40, 40, 0.25);
    border: 2px solid var(--flame-red);
    display: inline-block;
}

.PrimaryButton:hover {
    background-color: var(--deep-crimson);
    border-color: var(--deep-crimson);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(214, 40, 40, 0.35);
}

.SecondaryButton {
    background-color: transparent;
    color: var(--flame-red);
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--flame-red);
    display: inline-block;
}

.SecondaryButton:hover {
    background-color: var(--flame-red);
    color: var(--warm-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(214, 40, 40, 0.25);
}

.ImageColumn {
    position: relative;
}

.BannerImage {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 32px var(--shadow-dark);
    transition: transform 0.4s ease-out;
}

.BannerImage:hover {
    transform: scale(1.02);
}

@media (max-width: 890px) {
    .NavigationLinks {
        display: none;
    }
    
    .MobileMenuToggle {
        display: flex;
    }
    
    .MenuContainer {
        padding: 0 20px;
        height: 76px;
    }
    
    .ContentGrid {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }
    
    .TextColumn {
        padding-right: 0;
        order: 2;
    }
    
    .ImageColumn {
        order: 1;
    }
    
    .PrimaryHeading {
        font-size: 2.8rem;
        margin-bottom: 22px;
    }
    
    .MainBanner {
        padding: 120px 0 70px;
        min-height: 580px;
    }
    
    .BannerContainer {
        padding: 0 20px;
    }
}

@media (max-width: 640px) {
    .PrimaryHeading {
        font-size: 2.2rem;
        line-height: 1.2;
    }
    
    .LeadParagraph {
        font-size: 16px;
        margin-bottom: 32px;
    }
    
    .ActionGroup {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }
    
    .PrimaryButton,
    .SecondaryButton {
        width: 100%;
        text-align: center;
        padding: 14px 28px;
    }
    
    .MainBanner {
        padding: 100px 0 60px;
    }
    
    .ContentGrid {
        gap: 36px;
    }
}













.ServiceBlock {
    padding: 95px 0;
    background-color: var(--light-mist);
    position: relative;
    overflow: hidden;
}

.ServiceBlock::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15%;
    width: 40%;
    height: 100%;
    background: linear-gradient(45deg, rgba(214, 40, 40, 0.04) 0%, transparent 60%);
    transform: skewX(-12deg);
    z-index: 1;
}

.ServiceWrapper {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.SectionHeader {
    text-align: center;
    margin-bottom: 68px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.ServiceTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.8rem;
    color: var(--deep-crimson);
    margin-bottom: 22px;
    letter-spacing: -0.8px;
    line-height: 1.2;
}

.ServiceSubtext {
    font-size: 18px;
    line-height: 1.65;
    color: var(--steel-gray);
    font-weight: 400;
}

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

.ServiceGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.ServiceCard {
    background-color: var(--warm-white);
    padding: 36px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 24px var(--shadow-light);
    transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(214, 40, 40, 0.08);
    position: relative;
    overflow: hidden;
}



.ServiceCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 38px rgba(214, 40, 40, 0.15);
}

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

.ServiceIcon {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}

.IconShape {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    transition: transform 0.35s ease;
}

.IconShape--consultation {
    background: linear-gradient(135deg, var(--flame-red) 0%, #e74c3c 100%);
}

.IconShape--strategy {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.IconShape--selection {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.IconShape--monitoring {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.ServiceCard:hover .IconShape {
    transform: rotate(360deg) scale(1.1);
}

.ServiceName {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--deep-crimson);
    margin-bottom: 16px;
    line-height: 1.3;
}

.ServiceDesc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--steel-gray);
    margin-bottom: 22px;
    font-weight: 400;
}

.ServiceFeatures {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.FeatureTag {
    background-color: var(--soft-rose);
    color: var(--deep-crimson);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.25s ease;
}

.ServiceCard:hover .FeatureTag {
    background-color: rgba(214, 40, 40, 0.12);
}

.ServiceImageArea {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--shadow-dark);
    height: fit-content;
    max-height: 520px;
}

.ServiceImage {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.45s ease-out;
}

.ImageOverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    padding: 32px 24px 24px;
    transform: translateY(60%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ServiceImageArea:hover .ImageOverlay {
    transform: translateY(0);
}

.ServiceImageArea:hover .ServiceImage {
    transform: scale(1.05);
}

.OverlayContent {
    color: var(--warm-white);
}

.OverlayTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 8px;
}

.OverlayText {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.9;
}

@media (max-width: 1280px) {
    .ServiceLayout {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    
    .ServiceImageArea {
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (max-width: 890px) {
    .ServiceBlock {
        padding: 75px 0;
    }
    
    .ServiceWrapper {
        padding: 0 20px;
    }
    
    .ServiceTitle {
        font-size: 2.4rem;
    }
    
    .ServiceGrid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .SectionHeader {
        margin-bottom: 52px;
    }
}

@media (max-width: 640px) {
    .ServiceTitle {
        font-size: 2rem;
        margin-bottom: 18px;
    }
    
    .ServiceSubtext {
        font-size: 16px;
    }
    
    .ServiceCard {
        padding: 28px 20px;
    }
    
    .ServiceName {
        font-size: 20px;
    }
    
    .ServiceDesc {
        font-size: 14px;
    }
    
    .ImageOverlay {
        padding: 24px 18px 18px;
    }
    
    .OverlayTitle {
        font-size: 18px;
    }
}













.ProcessArea {
    padding: 110px 0;
    background-color: var(--warm-white);
    position: relative;
    overflow: hidden;
}

.ProcessArea::after {
    content: '';
    position: absolute;
    top: 20%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(214, 40, 40, 0.03) 0%, transparent 70%);
    z-index: 1;
}

.ProcessContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.ProcessIntro {
    text-align: center;
    margin-bottom: 78px;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.ProcessHeading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.9rem;
    color: var(--deep-crimson);
    margin-bottom: 26px;
    letter-spacing: -0.9px;
    line-height: 1.15;
}

.ProcessDescription {
    font-size: 18px;
    line-height: 1.7;
    color: var(--steel-gray);
    font-weight: 400;
}

.StepTimeline {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
}

.StepTimeline::before {
    content: '';
    position: absolute;
    left: 62px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--flame-red) 0%, var(--soft-rose) 100%);
    z-index: 1;
}

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

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

.StepNumber {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--flame-red) 0%, var(--deep-crimson) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 42px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 28px rgba(214, 40, 40, 0.25);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.TimelineStep:hover .StepNumber {
    transform: scale(1.08);
}

.NumberText {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: var(--warm-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.StepContent {
    flex: 1;
    background-color: var(--warm-white);
    padding: 34px 32px;
    border-radius: 16px;
    box-shadow: 0 6px 24px var(--shadow-light);
    border: 1px solid rgba(214, 40, 40, 0.06);
    transition: all 0.38s ease;
    position: relative;
    margin-top: 12px;
}

.StepContent::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid var(--warm-white);
    z-index: 1;
}

.TimelineStep:hover .StepContent {
    transform: translateX(8px);
    box-shadow: 0 12px 36px rgba(214, 40, 40, 0.12);
}

.StepTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--deep-crimson);
    margin-bottom: 18px;
    line-height: 1.3;
}

.StepText {
    font-size: 16px;
    line-height: 1.65;
    color: var(--steel-gray);
    margin-bottom: 24px;
    font-weight: 400;
}

.StepDetails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.DetailItem {
    background-color: var(--soft-rose);
    color: var(--deep-crimson);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.28s ease;
}

.TimelineStep:hover .DetailItem {
    background-color: rgba(214, 40, 40, 0.15);
    transform: translateY(-2px);
}

.ProcessSummary {
    margin-top: 86px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 38px;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

.SummaryCard {
    background: linear-gradient(135deg, var(--soft-rose) 0%, var(--warm-white) 100%);
    padding: 32px 28px;
    border-radius: 14px;
    box-shadow: 0 4px 18px var(--shadow-light);
    text-align: center;
    border: 1px solid rgba(214, 40, 40, 0.08);
    transition: transform 0.35s ease;
}

.SummaryCard:hover {
    transform: translateY(-4px);
}

.SummaryTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--deep-crimson);
    margin-bottom: 14px;
}

.SummaryText {
    font-size: 15px;
    line-height: 1.6;
    color: var(--steel-gray);
    font-weight: 400;
}

@media (max-width: 890px) {
    .ProcessArea {
        padding: 85px 0;
    }
    
    .ProcessContainer {
        padding: 0 20px;
    }
    
    .ProcessHeading {
        font-size: 2.5rem;
        margin-bottom: 22px;
    }
    
    .ProcessIntro {
        margin-bottom: 62px;
    }
    
    .StepTimeline::before {
        left: 52px;
    }
    
    .StepNumber {
        width: 104px;
        height: 104px;
        margin-right: 32px;
    }
    
    .NumberText {
        font-size: 28px;
    }
    
    .StepContent {
        padding: 28px 24px;
    }
    
    .ProcessSummary {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 68px;
    }
}

@media (max-width: 640px) {
    .ProcessHeading {
        font-size: 2.1rem;
    }
    
    .ProcessDescription {
        font-size: 16px;
    }
    
    .TimelineStep {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 48px;
    }
    
    .StepTimeline::before {
        display: none;
    }
    
    .StepNumber {
        margin-right: 0;
        margin-bottom: 24px;
        width: 96px;
        height: 96px;
    }
    
    .NumberText {
        font-size: 26px;
    }
    
    .StepContent {
        margin-top: 0;
        padding: 24px 20px;
    }
    
    .StepContent::before {
        display: none;
    }
    
    .StepTitle {
        font-size: 22px;
        margin-bottom: 16px;
    }
    
    .StepText {
        font-size: 15px;
        margin-bottom: 20px;
    }
    
    .DetailItem {
        font-size: 12px;
        padding: 6px 14px;
    }
    
    .SummaryCard {
        padding: 28px 22px;
    }
    
    .SummaryTitle {
        font-size: 18px;
    }
    
    .SummaryText {
        font-size: 14px;
    }
}









.ClientSegment {
    padding: 105px 0;
    background: linear-gradient(135deg, var(--light-mist) 0%, var(--warm-white) 100%);
    position: relative;
    overflow: hidden;
}

.ClientSegment::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -25%;
    width: 50%;
    height: 140%;
    background: radial-gradient(ellipse, rgba(214, 40, 40, 0.04) 0%, transparent 65%);
    transform: rotate(-25deg);
    z-index: 1;
}

.SegmentWrapper {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.SegmentHeader {
    text-align: center;
    margin-bottom: 72px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.SegmentTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.9rem;
    color: var(--deep-crimson);
    margin-bottom: 24px;
    letter-spacing: -0.9px;
    line-height: 1.15;
}

.SegmentIntro {
    font-size: 18px;
    line-height: 1.7;
    color: var(--steel-gray);
    font-weight: 400;
}

.ClientProfiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    margin-bottom: 78px;
}

.ProfileCard {
    background-color: var(--warm-white);
    padding: 38px 32px;
    border-radius: 16px;
    box-shadow: 0 6px 28px var(--shadow-light);
    transition: all 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(214, 40, 40, 0.06);
    position: relative;
    overflow: hidden;
}

.ProfileCard::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(214, 40, 40, 0.03), transparent);
    transition: left 0.6s ease;
}

.ProfileCard:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(214, 40, 40, 0.12);
}

.ProfileCard:hover::after {
    left: 100%;
}

.ProfileCard--primary {
    grid-column: 1 / 4;
    background: linear-gradient(135deg, var(--soft-rose) 0%, var(--warm-white) 100%);
    border: 2px solid rgba(214, 40, 40, 0.12);
}

.ProfileIcon {
    margin-bottom: 26px;
    display: flex;
    justify-content: center;
}

.IconBackground {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    position: relative;
    transition: all 0.4s ease;
}

.IconBackground--novice {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.IconBackground--professional {
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
}

.IconBackground--affluent {
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.IconBackground--retirement {
    background: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%);
}

.IconBackground--business {
    background: linear-gradient(135deg, #607D8B 0%, #37474F 100%);
}

.IconBackground--family {
    background: linear-gradient(135deg, #E91E63 0%, #AD1457 100%);
}

.ProfileCard:hover .IconBackground {
    transform: rotate(360deg) scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.ProfileName {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--deep-crimson);
    margin-bottom: 18px;
    text-align: center;
    line-height: 1.3;
}

.ProfileDesc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--steel-gray);
    margin-bottom: 28px;
    font-weight: 400;
    text-align: center;
}

.ProfileCharacteristics {
    background-color: rgba(214, 40, 40, 0.03);
    padding: 24px 20px;
    border-radius: 12px;
    border: 1px solid rgba(214, 40, 40, 0.08);
}

.CharacteristicItem {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 16px;
}

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

.CharLabel {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--deep-crimson);
    flex-shrink: 0;
    min-width: 85px;
}

.CharValue {
    font-size: 13px;
    color: var(--steel-gray);
    font-weight: 500;
    text-align: right;
    line-height: 1.4;
}

.UniversalApproach {
    background: linear-gradient(135deg, var(--flame-red) 0%, var(--deep-crimson) 100%);
    padding: 48px 42px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 12px 38px rgba(214, 40, 40, 0.25);
    position: relative;
    overflow: hidden;
}

.UniversalApproach::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    z-index: 1;
}

.ApproachContent {
    position: relative;
    z-index: 2;
}

.ApproachTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--warm-white);
    margin-bottom: 18px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ApproachText {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    max-width: 680px;
    margin: 0 auto;
}

@media (max-width: 1280px) {
    .ClientProfiles {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ProfileCard--primary {
        grid-column: 1 / 3;
    }
}

@media (max-width: 890px) {
    .ClientSegment {
        padding: 85px 0;
    }
    
    .SegmentWrapper {
        padding: 0 20px;
    }
    
    .SegmentTitle {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }
    
    .SegmentHeader {
        margin-bottom: 58px;
    }
    
    .ClientProfiles {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 62px;
    }
    
    .ProfileCard--primary {
        grid-column: 1;
    }
    
    .ProfileCard {
        padding: 32px 26px;
    }
    
    .UniversalApproach {
        padding: 38px 32px;
    }
}

@media (max-width: 640px) {
    .SegmentTitle {
        font-size: 2.1rem;
    }
    
    .SegmentIntro {
        font-size: 16px;
    }
    
    .ProfileCard {
        padding: 28px 22px;
    }
    
    .ProfileName {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .ProfileDesc {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    .ProfileCharacteristics {
        padding: 20px 16px;
    }
    
    .CharacteristicItem {
        flex-direction: column;
        gap: 6px;
        margin-bottom: 16px;
    }
    
    .CharLabel {
        min-width: auto;
    }
    
    .CharValue {
        text-align: left;
    }
    
    .UniversalApproach {
        padding: 32px 24px;
    }
    
    .ApproachTitle {
        font-size: 22px;
        margin-bottom: 16px;
    }
    
    .ApproachText {
        font-size: 15px;
    }
}












.PricingZone {
    padding: 100px 0;
    background-color: var(--warm-white);
    position: relative;
    overflow: hidden;
}

.PricingZone::before {
    content: '';
    position: absolute;
    top: 30%;
    right: -15%;
    width: 50%;
    height: 40%;
    background: radial-gradient(ellipse, rgba(214, 40, 40, 0.03) 0%, transparent 70%);
    transform: rotate(15deg);
    z-index: 1;
}

.PricingContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.PricingHeader {
    text-align: center;
    margin-bottom: 68px;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.PricingTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.9rem;
    color: var(--deep-crimson);
    margin-bottom: 24px;
    letter-spacing: -0.9px;
    line-height: 1.15;
}

.PricingSubheading {
    font-size: 18px;
    line-height: 1.7;
    color: var(--steel-gray);
    font-weight: 400;
}

.PricingTiers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 72px;
}

.PricingCard {
    background-color: var(--warm-white);
    border-radius: 18px;
    box-shadow: 0 8px 32px var(--shadow-light);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(214, 40, 40, 0.08);
    position: relative;
    overflow: hidden;
}

.PricingCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(214, 40, 40, 0.15);
}

.PricingCard--featured {
    border: 2px solid var(--flame-red);
    background: linear-gradient(135deg, var(--soft-rose) 0%, var(--warm-white) 100%);
    transform: scale(1.02);
}

.PricingCard--featured:hover {
    transform: translateY(-6px) scale(1.02);
}

.CardHeader {
    padding: 36px 32px 24px;
    text-align: center;
    position: relative;
}

.PlanBadge {
    display: inline-block;
    background-color: var(--flame-red);
    color: var(--warm-white);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.PlanBadge--premium {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: var(--deep-crimson);
}

.PlanName {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--deep-crimson);
    margin-bottom: 22px;
    line-height: 1.3;
}

.PlanPrice {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.Currency {
    font-size: 16px;
    font-weight: 500;
    color: var(--steel-gray);
}

.Amount {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 42px;
    color: var(--flame-red);
    line-height: 1;
}

.Period {
    font-size: 14px;
    color: var(--steel-gray);
    font-weight: 500;
}

.CardBody {
    padding: 0 32px 32px;
}

.PlanDescription {
    font-size: 15px;
    line-height: 1.6;
    color: var(--steel-gray);
    margin-bottom: 28px;
    text-align: center;
    font-weight: 400;
}

.FeatureList {
    list-style: none;
    margin-bottom: 32px;
}

.FeatureItem {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--steel-gray);
    position: relative;
    padding-left: 24px;
}

.FeatureItem::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--flame-red);
    font-weight: 700;
    font-size: 16px;
}

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

.CardFooter {
    text-align: center;
}

.PricingButton {
    display: inline-block;
    background-color: var(--flame-red);
    color: var(--warm-white);
    padding: 16px 32px;
    border-radius: 10px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--flame-red);
    margin-bottom: 12px;
    width: 100%;
    box-shadow: 0 4px 16px rgba(214, 40, 40, 0.25);
}

.PricingButton:hover {
    background-color: var(--deep-crimson);
    border-color: var(--deep-crimson);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(214, 40, 40, 0.35);
}

.PricingButton--primary {
    background-color: transparent;
    color: var(--flame-red);
    border: 2px solid var(--flame-red);
}

.PricingButton--primary:hover {
    background-color: var(--flame-red);
    color: var(--warm-white);
}

.PricingButton--featured {
    background: linear-gradient(135deg, var(--flame-red) 0%, var(--deep-crimson) 100%);
    border: none;
    box-shadow: 0 6px 20px rgba(214, 40, 40, 0.3);
}

.PaymentNote {
    font-size: 12px;
    color: var(--steel-gray);
    font-weight: 500;
    margin-top: 8px;
}

.PricingAddons {
    background-color: var(--light-mist);
    padding: 42px 36px;
    border-radius: 16px;
    margin-bottom: 58px;
    border: 1px solid rgba(214, 40, 40, 0.06);
}

.AddonsTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--deep-crimson);
    margin-bottom: 28px;
    text-align: center;
}

.AddonsList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.AddonItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--warm-white);
    padding: 18px 24px;
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--shadow-light);
    transition: transform 0.3s ease;
}

.AddonItem:hover {
    transform: translateY(-2px);
}

.AddonName {
    font-size: 14px;
    color: var(--steel-gray);
    font-weight: 500;
}

.AddonPrice {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--flame-red);
}

.PricingFooter {
    background: linear-gradient(135deg, var(--deep-crimson) 0%, var(--flame-red) 100%);
    padding: 42px 38px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 28px rgba(214, 40, 40, 0.2);
}

.FooterTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--warm-white);
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.FooterText {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    max-width: 720px;
    margin: 0 auto;
}

@media (max-width: 1280px) {
    .PricingTiers {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .PricingCard--featured {
        transform: none;
    }
    
    .PricingCard--featured:hover {
        transform: translateY(-6px);
    }
}

@media (max-width: 890px) {
    .PricingZone {
        padding: 85px 0;
    }
    
    .PricingContainer {
        padding: 0 20px;
    }
    
    .PricingTitle {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }
    
    .PricingHeader {
        margin-bottom: 52px;
    }
    
    .CardHeader {
        padding: 28px 24px 20px;
    }
    
    .CardBody {
        padding: 0 24px 28px;
    }
    
    .Amount {
        font-size: 36px;
    }
    
    .AddonsList {
        grid-template-columns: 1fr;
    }
    
    .PricingAddons {
        padding: 32px 28px;
    }
    
    .PricingFooter {
        padding: 32px 28px;
    }
}

@media (max-width: 640px) {
    .PricingTitle {
        font-size: 2.1rem;
    }
    
    .PricingSubheading {
        font-size: 16px;
    }
    
    .CardHeader {
        padding: 24px 20px 18px;
    }
    
    .CardBody {
        padding: 0 20px 24px;
    }
    
    .PlanName {
        font-size: 22px;
        margin-bottom: 18px;
    }
    
    .Amount {
        font-size: 32px;
    }
    
    .PlanDescription {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    .FeatureItem {
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    .PricingButton {
        padding: 14px 28px;
        font-size: 14px;
    }
    
    .AddonItem {
        padding: 16px 20px;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .PricingAddons {
        padding: 28px 20px;
    }
    
    .AddonsTitle {
        font-size: 20px;
        margin-bottom: 24px;
    }
    
    .FooterTitle {
        font-size: 22px;
        margin-bottom: 14px;
    }
    
    .FooterText {
        font-size: 15px;
    }
}












.BottomSection {
    background: linear-gradient(135deg, var(--deep-crimson) 0%, var(--charcoal-black) 100%);
    color: var(--warm-white);
    padding: 68px 0 0;
    position: relative;
    overflow: hidden;
}

.BottomSection::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 40%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(214, 40, 40, 0.08) 0%, transparent 60%);
    transform: rotate(-15deg);
    z-index: 1;
}

.FooterWrapper {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.FooterGrid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 58px;
    margin-bottom: 48px;
}

.CompanyInfo {
    max-width: 420px;
}

.FooterBrand {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.FooterLogo {
    width: 48px;
    height: 48px;
    margin-right: 16px;
    border-radius: 8px;
}

.FooterBrandName {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--warm-white);
    letter-spacing: -0.5px;
}

.FooterDescription {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 32px;
    font-weight: 400;
}

.ContactDetails {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ContactItem {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
}

.ContactLabel {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--warm-white);
    min-width: 60px;
    flex-shrink: 0;
}

.ContactLink {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
    word-break: break-all;
}

.ContactLink:hover {
    color: #fbe9e9;
    text-decoration: underline;
}

.ContactText {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.FooterNavigation,
.LegalSection {
    display: flex;
    flex-direction: column;
}

.FooterHeading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--warm-white);
    margin-bottom: 24px;
    line-height: 1.3;
}

.FooterLinks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.FooterLink {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

.FooterLink::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #fbe9e9;
    transition: width 0.3s ease;
}

.FooterLink:hover {
    color: #fbe9e9;
    transform: translateX(4px);
}

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

.FooterBottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.CopyrightText {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
    margin: 0;
}

.LegalLinks {
    display: flex;
    align-items: center;
    gap: 16px;
}

.LegalLink {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.3s ease;
}

.LegalLink:hover {
    color: #fbe9e9;
}

.LinkSeparator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

@media (max-width: 1280px) {
    .FooterGrid {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 42px;
    }
}

@media (max-width: 890px) {
    .BottomSection {
        padding: 52px 0 0;
    }
    
    .FooterWrapper {
        padding: 0 20px;
    }
    
    .FooterGrid {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 38px;
    }
    
    .CompanyInfo {
        max-width: 100%;
    }
    
    .FooterBottom {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px 0;
    }
}

@media (max-width: 640px) {
    .FooterBrand {
        margin-bottom: 20px;
    }
    
    .FooterBrandName {
        font-size: 24px;
    }
    
    .FooterDescription {
        font-size: 14px;
        margin-bottom: 28px;
    }
    
    .ContactItem {
        flex-direction: column;
        gap: 6px;
    }
    
    .ContactLabel {
        min-width: auto;
    }
    
    .FooterHeading {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .FooterLinks {
        gap: 10px;
    }
    
    .FooterLink {
        font-size: 13px;
    }
    
    .CopyrightText {
        font-size: 13px;
    }
    
    .LegalLinks {
        gap: 12px;
    }
    
    .LegalLink {
        font-size: 12px;
    }
}













/* About Page Specific Styles */

.AboutHero {
    background: linear-gradient(135deg, var(--soft-rose) 0%, var(--warm-white) 100%);
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
}

.AboutHero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 60%;
    height: 160%;
    background: radial-gradient(circle, rgba(214, 40, 40, 0.06) 0%, transparent 70%);
    transform: rotate(-20deg);
    z-index: 1;
}

.HeroContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

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

.HeroTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 3.2rem;
    color: var(--deep-crimson);
    margin-bottom: 24px;
    letter-spacing: -1px;
    line-height: 1.15;
}

.HeroSubtitle {
    font-size: 20px;
    line-height: 1.6;
    color: var(--steel-gray);
    font-weight: 400;
    max-width: 680px;
    margin: 0 auto;
}

/* Story Section */
.StorySection {
    padding: 90px 0;
    background-color: var(--warm-white);
    position: relative;
}

.StoryContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
}

.StoryGrid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center;
}

.StoryTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--deep-crimson);
    margin-bottom: 28px;
    letter-spacing: -0.7px;
    line-height: 1.2;
}

.StoryParagraph {
    font-size: 16px;
    line-height: 1.7;
    color: var(--steel-gray);
    margin-bottom: 24px;
    font-weight: 400;
}

.StoryHighlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.HighlightItem {
    text-align: center;
    padding: 20px 16px;
    background: linear-gradient(135deg, var(--soft-rose) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 12px;
    border: 1px solid rgba(214, 40, 40, 0.08);
    transition: transform 0.3s ease;
}

.HighlightItem:hover {
    transform: translateY(-4px);
}

.HighlightNumber {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--flame-red);
    margin-bottom: 8px;
}

.HighlightLabel {
    font-size: 13px;
    color: var(--steel-gray);
    font-weight: 500;
    line-height: 1.4;
}

.StoryImage {
    position: relative;
}

.AboutImage {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 12px 40px var(--shadow-dark);
    transition: transform 0.4s ease;
}

.AboutImage:hover {
    transform: scale(1.02);
}

/* Expertise Section */
.ExpertiseSection {
    padding: 95px 0;
    background-color: var(--light-mist);
    position: relative;
    overflow: hidden;
}

.ExpertiseSection::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 40%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(214, 40, 40, 0.03) 0%, transparent 70%);
    transform: rotate(25deg);
    z-index: 1;
}

.ExpertiseContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.ExpertiseTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.7rem;
    color: var(--deep-crimson);
    text-align: center;
    margin-bottom: 58px;
    letter-spacing: -0.8px;
    line-height: 1.2;
}

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

.ExpertiseCard {
    background-color: var(--warm-white);
    padding: 42px 32px;
    border-radius: 16px;
    box-shadow: 0 8px 28px var(--shadow-light);
    text-align: center;
    border: 1px solid rgba(214, 40, 40, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.ExpertiseCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(214, 40, 40, 0.02), transparent);
    transition: left 0.6s ease;
}

.ExpertiseCard:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(214, 40, 40, 0.15);
}

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

.ExpertiseIcon {
    margin-bottom: 28px;
    display: flex;
    justify-content: center;
}

.IconCircle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
    position: relative;
}

.IconCircle--education {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.IconCircle--experience {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.IconCircle--certification {
    background: linear-gradient(135deg, var(--flame-red) 0%, var(--deep-crimson) 100%);
}

.ExpertiseCard:hover .IconCircle {
    transform: rotate(360deg) scale(1.1);
}

.ExpertiseHeading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--deep-crimson);
    margin-bottom: 18px;
    line-height: 1.3;
}

.ExpertiseText {
    font-size: 15px;
    line-height: 1.65;
    color: var(--steel-gray);
    font-weight: 400;
}

/* Philosophy Section */
.PhilosophySection {
    padding: 100px 0;
    background-color: var(--warm-white);
    position: relative;
}

.PhilosophyContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
}

.PhilosophyTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.7rem;
    color: var(--deep-crimson);
    text-align: center;
    margin-bottom: 68px;
    letter-spacing: -0.8px;
    line-height: 1.2;
}

.PhilosophyGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.PhilosophyPrinciple {
    display: flex;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(135deg, var(--light-mist) 0%, var(--warm-white) 100%);
    border-radius: 16px;
    border: 1px solid rgba(214, 40, 40, 0.06);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.PhilosophyPrinciple::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--flame-red) 0%, var(--deep-crimson) 100%);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    transform-origin: bottom;
}

.PhilosophyPrinciple:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px var(--shadow-light);
}

.PhilosophyPrinciple:hover::after {
    transform: scaleY(1);
}

.PrincipleNumber {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--flame-red);
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(214, 40, 40, 0.08);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.PhilosophyPrinciple:hover .PrincipleNumber {
    background-color: var(--flame-red);
    color: var(--warm-white);
    transform: scale(1.1);
}

.PrincipleContent {
    flex: 1;
}

.PrincipleTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--deep-crimson);
    margin-bottom: 12px;
    line-height: 1.3;
}

.PrincipleText {
    font-size: 14px;
    line-height: 1.6;
    color: var(--steel-gray);
    font-weight: 400;
}

/* Trust Section */
.TrustSection {
    padding: 95px 0;
    background: linear-gradient(135deg, var(--light-mist) 0%, var(--warm-white) 100%);
    position: relative;
    overflow: hidden;
}

.TrustSection::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -20%;
    width: 50%;
    height: 150%;
    background: radial-gradient(ellipse, rgba(214, 40, 40, 0.04) 0%, transparent 65%);
    transform: rotate(-30deg);
    z-index: 1;
}

.TrustContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.TrustTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.7rem;
    color: var(--deep-crimson);
    text-align: center;
    margin-bottom: 58px;
    letter-spacing: -0.8px;
    line-height: 1.2;
}

.TrustGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.TrustFeature {
    background-color: var(--warm-white);
    padding: 36px 28px;
    border-radius: 14px;
    box-shadow: 0 6px 24px var(--shadow-light);
    text-align: center;
    border: 1px solid rgba(214, 40, 40, 0.06);
    transition: all 0.35s ease;
}

.TrustFeature:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(214, 40, 40, 0.12);
}

.TrustIcon {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.TrustSymbol {
    font-size: 48px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.TrustFeature:hover .TrustSymbol {
    transform: scale(1.1);
    opacity: 1;
}

.TrustFeatureTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--deep-crimson);
    margin-bottom: 16px;
    line-height: 1.3;
}

.TrustFeatureText {
    font-size: 15px;
    line-height: 1.65;
    color: var(--steel-gray);
    font-weight: 400;
}

/* Commitment Section */
.CommitmentSection {
    padding: 85px 0;
    background: linear-gradient(135deg, var(--deep-crimson) 0%, var(--flame-red) 100%);
    position: relative;
    overflow: hidden;
}

.CommitmentSection::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    transform: rotate(-20deg);
    z-index: 1;
}

.CommitmentContainer {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.CommitmentContent {
    text-align: center;
}

.CommitmentTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--warm-white);
    margin-bottom: 32px;
    letter-spacing: -0.7px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.CommitmentText {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 24px;
    font-weight: 400;
}

.CommitmentAction {
    margin-top: 40px;
}

.CommitmentButton {
    display: inline-block;
    background-color: var(--warm-white);
    color: var(--deep-crimson);
    padding: 18px 36px;
    border-radius: 10px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border: 2px solid transparent;
}

.CommitmentButton:hover {
    background-color: rgba(255, 255, 255, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 1280px) {
    .StoryGrid {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }
    
    .StoryImage {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .ExpertiseGrid {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 890px) {
    .AboutHero {
        padding: 120px 0 70px;
    }
    
    .HeroContainer {
        padding: 0 20px;
    }
    
    .HeroTitle {
        font-size: 2.6rem;
        margin-bottom: 20px;
    }
    
    .HeroSubtitle {
        font-size: 18px;
    }
    
    .StorySection {
        padding: 75px 0;
    }
    
    .StoryContainer {
        padding: 0 20px;
    }
    
    .StoryTitle {
        font-size: 2.2rem;
        margin-bottom: 24px;
    }
    
    .StoryHighlights {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 300px;
        margin: 32px auto 0;
    }
    
    .ExpertiseSection {
        padding: 75px 0;
    }
    
    .ExpertiseContainer {
        padding: 0 20px;
    }
    
    .ExpertiseTitle {
        font-size: 2.3rem;
        margin-bottom: 48px;
    }
    
    .ExpertiseCard {
        padding: 36px 28px;
    }
    
    .PhilosophySection {
        padding: 80px 0;
    }
    
    .PhilosophyContainer {
        padding: 0 20px;
    }
    
    .PhilosophyTitle {
        font-size: 2.3rem;
        margin-bottom: 52px;
    }
    
    .PhilosophyGrid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .TrustSection {
        padding: 75px 0;
    }
    
    .TrustContainer {
        padding: 0 20px;
    }
    
    .TrustTitle {
        font-size: 2.3rem;
        margin-bottom: 48px;
    }
    
    .TrustGrid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .CommitmentSection {
        padding: 70px 0;
    }
    
    .CommitmentContainer {
        padding: 0 20px;
    }
    
    .CommitmentTitle {
        font-size: 2.1rem;
        margin-bottom: 28px;
    }
}

@media (max-width: 640px) {
    .HeroTitle {
        font-size: 2.2rem;
        line-height: 1.2;
    }
    
    .HeroSubtitle {
        font-size: 16px;
    }
    
    .StoryTitle {
        font-size: 1.9rem;
    }
    
    .StoryParagraph {
        font-size: 15px;
        margin-bottom: 20px;
    }
    
    .HighlightItem {
        padding: 18px 14px;
    }
    
    .HighlightNumber {
        font-size: 24px;
    }
    
    .HighlightLabel {
        font-size: 12px;
    }
    
    .ExpertiseTitle {
        font-size: 2rem;
        margin-bottom: 42px;
    }
    
    .ExpertiseCard {
        padding: 32px 24px;
    }
    
    .ExpertiseHeading {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .ExpertiseText {
        font-size: 14px;
    }
    
    .IconCircle {
        width: 70px;
        height: 70px;
    }
    
    .PhilosophyTitle {
        font-size: 2rem;
        margin-bottom: 46px;
    }
    
    .PhilosophyPrinciple {
        flex-direction: column;
        gap: 18px;
        padding: 28px 24px;
        text-align: center;
    }
    
    .PrincipleNumber {
        align-self: center;
        margin-bottom: 8px;
    }
    
    .PrincipleTitle {
        font-size: 17px;
        margin-bottom: 10px;
    }
    
    .PrincipleText {
        font-size: 13px;
    }
    
    .TrustTitle {
        font-size: 2rem;
        margin-bottom: 42px;
    }
    
    .TrustFeature {
        padding: 32px 24px;
    }
    
    .TrustSymbol {
        font-size: 42px;
    }
    
    .TrustFeatureTitle {
        font-size: 18px;
        margin-bottom: 14px;
    }
    
    .TrustFeatureText {
        font-size: 14px;
    }
    
    .CommitmentTitle {
        font-size: 1.8rem;
        margin-bottom: 24px;
    }
    
    .CommitmentText {
        font-size: 15px;
        margin-bottom: 20px;
    }
    
    .CommitmentButton {
        padding: 16px 32px;
        font-size: 15px;
        width: 100%;
    }
    
    .CommitmentAction {
        margin-top: 32px;
    }
}















/* Contact Page Specific Styles */

.ContactHero {
    background: linear-gradient(135deg, var(--soft-rose) 0%, var(--warm-white) 100%);
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
}

.ContactHero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 60%;
    height: 160%;
    background: radial-gradient(circle, rgba(214, 40, 40, 0.06) 0%, transparent 70%);
    transform: rotate(-20deg);
    z-index: 1;
}

.HeroContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.HeroContent {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.HeroTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 3.2rem;
    color: var(--deep-crimson);
    margin-bottom: 24px;
    letter-spacing: -1px;
    line-height: 1.15;
}

.HeroSubtitle {
    font-size: 18px;
    line-height: 1.6;
    color: var(--steel-gray);
    font-weight: 400;
}

/* Contact Section */
.ContactSection {
    padding: 90px 0;
    background-color: var(--warm-white);
    position: relative;
}

.ContactContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
}

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

/* Contact Info */
.ContactInfo {
    padding-right: 20px;
}

.ContactInfoTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--deep-crimson);
    margin-bottom: 24px;
    letter-spacing: -0.6px;
    line-height: 1.2;
}

.ContactInfoText {
    font-size: 16px;
    line-height: 1.7;
    color: var(--steel-gray);
    margin-bottom: 42px;
    font-weight: 400;
}

.ContactDetails {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ContactItem {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 20px;
    background: linear-gradient(135deg, var(--light-mist) 0%, var(--warm-white) 100%);
    border-radius: 12px;
    border: 1px solid rgba(214, 40, 40, 0.06);
    transition: all 0.3s ease;
}

.ContactItem:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--shadow-light);
}

.ContactIcon {
    flex-shrink: 0;
}

.IconBackground {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.3s ease;
}

.IconBackground--location {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.IconBackground--phone {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.IconBackground--email {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.IconBackground--hours {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.ContactItem:hover .IconBackground {
    transform: scale(1.1);
}

.ContactContent {
    flex: 1;
}

.ContactLabel {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.CTAButton--primary {
    background-color: var(--warm-white);
    color: var(--deep-crimson);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.CTAButton--primary:hover {
    background-color: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.CTAButton--secondary {
    background-color: transparent;
    color: var(--warm-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.CTAButton--secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1280px) {
    .ContactGrid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    
    .ContactInfo {
        padding-right: 0;
        text-align: center;
    }
    
    .MapWrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .MapInfo {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 890px) {
    .ContactHero {
        padding: 120px 0 70px;
    }
    
    .HeroContainer {
        padding: 0 20px;
    }
    
    .HeroTitle {
        font-size: 2.6rem;
        margin-bottom: 20px;
    }
    
    .HeroSubtitle {
        font-size: 16px;
    }
    
    .ContactSection {
        padding: 75px 0;
    }
    
    .ContactContainer {
        padding: 0 20px;
    }
    
    .ContactInfoTitle {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .ContactInfoText {
        font-size: 15px;
        margin-bottom: 36px;
    }
    
    .ContactDetails {
        gap: 24px;
    }
    
    .ContactItem {
        padding: 20px 16px;
        gap: 16px;
    }
    
    .IconBackground {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    
    .ContactForm {
        padding: 36px 28px;
    }
    
    .FormTitle {
        font-size: 22px;
    }
    
    .FormSubtitle {
        font-size: 14px;
        margin-bottom: 28px;
    }
    
    .ContactFormElement {
        gap: 20px;
    }
    
    .FormInput,
    .FormSelect,
    .FormTextarea {
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .FormSubmitButton {
        padding: 16px 28px;
        font-size: 15px;
    }
    
    .MapSection {
        padding: 75px 0;
    }
    
    .MapContainer {
        padding: 0 20px;
    }
    
    .MapTitle {
        font-size: 2.2rem;
        margin-bottom: 14px;
    }
    
    .MapSubtitle {
        font-size: 15px;
        margin-bottom: 40px;
    }
    
    .MapInfo {
        padding: 28px 24px;
    }
    
    .MapInfoTitle {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .CTASection {
        padding: 65px 0;
    }
    
    .CTAContainer {
        padding: 0 20px;
    }
    
    .CTATitle {
        font-size: 2rem;
        margin-bottom: 18px;
    }
    
    .CTAText {
        font-size: 15px;
        margin-bottom: 32px;
    }
    
    .CTAButtons {
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .HeroTitle {
        font-size: 2.2rem;
        line-height: 1.2;
    }
    
    .HeroSubtitle {
        font-size: 15px;
    }
    
    .ContactInfoTitle {
        font-size: 1.8rem;
    }
    
    .ContactInfoText {
        font-size: 14px;
    }
    
    .ContactItem {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 18px 14px;
    }
    
    .ContactContent {
        text-align: center;
    }
    
    .ContactForm {
        padding: 28px 20px;
    }
    
    .FormTitle {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .FormSubtitle {
        font-size: 13px;
        margin-bottom: 24px;
    }
    
    .ContactFormElement {
        gap: 18px;
    }
    
    .FormLabel {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .FormInput,
    .FormSelect,
    .FormTextarea {
        padding: 11px 12px;
        font-size: 14px;
    }
    
    .FormTextarea {
        min-height: 100px;
    }
    
    .FormSubmitButton {
        padding: 14px 24px;
        font-size: 14px;
        width: 100%;
    }
    
    .FormDisclaimer {
        font-size: 11px;
        margin-top: 12px;
    }
    
    .CheckboxLabel {
        font-size: 13px;
        gap: 10px;
    }
    
    .FormCheckbox {
        width: 16px;
        height: 16px;
    }
    
    .MapTitle {
        font-size: 1.9rem;
    }
    
    .MapSubtitle {
        font-size: 14px;
        margin-bottom: 32px;
    }
    
    .MapFrame {
        border-radius: 12px;
    }
    
    .MapFrame iframe {
        height: 300px;
    }
    
    .MapInfo {
        padding: 24px 20px;
    }
    
    .MapInfoTitle {
        font-size: 17px;
        margin-bottom: 18px;
    }
    
    .MapDetails {
        gap: 12px;
    }
    
    .MapDetail {
        padding: 10px 14px;
        gap: 10px;
    }
    
    .MapDetailIcon {
        font-size: 18px;
    }
    
    .MapDetailText {
        font-size: 13px;
    }
    
    .CTATitle {
        font-size: 1.8rem;
        margin-bottom: 16px;
    }
    
    .CTAText {
        font-size: 14px;
        margin-bottom: 28px;
    }
    
    .CTAButtons {
        flex-direction: column;
        gap: 12px;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .CTAButton {
        width: 100%;
        text-align: center;
        padding: 14px 28px;
        font-size: 14px;
    }
}

/* Form Validation Styles */
.FormInput:invalid:not(:placeholder-shown),
.FormTextarea:invalid:not(:placeholder-shown) {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

.FormInput:valid,
.FormTextarea:valid {
    border-color: #38a169;
}

/* Loading state for form submission */
.FormSubmitButton:disabled {
    background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.FormSubmitButton:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Focus styles for accessibility */
.FormInput:focus-visible,
.FormSelect:focus-visible,
.FormTextarea:focus-visible,
.FormCheckbox:focus-visible,
.FormSubmitButton:focus-visible {
    outline: 2px solid var(--flame-red);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ContactItem {
        border: 2px solid var(--deep-crimson);
    }
    
    .FormInput,
    .FormSelect,
    .FormTextarea {
        border-width: 2px;
    }
    
    .MapFrame {
        border: 2px solid var(--deep-crimson);
    }
}


.ContactValue {
    font-size: 14px;
    line-height: 1.5;
    color: var(--steel-gray);
    margin: 0;
}

.ContactLink {
    color: var(--flame-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

.ContactLink:hover {
    color: var(--deep-crimson);
    text-decoration: underline;
}

/* Contact Form */
.ContactForm {
    background: linear-gradient(135deg, var(--light-mist) 0%, var(--warm-white) 100%);
    border-radius: 20px;
    padding: 42px 36px;
    box-shadow: 0 12px 36px var(--shadow-light);
    border: 1px solid rgba(214, 40, 40, 0.08);
    position: relative;
    overflow: hidden;
}

.ContactForm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--flame-red) 0%, var(--deep-crimson) 100%);
}

.FormTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--deep-crimson);
    margin-bottom: 12px;
    text-align: center;
}

.FormSubtitle {
    font-size: 15px;
    line-height: 1.6;
    color: var(--steel-gray);
    text-align: center;
    margin-bottom: 32px;
    font-weight: 400;
}

.ContactFormElement {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.FormGroup {
    display: flex;
    flex-direction: column;
}

.FormGroup--checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.FormLabel {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--deep-crimson);
    margin-bottom: 8px;
    line-height: 1.3;
}

.FormInput,
.FormSelect,
.FormTextarea {
    padding: 14px 16px;
    border: 2px solid rgba(214, 40, 40, 0.12);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    color: var(--steel-gray);
    background-color: var(--warm-white);
    transition: all 0.3s ease;
    outline: none;
}

.FormInput:focus,
.FormSelect:focus,
.FormTextarea:focus {
    border-color: var(--flame-red);
    box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.1);
    transform: translateY(-1px);
}

.FormInput::placeholder,
.FormTextarea::placeholder {
    color: #a0aec0;
    font-style: italic;
}

.FormSelect {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
}

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

.CheckboxLabel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
}

.FormCheckbox {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--flame-red);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.CheckboxText {
    color: var(--steel-gray);
    font-weight: 400;
}

.FormSubmitButton {
    background: linear-gradient(135deg, var(--flame-red) 0%, var(--deep-crimson) 100%);
    color: var(--warm-white);
    border: none;
    padding: 18px 32px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(214, 40, 40, 0.25);
    margin-top: 8px;
}

.FormSubmitButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(214, 40, 40, 0.35);
}

.FormSubmitButton:active {
    transform: translateY(0);
}

.FormDisclaimer {
    font-size: 12px;
    line-height: 1.5;
    color: #718096;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 0;
}

.DisclaimerLink {
    color: var(--flame-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

.DisclaimerLink:hover {
    color: var(--deep-crimson);
    text-decoration: underline;
}

/* Map Section */
.MapSection {
    padding: 90px 0;
    background-color: var(--light-mist);
    position: relative;
    overflow: hidden;
}

.MapSection::before {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -15%;
    width: 50%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(214, 40, 40, 0.03) 0%, transparent 70%);
    transform: rotate(30deg);
    z-index: 1;
}

.MapContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.MapTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--deep-crimson);
    text-align: center;
    margin-bottom: 16px;
    letter-spacing: -0.7px;
    line-height: 1.2;
}

.MapSubtitle {
    font-size: 16px;
    line-height: 1.6;
    color: var(--steel-gray);
    text-align: center;
    margin-bottom: 48px;
    font-weight: 400;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

.MapFrame {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 36px var(--shadow-dark);
    border: 1px solid rgba(214, 40, 40, 0.08);
}

.MapFrame iframe {
    display: block;
    width: 100%;
    filter: contrast(1.1) saturate(1.1);
}

.MapInfo {
    background-color: var(--warm-white);
    padding: 32px 28px;
    border-radius: 16px;
    box-shadow: 0 8px 24px var(--shadow-light);
    border: 1px solid rgba(214, 40, 40, 0.06);
}

.MapInfoTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--deep-crimson);
    margin-bottom: 24px;
    text-align: center;
}

.MapDetails {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.MapDetail {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: var(--light-mist);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.MapDetail:hover {
    transform: translateX(4px);
}

.MapDetailIcon {
    font-size: 20px;
    flex-shrink: 0;
}

.MapDetailText {
    font-size: 14px;
    color: var(--steel-gray);
    font-weight: 500;
    line-height: 1.4;
}

/* CTA Section */
.CTASection {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--deep-crimson) 0%, var(--flame-red) 100%);
    position: relative;
    overflow: hidden;
}

.CTASection::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
    transform: rotate(-25deg);
    z-index: 1;
}

.CTAContainer {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.CTAContent {
    text-align: center;
}

.CTATitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--warm-white);
    margin-bottom: 20px;
    letter-spacing: -0.6px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.CTAText {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 36px;
    font-weight: 400;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.CTAButtons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}











/* Cookie Policy Page Specific Styles */

.CookieHero {
    background: linear-gradient(135deg, var(--soft-rose) 0%, var(--warm-white) 100%);
    padding: 140px 0 70px;
    position: relative;
    overflow: hidden;
}

.CookieHero::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -12%;
    width: 45%;
    height: 150%;
    background: radial-gradient(circle, rgba(214, 40, 40, 0.05) 0%, transparent 70%);
    transform: rotate(-18deg);
    z-index: 1;
}

.HeroContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.HeroContent {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.HeroTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    color: var(--deep-crimson);
    margin-bottom: 16px;
    letter-spacing: -0.8px;
    line-height: 1.15;
}

.HeroDate {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--flame-red);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.HeroDescription {
    font-size: 17px;
    line-height: 1.6;
    color: var(--steel-gray);
    font-weight: 400;
}

/* Policy Content */
.PolicyContent {
    padding: 85px 0;
    background-color: var(--warm-white);
    position: relative;
}

.ContentContainer {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 28px;
}

.PolicySection {
    margin-bottom: 58px;
    position: relative;
}

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

.SectionTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--deep-crimson);
    margin-bottom: 20px;
    line-height: 1.3;
    position: relative;
    padding-left: 20px;
}

.SectionTitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, var(--flame-red) 0%, var(--deep-crimson) 100%);
    border-radius: 2px;
}

.SectionText {
    font-size: 15px;
    line-height: 1.7;
    color: var(--steel-gray);
    margin-bottom: 18px;
    font-weight: 400;
}

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

/* Cookie Types */
.CookieTypes {
    display: grid;
    gap: 24px;
    margin-top: 28px;
}

.CookieType {
    background: linear-gradient(135deg, var(--light-mist) 0%, var(--warm-white) 100%);
    padding: 28px 24px;
    border-radius: 12px;
    border: 1px solid rgba(214, 40, 40, 0.06);
    transition: all 0.3s ease;
    position: relative;
}

.CookieType:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--shadow-light);
}

.TypeTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--deep-crimson);
    margin-bottom: 12px;
    line-height: 1.3;
}

.TypeDescription {
    font-size: 14px;
    line-height: 1.6;
    color: var(--steel-gray);
    margin: 0;
    font-weight: 400;
}

/* Duration Info */
.DurationInfo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 28px;
}

.DurationType {
    padding: 24px 20px;
    background-color: var(--light-mist);
    border-radius: 10px;
    border-left: 4px solid var(--flame-red);
    transition: transform 0.3s ease;
}

.DurationType:hover {
    transform: translateX(4px);
}

.DurationTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--deep-crimson);
    margin-bottom: 10px;
    line-height: 1.3;
}

.DurationText {
    font-size: 14px;
    line-height: 1.6;
    color: var(--steel-gray);
    margin: 0;
    font-weight: 400;
}

/* Management Options */
.ManagementOptions {
    display: grid;
    gap: 20px;
    margin-top: 28px;
}

.OptionItem {
    display: flex;
    gap: 20px;
    padding: 20px;
    background-color: rgba(214, 40, 40, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(214, 40, 40, 0.08);
    transition: background-color 0.3s ease;
}

.OptionItem:hover {
    background-color: rgba(214, 40, 40, 0.04);
}

.OptionTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--deep-crimson);
    margin-bottom: 8px;
    line-height: 1.3;
    min-width: 140px;
    flex-shrink: 0;
}

.OptionText {
    font-size: 14px;
    line-height: 1.6;
    color: var(--steel-gray);
    margin: 0;
    font-weight: 400;
    flex: 1;
}

/* Policy Footer */
.PolicyFooter {
    margin-top: 68px;
    background: linear-gradient(135deg, var(--deep-crimson) 0%, var(--flame-red) 100%);
    padding: 42px 36px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.PolicyFooter::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    transform: rotate(-20deg);
    z-index: 1;
}

.FooterContent {
    position: relative;
    z-index: 2;
}

.FooterText {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 28px;
    font-weight: 400;
}

.FooterActions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.PolicyLink,
.ReturnLink {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.PolicyLink {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--warm-white);
}

.PolicyLink:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.ReturnLink {
    background-color: var(--warm-white);
    color: var(--deep-crimson);
}

.ReturnLink:hover {
    background-color: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive Design */
@media (max-width: 890px) {
    .CookieHero {
        padding: 120px 0 60px;
    }
    
    .HeroContainer {
        padding: 0 20px;
    }
    
    .HeroTitle {
        font-size: 2.4rem;
        margin-bottom: 14px;
    }
    
    .HeroDescription {
        font-size: 16px;
    }
    
    .PolicyContent {
        padding: 70px 0;
    }
    
    .ContentContainer {
        padding: 0 20px;
    }
    
    .PolicySection {
        margin-bottom: 48px;
    }
    
    .SectionTitle {
        font-size: 22px;
        margin-bottom: 18px;
        padding-left: 18px;
    }
    
    .SectionTitle::before {
        width: 3px;
        height: 20px;
    }
    
    .CookieType {
        padding: 24px 20px;
    }
    
    .TypeTitle {
        font-size: 17px;
        margin-bottom: 10px;
    }
    
    .DurationInfo {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .OptionItem {
        flex-direction: column;
        gap: 12px;
        padding: 18px;
    }
    
    .OptionTitle {
        min-width: auto;
        margin-bottom: 6px;
    }
    
    .PolicyFooter {
        margin-top: 56px;
        padding: 36px 28px;
    }
    
    .FooterText {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    .FooterActions {
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .HeroTitle {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .HeroDescription {
        font-size: 15px;
    }
    
    .SectionTitle {
        font-size: 20px;
        margin-bottom: 16px;
        padding-left: 16px;
    }
    
    .SectionText {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    .CookieType {
        padding: 20px 16px;
    }
    
    .TypeTitle {
        font-size: 16px;
    }
    
    .TypeDescription {
        font-size: 13px;
    }
    
    .DurationType {
        padding: 20px 16px;
    }
    
    .DurationTitle {
        font-size: 15px;
    }
    
    .DurationText {
        font-size: 13px;
    }
    
    .OptionItem {
        padding: 16px;
    }
    
    .OptionTitle {
        font-size: 14px;
    }
    
    .OptionText {
        font-size: 13px;
    }
    
    .PolicyFooter {
        margin-top: 48px;
        padding: 28px 20px;
    }
    
    .FooterText {
        font-size: 13px;
        margin-bottom: 20px;
    }
    
    .FooterActions {
        flex-direction: column;
        gap: 12px;
        max-width: 220px;
        margin: 0 auto;
    }
    
    .PolicyLink,
    .ReturnLink {
        width: 100%;
        text-align: center;
        padding: 11px 20px;
        font-size: 13px;
    }
}

/* Animation for smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Subtle entrance animations */
.PolicySection {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

.PolicySection:nth-child(1) { animation-delay: 0.1s; }
.PolicySection:nth-child(2) { animation-delay: 0.2s; }
.PolicySection:nth-child(3) { animation-delay: 0.3s; }
.PolicySection:nth-child(4) { animation-delay: 0.4s; }
.PolicySection:nth-child(5) { animation-delay: 0.5s; }
.PolicySection:nth-child(6) { animation-delay: 0.6s; }
.PolicySection:nth-child(7) { animation-delay: 0.7s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Print styles */
@media print {
    .CookieHero::before,
    .PolicyFooter::before {
        display: none;
    }
    
    .PolicyFooter {
        background: var(--light-mist);
        color: var(--deep-crimson);
    }
    
    .FooterText {
        color: var(--steel-gray);
    }
    
    .PolicyLink,
    .ReturnLink {
        display: none;
    }
}
















/* Privacy Policy Page Specific Styles */

.PrivacyHero {
    background: linear-gradient(135deg, var(--soft-rose) 0%, var(--warm-white) 100%);
    padding: 140px 0 70px;
    position: relative;
    overflow: hidden;
}

.PrivacyHero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -15%;
    width: 50%;
    height: 140%;
    background: radial-gradient(circle, rgba(214, 40, 40, 0.05) 0%, transparent 70%);
    transform: rotate(22deg);
    z-index: 1;
}

.HeroContainer {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.HeroContent {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.HeroTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    color: var(--deep-crimson);
    margin-bottom: 16px;
    letter-spacing: -0.8px;
    line-height: 1.15;
}

.HeroDate {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--flame-red);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.HeroDescription {
    font-size: 17px;
    line-height: 1.6;
    color: var(--steel-gray);
    font-weight: 400;
}

/* Privacy Content */
.PrivacyContent {
    padding: 85px 0;
    background-color: var(--warm-white);
    position: relative;
}

.ContentContainer {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 28px;
}

/* Policy Intro */
.PolicyIntro {
    margin-bottom: 58px;
}

.IntroCard {
    background: linear-gradient(135deg, var(--light-mist) 0%, var(--warm-white) 100%);
    padding: 38px 32px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(214, 40, 40, 0.08);
    position: relative;
    overflow: hidden;
}

.IntroCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--flame-red) 0%, var(--deep-crimson) 100%);
}

.IntroTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--deep-crimson);
    margin-bottom: 16px;
    line-height: 1.3;
}

.IntroText {
    font-size: 15px;
    line-height: 1.7;
    color: var(--steel-gray);
    margin: 0;
    font-weight: 400;
}

/* Policy Sections */
.PolicySection {
    margin-bottom: 56px;
    position: relative;
}

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

.SectionTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--deep-crimson);
    margin-bottom: 20px;
    line-height: 1.3;
    position: relative;
    padding-bottom: 12px;
}

.SectionTitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--flame-red) 0%, var(--deep-crimson) 100%);
    border-radius: 1px;
}

.SectionText {
    font-size: 15px;
    line-height: 1.7;
    color: var(--steel-gray);
    margin-bottom: 18px;
    font-weight: 400;
}

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

/* Data Types */
.DataTypes {
    display: grid;
    gap: 24px;
    margin-top: 28px;
}

.DataCategory {
    background-color: var(--light-mist);
    padding: 24px 20px;
    border-radius: 10px;
    border-left: 4px solid var(--flame-red);
    transition: all 0.3s ease;
}

.DataCategory:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 16px var(--shadow-light);
}

.CategoryTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--deep-crimson);
    margin-bottom: 10px;
    line-height: 1.3;
}

.CategoryText {
    font-size: 14px;
    line-height: 1.6;
    color: var(--steel-gray);
    margin: 0;
    font-weight: 400;
}

/* Usage Purposes */
.UsagePurposes {
    display: grid;
    gap: 20px;
    margin-top: 28px;
}

.PurposeItem {
    background: rgba(214, 40, 40, 0.02);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(214, 40, 40, 0.06);
    transition: background-color 0.3s ease;
}

.PurposeItem:hover {
    background: rgba(214, 40, 40, 0.04);
}

.PurposeHeader {
    margin-bottom: 12px;
}

.PurposeTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--deep-crimson);
    margin: 0;
    line-height: 1.3;
}

.PurposeText {
    font-size: 14px;
    line-height: 1.6;
    color: var(--steel-gray);
    margin: 0;
    font-weight: 400;
}

/* Sharing Scenarios */
.SharingScenarios {
    display: grid;
    gap: 24px;
    margin-top: 28px;
}

.ScenarioGroup {
    padding: 20px;
    background: linear-gradient(135deg, var(--light-mist) 0%, var(--warm-white) 100%);
    border-radius: 10px;
    border: 1px solid rgba(214, 40, 40, 0.08);
    transition: transform 0.3s ease;
}

.ScenarioGroup:hover {
    transform: translateY(-3px);
}

.ScenarioTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--deep-crimson);
    margin-bottom: 10px;
    line-height: 1.3;
}

.ScenarioText {
    font-size: 14px;
    line-height: 1.6;
    color: var(--steel-gray);
    margin: 0;
    font-weight: 400;
}

/* Security Measures */
.SecurityMeasures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 28px;
}

.SecurityItem {
    text-align: center;
    padding: 24px 16px;
    background-color: var(--light-mist);
    border-radius: 12px;
    border: 1px solid rgba(214, 40, 40, 0.06);
    transition: all 0.3s ease;
}

.SecurityItem:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px var(--shadow-light);
}

.SecurityTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--deep-crimson);
    margin-bottom: 12px;
    line-height: 1.3;
}

.SecurityText {
    font-size: 13px;
    line-height: 1.6;
    color: var(--steel-gray);
    margin: 0;
    font-weight: 400;
}

/* Rights Grid */
.RightsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.RightItem {
    padding: 18px;
    background-color: rgba(214, 40, 40, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(214, 40, 40, 0.08);
    transition: all 0.3s ease;
}

.RightItem:hover {
    background-color: rgba(214, 40, 40, 0.04);
    transform: scale(1.02);
}

.RightTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--deep-crimson);
    margin-bottom: 8px;
    line-height: 1.3;
}

.RightText {
    font-size: 13px;
    line-height: 1.6;
    color: var(--steel-gray);
    margin: 0;
    font-weight: 400;
}

/* Policy Action */
.PolicyAction {
    margin-top: 68px;
}

.ActionCard {
    background: linear-gradient(135deg, var(--deep-crimson) 0%, var(--flame-red) 100%);
    padding: 40px 36px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ActionCard::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -25%;
    width: 50%;
    height: 180%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
    transform: rotate(-25deg);
    z-index: 1;
}

.ActionTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--warm-white);
    margin-bottom: 16px;
    line-height: 1.3;
    position: relative;
    z-index: 2;
}

.ActionText {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 28px;
    font-weight: 400;
    position: relative;
    z-index: 2;
}

.ActionButtons {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.ActionLink,
.MainLink {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ActionLink {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--warm-white);
}

.ActionLink:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.MainLink {
    background-color: var(--warm-white);
    color: var(--deep-crimson);
}

.MainLink:hover {
    background-color: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive Design */
@media (max-width: 890px) {
    .PrivacyHero {
        padding: 120px 0 60px;
    }
    
    .HeroContainer {
        padding: 0 20px;
    }
    
    .HeroTitle {
        font-size: 2.4rem;
        margin-bottom: 14px;
    }
    
    .HeroDescription {
        font-size: 16px;
    }
    
    .PrivacyContent {
        padding: 70px 0;
    }
    
    .ContentContainer {
        padding: 0 20px;
    }
    
    .PolicyIntro {
        margin-bottom: 48px;
    }
    
    .IntroCard {
        padding: 32px 26px;
    }
    
    .IntroTitle {
        font-size: 20px;
        margin-bottom: 14px;
    }
    
    .IntroText {
        font-size: 14px;
    }
    
    .PolicySection {
        margin-bottom: 46px;
    }
    
    .SectionTitle {
        font-size: 22px;
        margin-bottom: 18px;
        padding-bottom: 10px;
    }
    
    .SectionTitle::after {
        width: 50px;
    }
    
    .SecurityMeasures {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .RightsGrid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .ActionCard {
        padding: 34px 28px;
    }
    
    .ActionTitle {
        font-size: 18px;
        margin-bottom: 14px;
    }
    
    .ActionText {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    .ActionButtons {
        gap: 14px;
    }
}

@media (max-width: 640px) {
    .HeroTitle {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .HeroDescription {
        font-size: 15px;
    }
    
    .IntroCard {
        padding: 26px 20px;
    }
    
    .IntroTitle {
        font-size: 18px;
    }
    
    .IntroText {
        font-size: 13px;
    }
    
    .SectionTitle {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .SectionText {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    .DataCategory {
        padding: 20px 16px;
    }
    
    .CategoryTitle {
        font-size: 16px;
    }
    
    .CategoryText {
        font-size: 13px;
    }
    
    .PurposeItem {
        padding: 16px;
    }
    
    .PurposeTitle {
        font-size: 15px;
    }
    
    .PurposeText {
        font-size: 13px;
    }
    
    .ScenarioGroup {
        padding: 16px;
    }
    
    .ScenarioTitle {
        font-size: 15px;
    }
    
    .ScenarioText {
        font-size: 13px;
    }
    
    .SecurityItem {
        padding: 20px 14px;
    }
    
    .SecurityTitle {
        font-size: 15px;
    }
    
    .SecurityText {
        font-size: 12px;
    }
    
    .RightItem {
        padding: 16px;
    }
    
    .RightTitle {
        font-size: 14px;
    }
    
    .RightText {
        font-size: 12px;
    }
    
    .ActionCard {
        padding: 28px 20px;
    }
    
    .ActionTitle {
        font-size: 17px;
        margin-bottom: 12px;
    }
    
    .ActionText {
        font-size: 13px;
        margin-bottom: 20px;
    }
    
    .ActionButtons {
        flex-direction: column;
        gap: 12px;
        max-width: 220px;
        margin: 0 auto;
    }
    
    .ActionLink,
    .MainLink {
        width: 100%;
        text-align: center;
        padding: 11px 20px;
        font-size: 13px;
    }
}

/* Subtle animations for page load */
.PolicySection {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

.PolicySection:nth-child(1) { animation-delay: 0.1s; }
.PolicySection:nth-child(2) { animation-delay: 0.2s; }
.PolicySection:nth-child(3) { animation-delay: 0.3s; }
.PolicySection:nth-child(4) { animation-delay: 0.4s; }
.PolicySection:nth-child(5) { animation-delay: 0.5s; }
.PolicySection:nth-child(6) { animation-delay: 0.6s; }
.PolicySection:nth-child(7) { animation-delay: 0.7s; }
.PolicySection:nth-child(8) { animation-delay: 0.8s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus styles for accessibility */
.ActionLink:focus-visible,
.MainLink:focus-visible {
    outline: 2px solid var(--warm-white);
    outline-offset: 2px;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Print styles */
@media print {
    .PrivacyHero::before,
    .ActionCard::before {
        display: none;
    }
    
    .ActionCard {
        background: var(--light-mist);
        color: var(--deep-crimson);
    }
    
    .ActionTitle {
        color: var(--deep-crimson);
    }
    
    .ActionText {
        color: var(--steel-gray);
    }
    
    .ActionButtons {
        display: none;
    }
    
    .PolicySection {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .IntroCard,
    .DataCategory,
    .PurposeItem,
    .ScenarioGroup,
    .SecurityItem,
    .RightItem {
        border-width: 2px;
        border-color: var(--deep-crimson);
    }
    
    .SectionTitle::after {
        background: var(--deep-crimson);
    }
}