/* ===========================================================================
     BRAND — X.O Chat. Dark UI + cyan→magenta→purple gradient signature.
     The gradient and accent below drive the whole page.
     =========================================================================== */
  :root{
    --grad: linear-gradient(100deg, #ee3e9d 0%, #9d5ccb 48%, #34d7a9 100%);
    --accent:     #f24fa0;   /* solid pink accent — focus rings, links        */
    --accent-2:   #a45cff;   /* purple partner for the accent                 */
    --focus:      #34e2c4;   /* teal focus highlight (from brand)             */

    --bg:      #120e1b;   /* deep plum-black page background                   */
    --surface: #1b1527;   /* lifted panels                                    */
    --field:   #221a31;   /* input background                                 */
    --ink:     #f4eff8;   /* primary text                                     */
    --muted:   #9a90ac;   /* secondary text                                   */
    --line:    #2c2340;
    --ok:      #3ad9b4;   /* teal success (from their brand)                  */
    --err:     #ff6b86;
    --radius:  14px;
    --f-display: "Bricolage Grotesque", system-ui, sans-serif;
    --f-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; }
  body{
    font-family:var(--f-body);
    color:var(--ink);
    background-color:var(--bg);
    background-image:
      radial-gradient(700px 460px at 50% -30px, rgba(164,92,255,.36), transparent 70%),
      radial-gradient(560px 360px at 66% 10px, rgba(242,79,160,.26), transparent 70%);
    background-repeat:no-repeat;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:32px 20px;
    position:relative;
    overflow-x:hidden;
  }
  /* ambient brand glow now lives in the body background (see above),
     so it can't push the page wider than the screen */
  html{ max-width:100%; overflow-x:hidden; }

  .panel{
    position:relative;
    z-index:1;
    width:100%;
    max-width:500px;
    animation:enter .5s ease both;
  }
  @keyframes enter{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

  /* ---- brand ---- */
  .brand{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:34px;
  }
  .mark{
    width:34px; height:34px;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 4px 16px -6px rgba(242,79,160,.45);
  }
  .mark img{ width:100%; height:100%; object-fit:cover; display:block; }
  .brand .name{ font-weight:600; font-size:15px; }
  .brand .tag{
    margin-left:auto;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* ---- header ---- */
  h1{
    font-family:var(--f-display);
    font-weight:600;
    font-size:clamp(30px,7vw,38px);
    line-height:1.05;
    letter-spacing:-.02em;
    margin:0 0 10px;
  }
  .sub{
    color:var(--muted);
    font-size:16px;
    margin:0 0 30px;
    max-width:40ch;
  }

  /* ---- form ---- */
  .field{ margin-bottom:16px; }
  label{
    display:block;
    font-size:13.5px;
    font-weight:500;
    margin-bottom:6px;
  }
  input, select, textarea{
    width:100%;
    font-family:inherit;
    font-size:16px;              /* 16px = no zoom-on-focus on iOS */
    color:var(--ink);
    background:var(--field);
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    padding:13px 14px;
    transition:border-color .15s, background .15s, box-shadow .15s;
  }
  ::placeholder{ color:#6f6680; }
  textarea{ resize:vertical; min-height:130px; }
  select{
    appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a90ac' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 15px center; padding-right:38px;
  }
  select:required:invalid{ color:#6f6680; }
  input:focus, select:focus, textarea:focus{
    outline:none;
    background:var(--surface);
    border-color:var(--focus);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent);
  }
  .field.bad input, .field.bad select, .field.bad textarea{
    border-color:var(--err);
  }
  .err-msg{
    display:none;
    color:var(--err);
    font-size:12.5px;
    margin-top:6px;
  }
  .field.bad .err-msg{ display:block; }

  /* honeypot */
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .send{
    width:100%;
    font-family:var(--f-display);
    font-weight:600;
    font-size:16px;
    color:#fff;
    background:var(--grad);
    border:none;
    border-radius:var(--radius);
    padding:14px;
    margin-top:6px;
    cursor:pointer;
    transition:box-shadow .18s, transform .05s, filter .18s;
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
  }
  .send:hover{ box-shadow:0 8px 26px -8px rgba(242,79,160,.55); filter:brightness(1.06); }
  .send:active{ transform:translateY(1px); }
  .send:disabled{ opacity:.6; cursor:default; filter:none; box-shadow:none; }
  .spin{
    width:16px; height:16px;
    border:2px solid rgba(255,255,255,.5);
    border-top-color:#fff;
    border-radius:50%;
    display:none;
    animation:spin .6s linear infinite;
  }
  .sending .spin{ display:inline-block; }
  @keyframes spin{ to{ transform:rotate(360deg);} }

  .note{
    text-align:center;
    color:var(--muted);
    font-size:13px;
    margin:14px 0 0;
  }
  .note a{ color:var(--accent); text-decoration:none; }
  .note a:hover{ text-decoration:underline; }

  .form-err{
    display:none;
    margin-top:14px;
    font-size:13.5px;
    color:var(--err);
    background:color-mix(in srgb, var(--err) 12%, transparent);
    border-radius:12px;
    padding:11px 13px;
  }
  .form-err.show{ display:block; }
  .form-err a{ color:var(--err); }

  /* ---- success ---- */
  .done{ display:none; text-align:center; padding:14px 0; }
  .done.show{ display:block; animation:enter .45s ease both; }
  .halo{
    width:60px; height:60px;
    margin:6px auto 22px;
    border-radius:50%;
    background:color-mix(in srgb, var(--ok) 16%, transparent);
    display:grid; place-items:center;
  }
  .halo svg{ width:28px; height:28px; }
  .done h2{
    font-family:var(--f-display);
    font-weight:600;
    font-size:26px;
    margin:0 0 8px;
  }
  .done p{ color:var(--muted); font-size:15.5px; margin:0 auto 22px; max-width:34ch; }
  .done p b{ color:var(--ink); font-weight:500; }
  .ref{
    display:inline-block;
    font-family:var(--f-display);
    font-weight:600;
    font-size:15px;
    letter-spacing:.04em;
    color:#fff;
    background:var(--grad);
    border-radius:999px;
    padding:8px 18px;
    margin-bottom:26px;
    box-shadow:0 6px 20px -8px rgba(242,79,160,.5);
  }
  .again{
    display:block;
    margin:0 auto;
    background:none; border:none;
    color:var(--muted);
    font:inherit; font-size:13.5px;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .again:hover{ color:var(--ink); }

  @media (prefers-reduced-motion:reduce){
    .panel,.done.show{ animation:none; }
    .spin{ animation-duration:1.2s; }
  }

  /* larger screens (tablet/desktop) — scale the form up so it doesn't
     feel small in the middle of a big iPad or monitor */
  @media (min-width:760px){
    .panel{ max-width:600px; }
    h1{ font-size:46px; }
    .sub{ font-size:17px; }
    label{ font-size:14px; }
    input, select, textarea{ font-size:16.5px; padding:15px 16px; }
    textarea{ min-height:150px; }
    .send{ font-size:17px; padding:16px; }
    .brand{ margin-bottom:40px; }
  }

  /* iPad Pro and larger — step up again so the form fills the space properly */
  @media (min-width:1000px){
    .panel{ max-width:720px; }
    h1{ font-size:54px; }
    .sub{ font-size:18px; }
    input, select, textarea{ font-size:17px; padding:16px 18px; }
    textarea{ min-height:170px; }
    .send{ font-size:18px; padding:17px; }
  }

  /* ---- custom dropdown (replaces the native select so the open list
     matches the dark theme; native <select> popups can't be styled) ---- */
  .select{ position:relative; }
  .select-trigger{
    width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-family:inherit; font-size:16px; text-align:left;
    color:var(--ink);
    background:var(--field);
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    padding:13px 14px;
    cursor:pointer;
    transition:border-color .15s, background .15s, box-shadow .15s;
  }
  .select-value{ color:#6f6680; }
  .select-trigger.has-value .select-value{ color:var(--ink); }
  .select-caret{ width:12px; height:8px; flex:none; color:var(--muted); transition:transform .18s; }
  .select.open .select-caret{ transform:rotate(180deg); }
  .select-trigger:focus-visible,
  .select.open .select-trigger{
    outline:none;
    background:var(--surface);
    border-color:var(--focus);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent);
  }
  .field.bad .select-trigger{ border-color:var(--err); }

  .select-list{
    position:absolute; z-index:20;
    top:calc(100% + 6px); left:0; right:0;
    margin:0; padding:6px; list-style:none;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 18px 44px -14px rgba(0,0,0,.7);
    max-height:280px; overflow:auto;
  }
  .select-list[hidden]{ display:none; }
  .select-list li{
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 12px; border-radius:9px;
    font-size:15px; color:var(--ink);
    cursor:pointer;
  }
  .select-list li:hover,
  .select-list li.active{ background:color-mix(in srgb, var(--focus) 15%, transparent); }
  .select-list li[aria-selected="true"]{ color:var(--focus); }
  .select-list li[aria-selected="true"]::after{ content:"✓"; font-size:13px; }

  /* keep the trigger sized like the inputs on larger screens */
  @media (min-width:760px){ .select-trigger{ font-size:16.5px; padding:15px 16px; } }
  @media (min-width:1000px){
    .select-trigger{ font-size:17px; padding:16px 18px; }
    .select-list li{ font-size:16px; }
  }

  /* ---- app download links (footer) ---- */
  .app-links{
    text-align:center;
    padding:24px 20px 40px;
    width:100%;
    max-width:500px;
    margin:0 auto;
  }
  .app-links-label{
    font-family:var(--f-display);
    font-size:13px;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 14px;
  }
  .app-links-row{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .badge-link{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    transition:opacity .15s, transform .05s;
  }
  .badge-link:hover{ opacity:.85; }
  .badge-link:active{ transform:translateY(1px); }
  .badge-link img{ height:36px; width:auto; }
  .telegram-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    height:36px;
    border-radius:6px;
    border:1px solid #a6a6a6;
    background:#000;
    color:#fff;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
  }
  .telegram-link svg{ width:18px; height:18px; }
  @media (min-width:760px){
    .app-links{ max-width:600px; }
    .badge-link img{ height:40px; }
    .telegram-link{ height:40px; font-size:14px; padding:8px 18px; }
    .telegram-link svg{ width:20px; height:20px; }
  }
  @media (min-width:1000px){
    .app-links{ max-width:720px; }
  }