/* ==========================================================
   GEN Z THEME — neon + cream + bold outlines (neo-brutalism)
   โหลดต่อจาก style.css — ลบ <link> ไฟล์นี้ออกเพื่อกลับเป็นธีมเดิม
   ========================================================== */
:root{
  --navy:#121016;
  --ink:#121016;
  --muted:#5d5870;
  --line:#121016;
  --bg:#fff8ee;
  --bg-soft:#f1eaff;
  --primary:#7b5cff;
  --primary-2:#ff4fd1;
  --accent:#c6ff3d;
  --accent-2:#ffe14d;
  --pink:#ff4fd1;
  --cyan:#3de0ff;
  --green:#15a95c;
  --radius:22px;
  --shadow:4px 4px 0 var(--ink);
  --shadow-lg:8px 8px 0 var(--ink);
  --grad:linear-gradient(120deg,#7b5cff 0%,#ff4fd1 100%);
  --grad-accent:linear-gradient(120deg,#c6ff3d 0%,#ffe14d 100%);
}
body{background:var(--bg)}
h1,h2,h3{font-weight:700;letter-spacing:-.3px}
.section.soft{background:var(--bg-soft);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.grad-text{background:none;color:var(--ink);-webkit-text-fill-color:currentColor;position:relative;z-index:0}
.grad-text::after{content:"";position:absolute;left:-4px;right:-4px;bottom:.08em;height:.42em;background:var(--accent);z-index:-1;border-radius:6px;transform:rotate(-1deg)}
.section.soft .grad-text::after{background:var(--pink);opacity:.55}
.eyebrow{background:var(--accent-2);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);font-weight:600}

/* Buttons */
.btn{border:2px solid var(--ink);font-weight:600;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.btn-accent{background:var(--accent);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-line{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.hero .btn-ghost,.cta-band .btn-ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 #fff}
.hero .btn-accent{box-shadow:4px 4px 0 #fff;border-color:#fff}

/* Top bar & header */
.topbar{background:var(--accent);color:var(--ink);border-bottom:2px solid var(--ink);font-weight:500}
.topbar a{color:var(--ink)}
.header{background:rgba(255,248,238,.92);border-bottom:2px solid var(--ink)}
.logo-mark{background:var(--accent);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg)}
.logo-text b{font-weight:800}
.nav a{font-weight:500}
.nav a:hover{background:var(--accent);color:var(--ink)}
.menu-toggle span{background:var(--ink)}

/* Hero */
.hero{background:radial-gradient(520px 420px at 88% 8%,rgba(255,79,209,.55),transparent 65%),radial-gradient(600px 460px at 8% 100%,rgba(123,92,255,.6),transparent 65%),radial-gradient(380px 300px at 55% 55%,rgba(61,224,255,.18),transparent 70%),#121016}
.hero::after{background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:22px 22px}
.hero-badge{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--accent);font-weight:500}
.hero h1{font-weight:800;letter-spacing:-.5px}
.hero h1 .hl{background:linear-gradient(90deg,#c6ff3d,#3de0ff 50%,#ff4fd1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-trust div{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.25);border-radius:16px}
.hero-trust div:nth-child(1) b{color:var(--accent)}
.hero-trust div:nth-child(2) b{color:var(--cyan)}
.hero-trust div:nth-child(3) b{color:var(--pink)}
.dash{border:2px solid var(--ink);box-shadow:10px 10px 0 var(--accent);transform:rotate(1.5deg)}
.kpi{border:2px solid var(--ink);background:#fff}
.chart{border:2px solid var(--ink);background:#fff}
.chart i{background:var(--primary);border:2px solid var(--ink);opacity:1}
.chart i:nth-child(3n+2){background:var(--pink)}
.chart i:nth-child(3n){background:var(--accent)}
.channels span{border:2px solid var(--ink);color:var(--ink);font-weight:500}
.float-card{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.float-card .ic{border:2px solid var(--ink);color:var(--ink)}
.fc-2 .ic{background:var(--accent)!important}
.fc-1 .ic{background:var(--pink)!important}
.dash-head .pill{background:var(--accent);color:var(--ink);border:2px solid var(--ink)}

/* Marquee */
.marquee{background:var(--ink);color:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;padding:14px 0;transform:rotate(-1deg);margin:-8px -10px 0;position:relative;z-index:2}
.marquee-track{display:flex;gap:32px;width:max-content;animation:marquee 28s linear infinite;font-family:var(--font-head);font-weight:700;font-size:20px;white-space:nowrap}
.marquee-track span{display:inline-flex;align-items:center;gap:32px}
.marquee-track span::after{content:"✦";color:var(--accent)}
.marquee-track span:nth-child(3n+2)::after{color:var(--pink)}
.marquee-track span:nth-child(3n)::after{color:var(--cyan)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Trust strip */
.trust-strip{background:var(--bg);border-bottom:2px solid var(--ink)}
.ts-ic{background:#fff;border:2px solid var(--ink);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.ts-item:nth-child(1) .ts-ic{background:var(--accent)}
.ts-item:nth-child(2) .ts-ic{background:var(--pink)}
.ts-item:nth-child(3) .ts-ic{background:var(--cyan)}
.ts-item:nth-child(4) .ts-ic{background:var(--accent-2)}

/* Cards */
.card,.case,.step,.price-card,.company-card,.faq details,.form-card,.contact-item,.map,.why div,.pricing-foot{border:2px solid var(--ink);box-shadow:var(--shadow)}
.card:hover,.case:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg);border-color:var(--ink)}
.svc-ic{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink)!important}
.grid-3 > .card:nth-child(6n+1) .svc-ic{background:var(--accent)!important}
.grid-3 > .card:nth-child(6n+2) .svc-ic{background:var(--cyan)!important}
.grid-3 > .card:nth-child(6n+3) .svc-ic{background:var(--pink)!important}
.grid-3 > .card:nth-child(6n+4) .svc-ic{background:var(--accent-2)!important}
.grid-3 > .card:nth-child(6n+5) .svc-ic{background:#ff8a5c!important}
.grid-3 > .card:nth-child(6n) .svc-ic{background:var(--primary)!important;color:#fff!important}
.checklist li::before{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121016' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat;border:1.5px solid var(--ink)}

/* Pricing */
.tab{border:2px solid var(--ink);font-weight:600;color:var(--ink)}
.tab:hover{background:var(--accent-2);color:var(--ink);border-color:var(--ink)}
.tab.active{background:var(--ink);color:var(--accent);border-color:var(--ink);box-shadow:3px 3px 0 var(--pink)}
.price-card:hover{box-shadow:var(--shadow-lg)}
.price-card.featured{background:#fff;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--primary)}
.price-card .ribbon{background:var(--pink);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translateX(-50%) rotate(-3deg);font-weight:700}
.price b{font-weight:800}
.pricing-foot{background:#fff}

/* Cases */
.case-top{border-bottom:2px solid var(--ink);color:var(--ink)}
.case-top h3{color:var(--ink)}
.case-top{display:flex;flex-direction:column;align-items:flex-start}
.case-top .tag{position:static;order:-1;margin-bottom:10px;background:#fff;color:var(--ink);border:2px solid var(--ink);font-weight:600}
.grid-3 > .case:nth-child(6n+1) .case-top{background:var(--primary)!important;color:#fff}
.grid-3 > .case:nth-child(6n+1) .case-top h3{color:#fff}
.grid-3 > .case:nth-child(6n+2) .case-top{background:var(--accent)!important}
.grid-3 > .case:nth-child(6n+3) .case-top{background:var(--pink)!important}
.grid-3 > .case:nth-child(6n+4) .case-top{background:var(--cyan)!important}
.grid-3 > .case:nth-child(6n+5) .case-top{background:var(--accent-2)!important}
.grid-3 > .case:nth-child(6n) .case-top{background:var(--ink)!important;color:#fff}
.grid-3 > .case:nth-child(6n) .case-top h3{color:var(--accent)}
.case-stats{border-top:2px dashed var(--ink)}
.case-stats b{color:var(--primary);font-weight:800}

/* Process */
.step::before{background:var(--accent);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:800}
.step:nth-child(2)::before{background:var(--cyan)}
.step:nth-child(3)::before{background:var(--pink)}
.step:nth-child(4)::before{background:var(--accent-2)}
.step:nth-child(5)::before{background:var(--primary);color:#fff}

/* About */
.why div{background:#fff}
.company-card .cc-head{background:var(--ink)}
.company-table th{background:var(--bg-soft)}
.company-table th,.company-table td{border-bottom:1.5px solid var(--ink)}
.cc-foot{background:var(--bg-soft)}

/* FAQ */
.faq details[open]{box-shadow:var(--shadow-lg);border-color:var(--ink)}
.faq summary::after{background:var(--accent);color:var(--ink);border:2px solid var(--ink)}

/* CTA */
.cta-band{background:var(--primary);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.cta-band::after{background:var(--pink);opacity:.9;border:3px solid var(--ink)}
.cta-band p{color:#f1eaff}

/* Contact & forms */
.contact-item .ci-ic{border:2px solid var(--ink);color:var(--ink)}
.contact-list > .contact-item:nth-child(1) .ci-ic{background:var(--accent)!important}
.contact-list > .contact-item:nth-child(2) .ci-ic{color:#fff}
.contact-list > .contact-item:nth-child(3) .ci-ic{background:var(--cyan)!important}
.contact-list > .contact-item:nth-child(4) .ci-ic{background:var(--pink)!important}
a.contact-item:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg);border-color:var(--ink)}
.field input,.field select,.field textarea{border:2px solid var(--ink);border-radius:14px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:4px 4px 0 var(--primary)}

/* Footer */
.footer{background:var(--ink)}
.footer h4{color:var(--accent)}
.footer .logo-mark{box-shadow:3px 3px 0 var(--pink)}

/* Floating, modal, cookie, legal */
.float-contact a{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.fc-phone{background:var(--pink);color:var(--ink)!important}
.modal-dialog{border:3px solid var(--ink);box-shadow:10px 10px 0 var(--accent)}
.modal-close{border:2px solid var(--ink);color:var(--ink);background:#fff}
.order-summary{border:2px solid var(--ink)}
.order-summary .row.total{border-top:2px dashed var(--ink)}
.choice{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.choice:hover{border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.choice .c-ic{border:2px solid var(--ink)}
.secure-note{border:2px solid var(--ink);background:#eaffc8;color:var(--ink)}
.card-brands span{border:2px solid var(--ink);color:var(--ink)}
.cookie{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.legal-hero{background:var(--ink)}
.legal-hero h1{color:var(--accent)}
.legal .box{border:2px solid var(--ink);background:#fff;box-shadow:var(--shadow)}

@media (max-width:640px){
  .dash{transform:none}
  .marquee-track{font-size:16px}
  .company-table th{background:none}
}