body {
      background-color: var(--white);
      color: var(--charcoal-dark);
      font-family: var(--font-ui);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Subtle grain overlay */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 0;
    }

    /* ─── PAGE GRID ─── */
    .page {
      position: relative; 
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* min-height: 100vh; */
      max-width: 1360px;
      margin-inline: auto;
    }

    /* ─── LEFT PANEL ─── */
    .panel-left {
      padding: 50px 50px 100px;
      display: flex; flex-direction: column; 
      justify-content: space-between;
      background: var(--white);
      position: relative;
    }

    .panel-left::after {
      content: '';
      position: absolute; right: 0; top: 8%; bottom: 8%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--gray-light) 20%, var(--gray-light) 80%, transparent);
    }

    /* Brand */
    .brand-tag {
      display: flex; align-items: center; gap: 10px;
    }
    .brand-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--orange);
      animation: pulse-dot 3s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:0.5}
    }
    .brand-name {
      font-family: var(--font-mono);
      font-size: 11px; font-weight: 500;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--charcoal);
    }
    .brand-sub {
      font-family: var(--font-mono);
      font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--orange); opacity: 0.7;
      margin-top: 4px; margin-left: 18px;
    }

    /* Hero */
    .hero-text {
      flex: 1; display: flex; flex-direction: column; justify-content: center;
      padding: 50px 0;
    }
    .hero-eyebrow {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 600; 
      letter-spacing: 0.1em; 
      text-transform: uppercase;
      color: var(--orange); 
      margin-bottom: 20px;
      opacity: 0; 
      animation: fade-up 0.7s ease forwards 0.3s;
    }
    .hero-heading {
      font-family: var(--font-display);
      font-size: clamp(48px, 5vw, 74px);
      font-weight: 700; line-height: 1.0;
      color: var(--charcoal-dark); letter-spacing: -0.02em;
      opacity: 0; animation: fade-up 0.7s ease forwards 0.5s;
    }
    .hero-heading em { font-style: italic; color: var(--orange); }

    .hero-sub {
      margin-top: 24px; font-size: 18px; line-height: 1.8;
      color: var(--charcoal); opacity: 0; max-width: 340px;
      animation: fade-up 0.7s ease forwards 0.7s;
    }

    /* Dual-purpose notice */
    .notice-box {
      margin-top: 28px;
      padding: 14px 18px;
      border-left: 3px solid var(--orange);
      background: var(--off-white);
      opacity: 0; animation: fade-up 0.7s ease forwards 0.85s;
    }
    .notice-box p {
      font-family: var(--font-mono);
      font-size: 10px; letter-spacing: 0.12em; line-height: 1.7;
      color: var(--charcoal); text-transform: uppercase;
    }
    .notice-box strong { color: var(--orange-dark); }

    /* Info strips */
    .info-strips {
      display: flex; flex-direction: column;
      opacity: 0; animation: fade-up 0.7s ease forwards 0.95s;
    }
    .info-strip {
      display: flex; align-items: center; gap: 14px;
      padding: 15px 0; border-top: 1px solid var(--gray-light);
      transition: padding-left 0.3s ease; cursor: default;
    }
    .info-strip:last-child { border-bottom: 1px solid var(--gray-light); }
    .info-strip:hover { padding-left: 6px; }
    .strip-icon {
      width: 32px; height: 32px; border: 1px solid var(--gray-light);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: border-color 0.3s, background 0.3s;
    }
    .info-strip:hover .strip-icon { border-color: var(--orange); background: var(--orange); }
    .info-strip:hover .strip-icon svg { stroke: white; }
    .strip-icon svg { width: 14px; height: 14px; stroke: var(--charcoal); fill: none; stroke-width: 1.5; transition: stroke 0.3s; }
    .strip-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 2px; }
    .strip-value { font-size: 12px; font-weight: 600; color: var(--charcoal-dark); }

    /* ─── RIGHT PANEL ─── */
    .panel-right {
      padding: 50px 50px 100px;
      display: flex; flex-direction: column; justify-content: center;
      background: var(--white); position: relative; overflow: hidden;
    }

    /* Ghost watermark */
    .deco-letter {
      position: absolute; right: -20px; bottom: -50px;
      font-family: var(--font-display); font-size: 300px; font-weight: 600;
      color: transparent; -webkit-text-stroke: 1px var(--gray-light);
      line-height: 1; pointer-events: none; user-select: none; z-index: 0;
    }

    /* Form */
    .form-wrapper { position: relative; z-index: 1; opacity: 0; animation: fade-up 0.7s ease forwards 0.4s; }

    .form-head { margin-bottom: 36px; }
    .form-step { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
    .form-title { 
      font-family: var(--font-display); 
      font-size: 30px; 
      font-weight: 700; 
      color: var(--charcoal-dark); 
      letter-spacing: -0.01em; 
    }

    /* Role toggle */
    .role-toggle {
      display: flex; gap: 0; margin-bottom: 32px;
      border: 1px solid var(--gray-light);
    }
    .role-btn {
      flex: 1; padding: 11px 8px;
      background: transparent; border: none;
      font-family: var(--font-mono); font-size: 9px;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--charcoal); cursor: pointer;
      transition: background 0.25s, color 0.25s;
      position: relative;
    }
    .role-btn + .role-btn::before {
      content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
      width: 1px; background: var(--gray-light);
    }
    .role-btn.active { background: var(--charcoal-dark); color: var(--white); }
    .role-btn.active + .role-btn::before { display: none; }

    /* Fields grid */
    .fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

    .field-group {
      position: relative; padding: 16px 0;
      border-bottom: 1px solid var(--gray-light);
    }
    .field-group:nth-child(odd):not(.full-width) { padding-right: 22px; border-right: 1px solid var(--gray-light); }
    .field-group:nth-child(even):not(.full-width) { padding-left: 22px; }
    .field-group.full-width { grid-column: 1 / -1; }

    .field-label {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--charcoal);
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 5px;
      font-weight: 600;
    }
    .field-group:focus-within .field-label { color: var(--orange-dark); }
    .req { color: var(--orange); font-size: 12px; line-height: 1; }

    .field-input, .field-select, .field-textarea {
      width: 100%; background: transparent; border: none; outline: none;
      font-family: var(--font-ui); font-size: 14px; font-weight: 600;
      color: var(--charcoal-dark); padding: 4px 0;
      appearance: none; -webkit-appearance: none;
    }
    .field-input::placeholder, .field-textarea::placeholder { color: #c2c2c2; font-weight: 400; }
    .field-select { cursor: pointer; padding-right: 18px; }
    .field-select option { background: var(--white); color: var(--charcoal-dark); font-weight: 400; }
    .select-wrap { position: relative; }
    .select-arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: var(--charcoal); fill: none; stroke-width: 2; pointer-events: none; }
    .field-textarea { resize: none; min-height: 72px; line-height: 1.6; }

    /* Tags */
    .tags-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .tag-item { display: none; }
    .tag-label {
      display: inline-block; padding: 5px 11px;
      border: 1px solid var(--gray-light);
      font-family: var(--font-mono); font-size: 9px;
      letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--charcoal); cursor: pointer;
      transition: all 0.2s ease; user-select: none;
    }
    .tag-label:hover { border-color: var(--orange); color: var(--orange); }
    .tag-item:checked + .tag-label { background: var(--orange); border-color: var(--orange); color: var(--white); }

    /* Animated underline bar */
    .field-bar { position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--orange); transition: width 0.4s ease; }
    .field-group:focus-within .field-bar { width: 100%; }
    .field-group.error .field-bar { width: 100%; background: #c0392b; }
    .field-group.error .field-label { color: #c0392b; }

    /* Conditional fields */
    .vendor-only, .client-only { display: none; }

    /* Footer */
    .form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; gap: 16px; }
    .form-note { 
      font-family: var(--font-mono); 
      font-size: 12px; 
      letter-spacing: 0.02em; 
      text-transform: Capitalize; 
      color: var(--orange); 
      opacity: 1; 
      line-height: 1.7;
      font-weight: 500; 
    }

    .btn-submit {
      display: flex; align-items: center; gap: 10px;
      background: var(--charcoal-dark); color: var(--white);
      border: none; padding: 13px 26px;
      font-family: var(--font-ui); font-size: 16px; font-weight: 500;
      letter-spacing: 0.1em; text-transform: Capitalize;
      cursor: pointer; position: relative; overflow: hidden;
      transition: color 0.3s; flex-shrink: 0;
    }
    .btn-submit::before {
      content: ''; position: absolute; inset: 0;
      background: var(--orange); transform: translateX(-100%);
      transition: transform 0.4s ease; z-index: 0;
    }
    .btn-submit:hover::before { transform: translateX(0); }
    .btn-submit span, .btn-submit svg { position: relative; z-index: 1; }
    .btn-arrow { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s ease; }
    .btn-submit:hover .btn-arrow { transform: translateX(4px); }

    /* Success */
    .success-overlay {
      position: absolute; inset: 0; background: var(--off-white);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 10;
    }
    .success-overlay.visible { opacity: 1; pointer-events: all; }
    .success-icon {
      width: 54px; height: 54px; border: 2px solid var(--orange); border-radius: 50%;
      display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
    }
    .success-icon svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 2.5; }
    .success-title { font-family: var(--font-display); font-size: 40px; font-weight: 300; color: var(--charcoal-dark); margin-bottom: 8px; }
    .success-msg { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal); opacity: 0.5; }

    /* Animations */
    @keyframes fade-up {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Responsive */
    @media (max-width: 920px) {
      .page { grid-template-columns: 1fr; }
      .panel-left { padding: 60px 40px; min-height: auto; }
      .panel-left::after { display: none; }
      .hero-text { padding: 40px 0; }
      .panel-right { padding: 60px 40px 80px; order: -1}
      .fields-grid { grid-template-columns: 1fr; }
      .field-group:nth-child(odd):not(.full-width) { padding-right: 0; border-right: none; }
      .field-group:nth-child(even):not(.full-width) { padding-left: 0; }
      .deco-letter { font-size: 180px; }
    }
    @media (max-width: 520px) {
      .panel-left, .panel-right { padding: 40px 24px; }
      .hero-heading { font-size: 44px; }
      .form-footer { flex-direction: column; align-items: flex-start; }
      .btn-submit { width: 100%; justify-content: center; }
    }