:root{
    --bg: #F2F5FA;
    --surface: #FFFFFF;
    --ink: #131514;
    --ink-2: #202B2D;
    --ink-3: #556265;
    --ink-mute: #8b949a;
    --line: #E5EAF0;
    --line-2: #C6CFD4;
    --accent: #A9F06E;
    --accent-soft: #E1FFC9;
    --blue: #468DCC;
    --blue-soft: #B9DBFB;
    --blue-deep: #253E5C;
    --green-deep: #1F3F3A;
    --orange: #FF9459;
    --red: #F34D3A;
    --red-deep: #BD201A;
    --radius: 20px;
    --radius-lg: 28px;
    --radius-sm: 12px;
    --pad-x: clamp(20px, 4vw, 64px);
    --maxw: 1240px;
    --cur-arrow: url('../cursor.svg') 6 6;
    --cur-hand: url('../hand-cursor.svg') 6 6;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0; width:100%}
  html{ scroll-behavior: smooth; scroll-padding-top: 100px }
  body{
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.4;
    overflow-x: clip;
    cursor: var(--cur-arrow), auto;
  }
  /* hand cursor over interactive elements */
  a, button, [role="button"], .lnk, label, summary, select{
    cursor: var(--cur-hand), pointer;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); position:relative}
  a{color:inherit; text-decoration:none}
  button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
  h1,h2,h3,h4,p{margin:0}
  img{display:block; max-width:100%}

  /* Type */
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 12px 7px 10px; background:var(--surface); border:1px solid var(--line);
    border-radius:999px; font-size:13px; font-weight:500; color:var(--ink-3);
  }
  .eyebrow .dot{width:8px; height:8px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 4px rgba(169,240,110,.25)}

  .h-display{
    font-family:'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(42px, 7.2vw, 104px);
    line-height: 0.93;
    letter-spacing: -0.045em;
    color: var(--ink);
    text-wrap: balance;
  }
  .h-display .em{ color: var(--ink); font-weight: 600 }
  .h-display--xl{ font-size: clamp(56px, 10vw, 140px); line-height: 0.9 }
  .hero-tag{
    display: inline-flex; align-items: center;
    padding: 6px 16px; border-radius: 999px;
    background: rgba(255,255,255,.9); color: var(--ink);
    border: 3px solid #ffffff;
    box-shadow: 0 16px 48px rgba(0,0,0,.10);
    font-size: 13px; font-weight: 600; letter-spacing: .01em;
    margin-bottom: 20px;
    position: relative; z-index: 2;
    will-change: transform;
  }
  .hero-brand-tag{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    font-size: 13px; font-weight: 600; color: var(--ink-2);
    letter-spacing: 0.01em; margin-bottom: 20px;
  }
  .hero-brand-tag svg{ color: var(--ink-3) }

  .h-section{
    font-weight: 600;
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 1.03;
    letter-spacing: -0.035em;
    color: var(--ink-mute);
    text-wrap: balance;
  }
  .h-section .em{ color: var(--ink); font-weight: 600 }
  .h-section.solid{ color: var(--ink) }

  .h-sub{
    font-weight:600;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .muted{ color: var(--ink-3) }
  .lead{ font-size: clamp(14px, 1.1vw, 16px); color:var(--ink-3); line-height:1.5; max-width:64ch; text-wrap:pretty }
  .mono{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.02em }

  /* Inline app tile (used in headings & floating) */
  .tile{
    display:inline-flex; align-items:center; justify-content:center;
    vertical-align: -0.18em;
    width: 0.95em; height: 0.95em;
    border-radius: 0.24em;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 6px 16px rgba(19,21,20,.08), 0 1px 0 rgba(255,255,255,.6) inset;
    font-size: 0.62em;
    font-weight: 700;
    color: var(--ink);
    margin: 0 .03em;
  }
  .tile.green{ background: var(--accent); border-color: transparent }
  .tile.blue{ background: var(--blue); color: #fff; border-color: transparent }
  .tile.orange{ background: var(--orange); color: #fff; border-color: transparent }
  .tile.dark{ background: var(--ink); color: var(--accent); border-color: transparent }
  .tile.red{ background: var(--red); color: #fff; border-color: transparent }
  .tile svg{ width: 58%; height: 58%; display:block }

  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    height: 54px; padding: 0 22px; border-radius: 999px;
    font-weight:600; font-size:15px; letter-spacing:-.005em;
    transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
  }
  .btn:hover{ transform: translateY(-1px) }
  .btn-primary{ background: var(--ink); color: #fff }
  .btn-primary:hover{ background:#000 }
  .btn-accent{ background: var(--accent); color: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.06) }
  .btn-accent:hover{ background:#9be95c }
  .btn-cta:hover{ box-shadow: 0 6px 28px rgba(169,240,110,.45); transform: translateY(-2px) }
  .btn-cta .ic{ transition: transform .2s ease }
  .btn-cta:hover .ic{ transform: translateX(4px) }
  .btn-ghost{ background: var(--surface); color: var(--ink); border:1px solid var(--line) }
  .btn-ghost:hover{ background:#fff }
  .btn-ghost--dark{ background: transparent; border-color: var(--ink-3) }
  .btn-ghost--dark:hover{ background: rgba(0,0,0,.04); border-color: var(--ink) }
  .btn .ic{ width:22px; height:22px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.16); font-size:13px }
  .btn-accent .ic, .btn-ghost .ic{ background:rgba(0,0,0,.06) }
  .btn .av{ width:24px; height:24px; border-radius:999px; background: var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color: var(--ink) }
  .btn .ic-soft{ background: rgba(0,0,0,.08) }
  .btn-icon-fill{ height:54px; padding:4px 4px 4px 24px; gap:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.2) }
  .btn-icon-fill .ic{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.24) }
  .btn-icon-fill .ic{ width:auto; height:auto; aspect-ratio:1; align-self:stretch; padding:0 }
  .btn-icon-fill .ic img{ width:58%; height:58%; object-fit:contain; display:block }
  .btn-sm{ height:42px; padding:0 16px; font-size:14px }

  /* Top nav */
  .nav-wrap{ position: sticky; top: 0; z-index: 60; padding: 12px var(--pad-x); pointer-events:none }
  .nav{
    pointer-events:auto;
    max-width: 980px; margin: 0 auto;
    display:flex; align-items:center; gap: 6px; padding: 8px 8px 8px 20px;
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(19,21,20,.06);
  }
  .nav .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; padding-right:14px; border-right:1px solid var(--line) }
  .nav .brand .mark{
    width:26px; height:26px; border-radius:8px; background: var(--ink); color: var(--accent);
    display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
  }
  .nav ul{ display:flex; gap:2px; list-style:none; margin:0; padding:0 8px; flex:1; flex-wrap:nowrap; overflow:hidden }
  .nav a.lnk{ display:inline-flex; padding: 8px 12px; border-radius:999px; font-size:14px; color: var(--ink-2); font-weight:500 }
  .nav a.lnk:hover{ background: rgba(0,0,0,.05) }
  .nav a.lnk.active{ background: var(--bg); color: var(--ink); font-weight:600 }
  .nav .nav-cta{ margin-left:auto }
  @media (max-width: 880px){
    .nav ul{ display:none }
    .nav .brand{ border-right:0 }
  }

  /* ───────────── HERO (centered + floating tiles) ───────────── */
  .hero{
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0;
    /* Soft white glow pooled in the center, behind the grid */
    background:
      radial-gradient(ellipse 70% 58% at 50% 46%, rgba(255,255,255,.95), transparent 72%);
  }
  /* Architectural grid behind the hero — concentrated in the center, fades at edges */
  .hero::before{
    content:'';
    position: absolute; inset: 0;
    z-index: 0; /* grid sits above the glow background, below content (z-index:2) */
    background-image:
      linear-gradient(to right, #ffffff 3px, transparent 3px),
      linear-gradient(to bottom, #ffffff 3px, transparent 3px);
    background-size: 68px 68px;
    background-position: center;
    opacity: 1;
    -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 47%, #000 0%, rgba(0,0,0,.55) 48%, transparent 78%);
    mask-image: radial-gradient(ellipse 62% 56% at 50% 47%, #000 0%, rgba(0,0,0,.55) 48%, transparent 78%);
    pointer-events: none;
  }
  .hero-stage{
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 24px 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
  .hero h1{
    margin-top: 0;
    position: relative;
    z-index: 2;
  }
  .hero .lead{
    margin: 24px auto 0;
    padding-top: 8px;
    max-width: 62ch;
    font-size: clamp(13px, 1vw, 14px);
  }
  .hero-cta-row{
    display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
    margin-top: 36px;
    position: relative; z-index: 2;
  }
  @media (max-width: 600px){
    .hero .lead{ font-size: 15px; line-height: 1.55 }
    .hero-cta-row{ flex-direction: column; align-self: stretch; margin-left: calc(var(--pad-x) - 24px); margin-right: calc(var(--pad-x) - 24px) }
    .hero-cta-row .btn{ width: 100%; justify-content: center }
    /* Drop the round logo icon on the hero CTA on mobile, and restore even padding. */
    .hero-cta-row .btn-icon-fill .ic{ display: none }
    .hero-cta-row .btn-icon-fill{ padding: 4px 24px }
    /* Pin the auto-scrolling logo strip just under the sticky header on mobile.
       Reset the base margin/padding so the text sits flush at the top — those
       were what created the big empty gap. */
    .hero .logos{
      position: absolute;
      top: 12px; left: 0; right: 0;
      margin: 0 auto;
      margin-top: 0;
      padding-top: 0;
      z-index: 3;
      overflow: visible;
    }
    /* Swap the auto-scrolling marquee for a row of animated tool icons */
    .hero .logos-track{ display: none }
    .hero .logos::before, .hero .logos::after{ display: none }
    .hero .hero-icons{
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 14px;
      padding: 10px 0;
    }
    .hero-icons .hicon{
      display: flex; align-items: center; justify-content: center;
      border-radius: 16px;
      background: rgba(255,255,255,.6);
      border: 2px solid #fff;
      box-shadow: 0 12px 32px rgba(0,0,0,.10);
      opacity: 0;
      scale: 0;
      animation: hicon-in .55s cubic-bezier(.34,1.56,.64,1) both,
                 hicon-sway 3.4s ease-in-out infinite;
    }
    .hero-icons .hicon img{
      width: 60%; height: 60%; object-fit: contain;
    }
    .hicon--sm{ width: 46px; height: 46px }
    .hicon--md{ width: 52px; height: 52px }
    .hicon--lg{ width: 58px; height: 58px }
    /* Arc composition: side icons sit higher, centre drops down */
    .hero-icons .hicon:nth-child(2){ margin-top: 28px }
    /* Staggered scale-in appearance (0.1s step) + out-of-sync sway tempo.
       Two values each: [hicon-in, hicon-sway]. */
    .hero-icons .hicon:nth-child(1){ animation-delay: .1s, 0s;    animation-duration: .55s, 3.2s }
    .hero-icons .hicon:nth-child(2){ animation-delay: .2s, -.7s;  animation-duration: .55s, 4.1s }
    .hero-icons .hicon:nth-child(3){ animation-delay: .3s, -1.4s; animation-duration: .55s, 3.6s }
    @media (prefers-reduced-motion: reduce){
      .hero-icons .hicon{ animation: none; opacity: 1; scale: 1 }
    }
    /* Hero fills exactly one screen; lift the text block toward the top
       instead of centering it, so it sits just under the logo strip. */
    .hero{ min-height: 100svh }
    .hero-stage{ padding-top: 132px; padding-bottom: 80px; justify-content: flex-start }
  }
  .hero .trust{
    display:flex; flex-wrap:wrap; align-items:center; gap:12px;
    justify-content:center;
    margin-top: 28px;
    color: var(--ink-3); font-size: 14px;
  }
  .hero .trust .avatars{ display:flex }
  .hero .trust .avatars span{
    width:30px; height:30px; border-radius:50%; border:2px solid var(--bg);
    display:inline-block; margin-left:-10px;
    background-size: cover; background-position: center;
  }
  .hero .trust .avatars span:first-child{ margin-left:0 }

  /* Floating tiles around the hero */
  .float{
    position: absolute;
    width: 108px; height: 108px;
    border-radius: 24px;
    background: rgba(255,255,255,.5);
    border: 3px solid #ffffff;
    box-shadow: 0 16px 48px rgba(0,0,0,.10);
    display:flex; align-items:center; justify-content:center;
    z-index: 1;
    will-change: transform;
  }
  .float svg{ width: 44%; height: 44% }
  .float img{ width: 72%; height: 72%; object-fit: contain }
  .float .lbl{
    position:absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    font-size: 11px; color: var(--ink-3); white-space: nowrap;
    font-weight: 500;
  }
  /* Positions */
  .float.f1{ top: 4%; left: 4% }
  .float.f2{ top: 0%; right: 6% }
  .float.f3{ bottom: 28%; left: -2%; width:88px; height:88px }
  .float.f4{ bottom: 14%; right: 0%; width: 120px; height: 120px }
  .float.f5{ top: 36%; right: -3%; width: 80px; height: 80px }
  .float.f6{ top: 40%; left: -4%; width: 80px; height: 80px }
  @media (max-width: 880px){
    .float.f1, .float.f2, .float.f3, .float.f4, .float.f5, .float.f6{ display:none }
    .h-display{ font-size: clamp(56px, 14vw, 80px); font-weight: 600 }
    .h-display .em{ font-weight: 600 }
  }

  /* Logo strip — auto-scrolling marquee */
  .logos{
    margin-top: 64px;
    padding-top: 40px;
    overflow: hidden;
    position: relative;
    color: var(--ink-mute);
    font-weight: 600;
    letter-spacing: -.01em;
    font-size: 18px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  .logos::before, .logos::after{
    content: '';
    position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
  }
  .logos::before{ left: 0; background: linear-gradient(to right, var(--bg), transparent) }
  .logos::after{ right: 0; background: linear-gradient(to left, var(--bg), transparent) }
  .logos-track{
    display: flex; gap: 48px; align-items: center;
    width: max-content;
    animation: logos-scroll 18s linear infinite;
  }
  .logos-track:hover{ animation-play-state: paused }
  @keyframes logos-scroll{
    from{ transform: translateX(0) }
    to{ transform: translateX(-50%) }
  }
  .logos .lg{ display:flex; align-items:center; gap:8px; opacity:.8; white-space: nowrap; flex-shrink: 0 }

  /* Mobile-only animated tool icons (hidden on desktop) */
  .hero-icons{ display: none }
  @keyframes hicon-in{
    from{ opacity: 0; scale: 0 }
    to{ opacity: 1; scale: 1 }
  }
  @keyframes hicon-sway{
    0%,100%{ translate: 0 0; rotate: -5deg }
    50%{ translate: 0 -7px; rotate: 5deg }
  }

  /* ───────────── Sections ───────────── */
  section{ padding: 56px 0 }
  #audience{ padding-top: 100px }
  #format{ padding-top: 140px }
  .section-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:20px; margin-bottom: 40px; flex-wrap:wrap;
  }
  .section-tag{
    display:inline-flex; gap:6px; align-items:center;
    padding:5px 10px; border-radius:999px; background: var(--surface); border:1px solid var(--line);
    font-size: 12px; font-weight:600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
    font-family: ui-monospace, 'Fira Code', monospace;
    opacity: 0.5;
  }
  .section-tag .n{ color: var(--ink-mute); font-variant-numeric: tabular-nums }
  .section-tag-plain{
    display:inline-flex; gap:8px; align-items:baseline;
    font-size: 12px; font-weight:600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
    font-family: ui-monospace, 'Fira Code', monospace;
    opacity: 0.5;
  }
  .section-tag-plain .n{ color: var(--ink-mute); font-variant-numeric: tabular-nums }

  /* ─── 01 Кому подойдёт — sticky title + stack ─── */
  .aud-split{
    display:grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: start;
  }
  @media (max-width: 880px){ .aud-split{ grid-template-columns: 1fr; gap: 16px } }
  .aud-side{
    position: sticky;
    top: 110px;
    height: calc(100vh - 150px);
    display:flex; flex-direction:column; gap: 18px;
    padding-right: 12px;
    padding-bottom: 48px;
  }
  @media (max-width: 880px){ .aud-side{ position: static; top: auto; height: auto } }
  .aud-side .lead{ max-width: 38ch }
  .aud-link{
    align-self:flex-start;
    margin-top: auto;
    color: var(--ink);
    font-size: 14px; font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-color: var(--ink);
    transition: opacity .2s ease;
  }
  .aud-link:hover{ opacity: .65 }
  @media (max-width: 880px){ .aud-link{ display: none } }
  .aud-side .counter{
    display:inline-flex; align-items:center; gap:10px;
    margin-top: 10px;
    font-size: 13px; color: var(--ink-3);
  }
  .aud-side .counter b{
    background: var(--ink); color: var(--accent);
    font-weight: 700; font-size: 12px;
    padding: 4px 10px; border-radius: 999px;
    letter-spacing: .04em;
  }
  .aud-stack{ display:flex; flex-direction:column; gap: 14px }
  .pain{
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 32px 34px 30px;
    display:flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    overflow: hidden;
    min-height: 280px;
    transition: transform .2s ease;
  }
  .pain:hover{ transform: translateY(-2px) }
  .pain .pain-top{
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  }
  .pain .glyph{
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    display:inline-flex; align-items:center; justify-content:center;
    color: var(--accent);
    flex: none;
  }
  .pain .glyph svg{ width: 48%; height: 48% }
  .pain .pain-arr{ display:none }
  .pain h3{
    font-size: clamp(26px, 2.2vw, 32px); font-weight: 600; letter-spacing:-.02em;
    line-height: 1.1; text-wrap: balance;
    margin-top: auto;
    margin-bottom: auto;
  }
  .pain .pain-divider{
    height:1px; background: rgba(255,255,255,.1); margin-top: 0; margin-bottom: 16px;
  }
  .pain p{
    color: rgba(255,255,255,.62);
    font-size: 15px; line-height: 1.55;
    margin-top: 0;
    text-wrap: pretty;
    max-width: 52ch;
  }
  .pain .pain-n{
    position:absolute; top: 36px; right: 34px;
    font-size: 13px; font-weight: 600; letter-spacing: .08em;
    color: rgba(255,255,255,.32);
    font-variant-numeric: tabular-nums;
  }

  .section-cta-mobile{ display: none }
  @media (max-width: 600px){ .section-cta-mobile{ display: flex; justify-content: center; margin-top: 32px } .section-cta-mobile .btn{ width: 100%; justify-content: center } }

  /* ─── 02 Примеры — TABS + PREVIEW ─── */
  .ex-card{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 1.2fr;
    gap: 12px;
    min-height: 480px;
  }
  .ex-tabs{
    display:flex; flex-direction:column; gap: 4px;
    padding: 12px;
  }
  .ex-tab{
    display:grid;
    grid-template-columns: 1fr 18px;
    gap: 14px;
    align-items: center;
    padding: 14px 14px;
    border-radius: 14px;
    background: transparent;
    cursor: var(--cur-hand), pointer;
    transition: background .15s ease;
    text-align: left;
    width: 100%;
  }
  .ex-tab:hover{ background: var(--bg) }
  .ex-tab.on{ background: var(--bg) }
  .ex-tab .ic{ display: none }
  .ex-tab .ttl{ font-size: 15.5px; font-weight: 500; color: var(--ink); letter-spacing:-.005em }
  .ex-tab .arr{ color: var(--ink-mute); transform: rotate(-45deg); transition: transform .2s ease, color .15s ease }
  .ex-tab.on .arr{ transform: rotate(0deg); color: var(--ink) }

  .ex-preview{
    background: var(--bg);
    border-radius: 22px;
    padding: 32px;
    position: relative;
    display:flex; flex-direction:column;
    overflow: hidden;
  }
  .ex-preview .label{
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-mute);
  }
  .ex-preview h3{
    margin-top: 14px;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 600; letter-spacing:-.02em; line-height:1.15;
    color: var(--ink);
    text-wrap: balance;
  }
  .ex-preview .solution{
    margin-top: 16px;
    font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty;
    max-width: 50ch;
  }
  .ex-preview .mock{
    margin-top: auto;
    padding-top: 28px;
  }
  .pv-pane{ display:none; flex-direction:column; height:100% }
  .pv-pane.on{ display:flex; animation: pv-fade .25s ease }
  @keyframes pv-fade{ from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform: translateY(0) } }

  /* Inline accordion panes (cloned into each tab) — mobile only */
  .pv-inline{ display: none !important }

  /* Mock variants used in preview */
  .mk-card{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(19,21,20,.05);
  }
  .mk-row{ display:flex; align-items:center; gap:10px; font-size: 13px }
  .mk-row + .mk-row{ margin-top: 10px }
  .mk-av{ width: 28px; height:28px; border-radius:999px; background: var(--accent); color: var(--ink); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px }
  .mk-tg{ background: var(--ink); color: #fff; border-radius: 14px; padding: 14px; max-width: 320px; box-shadow: 0 10px 30px rgba(19,21,20,.15) }
  .mk-tg .tg-h{ display:flex; align-items:center; gap:8px; color: var(--accent); font-size: 12px; font-weight:600 }
  .mk-tg .tg-b{ margin-top: 8px; font-size: 13.5px; color: #fff; line-height:1.45 }
  .mk-tg .tg-b b{ color: var(--accent); font-weight: 600 }
  .mk-bars{ display:flex; align-items:flex-end; gap: 8px; height: 96px }
  .mk-bars i{ flex:1; background: var(--line); border-radius: 6px 6px 0 0; transition: background .2s ease }
  .mk-bars i.hi{ background: var(--ink) }
  .mk-bars i.acc{ background: var(--accent) }

  .pv-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px }

  @media (max-width: 880px){
    .ex-card{ grid-template-columns: 1fr; min-height: auto; padding: 8px }
    .ex-tabs{ padding: 6px; gap: 2px }
    .ex-tab{ padding: 14px 16px }
    .ex-preview{ display: none }
    .pv-inline{
      display: none !important;
      background: var(--bg);
      border-radius: 18px;
      padding: 22px;
      margin: 4px 0 10px;
    }
    .pv-inline.on{ display: flex !important; flex-direction: column; animation: pv-fade .25s ease }
    .pv-inline .label{
      font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
    }
    .pv-inline h3{
      margin-top: 12px;
      font-size: 22px; font-weight: 600; letter-spacing:-.02em; line-height: 1.15; color: var(--ink); text-wrap: balance;
    }
    .pv-inline .solution{ margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty }
    .pv-inline .mock{ margin-top: 18px }
    .pv-inline .pv-grid{ grid-template-columns: 1fr }
    .pv-inline .mk-tg{ max-width: 100% }
  }

  /* ─── 03 Формат — horizontal timeline (desktop) ─── */
  .format-head{
    flex-direction: column; align-items: center; text-align: center;
    gap: 16px; margin-bottom: 64px;
  }
  .steps{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    padding-top: 52px;                 /* room for badges above the ruler */
  }
  .steps::before{                      /* ruler line + tick marks */
    content:''; position:absolute; left:0; right:0; top:52px; height:7px;
    border-top:1px solid var(--line);
    background-image: repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px 26px);
    background-repeat: repeat-x;
    pointer-events:none;
  }
  .step{
    position: relative;
    padding: 28px 28px 0 0;
  }
  .step + .step{ border-left: 1px solid var(--line); padding-left: 28px }
  .step-badge{
    position: absolute; top: 0; left: 0; transform: translateY(calc(-100% - 13px));
    display:inline-flex; align-items:center; gap:9px;
    padding: 6px 14px 6px 11px;
    background: var(--surface); border:1px solid var(--line); border-radius:999px;
    font-size: 14px; font-weight: 600; color: var(--ink-2);
  }
  .step + .step .step-badge{ left: 28px }
  .step-badge .step-dot{ width:8px; height:8px; border-radius:999px; background: var(--ink-mute) }
  .step-badge .step-num{ color: var(--ink-2); font-variant-numeric: tabular-nums }
  .step-body{ display:flex; flex-direction:column; gap: 14px; height: 100% }
  .step h4{ font-size: 23px; font-weight:600; letter-spacing:-.015em; line-height:1.15; text-wrap:balance }
  .step p{ color: var(--ink-3); font-size: 14px; line-height:1.5 }
  .step-panel{
    margin-top: auto;                  /* bottom-align panels across columns */
    height: 190px;                     /* fixed, equal across all columns (width varies, so no aspect-ratio) */
    background: transparent;
    border:1px solid var(--line); border-radius: var(--radius);
    display:flex; align-items:center; justify-content:center;
    color: var(--ink-3);
  }
  .step-panel svg{ width: 40px; height: 40px }

  /* reveal on appear — "Шаг" badge fully animates first, block follows after */
  .step-badge{
    opacity: 0; translate: 0 -12px;        /* independent of positioning transform */
    transition: opacity .35s ease, translate .45s cubic-bezier(.16,1,.3,1);
  }
  .step-body{
    opacity: 0; transform: translateY(20px);
    transition: opacity .55s cubic-bezier(.16,1,.3,1) .5s,
                transform .55s cubic-bezier(.16,1,.3,1) .5s;
  }
  .step.in .step-badge{ opacity: 1; translate: 0 0 }
  .step.in .step-body{ opacity: 1; transform: none }

  /* ─── 03 Формат — vertical timeline (mobile) ─── */
  @media (max-width: 860px){
    .steps{ display:block; padding-left: 4px; padding-top: 0 }
    .steps::before{
      content:''; position:absolute; left: 20px; right:auto; top: 20px; bottom: 20px;
      width:1px; height:auto; border-top:0; background: var(--line); background-image:none;
    }
    .step{
      border:0; padding:0;
      display:grid; grid-template-columns: 40px 1fr; gap: 16px;
      align-items: start;
    }
    .step + .step{ border:0; padding:0; margin-top: 18px }
    .step-badge{
      position: static;
      width:40px; height:40px; padding:0; gap:0;
      justify-content:center;
      background: var(--ink); border-color: transparent; color:#fff; z-index:1;
      transform: scale(.45); translate: 0;
      transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
    }
    .step.in .step-badge{ transform: scale(1) }
    .step-badge .step-dot, .step-badge .step-word{ display:none }
    .step-badge .step-num{ color:#fff; font-size: 16px }
    .step-body{
      min-width: 0;
      background: var(--surface); border:1px solid var(--line);
      border-radius: var(--radius); padding: 20px;
      transform: translateX(28px);
    }
    .step.in .step-body{ transform: none }
    .step-panel{ background: var(--bg); height: auto; aspect-ratio: 16 / 9 }
  }
  @media (max-width: 420px){
    .step-panel{ aspect-ratio: 16 / 7 }
    .step h4{ font-size: 20px }
  }
  @media (prefers-reduced-motion: reduce){
    .step-body{ opacity:1; transform:none; transition:none }
    .step-badge{ opacity:1; translate:none; transition:none }
  }
  @media (prefers-reduced-motion: reduce) and (max-width: 860px){
    .step-badge{ transform:none }
  }

  /* ─── 04 Команда ─── */
  .team{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px }
  @media (max-width: 780px){ .team{ grid-template-columns: 1fr } }
  .member{
    background: var(--surface); border-radius: var(--radius);
    border:1px solid var(--line);
    padding: 24px;
    display:grid; grid-template-columns: 140px 1fr; gap: 22px; align-items: start;
  }
  @media (max-width: 520px){
    .member{ grid-template-columns: 1fr; padding: 0; gap: 0 }
    .member > img{ width: 100% !important; height: 220px !important; border-radius: var(--radius) var(--radius) 0 0 !important; flex-shrink: unset !important }
    .member > div{ padding: 20px 20px 24px }
  }
  .member image-slot{ width:140px; height:140px; --is-bg: var(--bg); --is-fg: var(--ink-3); --is-border: var(--line) }
  .member h4{ font-size: 22px; font-weight:600; letter-spacing:-.015em }
  .member .role{ font-size: 13px; color: var(--ink-3); margin-top:6px; line-height:1.5 }
  .member p.bio{ margin-top: 14px; color: var(--ink-2); font-size: 15px; line-height:1.55; text-wrap: pretty }
  .member .skills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
  .member .skills span{
    font-size: 12px; padding: 4px 10px; border-radius: 999px;
    background: var(--bg); color: var(--ink-2); border:1px solid var(--line);
  }
  .member-actions{ display:flex; gap:8px; margin-top:18px; align-items:center; flex-wrap:wrap }
  .member-actions .btn-tg{
    padding: 10px 18px; border-radius: 999px;
    background: var(--ink); color: var(--bg);
    font-family: inherit; font-size: 13px; font-weight: 600;
    border: none; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: opacity .2s;
  }
  .member-actions .btn-tg:hover{ opacity: .8 }
  .member-actions .btn-icon{
    width: 40px; height: 40px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-3); text-decoration: none;
    transition: all .2s;
  }
  .member-actions .btn-icon:hover{ border-color: var(--ink-3); color: var(--ink) }
  @media (max-width: 520px){ .member-actions{ flex-wrap: wrap } .member-actions .btn-tg{ width: 100%; justify-content: center } }

  /* ─── 05 Кейсы — горизонтальный pinned-скролл ─── */
  #cases{ padding: 0 }
  .cases-scroll{
    --cs-count: 3;
    height: calc((var(--cs-count) - 1) * 100vh);
    position: relative;
  }
  .cs-stage{
    position: sticky; top: 0;
    height: 100vh; width: 100%;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .cs-top{
    position: relative;
    padding-top: 90px;
    z-index: 3;
  }
  .cs-top-grid{
    display: grid; grid-template-columns: 1fr auto;
    align-items: end; gap: 48px;
  }
  .cs-meta-right{
    text-align: right; max-width: 280px;
    font-size: 14px; line-height: 1.55; color: var(--ink-3);
    padding-bottom: 4px;
  }
  .cs-track-wrap{
    position: relative; flex: 1; min-height: 0; z-index: 2;
  }
  .cs-track{
    position: absolute; inset: 0;
    display: flex; align-items: center;
    padding: 24px max(var(--pad-x), calc((100% - var(--maxw)) / 2 + var(--pad-x))) 80px max(var(--pad-x), calc((100% - var(--maxw)) / 2 + var(--pad-x)));
    gap: 24px;
    will-change: transform;
  }
  .cs-card{
    flex: 0 0 clamp(360px, 40vw, 560px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 32px 28px;
    box-shadow: 0 24px 60px -30px rgba(19,21,20,.1);
    display: flex; flex-direction: column; gap: 18px;
    align-self: stretch; margin: 12px 0;
  }
  .cs-card-num{
    display: flex; align-items: center; gap: 10px;
  }
  .cs-card-tag{ font-size: 12px; font-weight: 500; color: var(--ink-3) }
  .cs-card h3{
    font-size: clamp(22px, 2vw, 30px); line-height: 1.12;
    font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
  }
  .cs-row{
    display: grid; grid-template-columns: auto 1fr;
    gap: 14px; padding: 16px 0;
    border-top: 1px solid var(--line); align-items: start;
  }
  .cs-row:last-of-type{ border-bottom: none }
  .cs-row p{ font-size: 14.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; padding-top: 2px }
  .cs-pill{
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; line-height: 1; white-space: nowrap;
  }
  .cs-pill.before{ background: #FBD9D4; color: var(--red-deep) }
  .cs-pill.after{ background: var(--accent-soft); color: #1F7B4B }
  .cs-card-foot{
    margin-top: auto; padding-top: 16px;
    display: flex; align-items: center;
  }
  .cs-avatars{ display: flex; align-items: center }
  .cs-avatar{
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--line);
  }
  .cs-avatar + .cs-avatar{ margin-left: -8px }
  .cs-avatar-icon{ display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--ink-2); flex-shrink:0; border:none; box-shadow:none }
  .cs-link{
    font-size: 13px; font-weight: 500; color: var(--ink);
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(19,21,20,.3);
    transition: text-decoration-color .15s, color .15s;
    white-space: nowrap;
  }
  .cs-link:hover{ color: var(--ink); text-decoration-color: var(--ink) }
  .cs-progress{
    position: absolute; bottom: 28px;
    left: max(var(--pad-x), calc((100% - var(--maxw)) / 2 + var(--pad-x)));
    right: max(var(--pad-x), calc((100% - var(--maxw)) / 2 + var(--pad-x)));
    display: flex; align-items: center; gap: 16px; z-index: 4;
  }
  .cs-counter{
    font-size: 13px; font-weight: 600; letter-spacing: .1em;
    color: var(--ink); font-variant-numeric: tabular-nums;
  }
  .cs-counter span{ color: var(--ink-mute) }
  .cs-bar{ flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden }
  .cs-bar-fill{ height: 100%; width: 0%; background: var(--ink); transition: width .1s linear }
  .cs-hint{ font-size: 12px; color: var(--ink-mute); font-weight: 500; display: flex; align-items: center; gap: 5px }

  /* ─── Dark case card ─── */
  .cs-card.dark{
    background: var(--ink);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 24px 60px -30px rgba(0,0,0,.5);
  }
  .cs-card.dark h3{ color: #fff }
  .cs-card.dark .cs-card-tag{ color: rgba(255,255,255,.62) }
  .cs-card.dark .cs-row{ border-top-color: rgba(255,255,255,.1) }
  .cs-card.dark .cs-row p{ color: rgba(255,255,255,.72) }
  .cs-card.dark .cs-pill.before{ background: #4A211C; color: #F0A89E }
  .cs-card.dark .cs-pill.after{ background: #1E3A22; color: #9DE87A }
  .cs-card.dark .cs-avatar-icon{ background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.12); box-shadow: none }
  .cs-card.dark .cs-link{ color: #fff; text-decoration-color: rgba(255,255,255,.4) }
  .cs-card.dark .cs-link:hover{ color: #fff; text-decoration-color: #fff }

  @media (max-width: 880px){
    .cases-scroll{ height: auto }
    .cs-stage{ position: relative; height: auto; overflow: visible; display: block }
    .cs-top{ padding-top: 60px }
    .cs-top-grid{ grid-template-columns: 1fr; gap: 12px }
    .cs-meta-right{ text-align: left; max-width: 100% }
    .cs-track-wrap{
      position: static; height: auto; flex: none; min-width: 0;
      overflow: visible;
    }
    .cs-track{
      position: static; inset: auto;
      display: flex; flex-direction: column;
      width: 100%; min-width: 0;
      padding: 24px var(--pad-x) 40px;
      gap: 16px; will-change: auto;
      align-items: stretch;
    }
    .cs-track::after{ display: none }
    .cs-track > div[aria-hidden]{ display: none }
    .cs-card{ flex: none; width: 100%; margin: 0; padding: 28px 24px 24px }
    .cs-card.dark{ order: -1 }
    .cs-progress{ display: none }
  }

  /* ─── Pricing (kept) ─── */
  .pricing{
    background: var(--ink); color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 56px);
    padding-top: calc(clamp(28px, 4vw, 56px) + 16px);
    position: relative;
    overflow: hidden;
  }
  .pricing::before{
    content:""; position:absolute; right:-15%; top:-30%; width: 70%; aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(169,240,110,.18), transparent 70%);
    pointer-events:none;
  }
  .pricing h2{ color:#fff; margin: 0 }
  .pricing h2 .em{ color: var(--accent); font-weight: 600 }
  .pricing .pill-fire{
    display:inline-flex; align-items:center; gap:8px;
    padding: 8px 14px; border-radius:999px;
    background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    font-size:13px; color:#fff; align-self: flex-start;
  }
  .pr-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: stretch }
  @media (max-width: 900px){ .pr-grid{ grid-template-columns: 1fr; gap: 28px } }
  @media (max-width: 600px){
    #formatCta{ display: block }
    #formatCta .btn{ width: 100%; justify-content: center }
    .pricing{ padding: 48px 16px 32px; border-radius: var(--radius-lg) }
    .pr-intro{ gap: 14px; max-width: 100% }
    .pr-intro .lead-w{ font-size: 13.5px }
    .pricing .pr-intro .who .who-name{ white-space: normal }
    .who-name .who-br{ display: inline }
    .pr-card{ padding: 28px 22px 24px; gap: 20px; border-radius: 20px }
    .pr-card h3{ font-size: 22px; line-height: 1.2 }
    .pr-card ul{ gap: 0; border-top: 1px solid var(--line) }
    .pr-card ul li{
      font-size: 15px; gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      align-items: center;
    }
    .pr-card ul li .chk{
      width: 22px; height: 22px; min-width: 22px; min-height: 22px;
      font-size: 11px; border-radius: 50%;
    }
    .pr-card .price{ margin-top: 0 }
    .pr-card .price b{ font-size: 40px }
    .pr-card .meta-row{ gap: 6px }
    .pr-card .meta-row .chip{ font-size: 12px }
    .pr-card .btn{ width: 100%; justify-content: center; margin-top: 4px }
  }
  .pr-intro{ display:flex; flex-direction:column; gap: 28px; max-width: 44ch; justify-content: flex-start }
  .pr-intro .lead-w{ color: rgba(255,255,255,.7); font-size: 13.5px; line-height: 1.55; max-width: 32ch }
  .pr-intro .who{ display:flex; align-items:center; gap:12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 6px }
  .pr-intro .who .av{ width:38px; height:38px; border-radius:999px; background: var(--accent); color: var(--ink); display:inline-flex; align-items:center; justify-content:center; font-weight:700 }
  .pr-intro .who .who-avatars{ display:flex; align-items:center; flex-shrink:0 }
  .pr-intro .who .av-photo{ width:36px; height:36px; border-radius:999px; object-fit:cover; border:2px solid rgba(255,255,255,.3) }
  .pr-intro .who .av-photo + .av-photo{ margin-left:-10px }
  .pr-intro .who .who-name{ color:#fff; font-weight:600; font-size:12px; white-space:nowrap }
  .who-name .who-br{ display:none }
  .who-link{ color:#fff; text-decoration:underline; text-underline-offset:2px; text-decoration-color:#fff }
  .who-link:hover{ opacity:.8 }
  .pr-intro .who .who-role{ color: rgba(255,255,255,.55); font-size:11px }
  .pr-card{
    background: #FFFFFF; color: var(--ink);
    border-radius: 22px; padding: 28px;
    display:flex; flex-direction:column; gap: 18px;
  }
  .pr-card h3{ font-size: 28px; font-weight:600; letter-spacing:-.02em; line-height:1.1; text-wrap:balance }
  .pr-card .desc{ color: var(--ink-3); font-size: 15px; line-height:1.5 }
  .pr-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
  .pr-card ul li{ display:flex; align-items:flex-start; gap:12px; font-size: 15px; font-weight: 600; line-height: 1.5 }
  .pr-card ul li .chk{
    width:24px; height:24px; border-radius:999px;
    background: var(--ink-2); border: 1px solid var(--ink-2); color: #fff;
    display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
    flex-shrink: 0; margin-top: 1px;
  }
  .pr-card .price{ display:flex; align-items:baseline; gap:10px; margin-top: 6px }
  .pr-card .price b{ font-size: 40px; font-weight:700; letter-spacing:-.02em }
  .pr-card .price .per{ color: var(--ink-3); font-size: 14px }
  .pr-card .meta-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; color: var(--ink-3); font-size: 13px }
  .pr-card .meta-row .chip{ background: var(--bg); padding:5px 10px; border-radius:999px }

  .pr-side{
    border-radius: 22px;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    padding: 28px;
    display:flex; flex-direction:column; gap: 16px;
    color: rgba(255,255,255,.85);
  }
  .pr-side h4{ font-size: 22px; font-weight:600; letter-spacing:-.015em; color:#fff }
  .pr-side .stat-row{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 6px }
  .pr-side .stat{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px }
  .pr-side .stat b{ display:block; font-size: 26px; font-weight:700; letter-spacing:-.02em; color:#fff }
  .pr-side .stat small{ display:block; font-size:12px; color: rgba(255,255,255,.55); margin-top:4px }
  .pr-side .who{ display:flex; align-items:center; gap:10px; margin-top: 8px }
  .pr-side .who .av{ width:34px; height:34px; border-radius:999px; background: var(--accent); color: var(--ink); display:inline-flex; align-items:center; justify-content:center; font-weight:700 }

  /* FAQ */
  .faq-card{
    background: var(--surface); border-radius: var(--radius-lg);
    border:1px solid var(--line);
    padding: 8px 24px;
  }
  details.q{ border-bottom: 1px solid var(--line) }
  details.q:last-of-type{ border-bottom: 0 }
  details.q summary{
    list-style: none; cursor: var(--cur-hand), pointer;
    display:flex; align-items:center; justify-content:space-between; gap: 24px;
    padding: 22px 0;
    font-size: 18px; font-weight:500; letter-spacing:-.01em;
    color: var(--ink);
  }
  details.q summary::-webkit-details-marker{ display:none }
  details.q .plus{
    width:34px; height:34px; flex-shrink:0;
    border-radius:999px;
    border:1px solid var(--line);
    display:inline-flex; align-items:center; justify-content:center;
    color: var(--ink-2); font-size:18px;
    transition: transform .25s ease, background .15s ease;
  }
  details.q[open] .plus{ transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink) }
  details.q .ans{ padding: 0 60px 22px 0; color: var(--ink-3); font-size: 16px; line-height:1.55; text-wrap: pretty; max-width: 72ch }

  /* Final CTA */
  .final{ display:block }
  .final-card{
    background: var(--ink); color:#fff;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius-lg);
    padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
    position: relative; overflow: hidden;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap: 18px;
  }
  .final-card::before{
    content:""; position:absolute; inset:auto auto -40% 50%; transform: translateX(-50%);
    width: 80%; aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(169,240,110,.22), transparent 70%);
    pointer-events:none;
  }
  .final-card > *{ position: relative }
  .final-card .live{
    display:inline-flex; align-items:center; gap: 10px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    font-size: 13px; color: rgba(255,255,255,.85);
    white-space: nowrap; width: max-content; flex: 0 0 auto;
  }
  .final-card .live .pulse{
    width:8px; height:8px; border-radius:50%; background: var(--accent);
    box-shadow: 0 0 0 0 rgba(169,240,110,.6);
    animation: livePulse 2s ease-out infinite;
  }
  .final-card .live .sep{ width:1px; height:12px; background: rgba(255,255,255,.18) }
  @keyframes livePulse{
    0%{ box-shadow: 0 0 0 0 rgba(169,240,110,.55) }
    70%{ box-shadow: 0 0 0 10px rgba(169,240,110,0) }
    100%{ box-shadow: 0 0 0 0 rgba(169,240,110,0) }
  }
  .final-card h2{ color:#fff; max-width: 22ch; margin: 0 }
  .final-card h2 .em{ color: var(--accent); font-weight:600 }
  .final-card p{ color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.55; max-width: 52ch; margin: 0 }
  .final-card .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin-top: 14px }
  @media (max-width: 600px){
    .final-card{ padding: 36px 20px; gap: 14px }
    .final-card h2{ font-size: clamp(22px, 6.5vw, 30px) }
    .final-card p{ font-size: 13px }
    .final-card .row{ flex-direction: column; width: 100%; gap: 10px }
    .final-card .row .btn{ width: 100%; justify-content: center }
    .final-card .row .meta{ padding: 0 }
  }
  .final-card .row .btn-ghost{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.18) }
  .final-card .row .btn-ghost:hover{ background: rgba(255,255,255,.06) }
  .final-card .meta{ font-size:13px; color: rgba(255,255,255,.5); padding: 0 4px; background: transparent }
  .final-card .signers{
    display:flex; align-items:center; gap: 10px;
    margin-top: 18px; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08); width: 100%; max-width: 420px;
    justify-content: center;
  }
  .final-card .signers .stack{ display:inline-flex }
  .final-card .signers .stack .av{
    width: 34px; height:34px; border-radius:999px; background: var(--accent); color: var(--ink);
    display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size: 14px;
    border: 2px solid var(--ink);
  }
  .final-card .signers .stack .av + .av{ margin-left: -10px; background:#E6EAEC }
  .final-card .signers .stack .av-photo{
    width: 34px; height: 34px; border-radius: 999px; object-fit: cover;
    border: 2px solid var(--ink); display: block; flex-shrink: 0;
  }
  .final-card .signers .stack .av-photo + .av-photo{ margin-left: -10px }
  .final-card .signers .tx{ font-size: 13px; color: rgba(255,255,255,.7); text-align:left }
  .final-card .signers .tx b{ color:#fff; font-weight: 600 }
  .final-art{
    background: var(--ink); color:#fff;
    border-radius: var(--radius-lg);
    padding: 28px;
    min-height: 320px;
    position:relative;
    overflow: hidden;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .final-art::before{
    content:""; position:absolute; inset: -30% -30% auto auto; width: 80%; aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(169,240,110,.22), transparent 70%);
  }
  .final-art .clock{
    position:relative;
    width: 140px; height:140px; border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    display:flex; align-items:center; justify-content:center;
    font-family:'Onest', sans-serif; font-weight: 600; font-size: 44px; letter-spacing:-.04em;
  }
  .final-art .clock::after{
    content:""; position:absolute; inset:14px; border-radius:50%; border: 1px dashed rgba(255,255,255,.12);
    animation: spin 40s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg) } }
  .final-art .lbl{ font-size:13px; color: rgba(255,255,255,.6); margin-top: 12px }
  .final-art .small-card{
    background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    border-radius:14px; padding: 12px 14px; display:flex; align-items:center; gap:10px;
    position: relative;
  }
  .final-art .small-card .av{ width: 30px; height:30px; border-radius:999px; background: var(--accent); color: var(--ink); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px }
  .final-art .small-card .tx{ font-size: 13px; color: #fff }
  .final-art .small-card .tx small{ display:block; color: rgba(255,255,255,.55); font-size:11px }
  .hv-chip{ padding: 6px 10px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size: 12px; color: #E6EAEC; display:inline-flex; align-items:center; gap:6px }
  .hv-chip.accent{ background: var(--accent); color: var(--ink); border-color: transparent }

  /* Footer */
  footer{
    padding: 60px 0 40px;
    color: var(--ink-3);
    font-size: 14px;
  }
  footer .ft-top{ display:flex; flex-wrap:wrap; gap: 24px; justify-content:space-between; align-items: flex-start; padding-bottom: 32px; border-bottom: 1px solid var(--line) }
  footer .brand{ display:flex; align-items:center; gap: 10px; color: var(--ink); font-weight:700; letter-spacing:-.02em }
  footer .brand .mark{
    width:30px; height:30px; border-radius:9px; background: var(--ink); color: var(--accent);
    display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
  }
  footer .ft-cols{ display:flex; gap: 56px; flex-wrap:wrap }
  footer .ft-cols h6{ font-size: 12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--ink); margin: 0 0 12px }
  footer .ft-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 8px }
  footer .ft-bottom{ display:flex; justify-content:space-between; padding-top: 24px; flex-wrap:wrap; gap: 12px }

  /* Parallax marquee divider */
  .marquee{
    padding: 28px 0;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .marquee-track{
    display:flex; gap: 36px; align-items:center;
    white-space: nowrap;
    font-size: clamp(28px, 4vw, 56px); font-weight: 600;
    letter-spacing: -.025em;
    color: var(--ink-mute);
    will-change: transform;
  }
  .marquee-track .em{ color: var(--ink); font-weight: 700 }
  .marquee-sep{
    display: block; flex-shrink: 0;
    width: clamp(24px, 3vw, 44px);
    height: auto;
  }

  /* ─── Animations ────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference){
    /* Cards / structural blocks — scale-in from bottom 0.7 */
    .reveal{
      opacity: 0;
      transform: translateY(36px) scale(.7);
      transition:
        opacity .7s cubic-bezier(.16,.84,.32,1),
        transform .8s cubic-bezier(.16,.84,.32,1);
      transition-delay: calc(var(--i, 0) * .1s);
      transform-origin: 50% 100%;
      will-change: opacity, transform;
    }
    .reveal.in{ opacity: 1; transform: translateY(0) scale(1) }

    /* .step has its own bespoke reveal (badge bounce + body slide, above).
       Neutralise the generic card scale-in so the step — and its checkmark —
       isn't animated by two systems at once. */
    .step.reveal{
      opacity: 1;
      transform: none;
      transition: none;
    }

    .pain.reveal{
      opacity: 1;
      transform: translateY(16px) scale(.9);
      transition: transform .42s cubic-bezier(.16,.84,.32,1);
      transition-delay: calc(var(--i, 0) * .05s);
    }
    .pain.reveal.in{ opacity: 1; transform: translateY(0) scale(1) }

    /* Cases — gentler than the generic scale(.7) card reveal so it reads
       cleanly both on desktop (cards slide in horizontally) and on mobile
       (cards stack vertically). Each card lands, then its inner rows cascade. */
    .cs-card.reveal{
      opacity: 0;
      transform: translateY(28px) scale(.96);
      transition:
        opacity .65s cubic-bezier(.16,.84,.32,1),
        transform .75s cubic-bezier(.16,.84,.32,1);
      transition-delay: calc(var(--i, 0) * .12s);
      transform-origin: 50% 100%;
      will-change: opacity, transform;
    }
    .cs-card.reveal.in{ opacity: 1; transform: translateY(0) scale(1) }

    .cs-card.reveal > *{
      opacity: 0;
      transform: translateY(12px);
      transition:
        opacity .5s ease,
        transform .55s cubic-bezier(.16,.84,.32,1);
    }
    .cs-card.reveal.in > *{ opacity: 1; transform: translateY(0) }
    .cs-card.reveal.in > *:nth-child(1){ transition-delay: calc(var(--i,0) * .12s + .08s) }
    .cs-card.reveal.in > *:nth-child(2){ transition-delay: calc(var(--i,0) * .12s + .16s) }
    .cs-card.reveal.in > *:nth-child(3){ transition-delay: calc(var(--i,0) * .12s + .24s) }
    .cs-card.reveal.in > *:nth-child(4){ transition-delay: calc(var(--i,0) * .12s + .32s) }

    /* Headings / text blocks — blur-in, no scale */
    .reveal-text{
      opacity: 0;
      filter: blur(12px);
      transform: translateY(6px);
      transition:
        opacity .5s ease,
        filter .55s ease,
        transform .55s cubic-bezier(.16,.84,.32,1);
      transition-delay: calc(var(--i, 0) * .08s);
      will-change: opacity, filter, transform;
    }
    .reveal-text.in{ opacity: 1; filter: blur(0); transform: translateY(0) }

    /* Hero entrance — sequenced scale-in from bottom */
    .hero .eyebrow,
    .hero .h-display,
    .hero-stage > .lead,
    .hero .hero-cta-row,
    .hero .trust,
    .hero .logos{
      opacity: 0;
      transform: translateY(36px) scale(.7);
      transform-origin: 50% 100%;
      animation: heroScaleIn .85s cubic-bezier(.16,.84,.32,1) forwards;
    }
    .hero .eyebrow      { animation-delay: .05s }
    .hero .h-display    { animation-delay: .25s }
    .hero-stage > .lead { animation-delay: .50s }
    .hero .hero-cta-row { animation-delay: .75s }
    .hero .trust        { animation-delay: 1.00s }
    .hero .logos        { animation-delay: 1.20s }
    @keyframes heroScaleIn{ to{ opacity: 1; transform: translateY(0) scale(1) } }
    /* Hero tag drifts with the floating icons — transform owned by the parallax tick */
    .hero .hero-tag{
      opacity: 0;
      animation: floatFade .8s ease .15s forwards;
    }

    /* Final CTA — sequenced scale-in for each child */
    .final-card > * {
      opacity: 0;
      transform: translateY(36px) scale(.7);
      transform-origin: 50% 100%;
      transition:
        opacity .7s cubic-bezier(.16,.84,.32,1),
        transform .8s cubic-bezier(.16,.84,.32,1);
    }
    .final-card.in > *:nth-child(1){ transition-delay: 0s }
    .final-card.in > *:nth-child(2){ transition-delay: .1s }
    .final-card.in > *:nth-child(3){ transition-delay: .2s }
    .final-card.in > *:nth-child(4){ transition-delay: .3s }
    .final-card.in > *{ opacity: 1; transform: translateY(0) scale(1) }

    /* Pricing CTA — blocks fade in; inner text & elements scale-in from bottom separately */
    .pricing.reveal,
    .pr-card.reveal{
      transform: none;
      transition: opacity .7s cubic-bezier(.16,.84,.32,1);
    }
    .pricing.reveal.in,
    .pr-card.reveal.in{ transform: none }

    .pricing .pr-intro > *,
    .pr-card > *{
      opacity: 0;
      transform: translateY(28px) scale(.82);
      transform-origin: 50% 100%;
      transition:
        opacity .65s cubic-bezier(.16,.84,.32,1),
        transform .75s cubic-bezier(.16,.84,.32,1);
    }
    .pricing.in .pr-intro > *,
    .pr-card.in > *{ opacity: 1; transform: translateY(0) scale(1) }

    .pricing.in .pr-intro > *:nth-child(1){ transition-delay: .10s }
    .pricing.in .pr-intro > *:nth-child(2){ transition-delay: .20s }
    .pricing.in .pr-intro > *:nth-child(3){ transition-delay: .30s }
    .pricing.in .pr-intro > *:nth-child(4){ transition-delay: .40s }

    .pr-card.in > *:nth-child(1){ transition-delay: .12s }
    .pr-card.in > *:nth-child(2){ transition-delay: .20s }
    .pr-card.in > *:nth-child(3){ transition-delay: .28s }
    .pr-card.in > *:nth-child(4){ transition-delay: .36s }
    .pr-card.in > *:nth-child(5){ transition-delay: .44s }
    .pr-card.in > *:nth-child(6){ transition-delay: .52s }

    /* FAQ — panel eases in, then each question cascades in */
    .faq-card.reveal{
      transform: translateY(40px) scale(.96);
      transition:
        opacity .6s cubic-bezier(.16,.84,.32,1),
        transform .7s cubic-bezier(.16,.84,.32,1);
    }
    .faq-card.reveal.in{ transform: translateY(0) scale(1) }
    details.q.reveal{
      opacity: 0;
      transform: translateY(18px) scale(.98);
      transform-origin: 50% 100%;
      transition:
        opacity .5s cubic-bezier(.16,.84,.32,1),
        transform .55s cubic-bezier(.16,.84,.32,1);
    }
    details.q.reveal.in{ opacity: 1; transform: translateY(0) scale(1) }

    /* Footer — blocks appear top-to-bottom, one after another (0.1s apart) */
    footer .ft-top > div:nth-child(1),
    footer .ft-cols > div,
    footer .ft-bottom{
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity .6s cubic-bezier(.16,.84,.32,1),
        transform .7s cubic-bezier(.16,.84,.32,1);
    }
    footer.in .ft-top > div:nth-child(1){ transition-delay: .10s }
    footer.in .ft-cols > div:nth-child(1){ transition-delay: .20s }
    footer.in .ft-cols > div:nth-child(2){ transition-delay: .30s }
    footer.in .ft-bottom{ transition-delay: .40s }
    footer.in .ft-top > div:nth-child(1),
    footer.in .ft-cols > div,
    footer.in .ft-bottom{ opacity: 1; transform: none }

    /* Floats fade in — transforms owned by parallax tick (handles fly-in) */
    .hero .float{
      opacity: 0;
      animation: floatFade .8s ease .25s forwards;
    }
    @keyframes floatFade{ to{ opacity: 1 } }
  }

  /* ─── Pricing CTA — desktop-only entrance ───
     Whole block scales in first, then everything inside cascades in by 0.1s.
     Animation everywhere: scale-in from bottom — translateY(36px) scale(.8).
     Mobile keeps the original behavior (rules above) untouched. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px){
    .pricing.reveal,
    .pr-card.reveal,
    .pricing .pr-intro > *,
    .pr-card > *{
      opacity: 0;
      transform: translateY(36px) scale(.8);
      transform-origin: 50% 100%;
      transition:
        opacity .55s cubic-bezier(.16,.84,.32,1),
        transform .6s cubic-bezier(.16,.84,.32,1);
    }
    .pricing.reveal.in,
    .pr-card.reveal.in,
    .pricing.in .pr-intro > *,
    .pr-card.in > *{ opacity: 1; transform: translateY(0) scale(1) }

    /* Block first (0s), then the contents cascade in by 0.1s */
    .pricing.reveal{ transition-delay: 0s }

    .pr-card.reveal{ transition-delay: .10s }
    .pricing.in .pr-intro > *:nth-child(1){ transition-delay: .10s }
    .pricing.in .pr-intro > *:nth-child(2){ transition-delay: .20s }
    .pricing.in .pr-intro > *:nth-child(3){ transition-delay: .30s }
    .pricing.in .pr-intro > *:nth-child(4){ transition-delay: .40s }

    .pr-card.in > *:nth-child(1){ transition-delay: .20s }
    .pr-card.in > *:nth-child(2){ transition-delay: .30s }
    .pr-card.in > *:nth-child(3){ transition-delay: .40s }
    .pr-card.in > *:nth-child(4){ transition-delay: .50s }
    .pr-card.in > *:nth-child(5){ transition-delay: .60s }
    .pr-card.in > *:nth-child(6){ transition-delay: .70s }
  }

  /* ─── Social proof strip ─── */
  .proof-strip{ padding-bottom: 48px }
  .proof-row{
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
  }
  .proof-item{
    display: flex; flex-direction: column; gap: 5px;
    padding: 22px 28px;
    border-right: 1px solid var(--line);
  }
  .proof-item:last-child{ border-right: none }
  .proof-num{
    font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.15;
  }
  .proof-atag{
    font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.1;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(19,21,20,.2);
    transition: text-decoration-color .15s;
  }
  .proof-atag:hover{ text-decoration-color: var(--ink) }
  .proof-lbl{ font-size: 13px; color: var(--ink-3); line-height: 1.4 }
  @media (max-width: 640px){
    .proof-row{ grid-template-columns: 1fr }
    .proof-item{ padding: 20px 24px; border-right: none; border-bottom: 1px solid var(--line) }
    .proof-item:last-child{ border-bottom: none }
    .proof-num{ font-size: 20px }
    .proof-atag{ font-size: 20px }
    .proof-lbl{ font-size: 14px }
  }

  /* ─── Pricing guarantee note ─── */
  .pr-guarantee{
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 16px; border-radius: 12px;
    background: rgba(34,197,94,0.16); border: 1px solid rgba(34,197,94,0.24);
    font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.45;
  }
  .pr-guarantee svg{ flex-shrink: 0; color: rgba(22,163,74,1) }

  /* ─── Project bridge in pricing ─── */
  .pr-bridge{
    margin-top: 4px; padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.55;
  }
  .pr-bridge strong{ color: rgba(255,255,255,.85); font-weight: 600 }