/* =========================================================
   WEBUNIQUE — MAIN STYLESHEET
   โครงสร้างสี, ฟอนต์, และองค์ประกอบที่ใช้ร่วมกันทุกหน้า
   (site_ = องค์ประกอบร่วม, ใช้ prefix ของหน้านั้นๆ สำหรับเนื้อหาเฉพาะหน้า)
   ========================================================= */
@font-face {
    font-family: 'LINE Seed Sans TH';
    src: url('../fonts/LINESeedSansTH_W_Th.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

/* Regular */
@font-face {
    font-family: 'LINE Seed Sans TH';
    src: url('../fonts/LINESeedSansTH_W_Rg.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'LINE Seed Sans TH';
    src: url('../fonts/LINESeedSansTH_W_Bd.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* Extra Bold */
@font-face {
    font-family: 'LINE Seed Sans TH';
    src: url('../fonts/LINESeedSansTH_W_XBd.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

/* Heavy */
@font-face {
    font-family: 'LINE Seed Sans TH';
    src: url('../fonts/LINESeedSansTH_W_He.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}
:root{
  --bg:            #08070d;
  --bg-alt:        #0d0c15;
  --surface:       #131220;
  --surface-2:     #1a182b;
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);

  --text-1: #f4f3f8;
  --text-2: #b7b4c6;
  --text-3: #7d7a91;

  --violet: #8b5cf6;
  --blue:   #3aa5ff;
  --pink:   #ec4899;

  --grad-main:  linear-gradient(95deg, var(--violet) 0%, #6366f1 45%, var(--blue) 100%);
  --grad-text:  linear-gradient(95deg, #c4b5fd 0%, #93c5fd 100%);
  --grad-glow:  radial-gradient(circle, rgba(139,92,246,.35) 0%, rgba(139,92,246,0) 70%);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-soft: 0 20px 60px rgba(0,0,0,.35);
  --ease: cubic-bezier(.16,1,.3,1);
}


html{ overflow-x:hidden; }

.site_nav-inner{ min-width:0; }
.site_logo{ min-width:0; flex-shrink:1; }
.site_logo img{ height:100%; width:auto; max-width:160px; flex-shrink:0; }

.home_hero-blob{ position:absolute; border-radius:50%; filter:blur(90px); z-index:0; animation:site_float 10s ease-in-out infinite; }
.home_hero-blob--1{ width:480px; height:480px; top:-160px; left:-120px; background:rgba(139,92,246,.35); }
.home_hero-blob--2{ width:420px; height:420px; top:60px; right:-140px; background:rgba(58,165,255,.3); animation-delay:2s; }


.home_hero-blob--3{ width:480px; height:480px; top:00px; right:-140px;  background:rgba(58,165,255,.3); animation-delay:2s; }


.home_hero-blob--4{ width:420px; height:420px; top:-120px; left:-100px; background:rgba(139,92,246,.35); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text-2);
  font-family:'LINE Seed Sans TH',sans-serif;
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.site_font-display{
  font-family:'LINE Seed Sans TH',sans-serif;
  color:var(--text-1);
  font-weight:600;
  line-height:1.25;
  margin:0;
}
p{ margin:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--violet); color:#fff; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:10px; }

/* ---------- layout helpers ---------- */
.site_section{ padding:110px 0; position:relative; }
.site_section--tight{ padding:70px 0; }
@media(max-width:767px){
  .site_section{ padding:70px 0; }
  .site_section--tight{ padding:48px 0; }
}
.site_eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'LINE Seed Sans TH',sans-serif;
  font-size:13px; font-weight:500;
  color:var(--text-2);
  background:var(--surface);
  border:1px solid var(--border);
  padding:6px 16px; border-radius:99px;
  margin-bottom:20px;
}
.site_eyebrow i{ color:var(--violet); font-size:14px; }
.site_heading{ font-size:clamp(28px,4vw,44px); max-width:780px; }
.site_lede{ color:var(--text-2); font-size:18px; max-width:560px; }
.site_grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.site_btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'LINE Seed Sans TH',sans-serif; font-weight:500; font-size:15px;
  padding:14px 30px; border-radius:99px; border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  white-space:nowrap;
}
.site_btn--primary{
  background:var(--grad-main); color:#fff;
  box-shadow:0 8px 30px rgba(99,102,241,.35);
}
.site_btn--primary:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(99,102,241,.5); color:#fff; }
.site_btn--ghost{
  background:transparent; color:var(--text-1); border-color:var(--border-strong);
}
.site_btn--ghost:hover{ border-color:var(--violet); color:#fff; transform:translateY(-3px); }
.site_btn--sm{ padding:10px 22px; font-size:14px; }
.site_btn--block{ width:100%; }

/* ---------- navbar ---------- */
.site_nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0;
  transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site_nav.is-scrolled{
  padding:14px 0;
  background:rgba(8,7,13,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:var(--border);
}
.site_nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.site_logo{ display:flex; align-items:center; gap:10px; font-family:'LINE Seed Sans TH',sans-serif; font-weight:600; color:var(--text-1); font-size:19px; }
.site_logo-mark{
  width:68px; height:68px; border-radius:10px;
  
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:15px;
  flex-shrink:0;
}
.site_nav-links{ display:flex; align-items:center; gap:38px; list-style:none; margin:0; padding:0; }
.site_nav-links a{
  font-family:'LINE Seed Sans TH',sans-serif; font-size:20px; color:var(--text-2);
  transition:color .25s; position:relative; padding:4px 0;
}
.site_nav-links a:hover, .site_nav-links a.is-active{ color:var(--text-1); }
.site_nav-links a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--grad-main); border-radius:2px;
}
.site_nav-cta{ display:flex; align-items:center; gap:14px; }
.site_nav-toggle{
  display:none; width:44px; height:44px; border-radius:10px;
  border:1px solid var(--border-strong); background:transparent; color:var(--text-1);
  align-items:center; justify-content:center; font-size:20px;
}
@media(max-width:991px){
  .site_nav-links{
    position:fixed; top:0; right:0; height:100vh; width:78vw; max-width:340px;
    background:var(--bg-alt); border-left:1px solid var(--border);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:26px;
    transform:translateX(100%); transition:transform .4s var(--ease);
    z-index:1001;
  }
  .site_nav-links.is-open{ transform:translateX(0); }
  .site_nav-toggle{ display:inline-flex; }
  .site_nav-cta .site_btn--ghost{ display:none; }
}
.site_nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.site_nav-overlay.is-open{ opacity:1; pointer-events:auto; }

/* ---------- footer ---------- */
.site_footer{ background:var(--bg-alt); border-top:1px solid var(--border); padding:80px 0 28px; }
.site_footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:56px; }
@media(max-width:767px){ .site_footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; } }
.site_footer h6{ font-family:'LINE Seed Sans TH',sans-serif; color:var(--text-1); font-size:14px; font-weight:500; margin-bottom:18px; }
.site_footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.site_footer a{ color:var(--text-2); font-size:14.5px; transition:color .25s; }
.site_footer a:hover{ color:#fff; }
.site_footer-bottom{
  border-top:1px solid var(--border); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:13.5px; color:var(--text-3);
}
.site_social{ display:flex; gap:10px; }
.site_social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:all .3s;
}
.site_social a:hover{ background:var(--grad-main); border-color:transparent; color:#fff; }

/* ---------- shared cards ---------- */
.site_card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  transition:border-color .35s, transform .35s var(--ease);
}
.site_card:hover{ border-color:var(--border-strong); }

/* ---------- page hero backdrop (used on interior pages) ---------- */
.site_page-hero{
  padding:180px 0 120px; position:relative; overflow:hidden;
  border-bottom:1px solid var(--border);
  background-position:right;
  background-size: 70%;
   background-repeat: no-repeat;
}
.site_page-hero::before{
  content:""; position:absolute; inset:0;
  
  pointer-events:none;
}
.site_page-hero .container{ position:relative; z-index:1; }
.site_breadcrumb{ font-family:'LINE Seed Sans TH',sans-serif; font-size:13.5px; color:var(--text-3); margin-bottom:18px; }
.site_breadcrumb a{ color:var(--text-3); }
.site_breadcrumb a:hover{ color:var(--text-1); }

/* ---------- floating blob (decorative) ---------- */
.site_blob{
  position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0;
  animation:site_float 9s ease-in-out infinite;
}
@keyframes site_float{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-20px,26px) scale(1.06); }
}

/* ---------- CTA band (shared closing section) ---------- */
.site_cta-band{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:70px 50px; text-align:center; position:relative; overflow:hidden;
}
.site_cta-band::before{
  content:""; position:absolute; inset:0; background:var(--grad-glow); opacity:.5;
}
.site_cta-band > *{ position:relative; z-index:1; }
@media(max-width:767px){ .site_cta-band{ padding:48px 24px; } }

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ---------- marquee ---------- */
.site_marquee{ overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:22px 0; background:var(--bg-alt); }
.site_marquee-track{ display:flex; width:max-content; animation:site_marquee 26s linear infinite; }
.site_marquee-track span{
  font-family:'LINE Seed Sans TH',sans-serif; font-size:20px; color:var(--text-3); padding:0 30px; white-space:nowrap;
  display:flex; align-items:center; gap:24px;
}
.site_marquee-track span i{ color:var(--violet); font-size:10px; }
@keyframes site_marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- shared decorative photo ---------- */
.site_photo{
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border);
  background-size:cover; background-position:center; position:relative;
}
.site_photo::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.site_avatar-photo{ border-radius:50%; object-fit:cover; flex-shrink:0; }

/* ---------- utility ---------- */
.site_num{ font-family:'LINE Seed Sans TH',sans-serif; font-weight:600; color:var(--text-1); }
.text-violet{ color:var(--violet); }