:root {
      --navy: #102a43;
      --blue: #0f6cbb;
      --blue-dark: #07559a;
      --sky: #eaf7ff;
      --green: #08a97a;
      --mint: #e6fbf2;
      --orange: #ff9b51;
      --yellow: #ffd86a;
      --text: #43596a;
      --muted: #5e7183;
      --white: #ffffff;
      --border: #dce8ef;
      --shadow: 0 20px 55px rgba(16, 42, 67, 0.13);
    }
* {
      box-sizing: border-box;
    }
html {
      scroll-behavior: smooth;
    }
body {
      min-height: 100vh;
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 10% 10%, rgba(255, 216, 106, 0.42), transparent 22%),
        radial-gradient(circle at 94% 88%, rgba(77, 215, 172, 0.25), transparent 23%),
        linear-gradient(135deg, #eaf8ff, #f9fdff 45%, #effcf6);
      font-family: "Prompt", sans-serif;
    }
a {
      color: inherit;
      text-decoration: none;
    }
.container {
      width: min(1100px, calc(100% - 36px));
      margin: 0 auto;
    }
.navbar {
      padding: 20px 0;
    }
.nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
    }
.brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--navy);
      font-family: "Kanit", sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
    }
.brand-mark {
      display: grid;
      width: 43px;
      height: 43px;
      place-items: center;
      border-radius: 14px;
      color: var(--white);
      background: linear-gradient(135deg, var(--blue), #3cc0ed);
      box-shadow: 0 8px 18px rgba(15, 108, 187, 0.3);
    }
.nav-contact {
      color: var(--blue);
      font-size: 0.88rem;
      font-weight: 600;
    }
.page-content {
      padding: 20px 0 72px;
    }
.quote-wrapper {
      display: grid;
      grid-template-columns: 0.88fr 1.12fr;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 32px;
      background: var(--white);
      box-shadow: var(--shadow);
    }
.intro-panel {
      position: relative;
      overflow: hidden;
      padding: 55px 48px;
      color: var(--white);
      background: linear-gradient(145deg, #0e639f, #159ad0);
    }
.intro-panel::before {
      position: absolute;
      top: -80px;
      right: -90px;
      width: 270px;
      height: 270px;
      content: "";
      border: 38px solid rgba(255, 255, 255, 0.12);
      border-radius: 50%;
    }
.intro-panel::after {
      position: absolute;
      bottom: -110px;
      left: -85px;
      width: 250px;
      height: 250px;
      content: "";
      border-radius: 50%;
      background: rgba(255, 216, 106, 0.19);
    }
.intro-content {
      position: relative;
      z-index: 1;
    }
.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #d7f4ff;
      font-size: 0.84rem;
      font-weight: 600;
      letter-spacing: 0.4px;
    }
.eyebrow::before {
      width: 27px;
      height: 3px;
      content: "";
      border-radius: 5px;
      background: var(--yellow);
    }
h1 {
      margin: 14px 0 16px;
      font-family: "Kanit", sans-serif;
      font-size: clamp(2rem, 4vw, 3.15rem);
      line-height: 1.2;
    }
.intro-description {
      margin-bottom: 30px;
      color: rgba(255, 255, 255, 0.86);
      font-size: 0.96rem;
      line-height: 1.8;
    }
.benefit-list {
      display: grid;
      gap: 13px;
      padding: 0;
      margin: 0;
      list-style: none;
    }
.benefit-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(255, 255, 255, 0.93);
      font-size: 0.88rem;
    }
.check-icon {
      display: grid;
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      place-items: center;
      border-radius: 50%;
      color: var(--blue-dark);
      background: var(--yellow);
      font-size: 0.73rem;
      font-weight: 700;
    }
.info-notice {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 34px;
      padding: 15px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.11);
    }
.info-notice p {
      margin: 0;
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.75rem;
      line-height: 1.65;
    }
.form-panel {
      padding: 45px 48px;
    }
.form-panel h2 {
      margin: 0 0 3px;
      color: var(--navy);
      font-family: "Kanit", sans-serif;
      font-size: 1.7rem;
    }
.form-panel > p {
      margin: 0 0 27px;
      color: var(--muted);
      font-size: 0.85rem;
    }
.form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 17px;
    }
.form-group {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
.form-group.full {
      grid-column: span 2;
    }
label {
      color: var(--navy);
      font-size: 0.84rem;
      font-weight: 600;
    }
.required {
      color: #cc3b3b;
    }
input,
    select,
    textarea {
      width: 100%;
      padding: 12px 13px;
      outline: none;
      border: 1px solid var(--border);
      border-radius: 11px;
      color: var(--text);
      background: #ffffff;
      font-family: inherit;
      font-size: 0.88rem;
      transition: 0.2s ease;
    }
textarea {
      min-height: 95px;
      resize: vertical;
    }
input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(15, 108, 187, 0.14);
    }

/* ── โลโก้ 2ProviGroup บนแถบหัวของหน้าฟอร์ม ── */
.brand-mark{background:none;border-radius:50%;padding:0;overflow:hidden;
  box-shadow:0 6px 18px -8px rgba(11,74,143,.5)}
.brand-mark img{width:100%;height:100%;display:block;object-fit:contain}

/* ══════════════════════════════════════════════════════════════
   โหมดมืด — เพิ่มภายหลังให้หน้าฟอร์ม (quote / join) เข้ากับทั้งเว็บ
   ตัวแปรชุดนี้ทับค่าที่ :root ด้านบน เมื่อ <html data-theme="dark">
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --navy: #eaf3ff;
  --text: #c2d5ee;
  --muted: #93aacb;
  --white: #0c1e3b;
  --border: #22365c;
  --shadow: 0 22px 55px -24px rgba(0, 0, 0, .72);
}
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 10%, rgba(43, 139, 242, .14), transparent 24%),
    radial-gradient(circle at 94% 88%, rgba(52, 211, 153, .10), transparent 24%),
    linear-gradient(135deg, #040d1e, #07152c 45%, #06122a);
}
[data-theme="dark"] .quote-wrapper { border-color: rgba(255, 255, 255, .06); }
/* แผงฟ้าด้านซ้ายเข้มลงเล็กน้อยให้เข้ากับพื้นมืด (ตัวหนังสือขาวอยู่แล้ว) */
[data-theme="dark"] .intro-panel { background: linear-gradient(145deg, #0a4a78, #0d6ca0); }
/* ช่องกรอก: พื้นเข้ม ตัวอักษรสว่าง เส้นขอบเข้ม */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #0a1830;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6b8099; }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .18);
}
[data-theme="dark"] .required { color: #ff8585; }