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

    :root {
      --pink:        #F472B6;
      --pink-light:  #FBCFE8;
      --pink-pale:   #FDF2F8;
      --purple:      #A855F7;
      --purple-mid:  #C084FC;
      --purple-light:#E9D5FF;
      --purple-pale: #FAF5FF;
      --peach:       #FDBA74;
      --peach-light: #FEF3C7;
      --bg:          #FFFBFF;
      --bg2:         #FDF4FF;
      --bg3:         #FFF0FB;
      --text:        #3B1F4E;
      --text-mid:    #7C5A8E;
      --text-soft:   #B899C8;
      --white:       #FFFFFF;
      --serif: 'Playfair Display', serif;
      --sans:  'DM Sans', sans-serif;
      --r-md: 24px; --r-lg: 40px; --r-full: 999px;
    }

    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-weight: 400;
      min-height: 100vh;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
    }

    /* ── BLOBS ── */
    .blob-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
    .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.15; animation: blobFloat 12s ease-in-out infinite; }
    .blob-1 { width: 650px; height: 650px; background: var(--purple-mid); top: -200px; right: -150px; animation-delay: 0s; }
    .blob-2 { width: 500px; height: 500px; background: var(--pink); bottom: -100px; left: -150px; animation-delay: -5s; }
    .blob-3 { width: 350px; height: 350px; background: var(--peach); top: 50%; right: 5%; animation-delay: -9s; }
    @keyframes blobFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-28px) scale(1.04)} }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 500;
      height: 68px; padding: 0 6%;
      display: flex; align-items: center; justify-content: space-between;
      transition: all 0.4s;
    }
    nav.scrolled {
      background: rgba(255,251,255,0.92);
      backdrop-filter: blur(16px);
      box-shadow: 0 2px 24px rgba(168,85,247,0.08);
    }
    .nav-logo img { height: 32px; }
    .nav-back {
      display: flex; align-items: center; gap: 8px;
      font-size: 0.82rem; font-weight: 500; color: var(--text-mid);
      text-decoration: none; padding: 7px 16px; border-radius: var(--r-full);
      background: var(--white); border: 2px solid var(--purple-light);
      transition: all 0.25s;
    }
    .nav-back:hover { background: var(--purple-light); color: var(--purple); }

    /* ── MAIN LAYOUT ── */
    main {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
      position: relative; z-index: 1;
    }

    /* ── LEFT PANEL ── */
    .left-panel {
      padding: 120px 7% 5rem;
      display: flex; flex-direction: column; justify-content: center;
      position: relative;
    }
    .left-panel::after {
      content: '';
      position: absolute; top: 10%; bottom: 10%; right: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--purple-light), transparent);
    }

    .panel-pill {
      display: inline-flex; align-items: center; gap: 8px;
      background: linear-gradient(135deg, var(--purple-light), var(--pink-light));
      color: var(--purple); font-size: 0.75rem; font-weight: 600;
      padding: 6px 16px; border-radius: var(--r-full);
      letter-spacing: 0.06em; text-transform: uppercase;
      margin-bottom: 1.5rem; align-self: flex-start;
      animation: fadeUp 0.6s ease both;
    }

    .panel-title {
      font-family: var(--serif);
      font-size: clamp(2.4rem, 3.8vw, 4rem);
      font-weight: 700; line-height: 1.08;
      color: var(--text);
      margin-bottom: 1.2rem;
      animation: fadeUp 0.6s 0.1s ease both;
    }
    .panel-title em {
      font-style: italic;
      background: linear-gradient(135deg, var(--purple), var(--pink));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    .panel-sub {
      font-size: 1rem; color: var(--text-mid); line-height: 1.8;
      margin-bottom: 2.5rem; max-width: 420px;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    /* What's inside list */
    .secrets-list {
      list-style: none; display: flex; flex-direction: column; gap: 1rem;
      animation: fadeUp 0.6s 0.3s ease both;
    }
    .secret-item {
      display: flex; align-items: flex-start; gap: 1rem;
      background: white; border-radius: var(--r-md);
      padding: 1rem 1.2rem;
      border: 2px solid var(--purple-light);
      transition: all 0.25s;
    }
    .secret-item:hover {
      border-color: var(--purple-mid);
      transform: translateX(5px);
      box-shadow: 0 6px 24px rgba(168,85,247,0.1);
    }
    .secret-num {
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--purple), var(--pink));
      color: white; font-size: 0.72rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .secret-text strong { display: block; font-size: 0.88rem; color: var(--text); font-weight: 500; }
    .secret-text span { font-size: 0.78rem; color: var(--text-soft); }

    /* Author card */
    .author-card {
      display: flex; align-items: center; gap: 1.2rem;
      background: linear-gradient(135deg, var(--purple-pale), var(--pink-pale));
      border-radius: var(--r-md); padding: 1.2rem 1.5rem;
      border: 2px solid var(--purple-light);
      margin-top: 2rem;
      animation: fadeUp 0.6s 0.4s ease both;
    }
    .author-avatar {
      width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--purple), var(--pink));
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif); font-size: 1.4rem; color: white; font-weight: 700;
      border: 3px solid white;
      overflow: hidden;
    }
    .author-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .author-name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
    .author-title { font-size: 0.78rem; color: var(--text-mid); margin-top: 2px; }
    .author-tag {
      margin-left: auto; flex-shrink: 0;
      background: var(--purple); color: white;
      font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em;
      padding: 4px 12px; border-radius: var(--r-full); text-transform: uppercase;
    }

    /* Floating decorations */
    .deco-em {
      position: absolute; font-size: 2rem;
      animation: floatE 4s ease-in-out infinite; pointer-events: none;
    }
    .de1 { top: 18%; right: 6%; animation-delay: 0s; }
    .de2 { bottom: 25%; left: 3%; animation-delay: -2s; }
    @keyframes floatE { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-14px) rotate(8deg)} }

    /* ── RIGHT PANEL (FORM) ── */
    .right-panel {
      padding: 120px 7% 5rem;
      display: flex; flex-direction: column; justify-content: center;
      background: linear-gradient(160deg, var(--purple-pale) 0%, var(--bg3) 60%, var(--pink-pale) 100%);
    }

    .form-card {
      background: white;
      border-radius: var(--r-lg);
      padding: 2.8rem;
      border: 2px solid var(--purple-light);
      box-shadow: 0 20px 70px rgba(168,85,247,0.12);
      animation: fadeUp 0.7s 0.2s ease both;
    }

    .form-header { text-align: center; margin-bottom: 2rem; }
    .form-header h2 {
      font-family: var(--serif); font-size: 1.7rem; font-weight: 700;
      color: var(--text); line-height: 1.2; margin-bottom: 0.5rem;
    }
    .form-header h2 em {
      font-style: italic;
      background: linear-gradient(135deg, var(--purple), var(--pink));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .form-header p { font-size: 0.88rem; color: var(--text-mid); line-height: 1.6; }

    .form-divider {
      width: 100%; height: 1px;
      background: linear-gradient(90deg, transparent, var(--purple-light), transparent);
      margin-bottom: 2rem;
    }

    .form-group { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; }
    .form-group label {
      font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--text-mid);
    }
    .form-group input,
    .form-group textarea {
      padding: 13px 16px; border-radius: var(--r-md);
      background: var(--purple-pale);
      border: 2px solid var(--purple-light);
      color: var(--text); font-family: var(--sans); font-size: 0.9rem;
      outline: none; transition: border-color 0.3s, box-shadow 0.3s;
      width: 100%;
    }
    .form-group input:focus,
    .form-group textarea:focus {
      border-color: var(--purple);
      box-shadow: 0 0 0 4px rgba(168,85,247,0.1);
      background: white;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: var(--text-soft); }
    .form-group textarea { resize: vertical; min-height: 90px; }

    /* Optional badge */
    .optional-badge {
      display: inline-block; font-size: 0.62rem; color: var(--text-soft);
      background: var(--purple-pale); padding: 1px 8px; border-radius: var(--r-full);
      margin-left: 6px; text-transform: none; letter-spacing: 0; vertical-align: middle;
    }

    .submit-btn {
      width: 100%; padding: 15px 28px; border-radius: var(--r-full);
      background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
      color: white; border: none; font-family: var(--sans);
      font-size: 0.95rem; font-weight: 500; cursor: pointer;
      transition: all 0.28s;
      box-shadow: 0 8px 28px rgba(168,85,247,0.28);
      margin-top: 0.5rem;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(168,85,247,0.38); }
    .submit-btn:active { transform: translateY(0); }
    .submit-btn.loading { opacity: 0.8; cursor: not-allowed; }

    /* Trust badges */
    .trust-row {
      display: flex; justify-content: center; gap: 1.5rem;
      margin-top: 1.4rem; flex-wrap: wrap;
    }
    .trust-badge {
      display: flex; align-items: center; gap: 5px;
      font-size: 0.72rem; color: var(--text-soft);
    }

    /* Status */
    #statusMessage {
      display: none;
      text-align: center; border-radius: var(--r-md);
      padding: 1rem 1.2rem; margin-top: 1rem;
      font-size: 0.88rem; line-height: 1.6; font-weight: 500;
    }
    #statusMessage.success {
      background: linear-gradient(135deg, #d1fae5, #a7f3d0);
      color: #065f46; border: 2px solid #6ee7b7; display: block;
    }
    #statusMessage.error {
      background: linear-gradient(135deg, #fee2e2, #fecaca);
      color: #991b1b; border: 2px solid #fca5a5; display: block;
    }

    /* ── FOOTER ── */
    footer {
      position: relative; z-index: 1;
      text-align: center; padding: 1.5rem;
      font-size: 0.75rem; color: var(--text-soft);
      border-top: 1px solid var(--purple-light);
      background: var(--white);
    }
    footer a { color: var(--purple); text-decoration: none; font-weight: 500; }
    footer a:hover { text-decoration: underline; }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

    /* ── RESPONSIVE ── */
    @media(max-width: 900px) {
      main { grid-template-columns: 1fr; }
      .left-panel { padding: 100px 6% 3rem; }
      .left-panel::after { display: none; }
      .right-panel { padding: 2rem 6% 5rem; }
      .deco-em { display: none; }
    }
    @media(max-width: 480px) {
      .form-card { padding: 2rem 1.4rem; }
      .trust-row { gap: 0.8rem; }
    }