/* Shared landing-page styles. Edit this file for all visual changes. */
.faq-question .plus-glyph{
	display:block;
	font-family:Arial,sans-serif;
	font-size:20px;
	font-weight:400;
	line-height:1
}

:root{
	--blue:#89C3F4;
	--blue-light:#a9d6fa;
	--blue-deep:#2e5f88;
	--green:#91cd6b;
	--ink:#294b67;
	--paper:#f9fbfd
}
*{
	box-sizing:border-box
}
html{
	scroll-behavior:auto
}
body{
	margin:0;
	color:var(--ink);
	font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
	background:#fff;
	line-height:1.7
}
a{
	color:inherit;
	text-decoration:none
}
.section-space{
	padding:100px 0
}
.section-kicker{
	display:inline-flex;
	padding:5px 14px;
	border-radius:99px;
	background:#eaf6ff;
	color:var(--blue-deep);
	font-size:.88rem;
	font-weight:700;
	letter-spacing:.08em
}
.section-title{
	margin:14px 0 10px;
	color:var(--blue-deep);
	font-size:clamp(1.85rem,4vw,2.7rem);
	font-weight:800;
	letter-spacing:.02em
}
.section-lead{
	color:#63819a
}
.navbar{
	padding:18px 0;
	background:rgba(255,255,255,.92);
	backdrop-filter:blur(12px)
}
.brand{
	display:flex;
	align-items:center;
	gap:9px;
	font-size:1.25rem;
	font-weight:800;
	color:var(--blue-deep)
}
.brand-mark{
	position:relative;
	width:38px;
	height:38px;
	display:grid;
	place-items:center;
	overflow:hidden;
	border-radius:13px;
	background:#e7f5ff;
	font-size:22px
}
.brand-mark img{
	position:relative;
	z-index:1;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover
}
.logo-fallback{
	position:absolute;
	inset:0;
	display:grid;
	place-items:center
}
.navbar-nav .nav-link{
	padding:.5rem 1rem!important;
	color:#5c7d96;
	font-weight:600
}
.navbar-nav .nav-link:hover{
	color:var(--blue-deep)
}
.btn-download{
	border:0;
	border-radius:14px;
	padding:11px 21px;
	color:#174f7b;
	background:var(--blue);
	font-weight:800;
	box-shadow:0 7px 0 #70addd;
	transition:.2s ease
}
.btn-download:hover{
	color:#174f7b;
	background:#a1d0f6;
	transform:translateY(-2px);
	box-shadow:0 9px 0 #70addd
}
.btn-download:active{
	transform:translateY(4px);
	box-shadow:0 3px 0 #70addd
}
.hero{
	position:relative;
	overflow:hidden;
	min-height:650px;
	padding:150px 0 85px;
	background:linear-gradient(135deg,#f6fbff 0%,#e2f2ff 56%,#d4edff 100%)
}
.hero::before,.hero::after{
	content:"";
	position:absolute;
	border-radius:50%;
	pointer-events:none
}
.hero::before{
	width:420px;
	height:420px;
	right:-160px;
	top:-150px;
	background:rgba(169,223,132,.24)
}
.hero::after{
	width:180px;
	height:180px;
	left:-60px;
	bottom:-75px;
	background:rgba(137,195,244,.25)
}
.hero-copy{
	position:relative;
	z-index:1
}
.hero-tag{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:7px 14px;
	border:1px solid #c8e5fb;
	border-radius:99px;
	color:var(--blue-deep);
	background:#fff;
	font-size:.88rem;
	font-weight:700
}
.hero h1{
	max-width:600px;
	margin:18px 0 17px;
	color:var(--blue-deep);
	font-size:clamp(2.45rem,5vw,4.35rem);
	font-weight:900;
	line-height:1.24;
	letter-spacing:.025em
}
.hero h1 em{
	color:#438bc4;
	font-style:normal
}
.hero-subtitle{
	max-width:500px;
	margin-bottom:28px;
	color:#567893;
	font-size:1.12rem
}
.hero-note{
	margin:20px 0 0;
	color:#7392aa;
	font-size:.88rem
}
.hero-note span,.float-card b{
	color:#6aab48;
	font-weight:700
}
.hero-visual{
	position:relative;
	z-index:1;
	min-height:420px;
	display:grid;
	place-items:center
}
.cloud{
	position:absolute;
	border-radius:99px;
	background:rgba(255,255,255,.78)
}
.cloud-one{
	width:92px;
	height:25px;
	top:38px;
	right:8%
}
.cloud-two{
	width:62px;
	height:18px;
	left:2%;
	bottom:84px
}
.phone{
	position:relative;
	width:248px;
	aspect-ratio:9/18.8;
	padding:10px;
	overflow:hidden;
	border:8px solid #356fa3;
	border-radius:36px;
	background:#fff;
	box-shadow:0 25px 45px rgba(53,111,163,.27)
}
.phone::before{
	content:"";
	position:absolute;
	z-index:3;
	width:86px;
	height:18px;
	border-radius:0 0 13px 13px;
	background:#356fa3;
	left:50%;
	top:-1px;
	transform:translateX(-50%)
}
.phone img{
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:22px
}
.phone-placeholder{
	position:absolute;
	inset:10px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	border-radius:22px;
	color:#6e9bbc;
	background:linear-gradient(160deg,#e5f5ff,#f9fdff);
	text-align:center
}
.phone-placeholder .snail{
	margin-bottom:10px;
	font-size:50px
}
.hero-phone{
	transform:rotate(4deg)
}
.float-card{
	position:absolute;
	z-index:4;
	left:calc(50% - 180px);
	bottom:35px;
	padding:12px 17px;
	border:1px solid rgba(255,255,255,.9);
	border-radius:16px;
	color:#52718c;
	background:rgba(255,255,255,.92);
	box-shadow:0 12px 24px rgba(53,111,163,.13);
	font-size:.86rem;
	font-weight:700
}
.screens{
	background:var(--paper)
}
.screen-track{
	display:flex;
	gap:25px;
	justify-content:center;
	margin-top:46px;
	padding:6px 6px 18px;
	overflow-x:auto
}
.gallery-phone{
	flex:0 0 205px;
	width:205px;
	border-width:7px;
	border-color:#527fa7;
	border-radius:31px;
	box-shadow:0 15px 30px rgba(67,119,156,.17)
}
.gallery-phone::before{
	width:70px;
	height:14px;
	background:#527fa7
}
.gallery-phone .phone-placeholder{
	inset:8px;
	border-radius:19px;
	font-size:.85rem
}
.screen-label{
	margin-top:14px;
	color:#507590;
	text-align:center;
	font-weight:800
}
.teacher-showcase{
	max-width:1030px;
	margin:78px auto 0;
	padding-top:70px;
	border-top:1px solid #dcecf7
}
.teacher-shot{
	position:relative;
	min-height:230px;
	overflow:hidden;
	border:8px solid #527fa7;
	border-radius:20px;
	background:#fff;
	box-shadow:0 15px 30px rgba(67,119,156,.17)
}
.teacher-shot::before{
	content:"";
	position:absolute;
	z-index:3;
	top:0;
	left:0;
	width:100%;
	height:18px;
	background:#527fa7
}
.teacher-shot img{
	position:relative;
	z-index:1;
	display:block;
	width:100%;
	height:100%;
	min-height:230px;
	object-fit:cover
}
.teacher-placeholder{
	position:absolute;
	inset:18px 0 0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:#6e9bbc;
	background:linear-gradient(160deg,#e5f5ff,#f9fdff);
	font-size:.94rem
}
.teacher-placeholder strong{
	margin-bottom:5px;
	color:var(--blue-deep);
	font-size:1.1rem
}
.parent-coming{
	max-width:760px;
	display:flex;
	align-items:center;
	gap:28px;
	margin:54px auto 0;
	padding:28px 32px;
	border:1px dashed #a9cfe9;
	border-radius:22px;
	background:rgba(255,255,255,.76);
	text-align:left
}
.parent-icon{
	width:72px;
	height:72px;
	flex:0 0 72px;
	display:grid;
	place-items:center;
	border-radius:23px;
	background:#f0f9e8;
	font-size:34px
}
.parent-coming h3{
	margin:0 0 4px;
	color:var(--blue-deep);
	font-size:1.2rem;
	font-weight:800
}
.parent-coming p{
	margin:0;
	color:#69869d;
	font-size:.93rem
}
.feature-card{
	height:100%;
	padding:34px 27px;
	border:1px solid #e2eff9;
	border-radius:22px;
	background:#fff;
	box-shadow:0 12px 34px rgba(53,111,163,.07);
	transition:.2s
}
.feature-card:hover{
	transform:translateY(-5px);
	box-shadow:0 17px 38px rgba(53,111,163,.13)
}
.feature-icon{
	width:61px;
	height:61px;
	display:grid;
	place-items:center;
	margin-bottom:20px;
	border-radius:20px;
	background:#e7f5ff;
	font-size:29px
}
.feature-card:nth-child(2) .feature-icon{
	background:#f0f9e8
}
.feature-card h3,.faq-question{
	color:var(--blue-deep);
	font-weight:800
}
.feature-card h3{
	font-size:1.25rem
}
.feature-card p{
	margin:9px 0 0;
	color:#69869d;
	font-size:.95rem
}
.faq-wrap{
	max-width:820px;
	margin:45px auto 0
}
.faq-item{
	overflow:hidden;
	margin-bottom:14px;
	border:1px solid #dfedf8;
	border-radius:16px;
	background:#fff
}
.faq-question{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:19px 22px;
	border:0;
	background:#fff;
	text-align:left;
	cursor:pointer
}
.faq-question .plus{
	width:25px;
	height:25px;
	flex:0 0 25px;
	display:grid;
	place-items:center;
	border-radius:50%;
	color:#fff;
	background:var(--blue);
	transition:.25s
}
.faq-item.active .plus{
	transform:rotate(45deg);
	background:var(--green)
}
.faq-answer{
	display:none;
	padding:0 55px 20px 22px;
	color:#69869d;
	font-size:.95rem
}
footer{
	padding:36px 0;
	border-top:1px solid #e8f0f6;
	color:#7892a6;
	font-size:.88rem
}
.footer-links a{
	margin-left:20px
}
.footer-links a:hover{
	color:var(--blue-deep)
}
.privacy-modal .modal-content{
	overflow:hidden;
	border:0;
	border-radius:24px;
	box-shadow:0 22px 60px rgba(37,79,112,.22)
}
.privacy-modal .modal-header{
	padding:25px 28px 16px;
	border:0
}
.privacy-modal .modal-title{
	color:var(--blue-deep);
	font-size:1.35rem;
	font-weight:800
}
.privacy-modal .modal-body{
	padding:4px 28px 25px;
	color:#597993
}
.privacy-modal .notice-box{
	max-height:min(42vh,340px);
	overflow-y:auto;
	padding:16px;
	border-radius:14px;
	background:#f3f9fd;
	font-size:.91rem;
	line-height:1.75
}
.privacy-modal .notice-box p{
	margin-bottom:.8rem
}
.privacy-modal .notice-box ol{
	padding-left:1.2rem
}
.privacy-modal .form-check{
	margin-top:21px;
	padding:13px 13px 13px 39px;
	border:1px solid #deebf5;
	border-radius:13px
}
.privacy-modal .form-check-input{
	margin-top:.35em
}
.privacy-modal .form-check-label{
	font-size:.91rem
}
.privacy-modal .form-check-label a{
	color:var(--blue-deep);
	text-decoration:underline;
	font-weight:700
}
.privacy-modal .modal-footer{
	padding:0 28px 28px;
	border:0
}
.privacy-modal .btn-confirm-download:disabled{
	opacity:.5;
	cursor:not-allowed;
	box-shadow:none;
	transform:none
}
@media(max-width:991.98px){
	.hero{
		padding-top:125px;
		text-align:center
	}
	.hero h1,.hero-subtitle{
		margin-left:auto;
		margin-right:auto
	}
	.hero-visual{
		margin-top:45px
	}
	.float-card{
		left:calc(50% - 170px)
	}
}
@media(max-width:575.98px){
	.section-space{
		padding:72px 0
	}
	.hero{
		min-height:0;
		padding-bottom:70px
	}
	.hero h1{
		font-size:2.45rem
	}
	.hero-phone{
		width:210px
	}
	.hero-visual{
		min-height:370px
	}
	.float-card{
		left:5px;
		bottom:5px
	}
	.screen-track{
		justify-content:flex-start
	}
	.parent-coming{
		align-items:flex-start;
		padding:24px
	}
	.footer-links{
		margin-top:10px
	}
	.footer-links a{
		margin:0 14px 0 0
	}
}