/* stp:base */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;600;700&display=swap');

:root {
  --bg1: #fdfff2;
  --bg2: #264225;
  --text: #010101;
  --white: #ffffff;
  --border: #e5e7eb;
  --accent: #3f7a3c;
  --accent-light: #cfe8c3;
  --font-head: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;
  --bg: var(--bg1);
}

html { font-size: calc(100vw / 1440 * 10); overflow-x: hidden; overflow-y: scroll; }
@media (max-width: 1024px) { html { font-size: calc(100vw / 1024 * 10); } }
@media (max-width: 640px) { html { font-size: calc(100vw / 375 * 10); } }

html.menu-lock, html.menu-lock body { overflow: hidden; }

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
body { background: var(--bg1); color: var(--text); font-family: var(--font-body); font-size: 2rem; line-height: 2.4rem; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color 0.3s, opacity 0.3s; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
main { display: block; padding-top: 10.4rem; }

#preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg); }
#preloader img { width: 8rem; height: 8rem; }

.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; height: 10.4rem; background: var(--bg1); transition: box-shadow 0.3s; }
.header.scrolled { box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.15); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 6.4rem; }
.logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; width: 8.8rem; font-family: var(--font-head); font-size: clamp(14px, 1.8rem, 1.8rem); line-height: 2.4rem; text-align: center; white-space: nowrap; transition: opacity 0.3s; }
.logo:hover { opacity: 0.7; }
.logo img { width: 6rem; height: 6rem; object-fit: cover; }
.nav { display: flex; align-items: center; gap: 5rem; }
.nav-link { font-family: var(--font-head); font-size: clamp(14px, 1.8rem, 1.8rem); line-height: 2.4rem; color: var(--text); transition: color 0.3s; }
.nav-link:hover { color: var(--accent); text-decoration: underline; }

.burger-btn { display: none; position: relative; width: 3.1rem; height: 3.1rem; padding: 0; background: transparent; border: 0; z-index: 101; }
.burger-btn span { position: absolute; left: 0.4rem; width: 2.3rem; height: 0.2rem; background: var(--text); border-radius: 0.1rem; transition: transform 0.3s, opacity 0.3s, top 0.3s; }
.burger-btn span:nth-child(1) { top: 0.8rem; }
.burger-btn span:nth-child(2) { top: 1.5rem; }
.burger-btn span:nth-child(3) { top: 2.2rem; }
.burger-btn.act span:nth-child(1) { top: 1.5rem; transform: rotate(45deg); }
.burger-btn.act span:nth-child(2) { opacity: 0; }
.burger-btn.act span:nth-child(3) { top: 1.5rem; transform: rotate(-45deg); }

#mobile-menu { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; background: var(--bg1); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#mobile-menu.opened { opacity: 1; pointer-events: auto; }
.menu-nav { display: flex; flex-direction: column; align-items: center; gap: 5rem; }
html.menu-lock .logo { opacity: 0; pointer-events: none; }

.container { width: 100%; max-width: 144rem; margin: 0 auto; padding: 0 6.4rem; }
.section-title { font-family: var(--font-head); font-weight: 600; font-size: 5rem; line-height: 6.5rem; text-align: center; }

@keyframes store-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1rem); } }

@media (max-width: 1024px) {
  .header-inner { padding: 0 3.2rem; }
  .container { padding: 0 3.2rem; }
}

@media (max-width: 640px) {
  main { padding-top: 7.6rem; }
  .header { height: 7.6rem; }
  .header-inner { padding: 0 4.4rem 0 2.4rem; }
  .nav { display: none; }
  .burger-btn { display: block; }
  .logo { width: 5.7rem; gap: 0.4rem; font-size: clamp(12px, 1.2rem, 1.2rem); line-height: 1.6rem; }
  .logo img { width: 4rem; height: 4rem; }
  .container { padding: 0 2.4rem; }
  .section-title { font-weight: 700; font-size: 3rem; line-height: 4rem; }
}
/* /stp:base */
/* stp:hero */
.hero { display: flex; align-items: center; min-height: 69.9rem; padding: 6.4rem; background: var(--bg1) url('../img/hero.webp') center / cover no-repeat; }
.hero-inner { display: flex; flex-direction: column; gap: 4rem; width: 100%; max-width: 89.2rem; }
.hero-title { font-family: var(--font-head); font-weight: 700; font-size: 6rem; line-height: 7.5rem; color: var(--text); }
.hero-text { font-family: var(--font-body); font-weight: 500; font-size: 3.2rem; line-height: 4.2rem; color: var(--text); }

@media (max-width: 1024px) {
  .hero { padding: 6.4rem 3.2rem; }
}

@media (max-width: 640px) {
  .hero { min-height: 50.9rem; padding: 4rem 2.4rem; background-image: url('../img/hero-m.webp'); }
  .hero-inner { gap: 2rem; }
  .hero-title { font-size: 3rem; line-height: 4rem; }
  .hero-text { font-weight: 600; font-size: 2rem; line-height: 3rem; }
}
/* /stp:hero */
/* stp:features */
.features { margin-top: 10rem; }
.features .section-title { margin-bottom: 2.4rem; }
.features-row { display: flex; align-items: center; justify-content: center; gap: 6.4rem; }
.features-col { display: flex; flex-direction: column; gap: 4rem; flex: 0 1 39.3rem; min-width: 0; }
.features-img { flex: 0 0 39.8rem; width: 39.8rem; height: 71rem; object-fit: cover; border-radius: 2.4rem; }
.card { display: flex; flex-direction: column; gap: 1.6rem; padding: 2.4rem; background: var(--white); border-radius: 1.6rem; box-shadow: inset 0 0 0 1px var(--border), 0 0.1rem 0.15rem rgba(0, 0, 0, 0.1), 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1); }
.card-title { font-family: var(--font-body); font-weight: 500; font-size: 3.2rem; line-height: 4.2rem; text-align: center; color: var(--text); }
.card-text { font-family: var(--font-body); font-weight: 400; font-size: 2.4rem; line-height: 3rem; color: var(--text); }

@media (max-width: 1024px) {
  .features-row { gap: 2.4rem; }
  .features-col { gap: 2.4rem; flex: 1 1 0; }
  .features-img { flex: 0 0 26rem; width: 26rem; height: auto; aspect-ratio: 398 / 710; }
  .card { padding: 2rem; }
  .card-title { font-size: 2.4rem; line-height: 3.2rem; }
  .card-text { font-size: 1.8rem; line-height: 2.4rem; }
}

@media (max-width: 640px) {
  .features { margin-top: 5rem; }
  .features .section-title { margin-bottom: 2rem; }
  .features-row { flex-direction: column; align-items: stretch; gap: 2rem; }
  .features-col { display: contents; }
  .card { padding: 2rem 1.9rem; }
  .card-1 { order: 1; }
  .card-2 { order: 2; }
  .features-img { order: 3; align-self: center; width: 30rem; height: 53.5rem; flex: 0 0 auto; }
  .card-3 { order: 4; }
  .card-4 { order: 5; }
  .card-title { font-weight: 600; font-size: 2rem; line-height: 3rem; }
  .card-text { font-size: clamp(14px, 1.6rem, 1.6rem); line-height: 2rem; }
}
/* /stp:features */
/* stp:how-it-works */
.how { margin-top: 10rem; }
.how .section-title { margin-bottom: 2.4rem; }
.how-row { display: flex; align-items: center; justify-content: center; gap: 6.4rem; }
.how-img { flex: 0 0 39.8rem; width: 39.8rem; height: 37.7rem; object-fit: cover; }
.how-steps { display: flex; flex-direction: column; gap: 2rem; flex: 0 1 39.3rem; min-width: 0; }
.how-step h3, .how-step p { font-family: var(--font-body); font-weight: 400; font-size: 2rem; line-height: 2.4rem; color: var(--text); }

@media (max-width: 1024px) {
  .how-row { gap: 3.2rem; }
  .how-img { flex: 0 0 34rem; width: 34rem; height: auto; aspect-ratio: 398 / 377; }
  .how-steps { flex: 1 1 0; }
}

@media (max-width: 640px) {
  .how { margin-top: 5rem; }
  .how .section-title { margin-bottom: 2rem; }
  .how-row { flex-direction: column; align-items: stretch; gap: 2rem; }
  .how-img { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 327 / 310; }
  .how-steps { flex: 0 0 auto; }
  .how-step h3, .how-step p { font-size: clamp(14px, 1.4rem, 1.4rem); line-height: 1.8rem; }
}
/* /stp:how-it-works */
/* stp:testimonials */
.testimonials { margin-top: 10rem; padding: 6.4rem 0; background: var(--bg2); color: var(--white); }
.testimonials .section-title { margin-bottom: 4rem; color: var(--white); }
.reviews { display: flex; flex-direction: column; gap: 4rem; width: 100%; max-width: 117.6rem; margin: 0 auto; }
.review { display: flex; flex-direction: column; gap: 1.6rem; padding: 2.4rem; background: rgba(255, 255, 255, 0.1); border-radius: 1.6rem; box-shadow: inset 0 0 0 1px var(--border), 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1), 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1); }
.review-body h3, .review-body p { font-family: var(--font-body); font-weight: 400; font-size: 2.4rem; line-height: 3rem; color: var(--white); }
.review-author { font-family: var(--font-body); font-weight: 500; font-size: 3.2rem; line-height: 4.2rem; color: var(--white); }

@media (max-width: 1024px) {
  .reviews { gap: 2.4rem; }
  .review-body h3, .review-body p { font-size: 2rem; line-height: 2.6rem; }
  .review-author { font-size: 2.4rem; line-height: 3.2rem; }
}

@media (max-width: 640px) {
  .testimonials { margin-top: 5rem; padding: 4rem 0; }
  .testimonials .section-title { margin-bottom: 2rem; }
  .reviews { gap: 2rem; }
  .review { padding: 2rem; }
  .review-body h3, .review-body p { font-size: clamp(14px, 1.6rem, 1.6rem); line-height: 2rem; }
  .review-author { font-weight: 600; font-size: 2rem; line-height: 3rem; }
}
/* /stp:testimonials */
/* stp:faq */
.faq { margin-top: 10rem; }
.faq .container { max-width: 144rem; padding: 0 16rem; }
.faq .section-title { margin-bottom: 4rem; }
.faq-list { display: flex; flex-direction: column; gap: 1.6rem; }
.faq-item { padding: 1.6rem; background: var(--bg2); border-radius: 1.2rem; color: var(--white); }
.faq-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; list-style: none; cursor: pointer; }
.faq-head::-webkit-details-marker { display: none; }
.faq-q { font-family: var(--font-body); font-weight: 700; font-size: 2rem; line-height: 3.2rem; color: var(--white); }
.faq-icon { flex: 0 0 auto; width: 3rem; height: 2.4rem; transition: transform 0.3s; }
.faq-item[open] .faq-icon { transform: scaleY(-1); }
.faq-a { margin-top: 0.8rem; font-family: var(--font-body); font-weight: 400; font-size: 2rem; line-height: 2.4rem; color: var(--white); }

@media (max-width: 1024px) {
  .faq .container { padding: 0 8rem; }
}

@media (max-width: 640px) {
  .faq { margin-top: 5rem; }
  .faq .container { padding: 0 1.6rem; }
  .faq .section-title { margin-bottom: 2rem; }
  .faq-q, .faq-a { font-size: clamp(14px, 1.4rem, 1.4rem); line-height: 1.8rem; }
}
/* /stp:faq */
/* stp:footer */
.footer { margin-top: 10rem; padding: 5rem 6.4rem; background: var(--bg2); color: var(--white); }
.footer-inner { display: flex; align-items: center; justify-content: center; gap: 19.2rem; padding: 0 1.8rem; font-family: var(--font-head); font-size: clamp(14px, 1.8rem, 1.8rem); line-height: 2.4rem; text-align: center; }
.footer a { color: var(--white); transition: color 0.3s; }
.footer a:hover { color: var(--accent-light); text-decoration: underline; }
.footer-sep { margin: 0 0.8rem; }

@media (max-width: 1024px) {
  .footer { padding: 5rem 3.2rem; }
  .footer-inner { gap: 6.4rem; padding: 0; }
}

@media (max-width: 640px) {
  .footer { margin-top: 5rem; padding: 3.2rem 2.4rem; }
  .footer-inner { flex-direction: column; gap: 4rem; padding: 0; font-size: clamp(14px, 1.4rem, 1.4rem); line-height: 1.8rem; }
  .footer-links { order: 1; }
  .footer-copy { order: 2; }
}
/* /stp:footer */
/* stp:legal */
.legal-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--white); }
.legal-main { flex: 1 0 auto; padding-top: 3rem; padding-bottom: 10rem; }
.legal-header { height: 6.1rem; background: transparent; pointer-events: none; }
.legal-header.scrolled { background: var(--white); }
.legal-close { position: absolute; top: 1rem; left: 1rem; width: 4.1rem; height: 4.1rem; pointer-events: auto; transition: opacity 0.3s; }
.legal-close:hover { opacity: 0.5; }
.legal-close span { position: absolute; top: 2rem; left: 0.4rem; width: 3.3rem; height: 0.1rem; background: var(--text); }
.legal-close span:nth-child(1) { transform: rotate(45deg); }
.legal-close span:nth-child(2) { transform: rotate(-45deg); }
.legal-body .footer { margin-top: 0; background: transparent; color: var(--text); }
.legal-body .footer a { color: var(--text); }
.legal-body .footer a:hover { color: var(--accent); }
.legal-page { width: 100%; padding: 0 4rem; }
.legal-content { font-family: var(--font-body); font-weight: 400; font-size: 2.4rem; line-height: 1.2; color: var(--text); }
.legal-content h1 { margin-bottom: 3rem; font-family: var(--font-head); font-weight: 600; font-size: 5rem; line-height: 6.5rem; text-align: center; color: var(--text); }
.legal-content h2, .legal-content h3, .legal-content h4 { margin: 3rem 0 1rem; font-family: var(--font-body); font-weight: 700; font-size: 3rem; line-height: 1.2; color: var(--text); }
.legal-content h1 + p { margin-top: 0; }
.legal-content p { margin: 0; }
.legal-content ul, .legal-content ol { margin: 0; padding-left: 3.2rem; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { margin: 0; }
.legal-content a { color: var(--text); text-decoration: underline; transition: color 0.3s; }
.legal-content a:hover { color: var(--accent); }
.legal-content strong, .legal-content b { font-weight: 700; }
.legal-content em, .legal-content i { font-style: italic; }
.legal-content u { text-decoration: underline; }

@media (max-width: 1024px) {
  .legal-page { padding: 0 3.2rem; }
}

@media (max-width: 640px) {
  .legal-main { padding-top: 5rem; padding-bottom: 5rem; }
  .legal-header { height: 4.4rem; }
  .legal-close { top: 1rem; left: 1rem; width: 2.4rem; height: 2.4rem; }
  .legal-close span { top: 1.1rem; left: 0.1rem; width: 2.2rem; }
  .legal-page { padding: 0 0.8rem; }
  .legal-content { font-size: clamp(14px, 1.4rem, 1.4rem); }
  .legal-content h1 { margin-bottom: 3.5rem; font-weight: 700; font-size: 3rem; line-height: 4rem; }
  .legal-content h2, .legal-content h3, .legal-content h4 { margin: 2rem 0 1rem; font-size: 2rem; }
  .legal-content ul, .legal-content ol { padding-left: 2rem; }
}
/* /stp:legal */
/* stp:title-anim */
.ta-w { display: inline-block; white-space: nowrap; }
.ta-c { display: inline-block; }
.ta-key { position: relative; }
.ta-route { position: relative; display: inline-block; }

.anim-on .ta-hero .ta-w { opacity: 0; filter: blur(0.9rem); transform: translateY(1.2rem) scale(1.06); color: var(--accent); }
.anim-on .ta-hero.is-in .ta-w { animation: ta-bloom 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) calc(var(--i) * 0.09s) forwards; }
.anim-on .ta-hero .ta-key::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.4rem; height: 0.4rem; border-radius: 0.2rem; background: repeating-linear-gradient(90deg, var(--accent) 0 1rem, transparent 1rem 1.6rem); clip-path: inset(0 100% 0 0); pointer-events: none; }
.anim-on .ta-hero .ta-key::before { content: ''; position: absolute; right: -1rem; bottom: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--accent); transform: scale(0); pointer-events: none; }
.anim-on .ta-hero.is-in .ta-key::after { animation: ta-trail 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--n) * 0.09s + 0.5s) forwards; }
.anim-on .ta-hero.is-in .ta-key::before { animation: ta-pin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--n) * 0.09s + 1.35s) forwards, ta-ping 3.2s ease-out calc(var(--n) * 0.09s + 2.4s) infinite; }

.anim-on .ta-sec .ta-c { opacity: 0; transform: perspective(40rem) rotateX(-85deg) translateY(0.6rem); transform-origin: 50% 0; filter: blur(0.3rem); }
.anim-on .ta-sec.is-in .ta-c { animation: ta-unfold 0.8s cubic-bezier(0.22, 0.8, 0.3, 1) calc(var(--i) * 0.05s) forwards; }
.anim-on .ta-sec .ta-route::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -0.4rem; height: 0.3rem; border-radius: 0.15rem; background: repeating-linear-gradient(90deg, var(--accent) 0 0.8rem, transparent 0.8rem 1.3rem); clip-path: inset(0 50% 0 50%); opacity: 0.8; pointer-events: none; }
.anim-on .ta-sec.is-in .ta-route::after { animation: ta-route 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--n) * 0.05s + 0.2s) forwards; }

@keyframes ta-bloom {
  0% { opacity: 0; filter: blur(0.9rem); transform: translateY(1.2rem) scale(1.06); color: var(--accent); }
  55% { opacity: 1; filter: blur(0.15rem); color: var(--accent); }
  100% { opacity: 1; filter: blur(0); transform: none; color: var(--text); }
}
@keyframes ta-trail { to { clip-path: inset(0 0 0 0); } }
@keyframes ta-pin { to { transform: scale(1); } }
@keyframes ta-ping {
  0%, 16%, 100% { transform: scale(1); }
  8% { transform: scale(1.4); }
}
@keyframes ta-unfold {
  0% { opacity: 0; transform: perspective(40rem) rotateX(-85deg) translateY(0.6rem); filter: blur(0.3rem); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes ta-route { to { clip-path: inset(0 0 0 0); } }

@media (max-width: 640px) {
  .anim-on .ta-hero .ta-w { transform: translateY(0.8rem) scale(1.04); filter: blur(0.6rem); }
  .anim-on .ta-hero.is-in .ta-w { animation-duration: 0.9s; }
  .anim-on .ta-hero .ta-key::after { bottom: 0.2rem; height: 0.3rem; background: repeating-linear-gradient(90deg, var(--accent) 0 0.6rem, transparent 0.6rem 1rem); }
  .anim-on .ta-hero .ta-key::before { right: -0.7rem; width: 0.8rem; height: 0.8rem; }
  .anim-on .ta-sec .ta-c { transform: perspective(30rem) rotateX(-70deg) translateY(0.4rem); }
  .anim-on .ta-sec.is-in .ta-c { animation-duration: 0.65s; }
  .anim-on .ta-sec .ta-route::after { bottom: -0.2rem; height: 0.2rem; }
}
/* /stp:title-anim */