/**
 * บ้านสาธิต — Sales Page
 *
 * Values come from the printed Brand Board, same as the app's tokens. The
 * information architecture follows the early concept board's landing layout
 * (nav · hero · why · categories · how · FAQ), re-skinned to the current
 * brand — that board predates the rename, so its logo, wordmark and palette
 * are not used.
 *
 * No build step on purpose: this page's job is to load fast for someone who
 * has never heard of us, on a phone, on mobile data.
 */

/* ---- fonts: the same three weights the app ships ---- */
@font-face {
  font-family: 'Prompt';
  src: url('assets/fonts/Prompt-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Prompt';
  src: url('assets/fonts/Prompt-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Prompt';
  src: url('assets/fonts/Prompt-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Anuphan';
  src: url('assets/fonts/Anuphan-Variable.woff2') format('woff2-variations');
  font-weight: 100 700; font-style: normal; font-display: swap;
}

:root {
  --sky-100:#EAF5FF; --sky-200:#C8E5FF; --sky-300:#96CEFF;
  --sky-500:#2D9CFF; --sky-600:#2785DA; --sky-700:#2069AD;
  --sun-100:#FFFAEC; --sun-300:#FFE49E; --sun-500:#FFC83D; --sun-700:#A78530;
  --coral-100:#FFF0F2; --coral-500:#FF6B7D; --coral-700:#A74A59;
  --mint-100:#EBFBF5; --mint-500:#34D399; --mint-700:#258C6B;
  --grape-100:#F5F0FF; --grape-500:#9B6CFF; --grape-700:#674AAD;

  --sky0-50:#F5FAFF; --sky0-100:#E6F4FF; --sky0-200:#CFE8FA;
  --cream:#FFF9E6; --cloud:#F1F5F9; --navy:#1E3A8A; --white:#FFFFFF;
  --ink:#4B5563; --ink-soft:#6B7688; --ink-faint:#9AA3B2;

  --radius-chunky:24px; --radius-tile:16px; --radius-pill:999px;
  --shadow-card:0 10px 30px -12px rgba(61,58,78,.28);
  --shadow-float:0 18px 40px -16px rgba(61,58,78,.35);
  --ease-out:cubic-bezier(0,0,.2,1);
}

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

html {
  font-size: clamp(15px, .55vw + 13.6px, 18px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--sky0-100);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-weight: 700; text-wrap: balance; margin: 0; line-height: 1.25; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .wrap { padding-inline: 24px; } }

/* ---- the sky everything sits in ---- */
/* The sun is baked into the sky rather than being its own element: at some
   widths a positioned sun lands behind the mascots' heads and reads as an
   accident. As a soft glow in the gradient it is atmosphere, and it can never
   collide with anything. */
.sky {
  position: relative;
  background:
    radial-gradient(circle 220px at 88% 90px, rgba(255,200,61,.55), rgba(255,200,61,0) 70%),
    linear-gradient(to bottom, #A9D8FF 0%, var(--sky0-100) 55%, var(--sky0-50) 100%);
  overflow: hidden;
}
.sky::after {
  /* the board's bank of soft clouds along the bottom */
  content: '';
  position: absolute; inset-inline: 0; bottom: -1px; height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'%3E%3Cpath d='M0 150 Q90 96 190 132 Q250 78 350 118 Q430 70 520 120 Q610 76 700 124 Q790 80 880 126 Q970 84 1060 130 Q1140 100 1200 140 L1200 240 L0 240 Z' fill='%23fff' opacity='.55'/%3E%3Cpath d='M0 190 Q100 146 200 176 Q280 132 380 170 Q470 130 560 172 Q660 134 760 176 Q860 140 960 180 Q1070 150 1200 184 L1200 240 L0 240 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sky-100);
}
.nav .wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.nav__logo img { width: 156px; }
.nav__links { display: none; gap: 22px; margin-inline: auto; }
.nav__links a { text-decoration: none; font-weight: 600; color: var(--ink-soft); font-size: .95rem; }
.nav__links a:hover { color: var(--sky-700); }
.nav__cta { display: flex; gap: 10px; margin-inline-start: auto; }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { margin-inline-start: 0; }
}

/* ---- chunky pressable buttons: the hard bottom edge is the brand's ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding-inline: 22px;
  border: 0; border-radius: var(--radius-chunky);
  font-family: inherit; font-size: 1rem; font-weight: 700; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform .1s var(--ease-out), box-shadow .1s var(--ease-out);
}
.btn--sky { background: var(--sky-500); color: #fff; box-shadow: 0 6px 0 0 var(--sky-700); }
.btn--white { background: #fff; color: var(--ink); box-shadow: 0 6px 0 0 #CBD5E1; }
.btn--mint { background: var(--mint-500); color: #fff; box-shadow: 0 6px 0 0 var(--mint-700); }
.btn:active { transform: translateY(6px); box-shadow: none; }
.btn--sm { min-height: 44px; padding-inline: 18px; font-size: .95rem; box-shadow: 0 4px 0 0 var(--sky-700); }
.btn--sm.btn--white { box-shadow: 0 4px 0 0 #CBD5E1; }
.btn--sm:active { transform: translateY(4px); }
.btn--lg { min-height: 60px; padding-inline: 32px; font-size: 1.1rem; }

/* ---- hero ---- */
.hero .wrap { display: grid; gap: 28px; padding-block: 48px 96px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; align-self: start;
  background: var(--sun-300); color: #6b5410;
  border-radius: var(--radius-pill); padding: 7px 16px;
  font-size: .85rem; font-weight: 700;
}
.hero h1 { font-size: clamp(1.9rem, 5.2vw, 3.1rem); }
.hero__lead { font-family: 'Anuphan', 'Prompt', sans-serif; font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__art { position: relative; justify-self: center; max-width: 380px; }
.hero__art img { filter: drop-shadow(0 18px 28px rgba(31,58,138,.18)); }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1.05fr .95fr; align-items: center; padding-block: 64px 120px; }
  .hero__art { max-width: 460px; }
}

/* ---- trust strip ---- */
.trust { display: flex; flex-wrap: wrap; gap: 10px; }
.trust span {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.92); border-radius: var(--radius-pill);
  padding: 8px 15px; font-size: .88rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 4px 0 0 rgba(203,213,225,.7);
}

/* ---- generic section ---- */
.section { padding-block: 64px; }
.section--tint { background: var(--white); }
.section__head { text-align: center; max-width: 42rem; margin-inline: auto; margin-bottom: 40px; }
.section__head h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
.section__head p { margin-top: 12px; color: var(--ink-soft); font-family: 'Anuphan','Prompt',sans-serif; line-height: 1.6; }

/* ---- cards ---- */
.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid { gap: 20px; } }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: #fff; border-radius: var(--radius-chunky);
  padding: 22px; box-shadow: var(--shadow-card);
}
.card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-tile);
  display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 14px;
}
.card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-family: 'Anuphan','Prompt',sans-serif; line-height: 1.62; font-size: .97rem; }

.i-sky { background: var(--sky-100); } .i-sun { background: var(--sun-100); }
.i-coral { background: var(--coral-100); } .i-mint { background: var(--mint-100); }
.i-grape { background: var(--grape-100); }

/* ---- the eleven question families ---- */
.skills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.skills li {
  list-style: none;
  background: #fff; border-radius: var(--radius-pill);
  padding: 11px 19px; font-weight: 600; font-size: .96rem;
  box-shadow: 0 4px 0 0 var(--sky0-200);
}

/* ---- steps ---- */
.steps { counter-reset: step; }
.step { position: relative; padding-inline-start: 62px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; inset-inline-start: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sky-500); color: #fff; font-weight: 700; font-size: 1.15rem;
  box-shadow: 0 4px 0 0 var(--sky-700);
}
.step h3 { font-size: 1.1rem; margin-bottom: 6px; padding-top: 8px; }
.step p { color: var(--ink-soft); font-family: 'Anuphan','Prompt',sans-serif; line-height: 1.62; }

/* ---- FAQ ---- */
.faq { max-width: 48rem; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  background: #fff; border-radius: var(--radius-chunky);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 19px 22px;
  font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 12px;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-inline-start: auto; color: var(--sky-500);
  font-size: 1.5rem; line-height: 1; transition: transform .15s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p {
  padding: 0 22px 20px; color: var(--ink-soft);
  font-family: 'Anuphan','Prompt',sans-serif; line-height: 1.68;
}

/* ---- closing call to action ---- */
.cta { text-align: center; }
.cta__card {
  background: linear-gradient(160deg, var(--sky-500), #1f7fd4);
  border-radius: var(--radius-chunky); color: #fff;
  padding: 44px 24px; box-shadow: var(--shadow-float);
}
.cta__card h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
.cta__card p { margin: 14px auto 26px; max-width: 34rem; opacity: .94; font-family: 'Anuphan','Prompt',sans-serif; line-height: 1.6; }
.cta__mascot { max-width: 210px; margin: 0 auto 6px; }

/* ---- footer ---- */
.footer { background: #fff; padding-block: 40px; border-top: 1px solid var(--sky-100); }
.footer .wrap { display: grid; gap: 22px; }
.footer img { width: 168px; }
.footer__tag { color: var(--ink-soft); font-size: .95rem; margin-top: 10px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__links a { text-decoration: none; font-weight: 600; color: var(--ink-soft); font-size: .93rem; }
.footer__links a:hover { color: var(--sky-700); }
.footer__legal { color: var(--ink-faint); font-size: .85rem; }
@media (min-width: 720px) { .footer .wrap { grid-template-columns: 1fr auto; align-items: center; } }

/* A parent who turned motion down did not ask for a moving page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}