/* ——— Theme tokens ——— */
:root{
    --sea-50:#f0f9ff;
    --sea-100:#e0f2fe;
    --sea-200:#bae6fd;
    --sea-500:#0ea5e9;
    --sea-600:#0284c7;
    --ink-900:#111111;     /* true black text for max contrast */
    --ink-700:#262626;
    --ink-500:#6b7280;     /* muted text */
    --card:#ffffff;
    --card-alpha:0.96;     /* solid card */
    --ring:#0ea5e9;
    --border:#d4dbe3;
    --table-stripe:#f8fafc;
  }
  
  /* ——— Base ——— */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    color:var(--ink-900);
    font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  
    background: url("bg.jpg") center/cover fixed no-repeat;
    position:relative;
  }
  body::before{
    /* light veil for readability over the photo */
    content:""; position:fixed; inset:0; pointer-events:none;
    background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.50));
    z-index:0;
  }
  
  /* ——— Header ——— */
  .header{
    position:sticky;top:0;z-index:2;
    background:rgba(255,255,255,.9);
    border-bottom:1px solid var(--border);
    backdrop-filter:saturate(140%) blur(6px)
  }
  .header-inner{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;gap:14px;align-items:center}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:28px;color:var(--ink-900)}
  .brand img{width:30px;height:30px}
  .tagline{margin-left:8px}
  
  /* ——— Layout ——— */
  .container{position:relative;z-index:1;max-width:1200px;margin:28px auto;padding:0 16px}
  .card{
    background:rgba(255,255,255,var(--card-alpha));
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 10px 30px rgba(2,132,199,.10);
    padding:22px
  }
  .card + .card{margin-top:24px}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
  @media (max-width:900px){.grid{grid-template-columns:1fr}}
  
  /* ——— Typography ——— */
  h2{margin:0 0 8px;font-size:28px;color:var(--ink-900)}
  h3{margin:18px 0 10px;font-size:18px;color:var(--ink-900)}
  label{display:block;font-weight:700;margin:0 0 6px;color:var(--ink-900)}
  .req{color:#b91c1c}
  .muted{color:var(--ink-500);font-size:.94rem}
  
  /* ——— Inputs ——— */
  input,select,button{font:inherit}
  input,select,textarea{
    width:100%;
    padding:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    color:var(--ink-900);
    outline:none;
    transition:border-color .15s, box-shadow .15s
  }
  input::placeholder{color:#8a94a0}
  input:focus,select:focus,textarea:focus{
    border-color:var(--ring);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent)
  }
  .field.small{max-width:320px}
  
  /* ——— Phone field (single combined control) ——— */
  .phone-row{display:flex;gap:8px}
  .phone-row select{max-width:220px}
  @media (max-width:520px){
    .phone-row{flex-direction:column}
    .phone-row select{max-width:100%}
  }
  
  /* ——— Consent & errors ——— */
  .consent{
    display:flex;
    gap:8px;                 /* tighter */
    align-items:flex-start;  /* aligns with first line of text */
    font-size:.95rem;
    color:var(--ink-900);
    margin:10px 0;
    line-height:1.35;
  }
  .consent input{margin-top:3px}  /* nudge checkbox closer to text */
  .error{color:#b91c1c;font-weight:700;margin:10px 0}
  
  /* ——— Buttons ——— */
  button{
    padding:12px 16px;border-radius:10px;border:1px solid transparent;
    background:var(--sea-500);color:#fff;font-weight:700;cursor:pointer;
    box-shadow:0 6px 14px rgba(14,165,233,.22)
  }
  button:hover{background:var(--sea-600)}
  button:disabled{opacity:.55;cursor:not-allowed}
  
  /* ——— Results ——— */
  .status-chip{
    display:inline-block;padding:.25rem .6rem;border-radius:999px;
    background:var(--sea-100);color:#065986;font-weight:800;border:1px solid var(--sea-200)
  }
  .table{
    width:100%;border-collapse:collapse;margin-top:10px;
    border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff
  }
  .table th,.table td{
    text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--ink-900)
  }
  .table thead th{background:var(--sea-50);font-weight:800}
  .table tbody tr:nth-child(even){background:var(--table-stripe)}
  
  /* ——— Footer ——— */
  footer{color:var(--ink-500);font-size:.92rem;text-align:center;padding:24px 0}
  .hidden{display:none}