/* CSS Document */

    :root {
      --bg: #fcfcfc;
      --bg2: #fbfbfb;
      --ink: #111a39;
      --muted: #68728a;
      --line: #dde2ea;
      --line-soft: #e8ebf0;
      --red: #ff1f42;
      --blue: #1d55cc;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }
    .page {
      width: 100%;
      min-height: 100vh;
      background-color: var(--bg);
      background-image: radial-gradient(circle at 1px 1px, rgba(17, 26, 57, 0.075) .8px, transparent .85px);
      background-size: 24px 24px;
      overflow: hidden;
      position: relative;
    }
    .page::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg,
        rgba(252,252,252,.96) 0%,
        rgba(252,252,252,.92) 18%,
        rgba(252,252,252,.82) 38%,
        rgba(252,252,252,.88) 63%,
        rgba(252,252,252,.97) 100%);
    }
    .wrap {
      position: relative;
      z-index: 1;
      max-width: 1448px;
      margin: 0 auto;
      padding: 40px 56px 42px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 26px;
      margin-bottom: 78px;
      position: relative;
      z-index: 3;
    }
    .brand-logo {
      width: 118px;
      height: auto;
      display: block;
      flex: 0 0 auto;
    }
    .brand-divider {
      width: 1px;
      height: 52px;
      background: #d8dde5;
      flex: 0 0 auto;
    }
    .brand-name {
      margin: 0;
      font-size: 34px;
      line-height: 1;
      font-weight: 400;
      letter-spacing: .05em;
      color: var(--ink);
    }

    .hero {
      position: relative;
      min-height: 520px;
      padding-bottom: 24px;
    }
    .hero-copy {
      max-width: 680px;
      position: relative;
      z-index: 2;
    }
    .hero-title {
      margin: 0 0 36px;
      font-size: 92px;
      line-height: .98;
      font-weight: 500;
      letter-spacing: -.055em;
      color: var(--ink);
    }
    .dot {
      display: inline-block;
      width: .14em;
      height: .14em;
      border-radius: 50%;
      vertical-align: bottom;
      margin: 0 .12em .15em .12em
    }
    .dot.red { background: var(--red); }
    .dot.blue { background: var(--blue); }

    .hero-lead {
      margin: 0;
      max-width: 650px;
      font-size: 18px;
      line-height: 1.75;
      font-weight: 300;
      letter-spacing: -.015em;
      color: var(--muted);
    }
    .hero-graphic {
      position: absolute;
      right: 40px;
      top: 18px;
      width: 560px;
      max-width: 44vw;
      opacity: .98;
      pointer-events: none;
      z-index: 1;
    }

    .meta-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px 22px;
      margin: 62px 0 0;
      color: #727c91;
      font-size: 17px;
      line-height: 1.2;
      font-weight: 300;
    }
    .meta-item {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
    }
    .meta-item::before {
      content: "";
      width: 28px;
      height: 11px;
      flex: 0 0 auto;
      background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='11' viewBox='0 0 28 11'%3E%3Cpath d='M2 9L8 1' stroke='%23ff1f42' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M12 9L18 1' stroke='%231d55cc' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    .meta-sep {
      color: var(--red);
      font-weight: 400;
      font-size: 18px;
      line-height: 1;
    }

    .divider {
      position: relative;
      margin: 16px -56px 62px;
      border-top: 1px solid var(--line);
    }
    .divider::after {
      content: "";
      position: absolute;
      left: 50%;
      top: -2px;
      transform: translateX(-50%);
      width: 168px;
      height: 3px;
      background: linear-gradient(to right,
        transparent 0 6px,
        var(--red) 6px 76px,
        transparent 76px 88px,
        var(--blue) 88px 158px,
        transparent 158px 100%);
      border-radius: 3px;
    }

    .contact {
      display: grid;
      grid-template-columns: 500px minmax(0, 1fr);
      gap: 54px;
      align-items: start;
    }
    .contact-side {
      display: grid;
      grid-template-columns: 182px 1px 1fr;
      align-items: center;
      column-gap: 42px;
      min-height: 286px;
    }
    .avatar {
      width: 180px;
      height: auto;
      display: block;
    }
    .contact-sep {
      width: 1px;
      align-self: stretch;
      background: var(--line);
    }
    .contact-title {
      margin: 0;
      font-size: 62px;
      line-height: 1;
      font-weight: 400;
      letter-spacing: -.03em;
      color: var(--ink);
    }
    .contact-accent {
      width: 78px;
      height: 4px;
      margin: 18px 0 34px;
      background: linear-gradient(to right, var(--red) 0 40px, #fff 40px 45px, var(--blue) 45px 78px);
      border-radius: 999px;
    }
    .contact-note {
      margin: 0 0 28px;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.6;
      font-weight: 300;
    }
    .mail-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: #6a7489;
      text-decoration: none;
      font-size: 17px;
      font-weight: 300;
      white-space: nowrap;
    }
    .mail-link:hover { color: var(--ink); }
    .mail-link svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
      flex: 0 0 auto;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .field, .message {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255,255,255,.72);
      color: var(--ink);
      font-family: inherit;
      font-size: 18px;
      font-weight: 300;
      padding: 0 20px;
      outline: none;
      box-shadow: none;
    }
    .field {
      height: 58px;
      line-height: 58px;
    }
    .message {
      grid-column: 1 / -1;
      min-height: 150px;
      padding-top: 16px;
      resize: vertical;
    }
    .field::placeholder, .message::placeholder { color: #9099ac; }
    .field:focus, .message:focus {
      border-color: #cdd3dd;
      box-shadow: 0 0 0 4px rgba(29,85,204,.06);
      background: rgba(255,255,255,.92);
    }
    .actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 22px;
    }
    .btn-send {
      position: relative;
      border: 0;
      width: 286px;
      height: 68px;
      border-radius: 10px;
      background: var(--blue);
      color: #fff;
      font-family: inherit;
      font-size: 18px;
      font-weight: 500;
      overflow: hidden;
    }
    .btn-send::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 84px;
      height: 100%;
      background: linear-gradient(136deg, transparent 0 42%, #fff 42% 50%, var(--red) 50% 100%);
    }
    .vh-label {
      position: absolute;
      width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
    }

    @media (max-width: 1199.98px) {
      .wrap { padding: 32px 32px 36px; }
      .brand { margin-bottom: 58px; }
      .hero-title { font-size: 76px; }
      .hero-graphic { width: 470px; right: 0; top: 30px; }
      .divider { margin-left: -32px; margin-right: -32px; }
      .contact { grid-template-columns: 1fr; gap: 42px; }
    }
    @media (max-width: 991.98px) {
      .brand-logo { width: 108px; }
      .brand-name { font-size: 30px; }
      .hero { min-height: auto; }
      .hero-title { font-size: clamp(56px, 11vw, 84px); }
      .hero-graphic {
        position: relative;
        display: block;
        top: 0; right: 0;
        width: min(100%, 520px);
        max-width: 100%;
        margin: 28px 0 0 auto;
      }
      .contact-side { grid-template-columns: 160px 1px 1fr; column-gap: 28px; }
      .avatar { width: 156px; }
      .contact-title { font-size: 56px; }
    }
    @media (max-width: 767.98px) {
      .page { background-size: 22px 22px; }
      .wrap { padding: 22px 18px 30px; }
      .brand { gap: 16px; margin-bottom: 34px; }
      .brand-logo { width: 96px; }
      .brand-divider { height: 42px; }
      .brand-name { font-size: 24px; }
      .hero-title { font-size: clamp(52px, 16vw, 74px); margin-bottom: 24px; }
      .hero-lead { font-size: 17px; line-height: 1.6; }
      .meta-row { gap: 12px 0; flex-direction: column; align-items: flex-start; margin-top: 36px; }
      .meta-sep { display: none; }
      .divider { margin: 26px -18px 34px; }
      .contact-side { grid-template-columns: 1fr; row-gap: 22px; min-height: 0; }
      .contact-sep { display: none; }
      .avatar { width: 146px; }
      .contact-title { font-size: 52px; }
      .contact-note { font-size: 17px; }
      .mail-link { white-space: normal; }
      .form-grid { grid-template-columns: 1fr; }
      .message { grid-column: auto; }
      .actions { justify-content: stretch; }
      .btn-send { width: 100%; }
    }