/* ====== Токены ====== */
:root{
  --fs-bg:#F5F4F0;
  --fs-surface:#FFFFFF;
  --fs-feature-bg:#E9EEE7;
  --fs-text:#253432;
  --fs-muted:#718076;
  --fs-primary:#81B39B;
  --fs-primary-press:#6CA086;
  --fs-line:#D1D3CE;

  --fs-radius:12px;
  --fs-radius-sm:8px;
  --fs-shadow:0 8px 24px rgba(0,0,0,0.35);
  --fs-shadow-soft:0 4px 16px rgba(0,0,0,0.25);

  --fs-container:1200px;
}

/* ====== База ====== */
*,
*::before,
*::after{ box-sizing:border-box; }

/*html{ scroll-behavior:smooth; }*/

land{
  margin:0;
  background:var(--fs-bg);
  color:var(--fs-text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  font-size:16px;
  fs-line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }

/*a{
  color:var(--fs-text);
  text-decoration:none;
}

a:hover{ color:var(--fs-primary); }*/

/*:focus-visible{
  outline:2px solid var(--fs-primary);
  outline-offset:2px;
}*/

/* ====== Контейнер ====== */
.fs-container{
  width:100%;
  max-width:var(--fs-container);
  margin:0 auto;
  padding:0 24px;
}

@media (max-width:480px){
  .fs-container{ padding:0 16px; }
}

/* ====== Шапка ====== */
.fs-header{
  /*position:sticky;*/
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.96);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--fs-line);

}

.fs-header .fs-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}

.fs-logo img{
  height:40px;
}

.fs-nav{
  display:flex;
  align-items:center;
  gap:20px;
}

.fs-nav a{
  color:var(--fs-muted);
  font-weight:500;
}

.fs-nav a:hover{
  color:var(--fs-text);
}

/* ====== Кнопки ====== */
.fs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:36px;
  padding:0 18px;
  border-radius:4px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:600;
  transition:all .2s ease;
}

.fs-btn-primary{
  background:var(--fs-primary);
  color:#0A0D12;
  box-shadow:var(--fs-shadow-soft);
}

.fs-btn-primary:hover{
  background:var(--fs-primary-press);
}

.fs-btn-primary:active{
  transform:translateY(0);
}

.fs-btn-secondary{
  background:transparent;
  color:var(--fs-text);
  border-color:var(--fs-line);
}

.fs-btn-secondary:hover{
  background:var(--fs-feature-bg);
}

/* ====== Hero ====== */
.fs-hero{
  padding:56px 0 24px;
  border-bottom:1px solid var(--fs-line);
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(106,224,185,0.08), transparent 60%),
    radial-gradient(900px 300px at 100% 0%, rgba(106,224,185,0.06), transparent 60%);
}

.fs-hero .fs-inner{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center;
}

.fs-hero-text h1{
  font-size:clamp(28px, 5vw, 44px);
  line-height:1.15;
  letter-spacing:-0.02em;
  margin:0 0 16px;
}

.fs-hero-text p{
  color:var(--fs-muted);
  font-size:clamp(16px, 2.2vw, 18px);
  margin:0 0 24px;
  max-width:56ch;
}

.fs-cta-group{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.fs-hero-img img{
  border-radius:var(--fs-radius);
  box-shadow:var(--fs-shadow);
  border:1px solid var(--fs-line);
  background:var(--fs-surface);
}

/* Адаптив hero */
@media (max-width:960px){
  .fs-hero .fs-inner{
    grid-template-columns:1fr;
  }
  .fs-hero-img{
    order:2;
  }
}

/* ====== Storytelling ====== */
.fs-story{
  padding:40px 0;
  border-bottom:1px solid var(--fs-line);
}

.fs-story .fs-inner{
  max-width:820px;
  margin:0 auto;
  text-align:center;
}

.fs-story h2{
  font-size:clamp(22px, 3.5vw, 30px);
  margin:0 0 12px;
  letter-spacing:-0.01em;
}

.fs-story p{
  color:var(--fs-muted);
  margin:0;
}

/* ====== Скриншоты (слайдер) ====== */
.fs-screenshots{
  padding:40px 0;
}

.fs-screenshots h3{
  font-size:clamp(18px, 3vw, 22px);
  margin:0 0 16px;
  color:var(--fs-muted);
}

.fs-screenshots-slider{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px, 380px);
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-bottom:6px;
}

.fs-screenshots-slider::-webkit-scrollbar{ height:8px; }
.fs-screenshots-slider::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.08);
  border-radius:999px;
}
.fs-screenshots-slider::-webkit-scrollbar-track{
  background:transparent;
}

.fs-screenshots-slider img{
  height:220px;
  width:100%;
  object-fit:cover;
  border-radius:var(--fs-radius-sm);
  box-shadow:var(--fs-shadow-soft);
  border:1px solid var(--fs-line);
  background:var(--fs-surface);
  scroll-snap-align:start;
}

/* ====== Возможности ====== */
.fs-features{
  padding:32px 0 8px;
}

.fs-features h2{
  font-size:clamp(22px, 3.5vw, 28px);
  margin:0 0 20px;
}

.fs-features-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  padding:0;
}

@media (max-width:1024px){
  .fs-features-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:640px){
  .fs-features-list{
    grid-template-columns:1fr;
  }
}

.fs-features-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--fs-surface);
  border:1px solid var(--fs-line);
  border-radius:var(--fs-radius-sm);
  padding:14px;
  color:var(--fs-text);
}

.fs-feature-icon{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(106,224,185,0.12);
  color:var(--fs-primary);
  font-size:18px;
  line-height:1;
  margin-top:2px;
}

/* ====== CTA финал ====== */
.fs-cta-final{
  padding:40px 0 56px;
  text-align:center;
}

.fs-cta-final h2{
  font-size:clamp(22px, 3.5vw, 30px);
  margin:0 0 16px;
}

/* ====== Футер ====== */
.fs-footer{
  border-top:1px solid var(--fs-line);
  padding:16px 0 28px;
  color:var(--fs-muted);
  text-align:center;
  font-size:14px;
}

/* ====== Вспомогательные ====== */
.fs-section{
  padding:32px 0;
}

/* ====== Утилиты контейнеризации для секций ====== */
.fs-header .fs-inner,
.fs-hero .fs-inner,
.fs-story .fs-inner,
.fs-screenshots .fs-inner,
.fs-features .fs-inner,
.fs-cta-final .fs-inner,
.fs-footer .fs-inner{
  composes: fs-container;
}

@media (max-width: 640px) {
  .fs-header .fs-inner,
  .fs-hero .fs-inner,
  .fs-story .fs-inner,
  .fs-screenshots .fs-inner,
  .fs-features .fs-inner,
  .fs-cta-final .fs-inner {
    padding: 0 16px;
  }

  .fs-hero .fs-inner {
    display: block;
  }

  .fs-hero-fs-text h1 {
    font-size: 24px;
  }

  .fs-hero-fs-text p {
    font-size: 14px;
  }

  .fs-hero-img img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
  }

  .fs-screenshots-slider {
    display: flex;
    overflow-x: auto;
    grid-auto-columns: auto;
    gap: 12px;
  }

  .fs-features-list {
    grid-template-columns: 1fr !important;
  }

  .fs-features-list li {
    font-size: 14px;
    padding: 12px;
  }

  .fs-cta-group {
    flex-direction: column;
    gap: 12px;
  }

  .fs-btn {
    width: 100%;
    justify-content: center;
  }

  .fs-nav {
    gap: 12px;
  }

  .fs-nav a {
    font-size: 14px;
  }
}