/*
 * Home redesign of 2026-10-13 (inc/home-2026-10.php): video section, 网站建设流程,
 * 关于我们, contact band and footer. Loaded after style.css / style-mobile.css /
 * page-sections.css / section-rhythm.css: the rules below only override what
 * those files set for the former markup. Measures come from the 1920px mockups.
 */

/* =========================================================================
   Price cards (every pricing grid: home, /pricing/, service pages): style.css rounds
   only the top-right corner of the illustration box, the top-left corner was square
   ========================================================================= */
ul.pricelist > li .canvas_animation {
	border-top-left-radius: 8px;
}

/* =========================================================================
   Shared button (blue pill of the mockups)
   ========================================================================= */
.sy-btn,
section.contactban.sy-cta button.sy-btn,
.sy-about .sy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	min-width: 9.5rem;
	margin: 0;
	padding: 0 2.2rem;
	border: 1px solid #32bee9;
	border-radius: 6px;
	background: #32bee9;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 3.1rem;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(50, 190, 233, 0.28);
	transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.sy-btn:hover,
section.contactban.sy-cta button.sy-btn:hover,
.sy-about .sy-btn:hover {
	background: #1ea9d7;
	border-color: #1ea9d7;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px rgba(50, 190, 233, 0.34);
}

.sy-btn--arrow::after {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	background: url('../img/bt_arrow.svg') no-repeat center / contain;
}

/* =========================================================================
   Video section
   ========================================================================= */
.sy-video {
	position: relative;
	overflow-x: clip;
}

.sy-video__stage {
	--k: 1;                                   /* scale of the decorations */
	--fl: calc(50% - min(50%, 500px));        /* left / right edge of the frame inside the stage */
	position: relative;
	padding: 1rem 0 3.5rem;
}

.sy-video__frame {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	margin: 0 auto;
	padding: 14px;
	border-radius: 18px;
	background: #252533;
	box-shadow: 0 26px 50px rgba(37, 37, 51, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sy-video__frame video,
.home .sy-video .video_ab video,
.video_ab .sy-video__frame video {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	border-radius: 8px;
	background: #191f2b;
}

.sy-video__deco {
	position: absolute;
	z-index: 2;
	height: auto;
	pointer-events: none;
}

.sy-video__deco--rocket {
	width: calc(228px * var(--k));
	left: calc(var(--fl) - 108px * var(--k));
	top: calc(-76px * var(--k));
}

.sy-video__deco--astro-left {
	width: calc(222px * var(--k));
	left: max(calc(var(--fl) - 241px * var(--k)), calc(50% - 50vw + 12px));
	top: calc(344px * var(--k));
}

.sy-video__deco--astro-right {
	width: calc(262px * var(--k));
	right: max(calc(var(--fl) - 242px * var(--k)), calc(50% - 50vw + 12px));
	top: calc(-93px * var(--k));
}

.sy-video__deco--comet {
	z-index: 0;
	width: calc(219px * var(--k));
	right: max(calc(var(--fl) - 209px * var(--k)), calc(50% - 50vw + 12px));
	top: calc(422px * var(--k));
}

@media (max-width: 1599px) {
	.sy-video__stage {
		--k: 0.8;
	}
}

@media (max-width: 1199px) {
	.sy-video__stage {
		--k: 0.6;
	}
}

@media (max-width: 899px) {
	.sy-video__deco {
		display: none;
	}
}

/* The illustrations hang below the frame: the next section's gap is reduced by that amount */
@media (min-width: 700px) {
	.home .sy-video + section.howitworks {
		padding-top: calc(var(--rhythm-gap, 7rem) - 2.5rem);
	}
}

/* =========================================================================
   网站建设流程
   ========================================================================= */
.sy-steps {
	position: relative;
	overflow-x: clip;
}

/* The band overlaps the last 2px of the steps section: the rubble of the astronaut is
   drawn right at the section edge (paint-contained), and rounding left a 1px white line */
@media (min-width: 700px) {
	.home section.sy-steps + section.sy-about {
		margin-top: -2px;
	}
}

/* The dark band comes right after the button in the mockup (58px). The gap is padding of
   the inner block, not a margin: the section is paint-contained (css/lazy-render.css), so
   the bottom-left astronaut has to stay inside its box to be drawn whole */
@media (min-width: 700px) {
	.home section.sy-steps {
		margin-bottom: 0;
	}

	.home .sy-steps__inner {
		padding-bottom: 3.6rem;
	}
}

.sy-steps__inner {
	--k: 1;
	position: relative;
}

/* page-sections.css gives every .ps-section 8rem below; the section carries the rhythm gap itself */
.sy-steps .sy-steps__inner.ps-section {
	margin-bottom: 0;
}

.sy-steps__deco {
	position: absolute;
	height: auto;
	pointer-events: none;
}

/* max(): never further out than the screen edge (the content box is centred: 50% - 50vw = distance to it) */
.sy-steps__deco--top {
	width: calc(212px * var(--k));
	right: max(calc(-100px * var(--k)), calc(50% - 50vw));
	top: calc(-0.5rem * var(--k));
}

/* Bottom-left astronaut: in the mockup its feet touch the dark band and its head stays
   under the step texts. Narrower screens: smaller, at the screen edge, same feet line */
.sy-steps__deco--bottom {
	width: 232px;
	left: -225px;
	bottom: -6px;                             /* the SVG has 6px of blank under the rubble: the rubble sits on the band */
}

@media (max-width: 1599px) {
	.sy-steps__inner {
		--k: 0.75;
	}
}

@media (max-width: 1699px) {
	.sy-steps__deco--bottom {
		width: 172px;
		left: calc(50% - 50vw + 14px);
		bottom: -4px;
	}
}

@media (max-width: 1399px) {
	.sy-steps__deco--bottom {
		width: 140px;
		bottom: -3px;
	}
}

@media (max-width: 1279px) {
	.sy-steps__deco {
		display: none;
	}
}

/* Proportions of the 1920px mockup: the 4 steps use the whole content width, each
   illustration is 272px wide (14.2vw) with air between them, and the line runs
   67px (4.2rem) under the illustrations. The list is the container the
   illustration width, the line and the rocket are computed from (cqw). */
.sy-steps .ps-steps__list.ps-steps--illustrated.ps-steps--4 {
	max-width: none;
}

.sy-steps .ps-steps--illustrated li {
	container-type: normal;                   /* cqw below refer to the list, not to each step */
	padding: 0 0.8rem;
}

.sy-steps__list {
	container-type: inline-size;
	--img-w: min(25cqw - 1.6rem, clamp(180px, 14.2vw, 272px));
	--line-top: calc(var(--img-w) * 2 / 3 + 4.2rem);
}

/* Edge-to-edge dashed line, drawn once by the list instead of per step */
.sy-steps__list::before,
.sy-steps__list::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(var(--line-top) - 1.5px);
	height: 3px;
	border-radius: 2px;
}

.sy-steps__list::before {
	left: calc(50% - 50vw);
	width: 100vw;
	background: repeating-linear-gradient(90deg, #cfe9f5 0 6px, transparent 6px 18px);
}

/* Solid orange part: from the left edge of the screen to the rocket */
.sy-steps__list::after {
	left: calc(50% - 50vw);
	width: calc(50vw - 50% + 26cqw);
	height: 5px;
	top: calc(var(--line-top) - 2.5px);
	background: linear-gradient(90deg, #fff 0%, #f7a531 35%, #f7a531 100%);
}

.sy-steps .ps-steps--illustrated li::before,
.sy-steps .ps-steps--illustrated li:first-child::before {
	display: none;
}

.sy-steps__rocket {
	position: absolute;
	z-index: 1;
	left: 26cqw;
	top: var(--line-top);
	width: 11.4cqw;
	max-width: 171px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.sy-steps__rocket img {
	display: block;
	width: 100%;
	height: auto;
}

/* Illustrations: the new drawings are 3:2, shown whole */
.sy-steps .ps-steps__media {
	width: var(--img-w);
	margin: 0 auto 4.2rem;
	aspect-ratio: 3 / 2;
	overflow: visible;
}

.sy-steps .ps-steps__media img {
	object-fit: contain;
	object-position: center bottom;
}

.sy-steps .ps-steps--illustrated .ps-steps__num {
	width: 3rem;
	height: 3rem;
	margin: -1.5rem auto 1.9rem auto;
	border: 4px solid #fff;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* li:nth-child(n) only raises the specificity above the per-step colours of page-sections.css */
.sy-steps .ps-steps--illustrated li:nth-child(n) .ps-steps__num {
	background: #35bae6;
}

.sy-steps .ps-steps--illustrated li:first-child .ps-steps__num {
	background: #f7a531;
}

.sy-steps .ps-steps__list h3 {
	margin-bottom: 0.7rem;
	font-size: 1.35rem;
	font-weight: 600;
	color: #191f2b;
}

.sy-steps .ps-steps__list p {
	max-width: 16rem;
	font-size: 1rem;
	line-height: 1.65rem;
	color: #5b5f66;
}

.sy-steps__cta {
	margin: 2.8rem 0 0;
	text-align: center;
}

/* Tablets in portrait (700-899px): two rows of two steps, no line (it only makes sense
   on one row), illustrations up to 220px */
@media (min-width: 700px) and (max-width: 899px) {
	.sy-steps .ps-steps__list.ps-steps--illustrated.ps-steps--4 {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
		row-gap: 2.5rem;
		--img-w: min(50cqw - 2.5rem, 220px);
	}

	.sy-steps__list::before,
	.sy-steps__list::after,
	.sy-steps__rocket {
		display: none;
	}

	.sy-steps .ps-steps__media {
		margin-bottom: 1.6rem;
	}
}

/* =========================================================================
   关于我们
   ========================================================================= */
.sy-about .skybackground {
	position: relative;
	overflow: hidden;
	background: #191f2b;
	font-family: inherit;
}

/* Soft glow top-left (behind the logo) */
.sy-about .skybackground::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle 330px at 19% 32%, rgba(51, 174, 241, 0.34), rgba(51, 174, 241, 0) 100%),
		radial-gradient(circle 520px at 14% 24%, rgba(64, 75, 91, 0.95), rgba(25, 31, 43, 0) 100%);
	pointer-events: none;
}

/* Room under the 了解更多 button for the planet and the watermark (172px in the mockup);
   the blog section that follows gets the usual white gap (the advantages block is hidden) */
@media (min-width: 700px) {
	.home section.aboutus.sy-about .skybackground {   /* outranks the 6rem of section-rhythm.css */
		padding-bottom: 10.5rem;
	}

	.home section.sy-about + section.inner {
		padding-top: var(--rhythm-gap, 7rem);
	}
}

@media (max-width: 699px) {
	.home section.sy-about + section.inner {
		padding-top: var(--rhythm-gap, 3rem);
	}
}

.sy-about .skybackground h2 {
	position: relative;
	z-index: 2;
	margin-bottom: 0;
	color: #fff;
	text-align: center;
	font-size: 2rem;
}

.sy-about__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 40.5%) minmax(0, 1fr);   /* mockup: text 566px, cards from 64% of the content */
	column-gap: 23.5%;
	align-items: start;
	margin-top: 3.2rem;
	min-height: 470px;                        /* room for the flying astronaut (card-relative) on short text columns */
}

@media (max-width: 1279px) {
	.sy-about__grid {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
		column-gap: 10%;
	}
}

.sy-about__logo {
	margin: 0.4rem 0 2rem;
}

.sy-about__logo img {
	width: 210px;
	height: auto;
}

.sy-about__text p {
	margin-bottom: 1.2rem;
	color: #fff;
	opacity: 0.85;
	font-size: 1.1rem;
	line-height: 2rem;
}

.sy-about__text p.sy-about__logo {
	opacity: 1;
}

.sy-about__text .sy-btn {
	margin-top: 1.2rem;
}

/* Figure cards: stacked, each one 66px further right, bleeding to the screen edge */
.sy-about__stats {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
}

.sy-about__stats li {
	--s: 0;
	position: relative;
	display: flex;
	align-items: center;
	width: calc(100% + 40vw);
	margin: 0 0 1rem calc(var(--s) * 66px);
	padding: 1.55rem 2.6rem;
	border-radius: 18px 0 0 18px;
	background: #1e2633 linear-gradient(90deg, rgba(53, 186, 230, 0.24), rgba(53, 186, 230, 0) 58%);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.sy-about__stats strong {
	display: inline-flex;
	align-items: baseline;
	font-family: Montserrat, 'Segoe UI', Arial, sans-serif;
	font-weight: 600;
	font-size: 3.3rem;
	line-height: 1;
	color: #35bae6;
	white-space: nowrap;
}

.sy-about__stats strong span {
	margin-left: 0.5rem;
	font-size: 1.3rem;
	font-weight: 500;
}

.sy-about__stats p {
	position: absolute;
	right: calc(40vw + var(--s) * 66px - 1.2rem);
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 500;
	white-space: nowrap;
}

/* Decorations */
.sy-about__deco {
	position: absolute;
	height: auto;
	pointer-events: none;
}

.sy-about__deco--planet {
	right: -15px;
	bottom: -4px;
	width: min(586px, 31vw);
	z-index: 1;
}

.sy-about__deco--astro {
	left: 55%;
	top: calc(0.9rem + 197px);
	width: 353px;
	z-index: 3;
}

.sy-about__deco--saturn {
	left: 58.6%;
	bottom: 107px;
	width: 84px;
	z-index: 1;
}

.sy-about__deco--teal {
	left: -30px;
	bottom: 113px;
	width: 110px;
	z-index: 1;
}

.sy-about__deco--stars-1 {
	left: 5px;
	top: 26px;
	width: 256px;
}

.sy-about__deco--stars-2 {
	left: 52.8%;
	bottom: 34px;
	width: 469px;
}

.sy-about__mark {
	position: absolute;
	left: -0.3em;
	bottom: -0.22em;
	z-index: 1;
	font-family: Montserrat, 'Segoe UI', Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(5rem, 9.4vw, 11.3rem);
	line-height: 1;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.06);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

@media (max-width: 1599px) {
	.sy-about__deco--astro {
		width: 290px;
	}
}

@media (max-width: 1279px) {
	.sy-about__deco--astro,
	.sy-about__deco--saturn,
	.sy-about__deco--stars-2 {
		display: none;
	}
}

/* Tablets: one column, cards full width */
@media (max-width: 1099px) {
	.sy-about__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.5rem;
	}

	.sy-about__stats {
		position: relative;
		z-index: 2;
	}

	.sy-about__stats li {
		width: 100%;
		margin-left: 0;
		border-radius: 18px;
		justify-content: space-between;
	}

	.sy-about__stats p {
		position: static;
		transform: none;
	}

	.sy-about__deco--planet {
		width: 40vw;
		opacity: 0.8;
	}
}

/* =========================================================================
   Contact band ("START NOW")
   ========================================================================= */
section.contactban.sy-cta {
	position: relative;
	margin: 0;
	padding: 2.6rem 0 12rem;
	clear: both;
	background: linear-gradient(180deg, #fff 0%, #f4fafd 50%, #d8eff9 100%);
	background-size: auto;
	text-align: center;
}

.sy-cta__inner {
	position: relative;
	z-index: 1;
}

.sy-cta__icon {
	display: block;
	width: 49px;
	height: 52px;
	margin: 0 auto 0.5rem;
}

section.contactban.sy-cta p.sy-cta__title {
	position: relative;
	z-index: 1;
	margin: 0 0 2rem;
	color: #191f2b;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
}

section.contactban.sy-cta button.sy-btn {
	margin-top: 0;
	padding: 0 2.6rem;
	line-height: 3.4rem;
	font-size: 1.15rem;
	box-shadow: 0 0 0 7px rgba(50, 190, 233, 0.16), 0 12px 26px rgba(50, 190, 233, 0.3);
}

section.contactban.sy-cta button.sy-btn:hover {
	border-color: #1ea9d7;
	background: #1ea9d7;
	color: #fff;
}

.sy-cta__mark {
	position: absolute;
	left: 50%;
	bottom: 1.4rem;
	z-index: 0;
	transform: translateX(-50%);
	font-family: Montserrat, 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(4rem, 11vw, 13.2rem);
	line-height: 1;
	letter-spacing: 0.02em;
	color: rgba(53, 189, 232, 0.17);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.sy-cta__art {
	position: absolute;
	z-index: 3;
	height: auto;
	pointer-events: none;
}

/* Offsets from the title/button block (.sy-cta__inner): the footer top is 152px below it */
.sy-cta__art--left {
	left: max(-8.8%, calc(50% - 50vw + 12px));     /* never past the screen edge */
	bottom: -13rem;                           /* ends 56px below the footer top, over its rounded corner */
	width: min(508px, 27vw);
}

.sy-cta__art--right {
	right: max(-6.1%, calc(50% - 50vw + 12px));
	bottom: -8.4rem;                          /* ends 17px above the footer top */
	width: min(489px, 26vw);
}

@media (max-width: 1099px) {
	.sy-cta__art--left {
		left: max(-4%, calc(50% - 50vw + 12px));
		width: 24vw;
		bottom: -8rem;
	}

	.sy-cta__art--right {
		right: max(-3%, calc(50% - 50vw + 12px));
		width: 23vw;
		bottom: -5rem;
	}
}

@media (max-width: 899px) {
	.sy-cta__art {
		display: none;
	}
}

/* =========================================================================
   Footer
   ========================================================================= */
footer.sy-footer {
	position: relative;
	margin-top: -40px;
	padding-top: 5rem;
	border-radius: 40px 40px 0 0;
	background: #191f2b;
	overflow: hidden;
	color: #fff;
	font-size: 0.95rem;
}

footer.sy-footer > .content {
	position: relative;
	padding-bottom: 6.5rem;
}

footer.sy-footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.2s ease;
}

footer.sy-footer a:hover {
	color: #fff;
}

.sy-footer__head {
	display: flex;
	align-items: center;
	gap: 3rem;
	margin-bottom: 6.2rem;
}

.sy-footer__head img {
	width: 140px;
	height: auto;
}

.sy-footer__head p {
	flex: 1;
	margin: 0;
	padding-right: 140px;
	text-align: center;
	color: #fff;
	font-size: 1.35rem;
	font-weight: 500;
	letter-spacing: 1px;
}

.sy-footer__cols {
	position: relative;
}

/* Neutralise the former footer layout rules (floats / widths / paddings on div.content > div > ul > li) */
footer.sy-footer div.content > div {
	padding: 0;
	width: auto;
}

footer.sy-footer .sy-footer__menus > li,
footer.sy-footer .sy-footer__menus > li:last-child {
	float: none;
	width: auto;
}

footer.sy-footer .sy-footer__menus > li:last-child img {
	position: static;
	width: auto;
}

footer.sy-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sy-footer__menus {
	display: grid;
	grid-template-columns: 1.28fr 0.95fr minmax(447px, 1fr);   /* 571 / 422 / 447 px in the mockup */
	column-gap: 0;
	align-items: start;
}

footer.sy-footer .sy-footer__col .footerTitle {
	margin: 0 0 1.1rem;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 1px;
}

footer.sy-footer .sy-footer__col li {
	margin: 0;
	padding: 0;
	line-height: 1.9rem;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.72);
}

footer.sy-footer .sy-footer__card {
	margin-top: -2.8rem;                       /* the card starts 45px above the column titles */
	padding: 2.8rem 2.5rem 2rem;
	border-radius: 18px;
	background: #2b3442;
}

footer.sy-footer .sy-footer__contact li.icon {
	position: relative;
	margin-bottom: 0.75rem;
	padding-left: 2.3rem;
	line-height: 1.6rem;
	color: rgba(255, 255, 255, 0.82);
}

footer.sy-footer .sy-footer__contact li.icon::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1rem;
	width: 1.35rem;
	height: 1.35rem;
	background: url('../img/home-2026-10/footer-phone.svg') no-repeat center / contain;
}

footer.sy-footer .sy-footer__contact li.icon.address::before {
	background-image: url('../img/home-2026-10/footer-pin.svg');
}

footer.sy-footer .sy-footer__contact li.icon.area::before {
	background-image: url('../img/home-2026-10/footer-globe.svg');
}

footer.sy-footer .sy-footer__contact li.icon.email::before {
	background-image: url('../img/home-2026-10/footer-mail.svg');
}

.sy-footer__astro {
	position: absolute;
	right: 23.2%;
	bottom: -6.8rem;                          /* feet 5px into the copyright strip, like the mockup */
	z-index: 2;
	width: 186px;
	height: auto;
	pointer-events: none;
}

footer.sy-footer p.copyright {
	clear: both;
	margin: 0;
	padding: 1.1rem 1rem;
	background: #242c38;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.85rem;
	text-align: center;
}

footer.sy-footer p.copyright a {
	color: rgba(255, 255, 255, 0.55);
}

footer.sy-footer p.copyright a:hover {
	color: #fff;
}

@media (max-width: 1099px) {
	.sy-footer__head p {
		padding-right: 0;
		font-size: 1.15rem;
	}

	.sy-footer__menus {
		grid-template-columns: 1fr 1fr;
		row-gap: 2.5rem;
		column-gap: 2rem;
	}

	footer.sy-footer .sy-footer__card {
		grid-column: 1 / -1;
		margin-top: 0;
		padding-top: 1.7rem;
	}

	.sy-footer__astro {
		right: 0;
		width: 140px;
	}
}

/* =========================================================================
   Phones
   ========================================================================= */
@media (max-width: 699px) {
	.sy-btn,
	section.contactban.sy-cta button.sy-btn,
	.sy-about .sy-btn {
		min-width: 0;
		padding: 0 1.6rem;
		font-size: 0.95rem;
		line-height: 2.7rem;
	}

	/* Video */
	/* The desktop shadow (26px offset, 50px blur) spread under the next title on phones */
	.sy-video__stage {
		padding: 0.5rem 0 1.5rem;
	}

	.sy-video__frame {
		padding: 6px;
		border-radius: 10px;
		box-shadow: 0 8px 20px rgba(37, 37, 51, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	}

	.sy-video__frame video {
		border-radius: 6px;
	}

	/* Steps */
	.sy-steps__list::before,
	.sy-steps__list::after,
	.sy-steps__rocket {
		display: none;
	}

	/* One step per row (page-sections.css: illustration 40% on the left, text on the right).
	   The 3:2 box of the desktop made the illustration follow the row height and the
	   single 1fr track grow to 900px: no aspect ratio here, and a track that cannot grow */
	.sy-steps .ps-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.sy-steps .ps-steps--illustrated li {
		min-width: 0;
		padding: 0;
	}

	.sy-steps .ps-steps__media {
		width: auto;
		min-width: 0;
		margin: 0;
		aspect-ratio: auto;
		align-self: start;
	}

	.sy-steps .ps-steps__media img {
		height: auto;
	}

	.sy-steps .ps-steps--illustrated .ps-steps__num {
		margin: 0;
		border-width: 3px;
	}

	.sy-steps .ps-steps__list h3 {
		font-size: 1.1rem;
	}

	.sy-steps .ps-steps__list p {
		font-size: 0.9rem;
		line-height: 1.5rem;
	}

	.sy-steps__cta {
		margin-top: 2rem;
	}

	/* Same breathing room before the dark band as on desktop (the padding above is >= 700px only) */
	.home .sy-steps__inner {
		padding-bottom: 2.5rem;
	}

	/* About */
	.sy-about__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2rem;
		margin-top: 2rem;
		padding: 0 1rem;
	}

	.sy-about__logo img {
		width: 150px;
	}

	.sy-about__text p {
		font-size: 0.95rem;
		line-height: 1.7rem;
	}

	.sy-about__stats {
		position: relative;
		z-index: 2;
	}

	.sy-about__stats li {
		width: 100%;
		margin: 0 0 0.8rem;
		padding: 1rem 1.3rem;
		border-radius: 14px;
		justify-content: space-between;
	}

	.sy-about__stats strong {
		font-size: 2.3rem;
	}

	.sy-about__stats strong span {
		font-size: 1rem;
	}

	.sy-about__stats p {
		position: static;
		transform: none;
		font-size: 1rem;
	}

	.sy-about__deco--astro,
	.sy-about__deco--saturn,
	.sy-about__deco--stars-2,
	.sy-about__deco--teal {
		display: none;
	}

	.sy-about__deco--planet {
		width: 55vw;
		right: -10vw;
		opacity: 0.55;
	}

	.sy-about__mark {
		font-size: 4rem;
	}

	/* Contact band */
	section.contactban.sy-cta {
		padding: 2rem 1rem 4.5rem;
		margin: 0;
		background-position-y: 0;
	}

	.sy-cta__icon {
		width: 36px;
		height: 38px;
	}

	section.contactban.sy-cta p.sy-cta__title {
		margin-bottom: 1.3rem;
		font-size: 1.35rem;
		letter-spacing: 0;
	}

	.sy-cta__mark {
		font-size: 3.6rem;
		bottom: -0.1em;
	}

	/* Footer */
	footer.sy-footer {
		margin-top: -24px;
		padding-top: 2rem;
		border-radius: 24px 24px 0 0;
	}

	footer.sy-footer > .content {
		padding-bottom: 1rem;
	}

	.sy-footer__head {
		flex-direction: column;
		gap: 1rem;
		margin-bottom: 1.5rem;
	}

	.sy-footer__head img {
		width: 100px;
	}

	.sy-footer__head p {
		padding: 0;
		font-size: 0.95rem;
	}

	.sy-footer__menus {
		display: block;
	}

	/* Accordion columns (footer.js toggles .active on the li) */
	footer.sy-footer .sy-footer__col .footerTitle {
		position: relative;
		margin: 0.8rem 0;
		padding: 0.5rem 1rem;
		border-radius: 6px;
		background: rgba(53, 70, 90, 0.18);
		font-size: 1rem;
		font-weight: 400;
		line-height: 2.4rem;
		cursor: pointer;
	}

	footer.sy-footer .sy-footer__col .footerTitle::before {
		content: "";
		position: absolute;
		right: 1rem;
		top: 1.3rem;
		width: 0.6rem;
		height: 0.6rem;
		background: url('../img/arrow_modern.svg') no-repeat center / contain;
		transition: transform 0.3s ease;
	}

	footer.sy-footer .sy-footer__col.active .footerTitle::before {
		transform: rotate(90deg);
	}

	footer.sy-footer .sy-footer__col > div,
	footer.sy-footer .sy-footer__col > ul {
		display: none;
		padding: 0 1rem 0.5rem;
	}

	footer.sy-footer .sy-footer__col.active > div,
	footer.sy-footer .sy-footer__col.active > ul {
		display: block;
	}

	footer.sy-footer .sy-footer__col li {
		line-height: 2rem;
		font-size: 0.9rem;
	}

	footer.sy-footer .sy-footer__card {
		margin-top: 1rem;
		padding: 0.6rem 1rem 1rem;
		border-radius: 14px;
	}

	footer.sy-footer .sy-footer__card .footerTitle {
		margin: 0 0 0.6rem;
		padding-left: 0;
		background: transparent;
		cursor: default;
	}

	footer.sy-footer .sy-footer__card .footerTitle::before {
		display: none;
	}

	footer.sy-footer .sy-footer__card > ul {
		display: block;
		padding: 0;
	}

	footer.sy-footer .sy-footer__contact li.icon {
		font-size: 0.9rem;
	}

	.sy-footer__astro {
		position: static;
		display: block;
		width: 110px;
		margin: 1rem 0 0 auto;
	}

	footer.sy-footer p.copyright {
		padding: 0.9rem 1rem;
		font-size: 0.72rem;
		line-height: 1.4rem;
	}
}