/* Base theme */
:root{
  --gold:#D4AF37; --gold-2:#F0DA7D; --gold-deep:#9C7C1B;
  --txt: rgba(255,255,255,.92); --txt-soft: rgba(255,255,255,.78);
}
html{ scroll-behavior: smooth; }
body{ font-family:'Prompt', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans Thai', sans-serif; color: var(--txt); }

/* Background: black center → gold edges (lighter) + graphic layer */
.lux-bg{
  /* Deep charcoal with premium gold edges (left/right), still minimal */
  background-color:#0b0f14;
  background-image:
    linear-gradient(90deg,
      rgba(212,175,55,.22) 0%,
      rgba(212,175,55,.12) 3%,
      rgba(212,175,55,0) 10%,
      rgba(212,175,55,0) 90%,
      rgba(212,175,55,.12) 97%,
      rgba(212,175,55,.22) 100%),
    radial-gradient(900px 600px at -12% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 112% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  background-size:cover,cover,cover,cover;
  background-position:center center, center center, center center, center center;
  background-attachment:fixed,fixed,fixed,scroll;
}

/* Glass & header shrink */
.glass{ backdrop-filter: blur(10px); background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(212,175,55,.25); }
.site-header .shell{ transition: padding .25s ease; }
.site-header .logo-img{ width:44px; height:44px; transition: transform .25s ease, width .25s ease, height .25s ease; }
.site-header.shrink{ background: rgba(0,0,0,.55); border-bottom-color: rgba(212,175,55,.4); }
.site-header.shrink .shell{ padding-top: .6rem; padding-bottom: .6rem; }
.site-header.shrink .logo-img{ width:36px; height:36px; transform: translateY(-1px); }

/* Top bar and icons */
.topbar{ background: rgba(0,0,0,.28); border-bottom: 1px solid rgba(255,255,255,.08); color:var(--txt); }
.ico{ width:18px;height:18px;vertical-align:-2px; }
.ico-fb{ color:#1877F2; } .ico-mail{ color:#EA4335; } .ico-tel{ color:#2ECC71; } .ico-wa{ color:#25D366; } .ico-line{ color:#06C755; }

/* Cards / buttons / badges */
.shadow-lux{ box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.card{ border:1px solid rgba(212,175,55,.22); background: rgba(255,255,255,.055); backdrop-filter: blur(8px); }
.card:hover{ background: rgba(255,255,255,.075); transition: background .2s ease; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; border-radius:.75rem; border:1px solid rgba(212,175,55,.4); background: rgba(212,175,55,.06); transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.btn:hover{ background: rgba(212,175,55,.12); transform: translateY(-1px); }
.btn-gold{ border: 1px solid var(--gold); background: linear-gradient(180deg, var(--gold-2), var(--gold)); color:#1a1a1a; }
.badge{ font-size:.75rem; padding:.125rem .5rem; border-radius:.5rem; border:1px solid rgba(212,175,55,.35); color:#F5E6B3; }
.nav-btn{ border-radius:.75rem; }
.gold-link{ color: rgba(255,255,255,.85); border: 1px solid transparent; }
.gold-link:hover{ color:#fff; border-color: rgba(212,175,55,.45); background: rgba(255,255,255,.08); }
.gold-active{ color: #F5E6B3; position: relative; }
.gold-active::after{ content:""; display:block; height:2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep)); border-radius:999px; margin-top:.35rem; }

/* Premium CTA */
.btn-lux-gold{
  position: relative; display:inline-flex; align-items:center; gap:.55rem;
  padding:.78rem 1.15rem; border-radius:.9rem; font-weight:600; letter-spacing:.2px;
  border:1px solid var(--gold); color:#161616;
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(212,175,55,.18), 0 2px 6px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-lux-gold::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 35%); mix-blend-mode: screen; pointer-events:none; }
.btn-lux-gold:hover{ transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 28px rgba(212,175,55,.24), 0 4px 10px rgba(0,0,0,.3); }

/* Reveal animations */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s; will-change: opacity, transform; }
.reveal[data-anim="zoom"]{ transform: scale(.96); }
.reveal[data-anim="fade"]{ transform: none; }
.reveal[data-anim="up"]{ transform: translateY(16px); }
.reveal.is-visible{ opacity:1; transform: none; filter: none; }
.delay-100{ transition-delay: .10s; } .delay-200{ transition-delay: .20s; } .delay-300{ transition-delay: .30s; } .delay-400{ transition-delay: .40s; } .delay-500{ transition-delay: .50s; } .delay-600{ transition-delay: .60s; }

.contact-list li{display:flex; align-items:center; gap:.5rem;}


/* Dark premium gold footer */
.lux-footer{
  color: var(--txt);
  border-top: 1px solid rgba(212,175,55,.38);
  box-shadow: inset 0 1px 0 rgba(255,235,175,.08);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.20)),
    linear-gradient(90deg, #4A3A0F 0%, #2B2308 24%, #201a07 50%, #2B2308 76%, #4A3A0F 100%),
    radial-gradient(1000px 300px at 10% 0%, rgba(212,175,55,.18), rgba(212,175,55,0) 60%),
    radial-gradient(1000px 300px at 90% 0%, rgba(212,175,55,.18), rgba(212,175,55,0) 60%);
  background-blend-mode: normal, normal, screen, screen;
}
.lux-footer a{ color: rgba(255,255,255,.9); }
.lux-footer a:hover{ color:#fff; text-decoration: underline; }



/* === CNC premium callout (final) === */
.cnc-callout{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  margin:12px 0 18px 0;
  background: linear-gradient(90deg, rgba(212,175,55,.12), rgba(212,175,55,.05));
  border:1px solid rgba(212,175,55,.35);
  border-radius:14px;
  box-shadow: 0 12px 38px rgba(0,0,0,.26), inset 0 0 28px rgba(212,175,55,.08);
}
.cnc-callout .cnc-bar{
  width:6px; height:100%;
  border-radius:999px;
  background: linear-gradient(#fff5c8,#f2da8a,#e8c86b,#d4af37,#b98e1e);
  display:inline-block;
}
.cnc-callout .cnc-text{
  color:#f3e5a5;
  font-weight:700;
  letter-spacing:.2px;
}
@media (max-width: 768px){
  .cnc-callout{ padding:12px 14px; border-radius:12px; }
}



/* === Colorful contact badges in footer (balanced) === */
.contact-badge{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25), inset 0 0 8px rgba(255,255,255,.12)}
.badge-mail{background:#EA4335}
.badge-fb{background:#1877F2}
.badge-line{background:#06C755}
.badge-tiktok{background:linear-gradient(135deg,#25F4EE 0%,#000 50%,#FE2C55 100%)}
@media (max-width:768px){.contact-badge{width:26px;height:26px;border-radius:7px}}


/* Topbar TikTok tint */
.ico-tiktok{ color:#FE2C55; }