:root{
      --bg:#f7f4ee;
      --surface:#ffffff;
      --surface-soft:#eef5f0;

      --green-950:#14382f;
      --green-800:#1d5545;
      --green-600:#2f8f64;
      --green-500:#42a976;

      --sand:#d7ad68;

      --text:#17201d;
      --muted:#68736e;
      --line:#dfe6e1;

      --shadow:0 18px 55px rgba(20,56,47,.10);

      --radius:26px;
    }


    *{
      box-sizing:border-box;
    }


    html{
      scroll-behavior:smooth;
    }


    body{
      margin:0;
      background:var(--bg);
      color:var(--text);

      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

      line-height:1.55;
    }


    a{
      color:inherit;
      text-decoration:none;
    }


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


    .container{
      width:min(1180px, calc(100% - 40px));
      margin:0 auto;
    }


    /* =========================================================
       NAVIGATION
       ========================================================= */

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;

      padding:22px 0;

      gap:24px;
    }


    .brand{
      display:flex;
      align-items:center;
      gap:12px;

      font-weight:800;
      letter-spacing:-.02em;

      color:var(--green-950);
    }


    .brand img{
      width:46px;
      height:46px;

      border-radius:14px;

      object-fit:cover;

      background:#f2eadf;
    }


    .nav-links{
      display:flex;
      align-items:center;
      gap:24px;

      color:#405049;
      font-size:15px;
    }


    .nav-links a:hover{
      color:var(--green-800);
    }



    /* =========================================================
       HERO
       ========================================================= */

    .hero{
      padding:42px 0 88px;
    }


    .hero-grid{
      display:grid;

      grid-template-columns:1.08fr .92fr;

      gap:58px;

      align-items:center;
    }


    .eyebrow{
      display:inline-flex;
      align-items:center;

      gap:9px;

      background:#e7f0eb;
      color:var(--green-800);

      padding:8px 13px;

      border-radius:999px;

      font-weight:750;
      font-size:13px;

      letter-spacing:.04em;

      text-transform:uppercase;
    }


    .eyebrow-dot{
      width:8px;
      height:8px;

      border-radius:50%;

      background:var(--green-500);

      box-shadow:
        0 0 0 5px rgba(66,169,118,.13);
    }


    h1{
      margin:22px 0 22px;

      color:var(--green-950);

      font-size:clamp(44px, 5.4vw, 72px);

      line-height:.98;

      letter-spacing:-.055em;

      max-width:760px;
    }


    .hero-lead{
      font-size:20px;

      color:#46534e;

      max-width:700px;

      margin:0 0 28px;
    }


    .hero-note{
      max-width:680px;

      color:var(--muted);

      margin-bottom:30px;

      font-size:15px;
    }


    .cta-row{
      display:flex;
      flex-wrap:wrap;

      gap:13px;

      margin-bottom:34px;
    }


    .btn{
      display:inline-flex;

      align-items:center;
      justify-content:center;

      min-height:54px;

      padding:0 22px;

      border-radius:15px;

      font-weight:800;

      transition:.22s ease;

      border:1px solid transparent;
    }


    .btn-primary{
      background:var(--green-800);

      color:#fff;

      box-shadow:
        0 10px 25px rgba(29,85,69,.18);
    }


    .btn-primary:hover{
      background:var(--green-950);

      transform:translateY(-1px);
    }


    .btn-secondary{
      background:rgba(255,255,255,.75);

      border-color:#d5ded8;

      color:var(--green-950);
    }


    .btn-secondary:hover{
      background:#fff;

      transform:translateY(-1px);
    }


    .hero-stats{
      display:flex;
      flex-wrap:wrap;

      gap:12px;
    }


    .stat{
      min-width:145px;

      padding:12px 15px;

      border:1px solid #dfe5e1;

      border-radius:16px;

      background:rgba(255,255,255,.55);
    }


    .stat strong{
      display:block;

      color:var(--green-950);

      font-size:18px;
    }


    .stat span{
      color:var(--muted);

      font-size:13px;
    }



    /* =========================================================
       HERO RIGHT CARD
       ========================================================= */

    .hero-visual{
      position:relative;

      min-height:585px;

      display:flex;

      align-items:center;
      justify-content:center;
    }


    .hero-glow{
      position:absolute;

      inset:70px 10px 20px 60px;

      border-radius:42px;

      background:
        radial-gradient(
          circle at 30% 20%,
          rgba(215,173,104,.36),
          transparent 38%
        ),
        linear-gradient(
          145deg,
          #dce9df 0%,
          #c8ddcf 48%,
          #b8d0c1 100%
        );

      transform:rotate(-3deg);
    }


    .story-card{
      position:relative;

      width:min(100%, 470px);

      min-height:515px;

      border-radius:34px;

      background:
        linear-gradient(
          180deg,
          #173f35 0%,
          #235646 100%
        );

      color:white;

      overflow:hidden;

      box-shadow:var(--shadow);

      padding:34px;

      display:flex;

      flex-direction:column;

      justify-content:space-between;
    }


    .story-card:before{
      content:"";

      position:absolute;

      width:260px;
      height:260px;

      border-radius:50%;

      right:-75px;
      top:-85px;

      background:rgba(215,173,104,.16);
    }


    .story-card:after{
      content:"";

      position:absolute;

      width:220px;
      height:220px;

      border-radius:50%;

      left:-90px;
      bottom:-90px;

      background:rgba(255,255,255,.06);
    }


    .story-top,
    .story-bottom{
      position:relative;
      z-index:2;
    }


    .portrait-placeholder{
      width:100%;

      aspect-ratio:4/3;

      border-radius:22px;

      margin-bottom:28px;

      background:
        linear-gradient(
          140deg,
          rgba(255,255,255,.08),
          rgba(255,255,255,.02)
        ),
        url("../img/img.png")
        center / cover no-repeat,
        rgba(255,255,255,.08);

      border:1px solid rgba(255,255,255,.12);

      display:flex;

      align-items:flex-end;

      padding:18px;
    }


    .portrait-placeholder span{
      font-size:12px;

      color:rgba(255,255,255,.70);

      background:rgba(0,0,0,.18);

      padding:7px 10px;

      border-radius:999px;

      backdrop-filter:blur(6px);
    }


    .story-card h3{
      margin:0 0 10px;

      font-size:30px;

      line-height:1.05;

      letter-spacing:-.03em;
    }


    .story-card p{
      margin:0;

      color:rgba(255,255,255,.78);

      font-size:15px;
    }


    .story-bottom{
      display:flex;

      gap:20px;

      padding-top:24px;

      margin-top:24px;

      border-top:
        1px solid rgba(255,255,255,.13);
    }


    .story-bottom div strong{
      display:block;

      font-size:20px;

      color:#fff;
    }


    .story-bottom div span{
      color:rgba(255,255,255,.65);

      font-size:12px;
    }



    /* =========================================================
       COMMON SECTIONS
       ========================================================= */

    section{
      padding:92px 0;
    }


    .section-kicker{
      color:var(--green-600);

      font-weight:800;

      text-transform:uppercase;

      font-size:13px;

      letter-spacing:.08em;

      margin-bottom:12px;
    }


    .section-title{
      margin:0;

      color:var(--green-950);

      font-size:clamp(34px,4.3vw,54px);

      line-height:1.06;

      letter-spacing:-.045em;
    }


    .section-intro{
      max-width:760px;

      color:var(--muted);

      margin:18px 0 0;

      font-size:18px;
    }



    /* =========================================================
       STORY / TIMELINE
       ========================================================= */

    .story-section{
      background:#fff;
    }


    .timeline{
      margin-top:52px;

      display:grid;

      grid-template-columns:repeat(4,1fr);

      gap:16px;
    }


    .time-card{
      position:relative;

      background:#f8faf8;

      border:1px solid #e3e9e5;

      border-radius:22px;

      padding:24px;

      min-height:220px;
    }


    .time-card .year{
      color:var(--sand);

      font-weight:900;

      font-size:15px;

      margin-bottom:34px;
    }


    .time-card h3{
      color:var(--green-950);

      font-size:23px;

      margin:0 0 10px;

      letter-spacing:-.02em;
    }


    .time-card p{
      color:var(--muted);

      margin:0;

      font-size:14px;
    }


    .time-card:not(:last-child):after{
      content:"→";

      position:absolute;

      right:-13px;

      top:50%;

      transform:translateY(-50%);

      width:26px;
      height:26px;

      display:grid;

      place-items:center;

      border-radius:50%;

      background:white;

      color:var(--green-800);

      border:1px solid #dce5df;

      font-weight:900;

      z-index:3;
    }



    /* =========================================================
       CONTENT CARDS
       ========================================================= */

    .contents-grid{
      margin-top:46px;

      display:grid;

      grid-template-columns:repeat(3,1fr);

      gap:18px;
    }


    .feature-card{
      background:var(--surface);

      border:1px solid #e0e6e2;

      border-radius:22px;

      padding:26px;

      min-height:210px;

      transition:.22s ease;
    }


    .feature-card:hover{
      transform:translateY(-4px);

      box-shadow:
        0 14px 36px rgba(20,56,47,.07);
    }


    .feature-number{
      color:var(--sand);

      font-weight:900;

      font-size:13px;

      margin-bottom:35px;

      letter-spacing:.08em;
    }


    .feature-card h3{
      color:var(--green-950);

      margin:0 0 10px;

      font-size:21px;
    }


    .feature-card p{
      color:var(--muted);

      margin:0;

      font-size:14px;
    }



    /* =========================================================
       PREVIEW
       3 КАРТОЧКИ СВЕРХУ + 2 ПО ЦЕНТРУ СНИЗУ
       ========================================================= */

    .preview-section{
      background:var(--green-950);

      color:white;

      overflow:hidden;
    }


    .preview-section .section-title{
      color:#fff;
    }


    .preview-section .section-intro{
      color:rgba(255,255,255,.66);
    }


    /*
      Используем 6 виртуальных колонок.

      Верх:
      1-2 | 3-4 | 5-6

      Низ:
         2-3 | 4-5

      Таким образом нижняя строка
      автоматически располагается по центру.
    */

    .preview-grid{
      margin-top:58px;

      display:grid;

      grid-template-columns:repeat(6,1fr);

      gap:34px 24px;

      align-items:start;
    }


    .preview-card{
      position:relative;

      border-radius:24px;

      background:#f3efe7;

      padding:14px;

      box-shadow:
        0 18px 45px rgba(0,0,0,.20);

      transform-origin:center center;

      transition:
        transform .32s ease,
        box-shadow .32s ease;

      will-change:transform;
    }


    /*
      ПЕРВАЯ СТРОКА
    */

    .preview-card:nth-child(1){
      grid-column:1 / 3;

      transform:
        rotate(-3deg);
    }


    .preview-card:nth-child(2){
      grid-column:3 / 5;

      transform:
        translateY(-12px)
        rotate(.7deg);
    }


    .preview-card:nth-child(3){
      grid-column:5 / 7;

      transform:
        rotate(3deg);
    }


    /*
      ВТОРАЯ СТРОКА
      две карточки по центру
    */

    .preview-card:nth-child(4){
      grid-column:2 / 4;

      transform:
        translateY(4px)
        rotate(-2.5deg);
    }


    .preview-card:nth-child(5){
      grid-column:4 / 6;

      transform:
        translateY(-2px)
        rotate(2.3deg);
    }


    /*
      При наведении карточка выпрямляется,
      немного увеличивается и поднимается.
    */

    .preview-card:hover{
      transform:
        translateY(-14px)
        rotate(0deg)
        scale(1.035) !important;

      box-shadow:
        0 30px 70px rgba(0,0,0,.32);

      z-index:10;
    }


    .preview-card img{
      width:100%;

      aspect-ratio:3/4;

      object-fit:contain;

      border-radius:14px;

      background:#e9e6df;
    }


    .preview-image{
      cursor:zoom-in;
    }


    .preview-placeholder{
      aspect-ratio:3/4;

      display:flex;

      align-items:center;
      justify-content:center;

      flex-direction:column;

      gap:10px;

      border-radius:14px;

      color:#59645f;

      background:
        linear-gradient(
          145deg,
          #f7f3ea,
          #e4e9e4
        );

      text-align:center;

      overflow:hidden;

      font-weight:750;
    }


    .preview-placeholder img{
      width:100%;
      height:100%;

      object-fit:contain;
    }


    .preview-placeholder small{
      font-weight:500;

      color:#78827d;
    }



    /* =========================================================
       IMAGE MODAL
       ========================================================= */

    .image-modal{
      position:fixed;

      inset:0;

      z-index:9999;

      display:none;

      align-items:center;
      justify-content:center;

      padding:24px;

      background:rgba(0,0,0,.88);

      cursor:zoom-out;
    }


    .image-modal.active{
      display:flex;
    }


    .image-modal img{
      display:block;

      max-width:95vw;
      max-height:95vh;

      width:auto;
      height:auto;

      object-fit:contain;

      border-radius:10px;

      box-shadow:
        0 24px 80px rgba(0,0,0,.5);

      cursor:zoom-out;
    }



    /* =========================================================
       START OPTIONS
       ========================================================= */

    .paths{
      margin-top:44px;

      display:grid;

      grid-template-columns:1fr 1fr;

      gap:22px;
    }


    .path-card{
      border-radius:26px;

      padding:34px;

      min-height:315px;

      display:flex;

      flex-direction:column;

      justify-content:space-between;
    }


    .path-card.telegram{
      background:#e7f3ed;

      border:1px solid #d3e5db;
    }


    .path-card.method{
      background:#fff;

      border:1px solid #e0e6e2;

      box-shadow:
        0 12px 35px rgba(20,56,47,.06);
    }


    .path-icon{
      width:52px;
      height:52px;

      border-radius:16px;

      display:grid;

      place-items:center;

      font-size:24px;

      background:white;

      margin-bottom:28px;

      box-shadow:
        0 8px 22px rgba(20,56,47,.08);
    }


    .path-card h3{
      margin:0 0 12px;

      color:var(--green-950);

      font-size:30px;

      line-height:1.1;

      letter-spacing:-.03em;
    }


    .path-card p{
      color:var(--muted);

      margin:0;

      max-width:460px;
    }


    .path-action{
      margin-top:28px;
    }



    /* =========================================================
       FAQ
       ========================================================= */

    .faq{
      background:#fff;
    }


    .faq-list{
      margin-top:38px;

      display:grid;

      gap:12px;
    }


    details{
      border:1px solid #e2e7e4;

      border-radius:17px;

      padding:18px 20px;

      background:#fbfcfb;
    }


    summary{
      cursor:pointer;

      font-weight:800;

      color:var(--green-950);
    }


    details p{
      color:var(--muted);

      margin:12px 0 0;
    }



    /* =========================================================
       FINAL CTA
       ========================================================= */

    .final-cta{
      padding:88px 0;
    }


    .cta-panel{
      position:relative;

      overflow:hidden;

      border-radius:32px;

      background:
        linear-gradient(
          135deg,
          #173f35 0%,
          #265947 100%
        );

      color:#fff;

      padding:54px;

      text-align:center;
    }


    .cta-panel:before,
    .cta-panel:after{
      content:"";

      position:absolute;

      border-radius:50%;

      background:rgba(215,173,104,.12);
    }


    .cta-panel:before{
      width:260px;
      height:260px;

      left:-90px;
      top:-100px;
    }


    .cta-panel:after{
      width:320px;
      height:320px;

      right:-130px;
      bottom:-150px;
    }


    .cta-panel > *{
      position:relative;

      z-index:2;
    }


    .cta-panel h2{
      margin:0 auto 16px;

      max-width:760px;

      font-size:clamp(34px,4.5vw,54px);

      letter-spacing:-.04em;

      line-height:1.05;
    }


    .cta-panel p{
      color:rgba(255,255,255,.72);

      max-width:700px;

      margin:0 auto 28px;

      font-size:17px;
    }


    .cta-panel .btn-secondary{
      background:#fff;

      border-color:#fff;
    }



    /* =========================================================
       FOOTER
       ========================================================= */

    footer{
      padding:28px 0 42px;

      color:#6e7772;

      font-size:13px;

      border-top:1px solid #dfe5e1;
    }


    footer .footer-row{
      display:flex;

      justify-content:space-between;

      gap:20px;

      flex-wrap:wrap;
    }



    /* =========================================================
       TABLET
       ========================================================= */

    @media (max-width:900px){

      .nav-links{
        display:none;
      }


      .hero{
        padding-top:24px;
      }


      .hero-grid{
        grid-template-columns:1fr;

        gap:36px;
      }


      .hero-visual{
        min-height:auto;
      }


      .hero-glow{
        inset:30px 0 0 30px;
      }


      .timeline{
        grid-template-columns:1fr 1fr;
      }


      .time-card:nth-child(2):after{
        display:none;
      }


      .contents-grid{
        grid-template-columns:1fr 1fr;
      }


      /*
        На планшете превью перестраиваем
        в две колонки.
      */

      .preview-grid{
        grid-template-columns:repeat(2,1fr);

        gap:26px;
      }


      .preview-card:nth-child(1),
      .preview-card:nth-child(2),
      .preview-card:nth-child(3),
      .preview-card:nth-child(4){
        grid-column:auto;
      }


      .preview-card:nth-child(5){
        grid-column:1 / 3;

        width:calc(50% - 13px);

        justify-self:center;
      }


      .preview-card:nth-child(1){
        transform:rotate(-2deg);
      }


      .preview-card:nth-child(2){
        transform:rotate(2deg);
      }


      .preview-card:nth-child(3){
        transform:rotate(1deg);
      }


      .preview-card:nth-child(4){
        transform:rotate(-2deg);
      }


      .preview-card:nth-child(5){
        transform:rotate(1.5deg);
      }


      .paths{
        grid-template-columns:1fr;
      }
    }



    /* =========================================================
       MOBILE
       ========================================================= */

    @media (max-width:620px){

      .container{
        width:min(100% - 24px, 1180px);
      }


      .hero{
        padding-bottom:62px;
      }


      h1{
        font-size:44px;
      }


      .hero-lead{
        font-size:18px;
      }


      .cta-row{
        flex-direction:column;
      }


      .btn{
        width:100%;
      }


      .timeline{
        grid-template-columns:1fr;
      }


      .time-card:not(:last-child):after{
        display:none;
      }


      .contents-grid{
        grid-template-columns:1fr;
      }


      section{
        padding:70px 0;
      }


      .story-card{
        padding:24px;

        min-height:480px;
      }


      .cta-panel{
        padding:38px 22px;
      }


      /*
        На телефоне все изображения
        идут друг под другом.
        Наклоны убираем.
      */

      .preview-grid{
        display:grid;

        grid-template-columns:1fr;

        gap:24px;

        margin-top:38px;
      }


      .preview-card,
      .preview-card:nth-child(1),
      .preview-card:nth-child(2),
      .preview-card:nth-child(3),
      .preview-card:nth-child(4),
      .preview-card:nth-child(5){

        grid-column:auto;

        width:100%;

        max-width:430px;

        margin:0 auto;

        justify-self:center;

        transform:none;
      }


      .preview-card:hover{
        transform:
          translateY(-6px)
          scale(1.015) !important;
      }
    }

/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */

.language-switcher{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;

  padding:4px;

  background:#f3f7f4;
  border:1px solid #dce8df;
  border-radius:10px;
}

.language-switcher a{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:38px;
  height:32px;
  padding:0 8px;

  border-radius:7px;

  color:#53685b;
  text-decoration:none;

  font-size:13px;
  font-weight:700;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.language-switcher a:hover{
  background:#e1eee6;
  color:#26734d;
}

.language-switcher a.active{
  background:#42a976;
  color:#fff;

  box-shadow:0 2px 6px rgba(66,169,118,.25);
  pointer-events:none;
}

@media (max-width:620px){
  .nav{
    gap:12px;
  }

  .brand span{
    font-size:16px;
  }

  .language-switcher{
    margin-left:auto;
  }

  .language-switcher a{
    min-width:34px;
    height:30px;
    padding:0 6px;
    font-size:12px;
  }
}