@import "https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@latest/700.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/montserrat@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/montserrat@latest/700.css";
*{margin:0;padding:0;box-sizing:border-box}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}
figure,blockquote{margin:0}
body{font-family:'Montserrat',sans-serif;line-height:1.6;color:#2a2a2a;background:#fafafa}
.hdrWrap{background:linear-gradient(135deg,#46089A 0%,#0AC5FF 100%);padding:0;position:relative}
.hdrTop{background:#ffffff26;padding:15px 0;border-bottom:1px solid #fff3}
.topContainer{max-width:1000px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.logoBox{display:flex;align-items:center;gap:15px}
.logoImg{width:85px;height:85px;background:#FFF;border-radius:8px;padding:8px;box-shadow:0 4px 12px #00000026}
.logoImg img{width:100%;height:100%;object-fit:contain}
.connector{width:2px;height:40px;background:linear-gradient(to bottom,#fff9,#fff3)}
.companyInfo{display:flex;flex-direction:column;gap:5px}
.companyName{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:700;color:#FFF;text-shadow:0 2px 8px #0003}
.tagline{font-size:13px;color:#ffffffe6;font-weight:400}
.navArea{background:#ffffff1a;padding:0}
.navContainer{max-width:1000px;margin:0 auto;padding:0 20px}
.mainNav{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.mainNav a{padding:16px 24px;color:#FFF;text-decoration:none;font-weight:500;font-size:15px;transition:background .2s ease;border-radius:6px}
.mainNav a:hover{background:#fff3}
.ftrWrap{background:linear-gradient(180deg,#f0f0f0 0%,#e5e5e5 100%);padding:50px 0 30px;margin-top:80px;border-top:3px solid #46089A}
.ftrContainer{max-width:1000px;margin:0 auto;padding:0 20px}
.contactCard{background:#FFF;padding:35px;border-radius:10px;box-shadow:0 8px 24px #46089a1f;margin-bottom:40px}
.contactTitle{font-size:22px;color:#46089A;margin-bottom:25px;font-family:'IBM Plex Mono',monospace}
.contactGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:25px}
.contactItem{display:flex;flex-direction:column;gap:6px}
.contactLabel{font-size:12px;color:#666;text-transform:uppercase;letter-spacing:.5px}
.contactValue{font-size:15px;color:#2a2a2a}
.contactValue a{color:#0AC5FF;text-decoration:none}
.contactValue a:hover{text-decoration:underline}
.messagingRow{display:flex;gap:15px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid #e5e5e5}
.msgBtn{padding:10px 20px;background:linear-gradient(135deg,#46089A,#0AC5FF);color:#FFF;text-decoration:none;border-radius:6px;font-size:14px;font-weight:500;transition:opacity .2s ease}
.msgBtn:hover{opacity:.9}
.ftrNav{display:flex;justify-content:center;gap:30px;margin-bottom:25px;flex-wrap:wrap}
.ftrNav a{color:#46089A;text-decoration:none;font-size:14px}
.ftrNav a:hover{text-decoration:underline}
.copyright{text-align:center;color:#666;font-size:13px}
.cookiePopup{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-120%);background:#FFF;border-radius:10px;box-shadow:0 12px 32px #00000040;max-width:520px;width:calc(100% - 40px);z-index:9999;transition:transform .4s ease;border:2px solid #46089A}
.cookiePopup[data-visible="true"]{transform:translateX(-50%) translateY(0)}
.cookieHdr{padding:20px 25px 15px;border-bottom:1px solid #e5e5e5}
.cookieTitle{font-size:18px;color:#46089A;font-family:'IBM Plex Mono',monospace;margin-bottom:5px}
.policyLink{font-size:13px;color:#0AC5FF;text-decoration:none}
.policyLink:hover{text-decoration:underline}
.cookieBody{padding:20px 25px}
.consentOptions{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.consentRow{display:flex;align-items:center;justify-content:space-between;padding:10px;background:#f9f9f9;border-radius:6px}
.consentLabel{font-size:14px;color:#2a2a2a}
.toggleSwitch{position:relative;width:48px;height:24px}
.toggleSwitch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;transition:.3s;border-radius:24px}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%}
.toggleSwitch input:checked + .slider{background:#0AC5FF}
.toggleSwitch input:checked + .slider:before{transform:translateX(24px)}
.actionRow{display:flex;gap:15px;justify-content:flex-end}
.cookieBtn{padding:10px 24px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:opacity .2s ease}
.cookieBtn:hover{opacity:.9}
.acceptBtn{background:linear-gradient(135deg,#46089A,#0AC5FF);color:#FFF}
.declineBtn{background:#e5e5e5;color:#2a2a2a}
.settingsBadge{position:fixed;bottom:20px;right:20px;width:50px;height:50px;background:#46089A;border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #46089a4d;z-index:9998}
.settingsBadge[data-active="true"]{display:flex}
.settingsBadge:before{content:"⚙";font-size:24px;color:#FFF}
@media (max-width: 768px) {
.topContainer{flex-direction:column;gap:15px}
.connector{width:40px;height:2px;background:linear-gradient(to right,#fff9,#fff3)}
.companyName{font-size:20px;text-align:center}
.tagline{text-align:center}
.mainNav{flex-direction:column;gap:0}
.mainNav a{text-align:center;padding:14px 20px}
.contactGrid{grid-template-columns:1fr}
.messagingRow{flex-direction:column}
.msgBtn{text-align:center}
}
.legal-info{max-width:1000px;margin:0 auto;padding:3rem 1.5rem;background:#FFF}
.legal-info h1{font-size:2.5rem;line-height:1.2;color:#46089A;margin-bottom:1.5rem;margin-top:0;font-weight:700}
.legal-info h2{font-size:2rem;line-height:1.3;color:#46089A;margin-top:3rem;margin-bottom:1.25rem;font-weight:600}
.legal-info h3{font-size:1.5rem;line-height:1.4;color:#2d0659;margin-top:2.5rem;margin-bottom:1rem;font-weight:600}
.legal-info h4{font-size:1.25rem;line-height:1.4;color:#2d0659;margin-top:2rem;margin-bottom:.875rem;font-weight:600}
.legal-info h5{font-size:1.125rem;line-height:1.5;color:#46089A;margin-top:1.75rem;margin-bottom:.75rem;font-weight:600}
.legal-info h6{font-size:1rem;line-height:1.5;color:#2d0659;margin-top:1.5rem;margin-bottom:.625rem;font-weight:600}
.legal-info p{font-size:1rem;line-height:1.75;color:#2c3e50;margin-bottom:1.25rem}
.legal-info ul{margin-bottom:1.5rem;padding-left:2rem}
.legal-info ol{margin-bottom:1.5rem;padding-left:2rem}
.legal-info li{font-size:1rem;line-height:1.75;color:#2c3e50;margin-bottom:.625rem}
.legal-info em,.legal-info i{font-style:italic;color:#34495e}
.legal-info strong,.legal-info b{font-weight:600;color:#2d0659}
.legal-info a{color:#0AC5FF;text-decoration:none;border-bottom:1px solid #0ac5ff4d;transition:all .3s ease}
.legal-info a:hover{color:#46089A;border-bottom-color:#46089A}
.legal-info a:focus{outline:2px solid #0AC5FF;outline-offset:2px;border-radius:2px}
.legal-info table{width:100%;border-collapse:collapse;margin:2rem 0;background:#FFF;box-shadow:0 4px 16px #46089a14;border-radius:8px;overflow:hidden}
.legal-info thead{background:linear-gradient(135deg,#46089A,#0AC5FF)}
.legal-info thead tr{border:none}
.legal-info thead th{padding:1rem 1.25rem;text-align:left;font-weight:600;font-size:.9375rem;color:#FFF;text-transform:uppercase;letter-spacing:.5px}
.legal-info tbody tr{border-bottom:1px solid #46089a1a;transition:background-color .2s ease}
.legal-info tbody tr:last-child{border-bottom:none}
.legal-info tbody tr:hover{background-color:#0ac5ff0d}
.legal-info tbody td{padding:1rem 1.25rem;color:#2c3e50;font-size:.9375rem;line-height:1.6}
.legal-info tbody th{padding:1rem 1.25rem;text-align:left;font-weight:600;color:#46089A;background-color:#46089a08}
.legal-info hr{border:none;height:2px;background:linear-gradient(90deg,#46089a1a,#0ac5ff4d,#46089a1a);margin:3rem 0;border-radius:2px}
@media (max-width: 768px) {
.legal-info{padding:2rem 1rem}
.legal-info h1{font-size:2rem}
.legal-info h2{font-size:1.625rem;margin-top:2.5rem}
.legal-info h3{font-size:1.375rem;margin-top:2rem}
.legal-info h4{font-size:1.125rem}
.legal-info table{font-size:.875rem}
.legal-info thead th,.legal-info tbody td,.legal-info tbody th{padding:.75rem .875rem;font-size:.875rem}
.legal-info ul,.legal-info ol{padding-left:1.5rem}
}
@media (max-width: 480px) {
.legal-info{padding:1.5rem .875rem}
.legal-info h1{font-size:1.75rem}
.legal-info h2{font-size:1.5rem;margin-top:2rem}
.legal-info h3{font-size:1.25rem}
.legal-info table{display:block;overflow-x:auto;white-space:nowrap}
.legal-info thead th,.legal-info tbody td,.legal-info tbody th{padding:.625rem .75rem}
}
.heroWrap{max-width:1000px;margin:0 auto;padding:60px 20px;display:grid;grid-template-columns:1fr 380px;gap:50px;align-items:center}
.heroTxt h1{font-size:2.6rem;line-height:1.2;margin:0 0 20px;color:#46089A}
.heroTxt p{font-size:1.1rem;line-height:1.6;color:#333;margin:0 0 30px}
.heroBtn{display:inline-block;padding:14px 32px;background:linear-gradient(135deg,#46089A,#0AC5FF);color:#FFF;text-decoration:none;border-radius:8px;font-weight:600;transition:transform 0.3s,box-shadow .3s;box-shadow:0 4px 12px #46089a33}
.heroBtn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #46089a4d}
.heroImgBox{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 12px 28px #0ac5ff26;animation:float 6s ease-in-out infinite}
.heroImgBox img{width:100%;height:420px;object-fit:cover;display:block}
.heroImgBox::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,#0ac5ff1a,transparent);animation:shimmer 4s infinite}
@keyframes float {
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}
@keyframes shimmer {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.supportSec{background:linear-gradient(180deg,#f8f9ff 0%,#fff 100%);padding:70px 20px}
.supportInner{max-width:1000px;margin:0 auto}
.supportInner h2{font-size:2.2rem;color:#46089A;margin:0 0 16px;text-align:center}
.supportInner .subline{font-size:1.05rem;color:#555;text-align:center;margin:0 0 50px;line-height:1.5}
.stageGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.stageCard{background:#fff;padding:32px 24px;border-radius:10px;box-shadow:0 6px 16px #46089a14;border-left:4px solid #0AC5FF;transition:transform 0.3s,box-shadow .3s;position:relative}
.stageCard:hover{transform:translateY(-4px);box-shadow:0 12px 24px #46089a26}
.stageCard::before{content:attr(data-num);position:absolute;top:20px;right:20px;font-size:3rem;font-weight:700;color:#0ac5ff1f;line-height:1}
.stageCard h3{font-size:1.35rem;color:#46089A;margin:0 0 12px}
.stageCard p{font-size:.95rem;color:#666;line-height:1.6;margin:0}
.optionsSec{padding:70px 20px}
.optionsInner{max-width:1000px;margin:0 auto}
.optionsInner h2{font-size:2.2rem;color:#46089A;margin:0 0 50px;text-align:center}
.tabsWrap{display:flex;flex-direction:column}
.tabsWrap input[type="radio"]{display:none}
.tabNav{display:flex;gap:12px;margin-bottom:40px;justify-content:center}
.tabNav label{padding:12px 28px;background:#f0f0f0;color:#666;border-radius:8px;cursor:pointer;transition:background 0.3s,color .3s;font-weight:600;font-size:.95rem}
.tabsWrap input[type="radio"]:checked + label{background:linear-gradient(135deg,#46089A,#0AC5FF);color:#FFF;box-shadow:0 4px 12px #46089a40}
.tabPanel{display:none;animation:fadeIn .5s}
.tabsWrap input#tab1:checked ~ .tabPanel[data-tab="1"],.tabsWrap input#tab2:checked ~ .tabPanel[data-tab="2"],.tabsWrap input#tab3:checked ~ .tabPanel[data-tab="3"]{display:block}
@keyframes fadeIn {
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
.panelContent{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.panelTxt h3{font-size:1.8rem;color:#46089A;margin:0 0 16px}
.panelTxt p{font-size:1rem;color:#555;line-height:1.7;margin:0 0 14px}
.panelTxt ul{list-style:none;padding:0;margin:0 0 24px}
.panelTxt ul li{padding:8px 0 8px 28px;position:relative;color:#444;font-size:.95rem}
.panelTxt ul li::before{content:'';position:absolute;left:0;top:14px;width:16px;height:16px;background:linear-gradient(135deg,#0AC5FF,#46089A);border-radius:50%}
.panelImg{border-radius:10px;overflow:hidden;box-shadow:0 8px 20px #0ac5ff33}
.panelImg img{width:100%;height:320px;object-fit:cover;display:block}
.panelBtn{display:inline-block;padding:12px 28px;background:#46089A;color:#FFF;text-decoration:none;border-radius:8px;font-weight:600;transition:background 0.3s,transform .3s}
.panelBtn:hover{background:#0AC5FF;transform:scale(1.05)}
.proofSec{background:linear-gradient(135deg,#46089a0d,#0ac5ff0d);padding:70px 20px}
.proofInner{max-width:1000px;margin:0 auto}
.proofInner h2{font-size:2.2rem;color:#46089A;margin:0 0 16px;text-align:center}
.proofInner .intro{font-size:1.05rem;color:#555;text-align:center;margin:0 0 50px;line-height:1.6}
.statsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:50px}
.statBox{background:#fff;padding:28px 20px;border-radius:10px;text-align:center;box-shadow:0 6px 16px #46089a1a;position:relative;overflow:hidden}
.statBox::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#46089A,#0AC5FF)}
.statNum{font-size:2.8rem;font-weight:700;color:#46089A;line-height:1;margin:0 0 8px}
.statLabel{font-size:.9rem;color:#666;text-transform:uppercase;letter-spacing:.5px}
.caseRow{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid #46089a1a}
.caseRow:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.caseImg{border-radius:10px;overflow:hidden;box-shadow:0 8px 20px #0ac5ff26}
.caseImg img{width:100%;height:240px;object-fit:cover;display:block}
.caseTxt h3{font-size:1.5rem;color:#46089A;margin:0 0 12px}
.caseTxt p{font-size:.98rem;color:#555;line-height:1.7;margin:0 0 14px}
.resultTag{display:inline-block;padding:6px 14px;background:#0ac5ff1a;color:#0AC5FF;border-radius:6px;font-size:.85rem;font-weight:600;margin-right:8px}
@media (max-width: 768px) {
.heroWrap{grid-template-columns:1fr;gap:30px;padding:40px 20px}
.heroImgBox{order:-1}
.heroImgBox img{height:300px}
.heroTxt h1{font-size:2rem}
.stageGrid{grid-template-columns:1fr}
.tabNav{flex-direction:column}
.panelContent{grid-template-columns:1fr}
.panelImg{order:-1}
.statsGrid{grid-template-columns:repeat(2,1fr)}
.caseRow{grid-template-columns:1fr}
}
@media (min-width: 769px) and (max-width: 1024px) {
.heroWrap{grid-template-columns:1fr 320px;gap:40px}
.heroImgBox img{height:360px}
.stageGrid{grid-template-columns:repeat(2,1fr)}
.statsGrid{grid-template-columns:repeat(2,1fr)}
}
.titleWrapper{position:relative;min-height:480px;background:linear-gradient(135deg,#0AC5FF 0%,#46089A 100%);display:flex;align-items:center;overflow:hidden;padding:60px 20px}
.titleWrapper::before{content:'';position:absolute;width:350px;height:350px;background:#ffffff0f;border-radius:50%;top:-80px;right:-100px;animation:floatShape 8s ease-in-out infinite}
@keyframes floatShape {
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(-20px,20px) rotate(10deg)}
}
.titleWrapper::after{content:'';position:absolute;width:200px;height:200px;background:#ffffff0a;border-radius:8px;bottom:40px;left:60px;transform:rotate(25deg)}
.titleContent{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;position:relative;z-index:2}
.titleText h1{font-size:2.8rem;color:#FFF;margin:0 0 20px;line-height:1.2}
.titleText p{font-size:1.1rem;color:#ffffffeb;line-height:1.6;margin:0}
.titleImg{position:relative;animation:gentleFloat 6s ease-in-out infinite}
@keyframes gentleFloat {
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}
.titleImg img{width:100%;height:340px;object-fit:cover;border-radius:8px;box-shadow:0 16px 48px #0000004d;clip-path:polygon(8% 0,100% 0,100% 92%,92% 100%,0 100%,0 8%)}
.storySection{max-width:1000px;margin:80px auto;padding:0 20px}
.storyGrid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:start}
.storyImg img{width:100%;height:420px;object-fit:cover;border-radius:6px;box-shadow:0 12px 32px #46089a26}
.storyText h2{font-size:2.2rem;color:#46089A;margin:0 0 24px;position:relative;padding-left:18px}
.storyText h2::before{content:'';position:absolute;left:0;top:6px;width:5px;height:60%;background:linear-gradient(180deg,#0AC5FF,#46089A);border-radius:3px}
.storyText p{font-size:1.05rem;color:#2c2c2c;line-height:1.7;margin:0 0 18px}
.valueCardsWrap{background:linear-gradient(165deg,#0ac5ff14 0%,#46089a14 100%);padding:70px 20px;margin:60px 0}
.valueCards{max-width:1000px;margin:0 auto}
.valueCards h2{font-size:2.1rem;color:#46089A;text-align:center;margin:0 0 50px}
.cardsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.valueCard{background:#FFF;padding:32px 26px;border-radius:8px;box-shadow:0 8px 24px #00000014;transition:transform .3s ease,box-shadow .3s ease;position:relative}
.valueCard:hover{transform:translateY(-6px);box-shadow:0 14px 36px #46089a2e}
.valueCard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#0AC5FF,#46089A);border-radius:8px 8px 0 0}
.valueCard h3{font-size:1.4rem;color:#46089A;margin:0 0 14px}
.valueCard p{font-size:1rem;color:#3a3a3a;line-height:1.6;margin:0}
.approachSection{max-width:1000px;margin:80px auto 100px;padding:0 20px}
.approachHeader{text-align:center;margin-bottom:50px}
.approachHeader h2{font-size:2.2rem;color:#46089A;margin:0 0 16px}
.approachHeader p{font-size:1.1rem;color:#4a4a4a;max-width:700px;margin:0 auto;line-height:1.6}
.approachLayout{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.approachItem{background:#FFF;padding:0;border-radius:8px;border:2px solid #46089a1f;overflow:hidden;transition:border-color .3s ease}
.approachItem:hover{border-color:#0AC5FF}
.approachItemHdr{background:linear-gradient(120deg,#46089A,#0AC5FF);padding:20px 24px}
.approachItemHdr h3{font-size:1.3rem;color:#FFF;margin:0}
.approachItemContent{padding:24px}
.approachItemContent p{font-size:1.02rem;color:#3c3c3c;line-height:1.65;margin:0 0 14px}
.approachItemContent p:last-child{margin-bottom:0}
.approachImg{margin-top:40px;text-align:center}
.approachImg img{width:100%;max-width:800px;height:380px;object-fit:cover;border-radius:8px;box-shadow:0 10px 28px #0ac5ff33}
@media (max-width: 768px) {
.titleContent{grid-template-columns:1fr;gap:30px}
.titleText h1{font-size:2.2rem}
.titleImg img{height:280px}
.storyGrid{grid-template-columns:1fr;gap:40px}
.storyImg img{height:320px}
.cardsGrid{grid-template-columns:1fr;gap:24px}
.approachLayout{grid-template-columns:1fr;gap:28px}
.approachImg img{height:280px}
}
@media (min-width: 769px) and (max-width: 1024px) {
.titleContent{gap:40px}
.cardsGrid{grid-template-columns:repeat(2,1fr)}
}
.mainContact{position:relative;overflow:hidden;background:linear-gradient(135deg,#0AC5FF 0%,#46089A 100%);padding:0;margin:0 0 3rem}
.mainContact .heroWrapper{max-width:1000px;margin:0 auto;position:relative;min-height:420px;display:flex;align-items:center}
.mainContact .bgImage{position:absolute;right:-5%;top:50%;transform:translateY(-50%);width:52%;height:85%;object-fit:cover;opacity:.35;border-radius:8px;animation:floatImage 6s ease-in-out infinite}
@keyframes floatImage {
0%,100%{transform:translateY(-50%) translateX(0)}
50%{transform:translateY(-48%) translateX(-8px)}
}
.mainContact .textBlock{position:relative;z-index:2;background:#fffffff5;padding:2.5rem 3rem;max-width:520px;margin-left:2rem;border-radius:6px;box-shadow:0 12px 32px #46089a26}
.mainContact .textBlock h1{font-size:2.4rem;color:#46089A;margin:0 0 .8rem;line-height:1.2}
.mainContact .textBlock .subtitle{font-size:1.05rem;color:#555;margin:0 0 1.2rem;line-height:1.5}
.mainContact .textBlock .highlight{display:inline-block;padding:.6rem 1.4rem;background:linear-gradient(90deg,#46089A,#0AC5FF);color:#FFF;font-size:.95rem;border-radius:6px;margin-top:.5rem}
.formSection{max-width:1000px;margin:0 auto 3rem;padding:0 1.5rem}
.formSection h2{font-size:1.9rem;color:#46089A;margin:0 0 .6rem}
.formSection .intro{font-size:1rem;color:#666;margin:0 0 2rem;line-height:1.6}
.formSection .contactForm{background:#FFF;padding:2.5rem;border-radius:8px;box-shadow:0 8px 24px #00000014}
.formSection .formGrid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.formSection .fieldWrap{display:flex;flex-direction:column}
.formSection .fieldWrap.fullWidth{grid-column:1 / -1}
.formSection .fieldWrap label{font-size:.92rem;color:#46089A;margin-bottom:.4rem;font-weight:600}
.formSection .fieldWrap input,.formSection .fieldWrap textarea,.formSection .fieldWrap select{padding:.85rem 1rem;border:2px solid #e0e0e0;border-radius:6px;font-size:.98rem;transition:border-color 0.3s,box-shadow .3s}
.formSection .fieldWrap input:focus,.formSection .fieldWrap textarea:focus,.formSection .fieldWrap select:focus{outline:none;border-color:#0AC5FF;box-shadow:0 0 0 3px #0ac5ff26}
.formSection .fieldWrap textarea{min-height:140px;resize:vertical}
.formSection .privacyCheck{display:flex;align-items:flex-start;gap:.6rem;margin:1.5rem 0;padding:1rem;background:#f8f9fa;border-radius:6px}
.formSection .privacyCheck input[type="checkbox"]{margin-top:.2rem;width:18px;height:18px;flex-shrink:0;cursor:pointer;accent-color:#46089A}
.formSection .privacyCheck label{font-size:.9rem;color:#555;line-height:1.5;cursor:pointer}
.formSection .privacyCheck a{color:#0AC5FF;text-decoration:underline}
.formSection .submitBtn{background:linear-gradient(135deg,#46089A 0%,#0AC5FF 100%);color:#FFF;border:none;padding:1rem 3rem;font-size:1.05rem;border-radius:6px;cursor:pointer;transition:transform 0.2s,box-shadow .3s;box-shadow:0 6px 18px #46089a40;z-index:10;position:relative}
.formSection .submitBtn:hover{transform:translateY(-2px);box-shadow:0 10px 24px #46089a59}
.formSection .submitBtn:active{transform:translateY(0)}
.contactInfo{max-width:1000px;margin:0 auto 3rem;padding:0 1.5rem}
.contactInfo h2{font-size:1.8rem;color:#46089A;margin:0 0 1.8rem;text-align:center}
.contactInfo .channelsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem}
.contactInfo .channelCard{background:#FFF;padding:2rem;border-radius:8px;box-shadow:0 6px 20px #0000000f;border-left:4px solid #0AC5FF;transition:transform 0.3s,box-shadow .3s;position:relative;overflow:hidden}
.contactInfo .channelCard::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle,#0ac5ff1a 0%,transparent 70%);border-radius:50%;transform:translate(30%,-30%)}
.contactInfo .channelCard:hover{transform:translateY(-4px);box-shadow:0 12px 28px #46089a1f}
.contactInfo .channelCard h3{font-size:1.25rem;color:#46089A;margin:0 0 .8rem}
.contactInfo .channelCard .detail{font-size:.98rem;color:#555;line-height:1.7;margin:.4rem 0}
.contactInfo .channelCard .detail strong{color:#333;font-weight:600}
.contactInfo .channelCard a{color:#0AC5FF;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.contactInfo .channelCard a:hover{border-bottom-color:#0AC5FF}
.contactInfo .messengerLinks{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.contactInfo .messengerLinks a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:linear-gradient(135deg,#46089A 0%,#0AC5FF 100%);color:#FFF;border-radius:6px;text-decoration:none;font-size:.9rem;transition:transform 0.2s,box-shadow .2s;box-shadow:0 4px 12px #46089a33;z-index:10;position:relative}
.contactInfo .messengerLinks a:hover{transform:translateY(-2px);box-shadow:0 6px 16px #46089a4d}
@media (max-width: 768px) {
.mainContact .heroWrapper{min-height:360px;padding:2rem 1rem}
.mainContact .bgImage{width:70%;right:-10%;opacity:.25}
.mainContact .textBlock{margin-left:0;padding:2rem 1.5rem;max-width:100%}
.mainContact .textBlock h1{font-size:2rem}
.formSection .formGrid{grid-template-columns:1fr}
.contactInfo .channelsGrid{grid-template-columns:1fr}
.formSection .submitBtn{width:100%}
.contactInfo .messengerLinks{flex-direction:column}
.contactInfo .messengerLinks a{justify-content:center}
}
@media (max-width: 480px) {
.mainContact .textBlock h1{font-size:1.7rem}
.mainContact .textBlock{padding:1.5rem}
.formSection .contactForm{padding:1.5rem}
.contactInfo .channelCard{padding:1.5rem}
}
.titleCircle{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#46089A 0%,#0AC5FF 100%);margin-bottom:60px}
.titleCircle::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:#ffffff14;top:-200px;left:-100px;z-index:1}
.titleCircle::after{content:'';position:absolute;width:450px;height:450px;border-radius:50%;background:#0ac5ff1f;bottom:-150px;right:-80px;z-index:1}
.titleCircle .bgBlur{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:blur(8px);opacity:.15;z-index:2}
.titleCircle .centerText{position:relative;z-index:3;text-align:center;color:#FFF;max-width:700px;padding:0 20px}
.titleCircle .centerText h1{font-size:3rem;font-weight:700;margin:0;text-shadow:0 4px 12px #00000040}
@media (max-width: 768px) {
.titleCircle{min-height:320px}
.titleCircle .centerText h1{font-size:2rem}
}
.programOverview{max-width:1000px;margin:0 auto 80px;padding:0 20px}
.programOverview .gridWrap{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}
.programOverview .infoCard{background:linear-gradient(145deg,#FFF 0%,#f8f9ff 100%);padding:32px 24px;border-radius:8px;box-shadow:0 8px 24px #46089a14;border-left:4px solid #0AC5FF;transition:transform .3s ease,box-shadow .3s ease}
.programOverview .infoCard:hover{transform:translateY(-6px);box-shadow:0 16px 32px #46089a24}
.programOverview .infoCard h3{color:#46089A;font-size:1.3rem;margin:0 0 14px;font-weight:600}
.programOverview .infoCard p{color:#4a4a4a;line-height:1.6;margin:0;font-size:.95rem}
@media (max-width: 992px) {
.programOverview .gridWrap{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width: 640px) {
.programOverview .gridWrap{grid-template-columns:1fr;gap:20px}
}
.coursePath{background:#f4f4f9;padding:70px 20px;margin-bottom:80px}
.coursePath .wrap{max-width:1000px;margin:0 auto}
.coursePath h2{color:#46089A;font-size:2.2rem;text-align:center;margin:0 0 60px;font-weight:700}
.coursePath .pathSteps{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;position:relative}
.coursePath .pathSteps::before{content:'';position:absolute;top:50px;left:10%;right:10%;height:3px;background:linear-gradient(90deg,#46089A 0%,#0AC5FF 100%);z-index:1}
.coursePath .stepItem{flex:1;text-align:center;position:relative;z-index:2}
.coursePath .stepItem .stepNum{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#46089A 0%,#0AC5FF 100%);color:#FFF;font-size:2rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 12px 28px #46089a4d}
.coursePath .stepItem h4{color:#46089A;font-size:1.15rem;margin:0 0 12px;font-weight:600}
.coursePath .stepItem p{color:#5a5a5a;line-height:1.5;margin:0;font-size:.9rem}
@media (max-width: 768px) {
.coursePath .pathSteps{flex-direction:column;gap:40px}
.coursePath .pathSteps::before{display:none}
.coursePath h2{font-size:1.8rem}
}
.realWorld{max-width:1000px;margin:0 auto 80px;padding:0 20px}
.realWorld .splitLayout{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.realWorld .contentSide h2{color:#46089A;font-size:2rem;margin:0 0 24px;font-weight:700}
.realWorld .contentSide p{color:#4a4a4a;line-height:1.7;margin:0 0 20px}
.realWorld .contentSide .skillList{list-style:none;padding:0;margin:30px 0 0}
.realWorld .contentSide .skillList li{position:relative;padding-left:32px;margin-bottom:16px;color:#4a4a4a;line-height:1.6}
.realWorld .contentSide .skillList li::before{content:'';position:absolute;left:0;top:6px;width:18px;height:18px;background:linear-gradient(135deg,#46089A 0%,#0AC5FF 100%);border-radius:4px}
.realWorld .imageSide{position:relative}
.realWorld .imageSide img{width:100%;height:auto;border-radius:10px;box-shadow:0 12px 32px #46089a29;display:block}
.realWorld .imageSide::before{content:'';position:absolute;top:-20px;right:-20px;width:200px;height:200px;background:radial-gradient(circle,#0ac5ff33 0%,transparent 70%);border-radius:50%;z-index:-1}
@media (max-width: 768px) {
.realWorld .splitLayout{grid-template-columns:1fr;gap:40px}
.realWorld .contentSide h2{font-size:1.7rem}
}
.enrollAction{background:linear-gradient(135deg,#46089A 0%,#0AC5FF 100%);padding:60px 20px;text-align:center;position:relative;overflow:hidden}
.enrollAction::before{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:#ffffff0f;top:-150px;right:-100px}
.enrollAction::after{content:'';position:absolute;width:350px;height:350px;border-radius:50%;background:#ffffff0d;bottom:-120px;left:-80px}
.enrollAction .wrap{max-width:700px;margin:0 auto;position:relative;z-index:2}
.enrollAction h2{color:#FFF;font-size:2rem;margin:0 0 18px;font-weight:700}
.enrollAction p{color:#FFF;font-size:1.1rem;line-height:1.6;margin:0 0 32px;opacity:.95}
.enrollAction .btnWrap{display:flex;gap:20px;justify-content:center;align-items:center}
.enrollAction .btnPrimary{background:#FFF;color:#46089A;padding:16px 40px;border-radius:8px;text-decoration:none;font-weight:600;font-size:1.05rem;box-shadow:0 8px 20px #0003;transition:transform .3s ease,box-shadow .3s ease;display:inline-block;border:none}
.enrollAction .btnPrimary:hover{transform:translateY(-3px);box-shadow:0 12px 28px #0000004d}
.enrollAction .btnSecondary{background:transparent;color:#FFF;padding:16px 40px;border-radius:8px;text-decoration:none;font-weight:600;font-size:1.05rem;border:2px solid #FFF;transition:background .3s ease,color .3s ease;display:inline-block}
.enrollAction .btnSecondary:hover{background:#FFF;color:#46089A}
@media (max-width: 640px) {
.enrollAction h2{font-size:1.6rem}
.enrollAction .btnWrap{flex-direction:column;gap:16px}
.enrollAction .btnPrimary,.enrollAction .btnSecondary{width:100%;max-width:280px}
}
.successWrap{max-width:1000px;margin:0 auto;padding:80px 20px}
.successCard{background:linear-gradient(135deg,#46089A 0%,#0AC5FF 100%);border-radius:8px;padding:60px 40px;text-align:center;box-shadow:0 16px 48px #46089a26;position:relative;overflow:hidden}
.successCard::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,#ffffff1a 0%,transparent 70%);animation:pulseEffect 3s ease-in-out infinite}
@keyframes pulseEffect {
0%,100%{transform:scale(1);opacity:.5}
50%{transform:scale(1.1);opacity:.8}
}
.successCard .iconWrap{position:relative;z-index:2;margin-bottom:30px}
.successCard .checkIcon{width:80px;height:80px;margin:0 auto;background:#FFF;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #0003;animation:checkBounce .6s cubic-bezier(0.68,-0.55,0.265,1.55)}
@keyframes checkBounce {
0%{transform:scale(0);opacity:0}
50%{transform:scale(1.1)}
100%{transform:scale(1);opacity:1}
}
.successCard .checkIcon svg{width:48px;height:48px}
.successCard .checkIcon svg path{stroke:#46089A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:100;stroke-dashoffset:100;animation:drawCheck .8s ease-out .3s forwards}
@keyframes drawCheck {
to{stroke-dashoffset:0}
}
.successCard h1{position:relative;z-index:2;color:#FFF;font-size:2.5rem;font-weight:700;margin:0 0 20px;line-height:1.2}
.successCard .msgTxt{position:relative;z-index:2;color:#fffffff2;font-size:1.125rem;line-height:1.7;margin:0 0 35px;max-width:600px;margin-left:auto;margin-right:auto}
.successCard .btnGroup{position:relative;z-index:2;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.successCard .btnPrimary{background:#FFF;color:#46089A;padding:14px 32px;border-radius:6px;text-decoration:none;font-weight:600;font-size:1rem;transition:all .3s ease;box-shadow:0 4px 12px #00000026;display:inline-block}
.successCard .btnPrimary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000040;background:#f8f9fa}
.successCard .btnSecondary{background:transparent;color:#FFF;padding:14px 32px;border:2px solid #FFF;border-radius:6px;text-decoration:none;font-weight:600;font-size:1rem;transition:all .3s ease;display:inline-block}
.successCard .btnSecondary:hover{background:#ffffff26;transform:translateY(-2px)}
.decorDots{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;z-index:1}
.decorDots span{position:absolute;width:8px;height:8px;background:#fff3;border-radius:50%;animation:floatDots 4s ease-in-out infinite}
.decorDots span:nth-child(1){top:10%;left:15%;animation-delay:0s}
.decorDots span:nth-child(2){top:70%;left:10%;animation-delay:1s}
.decorDots span:nth-child(3){top:30%;right:12%;animation-delay:.5s}
.decorDots span:nth-child(4){bottom:15%;right:18%;animation-delay:1.5s}
.decorDots span:nth-child(5){top:50%;left:8%;width:6px;height:6px;animation-delay:2s}
.decorDots span:nth-child(6){top:20%;right:25%;width:10px;height:10px;animation-delay:.8s}
@keyframes floatDots {
0%,100%{transform:translateY(0) scale(1);opacity:.3}
50%{transform:translateY(-20px) scale(1.2);opacity:.6}
}
@media (max-width: 768px) {
.successWrap{padding:60px 16px}
.successCard{padding:40px 24px}
.successCard h1{font-size:1.875rem}
.successCard .msgTxt{font-size:1rem}
.successCard .btnGroup{flex-direction:column;align-items:stretch}
.successCard .btnPrimary,.successCard .btnSecondary{width:100%;text-align:center}
.successCard .checkIcon{width:64px;height:64px}
.successCard .checkIcon svg{width:36px;height:36px}
}
@media (max-width: 480px) {
.successCard h1{font-size:1.5rem}
.successCard .msgTxt{font-size:.9375rem}
.decorDots span{width:6px;height:6px}
}