.topbar{
      position:sticky; top:0; z-index:110;
      backdrop-filter:blur(16px);
      background:rgba(255,255,255,.78);
      border-bottom:1px solid rgba(19,34,24,.08);
    }
    .nav{
      min-height:78px;
      display:flex; align-items:center; justify-content:space-between; gap:18px;
    }
    .brand{display:flex; align-items:center; gap:12px; min-width:max-content}
    .logo{
      width:48px; height:48px; border-radius:16px;
      display:grid; place-items:center;
      background:linear-gradient(135deg, var(--accent), #daf8c9);
      color:#103414;
      font-weight:950; letter-spacing:-.08em;
      box-shadow:0 12px 30px rgba(126,217,87,.25);
    }
    .brand strong{display:block; font-size:15px; letter-spacing:-.02em}
    .brand span{display:block; font-size:12px; color:var(--muted); margin-top:1px}

    .navlinks{
      display:flex; align-items:center; justify-content:center; gap:5px;
      padding:5px;
      border:1px solid rgba(19,34,24,.08);
      border-radius:999px;
      background:rgba(255,255,255,.75);
      box-shadow:0 8px 26px rgba(19,34,24,.05);
    }
    .navlinks a{
      padding:10px 13px; border-radius:999px; white-space:nowrap;
      color:var(--muted); font-size:14px; transition:.22s ease;
    }
    .navlinks a:hover,.navlinks a.active{
      background:var(--accent-soft); color:var(--text);
    }

    .nav-actions{display:flex; align-items:center; gap:10px}
    .burger{
      display:none; width:44px; height:44px; border:1px solid var(--line);
      border-radius:14px; background:rgba(255,255,255,.84); cursor:pointer;
    }
    .burger span{
      display:block; width:20px; height:2px; background:var(--text);
      margin:5px auto; border-radius:3px; transition:.2s ease;
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      min-height:48px; padding:13px 18px; border-radius:999px;
      border:1px solid transparent; cursor:pointer; user-select:none;
      font-weight:800; letter-spacing:-.01em;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{
      background:linear-gradient(135deg, var(--accent), #dff6d0);
      color:#103414;
      box-shadow:0 18px 42px rgba(126,217,87,.25);
    }
    .btn-secondary{
      background:#fff; border-color:var(--line-strong); color:var(--text);
      box-shadow:0 12px 34px rgba(19,34,24,.05);
    }
    .btn-ghost{
      background:rgba(255,255,255,.48); border-color:rgba(126,217,87,.32); color:var(--text);
    }

    .page{display:none; min-height:calc(100vh - 78px); animation:pageIn .25s ease}
    .page.active{display:block}
    @keyframes pageIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}

    .hero{position:relative; padding:74px 0 52px}
    .hero-grid{
      display:grid; grid-template-columns:minmax(0,1.03fr) minmax(340px,.97fr);
      gap:36px; align-items:center;
    }
    .eyebrow{
      display:inline-flex; align-items:center; gap:9px; padding:9px 12px;
      border:1px solid rgba(126,217,87,.30);
      border-radius:999px; background:rgba(126,217,87,.10);
      color:#2d6036; font-size:13px; font-weight:750; margin-bottom:22px;
    }
    .dot{
      width:9px; height:9px; border-radius:50%; background:var(--accent);
      box-shadow:0 0 0 7px rgba(126,217,87,.14);
    }

    h1,h2,h3,h4,p{margin-top:0}
    h1{
      font-size:clamp(42px, 7vw, 82px);
      line-height:.94;
      letter-spacing:-.075em;
      margin-bottom:20px;
    }
    h2{
      font-size:clamp(32px, 4.5vw, 56px);
      line-height:1;
      letter-spacing:-.06em;
      margin-bottom:0;
    }

    .gradient-text{
      background:linear-gradient(135deg, #18301f 10%, #31984d 48%, #132218 100%);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .lead{
      font-size:clamp(18px, 2vw, 23px);
      color:var(--muted);
      max-width:720px;
      margin-bottom:26px;
    }
    .hero-actions, .section-actions{
      display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px;
    }
    .trust-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
    .chip{
      display:inline-flex; align-items:center; gap:8px;
      min-height:34px; padding:8px 12px; border-radius:999px;
      border:1px solid var(--line); background:#fff; color:#31503a;
      font-size:13px; font-weight:650; box-shadow:0 8px 20px rgba(19,34,24,.04);
    }

    .hero-card{
      position:relative; padding:18px; min-height:620px;
      border:1px solid rgba(19,34,24,.08); border-radius:38px;
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.85));
      box-shadow:var(--shadow); overflow:hidden; isolation:isolate;
    }
    .hero-card::before{
      content:""; position:absolute; width:320px; height:320px; right:-90px; top:-90px;
      border-radius:50%; background:rgba(126,217,87,.18); filter:blur(6px); z-index:-1;
      animation:floatBlob 7s ease-in-out infinite alternate;
    }
    @keyframes floatBlob{
      from{transform:translate(0,0) scale(1)}
      to{transform:translate(-18px,22px) scale(1.08)}
    }

    .photo-wrap{
      position:relative; height:356px; border-radius:28px; overflow:hidden;
      border:1px solid rgba(19,34,24,.08); box-shadow:var(--shadow);
    }
    .photo-wrap img{
      width:100%; height:100%; object-fit:cover;
      transform:scale(1.02);
    }
    .photo-badge{
      position:absolute; left:16px; bottom:16px;
      padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.88);
      color:var(--text); border:1px solid rgba(19,34,24,.08); font-size:13px; font-weight:800;
      box-shadow:0 10px 26px rgba(19,34,24,.08);
    }

    .mini-metrics{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
    .metric{
      padding:18px; border:1px solid var(--line); border-radius:22px;
      background:rgba(255,255,255,.78);
    }
    .metric strong{display:block; font-size:30px; line-height:1; letter-spacing:-.05em}
    .metric span{display:block; color:var(--muted); font-size:13px; margin-top:7px}

    .direction-panel{
      margin-top:14px; padding:18px; border-radius:24px;
      border:1px solid rgba(126,217,87,.28); background:rgba(126,217,87,.08);
    }
    .direction-panel p{color:var(--muted); margin-bottom:14px; font-size:14px}
    .direction-mini{display:grid; grid-template-columns:1fr 1fr; gap:8px}
    .direction-mini a{
      padding:12px; border-radius:15px; background:#fff; border:1px solid var(--line);
      font-size:13px; color:#2b4131; font-weight:800; transition:.2s ease;
    }
    .direction-mini a:hover{
      background:rgba(126,217,87,.12); border-color:rgba(126,217,87,.34); transform:translateY(-2px);
    }

    section{padding:54px 0}
    .section-head{
      display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:26px;
    }
    .section-kicker{
      color:var(--accent-2); font-weight:850; text-transform:uppercase; letter-spacing:.12em;
      font-size:12px; margin-bottom:10px;
    }
    .section-head p{color:var(--muted); max-width:500px; margin-bottom:0}

    .grid{display:grid; gap:16px}
    .grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
    .grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
    .grid-4{grid-template-columns:repeat(4, minmax(0,1fr))}

    .card{
      position:relative; overflow:hidden; padding:24px;
      border-radius:var(--radius); background:rgba(255,255,255,.86);
      border:1px solid rgba(19,34,24,.08); box-shadow:var(--shadow);
    }
    .card::after{
      content:""; position:absolute; inset:auto 0 0 0; height:3px;
      background:linear-gradient(90deg, transparent, rgba(126,217,87,.7), transparent);
      opacity:0; transition:.25s ease;
    }
    .card.hover{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease}
    .card.hover:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(126,217,87,.26);
      background:#fff;
    }
    .card.hover:hover::after{opacity:1}
    .card-icon{
      width:52px; height:52px; border-radius:18px; display:grid; place-items:center;
      background:rgba(126,217,87,.14); border:1px solid rgba(126,217,87,.25);
      margin-bottom:18px; font-size:22px;
    }
    .card h3{
      font-size:22px; line-height:1.1; letter-spacing:-.035em; margin-bottom:10px;
    }
    .card p{color:var(--muted); margin-bottom:18px}
    .card-link{
      display:inline-flex; align-items:center; gap:7px; color:var(--accent-2); font-weight:850;
    }
    .card-link::after{content:"→"; transition:.18s ease}
    .card:hover .card-link::after{transform:translateX(4px)}

    .service-visual{
      height:160px; border-radius:22px; overflow:hidden; margin-bottom:18px;
      border:1px solid rgba(19,34,24,.08);
    }
    .service-visual img{width:100%; height:100%; object-fit:cover}

    .marquee{
      margin:38px 0 0; border-block:1px solid rgba(19,34,24,.08);
      overflow:hidden; background:rgba(255,255,255,.45);
    }
    .marquee-track{
      display:flex; width:max-content; gap:0; padding:14px 0;
      animation:marquee 28s linear infinite;
      will-change:transform;
    }
    .marquee span{
      color:#67806c; font-size:14px; font-weight:800; white-space:nowrap;
      padding-right:32px;
    }
    @keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

    .process{counter-reset:step}
    .step{
      display:grid; grid-template-columns:72px 1fr; gap:18px; align-items:start;
      padding:20px; border-radius:24px; border:1px solid var(--line);
      background:rgba(255,255,255,.72); box-shadow:0 12px 30px rgba(19,34,24,.05);
    }
    .step::before{
      counter-increment:step; content:"0" counter(step);
      width:58px; height:58px; display:grid; place-items:center; border-radius:18px;
      background:linear-gradient(135deg, var(--accent), #e6f7de);
      color:#103414; font-weight:950; letter-spacing:-.05em;
      box-shadow:0 12px 24px rgba(126,217,87,.24);
    }
    .step h3{margin-bottom:6px; font-size:20px}
    .step p{margin:0; color:var(--muted)}

    .case-card{min-height:310px; display:flex; flex-direction:column; justify-content:space-between}
    .case-tag{
      display:inline-flex; width:max-content; padding:7px 10px; border-radius:999px;
      background:rgba(126,217,87,.12); color:var(--accent-2); font-size:12px; font-weight:850;
      margin-bottom:18px;
    }
    .case-result{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px}
    .case-result div{
      padding:12px; border-radius:16px; background:rgba(247,250,246,.9); border:1px solid var(--line);
    }
    .case-result strong{display:block; font-size:22px; letter-spacing:-.04em}
    .case-result span{display:block; color:var(--muted); font-size:12px}
    .notice{
      padding:15px 17px; border-radius:18px; background:rgba(126,217,87,.08);
      border:1px solid rgba(126,217,87,.22); color:#54705b; font-size:14px; margin-top:18px;
    }

    .page-hero{padding:58px 0 24px}
    .page-hero-grid{
      display:grid; grid-template-columns:1fr .62fr; gap:24px; align-items:stretch;
    }
    .page-title-card{
      padding:34px; border-radius:34px; background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
      border:1px solid rgba(19,34,24,.08); overflow:hidden; position:relative; box-shadow:var(--shadow);
    }
    .page-title-card::after{
      content:""; position:absolute; width:300px; height:300px; right:-150px; top:-150px;
      border-radius:50%; background:rgba(126,217,87,.14); filter:blur(4px);
    }
    .page-title-card h1{
      font-size:clamp(40px, 5vw, 68px); margin-bottom:16px; position:relative; z-index:1;
    }
    .page-title-card p{
      color:var(--muted); font-size:19px; max-width:780px; margin-bottom:0; position:relative; z-index:1;
    }
    .page-side{display:flex; flex-direction:column; justify-content:space-between; gap:14px}
    .side-card{
      flex:1; padding:24px; border-radius:30px; border:1px solid var(--line);
      background:rgba(255,255,255,.84); box-shadow:var(--shadow);
    }
    .side-card strong{display:block; font-size:34px; line-height:1; letter-spacing:-.055em}
    .side-card span{display:block; color:var(--muted); margin-top:10px}

    .list{display:grid; gap:10px; margin:0; padding:0; list-style:none}
    .list li{
      display:flex; gap:10px; align-items:start; color:var(--muted);
      padding:12px 0; border-bottom:1px solid rgba(19,34,24,.08);
    }
    .list li:last-child{border-bottom:none}
    .list li::before{
      content:"✓"; width:24px; height:24px; display:grid; place-items:center; flex:0 0 24px;
      border-radius:50%; background:rgba(126,217,87,.14); color:var(--accent-2); font-weight:950; font-size:13px;
    }

    .split{display:grid; grid-template-columns:.85fr 1.15fr; gap:22px; align-items:start}

    .pricing-card{display:flex; flex-direction:column; min-height:350px}
    .pricing-card .tag{
      width:max-content; padding:7px 10px; border-radius:999px; background:#f5faf2;
      border:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:850; margin-bottom:16px;
    }
    .pricing-card h3{font-size:26px; margin-bottom:8px}
    .pricing-card .price{color:var(--accent-2); font-size:18px; font-weight:900; margin-bottom:16px}
    .pricing-card .btn{margin-top:auto}

    .blog-card{display:flex; flex-direction:column; min-height:280px}
    .blog-card small{color:var(--accent-2); font-weight:850; margin-bottom:14px; display:block}
    .blog-card h3{font-size:25px}
    .blog-card .btn{margin-top:auto}

    .contact-wrap{
      display:grid; grid-template-columns:.95fr 1.05fr; gap:20px; align-items:stretch;
    }
    .contact-list{display:grid; gap:12px}
    .contact-item{
      display:flex; gap:14px; align-items:center; padding:16px; border-radius:22px;
      border:1px solid var(--line); background:#fff; transition:.18s ease; box-shadow:0 10px 24px rgba(19,34,24,.04);
    }
    .contact-item:hover{
      transform:translateY(-2px); border-color:rgba(126,217,87,.35);
      background:rgba(126,217,87,.08);
    }
    .contact-icon{
      width:44px; height:44px; display:grid; place-items:center; border-radius:16px;
      background:rgba(126,217,87,.12); color:var(--accent-2); font-weight:950;
    }
    .contact-item strong{display:block; margin-bottom:2px}
    .contact-item span{color:var(--muted); font-size:14px}

    .form{display:grid; gap:12px}
    .field{display:grid; gap:8px}
    .field label{color:#2d4732; font-size:13px; font-weight:800}
    .field input, .field textarea, .field select{
      width:100%; border:1px solid var(--line); border-radius:18px; padding:15px 16px;
      color:var(--text); background:#fff; outline:none; transition:.16s ease;
    }
    .field textarea{min-height:122px; resize:vertical}
    .field input:focus, .field textarea:focus, .field select:focus{
      border-color:rgba(126,217,87,.55); box-shadow:0 0 0 4px rgba(126,217,87,.12);
    }
    option{background:#fff; color:var(--text)}

    .empty-video{
      min-height:210px; display:grid; place-items:center; text-align:center;
      border:1px dashed rgba(126,217,87,.34); border-radius:26px; background:rgba(126,217,87,.06);
      color:var(--muted); padding:25px;
    }
    .empty-video strong{color:var(--text); display:block; margin-bottom:8px; font-size:21px}

    .footer{
      margin-top:54px; padding:32px 0; border-top:1px solid rgba(19,34,24,.08); color:var(--muted);
    }
    .footer-grid{display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap}
    .footer-links{display:flex; flex-wrap:wrap; gap:12px}
    .footer-links a{color:#36503c; font-weight:700; font-size:14px}

    .mobile-panel{display:none; border-top:1px solid var(--line); padding:12px 0 18px}
    .mobile-panel.open{display:block}
    .mobile-links{display:grid; gap:8px}
    .mobile-links a{
      padding:13px 14px; border-radius:16px; background:#fff; border:1px solid var(--line);
      color:#2d4732; font-weight:800;
    }
    .mobile-links a.active{
      background:rgba(126,217,87,.13); border-color:rgba(126,217,87,.3); color:var(--text);
    }

    .floating-cta{
      position:fixed; right:18px; bottom:18px; z-index:90;
      display:flex; flex-direction:column; gap:9px;
    }
    .floating-cta a{
      width:54px; height:54px; border-radius:19px; display:grid; place-items:center;
      background:linear-gradient(135deg, var(--accent), #e3f7d7);
      color:#103414; font-weight:950; box-shadow:0 18px 44px rgba(19,34,24,.14);
      border:1px solid rgba(255,255,255,.2);
      transition:transform .2s ease;
    }
    .floating-cta a:hover{transform:translateY(-2px) scale(1.03)}

    .anchor-offset{scroll-margin-top:92px}

    /* premium scroll animations */
    .reveal{
      opacity:0;
      transform:translateY(24px) scale(.985);
      transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      will-change:transform, opacity;
    }
    .reveal.is-visible{
      opacity:1;
      transform:translateY(0) scale(1);
    }
    .reveal.delay-1{transition-delay:.08s}
    .reveal.delay-2{transition-delay:.16s}
    .reveal.delay-3{transition-delay:.24s}


    .photo-wrap img.darya-photo, .photo-wrap img{
      object-position:center center;
    }

    .team-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
    }

    .team-card{
      min-height:245px;
    }

    .team-role{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(126,217,87,.12);
      color:var(--accent-2);
      font-size:12px;
      font-weight:850;
      margin-bottom:14px;
    }

    .business-stack{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:20px;
      align-items:stretch;
    }

    .business-photo{
      min-height:520px;
      border-radius:34px;
      overflow:hidden;
      border:1px solid rgba(19,34,24,.08);
      box-shadow:var(--shadow);
      position:relative;
      background:#fff;
    }

    .business-photo img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center center;
    }

    .business-photo::after{
      content:"команда под проект Дарьи";
      position:absolute;
      left:18px;
      bottom:18px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.88);
      border:1px solid rgba(19,34,24,.08);
      color:var(--text);
      font-size:13px;
      font-weight:850;
      box-shadow:0 10px 26px rgba(19,34,24,.08);
    }

    .deliverables{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
      margin-top:18px;
    }

    .deliverable{
      padding:16px;
      border-radius:20px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.74);
    }

    .deliverable strong{
      display:block;
      margin-bottom:6px;
      letter-spacing:-.02em;
    }

    .deliverable span{
      color:var(--muted);
      font-size:14px;
    }