/* ═══════════════════════════════════════════════════════════════
   ACCDEE — style-v2.css  ·  ดีไซน์ใหม่ "พรีเมียม ไม่เหมือน AI"
   import ของเดิมมาก่อน แล้วเขียนทับเฉพาะจุดให้ประณีตขึ้น
   หลักการ (impeccable): คุมสีให้นิ่ง, เก็บ glow/gradient ให้มีวินัย,
   ลำดับชั้น + ระยะห่าง + ดีเทลที่ตั้งใจ = ดูเป็นงานมือโปร
   ═══════════════════════════════════════════════════════════════ */

@import url('style.css');

/* ── โทนสีกลาง: navy ลึกขึ้น อ่านง่ายขึ้น ขอบบางคม ───────────── */
:root {
  --bg-dark:      #060f1d;
  --bg-card:      #0b1a2e;
  --bg-card2:     #0e2138;
  --muted:        rgba(226, 238, 255, 0.70);
  --ink-soft:     rgba(226, 238, 255, 0.90);
  --border:       rgba(150, 185, 220, 0.14);
  --border-hover: rgba(0, 212, 255, 0.55);
  --shadow-glow:  0 0 0 1px rgba(0,212,255,0.05);
  --radius:       16px;
  --cyan:         #1ed0ff;
  --cyan-deep:    #00a8e0;
  --green-soft:   #2ee6a0;
  --elev:         0 22px 48px -26px rgba(0,0,0,0.85);
}

::selection { background: rgba(0,212,255,0.28); color: #fff; }

/* พื้นหลัง: แสงนุ่มด้านบน + ลายจุดบางมาก (ไม่รก) */
body {
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(1200px 560px at 50% -10%, rgba(0,212,255,0.12), transparent 70%),
    radial-gradient(900px 500px at 100% 0%, rgba(124,58,237,0.08), transparent 60%),
    radial-gradient(rgba(0,212,255,0.022) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px;
}

/* โฟกัสคีย์บอร์ด (เข้าถึงง่าย) */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ── NAV: กระจกใสคมขึ้น ───────────────────────────────────── */
nav {
  background: rgba(6,15,29,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: #fff; }
.nav-logo span { text-shadow: 0 0 10px rgba(0,212,255,0.4); }

/* ── ALERT/MARQUEE: ช้าลง ดูพรีเมียมไม่วับวาบ ─────────────── */
.alert-banner { animation-duration: 9s; letter-spacing: 0.6px; }
.marquee-track { animation-duration: 46s; }

/* ── HERO CTA BAR: ปุ่มทรงพรีเมียม ───────────────────────── */
.hero-cta-bar {
  background: linear-gradient(180deg, rgba(6,15,29,0) 0%, var(--bg-dark) 60%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 26px 16px;
}
.btn-hero {
  padding: 13px 30px;
  font-size: 0.92rem;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.hc-dot.active { background: var(--cyan); }

/* ── STATS BAR: สะอาด มีระดับ ────────────────────────────── */
.stats-bar {
  background: linear-gradient(180deg, #0a1626 0%, #081222 100%);
  border-color: rgba(255,255,255,0.06);
}
.stat-item {
  padding: 20px 30px;
  border-right: 1px solid rgba(255,255,255,0.05);
  transition: background 0.25s ease;
}
.stat-item:hover { background: rgba(0,212,255,0.04); }
.stat-num {
  font-family: 'Sarabun', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: #eafff6;
  text-shadow: none;
}
.stat-label { color: var(--muted); letter-spacing: 0.2px; }

/* ── SECTION HEADER: หัวข้อคม จังหวะดี ────────────────────── */
.section { padding: 80px 24px; }
.section-header { margin-bottom: 48px; }
.section-tag {
  box-shadow: none;
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.12);
  color: var(--ink-soft);
  letter-spacing: 2px;
  font-weight: 600;
  padding: 5px 15px;
}
.section-title {
  font-family: 'Sarabun', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: #f4f9ff;
  -webkit-text-fill-color: #f4f9ff;
  background: none;
  text-wrap: balance;
}
.section-title::after { display: none; }
.section-desc { color: var(--muted); font-size: 0.96rem; max-width: 560px; }

/* ── CATEGORY TABS: pill เรียบ มีวินัย ────────────────────── */
.cat-tab {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
  color: var(--muted);
  padding: 8px 20px;
}
.cat-tab:hover, .cat-tab.active {
  background: rgba(0,212,255,0.12);
  border-color: rgba(0,212,255,0.55);
  color: #b6f0ff;
}

/* ── การ์ดสินค้า/ฟีเจอร์/ติดต่อ: ผิวเดียวกัน ขอบบาง ยกตัวนุ่ม ── */
.product-card, .feature-card, .contact-card, .hb-card, .review-card {
  background: linear-gradient(180deg, #0c1c31 0%, #091627 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
}
.product-card { position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0; transition: opacity .3s ease; z-index: 3;
}
.product-card:hover::before { opacity: 1; }
.product-card:hover,
.feature-card:hover,
.contact-card:hover,
.hb-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--elev);
  border-color: var(--border-hover);
}
.product-card.featured {
  border-color: rgba(0,212,255,0.4);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.2), var(--elev);
}
/* เอาเงาเรืองฟ้าจัดของเดิมออก แล้วใช้ความลึกแทน */
.product-card:hover { box-shadow: var(--elev); }

/* badge เป็นกระจกแทนสีจัด */
.pc-badge {
  backdrop-filter: blur(8px);
  background: rgba(6,15,29,0.6);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: none;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.pc-badge-blue   { color: #6fe0ff; }
.pc-badge-green  { color: var(--green-soft); }
.pc-badge-purple { color: #c9a3ff; }

.pc-body { padding: 18px 18px 18px; }
.pc-platform { letter-spacing: 2px; }
.product-name { font-size: 1rem; color: #f1f7ff; }
.product-desc { color: var(--muted); }
.product-footer { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 16px; }
.price-label { color: var(--muted); }

/* gradient/ขีดเส้น tag ให้เบาลง */
.tag { letter-spacing: 0.3px; font-weight: 700; }

/* ── ปุ่ม: สีฟ้าแบรนด์มีมิติ (เลิก gradient ม่วง + เลิก shimmer) ── */
.btn-primary, .buy-btn, .auth-btn, .hb-btn, .btn-hero.btn-primary {
  background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  color: #04121f;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 10px 22px -12px rgba(0,168,224,0.9);
}
.btn-primary:hover, .buy-btn:hover, .auth-btn:hover, .hb-btn:hover {
  opacity: 1; filter: brightness(1.07); transform: translateY(-1px);
}
.buy-btn::after, .auth-btn::after { display: none; content: none; animation: none; }
.btn-ghost { border-color: rgba(0,212,255,0.45); color: #aef0ff; background: transparent; }
.btn-ghost:hover { background: rgba(0,212,255,0.1); border-color: var(--cyan); }
/* ปุ่มติดต่อ (LINE ฯลฯ) คงเขียวแบรนด์ของมันไว้ — ไม่ทับ */
.contact-btn { color: #fff; }

/* ── ตัวเลข/ราคา: อ่านชัด ไม่โชว์ฟอนต์ ───────────────────── */
.price {
  font-family: 'Sarabun', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--green-soft);
  text-shadow: none;
}
.modal-price { font-family: 'Sarabun', sans-serif; text-shadow: none; color: var(--green-soft); }
.hb-budget { font-family: 'Sarabun', sans-serif; color: var(--green-soft); }

/* ── FEATURE CARD: ไอคอนเรียบ หัวข้อคม ───────────────────── */
.feature-card { border-top: 1px solid rgba(255,255,255,0.07); padding: 26px 22px; }
.feature-card:hover { border-top-color: rgba(0,212,255,0.4); }
.feature-icon {
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.22);
  border-radius: 14px;
}
.feature-card:hover .feature-icon { box-shadow: 0 0 0 4px rgba(0,212,255,0.08); }
.feature-title { color: #eaf6ff; font-size: 1rem; }
.feature-desc { color: var(--muted); }

/* ── CONTACT: ไอคอนเลิกฟุ้ง ───────────────────────────────── */
.contact-ico { filter: none; }
.contact-platform { color: var(--cyan); letter-spacing: 1px; }
.contact-handle { color: #f1f7ff; }

/* ── HIGH BUDGET: คุมโทนเขียวให้พอดี ──────────────────────── */
.hb-name { color: #f1f7ff; }
.hb-features span { color: var(--muted); }

/* ── DIVIDER + FOOTER ─────────────────────────────────────── */
.divider { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); }
footer { background: #050c17; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-col-title { color: var(--ink-soft); letter-spacing: 1.5px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--cyan); }
.made-with { color: rgba(0,212,255,0.55); }

/* ── REVIEWS ──────────────────────────────────────────────── */
.review-comment { color: var(--ink-soft); }
.review-stars { color: #ffc94d; }

/* ── MODAL: คมขึ้นนิด ─────────────────────────────────────── */
.modal, .auth-modal { border-color: rgba(255,255,255,0.09); }
.modal-title, .auth-logo { color: #f4f9ff; }

/* ── เคารพผู้ที่ปิดอนิเมชัน ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .alert-banner, .marquee-track, .buy-btn::after { animation: none; }
  .product-card, .feature-card, .contact-card, .hb-card { transition: none; }
}