/* ================================================
   TOPSPACE — Global Styles · Luxury Edition
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@200;300;400;500;600;700&display=swap');

/* ================================================
   CSS Variables — Top Space · Light + Royal Purple
   Brand purple sampled from logo: #500080
   Fonts: Anuphan — minimal, elegant Thai + Latin sans
          (one family, vary weight/size — clean & luxe)
   ================================================ */
:root {
  --font:        'Anuphan', system-ui, -apple-system, sans-serif;
  --font-serif:  'Anuphan', system-ui, -apple-system, sans-serif;

  /* Backgrounds — warm light base */
  --bg-0:        #FFFFFF;
  --bg-1:        #F6F7F9;   /* neutral cool off-white (gray, ไม่ติดม่วง) */
  --bg-2:        #ECEEF1;   /* neutral light gray section (ไม่ติดม่วง) */
  --bg-pur:      #2C0A46;   /* deep royal purple — dark sections */
  --bg-pur2:     #1C0430;   /* darker purple */
  --bg-card:     #FFFFFF;

  /* Brand — Royal Purple (from logo) */
  --pur:         #500080;   /* brand */
  --pur-2:       #62109A;   /* hover / richer */
  --pur-3:       #7E2CB8;   /* light-mid accent */
  --pur-l:       #B98FD9;   /* light lavender */
  --pur-faint:   rgba(28,25,45,.05);   /* พื้นอ่อน = เทากลาง ไม่ใช่ม่วงจาง */

  /* Secondary — Champagne / Bronze (used sparingly) */
  --gold:        #62109A;   /* bronze — text-safe on light */
  --gold-2:      #7E2CB8;
  --gold-3:      #9A5CC9;   /* light champagne — shimmer on dark */

  /* Text — near-black, faint purple warmth */
  --tx-1:        #241B2E;
  --tx-2:        #574C63;
  --tx-3:        #8B8199;
  --tx-inv:      #FFFFFF;

  /* Borders */
  --bd-0:        rgba(80,0,128,.08);
  --bd-1:        rgba(80,0,128,.15);
  --bd-gold:     rgba(80,0,128,.26);
  --bd-white:    rgba(255,255,255,.14);

  /* Shadows */
  --sh-xs:       0 1px 6px rgba(36,27,46,.05);
  --sh-sm:       0 2px 16px rgba(80,0,128,.07);
  --sh-md:       0 6px 32px rgba(80,0,128,.10);
  --sh-lg:       0 12px 56px rgba(80,0,128,.14);
  --sh-gold:     0 4px 28px rgba(80,0,128,.18);

  /* Border Radius */
  --r-xs:        4px;
  --r-sm:        8px;
  --r-md:        12px;
  --r-lg:        16px;
  --r-xl:        20px;
  --r-2xl:       28px;

  /* Z-index */
  --z-card:      10;
  --z-drop:      20;
  --z-nav:       30;
  --z-overlay:   40;

  /* Transitions */
  --t1:          150ms ease;
  --t2:          240ms ease;
  --t3:          400ms ease;

  /* Section spacing — บรีฟ v4 ข้อ 4: กระชับขึ้น (24 ก.ค.) + กระชับรอบ 2 (25 ก.ค.) + รอบ 3 (25 ก.ค. — เจมส์บอกยัง "ห่างๆกันอยู่") */
  --sec-pad:     1.75rem;
  --sec-pad-lg:  2.5rem;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--tx-1);
  line-height: 1.65;
  overflow-x: hidden;
  padding-top: 72px; /* เผื่อ header บาร์คาดยาว (fixed) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }
strong { font-weight: 600; }

/* ===== Container ===== */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) { .container { padding: 0 2.5rem; } }
@media (min-width: 1280px) { .container { padding: 0 2rem; } }

/* ===== Section spacing ===== */
.section    { padding: var(--sec-pad) 0; }
.section-lg { padding: var(--sec-pad-lg) 0; }
.section-sm { padding: 1.75rem 0; }
@media (min-width: 768px) {
  :root { --sec-pad: 2.25rem; --sec-pad-lg: 3rem; }
  .section-sm { padding: 1.85rem 0; }
}

/* ===== Dark section ===== */
.sec-dark  { background: var(--bg-pur); }
.sec-dark2 { background: var(--bg-pur2); }
.sec-cream { background: var(--bg-1); }
.sec-cream2{ background: var(--bg-2); }

/* ===== Grids ===== */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2,1fr); } }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3,1fr); } }

.grid-4 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4,1fr); } }

/* ===== Section header ===== */
/* 25 ก.ค.: ลด margin-bottom ให้แต่ละ section กระชับขึ้น (เจมส์บอกยังดูห่างกันอยู่) */
.sec-head      { text-align: center; margin-bottom: 2.25rem; }
.sec-head-left { text-align: left;   margin-bottom: 1.75rem; }

.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pur);
  margin-bottom: 0.85rem;
}
.sec-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.sec-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  letter-spacing: -0.01em;
  color: var(--tx-1);
  margin-bottom: 1.1rem;
}
.sec-title-inv { color: #FFFFFF; }

.sec-sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--tx-2);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.8;
}
.sec-sub-inv { color: rgba(255,255,255,.65); max-width: 560px; }

/* ===== Accent text ===== */
.grad-gold {
  color: var(--pur-2); -webkit-text-fill-color: currentColor;
}
.grad-pur {
  color: var(--pur); -webkit-text-fill-color: currentColor;
}
/* grad-gold sits on medium-purple banners in a few places → force light lavender so it stays legible */
.cta-banner-title .grad-gold { background: none; -webkit-text-fill-color: #E4D3F5; background-clip: border-box; -webkit-background-clip: border-box; color: #E4D3F5; }
.sec-title-inv .grad-gold { -webkit-text-fill-color:#E4D3F5; color:#E4D3F5; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  width: fit-content;
  align-self: flex-start;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: pointer;
  transition: all var(--t2);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn svg { flex-shrink: 0; }

/* Gold (primary) */
.btn-gold {
  background: var(--gold);
  color: #FFFFFF;
  border-color: var(--gold);
  box-shadow: var(--sh-gold);
  font-weight: 600;
}
.btn-gold:hover {
  background: var(--gold-2);
  border-color: var(--gold-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(80,0,128,.22);
  color: #FFFFFF;
}

/* Purple (primary alt) */
.btn-primary {
  background: var(--pur);
  color: #FFFFFF;
  border-color: var(--pur);
  font-weight: 600;
  box-shadow: 0 4px 24px rgba(61,42,107,.22);
}
.btn-primary:hover {
  background: var(--pur-2);
  border-color: var(--pur-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(61,42,107,.2);
  color: #FFFFFF;
}

/* Outline purple */
.btn-outline {
  background: transparent;
  color: var(--pur);
  border-color: rgba(61,42,107,.3);
}
.btn-outline:hover {
  background: var(--pur);
  color: #FFFFFF;
  border-color: var(--pur);
  transform: translateY(-2px);
}

/* Outline gold */
.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border-color: var(--bd-gold);
}
.btn-outline-gold:hover {
  background: var(--gold);
  color: #FFFFFF;
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* Outline white (on dark bg) */
.btn-outline-white {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255,255,255,.35);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.1);
  color: #FFFFFF;
  border-color: rgba(255,255,255,.6);
}

/* Ghost */
.btn-ghost {
  background: rgba(61,42,107,.05);
  color: var(--tx-2);
  border-color: var(--bd-0);
}
.btn-ghost:hover { background: rgba(61,42,107,.1); color: var(--tx-1); }

.btn-sm  { padding: 0.55rem 1.125rem; font-size: 0.78rem; }
.btn-lg  { padding: 1rem 2.375rem; font-size: 0.9375rem; }
.btn-xl  { padding: 1.15rem 3rem; font-size: 1rem; }

/* ===== Arrow link ===== */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold);
  transition: gap var(--t2);
  cursor: pointer;
}
.link-arrow:hover { gap: 0.625rem; }
.link-arrow-white { color: rgba(255,255,255,.8); }
.link-arrow-white:hover { color: #FFFFFF; }

/* ===== Badges ===== */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.22rem 0.75rem;
  border-radius: 100px;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.badge-gold   { background: rgba(80,0,128,.15);  color: var(--gold-2); border: 1px solid rgba(80,0,128,.4); }
.badge-pur    { background: rgba(61,42,107,.08);   color: var(--pur);   border: 1px solid var(--bd-0); }
.badge-green  { background: rgba(16,185,129,.15);  color: #10B981;      border: 1px solid rgba(16,185,129,.35); }
.badge-red    { background: rgba(220,38,38,.08);   color: #DC2626;      border: 1px solid rgba(220,38,38,.15); }
.badge-white  { background: rgba(255,255,255,.15); color: #FFFFFF;      border: 1px solid rgba(255,255,255,.25); }
.badge-cyan   { background: rgba(255,255,255,.92); color: var(--pur);   border: 1px solid rgba(255,255,255,.6); }
.badge-purple { background: rgba(167,139,250,.18); color: #C4B5FD;      border: 1px solid rgba(167,139,250,.4); }

/* ===== Forms ===== */
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2,1fr); } }
.form-group { margin-bottom: 1.375rem; }
.form-label {
  display: block; font-size: 0.68rem; font-weight: 600;
  color: var(--tx-2); margin-bottom: 0.5rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.form-input {
  width: 100%; padding: 0.875rem 1.125rem;
  background: var(--bg-1);
  border: 1.5px solid var(--bd-0);
  border-radius: var(--r-sm);
  color: var(--tx-1); font-family: var(--font);
  font-size: 0.9rem; font-weight: 400; transition: all var(--t2);
}
.form-input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(80,0,128,.1);
  background: var(--bg-0);
}
.form-input::placeholder { color: var(--tx-3); }
textarea.form-input { resize: vertical; min-height: 140px; }
select.form-input { cursor: pointer; }

/* ===== Dividers ===== */
.divider-gold { height: 1px; background: linear-gradient(90deg,transparent,var(--gold),transparent); border: none; opacity:.3; }
.divider      { height: 1px; background: var(--bd-0); border: none; }

/* ===== BG utilities ===== */
.bg-cream  { background: var(--bg-1); }
.bg-cream2 { background: var(--bg-2); }
.bg-dark   { background: var(--bg-pur); }
.bg-darker { background: var(--bg-pur2); }

/* ===== Fade-in animation ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-up   { animation: fadeUp  0.6s ease both; }
.anim-in   { animation: fadeIn  0.5s ease both; }

[data-anim] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-anim].visible { opacity: 1; transform: translateY(0); }

/* ===== Focus visible — keyboard accessibility ===== */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}