.variant--a-minimalizm { --preview-bg:#16181d; --preview-card:#f3f4f6; --preview-accent:#2d67f7; }
.variant--b-temnyi { --preview-bg:#03141b; --preview-card:#0a2a35; --preview-accent:#e6b84a; }
.variant--b-svetlyi { --preview-bg:#f5fafb; --preview-card:#e8f2f4; --preview-accent:#2bd0e5; }
.variant--c-atelier { --preview-bg:#f5f0e8; --preview-card:#633338; --preview-accent:#b99062; }
.variant--d-puls { --preview-bg:#151d49; --preview-card:#3955e8; --preview-accent:#d8f26b; }
      * { box-sizing: border-box; }
      body { margin: 0; padding: 0; background: #f3f3f0; color: #191d28; font: 16px/1.5 system-ui, sans-serif; }
      a { color: inherit; }
      main { max-width: 1320px; margin: 0 auto; padding: 54px 24px 96px; }
      .intro { max-width: 820px; margin-bottom: 40px; }
      .eyebrow { margin: 0 0 14px; color: #556078; font-size: 12px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
      h1 { margin: 0; font-size: clamp(38px, 5vw, 70px); line-height: 1.02; letter-spacing: -.055em; }
      .intro > p:last-child { max-width: 64ch; margin: 20px 0 0; color: #566071; font-size: 17px; }
      .variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
      .variant { overflow: hidden; border: 1px solid #dde0e7; border-radius: 18px; background: #fff; box-shadow: 0 8px 30px rgb(30 37 64 / .035); }
      .variant__preview { position: relative; height: 185px; overflow: hidden; background: var(--preview-bg); }
      .variant__preview-mark { position: absolute; top: 22px; left: 24px; z-index: 2; color: var(--preview-accent); font-size: 17px; font-weight: 850; letter-spacing: -.06em; }
      .variant__preview-panel { position: absolute; left: 8%; bottom: -24px; display: flex; flex-direction: column; gap: 9px; width: 57%; height: 138px; padding: 24px; border-radius: 13px 13px 0 0; background: var(--preview-card); transform: rotate(-4deg); }
      .variant__preview-panel i { display: block; width: 90%; height: 10px; border-radius: 5px; background: var(--preview-accent); opacity: .7; }
      .variant__preview-panel i:nth-child(2) { width: 70%; opacity: .42; }
      .variant__preview-panel i:nth-child(3) { width: 45%; height: 22px; margin-top: 12px; opacity: 1; }
      .variant__preview-circle { position: absolute; right: -4%; bottom: -30%; width: 58%; aspect-ratio: 1; border: 24px solid var(--preview-accent); border-radius: 50%; opacity: .85; }
      .variant__body { padding: 25px 26px 27px; }
      .variant__number { color: #667184; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
      h2 { margin: 8px 0; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
      .variant p { min-height: 48px; margin: 0; color: #586274; font-size: 14px; }
      .variant__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
      .variant__links a { font-size: 14px; font-weight: 700; text-decoration: none; }
      .variant__main { display: inline-flex; justify-content: space-between; align-items: center; gap: 14px; min-width: 132px; min-height: 44px; padding: 10px 15px; border-radius: 8px; background: #1d2854; color: #fff; }
      .variant__main:hover { background: #354798; }
      .variant__secondary { padding: 8px 0; color: #243b91; text-underline-offset: 4px; }
      .variant__secondary:hover { text-decoration: underline; }
      a:focus-visible { outline: 3px solid #3955e8; outline-offset: 3px; }
      @media (max-width: 520px) { main { padding: 36px 16px 60px; } .variant__preview { height: 160px; } }