*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Literata',serif;background:#FAFAFA;color:#2A2A2A;line-height:1.6}
.TopRibbon{background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);padding:12px 0}
.TopRibbon-holder{max-width:1366px;margin:0 auto;padding:0 24px}
.MainNavi-list{display:flex;list-style:none;gap:32px;align-items:center;justify-content:center}
.MainNavi-item{position:relative}
.MainNavi-link{color:#FFF;text-decoration:none;font-weight:700;font-size:15px;padding:8px 12px;display:block;border-radius:4px;transition:background-color .2s ease}
.MainNavi-link:hover{background-color:#ffffff26}
.MainNavi-item.has-dropdown:hover .SubNavi{opacity:1;visibility:visible;transform:translateY(0)}
.SubNavi{position:absolute;top:100%;left:0;background:#FFF;list-style:none;min-width:200px;border-radius:8px;box-shadow:0 8px 24px #0000001f;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s ease;padding:8px 0;margin-top:4px;z-index:100}
.SubNavi-item{margin:0}
.SubNavi-link{display:block;padding:12px 20px;color:#2A2A2A;text-decoration:none;font-size:14px;transition:background-color .2s ease}
.SubNavi-link:hover{background-color:#F5F5F5}
.BrandBanner{background:linear-gradient(99deg,#A328CD 0%,#09FFD9 50%,#FFF921 100%);padding:40px 0;position:relative}
.BrandBanner::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffffeb;z-index:1}
.BrandBanner-holder{max-width:1366px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;z-index:2}
.LogoZone{flex-shrink:0}
.LogoWrap{display:block}
.LogoImg{height:110px;width:110px;display:block;border-radius:16px;box-shadow:0 4px 16px #a328cd33;background:#FFF;padding:8px}
.CompanyId{flex-grow:1;text-align:center}
.CompanyId-name{font-size:42px;font-weight:700;color:#A328CD;margin-bottom:4px;line-height:1.2}
.CompanyId-tagline{font-size:16px;color:#555;font-style:italic}
.ContactQuick{flex-shrink:0}
.ContactQuick-link{display:flex;align-items:center;gap:10px;color:#2A2A2A;text-decoration:none;font-size:16px;font-weight:700;padding:12px 20px;background:#FFF;border-radius:20px;box-shadow:0 4px 12px #00000014;transition:transform .2s ease,box-shadow .2s ease}
.ContactQuick-link:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000001f}
.ContactQuick-link i{font-size:20px;color:#A328CD}
.FootWrap{background:#F8F8F8;border-top:3px solid #09FFD9;padding:48px 0 24px}
.FootWrap-holder{max-width:1366px;margin:0 auto;padding:0 24px}
.FootInfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;margin-bottom:32px}
.FootInfo-heading{font-size:20px;font-weight:700;color:#A328CD;margin-bottom:16px}
.FootInfo-txt{font-size:15px;color:#555;margin-bottom:8px;line-height:1.6}
.FootInfo-link{color:#555;text-decoration:none;transition:color .2s ease}
.FootInfo-link:hover{color:#A328CD}
.FootNavi-list{list-style:none}
.FootNavi-item{margin-bottom:10px}
.FootNavi-link{color:#555;text-decoration:none;font-size:15px;transition:color .2s ease}
.FootNavi-link:hover{color:#A328CD}
.FootCopy{text-align:center;padding-top:24px;border-top:1px solid #E0E0E0}
.FootCopy-txt{font-size:14px;color:#777}
.CookiePop{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateX(-100vw);background:#FFF;border-radius:16px;box-shadow:0 12px 32px #0000002e;max-width:720px;width:90%;z-index:9999;transition:transform .4s cubic-bezier(0.68,-0.55,0.265,1.55)}
.CookiePop.is-visible{transform:translateX(-50%) translateX(0)}
.CookiePop.is-hidden{transform:translateX(-50%) translateX(-100vw)}
.CookiePop-inner{padding:28px}
.CookieTabs{display:flex;gap:12px;margin-bottom:20px;border-bottom:2px solid #E8E8E8}
.CookieTab{background:none;border:none;padding:10px 20px;font-family:'Literata',serif;font-size:15px;font-weight:700;color:#777;cursor:pointer;position:relative;transition:color .2s ease}
.CookieTab.is-active{color:#A328CD}
.CookieTab.is-active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#A328CD}
.CookieContent{margin-bottom:24px}
.CookiePanel{display:none}
.CookiePanel.is-active{display:block}
.CookiePanel-txt{font-size:15px;color:#555;line-height:1.6;margin-bottom:16px}
.CookieOptOut{margin-top:16px}
.CookieOptOut-label{display:flex;align-items:center;gap:10px;font-size:14px;color:#555;cursor:pointer}
.CookieOptOut-check{width:18px;height:18px;cursor:pointer}
.CookieActions{display:flex;gap:12px}
.CookieButt{flex:1;padding:14px 24px;border:none;border-radius:8px;font-family:'Literata',serif;font-size:15px;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.CookieButt--accept{background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);color:#FFF}
.CookieButt--decline{background:#E8E8E8;color:#555}
.CookieButt:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000001f}
@media (max-width: 768px) {
.MainNavi-list{flex-wrap:wrap;gap:16px}
.BrandBanner-holder{flex-direction:column;text-align:center}
.CompanyId-name{font-size:32px}
.ContactQuick{width:100%}
.ContactQuick-link{justify-content:center}
.FootInfo{grid-template-columns:1fr;gap:32px}
.CookiePop{width:95%;top:16px}
.CookiePop-inner{padding:20px}
.CookieActions{flex-direction:column}
}
@media (max-width: 375px) {
.TopRibbon-holder{padding:0 16px}
.MainNavi-list{gap:12px;font-size:14px}
.CompanyId-name{font-size:28px}
.LogoImg{height:80px;width:80px}
}
@media (min-width: 1366px) {
.BrandBanner-holder{padding:0 48px}
.TopRibbon-holder{padding:0 48px}
}
.policy-text{max-width:1366px;margin:0 auto;padding:80px 24px 120px;background:#fff}
@media (min-width: 768px) {
.policy-text{padding:100px 60px 140px}
}
@media (min-width: 1366px) {
.policy-text{padding:120px 80px 160px}
}
.policy-text h1{font-size:36px;line-height:1.2;font-weight:700;color:#1a1a1a;margin:0 0 16px;letter-spacing:-.5px}
@media (min-width: 768px) {
.policy-text h1{font-size:48px;margin:0 0 20px}
}
@media (min-width: 1366px) {
.policy-text h1{font-size:56px;margin:0 0 24px}
}
.policy-text h2{font-size:28px;line-height:1.3;font-weight:700;color:#2a2a2a;margin:64px 0 20px;letter-spacing:-.3px;border-bottom:2px solid #A328CD;padding-bottom:12px}
@media (min-width: 768px) {
.policy-text h2{font-size:36px;margin:80px 0 24px;padding-bottom:16px}
}
@media (min-width: 1366px) {
.policy-text h2{font-size:42px;margin:96px 0 28px}
}
.policy-text h3{font-size:22px;line-height:1.4;font-weight:600;color:#333;margin:48px 0 16px;letter-spacing:-.2px}
@media (min-width: 768px) {
.policy-text h3{font-size:28px;margin:56px 0 20px}
}
@media (min-width: 1366px) {
.policy-text h3{font-size:32px;margin:64px 0 24px}
}
.policy-text h4{font-size:18px;line-height:1.5;font-weight:600;color:#444;margin:36px 0 12px}
@media (min-width: 768px) {
.policy-text h4{font-size:22px;margin:40px 0 16px}
}
@media (min-width: 1366px) {
.policy-text h4{font-size:24px;margin:48px 0 18px}
}
.policy-text h5{font-size:16px;line-height:1.5;font-weight:600;color:#555;margin:28px 0 10px}
@media (min-width: 768px) {
.policy-text h5{font-size:18px;margin:32px 0 12px}
}
@media (min-width: 1366px) {
.policy-text h5{font-size:20px;margin:36px 0 14px}
}
.policy-text h6{font-size:15px;line-height:1.6;font-weight:600;color:#666;margin:24px 0 8px;text-transform:uppercase;letter-spacing:.5px}
@media (min-width: 768px) {
.policy-text h6{font-size:16px;margin:28px 0 10px}
}
.policy-text p{font-size:16px;line-height:1.75;color:#444;margin:0 0 20px;max-width:820px}
@media (min-width: 768px) {
.policy-text p{font-size:17px;line-height:1.8;margin:0 0 24px}
}
@media (min-width: 1366px) {
.policy-text p{font-size:18px;line-height:1.85;margin:0 0 28px}
}
.policy-text ul{margin:0 0 24px;padding:0 0 0 28px;list-style-type:none}
@media (min-width: 768px) {
.policy-text ul{margin:0 0 28px;padding:0 0 0 32px}
}
@media (min-width: 1366px) {
.policy-text ul{margin:0 0 32px;padding:0 0 0 36px}
}
.policy-text ol{margin:0 0 24px;padding:0 0 0 28px;list-style-position:outside}
@media (min-width: 768px) {
.policy-text ol{margin:0 0 28px;padding:0 0 0 32px}
}
@media (min-width: 1366px) {
.policy-text ol{margin:0 0 32px;padding:0 0 0 36px}
}
.policy-text ul li{font-size:16px;line-height:1.75;color:#444;margin:0 0 12px;position:relative;padding-left:0}
.policy-text ul li::before{content:"";position:absolute;left:-28px;top:11px;width:6px;height:6px;background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);border-radius:50%}
@media (min-width: 768px) {
.policy-text ul li{font-size:17px;line-height:1.8;margin:0 0 14px}
.policy-text ul li::before{left:-32px;top:12px;width:7px;height:7px}
}
@media (min-width: 1366px) {
.policy-text ul li{font-size:18px;line-height:1.85;margin:0 0 16px}
.policy-text ul li::before{left:-36px;top:13px;width:8px;height:8px}
}
.policy-text ol li{font-size:16px;line-height:1.75;color:#444;margin:0 0 12px;padding-left:8px}
@media (min-width: 768px) {
.policy-text ol li{font-size:17px;line-height:1.8;margin:0 0 14px;padding-left:10px}
}
@media (min-width: 1366px) {
.policy-text ol li{font-size:18px;line-height:1.85;margin:0 0 16px;padding-left:12px}
}
.policy-text a{color:#A328CD;text-decoration:none;border-bottom:1px solid #a328cd4d;transition:all .3s ease;font-weight:500}
.policy-text a:hover{color:#09FFD9;border-bottom-color:#09FFD9;background:#09ffd90d}
.policy-text a:active{color:#8a1fb5}
.policy-text div{margin:0;padding:0}
.policy-text ul ul{margin:12px 0;padding-left:24px}
.policy-text ol ol{margin:12px 0;padding-left:24px}
.policy-text ul ol{margin:12px 0;padding-left:24px}
.policy-text ol ul{margin:12px 0;padding-left:24px}
@media (min-width: 768px) {
.policy-text ul ul,.policy-text ol ol,.policy-text ul ol,.policy-text ol ul{margin:14px 0;padding-left:28px}
}
.policy-text h1:first-child,.policy-text h2:first-child,.policy-text h3:first-child{margin-top:0}
.policy-text p:last-child,.policy-text ul:last-child,.policy-text ol:last-child{margin-bottom:0}
.HeroCirc{max-width:1366px;margin:0 auto;padding:80px 20px;position:relative}
.hero-circle-wrap{display:flex;align-items:center;justify-content:center;position:relative;min-height:500px}
.circle-backdrop{position:absolute;width:480px;height:480px;border-radius:50%;background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);opacity:.15;z-index:1}
.hero-circle-wrap .CenterTxt{position:relative;z-index:3;text-align:center;max-width:420px;padding:40px}
.hero-circle-wrap .CenterTxt h1{font-size:2.8rem;margin:0 0 20px;line-height:1.2;color:#1a1a1a}
.hero-circle-wrap .CenterTxt .SubHed{font-size:1.15rem;line-height:1.6;color:#4a4a4a;margin:0}
.hero-circle-wrap .ImgCirc{position:absolute;width:180px;height:180px;border-radius:50%;overflow:hidden;box-shadow:0 12px 40px #a328cd33}
.hero-circle-wrap .ImgCirc img{width:100%;height:100%;object-fit:cover;filter:brightness(0.92)}
.hero-circle-wrap .ImgCirc.pos1{top:40px;left:10%}
.hero-circle-wrap .ImgCirc.pos2{bottom:60px;right:12%}
.DecorShape{position:absolute;width:120px;height:120px;border:3px solid #FFF921;border-radius:20px;transform:rotate(25deg);opacity:.4;z-index:2;bottom:100px;left:15%}
.StatGrid{max-width:1366px;margin:0 auto;padding:100px 20px 80px}
.StatGrid h2{font-size:2.2rem;margin:0 0 60px;text-align:left;color:#1a1a1a}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.StatCard{background:linear-gradient(145deg,#f8f8f8 0%,#fff 100%);padding:40px 30px;border-radius:16px;box-shadow:0 4px 20px #0000000f;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.StatCard:hover{transform:translateY(-6px);box-shadow:0 12px 32px #a328cd26}
.StatCard::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#A328CD 0%,#09FFD9 100%)}
.StatCard .num{font-size:3.2rem;font-weight:700;color:#A328CD;margin:0 0 12px;line-height:1}
.StatCard .lbl{font-size:1rem;color:#2a2a2a;margin:0 0 8px;font-weight:600}
.StatCard .desc{font-size:.9rem;color:#6a6a6a;line-height:1.5;margin:0}
.ProgressWrap{max-width:1366px;margin:0 auto;padding:100px 20px;background:linear-gradient(99deg,#A328CD 0%,#09FFD9 50%,#FFF921 100%);background-size:200% 200%;position:relative}
.ProgressWrap::before{content:'';position:absolute;inset:0;background:#ffffffeb;z-index:1}
.prog-content{position:relative;z-index:2}
.ProgressWrap h2{font-size:2rem;margin:0 0 50px;text-align:center;color:#1a1a1a}
.prog-list{display:flex;flex-direction:column;gap:40px;max-width:900px;margin:0 auto}
.ProgItem{display:flex;align-items:center;gap:30px}
.ProgItem .icon-box{width:80px;height:80px;flex-shrink:0;border-radius:12px;background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #a328cd40}
.ProgItem .icon-box svg{width:40px;height:40px;fill:#fff}
.ProgItem .txt-holder{flex:1}
.ProgItem .txt-holder h3{font-size:1.3rem;margin:0 0 10px;color:#1a1a1a}
.ProgItem .txt-holder p{font-size:.95rem;line-height:1.6;color:#4a4a4a;margin:0}
.ProgItem .bar-wrap{width:100%;height:8px;background:#a328cd1a;border-radius:8px;margin-top:14px;overflow:hidden}
.ProgItem .bar-fill{height:100%;background:linear-gradient(90deg,#A328CD 0%,#09FFD9 100%);border-radius:8px;transition:width .6s ease}
.TimelineArea{max-width:1366px;margin:0 auto;padding:100px 20px}
.TimelineArea h2{font-size:2.1rem;margin:0 0 70px;text-align:center;color:#1a1a1a}
.timeline-holder{position:relative;max-width:800px;margin:0 auto}
.timeline-holder::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#A328CD 0%,#09FFD9 50%,#FFF921 100%);transform:translateX(-50%)}
.TimeStep{display:flex;margin-bottom:60px;position:relative}
.TimeStep:nth-child(odd){justify-content:flex-start}
.TimeStep:nth-child(even){justify-content:flex-end}
.TimeStep .step-box{width:45%;background:#f9f9f9;padding:30px;border-radius:20px;box-shadow:0 6px 24px #00000014;position:relative;transition:transform .3s ease,box-shadow .3s ease}
.TimeStep .step-box:hover{transform:scale(1.03);box-shadow:0 12px 36px #a328cd2e}
.TimeStep .step-box h3{font-size:1.25rem;margin:0 0 12px;color:#A328CD}
.TimeStep .step-box .date-tag{font-size:.85rem;color:#09FFD9;font-weight:600;margin:0 0 14px;display:block}
.TimeStep .step-box p{font-size:.93rem;line-height:1.6;color:#4a4a4a;margin:0}
.TimeStep .dot{position:absolute;left:50%;top:20px;width:20px;height:20px;background:#FFF921;border:4px solid #fff;border-radius:50%;transform:translateX(-50%);box-shadow:0 4px 12px #fff92180;z-index:2}
@media (max-width: 768px) {
.hero-circle-wrap{flex-direction:column;min-height:auto}
.circle-backdrop{width:320px;height:320px}
.hero-circle-wrap .CenterTxt h1{font-size:2rem}
.hero-circle-wrap .ImgCirc{position:relative;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;margin:20px}
.DecorShape{display:none}
.stat-row{grid-template-columns:1fr}
.ProgItem{flex-direction:column;align-items:flex-start}
.timeline-holder::before{left:20px}
.TimeStep{justify-content:flex-start!important;padding-left:50px}
.TimeStep .step-box{width:100%}
.TimeStep .dot{left:20px}
}
@media (max-width: 375px) {
.HeroCirc{padding:50px 15px}
.hero-circle-wrap .CenterTxt h1{font-size:1.7rem}
.StatCard .num{font-size:2.5rem}
}
.TitleWrap{background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);padding:80px 24px;position:relative;overflow:hidden}
.TitleWrap::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(./photo_gallery/content-image-6.jpg);background-size:cover;background-position:center;opacity:.15;filter:grayscale(40%) contrast(1.1)}
.TitleInner{max-width:1366px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.TitleTxt h1{font-size:52px;color:#fff;margin:0 0 24px;line-height:1.1;text-shadow:2px 4px 12px #0003}
.TitleTxt p{font-size:20px;color:#fff;line-height:1.6;margin:0 0 32px;opacity:.95}
.TitleImg{position:relative}
.TitleImg img{width:100%;height:400px;object-fit:cover;border-radius:16px;box-shadow:0 16px 48px #0000004d}
.TitleImg::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#a328cd33,#09ffd933);border-radius:16px;pointer-events:none}
.butt-primary{display:inline-block;padding:16px 40px;background:#FFF921;color:#000;text-decoration:none;border-radius:8px;font-weight:600;font-size:18px;transition:all .3s ease;box-shadow:0 4px 16px #fff92166}
.butt-primary:hover{transform:translateY(-3px);box-shadow:0 8px 24px #fff92199;background:#FFF921}
.ToolsSec{padding:100px 24px;background:#f8f9fa}
.ToolsInner{max-width:1366px;margin:0 auto}
.ToolsHeado{text-align:center;margin-bottom:64px}
.ToolsHeado h2{font-size:42px;color:#1a1a1a;margin:0 0 16px;position:relative;display:inline-block}
.ToolsHeado h2::before{content:'';position:absolute;bottom:-8px;left:0;width:100%;height:4px;background:linear-gradient(90deg,#A328CD,#09FFD9);border-radius:2px}
.ToolsHeado p{font-size:18px;color:#555;max-width:680px;margin:24px auto 0;line-height:1.7}
.ToolGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ToolCard{background:#fff;padding:40px 32px;border-radius:12px;box-shadow:0 4px 16px #00000014;transition:all .3s ease;position:relative;overflow:hidden}
.ToolCard::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#A328CD,#09FFD9);transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease}
.ToolCard:hover::before{transform:scaleY(1)}
.ToolCard:hover{transform:translateY(-6px);box-shadow:0 12px 32px #0000001f}
.ToolCard h3{font-size:24px;color:#1a1a1a;margin:0 0 16px}
.ToolCard p{font-size:16px;color:#666;line-height:1.6;margin:0 0 12px}
.ToolDetail{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid #e5e5e5}
.ToolDetail span{font-size:14px;color:#A328CD;font-weight:600}
.ToolImg{width:100%;height:200px;object-fit:cover;border-radius:8px;margin-bottom:20px}
.PriceSec{padding:100px 24px;background:linear-gradient(165deg,#fff 0%,#f0f0f5 100%);position:relative}
.PriceInner{max-width:1366px;margin:0 auto}
.PriceHeado{text-align:center;margin-bottom:60px}
.PriceHeado h2{font-size:42px;color:#1a1a1a;margin:0 0 20px}
.PriceHeado p{font-size:18px;color:#555;max-width:640px;margin:0 auto;line-height:1.7}
.PriceGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;align-items:start}
.PriceBox{background:#fff;padding:48px 40px;border-radius:20px;box-shadow:0 8px 24px #0000001a;position:relative;transition:all .3s ease}
.PriceBox:hover{transform:scale(1.02);box-shadow:0 16px 40px #00000026}
.PriceBox.is-featured{background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);color:#fff}
.PriceBox.is-featured h3,.PriceBox.is-featured p,.PriceBox.is-featured li{color:#fff}
.PriceBox h3{font-size:32px;color:#1a1a1a;margin:0 0 12px}
.PriceNum{font-size:56px;font-weight:700;margin:24px 0;color:#A328CD}
.PriceBox.is-featured .PriceNum{color:#FFF921}
.PriceNum span{font-size:24px;font-weight:400}
.PriceList{list-style:none;padding:0;margin:32px 0}
.PriceList li{padding:12px 0;color:#555;font-size:16px;position:relative;padding-left:32px}
.PriceList li::before{content:'✓';position:absolute;left:0;color:#09FFD9;font-weight:700;font-size:20px}
.PriceBox.is-featured .PriceList li::before{color:#FFF921}
.butt-price{display:block;width:100%;padding:16px 32px;background:#A328CD;color:#fff;text-align:center;text-decoration:none;border-radius:8px;font-weight:600;font-size:18px;transition:all .3s ease;margin-top:32px}
.butt-price:hover{background:#8a1faa;transform:translateY(-2px);box-shadow:0 6px 20px #a328cd66}
.PriceBox.is-featured .butt-price{background:#FFF921;color:#000}
.PriceBox.is-featured .butt-price:hover{background:#e6df1e;box-shadow:0 6px 20px #fff92180}
.TeamSec{padding:100px 24px;background:#fff}
.TeamInner{max-width:1366px;margin:0 auto}
.TeamHeado{margin-bottom:60px}
.TeamHeado h2{font-size:42px;color:#1a1a1a;margin:0 0 20px}
.TeamHeado p{font-size:18px;color:#555;max-width:780px;line-height:1.7}
.TeamGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px}
.TeamMember{display:flex;gap:32px;align-items:start;background:#f8f9fa;padding:32px;border-radius:16px;transition:all .3s ease}
.TeamMember:hover{transform:translateX(8px);box-shadow:0 8px 24px #00000014}
.TeamPhoto{flex-shrink:0}
.TeamPhoto img{width:140px;height:140px;object-fit:cover;border-radius:50%;border:4px solid #09FFD9}
.TeamInfo h3{font-size:26px;color:#1a1a1a;margin:0 0 8px}
.TeamInfo h4{font-size:16px;color:#A328CD;margin:0 0 16px;font-weight:600}
.TeamInfo p{font-size:15px;color:#666;line-height:1.6;margin:0 0 12px}
.TeamStats{display:flex;gap:24px;margin-top:20px;padding-top:20px;border-top:2px solid #e0e0e0}
.StatItem{text-align:center}
.StatItem strong{display:block;font-size:24px;color:#A328CD;margin-bottom:4px}
.StatItem span{font-size:13px;color:#888}
@media (max-width: 1366px) {
.TitleInner{gap:40px}
.ToolGrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px) {
.TitleWrap{padding:60px 20px}
.TitleInner{grid-template-columns:1fr;gap:32px}
.TitleTxt h1{font-size:36px}
.TitleTxt p{font-size:17px}
.TitleImg img{height:280px}
.ToolsSec,.PriceSec,.TeamSec{padding:60px 20px}
.ToolsHeado h2,.PriceHeado h2,.TeamHeado h2{font-size:32px}
.ToolGrid{grid-template-columns:1fr;gap:24px}
.PriceGrid{grid-template-columns:1fr;gap:32px}
.TeamGrid{grid-template-columns:1fr;gap:32px}
.TeamMember{flex-direction:column;text-align:center}
.TeamPhoto{margin:0 auto}
.TeamStats{justify-content:center}
}
@media (max-width: 375px) {
.TitleTxt h1{font-size:28px}
.TitleTxt p{font-size:16px}
.ToolCard{padding:28px 20px}
.PriceBox{padding:32px 24px}
.PriceNum{font-size:44px}
}
.HeroFull{position:relative;min-height:100vh;display:flex;align-items:flex-end;background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);overflow:hidden}
.HeroFull::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,#fff9214d 0%,transparent 70%);animation:glowPulse 8s ease-in-out infinite}
@keyframes glowPulse {
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(10%,10%) scale(1.1)}
}
.HeroFull::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,#0009,transparent)}
.TextBlock{position:relative;z-index:2;max-width:1366px;margin:0 auto;padding:3rem 2rem 4rem;width:100%}
.TextBlock h1{font-size:3.5rem;color:#FFF;margin:0 0 1rem;font-weight:700;text-shadow:0 4px 12px #0000004d}
.TextBlock .desc{font-size:1.25rem;color:#fffffff2;max-width:600px;line-height:1.6;text-shadow:0 2px 8px #0003}
.ContactWrap{background:#FAFAFA;padding:5rem 2rem}
.ContactWrap .holder{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}
.InfoSide h2{font-size:2.5rem;margin:0 0 1.5rem;color:#1A1A1A}
.InfoSide .intro{font-size:1.1rem;color:#4A4A4A;margin-bottom:2.5rem;line-height:1.7}
.DetailCard{background:#FFF;border-radius:16px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 4px 16px #0000000f;transition:transform .3s ease,box-shadow .3s ease}
.DetailCard:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}
.DetailCard h3{font-size:1.3rem;color:#A328CD;margin:0 0 .75rem;display:flex;align-items:center;gap:.5rem}
.DetailCard h3::before{content:'';display:inline-block;width:4px;height:20px;background:linear-gradient(180deg,#A328CD,#09FFD9);border-radius:2px}
.DetailCard p{font-size:1rem;color:#2A2A2A;margin:0;line-height:1.6}
.FormArea{background:#FFF;border-radius:20px;padding:3rem;box-shadow:0 8px 32px #a328cd1f}
.FormArea h2{font-size:2rem;margin:0 0 .75rem;color:#1A1A1A}
.FormArea .subline{font-size:1rem;color:#6A6A6A;margin-bottom:2rem}
.FormArea input[type="text"],.FormArea input[type="email"],.FormArea input[type="tel"],.FormArea textarea,.FormArea select{width:100%;padding:1rem 1.25rem;border:2px solid #E0E0E0;border-radius:12px;font-size:1rem;margin-bottom:1.5rem;transition:border-color .3s ease,box-shadow .3s ease;background:#FAFAFA;box-sizing:border-box}
.FormArea input[type="text"]:focus,.FormArea input[type="email"]:focus,.FormArea input[type="tel"]:focus,.FormArea textarea:focus,.FormArea select:focus{outline:none;border-color:#A328CD;box-shadow:0 0 0 4px #a328cd1a;background:#FFF}
.FormArea textarea{min-height:140px;resize:vertical}
.FormArea label{display:block;font-size:.95rem;color:#3A3A3A;margin-bottom:.5rem;font-weight:500}
.TypePick{margin-bottom:1.5rem}
.TypePick .opts{display:flex;gap:1rem;flex-wrap:wrap}
.TypePick input[type="radio"]{display:none}
.TypePick input[type="radio"] + label{padding:.75rem 1.5rem;border:2px solid #E0E0E0;border-radius:24px;cursor:pointer;transition:all .3s ease;background:#FAFAFA;font-weight:500}
.TypePick input[type="radio"]:checked + label{background:linear-gradient(135deg,#A328CD,#09FFD9);color:#FFF;border-color:transparent}
.TypePick input[type="radio"] + label:hover{border-color:#A328CD}
.ConditionalBlock{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .4s ease}
#topic-api:checked ~ .ApiBlock,#topic-integration:checked ~ .IntegBlock,#topic-consulting:checked ~ .ConsBlock{max-height:500px;opacity:1;margin-top:1rem}
.PrivacyCheck{margin:2rem 0 1.5rem}
.PrivacyCheck input[type="checkbox"]{margin-right:.5rem;width:18px;height:18px;cursor:pointer}
.PrivacyCheck label{font-size:.9rem;color:#5A5A5A;line-height:1.5;display:inline}
.PrivacyCheck a{color:#A328CD;text-decoration:underline}
.PrivacyCheck a:hover{color:#09FFD9}
.FormArea button[type="submit"]{width:100%;padding:1.125rem 2rem;background:linear-gradient(135deg,#A328CD,#09FFD9);color:#FFF;border:none;border-radius:12px;font-size:1.125rem;font-weight:600;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 16px #a328cd4d}
.FormArea button[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 8px 24px #a328cd66}
.FormArea button[type="submit"]:active{transform:translateY(0)}
.MapSection{background:#FFF;padding:5rem 2rem}
.MapSection .center{max-width:1366px;margin:0 auto}
.MapSection h2{font-size:2.5rem;margin:0 0 1rem;text-align:center;color:#1A1A1A}
.MapSection .intro2{text-align:center;font-size:1.1rem;color:#5A5A5A;margin-bottom:3rem;max-width:600px;margin-left:auto;margin-right:auto}
.LocationBox{background:linear-gradient(135deg,#F5F0F9,#E8F9F7);border-radius:20px;padding:3rem;text-align:center;position:relative;overflow:hidden}
.LocationBox::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,#a328cd26,transparent);border-radius:50%}
.LocationBox::after{content:'';position:absolute;bottom:-120px;left:-120px;width:350px;height:350px;background:radial-gradient(circle,#09ffd91f,transparent);border-radius:50%}
.LocationBox h3{font-size:2rem;margin:0 0 1.5rem;color:#A328CD;position:relative;z-index:1}
.LocationBox .addr{font-size:1.2rem;color:#2A2A2A;margin-bottom:1rem;position:relative;z-index:1}
.LocationBox .coords{font-size:1rem;color:#6A6A6A;font-family:monospace;position:relative;z-index:1}
.FaqArea{background:linear-gradient(180deg,#FAFAFA 0%,#FFF 100%);padding:5rem 2rem}
.FaqArea .center2{max-width:900px;margin:0 auto}
.FaqArea h2{font-size:2.5rem;margin:0 0 3rem;text-align:center;color:#1A1A1A}
.FaqList .item{background:#FFF;border-radius:16px;margin-bottom:1.5rem;box-shadow:0 4px 12px #0000000d;overflow:hidden}
.FaqList input[type="checkbox"]{display:none}
.FaqList .toggle{display:block;padding:1.75rem 2rem;cursor:pointer;font-size:1.2rem;font-weight:600;color:#1A1A1A;position:relative;transition:background .3s ease}
.FaqList .toggle::after{content:'+';position:absolute;right:2rem;top:50%;transform:translateY(-50%);font-size:1.8rem;color:#A328CD;transition:transform .3s ease}
.FaqList input[type="checkbox"]:checked + .toggle::after{transform:translateY(-50%) rotate(45deg)}
.FaqList input[type="checkbox"]:checked + .toggle{background:linear-gradient(135deg,#a328cd0d,#09ffd90d)}
.FaqList .answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease}
.FaqList input[type="checkbox"]:checked ~ .answer{max-height:300px;padding:0 2rem 1.75rem}
.FaqList .answer p{font-size:1rem;color:#4A4A4A;line-height:1.7;margin:0}
.CalloutBand{background:linear-gradient(99deg,#A328CD 0%,#09FFD9 50%,#FFF921 100%);padding:4rem 2rem;text-align:center}
.CalloutBand .inner{max-width:800px;margin:0 auto}
.CalloutBand h2{font-size:2.25rem;color:#FFF;margin:0 0 1rem;text-shadow:0 2px 8px #0003}
.CalloutBand p{font-size:1.125rem;color:#fffffff2;margin-bottom:2rem;line-height:1.6}
.CalloutBand .cta-btn{display:inline-block;padding:1rem 2.5rem;background:#FFF;color:#A328CD;border-radius:24px;font-size:1.1rem;font-weight:600;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 16px #00000026}
.CalloutBand .cta-btn:hover{transform:translateY(-3px);box-shadow:0 8px 24px #00000040}
@media (max-width: 1366px) {
.TextBlock h1{font-size:3rem}
}
@media (max-width: 768px) {
.HeroFull{min-height:80vh}
.TextBlock h1{font-size:2.25rem}
.TextBlock .desc{font-size:1.1rem}
.ContactWrap .holder{grid-template-columns:1fr;gap:3rem}
.InfoSide h2,.MapSection h2,.FaqArea h2{font-size:2rem}
.FormArea{padding:2rem 1.5rem}
.FormArea h2{font-size:1.75rem}
.LocationBox{padding:2rem 1.5rem}
.CalloutBand h2{font-size:1.85rem}
}
@media (max-width: 375px) {
.TextBlock h1{font-size:1.85rem}
.TypePick .opts{flex-direction:column}
.TypePick input[type="radio"] + label{width:100%;text-align:center}
.DetailCard{padding:1.5rem}
.FormArea{padding:1.5rem 1rem}
}
.HeadZone{background:linear-gradient(99deg,#A328CD 0%,#09FFD9 50%,#FFF921 100%);padding:84px 22px 92px;position:relative;overflow:hidden}
.HeadZone::before{content:'';position:absolute;top:-12%;right:-8%;width:420px;height:420px;background:#fff92124;border-radius:50%;filter:blur(64px)}
.HeadZone::after{content:'';position:absolute;bottom:-18%;left:-6%;width:380px;height:380px;background:#09ffd91c;border-radius:50%;filter:blur(56px)}
.HeadZone .wrap{max-width:1366px;margin:0 auto;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.HeadZone .txt{color:#fff}
.HeadZone .txt .mini{font-size:15px;letter-spacing:1.8px;text-transform:uppercase;opacity:.88;margin:0 0 16px;font-weight:500}
.HeadZone .txt .big{font-size:54px;line-height:1.14;margin:0 0 12px;font-weight:700;text-shadow:0 4px 18px #00000038}
.HeadZone .txt .med{font-size:28px;line-height:1.36;margin:0 0 24px;font-weight:400;opacity:.94}
.HeadZone .txt .desc{font-size:17px;line-height:1.68;margin:0;opacity:.89}
.HeadZone .ImgBox{position:relative}
.HeadZone .ImgBox img{width:100%;height:440px;object-fit:cover;border-radius:18px;box-shadow:0 16px 48px #00000047 0 4px 12px #0000002e}
.HeadZone .ImgBox::before{content:'';position:absolute;top:-12px;left:-12px;right:12px;bottom:12px;border:3px solid #ffffff3d;border-radius:18px;z-index:-1}
.story{padding:96px 22px;background:#FAFCFF}
.story .holder{max-width:1366px;margin:0 auto;display:grid;grid-template-columns:380px 1fr;gap:72px;align-items:start}
.story .side{position:sticky;top:32px}
.story .side .pic{width:100%;height:480px;object-fit:cover;border-radius:22px;box-shadow:0 12px 32px #a328cd2e;margin-bottom:28px}
.story .side .card{background:#fff;padding:28px 24px;border-radius:16px;box-shadow:0 6px 20px #0000000f;border-left:4px solid #09FFD9}
.story .side .card .num{font-size:42px;font-weight:700;color:#A328CD;margin:0 0 6px;line-height:1}
.story .side .card .lbl{font-size:15px;color:#4A5568;margin:0;line-height:1.4}
.story .main-txt .hd{font-size:38px;font-weight:700;color:#1A202C;margin:0 0 32px;line-height:1.28}
.story .main-txt .sect{margin-bottom:48px}
.story .main-txt .sect .subhd{font-size:24px;font-weight:600;color:#2D3748;margin:0 0 18px;line-height:1.32;display:flex;align-items:center;gap:12px}
.story .main-txt .sect .subhd::before{content:'';width:6px;height:6px;background:linear-gradient(135deg,#A328CD,#09FFD9);border-radius:50%;flex-shrink:0}
.story .main-txt .sect .para{font-size:16px;line-height:1.72;color:#4A5568;margin:0 0 16px}
.story .main-txt .grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:36px 0 48px}
.story .main-txt .box{background:linear-gradient(135deg,#a328cd0a,#09ffd90a);padding:24px;border-radius:14px;border:1px solid #a328cd1f;transition:all .32s ease}
.story .main-txt .box:hover{transform:translateY(-4px);box-shadow:0 10px 28px #a328cd24;border-color:#a328cd3d}
.story .main-txt .box .icon-line{width:48px;height:48px;background:linear-gradient(99deg,#A328CD 0%,#09FFD9 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.story .main-txt .box .icon-line i{font-size:24px;color:#fff}
.story .main-txt .box .ttl{font-size:19px;font-weight:600;color:#2D3748;margin:0 0 10px;line-height:1.3}
.story .main-txt .box .info{font-size:15px;line-height:1.64;color:#4A5568;margin:0}
.story .team-area{margin-top:56px;padding-top:56px;border-top:2px dashed #a328cd2e}
.story .team-area .hd2{font-size:32px;font-weight:700;color:#1A202C;margin:0 0 36px;line-height:1.24;text-align:center}
.story .team-area .members{display:grid;grid-template-columns:repeat(2,1fr);gap:36px}
.story .team-area .person{background:#fff;border-radius:18px;padding:32px;box-shadow:0 8px 24px #00000014;display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;transition:all .28s ease}
.story .team-area .person:hover{transform:translateY(-6px);box-shadow:0 14px 38px #a328cd29}
.story .team-area .person .avatar{width:140px;height:140px;object-fit:cover;border-radius:16px;border:3px solid #09FFD9}
.story .team-area .person .details .name{font-size:22px;font-weight:700;color:#1A202C;margin:0 0 8px;line-height:1.2}
.story .team-area .person .details .role{font-size:15px;font-weight:600;color:#A328CD;margin:0 0 14px;line-height:1.3}
.story .team-area .person .details .bio{font-size:15px;line-height:1.68;color:#4A5568;margin:0}
.story .cta-zone{margin-top:64px;text-align:center}
.story .cta-zone .butt{display:inline-block;background:linear-gradient(99deg,#A328CD 0%,#09FFD9 100%);color:#fff;padding:16px 42px;border-radius:12px;font-size:17px;font-weight:600;text-decoration:none;box-shadow:0 8px 22px #a328cd47;transition:all .26s ease;position:relative;z-index:10}
.story .cta-zone .butt:hover{transform:translateY(-3px);box-shadow:0 12px 32px #a328cd61}
@media (max-width: 1366px) {
.HeadZone .wrap{gap:42px}
.story .holder{grid-template-columns:340px 1fr;gap:56px}
}
@media (max-width: 768px) {
.HeadZone{padding:56px 18px 62px}
.HeadZone .wrap{grid-template-columns:1fr;gap:32px}
.HeadZone .txt .big{font-size:38px}
.HeadZone .txt .med{font-size:22px}
.HeadZone .ImgBox img{height:320px}
.story{padding:64px 18px}
.story .holder{grid-template-columns:1fr;gap:42px}
.story .side{position:static}
.story .side .pic{height:360px}
.story .main-txt .hd{font-size:30px}
.story .main-txt .grid2{grid-template-columns:1fr;gap:22px}
.story .team-area .members{grid-template-columns:1fr;gap:28px}
.story .team-area .person{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width: 375px) {
.HeadZone .txt .big{font-size:32px}
.HeadZone .txt .med{font-size:19px}
.story .main-txt .hd{font-size:26px}
.story .main-txt .sect .subhd{font-size:20px}
}
.SuccessWrap{max-width:1366px;margin:0 auto;padding:0 20px}
.msgBox{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:60px 0}
.msgHolder{max-width:720px;width:100%;text-align:center;position:relative}
.msgHolder::before{content:'';position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:140px;height:140px;background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);opacity:.15;z-index:1}
.msgHolder::after{content:'';position:absolute;bottom:-40px;right:10%;width:100px;height:100px;background:linear-gradient(99deg,#FFF921 0%,#A328CD 100%);border-radius:50%;opacity:.1;z-index:1}
.iconWrap{width:96px;height:96px;margin:0 auto 32px;position:relative;z-index:2}
.iconWrap svg{width:100%;height:100%;filter:drop-shadow(0 8px 24px #a328cd33)}
.msgHolder h1{font-size:42px;font-weight:700;margin:0 0 16px;background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;z-index:2}
.msgTxt{font-size:18px;line-height:1.6;color:#3a3a3a;margin:0 0 40px;position:relative;z-index:2}
.actionRow{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.butt{padding:16px 40px;border-radius:12px;font-size:16px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:all .3s ease;border:2px solid transparent}
.butt.primary{background:linear-gradient(135deg,#A328CD 0%,#09FFD9 100%);color:#fff;box-shadow:0 4px 16px #a328cd40}
.butt.primary:hover{transform:translateY(-3px);box-shadow:0 8px 24px #a328cd59}
.butt.secondary{background:#fff;color:#A328CD;border-color:#A328CD}
.butt.secondary:hover{background:#f8f0fc;transform:translateY(-2px);box-shadow:0 4px 12px #a328cd26}
.decorLine{position:absolute;height:1px;background:linear-gradient(90deg,transparent 0%,#09FFD9 50%,transparent 100%);width:200px;top:50%;opacity:.3}
.decorLine.left{left:-220px}
.decorLine.right{right:-220px}
.detailBox{margin-top:60px;padding:32px;background:linear-gradient(135deg,#a328cd08 0%,#09ffd908 100%);border-radius:16px;border:1px solid #a328cd1a;position:relative;z-index:2}
.detailBox::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#A328CD 0%,#09FFD9 100%);border-radius:16px 0 0 16px}
.detailBox h3{font-size:20px;margin:0 0 16px;color:#2a2a2a}
.detailBox p{font-size:15px;line-height:1.7;color:#5a5a5a;margin:0}
.infoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:24px}
.infoItem{padding:16px;background:#fff;border-radius:8px;border-left:3px solid #09FFD9}
.infoItem strong{display:block;font-size:13px;color:#A328CD;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.infoItem span{font-size:15px;color:#3a3a3a}
@media (max-width: 768px) {
.msgBox{min-height:60vh;padding:40px 0}
.msgHolder h1{font-size:32px}
.msgTxt{font-size:16px;margin-bottom:32px}
.actionRow{flex-direction:column;align-items:stretch}
.butt{justify-content:center;width:100%}
.decorLine{display:none}
.detailBox{margin-top:40px;padding:24px}
.infoGrid{grid-template-columns:1fr;gap:12px}
}
@media (max-width: 375px) {
.msgHolder h1{font-size:28px}
.iconWrap{width:80px;height:80px;margin-bottom:24px}
.butt{padding:14px 32px;font-size:15px}
}