:root{font-family:'Red Hat Display',sans-serif;font-size:16px;line-height:1.6;color:#112022;background:#F0F0F0}
html{box-sizing:border-box}
*,:before,:after{box-sizing:inherit;margin:0;padding:0}
body{font-family:'Red Hat Display',sans-serif;background:linear-gradient(to bottom,#FFF 0%,#F0F0F0 100%);color:#112022;overflow-x:hidden}
a{text-decoration:none;color:inherit;cursor:pointer}
button{cursor:pointer;font-family:inherit}
input,textarea,select{cursor:text;font-family:inherit}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
.headerFrame{background:linear-gradient(135deg,#112022f7 0%,#112022eb 100%);padding:28px 0;box-shadow:0 8px 24px #2f942a26}
.headerFrame .topLayer{max-width:960px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:90px}
.headerFrame .logoZone{flex-shrink:0}
.headerFrame .brandLink{display:block;background:#f0f0f01a;padding:12px;border-radius:24px;box-shadow:0 4px 16px #2f942a33;transition:all .3s ease-out}
.headerFrame .brandLink:hover{background:#f0f0f026;box-shadow:0 6px 20px #2f942a4d}
.headerFrame .siteLogo{width:85px;height:85px;display:block}
.headerFrame .companyTitle{flex:1;text-align:center;padding:0 24px}
.headerFrame .brandName{font-size:2.8rem;font-weight:700;color:#F0F0F0;letter-spacing:1px;text-shadow:2px 2px 8px #2f942a4d}
.headerFrame .primaryNav{flex-shrink:0}
.headerFrame .navList{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.headerFrame .navItem{display:block}
.headerFrame .navLink{display:block;padding:14px 22px;color:#F0F0F0;font-weight:500;font-size:1.05rem;border-radius:20px;background:#f0f0f00d;transition:all .3s ease-out;white-space:nowrap}
.headerFrame .navLink:hover{background:#2f942a40;color:#FFF}
.headerFrame .bottomLayer{max-width:960px;margin:24px auto 0;padding:0 24px}
.headerFrame .navEnhanced{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;padding:20px 0;border-top:2px solid #2f942a33}
.headerFrame .menuFeature{display:flex;align-items:center;gap:12px;color:#F0F0F0;padding:10px 20px;border-radius:18px;background:#2f942a1f;transition:all .3s ease-out}
.headerFrame .menuFeature:hover{background:#2f942a38}
.headerFrame .featureIcon{width:28px;height:28px;color:#2F942A}
.headerFrame .featureLabel{font-size:.95rem;font-weight:500}
@media (max-width: 968px) {
.headerFrame .topLayer{flex-direction:column;gap:20px;min-height:auto}
.headerFrame .companyTitle{order:-1;padding:0}
.headerFrame .brandName{font-size:2.2rem}
.headerFrame .navList{justify-content:center}
.headerFrame .navEnhanced{gap:24px}
}
@media (max-width: 640px) {
.headerFrame{padding:20px 0}
.headerFrame .topLayer{padding:0 16px}
.headerFrame .brandName{font-size:1.8rem}
.headerFrame .siteLogo{width:70px;height:70px}
.headerFrame .navList{flex-direction:column;gap:8px;width:100%}
.headerFrame .navLink{width:100%;text-align:center}
.headerFrame .bottomLayer{padding:0 16px}
.headerFrame .navEnhanced{flex-direction:column;gap:16px}
.headerFrame .menuFeature{justify-content:center}
}
.footerWave{position:relative;width:100%;overflow:hidden;line-height:0;margin-top:60px}
.footerWave .waveDivider{width:100%;height:80px;display:block}
.footerContent{background:linear-gradient(to bottom,#112022 0%,#0a1516 100%);padding:60px 0 24px}
.footerContent .footerInner{max-width:960px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:48px}
.footerContent .infoBlock{display:flex;flex-direction:column;gap:20px}
.footerContent .blockTitle{font-size:1.3rem;font-weight:700;color:#2F942A;margin-bottom:8px}
.footerContent .resourceList{display:flex;flex-direction:column;gap:12px}
.footerContent .resourceLink{color:#F0F0F0;font-size:1rem;padding:8px 0;transition:color .3s ease-out;display:inline-block}
.footerContent .resourceLink:hover{color:#2F942A}
.footerContent .contactDetails{display:flex;flex-direction:column;gap:12px}
.footerContent .detailLine{color:#F0F0F0;font-size:.95rem;line-height:1.7}
.footerContent .contactLink{color:#2F942A;transition:color .3s ease-out}
.footerContent .contactLink:hover{color:#4ABF43}
.footerContent .legalNav{display:flex;flex-direction:column;gap:12px}
.footerContent .legalLink{color:#F0F0F0;font-size:1rem;padding:8px 0;transition:color .3s ease-out;display:inline-block}
.footerContent .legalLink:hover{color:#2F942A}
.footerContent .copyrightBar{max-width:960px;margin:48px auto 0;padding:24px 24px 0;border-top:1px solid #2f942a4d}
.footerContent .copyrightText{text-align:center;color:#f0f0f0b3;font-size:.9rem}
@media (max-width: 640px) {
.footerContent .footerInner{grid-template-columns:1fr;gap:36px;padding:0 16px}
.footerContent .copyrightBar{padding:24px 16px 0}
}
.cookieConsent{position:fixed;bottom:24px;left:24px;max-width:440px;background:#FFF;border-radius:24px;box-shadow:0 12px 40px #11202240 0 0 0 1px #2f942a1a;z-index:9999;opacity:0;transform:translateY(20px);pointer-events:none;transition:all .4s ease-out}
.cookieConsent[data-visible="true"]{opacity:1;transform:translateY(0);pointer-events:all}
.cookieConsent .consentBox{padding:24px}
.cookieConsent .consentHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cookieConsent .consentTitle{font-size:1.2rem;font-weight:700;color:#112022}
.cookieConsent .closeConsent{background:none;border:none;font-size:1.8rem;color:#112022;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:16px;transition:background .3s ease-out}
.cookieConsent .closeConsent:hover{background:#1120221a}
.cookieConsent .consentBody{margin-bottom:20px}
.cookieConsent .consentText{color:#112022;font-size:.95rem;margin-bottom:20px;line-height:1.5}
.cookieConsent .consentOptions{display:flex;flex-direction:column;gap:16px}
.cookieConsent .optionGroup{padding:12px;background:#2f942a0d;border-radius:16px}
.cookieConsent .optionLabel{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;color:#112022}
.cookieConsent .optionCheck{width:20px;height:20px;cursor:pointer;accent-color:#2F942A}
.cookieConsent .labelText{font-size:1rem}
.cookieConsent .optionDesc{margin-top:6px;margin-left:30px;font-size:.85rem;color:#112022b3;line-height:1.4}
.cookieConsent .consentActions{display:flex;gap:10px;flex-wrap:wrap}
.cookieConsent .consentBtn{flex:1;min-width:120px;padding:12px 20px;border:none;border-radius:18px;font-weight:600;font-size:.95rem;transition:all .3s ease-out}
.cookieConsent .acceptAll{background:#2F942A;color:#FFF}
.cookieConsent .acceptAll:hover{background:#267A22;box-shadow:0 6px 16px #2f942a4d}
.cookieConsent .denyAll{background:#1120221a;color:#112022}
.cookieConsent .denyAll:hover{background:#11202233}
.cookieConsent .savePrefs{background:#2f942a26;color:#112022}
.cookieConsent .savePrefs:hover{background:#2f942a40}
.consentMini{position:fixed;bottom:24px;left:24px;background:#2F942A;color:#FFF;padding:14px 24px;border-radius:20px;display:flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 8px 24px #1120224d;z-index:9998;opacity:0;transform:scale(0.8);pointer-events:none;transition:all .4s ease-out}
.consentMini[data-active="true"]{opacity:1;transform:scale(1);pointer-events:all}
.consentMini:hover{background:#267A22;box-shadow:0 10px 28px #11202266}
.consentMini .miniIcon{font-size:1.3rem}
.consentMini .miniText{font-weight:600;font-size:.95rem}
@media (max-width: 640px) {
.cookieConsent{left:12px;right:12px;max-width:none;bottom:12px}
.cookieConsent .consentBox{padding:20px}
.cookieConsent .consentActions{flex-direction:column}
.cookieConsent .consentBtn{width:100%;min-width:auto}
.consentMini{left:12px;bottom:12px}
}
.legal-wrapper{max-width:960px;margin:0 auto;padding:80px 24px 120px;background:#FFF}
.legal-wrapper h1{font-size:48px;line-height:1.2;font-weight:700;color:#112022;margin:0 0 16px;letter-spacing:-.02em}
.legal-wrapper h2{font-size:36px;line-height:1.3;font-weight:700;color:#112022;margin:64px 0 24px;letter-spacing:-.01em}
.legal-wrapper h3{font-size:28px;line-height:1.4;font-weight:600;color:#112022;margin:48px 0 20px}
.legal-wrapper h4{font-size:22px;line-height:1.4;font-weight:600;color:#112022;margin:36px 0 16px}
.legal-wrapper h5{font-size:18px;line-height:1.5;font-weight:600;color:#112022;margin:28px 0 14px}
.legal-wrapper h6{font-size:16px;line-height:1.5;font-weight:600;color:#112022;margin:24px 0 12px;text-transform:uppercase;letter-spacing:.05em}
.legal-wrapper p{font-size:17px;line-height:1.75;color:#112022;margin:0 0 24px;opacity:.9}
.legal-wrapper strong,.legal-wrapper b{font-weight:600;color:#112022}
.legal-wrapper a{color:#2F942A;text-decoration:none;font-weight:500;transition:all .3s ease-out;border-bottom:2px solid #2f942a33;padding-bottom:2px}
.legal-wrapper a:hover{color:#112022;border-bottom-color:#2F942A}
.legal-wrapper a:focus{outline:3px solid #2f942a4d;outline-offset:4px;border-radius:4px}
.legal-wrapper div{margin:0 0 24px}
.legal-wrapper h1 + p{font-size:19px;color:#112022;opacity:.75;margin-bottom:48px}
.legal-wrapper h2 + p,.legal-wrapper h3 + p,.legal-wrapper h4 + p{margin-top:0}
.legal-wrapper p:last-child{margin-bottom:0}
@media (max-width: 768px) {
.legal-wrapper{padding:48px 20px 80px}
.legal-wrapper h1{font-size:36px;margin-bottom:12px}
.legal-wrapper h2{font-size:28px;margin:48px 0 20px}
.legal-wrapper h3{font-size:24px;margin:36px 0 16px}
.legal-wrapper h4{font-size:20px;margin:28px 0 14px}
.legal-wrapper h5{font-size:17px;margin:24px 0 12px}
.legal-wrapper h6{font-size:15px;margin:20px 0 10px}
.legal-wrapper p{font-size:16px;line-height:1.7;margin-bottom:20px}
.legal-wrapper h1 + p{font-size:17px;margin-bottom:36px}
}
@media (max-width: 480px) {
.legal-wrapper{padding:36px 16px 60px}
.legal-wrapper h1{font-size:30px}
.legal-wrapper h2{font-size:24px;margin:40px 0 16px}
.legal-wrapper h3{font-size:20px;margin:32px 0 14px}
.legal-wrapper p{font-size:15px;margin-bottom:18px}
}
.courseHeader{background:linear-gradient(135deg,#112022f2 0%,#2f942ad9 100%);padding:80px 20px 120px;position:relative;overflow:hidden}
.courseHeader::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0,30 Q300,0 600,30 T1200,30 L1200,60 L0,60 Z' fill='%23F0F0F0'/%3E%3C/svg%3E") no-repeat;background-size:cover}
.courseHeader .headerContent{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:60px}
.courseHeader .textBlock{flex:1}
.courseHeader .mainTitle{font-size:48px;color:#F0F0F0;margin:0 0 20px;font-weight:700;line-height:1.2}
.courseHeader .descriptionText{font-size:18px;color:#f0f0f0e6;margin:0 0 32px;line-height:1.6}
.courseHeader .actionButtons{display:flex;gap:16px}
.courseHeader .primaryButton{background:#2F942A;color:#F0F0F0;padding:16px 32px;border-radius:24px;text-decoration:none;font-weight:600;font-size:16px;transition:transform .3s ease-out,box-shadow .3s ease-out;box-shadow:0 8px 16px #2f942a4d}
.courseHeader .primaryButton:hover{transform:translateY(-3px);box-shadow:0 12px 24px #2f942a66}
.courseHeader .secondaryButton{background:transparent;color:#F0F0F0;padding:16px 32px;border-radius:24px;text-decoration:none;font-weight:600;font-size:16px;border:2px solid #F0F0F0;transition:background .3s ease-out,color .3s ease-out}
.courseHeader .secondaryButton:hover{background:#F0F0F0;color:#112022}
.courseHeader .imageBlock{flex:1;position:relative}
.courseHeader .imageBlock img{width:100%;height:auto;border-radius:32px;box-shadow:0 16px 40px #11202280;position:relative}
.courseHeader .imageBlock::before{content:'';position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;background:radial-gradient(circle at center,transparent 60%,#11202266 100%);border-radius:40px;z-index:1;pointer-events:none}
.availableCoursesSection{padding:80px 20px;background:#F0F0F0}
.availableCoursesSection .containerBox{max-width:960px;margin:0 auto}
.availableCoursesSection .sectionLabel{font-size:36px;color:#112022;margin:0 0 48px;text-align:center;font-weight:700;position:relative;display:inline-block;left:50%;transform:translateX(-50%)}
.availableCoursesSection .sectionLabel::after{content:'';position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);width:80px;height:4px;background:linear-gradient(90deg,#2F942A 0%,#112022 100%);border-radius:16px}
.availableCoursesSection .coursesGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.availableCoursesSection .courseItem{background:#fff;border-radius:24px;padding:32px;box-shadow:0 4px 12px #1120221a;transition:transform .3s ease-out,box-shadow .3s ease-out;position:relative}
.availableCoursesSection .courseItem:hover{transform:translateY(-6px);box-shadow:0 12px 28px #2f942a33}
.availableCoursesSection .courseItem::before{content:'';position:absolute;top:0;left:0;width:6px;height:100%;background:#2F942A;border-radius:24px 0 0 24px}
.availableCoursesSection .courseTitle{font-size:24px;color:#112022;margin:0 0 16px;font-weight:700}
.availableCoursesSection .courseDetails{font-size:15px;color:#112022cc;margin:0 0 20px;line-height:1.6}
.availableCoursesSection .enrollmentData{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.availableCoursesSection .dataLabel{font-size:13px;color:#11202299;text-transform:uppercase;letter-spacing:.5px}
.availableCoursesSection .dataValue{font-size:18px;color:#2F942A;font-weight:700}
.availableCoursesSection .statusBadge{display:inline-block;background:#2f942a26;color:#2F942A;padding:8px 16px;border-radius:16px;font-size:13px;font-weight:600}
.learningProcess{padding:80px 20px;background:#fff;position:relative}
.learningProcess::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:linear-gradient(180deg,#f0f0f04d 0%,transparent 100%);pointer-events:none}
.learningProcess .containerBox{max-width:960px;margin:0 auto;position:relative;z-index:2}
.learningProcess .processTitle{font-size:36px;color:#112022;margin:0 0 56px;text-align:center;font-weight:700}
.learningProcess .stepsWrapper{display:flex;justify-content:space-between;gap:40px;position:relative}
.learningProcess .stepsWrapper::before{content:'';position:absolute;top:60px;left:80px;right:80px;height:3px;background:linear-gradient(90deg,#2F942A 0%,#112022 100%);z-index:1}
.learningProcess .stepUnit{flex:1;text-align:center;position:relative;z-index:2}
.learningProcess .stepNumber{width:120px;height:120px;background:#fff;border:4px solid #2F942A;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:48px;color:#2F942A;font-weight:700;box-shadow:0 8px 20px #2f942a33}
.learningProcess .stepLabel{font-size:20px;color:#112022;margin:0 0 12px;font-weight:700}
.learningProcess .stepInfo{font-size:15px;color:#112022b3;line-height:1.5}
.analyticsTools{padding:80px 20px;background:#112022;position:relative;overflow:hidden}
.analyticsTools::before{content:'';position:absolute;top:-50%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,#2f942a26 0%,transparent 70%);border-radius:50%}
.analyticsTools .containerBox{max-width:960px;margin:0 auto;position:relative;z-index:2}
.analyticsTools .toolsLayout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.analyticsTools .imageArea{position:relative}
.analyticsTools .imageArea img{width:100%;height:auto;border-radius:28px;box-shadow:0 16px 48px #0006}
.analyticsTools .contentArea{color:#F0F0F0}
.analyticsTools .areaHeading{font-size:36px;color:#F0F0F0;margin:0 0 24px;font-weight:700;line-height:1.3}
.analyticsTools .areaText{font-size:16px;color:#f0f0f0d9;margin:0 0 32px;line-height:1.7}
.analyticsTools .featureList{list-style:none;padding:0;margin:0 0 36px}
.analyticsTools .featureList li{padding:16px 0;border-bottom:1px solid #f0f0f01a;font-size:15px;display:flex;align-items:center;gap:12px}
.analyticsTools .featureList li::before{content:'→';color:#2F942A;font-size:20px;font-weight:700}
.analyticsTools .learnMoreButton{display:inline-block;background:#2F942A;color:#F0F0F0;padding:16px 40px;border-radius:24px;text-decoration:none;font-weight:600;font-size:16px;transition:transform .3s ease-out,box-shadow .3s ease-out;box-shadow:0 8px 20px #2f942a4d}
.analyticsTools .learnMoreButton:hover{transform:translateY(-3px);box-shadow:0 12px 28px #2f942a80}
.enrollmentSection{padding:80px 20px;background:linear-gradient(135deg,#F0F0F0 0%,#2f942a14 100%)}
.enrollmentSection .containerBox{max-width:960px;margin:0 auto}
.enrollmentSection .enrollmentGrid{display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:center}
.enrollmentSection .enrollmentInfo{background:#fff;padding:48px;border-radius:32px;box-shadow:0 8px 24px #1120221a}
.enrollmentSection .enrollTitle{font-size:32px;color:#112022;margin:0 0 20px;font-weight:700}
.enrollmentSection .enrollDescription{font-size:16px;color:#112022cc;margin:0 0 32px;line-height:1.6}
.enrollmentSection .benefitsList{list-style:none;padding:0;margin:0 0 32px}
.enrollmentSection .benefitsList li{padding:12px 0;font-size:15px;color:#112022cc;display:flex;align-items:center;gap:12px}
.enrollmentSection .benefitsList li::before{content:'✓';color:#2F942A;font-size:20px;font-weight:700}
.enrollmentSection .enrollButton{display:inline-block;background:#2F942A;color:#F0F0F0;padding:18px 48px;border-radius:28px;text-decoration:none;font-weight:700;font-size:17px;transition:transform .3s ease-out,box-shadow .3s ease-out;box-shadow:0 10px 24px #2f942a4d}
.enrollmentSection .enrollButton:hover{transform:translateY(-4px);box-shadow:0 14px 32px #2f942a66}
.enrollmentSection .visualArea{position:relative}
.enrollmentSection .visualArea img{width:100%;height:auto;border-radius:24px;box-shadow:0 12px 32px #11202226}
@media (max-width: 768px) {
.courseHeader .headerContent{flex-direction:column;gap:40px}
.courseHeader .mainTitle{font-size:36px}
.courseHeader .actionButtons{flex-direction:column}
.availableCoursesSection .coursesGrid{grid-template-columns:1fr}
.learningProcess .stepsWrapper{flex-direction:column;gap:48px}
.learningProcess .stepsWrapper::before{display:none}
.analyticsTools .toolsLayout{grid-template-columns:1fr;gap:40px}
.enrollmentSection .enrollmentGrid{grid-template-columns:1fr;gap:32px}
.enrollmentSection .enrollmentInfo{padding:32px}
}
@media (min-width: 769px) and (max-width: 1024px) {
.courseHeader .mainTitle{font-size:42px}
.availableCoursesSection .coursesGrid{grid-template-columns:repeat(2,1fr)}
.learningProcess .stepsWrapper{gap:24px}
}
.mainTitleZone{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#112022}
.mainTitleZone .backgroundImageLayer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.mainTitleZone .backgroundImageLayer img{width:100%;height:100%;object-fit:cover;opacity:.4;filter:contrast(1.1)}
.mainTitleZone .backgroundImageLayer::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#112022d9 0%,#2f942a4d 100%)}
.mainTitleZone .contentCenterWrap{position:relative;z-index:2;max-width:960px;margin:0 auto;padding:60px 24px;text-align:center}
.mainTitleZone .mainHeadingText{font-size:52px;line-height:1.2;color:#F0F0F0;margin:0 0 20px;font-weight:700;letter-spacing:-.5px}
.mainTitleZone .leadDescription{font-size:20px;line-height:1.6;color:#f0f0f0eb;margin:0 0 36px;max-width:680px;margin-left:auto;margin-right:auto}
.mainTitleZone .actionButtonRow{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.mainTitleZone .primaryActionButton{padding:16px 36px;background:#2F942A;color:#F0F0F0;text-decoration:none;border-radius:24px;font-size:17px;font-weight:600;transition:all .3s ease-out;box-shadow:0 8px 20px #2f942a4d;cursor:pointer}
.mainTitleZone .primaryActionButton:hover{background:#267a22;transform:translateY(-2px);box-shadow:0 12px 28px #2f942a66}
.mainTitleZone .secondaryActionButton{padding:16px 36px;background:#f0f0f01f;color:#F0F0F0;text-decoration:none;border-radius:24px;font-size:17px;font-weight:600;border:2px solid #f0f0f066;transition:all .3s ease-out;cursor:pointer}
.mainTitleZone .secondaryActionButton:hover{background:#f0f0f033;border-color:#f0f0f099;transform:translateY(-2px)}
.mainTitleZone .decorArrowPath{position:absolute;bottom:40px;right:10%;width:120px;height:60px;z-index:3}
.mainTitleZone .decorArrowPath svg{width:100%;height:100%;opacity:.6}
.learningDirectionArea{padding:80px 24px;background:#F0F0F0}
.learningDirectionArea .sectionInnerBox{max-width:960px;margin:0 auto}
.learningDirectionArea .sectionHeadingMain{font-size:38px;line-height:1.3;color:#112022;margin:0 0 16px;font-weight:700;position:relative;padding-left:24px}
.learningDirectionArea .sectionHeadingMain::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:48px;background:linear-gradient(180deg,#2F942A 0%,#267a22 100%);border-radius:16px}
.learningDirectionArea .sectionSubtext{font-size:18px;line-height:1.7;color:#112022c7;margin:0 0 48px 24px}
.learningDirectionArea .topicGridDisplay{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin-bottom:48px}
.learningDirectionArea .topicCardUnit{background:#fff;padding:32px 28px;border-radius:20px;box-shadow:0 6px 18px #11202214;transition:all .35s ease-out;border:1px solid #1120220f}
.learningDirectionArea .topicCardUnit:hover{transform:translateY(-6px);box-shadow:0 14px 32px #2f942a2e;border-color:#2f942a4d}
.learningDirectionArea .topicCardUnit .iconCircle{width:56px;height:56px;background:linear-gradient(135deg,#2f942a26 0%,#2f942a0d 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.learningDirectionArea .topicCardUnit .iconCircle svg{width:28px;height:28px;fill:#2F942A}
.learningDirectionArea .topicCardUnit .cardTitle{font-size:21px;line-height:1.4;color:#112022;margin:0 0 12px;font-weight:700}
.learningDirectionArea .topicCardUnit .cardDescription{font-size:16px;line-height:1.6;color:#112022b8;margin:0}
.learningDirectionArea .skillRowDisplay{display:flex;flex-direction:column;gap:20px}
.learningDirectionArea .skillItemLine{background:#fff;padding:24px 28px;border-radius:16px;display:flex;align-items:center;gap:20px;box-shadow:0 4px 12px #1120220f;transition:all .3s ease-out}
.learningDirectionArea .skillItemLine:hover{box-shadow:0 8px 20px #1120221f;transform:translateX(8px)}
.learningDirectionArea .skillItemLine .skillIconBox{width:48px;height:48px;background:#2F942A;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.learningDirectionArea .skillItemLine .skillIconBox svg{width:24px;height:24px;fill:#F0F0F0}
.learningDirectionArea .skillItemLine .skillTextBlock{flex-grow:1}
.learningDirectionArea .skillItemLine .skillNameText{font-size:18px;line-height:1.4;color:#112022;margin:0 0 4px;font-weight:600}
.learningDirectionArea .skillItemLine .skillDetailText{font-size:15px;line-height:1.5;color:#112022ad;margin:0}
.certificationDocumentSection{padding:80px 24px;background:linear-gradient(135deg,#112022 0%,#112022f2 100%);position:relative;overflow:hidden}
.certificationDocumentSection::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,#2f942a1f 0%,transparent 70%);border-radius:50%}
.certificationDocumentSection .contentWrapper{max-width:960px;margin:0 auto;position:relative;z-index:1}
.certificationDocumentSection .sectionHeader{font-size:38px;line-height:1.3;color:#F0F0F0;margin:0 0 16px;font-weight:700}
.certificationDocumentSection .sectionIntro{font-size:18px;line-height:1.7;color:#f0f0f0d9;margin:0 0 48px;max-width:720px}
.certificationDocumentSection .documentGridLayout{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.certificationDocumentSection .documentBox{background:#f0f0f014;padding:32px;border-radius:20px;border:1px solid #f0f0f01f;transition:all .35s ease-out;backdrop-filter:blur(8px)}
.certificationDocumentSection .documentBox:hover{background:#f0f0f01f;border-color:#2f942a80;transform:translateY(-4px)}
.certificationDocumentSection .documentBox .docIconHolder{width:64px;height:64px;background:#2f942a33;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.certificationDocumentSection .documentBox .docIconHolder svg{width:32px;height:32px;fill:#2F942A}
.certificationDocumentSection .documentBox .docHeading{font-size:22px;line-height:1.4;color:#F0F0F0;margin:0 0 12px;font-weight:700}
.certificationDocumentSection .documentBox .docText{font-size:16px;line-height:1.6;color:#f0f0f0c7;margin:0 0 16px}
.certificationDocumentSection .documentBox .docMetaList{list-style:none;padding:0;margin:0}
.certificationDocumentSection .documentBox .docMetaList li{font-size:15px;line-height:1.8;color:#f0f0f0b3;padding-left:24px;position:relative;margin-bottom:8px}
.certificationDocumentSection .documentBox .docMetaList li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;background:#2F942A;border-radius:50%}
.transparencyRulesArea{padding:80px 24px;background:#fff}
.transparencyRulesArea .innerContainer{max-width:960px;margin:0 auto}
.transparencyRulesArea .headingPrimary{font-size:38px;line-height:1.3;color:#112022;margin:0 0 48px;font-weight:700;text-align:center}
.transparencyRulesArea .splitLayoutBlock{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.transparencyRulesArea .imageColumnArea{position:relative}
.transparencyRulesArea .imageColumnArea img{width:100%;height:auto;border-radius:24px;box-shadow:0 12px 32px #11202229}
.transparencyRulesArea .textColumnArea{display:flex;flex-direction:column;gap:28px}
.transparencyRulesArea .ruleBlock{padding:24px;background:#F0F0F0;border-radius:16px;border-left:4px solid #2F942A;transition:all .3s ease-out}
.transparencyRulesArea .ruleBlock:hover{background:#2f942a14;transform:translateX(6px)}
.transparencyRulesArea .ruleBlock .ruleTitle{font-size:20px;line-height:1.4;color:#112022;margin:0 0 10px;font-weight:700}
.transparencyRulesArea .ruleBlock .ruleContent{font-size:16px;line-height:1.6;color:#112022c2;margin:0}
@media (max-width: 768px) {
.mainTitleZone{min-height:440px}
.mainTitleZone .mainHeadingText{font-size:36px}
.mainTitleZone .leadDescription{font-size:17px}
.mainTitleZone .actionButtonRow{flex-direction:column;align-items:stretch}
.mainTitleZone .decorArrowPath{display:none}
.learningDirectionArea{padding:60px 20px}
.learningDirectionArea .sectionHeadingMain{font-size:30px}
.learningDirectionArea .topicGridDisplay{grid-template-columns:1fr}
.certificationDocumentSection{padding:60px 20px}
.certificationDocumentSection .sectionHeader{font-size:30px}
.certificationDocumentSection .documentGridLayout{grid-template-columns:1fr;gap:24px}
.transparencyRulesArea{padding:60px 20px}
.transparencyRulesArea .headingPrimary{font-size:30px}
.transparencyRulesArea .splitLayoutBlock{grid-template-columns:1fr;gap:32px}
}
@media (max-width: 480px) {
.mainTitleZone .mainHeadingText{font-size:28px}
.mainTitleZone .contentCenterWrap{padding:40px 20px}
.learningDirectionArea .sectionHeadingMain{font-size:26px;padding-left:20px}
.learningDirectionArea .sectionSubtext{margin-left:20px}
.certificationDocumentSection .sectionHeader{font-size:26px}
.transparencyRulesArea .headingPrimary{font-size:26px}
}
.contactWrapper{max-width:960px;margin:0 auto;padding:80px 20px}
.titleArea{display:flex;flex-direction:column;gap:48px;margin-bottom:96px;align-items:center}
.titleArea .textBlock{max-width:720px;text-align:center}
.titleArea .textBlock h1{font-size:56px;line-height:1.1;color:#112022;margin:0 0 24px;font-weight:700}
.titleArea .textBlock h1 .highlight{color:#2F942A;position:relative}
.titleArea .textBlock h1 .highlight::after{content:'';position:absolute;bottom:-8px;left:0;width:100%;height:4px;background:linear-gradient(90deg,#2f942a66 0%,#2f942acc 50%,#2f942a66 100%);border-radius:20px}
.titleArea .textBlock p{font-size:18px;line-height:1.6;color:#112022bf;margin:0}
.vectorDecor{width:100%;height:120px;position:relative;background:linear-gradient(135deg,#f0f0f099 0%,#2f942a14 100%);border-radius:28px;overflow:hidden}
.vectorDecor::before{content:'';position:absolute;top:-50%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,#2f942a26 0%,transparent 70%);border-radius:50%}
.vectorDecor::after{content:'';position:absolute;bottom:-30%;left:-5%;width:300px;height:300px;background:radial-gradient(circle,#11202214 0%,transparent 60%);border-radius:50%}
.mainContentArea{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contactInfoSection{background:linear-gradient(145deg,#F0F0F0 0%,#f0f0f066 100%);padding:56px 48px;border-radius:24px;box-shadow:0 8px 24px #1120220f}
.contactInfoSection h2{font-size:32px;color:#112022;margin:0 0 32px;font-weight:700;position:relative;padding-bottom:16px}
.contactInfoSection h2::before{content:'';position:absolute;bottom:0;left:0;width:60px;height:3px;background:#2F942A;border-radius:16px}
.infoList{display:flex;flex-direction:column;gap:28px}
.infoItem{display:flex;flex-direction:column;gap:8px}
.infoItem .label{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:#11202280;font-weight:600}
.infoItem .valueData{font-size:18px;color:#112022;line-height:1.5}
.infoItem .valueData a{color:#112022;text-decoration:none;transition:color .3s ease-out}
.infoItem .valueData a:hover{color:#2F942A}
.formSection{background:#fff;padding:56px 48px;border-radius:24px;box-shadow:0 12px 32px #11202214;border:2px solid #2f942a1f}
.formSection h2{font-size:32px;color:#112022;margin:0 0 12px;font-weight:700}
.formSection .subtext{font-size:16px;color:#112022a6;margin:0 0 40px;line-height:1.5}
.contactForm{display:flex;flex-direction:column;gap:24px}
.fieldGroup{display:flex;flex-direction:column;gap:10px}
.fieldGroup label{font-size:14px;color:#112022;font-weight:600;letter-spacing:.3px}
.fieldGroup label .required{color:#2F942A}
.fieldGroup input[type="text"],.fieldGroup input[type="tel"],.fieldGroup input[type="email"]{padding:16px 20px;font-size:16px;border:2px solid #11202226;border-radius:16px;background:#F0F0F0;color:#112022;transition:all .3s ease-out}
.fieldGroup input:focus{outline:none;border-color:#2F942A;background:#fff;box-shadow:0 4px 16px #2f942a1f}
.optionsGroup{display:flex;flex-direction:column;gap:10px}
.optionsGroup .optionLabel{font-size:14px;color:#112022;font-weight:600;margin-bottom:8px}
.radioWrapper{display:flex;flex-direction:column;gap:12px}
.radioOption{display:flex;align-items:center;gap:12px;padding:14px 20px;background:#F0F0F0;border-radius:16px;cursor:pointer;transition:all .3s ease-out;border:2px solid transparent}
.radioOption:hover{background:#2f942a14;border-color:#2f942a4d}
.radioOption input[type="radio"]{width:20px;height:20px;cursor:pointer;accent-color:#2F942A}
.radioOption input[type="radio"]:checked + .radioText{color:#2F942A;font-weight:600}
.radioText{font-size:16px;color:#112022;transition:all .3s ease-out}
.checkboxWrapper{display:flex;align-items:start;gap:12px;padding:20px;background:#f0f0f080;border-radius:16px;margin-top:8px}
.checkboxWrapper input[type="checkbox"]{width:20px;height:20px;margin-top:2px;cursor:pointer;accent-color:#2F942A}
.checkboxWrapper label{font-size:14px;color:#112022bf;line-height:1.6;cursor:pointer}
.checkboxWrapper label a{color:#2F942A;text-decoration:none;font-weight:600;transition:color .3s ease-out}
.checkboxWrapper label a:hover{color:#112022}
.submitButton{padding:18px 48px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,#2F942A 0%,#247A21 100%);border:none;border-radius:20px;cursor:pointer;transition:all .3s ease-out;box-shadow:0 6px 20px #2f942a4d;text-transform:uppercase;letter-spacing:1px;margin-top:12px}
.submitButton:hover{transform:translateY(-2px);box-shadow:0 10px 28px #2f942a66}
.submitButton:active{transform:translateY(0)}
@media (max-width: 768px) {
.contactWrapper{padding:48px 16px}
.titleArea{margin-bottom:64px;gap:32px}
.titleArea .textBlock h1{font-size:36px;margin-bottom:16px}
.titleArea .textBlock p{font-size:16px}
.vectorDecor{height:80px}
.mainContentArea{grid-template-columns:1fr;gap:48px}
.contactInfoSection,.formSection{padding:40px 28px}
.contactInfoSection h2,.formSection h2{font-size:26px}
.infoItem .valueData{font-size:16px}
.submitButton{width:100%}
}
@media (max-width: 480px) {
.titleArea .textBlock h1{font-size:28px}
.contactInfoSection,.formSection{padding:32px 20px}
.radioOption{padding:12px 16px}
.checkboxWrapper{padding:16px}
}
.pageIntro{max-width:960px;margin:0 auto;padding:80px 20px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.pageIntro .textArea{position:relative}
.pageIntro .textArea::before{content:'';position:absolute;left:-30px;top:0;width:4px;height:80px;background:linear-gradient(to bottom,#2F942A,#2f942a4d);border-radius:20px}
.pageIntro .primaryHead{font-size:48px;font-weight:700;color:#112022;margin:0 0 16px;line-height:1.2}
.pageIntro .secondaryHead{font-size:24px;font-weight:400;color:#2F942A;margin:0 0 24px;line-height:1.4}
.pageIntro .description{font-size:17px;line-height:1.7;color:#112022;margin:0}
.pageIntro .visualWrapper{position:relative}
.pageIntro .visualWrapper::before{content:'';position:absolute;top:-20px;left:-20px;right:20px;bottom:20px;background:linear-gradient(135deg,#2f942a1a,#f0f0f04d);border-radius:24px;z-index:1}
.pageIntro .mainVisual{position:relative;z-index:2;width:100%;height:400px;object-fit:cover;border-radius:24px;box-shadow:0 12px 24px #11202226}
.originStory{background:linear-gradient(180deg,#F0F0F0 0%,#f0f0f080 100%);padding:90px 20px}
.originStory .contentWrap{max-width:960px;margin:0 auto}
.originStory .sectionLabel{font-size:36px;font-weight:700;color:#112022;margin:0 0 50px;text-align:center;position:relative;display:inline-block;width:100%}
.originStory .sectionLabel::after{content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:80px;height:3px;background:#2F942A;border-radius:20px}
.originStory .timelineGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:60px}
.originStory .milestoneCard{background:#fffc;padding:32px;border-radius:20px;position:relative;box-shadow:0 6px 16px #11202214;transition:transform .3s ease-out,box-shadow .3s ease-out}
.originStory .milestoneCard:hover{transform:translateY(-8px);box-shadow:0 12px 28px #2f942a33}
.originStory .milestoneCard::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(to right,#2F942A,#112022);border-radius:20px 20px 0 0}
.originStory .yearMarker{font-size:42px;font-weight:700;color:#2F942A;margin:0 0 16px;line-height:1}
.originStory .eventTitle{font-size:20px;font-weight:600;color:#112022;margin:0 0 12px;line-height:1.3}
.originStory .eventDetail{font-size:16px;line-height:1.6;color:#112022;margin:0}
.approachSection{padding:90px 20px;background:#fff}
.approachSection .innerBox{max-width:960px;margin:0 auto}
.approachSection .topHeader{font-size:36px;font-weight:700;color:#112022;margin:0 0 20px;text-align:center}
.approachSection .subtitle{font-size:18px;line-height:1.6;color:#112022;margin:0 0 60px;text-align:center;max-width:700px;margin-left:auto;margin-right:auto}
.approachSection .splitLayout{display:grid;grid-template-columns:380px 1fr;gap:50px;align-items:start}
.approachSection .imageDisplay{width:100%;height:480px;object-fit:cover;border-radius:24px;box-shadow:0 10px 20px #1120221f}
.approachSection .principleList{display:flex;flex-direction:column;gap:28px}
.approachSection .principleItem{background:linear-gradient(135deg,#f0f0f099,#2f942a0d);padding:28px;border-radius:20px;border-left:5px solid #2F942A;transition:transform .3s ease-out,border-color .3s ease-out}
.approachSection .principleItem:hover{transform:translateX(8px);border-color:#112022}
.approachSection .principleItem .itemHeader{font-size:22px;font-weight:600;color:#112022;margin:0 0 10px;display:flex;align-items:center;gap:12px}
.approachSection .principleItem .itemHeader::before{content:'';width:10px;height:10px;background:#2F942A;border-radius:50%;flex-shrink:0}
.approachSection .principleItem .itemText{font-size:16px;line-height:1.6;color:#112022;margin:0}
.valueDisplay{background:linear-gradient(to bottom,#11202208,#2f942a08);padding:90px 20px;position:relative;overflow:hidden}
.valueDisplay::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(45deg,transparent 48%,#2f942a08 49%,#2f942a08 51%,transparent 52%),linear-gradient(-45deg,transparent 48%,#11202205 49%,#11202205 51%,transparent 52%);background-size:80px 80px;z-index:1}
.valueDisplay .contentContainer{max-width:960px;margin:0 auto;position:relative;z-index:2}
.valueDisplay .mainTitle{font-size:36px;font-weight:700;color:#112022;margin:0 0 70px;text-align:center}
.valueDisplay .asymmetricGrid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.valueDisplay .largeFeature{grid-column:1 / -1;background:#fff;padding:40px;border-radius:24px;display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:center;box-shadow:0 8px 20px #1120221a}
.valueDisplay .largeFeature .featureVisual{width:100%;height:280px;object-fit:cover;border-radius:20px}
.valueDisplay .largeFeature .featureContent{padding:20px 0}
.valueDisplay .largeFeature .featureHead{font-size:28px;font-weight:700;color:#112022;margin:0 0 16px;line-height:1.3}
.valueDisplay .largeFeature .featureHead::before{content:'';display:inline-block;width:40px;height:4px;background:#2F942A;border-radius:20px;margin-right:12px;vertical-align:middle}
.valueDisplay .largeFeature .featureBody{font-size:16px;line-height:1.7;color:#112022;margin:0}
.valueDisplay .standardBox{background:#fff;padding:36px;border-radius:24px;box-shadow:0 6px 16px #11202214;transition:transform .3s ease-out,box-shadow .3s ease-out;position:relative;overflow:hidden}
.valueDisplay .standardBox::after{content:'';position:absolute;bottom:0;right:0;width:100px;height:100px;background:radial-gradient(circle,#2f942a1a,transparent);border-radius:50%;transform:translate(40px,40px)}
.valueDisplay .standardBox:hover{transform:translateY(-6px);box-shadow:0 12px 28px #2f942a26}
.valueDisplay .standardBox .boxLabel{font-size:22px;font-weight:600;color:#112022;margin:0 0 14px;position:relative;z-index:1}
.valueDisplay .standardBox .boxDescription{font-size:16px;line-height:1.6;color:#112022;margin:0;position:relative;z-index:1}
.valueDisplay .featuredPicture{grid-column:1 / -1;width:100%;height:400px;object-fit:cover;border-radius:24px;box-shadow:0 10px 24px #1120221f}
@media (max-width: 768px) {
.pageIntro{grid-template-columns:1fr;gap:40px;padding:60px 20px}
.pageIntro .textArea::before{left:0;width:60px;height:4px;top:-20px}
.pageIntro .primaryHead{font-size:36px}
.pageIntro .secondaryHead{font-size:20px}
.pageIntro .mainVisual{height:300px}
.originStory .timelineGrid{grid-template-columns:1fr;gap:30px}
.approachSection .splitLayout{grid-template-columns:1fr;gap:40px}
.approachSection .imageDisplay{height:320px}
.valueDisplay .asymmetricGrid{grid-template-columns:1fr}
.valueDisplay .largeFeature{grid-template-columns:1fr;padding:30px}
.valueDisplay .largeFeature .featureVisual{height:240px}
.valueDisplay .featuredPicture{height:280px}
}
@media (max-width: 480px) {
.pageIntro .primaryHead{font-size:28px}
.pageIntro .secondaryHead{font-size:18px}
.originStory .sectionLabel,.approachSection .topHeader,.valueDisplay .mainTitle{font-size:28px}
.originStory .yearMarker{font-size:32px}
.valueDisplay .standardBox{padding:28px}
}
.titleStats{position:relative;background:linear-gradient(135deg,#112022eb,#2f942ae0),url(./graphics_gallery/project-2023-014.jpg);background-size:cover;background-position:center;padding:140px 30px 120px;text-align:center;overflow:hidden}
.titleStats::before{content:'';position:absolute;top:0;left:-50%;width:200%;height:100%;background:repeating-linear-gradient(45deg,transparent,transparent 40px,#f0f0f00a 40px,#f0f0f00a 80px);pointer-events:none}
.titleStats .titleContent{max-width:960px;margin:0 auto;position:relative;z-index:2}
.titleStats .mainHeading{font-size:3.2em;color:#F0F0F0;margin:0 0 20px;font-weight:700;letter-spacing:-.5px}
.titleStats .taglineText{font-size:1.3em;color:#F0F0F0;margin:0 0 40px;opacity:.95;line-height:1.6}
.titleStats .actionButtons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.titleStats .primaryAction{padding:16px 42px;background:#2F942A;color:#F0F0F0;text-decoration:none;border-radius:24px;font-size:1.1em;font-weight:600;transition:all .3s ease-out;box-shadow:0 8px 20px #2f942a4d}
.titleStats .primaryAction:hover{background:#267021;transform:translateY(-3px);box-shadow:0 12px 28px #2f942a66}
.titleStats .secondaryAction{padding:16px 42px;background:transparent;color:#F0F0F0;text-decoration:none;border:2px solid #F0F0F0;border-radius:24px;font-size:1.1em;font-weight:600;transition:all .3s ease-out}
.titleStats .secondaryAction:hover{background:#f0f0f01a;transform:translateY(-3px)}
.metricsOverview{padding:80px 30px;background:#F0F0F0}
.metricsOverview .contentWrapper{max-width:960px;margin:0 auto}
.metricsOverview .sectionHeader{text-align:center;margin-bottom:60px}
.metricsOverview .sectionHeader h2{font-size:2.4em;color:#112022;margin:0 0 16px;font-weight:700}
.metricsOverview .sectionHeader p{font-size:1.15em;color:#112022;opacity:.75;margin:0;line-height:1.6}
.metricsOverview .statsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.metricsOverview .statCard{background:#fff;padding:40px 30px;border-radius:20px;text-align:center;box-shadow:0 6px 16px #11202214;transition:all .3s ease-out;border:2px solid transparent}
.metricsOverview .statCard:hover{transform:translateY(-6px);box-shadow:0 12px 24px #2f942a26;border-color:#2F942A}
.metricsOverview .statCard .numberDisplay{font-size:3em;color:#2F942A;font-weight:700;margin:0 0 12px;line-height:1}
.metricsOverview .statCard .labelText{font-size:1.1em;color:#112022;margin:0;font-weight:600}
.metricsOverview .statCard .descriptionText{font-size:.95em;color:#112022;opacity:.65;margin:8px 0 0;line-height:1.5}
.progressTracking{padding:90px 30px;background:linear-gradient(135deg,#112022 0%,#112022f2 100%);position:relative}
.progressTracking::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2F942A,#267021,#2F942A)}
.progressTracking .contentWrapper{max-width:960px;margin:0 auto}
.progressTracking .headerSection{margin-bottom:50px}
.progressTracking .headerSection h2{font-size:2.6em;color:#F0F0F0;margin:0 0 18px;font-weight:700}
.progressTracking .headerSection p{font-size:1.15em;color:#F0F0F0;opacity:.85;margin:0;max-width:700px;line-height:1.7}
.progressTracking .milestonesContainer{display:flex;flex-direction:column;gap:24px}
.progressTracking .milestoneItem{background:#f0f0f00f;padding:32px 36px;border-radius:18px;border-left:5px solid #2F942A;transition:all .3s ease-out}
.progressTracking .milestoneItem:hover{background:#f0f0f01a;border-left-width:8px;padding-left:33px}
.progressTracking .milestoneItem .milestoneHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.progressTracking .milestoneItem .milestoneName{font-size:1.5em;color:#F0F0F0;font-weight:600;margin:0}
.progressTracking .milestoneItem .percentageValue{font-size:1.8em;color:#2F942A;font-weight:700}
.progressTracking .milestoneItem .milestoneDescription{font-size:1.05em;color:#F0F0F0;opacity:.8;margin:0 0 20px;line-height:1.6}
.progressTracking .milestoneItem .progressBar{height:12px;background:#f0f0f026;border-radius:20px;overflow:hidden;position:relative}
.progressTracking .milestoneItem .progressFill{height:100%;background:linear-gradient(90deg,#2F942A,#267021);border-radius:20px;transition:width .6s ease-out}
.progressTracking .milestoneItem[data-progress="87"] .progressFill{width:87%}
.progressTracking .milestoneItem[data-progress="92"] .progressFill{width:92%}
.progressTracking .milestoneItem[data-progress="78"] .progressFill{width:78%}
.progressTracking .milestoneItem[data-progress="95"] .progressFill{width:95%}
.comparisonAnalysis{padding:85px 30px;background:#fff}
.comparisonAnalysis .contentWrapper{max-width:960px;margin:0 auto}
.comparisonAnalysis .sectionIntro{text-align:center;margin-bottom:55px}
.comparisonAnalysis .sectionIntro h2{font-size:2.5em;color:#112022;margin:0 0 20px;font-weight:700}
.comparisonAnalysis .sectionIntro p{font-size:1.15em;color:#112022;opacity:.7;margin:0;line-height:1.6}
.comparisonAnalysis .comparisonGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.comparisonAnalysis .featureCard{background:#F0F0F0;padding:36px 28px;border-radius:22px;transition:all .3s ease-out;position:relative}
.comparisonAnalysis .featureCard::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:#2F942A;border-radius:22px 22px 0 0;transform:scaleX(0);transition:transform .3s ease-out}
.comparisonAnalysis .featureCard:hover::before{transform:scaleX(1)}
.comparisonAnalysis .featureCard:hover{background:linear-gradient(135deg,#2f942a14,#2f942a0a);transform:translateY(-5px);box-shadow:0 10px 22px #1120221f}
.comparisonAnalysis .featureCard .featureTitle{font-size:1.4em;color:#112022;margin:0 0 14px;font-weight:600}
.comparisonAnalysis .featureCard .featureValue{font-size:2.2em;color:#2F942A;margin:0 0 10px;font-weight:700}
.comparisonAnalysis .featureCard .featureContext{font-size:1em;color:#112022;opacity:.65;margin:0;line-height:1.5}
.actionCallout{padding:100px 30px;background:linear-gradient(120deg,#112022f5,#2f942aeb);text-align:center;position:relative;overflow:hidden}
.actionCallout::before{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,#2f942a33,transparent);border-radius:50%;top:-200px;right:-100px;pointer-events:none}
.actionCallout::after{content:'';position:absolute;width:350px;height:350px;background:radial-gradient(circle,#f0f0f01a,transparent);border-radius:50%;bottom:-150px;left:-80px;pointer-events:none}
.actionCallout .calloutContent{max-width:960px;margin:0 auto;position:relative;z-index:2}
.actionCallout .calloutHeading{font-size:2.8em;color:#F0F0F0;margin:0 0 24px;font-weight:700;letter-spacing:-.3px}
.actionCallout .calloutDescription{font-size:1.25em;color:#F0F0F0;margin:0 0 45px;opacity:.9;line-height:1.7;max-width:720px;margin-left:auto;margin-right:auto}
.actionCallout .ctaButtonWrapper{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.actionCallout .primaryCta{padding:18px 48px;background:#F0F0F0;color:#112022;text-decoration:none;border-radius:28px;font-size:1.15em;font-weight:700;transition:all .3s ease-out;box-shadow:0 10px 24px #0003}
.actionCallout .primaryCta:hover{background:#fff;transform:translateY(-4px);box-shadow:0 14px 32px #0000004d}
.actionCallout .secondaryCta{padding:18px 48px;background:transparent;color:#F0F0F0;text-decoration:none;border:2px solid #F0F0F0;border-radius:28px;font-size:1.15em;font-weight:700;transition:all .3s ease-out}
.actionCallout .secondaryCta:hover{background:#f0f0f026;border-color:#fff;color:#fff;transform:translateY(-4px)}
@media (max-width: 768px) {
.titleStats{padding:100px 20px 80px}
.titleStats .mainHeading{font-size:2.2em}
.titleStats .taglineText{font-size:1.1em}
.titleStats .actionButtons{flex-direction:column;align-items:stretch}
.metricsOverview{padding:60px 20px}
.metricsOverview .sectionHeader h2{font-size:1.9em}
.metricsOverview .statsGrid{grid-template-columns:1fr}
.progressTracking{padding:60px 20px}
.progressTracking .headerSection h2{font-size:2em}
.progressTracking .milestoneItem{padding:24px 20px}
.progressTracking .milestoneItem .milestoneHeader{flex-direction:column;align-items:flex-start}
.comparisonAnalysis{padding:60px 20px}
.comparisonAnalysis .sectionIntro h2{font-size:2em}
.comparisonAnalysis .comparisonGrid{grid-template-columns:1fr}
.actionCallout{padding:70px 20px}
.actionCallout .calloutHeading{font-size:2.2em}
.actionCallout .ctaButtonWrapper{flex-direction:column;align-items:stretch}
}
.successHero{background:linear-gradient(135deg,#112022eb 0%,#2f942ad9 100%),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.05"/></svg>');background-size:cover;background-position:center;min-height:480px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.successHero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,#2f942a26 0%,transparent 60%);backdrop-filter:blur(80px)}
.heroContentWrapper{max-width:720px;margin:0 auto;padding:60px 24px;text-align:center;position:relative;z-index:2}
.heroContentWrapper::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140%;height:140%;background:#f0f0f00f;backdrop-filter:blur(24px);border-radius:32px;z-index:-1;border:1px solid #f0f0f01f}
.successIconWrapper{margin:0 auto 32px;width:96px;height:96px;background:linear-gradient(135deg,#2F942A 0%,#2f942ab3 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px #2f942a4d 0 4px 12px #11202233;position:relative}
.successIconWrapper::after{content:'';position:absolute;width:120%;height:120%;border:2px solid #2f942a4d;border-radius:50%;animation:pulseRing 2.5s ease-out infinite}
@keyframes pulseRing {
0%{transform:scale(1);opacity:1}
100%{transform:scale(1.4);opacity:0}
}
.successIconWrapper svg{width:48px;height:48px;fill:#F0F0F0}
.heroContentWrapper h1{font-size:42px;line-height:1.2;color:#F0F0F0;margin:0 0 20px;font-weight:700;text-shadow:0 2px 12px #11202266}
.heroContentWrapper p{font-size:19px;line-height:1.6;color:#f0f0f0eb;margin:0 0 36px;max-width:580px;margin-left:auto;margin-right:auto}
.confirmationDetails{background:#f0f0f014;backdrop-filter:blur(16px);border-radius:24px;padding:28px 32px;border:1px solid #f0f0f026;margin:0 0 40px}
.confirmationDetails p{font-size:16px;line-height:1.5;color:#f0f0f0e0;margin:0}
.confirmationDetails p strong{color:#2F942A;font-weight:600}
.actionButtonGroup{display:flex;flex-direction:row;gap:16px;justify-content:center;align-items:center}
.actionButtonGroup a{padding:16px 36px;border-radius:24px;font-size:17px;font-weight:600;text-decoration:none;transition:all .3s ease-out;display:inline-block;cursor:pointer}
.primaryActionBtn{background:#2F942A;color:#F0F0F0;box-shadow:0 8px 20px #2f942a59}
.primaryActionBtn:hover{transform:translateY(-3px);box-shadow:0 12px 28px #2f942a73;background:#268023}
.secondaryActionBtn{background:#f0f0f01f;color:#F0F0F0;border:2px solid #f0f0f040}
.secondaryActionBtn:hover{background:#f0f0f033;border-color:#f0f0f066;transform:translateY(-2px)}
.infoCardsSection{max-width:960px;margin:0 auto;padding:80px 24px}
.cardsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.infoCardItem{background:#F0F0F0;border-radius:28px;padding:36px 28px;box-shadow:0 6px 24px #11202214;position:relative;overflow:hidden;transition:all .35s ease-out}
.infoCardItem::before{content:'';position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,#2F942A 0%,#268023 100%);transform:scaleX(0);transform-origin:left;transition:transform .4s ease-out}
.infoCardItem:hover::before{transform:scaleX(1)}
.infoCardItem:hover{transform:translateY(-6px);box-shadow:0 16px 40px #1120221f}
.cardIconHolder{width:64px;height:64px;background:linear-gradient(135deg,#2f942a1f 0%,#2f942a0f 100%);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 0 24px}
.cardIconHolder svg{width:32px;height:32px;fill:#2F942A}
.infoCardItem h3{font-size:22px;line-height:1.3;color:#112022;margin:0 0 14px;font-weight:700}
.infoCardItem p{font-size:16px;line-height:1.6;color:#112022c7;margin:0}
@media (max-width: 768px) {
.successHero{min-height:420px}
.heroContentWrapper{padding:48px 20px}
.heroContentWrapper h1{font-size:32px}
.heroContentWrapper p{font-size:17px}
.actionButtonGroup{flex-direction:column}
.actionButtonGroup a{width:100%;max-width:320px}
.infoCardsSection{padding:60px 20px}
.cardsGrid{grid-template-columns:1fr}
}
@media (max-width: 480px) {
.successIconWrapper{width:80px;height:80px}
.successIconWrapper svg{width:40px;height:40px}
.heroContentWrapper h1{font-size:28px}
.confirmationDetails{padding:24px 20px}
}