:root{

--primary:#6A2CFF;

--primary-dark:#2947C7;

--primary-light:#F1ECFF;

--green:#4B3ED8;

--green-dark:#1D318F;

--green-light:#F0EEFF;

--gold:#5A45D6;

--gold-dark:#263A9B;

--gold-light:#F0EEFF;

--orange:#3A4FD8;

--orange-light:#EEF0FF;

--dark:#0B124D;

--dark-green:#080D35;

--text:#4E5878;

--muted:#737D9B;

--white:#FFFFFF;

--light:#FAF9FF;

--background:#F4F5FF;

--border:#E1E4F2;

--shadow:0 8px 28px rgba(19,23,85,.08);

--shadow-hover:0 14px 38px rgba(19,23,85,.14);

--radius-card:22px;

--radius-button:13px;

--radius-small:10px

}



*{box-sizing:border-box}



html{

scroll-behavior:smooth;

scroll-padding-top:92px

}



body{

margin:0;

padding:0;

font-family:Arial,Helvetica,sans-serif;

background:linear-gradient(180deg,#FCFAFF 0%,#F5F4FF 45%,#EEF1FF 100%);

color:var(--text);

line-height:1.75;

overflow-x:hidden

}



img{

max-width:100%;

height:auto

}



a{

text-decoration:none

}



button,a{

-webkit-tap-highlight-color:transparent

}



::selection{

background:var(--primary);

color:var(--white)

}



.site-header{

position:sticky;

top:0;

z-index:9999;

width:100%;

background:rgba(255,255,255,.97);

border-bottom:1px solid #E1E4F2;

box-shadow:0 4px 18px rgba(19,23,85,.06);

backdrop-filter:blur(12px)

}



.header-inner{

width:100%;

max-width:980px;

min-height:76px;

margin:0 auto;

padding:10px 20px;

display:flex;

align-items:center;

justify-content:space-between;

gap:15px

}



.brand{

display:flex;

align-items:center;

gap:12px;

color:var(--green-dark);

font-size:23px;

font-weight:800;

letter-spacing:-.3px;

transition:.25s ease

}



.brand:hover{

color:var(--primary)

}



.brand img{

width:52px;

height:52px;

object-fit:contain;

border-radius:14px;

background:#FFFFFF;

padding:3px;

border:1px solid rgba(106,44,255,.18);

box-shadow:0 4px 12px rgba(0,208,192,.18)

}



.menu-toggle{

width:46px;

height:43px;

padding:8px;

display:none;

flex-direction:column;

align-items:center;

justify-content:center;

gap:5px;

border:0;

border-radius:11px;

background:linear-gradient(135deg,var(--green),var(--green-dark));

cursor:pointer;

box-shadow:0 5px 14px rgba(41,71,199,.20)

}



.menu-toggle span{

display:block;

width:22px;

height:2px;

background:var(--white);

border-radius:10px;

transition:.25s ease

}



.main-menu{

max-width:980px;

margin:0 auto;

padding:0 20px 13px;

display:flex;

align-items:center;

justify-content:center;

flex-wrap:wrap;

gap:7px

}



.main-menu a{

padding:7px 13px;

color:#414D73;

font-size:14px;

font-weight:700;

border-radius:20px;

transition:background .2s ease,color .2s ease,transform .2s ease

}



.main-menu a:hover{

color:var(--white);

background:linear-gradient(135deg,var(--green),var(--green-dark));

transform:translateY(-1px)

}



.page-container{

width:100%;

max-width:900px;

margin:0 auto;

padding:25px 18px 60px

}



.hero-section{

position:relative;

overflow:hidden;

margin:0 0 25px;

padding:42px 25px 38px;

text-align:center;

border:1px solid rgba(106,44,255,.22);

border-radius:28px;

background:radial-gradient(circle at 50% 18%,rgba(106,44,255,.20) 0%,rgba(41,71,199,.14) 25%,rgba(230,252,255,.95) 58%,rgba(239,248,255,1) 100%);

box-shadow:0 12px 38px rgba(0,48,100,.1)

}



.hero-section::before{

content:"";

position:absolute;

width:320px;

height:320px;

top:-190px;

left:50%;

transform:translateX(-50%);

border-radius:50%;

background:radial-gradient(circle,rgba(106,44,255,.22),transparent 68%);

pointer-events:none

}



.hero-section::after{

content:"";

position:absolute;

width:280px;

height:180px;

right:-120px;

bottom:-100px;

border-radius:50%;

background:radial-gradient(circle,rgba(41,71,199,.20),transparent 70%);

pointer-events:none

}



.hero-content{

position:relative;

z-index:2

}



.hero-badge{

display:inline-block;

margin-bottom:17px;

padding:7px 15px;

border:1px solid rgba(106,44,255,.28);

border-radius:30px;

background:rgba(255,255,255,.76);

color:var(--primary-dark);

font-size:13px;

font-weight:800;

letter-spacing:.3px;

box-shadow:0 4px 12px rgba(0,32,80,.05)

}



.hero-logo{

display:block;

width:205px;

height:205px;

margin:3px auto 17px;

object-fit:contain;

border-radius:28px;

background:transparent;

padding:0;

border:0;

box-shadow:0 12px 32px rgba(41,71,199,.24);

transition:transform .35s ease,box-shadow .35s ease

}



.hero-logo:hover{

transform:scale(1.025);

box-shadow:0 14px 38px rgba(41,71,199,.28)

}



.hero-section h1{

max-width:760px;

margin:0 auto 15px;

color:var(--dark-green);

font-size:clamp(28px,5vw,43px);

line-height:1.2;

letter-spacing:-.7px;

font-weight:850

}



.hero-section h1::after{

content:"";

display:block;

width:70px;

height:4px;

margin:16px auto 0;

border-radius:10px;

background:linear-gradient(90deg,var(--primary),var(--gold),var(--green))

}



.hero-text{

max-width:720px;

margin:20px auto 23px;

color:#59627D;

font-size:16px;

line-height:1.8

}



.hero-buttons,

.final-buttons{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:10px;

margin-top:22px

}



.btn{

display:inline-flex;

align-items:center;

justify-content:center;

min-height:46px;

padding:11px 19px;

border:1px solid transparent;

border-radius:var(--radius-button);

font-size:14px;

font-weight:800;

line-height:1.2;

cursor:pointer;

transition:transform .2s ease,box-shadow .2s ease,background .2s ease

}



.btn:hover{

transform:translateY(-2px);

box-shadow:0 8px 18px rgba(0,32,80,.15)

}



.btn-primary{

color:var(--white);

background:linear-gradient(135deg,#6A2CFF 0%,#3D3CCB 48%,#2947C7 100%);

box-shadow:0 5px 14px rgba(41,71,199,.20)

}



.btn-outline{

color:var(--green-dark);

background:var(--white);

border-color:rgba(0,176,208,.45)

}



.btn-outline:hover{

color:var(--white);

background:var(--green)

}



.btn-secondary{

color:var(--white);

background:linear-gradient(135deg,#5A35E8 0%,#2947C7 100%);

box-shadow:0 5px 14px rgba(29,49,143,.20)

}



.hero-note{

max-width:700px;

margin:23px auto 0;

padding:11px 15px;

border-left:4px solid var(--gold);

border-radius:9px;

background:rgba(255,255,255,.68);

color:#626B88;

text-align:left;

font-size:13px

}



.content-card{

margin:0 0 21px;

padding:27px 25px;

background:rgba(255,255,255,.96);

border:1px solid var(--border);

border-radius:var(--radius-card);

box-shadow:var(--shadow);

transition:box-shadow .25s ease,transform .25s ease

}



.content-card:hover{

box-shadow:var(--shadow-hover)

}



.section-heading{

display:flex;

align-items:flex-start;

gap:13px;

margin-bottom:17px

}



.section-number{

flex:0 0 auto;

min-width:43px;

height:43px;

display:inline-flex;

align-items:center;

justify-content:center;

padding:5px 8px;

border-radius:13px;

color:var(--white);

background:linear-gradient(135deg,var(--primary),var(--gold));

font-size:11px;

font-weight:900;

box-shadow:0 5px 12px rgba(41,71,199,.20)

}



.section-heading h2{

margin:0 0 2px;

color:var(--dark-green);

font-size:clamp(22px,4vw,29px);

line-height:1.3;

letter-spacing:-.3px

}



.section-heading p{

margin:0;

color:var(--muted);

font-size:13px

}



.content-card p{

margin:0 0 15px;

color:var(--text);

font-size:15px

}



.content-card p:last-child{

margin-bottom:0

}



.content-card strong{

color:#1B2864;

font-weight:800

}



.content-card h3{

margin:22px 0 9px;

color:var(--green-dark);

font-size:19px;

line-height:1.4

}



.info-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:12px;

margin-top:20px

}



.info-box{

padding:17px;

border:1px solid #E0E3F2;

border-radius:15px;

background:linear-gradient(145deg,#FFFFFF,#F3F1FF);

transition:transform .2s ease,box-shadow .2s ease

}



.info-box:hover{

transform:translateY(-3px);

box-shadow:0 8px 20px rgba(41,71,199,.10)

}



.info-box strong{

display:block;

margin-bottom:5px;

color:var(--primary-dark);

font-size:16px

}



.info-box p{

margin:0;

font-size:13px;

line-height:1.6

}



.notice-box{

margin:20px 0 2px;

padding:17px 18px;

border-left:5px solid var(--green);

border-radius:12px;

background:linear-gradient(135deg,#F0EEFF,#f8fdff)

}



.notice-box.warning{

border-left-color:var(--primary);

background:linear-gradient(135deg,#F0EEFF,#FAF9FF)

}



.notice-box strong{

display:block;

margin-bottom:5px;

color:var(--green-dark);

font-size:15px

}



.notice-box.warning strong{

color:var(--primary-dark)

}



.notice-box p{

margin:0;

font-size:14px

}



.check-list{

margin:12px 0 18px;

padding:0;

list-style:none

}



.check-list li{

position:relative;

margin-bottom:9px;

padding:9px 12px 9px 36px;

border-radius:10px;

background:#F7F6FF;

color:#5D6683;

font-size:14px;

border:1px solid #E5E4F2

}



.check-list li::before{

content:"✓";

position:absolute;

left:12px;

top:7px;

color:var(--green);

font-size:16px;

font-weight:900

}



.step-list{

counter-reset:steps;

margin:13px 0 18px;

padding:0;

list-style:none

}



.step-list li{

position:relative;

counter-increment:steps;

margin-bottom:10px;

padding:11px 13px 11px 49px;

border:1px solid #E0E3F2;

border-radius:12px;

background:#F8F7FF;

font-size:14px;

color:#5C6580

}



.step-list li::before{

content:counter(steps);

position:absolute;

left:11px;

top:8px;

width:29px;

height:29px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

color:var(--white);

background:linear-gradient(135deg,var(--green),var(--green-dark));

font-size:12px;

font-weight:900

}



.feature-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:13px;

margin-top:20px

}



.feature-box{

padding:20px 17px;

border:1px solid #E0E3F2;

border-radius:17px;

background:linear-gradient(145deg,#FFFFFF,#f0fbff);

transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease

}



.feature-box:hover{

transform:translateY(-4px);

border-color:rgba(106,44,255,.28);

box-shadow:0 10px 25px rgba(41,71,199,.10)

}



.feature-icon{

width:43px;

height:43px;

margin-bottom:11px;

display:flex;

align-items:center;

justify-content:center;

border-radius:13px;

color:var(--white);

background:linear-gradient(135deg,var(--primary),var(--gold));

font-size:10px;

font-weight:900;

letter-spacing:.5px

}



.feature-box h3{

margin:0 0 6px;

font-size:17px;

color:var(--green-dark)

}



.feature-box p{

margin:0;

font-size:13px;

line-height:1.65

}



.screenshot-area{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:13px;

margin-top:20px

}



.screenshot-placeholder{

min-height:210px;

padding:25px 15px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

border:2px dashed #DDE0F0;

border-radius:17px;

background:linear-gradient(145deg,#FBFAFF,#F0EFFF)

}



.screenshot-placeholder span{

display:inline-block;

margin-bottom:8px;

padding:5px 10px;

border-radius:20px;

background:var(--gold-light);

color:var(--gold-dark);

font-size:11px;

font-weight:800

}



.screenshot-placeholder strong{

margin-bottom:4px;

color:var(--green-dark);

font-size:15px

}



.screenshot-placeholder p{

margin:0;

color:var(--muted);

font-size:12px

}



.two-column-info{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:16px;

margin-top:18px

}



.two-column-info>div{

padding:18px;

border:1px solid #dfe8f1;

border-radius:15px;

background:#F7F6FF

}



.two-column-info h3{

margin:0 0 9px;

font-size:17px

}



.two-column-info ul{

margin:0;

padding-left:19px

}



.two-column-info li{

margin-bottom:7px;

color:#596982;

font-size:14px

}



.process-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:12px;

margin-top:20px

}



.process-item{

position:relative;

padding:19px 14px;

text-align:center;

border:1px solid #dfe8f1;

border-radius:16px;

background:linear-gradient(145deg,#FFFFFF,#eefaff)

}



.process-item>span{

width:39px;

height:39px;

margin:0 auto 10px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

color:var(--white);

background:linear-gradient(135deg,var(--primary),var(--gold));

font-size:14px;

font-weight:900

}



.process-item h3{

margin:0 0 5px;

font-size:16px

}



.process-item p{

margin:0;

font-size:12px;

line-height:1.6

}



.pros-cons{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

margin-top:20px

}



.pros-box,

.cons-box{

padding:20px;

border-radius:17px;

border:1px solid #dfe8f2

}



.pros-box{

background:linear-gradient(145deg,#F0EEFF,#FFFFFF)

}



.cons-box{

background:linear-gradient(145deg,#F0EEFF,#FFFFFF)

}



.pros-box h3,

.cons-box h3{

margin:0 0 12px;

font-size:18px

}



.pros-box h3{

color:var(--green-dark)

}



.cons-box h3{

color:var(--primary-dark)

}



.pros-box ul,

.cons-box ul{

margin:0;

padding-left:20px

}



.pros-box li,

.cons-box li{

margin-bottom:8px;

font-size:14px;

color:#596982

}



.support-box{

margin-top:18px;

padding:18px;

border-radius:15px;

background:linear-gradient(135deg,#F0EEFF,#F7F6FF);

border:1px solid #DDDFF0

}



.support-box strong{

display:block;

margin-bottom:4px;

color:var(--primary-dark);

font-size:17px

}



.support-box p{

margin:0;

font-size:14px

}



.faq-list{

margin-top:17px

}



.faq-list details{

margin-bottom:10px;

overflow:hidden;

border:1px solid #dfe8f1;

border-radius:13px;

background:#F8F7FF;

transition:border-color .2s ease,background .2s ease

}



.faq-list details[open]{

border-color:rgba(0,208,192,.35);

background:#FAF9FF

}



.faq-list summary{

position:relative;

padding:15px 43px 15px 16px;

color:var(--green-dark);

font-size:15px;

font-weight:800;

cursor:pointer;

list-style:none

}



.faq-list summary::-webkit-details-marker{

display:none

}



.faq-list summary::after{

content:"+";

position:absolute;

right:16px;

top:11px;

color:var(--primary);

font-size:23px;

font-weight:400

}



.faq-list details[open] summary::after{

content:"−"

}



.faq-list details p{

margin:0;

padding:0 16px 16px;

color:#626f86;

font-size:14px;

line-height:1.7

}



.conclusion-card{

background:linear-gradient(145deg,#eafbff,#f4fbff);

border-color:#DDDFF0

}



.conclusion-card .section-number{

background:linear-gradient(135deg,var(--green),var(--primary))

}



.site-footer{

margin-top:10px;

background:linear-gradient(145deg,#080D35,#121E6B);

color:rgba(255,255,255,.85)

}



.footer-inner{

width:100%;

max-width:900px;

margin:0 auto;

padding:38px 20px 20px

}



.footer-brand{

display:flex;

align-items:flex-start;

gap:15px;

padding-bottom:23px;

border-bottom:1px solid rgba(255,255,255,.14)

}



.footer-brand img{

width:58px;

height:58px;

flex:0 0 auto;

object-fit:contain;

border-radius:15px;

background:transparent;

padding:0;

box-shadow:0 5px 16px rgba(0,0,0,.22)

}



.footer-brand h3{

margin:0 0 4px;

color:var(--white);

font-size:22px

}



.footer-brand p{

max-width:650px;

margin:0;

color:rgba(255,255,255,.76);

font-size:13px;

line-height:1.65

}



.footer-links{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:7px 15px;

padding:21px 0

}



.footer-links a{

color:rgba(255,255,255,.78);

font-size:13px;

font-weight:700;

transition:color .2s ease

}



.footer-links a:hover{

color:#B8A6FF

}



.footer-bottom{

padding-top:17px;

border-top:1px solid rgba(255,255,255,.12);

text-align:center

}



.footer-bottom p{

margin:0;

color:rgba(255,255,255,.6);

font-size:12px

}



.site-header,

main,

.site-footer{

max-width:100%

}



.hero-logo,

.brand img,

.footer-brand img{

image-rendering:auto

}



a:focus-visible,

button:focus-visible,

summary:focus-visible{

outline:3px solid rgba(106,44,255,.45);

outline-offset:3px

}



.related-platforms{

padding:35px 20px;

margin-top:40px;

background:#f5f9fd;

border-top:1px solid #E0E3F2

}



.related-container{

max-width:1100px;

margin:0 auto

}



.related-platforms h2{

text-align:center;

margin:0 0 8px;

font-size:26px;

font-weight:700;

color:#0B124D

}



.related-description{

text-align:center;

margin:0 auto 25px;

font-size:14px;

color:#66708D

}



.platform-grid{

display:grid!important;

grid-template-columns:repeat(4,1fr)!important;

gap:12px!important;

width:100%

}



.platform-card{

display:flex!important;

align-items:center!important;

width:100%;

min-height:58px;

padding:9px 12px!important;

box-sizing:border-box;

background:#FFFFFF;

border:1px solid #DDE1F1;

border-radius:9px;

text-decoration:none!important;

color:#0B124D!important;

gap:10px;

transition:all .2s ease

}



.platform-card:hover{

transform:translateY(-2px);

border-color:#C7CDE5;

box-shadow:0 5px 15px rgba(0,0,0,.06)

}



.platform-card img{

width:34px!important;

height:34px!important;

min-width:34px!important;

min-height:34px!important;

padding:3px;

box-sizing:border-box;

object-fit:contain;

background:#FFFFFF;

border:1px solid #E1E4F2;

border-radius:7px;

display:block

}



.platform-card span{

font-size:14px!important;

font-weight:600;

line-height:1.2;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap

}



@media(max-width:900px){

.platform-grid{

grid-template-columns:repeat(3,1fr)!important

}

}



@media(max-width:800px){

.page-container{

max-width:760px;

padding:20px 15px 45px

}



.info-grid,

.feature-grid,

.screenshot-area,

.process-grid{

grid-template-columns:repeat(2,1fr)

}

}



@media(max-width:680px){

html{

scroll-padding-top:76px

}



.header-inner{

min-height:68px;

padding:8px 14px

}



.brand{

font-size:20px;

gap:9px

}



.brand img{

width:47px;

height:47px;

padding:0

}



.menu-toggle{

display:flex

}



.main-menu{

display:none;

max-width:none;

padding:8px 14px 14px;

flex-direction:column;

align-items:stretch;

gap:4px;

background:#FFFFFF;

border-top:1px solid #e5edf4

}



.main-menu.active{

display:flex

}



.main-menu a{

width:100%;

padding:11px 13px;

border-radius:10px;

text-align:left;

background:#F7F6FF

}



.main-menu a:hover{

transform:none

}



.page-container{

padding:14px 11px 35px

}



.hero-section{

padding:30px 15px 27px;

border-radius:21px

}



.hero-logo{

width:170px;

height:170px;

padding:0;

margin-bottom:15px

}



.hero-section h1{

font-size:clamp(25px,7vw,34px);

letter-spacing:-.4px

}



.hero-text{

font-size:14px;

line-height:1.75

}



.hero-buttons,

.final-buttons{

flex-direction:column;

width:100%;

gap:9px

}



.hero-buttons .btn,

.final-buttons .btn{

width:100%;

min-height:45px

}



.hero-note{

font-size:12px;

padding:10px 12px

}



.content-card{

padding:21px 16px;

border-radius:18px;

margin-bottom:15px

}



.section-heading{

gap:10px;

margin-bottom:14px

}



.section-number{

min-width:38px;

height:38px;

border-radius:11px;

font-size:10px

}



.section-heading h2{

font-size:21px

}



.section-heading p{

font-size:12px

}



.content-card p{

font-size:14px

}



.content-card h3{

font-size:18px

}



.info-grid,

.feature-grid,

.screenshot-area,

.process-grid,

.two-column-info,

.pros-cons{

grid-template-columns:1fr

}



.info-box{

padding:15px

}



.feature-box{

padding:17px 15px

}



.screenshot-placeholder{

min-height:180px

}



.process-item{

padding:18px 14px

}



.pros-box,

.cons-box{

padding:17px

}



.footer-inner{

padding:30px 15px 18px

}



.footer-brand{

gap:11px

}



.footer-brand img{

width:50px;

height:50px;

padding:0

}



.footer-brand h3{

font-size:19px

}



.footer-brand p{

font-size:12px

}



.footer-links{

justify-content:flex-start;

gap:8px 13px

}



.footer-links a{

font-size:12px

}



.related-platforms{

padding:30px 12px

}



.related-platforms h2{

font-size:23px

}



.related-description{

font-size:13px;

margin-bottom:20px

}



.platform-grid{

grid-template-columns:repeat(2,1fr)!important;

gap:10px!important

}



.platform-card{

min-height:54px;

padding:8px 9px!important;

gap:8px

}



.platform-card img{

width:30px!important;

height:30px!important;

min-width:30px!important;

min-height:30px!important

}



.platform-card span{

font-size:12px!important

}

}



@media(max-width:390px){

.header-inner{

padding-left:11px;

padding-right:11px

}



.brand{

font-size:18px

}



.brand img{

width:43px;

height:43px;

padding:0

}



.hero-section{

padding:25px 12px

}



.hero-logo{

width:145px;

height:145px;

padding:0

}



.hero-section h1{

font-size:24px

}



.content-card{

padding:19px 14px

}



.section-heading h2{

font-size:19px

}



.section-number{

min-width:35px;

height:35px;

font-size:9px

}



.check-list li,

.step-list li{

font-size:13px

}



.faq-list summary{

padding:13px 39px 13px 13px;

font-size:14px

}



.faq-list details p{

padding:0 13px 14px;

font-size:13px

}

}



@media(max-width:360px){

.platform-grid{

grid-template-columns:1fr!important

}

}



@media(prefers-reduced-motion:reduce){

html{

scroll-behavior:auto

}



*,

*::before,

*::after{

transition:none!important;

animation:none!important

}

}