:root {
      --sky-100: #e0f2fe;
      --sky-200: #bae6fd;
      --sky-300: #7dd3fc;
      --sky-600: #0284c7;
      --sky-700: #0369a1;
      --sky-800: #075985;
      --indigo-600: #4f46e5;
      --indigo-900: #312e81;
      --slate-100: #f1f5f9;
      --slate-200: #e2e8f0;
      --slate-400: #94a3b8;
      --slate-600: #475569;
      --slate-800: #1e293b;
      --navy: #213f74;
      --slate-50: #f8fafc;
      --wa: #128c7e;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%;
      font-family: Nunito, ui-sans-serif, system-ui, sans-serif;
      color: #2c3e50;
      background: var(--slate-100);
    }

    .layout {
      display: flex;
      height: 100%;
      width: 100%;
      overflow-y: auto;
      background: var(--slate-100);
    }

    .hero {
      position: relative;
      display: none;
      width: 50%;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      padding: 2.5rem;
      color: #fff;
      background: linear-gradient(to bottom right, var(--sky-700), var(--sky-800), var(--indigo-900));
    }

    .blob {
      pointer-events: none;
      position: absolute;
      border-radius: 9999px;
    }

    .blob-a {
      right: -6rem;
      top: -6rem;
      height: 20rem;
      width: 20rem;
      background: rgba(255, 255, 255, 0.1);
      filter: blur(40px);
    }

    .blob-b {
      bottom: -8rem;
      left: -4rem;
      height: 24rem;
      width: 24rem;
      background: rgba(56, 189, 248, 0.2);
      filter: blur(64px);
    }

    .blob-c {
      right: 33%;
      top: 50%;
      height: 10rem;
      width: 10rem;
      background: rgba(129, 140, 248, 0.1);
      filter: blur(40px);
    }

    .layer { position: relative; z-index: 10; }

    .brand {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .icon {
      display: inline-block;
      overflow: visible;
      vertical-align: -0.125em;
    }

    .logo-lg {
      width: 3.75rem;
      height: 3.75rem;
      color: #fff;
      filter: drop-shadow(0 6px 14px rgba(8, 30, 70, 0.55));
    }

    .brand-name {
      font-size: 1.875rem;
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.15;
    }

    .copy { max-width: 32rem; }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.1);
      padding: 0.25rem 0.75rem;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--sky-100);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
    }

    .badge .icon { width: 0.75rem; height: 0.75rem; }

    .hero h2 {
      font-size: 1.875rem;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.025em;
    }

    .hero h2 span { color: var(--sky-300); }

    .hero-lead {
      margin-top: 0.75rem;
      font-size: 0.875rem;
      color: rgba(224, 242, 254, 0.8);
    }

    .features {
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      list-style: none;
    }

    .features li {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .feature-icon {
      margin-top: 0.125rem;
      display: flex;
      height: 2.25rem;
      width: 2.25rem;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border-radius: 0.5rem;
      background: rgba(255, 255, 255, 0.1);
      color: var(--sky-200);
      backdrop-filter: blur(8px);
    }

    .feature-icon .icon { width: 1rem; height: 1rem; }

    .features p:first-child { font-weight: 700; }

    .features p:last-child {
      font-size: 0.875rem;
      color: rgba(224, 242, 254, 0.7);
    }

    .hero-foot {
      font-size: 0.75rem;
      color: rgba(186, 230, 253, 0.6);
    }

    .panel {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      padding: 2.5rem 1.25rem;
    }

    .panel-inner { width: 100%; max-width: 28rem; }

    .panel-brand {
      margin-bottom: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
    }

    .logo-sm {
      width: 3rem;
      height: 3rem;
      color: var(--navy);
      filter: drop-shadow(0 4px 10px rgba(33, 63, 116, 0.25));
    }

    .panel-brand .brand-name {
      font-size: 1.5rem;
      color: var(--slate-800);
    }

    .card {
      display: flex;
      min-height: 22rem;
      flex-direction: column;
      justify-content: center;
      border-radius: 1rem;
      border: 1px solid var(--slate-200);
      background: #fff;
      padding: 2.5rem 1.5rem;
      box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.6), 0 8px 10px -6px rgba(226, 232, 240, 0.6);
      text-align: center;
    }

    .status-icon {
      margin: 0 auto 1.5rem;
      display: flex;
      height: 4.25rem;
      width: 4.25rem;
      align-items: center;
      justify-content: center;
      border-radius: 1rem;
      background: #fff7ed;
      color: #c2410c;
    }

    .status-icon .icon { width: 2.25rem; height: 2.25rem; }

    .card h1 {
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: -0.025em;
      color: var(--slate-800);
    }

    .card p {
      margin-top: 0.75rem;
      font-size: 0.95rem;
      line-height: 1.5;
      color: var(--slate-600);
    }

    .powered {
      margin-top: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.125rem;
      font-size: 0.75rem;
      color: var(--slate-400);
    }

    .powered strong {
      font-weight: 700;
      color: var(--sky-600);
    }

    @media (min-width: 640px) {
      .panel { padding-left: 2rem; padding-right: 2rem; }
      .card { padding: 2rem; }
    }

    @media (min-width: 1024px) {
      .hero { display: flex; }
      .panel { width: 50%; }
    }

    @media (min-width: 1280px) {
      .hero { width: 60%; padding: 3.5rem; }
      .hero h2 { font-size: 2.25rem; }
      .hero-lead { font-size: 1rem; }
      .panel { width: 40%; }
    }

    .phone {
      margin-top: 1.25rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      width: 100%;
      border-radius: 0.75rem;
      border: 1px solid var(--slate-200);
      background: var(--slate-50);
      padding: 0.85rem 1rem;
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: -0.015em;
      color: var(--slate-800);
      text-decoration: none;
    }

    .phone .icon {
      width: 1.15rem;
      height: 1.15rem;
      flex-shrink: 0;
    }

    a.phone {
      color: #fff;
      background: var(--wa);
      border-color: transparent;
      box-shadow: 0 10px 15px -3px rgba(18, 140, 126, 0.28);
      transition: filter 0.15s ease;
    }

    a.phone:hover,
    a.phone:focus-visible {
      filter: brightness(1.08);
    }