:root{
--primary:#00d0c0;
--primary-dark:#00a0e0;
--primary-light:#e8fffb;
--green:#00bfae;
--green-dark:#007fa8;
--green-light:#e9fbff;
--gold:#00b8d4;
--gold-dark:#007c98;
--gold-light:#e8fbff;
--orange:#00c8d8;
--orange-light:#e6fbff;
--dark:#071a3d;
--dark-green:#04152f;
--text:#4d5c78;
--muted:#74819a;
--white:#fff;
--light:#f9fcff;
--background:#f3f8ff;
--border:#dfe7f2;
--shadow:0 8px 28px rgba(0,32,80,.08);
--shadow-hover:0 14px 38px rgba(0,32,80,.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,#f9fcff 0%,#f3f8ff 45%,#eef8ff 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 #dfe7f2;
box-shadow:0 4px 18px rgba(0,32,80,.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:#fff;
padding:3px;
border:1px solid rgba(0,208,192,.16);
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(0,160,224,.2)
}

.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:#405575;
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(0,208,192,.25);
border-radius:28px;
background:radial-gradient(circle at 50% 18%,rgba(0,208,192,.2) 0%,rgba(0,176,208,.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(0,208,192,.25),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(0,160,224,.2),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(0,208,192,.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:#fff;
padding:6px;
border:1px solid rgba(0,208,192,.16);
box-shadow:0 10px 30px rgba(0,115,180,.22);
transition:transform .35s ease,box-shadow .35s ease
}

.hero-logo:hover{
transform:scale(1.025);
box-shadow:0 14px 38px rgba(0,115,180,.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:#52627e;
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,#00d0c0,#00a0e0);
box-shadow:0 5px 14px rgba(0,160,224,.2)
}

.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,#00c8d8,#007fa8);
box-shadow:0 5px 14px rgba(0,127,168,.2)
}

.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:#5d6c86;
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(0,160,224,.2)
}

.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:#173b63;
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 #dfeaf2;
border-radius:15px;
background:linear-gradient(145deg,#fff,#f1faff);
transition:transform .2s ease,box-shadow .2s ease
}

.info-box:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,111,160,.1)
}

.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,#e9fbff,#f8fdff)
}

.notice-box.warning{
border-left-color:var(--primary);
background:linear-gradient(135deg,#e9fbff,#f9fcff)
}

.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:#f7fbff;
color:#586982;
font-size:14px;
border:1px solid #e5eef5
}

.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 #e1eaf3;
border-radius:12px;
background:#f8fbff;
font-size:14px;
color:#56657f
}

.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 #dfeaf2;
border-radius:17px;
background:linear-gradient(145deg,#fff,#f0fbff);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}

.feature-box:hover{
transform:translateY(-4px);
border-color:rgba(0,208,192,.28);
box-shadow:0 10px 25px rgba(0,111,160,.1)
}

.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 #d7e8f0;
border-radius:17px;
background:linear-gradient(145deg,#fbfdff,#edfaff)
}

.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:#f7fbff
}

.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,#fff,#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,#e9fbff,#fff)
}

.cons-box{
background:linear-gradient(145deg,#e8faff,#fff)
}

.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,#e8fbff,#f5fbff);
border:1px solid #dceaf1
}

.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:#f8fbff;
transition:border-color .2s ease,background .2s ease
}

.faq-list details[open]{
border-color:rgba(0,208,192,.35);
background:#f9fcff
}

.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:#dceaf1
}

.conclusion-card .section-number{
background:linear-gradient(135deg,var(--green),var(--primary))
}

.site-footer{
margin-top:10px;
background:linear-gradient(145deg,#00102f,#003b68);
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:#fff;
padding:4px;
box-shadow:0 5px 15px rgba(0,0,0,.2)
}

.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:#75f4e8
}

.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(0,208,192,.45);
outline-offset:3px
}

.related-platforms{
padding:35px 20px;
margin-top:40px;
background:#f5f9fd;
border-top:1px solid #e0e9f2
}

.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:#061936
}

.related-description{
text-align:center;
margin:0 auto 25px;
font-size:14px;
color:#63738e
}

.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:#fff;
border:1px solid #dce6f0;
border-radius:9px;
text-decoration:none!important;
color:#061936!important;
gap:10px;
transition:all .2s ease
}

.platform-card:hover{
transform:translateY(-2px);
border-color:#cbd9e5;
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:#fff;
border:1px solid #e3ebf2;
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:3px
}

.menu-toggle{
display:flex
}

.main-menu{
display:none;
max-width:none;
padding:8px 14px 14px;
flex-direction:column;
align-items:stretch;
gap:4px;
background:#fff;
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:#f7fbff
}

.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:5px;
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:3px
}

.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:2px
}

.hero-section{
padding:25px 12px
}

.hero-logo{
width:145px;
height:145px;
padding:4px
}

.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
}
}