@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;900&family=Sarabun:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #050508;
  --bg2: #08080e;
  --bg3: #0d0d18;
  --card: #0f0f1c;
  --card2: #141425;
  --violet: #6d28d9;
  --violet2: #7c3aed;
  --violet3: #8b5cf6;
  --violet4: #a78bfa;
  --pink: #ec4899;
  --pink2: #f472b6;
  --cyan: #06b6d4;
  --cyan2: #22d3ee;
  --gold: #f59e0b;
  --gold2: #fbbf24;
  --green: #10b981;
  --red: #ef4444;
  --text: #f0eeff;
  --text2: #9d8ec4;
  --text3: #5c5280;
  --border: rgba(109,40,217,0.18);
  --border2: rgba(139,92,246,0.35);
  --border3: rgba(167,139,250,0.5);
  --glow-s: 0 0 12px rgba(109,40,217,0.35);
  --glow-m: 0 0 28px rgba(109,40,217,0.45);
  --glow-l: 0 0 60px rgba(109,40,217,0.35);
  --glow-pink: 0 0 28px rgba(236,72,153,0.4);
  --glow-cyan: 0 0 28px rgba(6,182,212,0.4);
  --glow-gold: 0 0 20px rgba(245,158,11,0.4);
  --r: 10px;
  --r2: 16px;
  --r3: 24px;
  --t: all 0.28s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body {
  font-family:'Sarabun',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
}

body::before {
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 80vw 60vh at 20% 10%, rgba(109,40,217,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60vw 50vh at 80% 80%, rgba(236,72,153,0.04) 0%, transparent 60%);
  pointer-events:none;z-index:0;
}

/* NAV */
nav {
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:60px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;
  background:rgba(5,5,8,0.85);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.nav-logo {
  font-family:'Kanit',sans-serif;font-weight:800;font-size:1.3rem;
  background:linear-gradient(135deg,var(--violet4),var(--pink2),var(--cyan2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-decoration:none;letter-spacing:-0.02em;
}
.nav-links{display:flex;gap:1.75rem;list-style:none;align-items:center;}
.nav-links a{color:var(--text2);text-decoration:none;font-size:0.875rem;transition:var(--t);}
.nav-links a:hover{color:var(--text);}
.nav-cta{
  background:linear-gradient(135deg,var(--violet2),var(--pink));
  color:white!important;padding:0.45rem 1.1rem;
  border-radius:8px;font-weight:600!important;font-family:'Kanit',sans-serif;
}
.nav-cta:hover{opacity:0.88;transform:translateY(-1px);}

/* BARE TOKEN CHIP */
.bare-chip {
  display:flex;align-items:center;gap:0.5rem;
  background:linear-gradient(135deg,rgba(245,158,11,0.12),rgba(251,191,36,0.08));
  border:1px solid rgba(245,158,11,0.3);
  border-radius:100px;padding:0.3rem 0.85rem;
  font-size:0.78rem;font-weight:600;color:var(--gold2);
  cursor:pointer;transition:var(--t);font-family:'Space Mono',monospace;
}
.bare-chip:hover{border-color:var(--gold);box-shadow:var(--glow-gold);}
.bare-icon{font-size:0.85rem;}

/* BUTTONS */
.btn {
  display:inline-flex;align-items:center;gap:0.45rem;
  padding:0.7rem 1.6rem;border-radius:var(--r);
  font-family:'Kanit',sans-serif;font-weight:500;font-size:0.9rem;
  cursor:pointer;border:none;transition:var(--t);text-decoration:none;
}
.btn-primary {
  background:linear-gradient(135deg,var(--violet2),var(--pink));
  color:white;box-shadow:var(--glow-s);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow-m);}
.btn-outline {
  background:transparent;color:var(--text);
  border:1px solid var(--border2);
}
.btn-outline:hover{background:rgba(109,40,217,0.1);border-color:var(--violet3);}
.btn-ghost{background:transparent;color:var(--text2);border:none;font-size:0.85rem;}
.btn-ghost:hover{color:var(--text);}
.btn-sm{padding:0.45rem 1rem;font-size:0.8rem;}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a0a00;font-weight:700;}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--glow-gold);}

/* CARDS */
.card {
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r2);padding:1.5rem;transition:var(--t);
}
.card:hover{border-color:var(--border2);box-shadow:var(--glow-s);}

/* BADGE */
.badge {
  display:inline-flex;align-items:center;gap:0.4rem;
  padding:0.25rem 0.75rem;
  background:rgba(109,40,217,0.12);border:1px solid var(--border2);
  border-radius:100px;font-size:0.75rem;color:var(--violet4);font-weight:500;
}

/* SECTIONS */
section{padding:5rem 2rem;}
.container{max-width:1100px;margin:0 auto;}
.section-title{
  font-family:'Kanit',sans-serif;
  font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:700;text-align:center;margin-bottom:0.65rem;
}
.section-sub{text-align:center;color:var(--text2);font-size:1rem;margin-bottom:2.75rem;}

/* GRIDS */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}

@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}
  .nav-links{display:none;}
}

/* GRADIENT TEXT */
.g-text{
  background:linear-gradient(135deg,var(--violet4),var(--pink2),var(--cyan2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.g-text-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* FORM */
.form-group{margin-bottom:1.1rem;}
.form-label{display:block;font-size:0.82rem;font-weight:500;color:var(--text2);margin-bottom:0.35rem;}
.form-input,.form-textarea,.form-select {
  width:100%;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:0.7rem 0.9rem;color:var(--text);
  font-family:'Sarabun',sans-serif;font-size:0.88rem;outline:none;transition:var(--t);
}
.form-textarea{resize:vertical;min-height:75px;}
.form-input:focus,.form-textarea:focus,.form-select:focus{
  border-color:var(--violet2);box-shadow:var(--glow-s);
}
.form-select option{background:var(--card);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}

/* OUTPUT BOX */
.output-box {
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:1.1rem;
  font-size:0.85rem;line-height:1.85;color:var(--text2);
  min-height:110px;white-space:pre-wrap;position:relative;
}

/* SPINNER */
.spinner {
  width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);
  border-top-color:white;border-radius:50%;
  animation:spin 0.7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--violet);border-radius:3px;}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes pulse{0%,100%{box-shadow:0 0 18px rgba(109,40,217,0.3);}50%{box-shadow:0 0 42px rgba(139,92,246,0.6);}}
@keyframes shimmer{0%{background-position:-200% center;}100%{background-position:200% center;}}
@keyframes glow-pulse{0%,100%{opacity:0.6;}50%{opacity:1;}}

.fade-up{animation:fadeUp 0.65s ease both;}
.d1{animation-delay:0.1s;}.d2{animation-delay:0.2s;}.d3{animation-delay:0.3s;}.d4{animation-delay:0.4s;}

/* FOOTER */
footer{
  border-top:1px solid var(--border);padding:1.75rem 2rem;
  text-align:center;color:var(--text3);font-size:0.8rem;
}