* {
          box-sizing: border-box;
        }

        :root {
          --text: #151515;
          --muted: #6f7480;
          --border: #d7d7d7;
          --background: #ffffff;
          --button: #333333;
          --button-hover: #555555;
          --success: #166534;
          --max: 1180px;
        }

        body {
          margin: 0;
          min-height: 100svh;

          font-family: Inter, ui-sans-serif, -apple-system,
            BlinkMacSystemFont, "Segoe UI", sans-serif;

          background: var(--background);
          color: var(--text);

          display: flex;
          justify-content: center;
          align-items: center;

          padding:
            max(90px, env(safe-area-inset-top))
            max(24px, env(safe-area-inset-right))
            max(40px, env(safe-area-inset-bottom))
            max(24px, env(safe-area-inset-left));
        }

        /* =========================
           TOP BAR
        ========================= */

        .topbar {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);

          width: min(calc(100% - 48px), var(--max));

          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 24px;

          padding: 24px 0;

          font-size: 14px;
        }

        .brand {
          color: var(--text);
          font-weight: 800;
          text-decoration: none;
        }

        .back-link {
          color: var(--muted);
          text-decoration: none;

          transition: color 0.2s ease;
        }

        .back-link:hover {
          color: var(--text);
        }

        /* =========================
           CONTACT
        ========================= */

        .container {
          width: 100%;
          max-width: 460px;
          text-align: center;
        }

        h1 {
          margin: 0;

          font-size: clamp(26px, 6vw, 34px);
          letter-spacing: 0.04em;
        }

        .subtitle {
          margin: 10px auto 32px;
          max-width: 390px;

          color: var(--muted);
          font-size: 15px;
          line-height: 1.6;
        }

        form {
          display: flex;
          flex-direction: column;
          gap: 16px;

          text-align: left;
        }

        .field {
          width: 100%;
        }

        label {
          display: block;

          margin-bottom: 7px;

          font-size: 13px;
          font-weight: 600;
        }

        input,
        select,
        textarea {
          width: 100%;

          border: 1px solid var(--border);
          border-radius: 8px;

          background: #fff;
          color: var(--text);

          font: inherit;
          font-size: 16px;

          transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
        }

        input,
        select {
          height: 46px;
          padding: 0 12px;
        }

        textarea {
          min-height: 140px;
          padding: 12px;

          resize: vertical;
          line-height: 1.5;
        }

        input::placeholder,
        textarea::placeholder {
          color: #999;
        }

        select {
          cursor: pointer;
        }

        input:hover,
        select:hover,
        textarea:hover {
          border-color: #aaa;
        }

        input:focus,
        select:focus,
        textarea:focus {
          outline: none;

          border-color: var(--text);
          box-shadow: 0 0 0 3px rgba(21, 21, 21, 0.08);
        }

        button {
          width: 100%;
          min-height: 46px;

          margin-top: 4px;

          border: none;
          border-radius: 8px;

          background: var(--button);
          color: #fff;

          font: inherit;
          font-size: 15px;
          font-weight: 600;

          cursor: pointer;

          transition:
            background 0.2s ease,
            transform 0.1s ease;
        }

        button:hover {
          background: var(--button-hover);
        }

        button:active {
          transform: translateY(1px);
        }

        button:disabled {
          opacity: 0.65;
          cursor: wait;
        }

        .form-note {
          margin: 2px 0 0;

          color: var(--muted);
          font-size: 12px;
          line-height: 1.5;
          text-align: center;
        }

        /* =========================
           STATUS
        ========================= */

        .status {
          display: none;

          margin-top: 24px;
          padding: 18px;

          border: 1px solid var(--border);
          border-radius: 8px;

          text-align: center;
        }

        .status.success {
          color: var(--success);
        }

        .status.error {
          color: #991b1b;
        }

        .status p {
          margin: 0;
          line-height: 1.5;
        }

        .status .back-link {
          display: inline-block;
          margin-top: 16px;

          color: var(--text);
          font-weight: 600;
        }

        @media (max-width: 520px) {
          body {
            align-items: flex-start;
            padding-top: 110px;
          }

          .topbar {
            width: calc(100% - 32px);
            padding: 20px 0;
          }

          .topbar .brand {
            font-size: 13px;
          }

          .topbar .back-link {
            font-size: 13px;
          }

          .subtitle {
            margin-bottom: 26px;
          }
        }