index.html - master - orbitall/debj

index.html
668 строк30 KB
orbitall
Create: index.html
01 авг 2026, 13:42
01 авг 2026, 13:42bc9c375
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>04:17 — сайты на заказ</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#111111;
    --paper:#F4EDE4;
    --paper-card:#FBF7F0;
    --ink-70:rgba(17,17,17,0.7);
    --ink-55:rgba(17,17,17,0.55);
    --ink-35:rgba(17,17,17,0.35);
    --ink-12:rgba(17,17,17,0.12);
    --paper-70:rgba(244,237,228,0.7);
    --paper-55:rgba(244,237,228,0.55);
    --pill-bg:#EAE0D0;
    --line:#E1D5C2;
    --ease:cubic-bezier(0.16,1,0.3,1);
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:'Inter', -apple-system, sans-serif;
    background:var(--paper);
    color:var(--ink);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    -webkit-tap-highlight-color:transparent;
  }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }
  section{ position:relative; }
  img,svg{ display:block; }

  /* ===================== NAV ===================== */
  .navbar{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
    pointer-events:none;
    opacity:0;
    transform:translateY(-16px);
    animation:navIn .8s var(--ease) forwards;
  }
  .navbar > *{ pointer-events:auto; }
  @keyframes navIn{ to{ opacity:1; transform:translateY(0); } }

  .nav-left, .nav-right{ display:flex; align-items:center; gap:10px; }

  .logo{ display:flex; align-items:center; gap:8px; }
  .logo span{ font-size:14px; font-weight:600; letter-spacing:-0.01em; display:none; }

  .menu-btn{
    display:flex; align-items:center; gap:6px;
    background:var(--ink); color:var(--paper);
    border-radius:999px; padding:6px 14px 6px 6px;
    min-height:40px;
    transition:transform .3s var(--ease);
  }
  .menu-btn:hover{ transform:scale(1.04); }
  .menu-btn .circle{ width:28px; height:28px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; }
  .menu-btn .circle svg{ stroke:var(--ink); }
  .menu-btn span{ font-size:11px; color:var(--paper); font-weight:500; display:none; }

  .tags-pill{
    display:none; align-items:center; gap:10px;
    background:var(--pill-bg); border-radius:999px; padding:6px 14px;
    font-size:11px; color:var(--ink-55); font-weight:500;
  }
  .tags-pill .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-35); }

  .right-pill{
    display:flex; align-items:center; gap:8px;
    background:var(--pill-bg); border-radius:999px; padding:6px 6px;
    min-height:40px;
    transition:transform .3s var(--ease);
  }
  .right-pill:hover{ transform:scale(1.04); }
  .right-pill .circle{ width:28px; height:28px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .right-pill .circle svg{ stroke:var(--paper); }
  .right-pill span{ font-size:11px; font-weight:500; color:var(--ink-70); display:none; padding-right:8px; }

  @media (min-width:768px){
    .navbar{ padding:24px 32px; }
    .logo span{ display:block; }
    .menu-btn .circle{ width:32px; height:32px; }
    .menu-btn span{ display:block; }
    .tags-pill{ display:flex; }
    .right-pill .circle{ width:32px; height:32px; }
    .right-pill span{ display:block; }
  }

  /* ===================== HERO ===================== */
  .hero{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:var(--paper);
  }
  .video-stage{
    position:absolute; inset:0; z-index:0;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
    will-change:transform;
  }
  .video-wrap{
    width:80%; height:80%; overflow:hidden;
    border-radius:18px;
    opacity:0; transform:scale(1.05);
    animation:videoIn 1.8s var(--ease) forwards;
  }
  .video-wrap video{ width:100%; height:100%; object-fit:cover; }
  @keyframes videoIn{ to{ opacity:1; transform:scale(1); } }

  @media (min-width:768px){
    .video-wrap{ width:100%; height:100%; border-radius:0; }
  }

  .hero-footer{
    position:relative; z-index:5;
    padding:24px 16px calc(40px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, var(--paper) 0%, rgba(244,237,228,0.85) 55%, transparent 100%);
    display:flex; flex-direction:column; gap:28px;
  }
  .subtitle{
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(16px);
    animation:upIn .8s var(--ease) .6s forwards;
  }
  .subtitle .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink); flex-shrink:0; }
  .subtitle span{ font-size:13px; color:var(--ink-55); }

  h1{
    font-weight:300;
    font-size:clamp(2rem, 8vw, 4.5rem);
    letter-spacing:-0.03em;
    line-height:1;
    opacity:0; transform:translateY(20px);
    animation:upIn .8s var(--ease) .8s forwards;
  }
  @keyframes upIn{ to{ opacity:1; transform:translateY(0); } }

  .cta-row{
    display:flex; gap:10px; flex-wrap:wrap;
    opacity:0; transform:translateY(16px);
    animation:upIn .8s var(--ease) 1s forwards;
  }
  .btn-primary{ background:var(--ink); color:var(--paper); font-size:13px; font-weight:500; padding:13px 24px; border-radius:999px; transition:transform .25s var(--ease), opacity .25s; display:inline-block; }
  .btn-primary:hover{ transform:scale(1.045); }
  .btn-secondary{ background:transparent; color:var(--ink); font-size:13px; font-weight:500; padding:13px 24px; border-radius:999px; border:1px solid var(--ink-35); transition:background .25s, transform .25s var(--ease); display:inline-block; }
  .btn-secondary:hover{ background:var(--pill-bg); transform:scale(1.03); }

  .footer-tags{
    display:flex; gap:8px; flex-wrap:wrap;
    opacity:0; transform:translateY(16px);
    animation:upIn .8s var(--ease) 1s forwards;
  }
  .tag-pill{ background:var(--paper-card); border:1px solid var(--ink-12); border-radius:999px; padding:8px 14px; font-size:11px; font-weight:500; color:var(--ink-55); }

  @media (min-width:768px){
    .hero-footer{ flex-direction:row; align-items:flex-end; justify-content:space-between; padding:32px; }
    .footer-tags{ justify-content:flex-end; }
  }

  .scroll-cue{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    z-index:6; display:flex; flex-direction:column; align-items:center; gap:6px;
    opacity:0; animation:cueIn .8s var(--ease) 1.4s forwards;
  }
  @keyframes cueIn{ to{ opacity:.55; } }
  .scroll-cue span{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-55); }
  .scroll-cue svg{ animation:cueBounce 1.8s ease-in-out infinite; stroke:var(--ink); }
  @keyframes cueBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

  /* ===================== MARQUEE ===================== */
  .marquee{
    background:var(--ink); overflow:hidden; padding:14px 0;
  }
  .marquee-track{
    display:flex; width:max-content;
    animation:marqueeScroll 22s linear infinite;
  }
  .marquee-track span{
    font-size:11px; letter-spacing:.07em; text-transform:uppercase;
    color:var(--paper-70); padding:0 14px; white-space:nowrap; font-weight:500;
  }
  @media (min-width:768px){
    .marquee-track span{ font-size:12px; letter-spacing:.08em; padding:0 22px; }
  }
  .marquee-track span.dot-sep{ color:var(--paper-55); padding:0; }
  @keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

  /* ===================== BUILD / SIGNATURE ANIMATION ===================== */
  .build-section{ height:280vh; position:relative; background:var(--paper); }
  .build-stage{
    position:sticky; top:0; height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:32px; overflow:hidden; padding:0 20px;
  }
  .build-eyebrow{
    display:flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-35);
  }
  .build-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink); }

  .mock-browser{
    position:relative;
    width:min(84vw, 320px);
    background:var(--paper-card);
    border:1.5px solid var(--ink);
    border-radius:16px;
    padding:18px;
  }
  .mock-bar{ display:flex; gap:6px; margin-bottom:16px; }
  .mock-dot{ width:8px; height:8px; border-radius:50%; background:var(--ink); opacity:0; transform:scale(.4); transition:opacity .3s var(--ease), transform .3s var(--ease); }
  .mock-image{ height:88px; width:0%; background:var(--ink); border-radius:8px; margin-bottom:14px; transition:width .05s linear; }
  .mock-line{ height:8px; border-radius:4px; background:var(--ink); width:0%; margin-bottom:9px; transition:width .05s linear; }
  .mock-line.l3{ margin-bottom:16px; }
  .mock-btn{
    display:inline-block; font-size:12px; font-weight:600; padding:9px 20px; border-radius:999px;
    border:1.5px solid var(--ink); color:var(--ink); background:transparent;
    opacity:0; transform:scale(.7);
  }
  .mock-btn.is-done{ background:var(--ink); color:var(--paper); }
  .mock-cursor{ position:absolute; left:14%; top:18%; opacity:0; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

  .build-caption{
    max-width:340px; text-align:center;
    font-size:15px; line-height:1.5; color:var(--ink-70); font-weight:400;
  }
  .build-caption b{ font-weight:600; color:var(--ink); }

  /* ===================== SECTION HEAD ===================== */
  .section-inner{ max-width:1080px; margin:0 auto; padding:64px 20px; }
  @media (min-width:768px){ .section-inner{ padding:96px 20px; } }
  .section-head{ margin-bottom:56px; max-width:560px; }
  .section-head .eyebrow{
    display:flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-35);
    margin-bottom:16px;
  }
  .section-head .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink); }
  .section-head h2{
    font-weight:300; font-size:clamp(1.7rem, 4vw, 2.6rem);
    letter-spacing:-0.02em; line-height:1.1; margin-bottom:14px;
  }
  .section-head p{ font-size:14.5px; line-height:1.6; color:var(--ink-55); }

  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ===================== CATALOG ===================== */
  .catalog{ background:var(--paper); border-top:1px solid var(--line); }
  .catalog-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (min-width:640px){ .catalog-grid{ grid-template-columns:1fr 1fr; } }
  @media (min-width:980px){ .catalog-grid{ grid-template-columns:1fr 1fr 1fr; } }

  .service-card{
    background:var(--paper-card); padding:32px 26px; display:flex; flex-direction:column; gap:18px;
    transition:background .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .service-card:hover{ background:#FFFDF8; transform:translateY(-5px); box-shadow:0 14px 28px -18px rgba(17,17,17,0.35); }
  .service-icon{
    width:42px; height:42px; border-radius:12px; background:var(--pill-bg);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:transform .3s var(--ease);
  }
  .service-card:hover .service-icon{ transform:rotate(-6deg) scale(1.06); }
  .service-icon svg{ stroke:var(--ink); }
  .service-card h3{ font-size:16px; font-weight:600; letter-spacing:-0.01em; }
  .service-card p{ font-size:13.5px; line-height:1.55; color:var(--ink-55); flex-grow:1; }
  .service-price{ font-size:12px; color:var(--ink-35); font-weight:500; padding-top:6px; border-top:1px solid var(--line); }

  /* ===================== PROCESS ===================== */
  .process{ background:var(--pill-bg); }
  .process-list{ display:flex; flex-direction:column; gap:0; }
  .process-item{
    display:flex; gap:24px; padding:26px 0; border-bottom:1px solid rgba(17,17,17,0.1);
    align-items:flex-start; transition:padding-left .3s var(--ease);
  }
  .process-item:hover{ padding-left:8px; }
  .process-item:last-child{ border-bottom:none; }
  .process-num{ font-size:13px; font-weight:600; color:var(--ink-35); width:28px; flex-shrink:0; padding-top:2px; }
  .process-body h3{ font-size:15.5px; font-weight:600; margin-bottom:6px; letter-spacing:-0.01em; }
  .process-body p{ font-size:13.5px; line-height:1.6; color:var(--ink-55); max-width:520px; }

  /* ===================== CTA / FOOTER ===================== */
  .cta-section{ background:var(--ink); color:var(--paper); }
  .cta-section .section-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; padding:72px 20px; }
  @media (min-width:768px){ .cta-section .section-inner{ padding:110px 20px; } }
  .cta-section h2{ font-weight:300; font-size:clamp(1.8rem, 5vw, 3rem); letter-spacing:-0.02em; line-height:1.1; max-width:640px; }
  .cta-section p{ font-size:14px; color:var(--paper-55); max-width:420px; line-height:1.6; }
  .cta-section .btn-primary{ background:var(--paper); color:var(--ink); }
  .cta-section .btn-primary:hover{ transform:scale(1.045); }

  footer.site-footer{
    padding:22px 20px calc(22px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between;
    font-size:12px; color:var(--ink-35); flex-wrap:wrap; gap:10px; border-top:1px solid var(--line);
  }
  footer.site-footer a{ color:var(--ink-55); font-weight:500; transition:color .2s; }
  footer.site-footer a:hover{ color:var(--ink); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; }
  }
</style>
</head>
<body>

  <nav class="navbar">
    <div class="nav-left">
      <div class="logo">
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <rect x="2" y="8" width="12" height="6" rx="3" fill="#111111" transform="rotate(-35 8 11)"/>
          <rect x="8" y="8" width="12" height="6" rx="3" fill="#111111" transform="rotate(-35 14 11)"/>
        </svg>
        <span>04:17</span>
      </div>
      <button class="menu-btn" aria-label="Меню" onclick="document.getElementById('catalog').scrollIntoView({behavior:'smooth'})">
        <span class="circle">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
        </span>
        <span>Услуги</span>
      </button>
      <div class="tags-pill">
        <span>Веб-дизайн</span>
        <span class="dot"></span>
        <span>Разработка на заказ</span>
      </div>
    </div>

    <div class="nav-right">
      <a href="https://t.me/skur44ttovsky" target="_blank" rel="noopener" class="right-pill">
        <span class="circle">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#F4EDE4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 3 3 10.5l7 3 2 7 3-4.5 5 3L21 3Z"/>
          </svg>
        </span>
        <span>Написать в Telegram</span>
      </a>
    </div>
  </nav>

  <!-- ===================== HERO ===================== -->
  <header class="hero">
    <div class="video-stage" id="videoStage">
      <div class="video-wrap">
        <video autoplay muted playsinline loop>
          <source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_215831_c6a8989c-d716-4d8d-8745-e972a2eec711.mp4" type="video/mp4">
        </video>
      </div>
    </div>

    <div style="flex-grow:1"></div>

    <div class="hero-footer">
      <div style="display:flex; flex-direction:column; gap:18px;">
        <div class="subtitle">
          <span class="dot"></span>
          <span>Один разработчик · без агентств и посредников</span>
        </div>
        <h1>Сделано руками,<br>не шаблонами.</h1>
        <div class="cta-row">
          <a href="https://t.me/skur44ttovsky" target="_blank" rel="noopener" class="btn-primary">Написать в Telegram</a>
          <a href="#how" class="btn-secondary">Как это работает</a>
        </div>
      </div>
      <div class="footer-tags">
        <span class="tag-pill">Лендинги</span>
        <span class="tag-pill">Интернет-магазины</span>
        <span class="tag-pill">Корп. сайты</span>
      </div>
    </div>

    <div class="scroll-cue">
      <span>Листайте вниз</span>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 5v14M6 13l6 6 6-6"/>
      </svg>
    </div>
  </header>

  <!-- ===================== MARQUEE ===================== -->
  <div class="marquee" aria-hidden="true">
    <div class="marquee-track">
      <span>Лендинги</span><span class="dot-sep">·</span>
      <span>Интернет-магазины</span><span class="dot-sep">·</span>
      <span>Корпоративные сайты</span><span class="dot-sep">·</span>
      <span>Редизайн</span><span class="dot-sep">·</span>
      <span>Поддержка</span><span class="dot-sep">·</span>
      <span>Веб-сервисы на заказ</span><span class="dot-sep">·</span>
      <span>Лендинги</span><span class="dot-sep">·</span>
      <span>Интернет-магазины</span><span class="dot-sep">·</span>
      <span>Корпоративные сайты</span><span class="dot-sep">·</span>
      <span>Редизайн</span><span class="dot-sep">·</span>
      <span>Поддержка</span><span class="dot-sep">·</span>
      <span>Веб-сервисы на заказ</span><span class="dot-sep">·</span>
    </div>
  </div>

  <!-- ===================== BUILD / SIGNATURE ===================== -->
  <section class="build-section">
    <div class="build-stage">
      <div class="build-eyebrow"><span class="dot"></span>Каждый сайт собирается по кусочкам</div>

      <div class="mock-browser" id="mockBrowser">
        <div class="mock-bar">
          <span class="mock-dot"></span>
          <span class="mock-dot"></span>
          <span class="mock-dot"></span>
        </div>
        <div class="mock-image" id="mockImage"></div>
        <div class="mock-line l1" id="mockLine1"></div>
        <div class="mock-line l2" id="mockLine2"></div>
        <div class="mock-line l3" id="mockLine3"></div>
        <span class="mock-btn" id="mockBtn">Готово</span>

        <svg class="mock-cursor" id="mockCursor" width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M4 2.5 19 9l-6 1.8L11.5 17 4 2.5Z" fill="#111111"/>
        </svg>
      </div>

      <p class="build-caption">Никаких конструкторов и готовых тем — <b>вёрстка, логика и дизайн</b> пишутся под задачу с нуля.</p>
    </div>
  </section>

  <!-- ===================== CATALOG ===================== -->
  <section class="catalog" id="catalog">
    <div class="section-inner">
      <div class="section-head reveal">
        <div class="eyebrow"><span class="dot"></span>Каталог услуг</div>
        <h2>Выбирайте формат — остальное беру на себя.</h2>
        <p>От простого лендинга до полноценного магазина. Каждый проект — фиксированный срок и понятный результат.</p>
      </div>
    </div>

    <div class="catalog-grid">

      <div class="service-card reveal">
        <div class="service-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
        </div>
        <h3>Landing page</h3>
        <p>Одностраничный сайт под продукт, услугу или запуск акции. Быстрая сдача, упор на конверсию.</p>
        <div class="service-price">Срок · от 3 дней</div>
      </div>

      <div class="service-card reveal">
        <div class="service-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4"/><path d="M3 6h18M16 10a4 4 0 0 1-8 0"/></svg>
        </div>
        <h3>Интернет-магазин</h3>
        <p>Каталог, корзина, оплата и админка для управления товарами. Готов к первым продажам сразу после сдачи.</p>
        <div class="service-price">Срок · от 10 дней</div>
      </div>

      <div class="service-card reveal">
        <div class="service-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
        </div>
        <h3>Корпоративный сайт</h3>
        <p>Многостраничный сайт компании: услуги, команда, кейсы, контакты. Структура под вашу подачу и тон.</p>
        <div class="service-price">Срок · от 14 дней</div>
      </div>

      <div class="service-card reveal">
        <div class="service-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
        </div>
        <h3>Редизайн</h3>
        <p>Обновление существующего сайта: новый визуал, вёрстка, ускорение загрузки — без потери контента.</p>
        <div class="service-price">Срок · от 5 дней</div>
      </div>

      <div class="service-card reveal">
        <div class="service-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12a8 8 0 0 1 15-4M20 12a8 8 0 0 1-15 4"/><path d="m4 4 0 4 4 0M20 20l0-4-4 0"/></svg>
        </div>
        <h3>Поддержка и доработки</h3>
        <p>Правки, новые разделы, мелкие фичи и мониторинг после запуска — сайт остаётся под присмотром.</p>
        <div class="service-price">Абонемент · по договорённости</div>
      </div>

      <div class="service-card reveal">
        <div class="service-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m8 6-6 6 6 6M16 6l6 6-6 6"/></svg>
        </div>
        <h3>Веб-сервисы на заказ</h3>
        <p>Личные кабинеты, калькуляторы, интеграции с CRM и API — когда нужна логика сложнее визитки.</p>
        <div class="service-price">Срок · по брифу</div>
      </div>

    </div>
  </section>

  <!-- ===================== PROCESS ===================== -->
  <section class="process" id="how">
    <div class="section-inner">
      <div class="section-head reveal">
        <div class="eyebrow"><span class="dot"></span>Как это работает</div>
        <h2>Четыре шага от идеи до запуска.</h2>
      </div>

      <div class="process-list reveal">
        <div class="process-item">
          <div class="process-num">01</div>
          <div class="process-body">
            <h3>Заявка в Telegram</h3>
            <p>Пишете, что нужно — обсуждаем задачу, сроки и бюджет в переписке или на созвоне.</p>
          </div>
        </div>
        <div class="process-item">
          <div class="process-num">02</div>
          <div class="process-body">
            <h3>Бриф и структура</h3>
            <p>Фиксируем разделы, контент и референсы. Согласовываем план перед началом работы.</p>
          </div>
        </div>
        <div class="process-item">
          <div class="process-num">03</div>
          <div class="process-body">
            <h3>Дизайн и вёрстка</h3>
            <p>Собираю сайт вручную: дизайн, адаптивная вёрстка, анимации — без конструкторов.</p>
          </div>
        </div>
        <div class="process-item">
          <div class="process-num">04</div>
          <div class="process-body">
            <h3>Сдача и поддержка</h3>
            <p>Передаю готовый сайт, помогаю с публикацией и остаюсь на связи для правок.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== CTA ===================== -->
  <section class="cta-section">
    <div class="section-inner">
      <h2>Готовы обсудить свой сайт?</h2>
      <p>Опишите задачу в Telegram — отвечаю обычно в течение дня.</p>
      <a href="https://t.me/skur44ttovsky" target="_blank" rel="noopener" class="btn-primary">Написать в Telegram</a>
    </div>
  </section>

  <footer class="site-footer">
    <span>© 2026 04:17</span>
    <a href="https://t.me/skur44ttovsky" target="_blank" rel="noopener">t.me/skur44ttovsky</a>
  </footer>

  <script>
    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function clamp01(v){ return Math.min(Math.max(v, 0), 1); }
    function mapRange(p, start, end){ return clamp01((p - start) / (end - start)); }

    // ---- Build animation + hero parallax, driven by one scroll loop ----
    (function(){
      var buildSection = document.querySelector('.build-section');
      var videoStage = document.getElementById('videoStage');
      var dots = document.querySelectorAll('.mock-dot');
      var img = document.getElementById('mockImage');
      var l1 = document.getElementById('mockLine1');
      var l2 = document.getElementById('mockLine2');
      var l3 = document.getElementById('mockLine3');
      var btn = document.getElementById('mockBtn');
      var cursor = document.getElementById('mockCursor');

      if (reduced){
        dots.forEach(function(d){ d.style.opacity = 1; d.style.transform = 'scale(1)'; });
        img.style.width = '100%';
        l1.style.width = '88%'; l2.style.width = '72%'; l3.style.width = '46%';
        btn.style.opacity = 1; btn.style.transform = 'scale(1)'; btn.classList.add('is-done');
        return;
      }

      var ticking = false;

      function update(){
        ticking = false;

        // hero parallax
        if (videoStage){
          var sy = window.scrollY || window.pageYOffset;
          videoStage.style.transform = 'translateY(' + Math.min(sy * 0.12, 80) + 'px)';
        }

        if (!buildSection) return;
        var rect = buildSection.getBoundingClientRect();
        var scrollable = rect.height - window.innerHeight;
        var progress = scrollable > 0 ? clamp01(-rect.top / scrollable) : 0;

        var dotsP = mapRange(progress, 0, 0.14);
        dots.forEach(function(d, i){
          var local = clamp01(dotsP * 3 - i);
          d.style.opacity = local;
          d.style.transform = 'scale(' + (0.4 + 0.6 * local) + ')';
        });

        img.style.width = (mapRange(progress, 0.14, 0.4) * 100) + '%';
        l1.style.width = (mapRange(progress, 0.4, 0.52) * 88) + '%';
        l2.style.width = (mapRange(progress, 0.52, 0.64) * 72) + '%';
        l3.style.width = (mapRange(progress, 0.64, 0.74) * 46) + '%';

        var btnP = mapRange(progress, 0.74, 0.87);
        btn.style.opacity = btnP;
        btn.style.transform = 'scale(' + (0.7 + 0.3 * btnP) + ')';

        var cursorFade = mapRange(progress, 0.78, 0.85);
        var cursorMove = mapRange(progress, 0.8, 0.97);
        cursor.style.opacity = cursorFade;
        cursor.style.left = (14 + cursorMove * 62) + '%';
        cursor.style.top = (18 + cursorMove * 60) + '%';

        var clickP = mapRange(progress, 0.95, 1);
        if (clickP > 0){
          btn.classList.add('is-done');
          btn.style.transform = 'scale(' + (1 + clickP * 0.08) + ')';
        } else {
          btn.classList.remove('is-done');
        }
      }

      window.addEventListener('scroll', function(){
        if (!ticking){ window.requestAnimationFrame(update); ticking = true; }
      }, { passive:true });
      update();
    })();

    // ---- Reveal on scroll ----
    (function(){
      var items = document.querySelectorAll('.reveal');
      if (!('IntersectionObserver' in window)){
        items.forEach(function(el){ el.classList.add('in'); });
        return;
      }
      var io = new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if (entry.isIntersecting){
            entry.target.classList.add('in');
            io.unobserve(entry.target);
          }
        });
      }, { threshold: 0.15 });
      items.forEach(function(el){ io.observe(el); });
    })();
  </script>

</body>
</html>