/* ═══════════════════════════════════════
   DEEPROM SALES — main.css
   ใช้ร่วมกันทุกหน้า
═══════════════════════════════════════ */


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

:root {
  --white: #fff;
  --bg: #f7f8fa;
  --bg2: #eef0f4;
  --text: #1a1d23;
  --text2: #5a6070;
  --text3: #9aa0b0;
  --blue: #1a6cff;
  --blue-dark: #0A2A6B;
  --blue-light: #e8f0ff;
  --blue-mid: #b8ceff;
  --green: #06c755;
  --green-light: #e6f9ee;
  --red: #e53935;
  --red-light: #fdecea;
  --border: #e2e5ec;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 2px 12px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Kanit', 'Montserrat', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  overflow-x: hidden;
}

/* ── BUTTONS ── */
.btn-main {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff;
  padding: 12px 24px; border-radius: 10px;
  text-decoration: none; font-weight: 500; font-size: 0.95rem;
  border: none; cursor: pointer; font-family: 'Kanit', sans-serif;
  transition: opacity 0.2s, transform 0.2s;
}
.btn-main:hover { opacity: 0.88; transform: translateY(-2px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--text);
  padding: 12px 24px; border-radius: 10px;
  text-decoration: none; font-weight: 400; font-size: 0.95rem;
  border: 1.5px solid var(--border); cursor: pointer; font-family: 'Kanit', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.btn-outline:hover { border-color: #b0b8cc; box-shadow: var(--shadow); }

.btn-line {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green); color: #fff;
  padding: 10px 18px; border-radius: 9px;
  text-decoration: none; font-weight: 500; font-size: 0.9rem;
  border: none; cursor: pointer; font-family: 'Kanit', sans-serif;
  transition: opacity 0.2s;
}
.btn-line:hover { opacity: 0.88; }

.btn-phone {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-light); color: var(--blue);
  padding: 10px 18px; border-radius: 9px;
  text-decoration: none; font-weight: 500; font-size: 0.9rem;
  border: 1px solid var(--blue-mid); cursor: pointer; font-family: 'Kanit', sans-serif;
  transition: background 0.2s;
}
.btn-phone:hover { background: var(--blue-mid); }

/* ── SECTION ── */
.sec-wrap { max-width: 1100px; margin: 0 auto; }
.sec-eyebrow {
  font-size: 0.75rem; font-weight: 600; color: var(--blue);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.4rem;
}
.sec-title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700; margin-bottom: 0.4rem; letter-spacing: -0.3px;
}
.sec-sub {
  color: var(--text2); font-size: 0.95rem; font-weight: 300;
  max-width: 480px; margin-bottom: 2.5rem;
}

/* ── REVEAL ANIMATION ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.on { opacity: 1; transform: translateY(0); }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--text); color: #fff;
  padding: 12px 20px; border-radius: 10px;
  font-size: 0.9rem; z-index: 9999;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #059040; }
.toast.error { background: var(--red); }