/* ================================
   InginiaOS — Cleaned CSS (2025-10-25)
   Scope-safe, class names kept
   ================================ */

/* ---------- Tokens ---------- */
:root{
  --brand:#00ff88;
  --brand2:#00e0ff;
  --bg:#000;
  --ink:#eaeaea;
  --muted:#cfcfcf;
  --panel:#0d0d0d;
  --line:#222;
}

/* ---------- Base / Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#000;color:#fff;font-family:"Noto Sans Thai",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ---------- Navbar ---------- */
nav{
  position:fixed;inset:0 0 auto 0;height:60px;z-index:100;
  background:rgba(0,0,0,.7);backdrop-filter:blur(10px);
  border-bottom:1px solid #101010;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;
}
.logo img{height:32px}
nav ul{list-style:none;display:flex;gap:18px}
nav a{color:#fff;font-weight:700}
nav a:hover{color:var(--brand)}

/* ---------- Wrapper sections ---------- */
section{max-width:1100px;margin:0 auto;padding:48px 20px;text-align:center}
.divider{height:1px;max-width:1100px;margin:20px auto;background:
  linear-gradient(90deg,transparent,rgba(0,255,136,.6),rgba(176,244,255,.5),transparent)}

/* ---------- Headings (gradients) ---------- */
.h1-grad,
h2.h2-grad{
  font-weight:800;background:linear-gradient(90deg,#fff,#b0f4ff,var(--brand));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent
}
.h1-grad{font-size:clamp(42px,6vw,80px)}
h2.h2-grad{font-size:clamp(32px,4.8vw,56px);margin-bottom:18px}

/* ---------- CTA buttons ---------- */
.cta,.cta-buy,.plan-cta,.select-addon,.cta-exclusive{
  display:inline-block;border:0;border-radius:999px;cursor:pointer;font-weight:800;
  color:#000;background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 30px rgba(0,255,136,.18);transition:transform .2s,box-shadow .2s,opacity .2s
}
.cta:hover,.cta-buy:hover,.plan-cta:hover,.select-addon:hover,.cta-exclusive:hover{
  transform:translateY(-2px);box-shadow:0 14px 38px rgba(0,255,136,.28);opacity:.98
}

/* ---------- HERO (#top) ---------- */
#top{max-width:1200px;margin:0 auto;padding:clamp(56px,8vh,96px) 20px 32px;text-align:center}
#top .h1-grad{margin:0 0 .7em}
#top h1 + h1{
  font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:700;line-height:1.3;margin:0 0 1.1em;opacity:.95
}
#top h2{font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:400;color:#cfcfcf;line-height:1.6;max-width:860px;margin:0 auto 1.6em}
#top > p{font-size:clamp(1rem,2vw,1.125rem);line-height:1.85;color:#b8b8b8;max-width:760px;margin:0 auto 1.6em}
#top .hero-bubbles{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:980px;margin:1.4rem auto 0}
#top .hero-bubble{
  flex:1 1 clamp(240px,42%,460px);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:10px;text-align:left;
  transition:transform .2s,border-color .2s,background-color .2s
}
#top .hero-bubble:hover{transform:translateY(-3px);background:rgba(0,255,136,.08);border-color:var(--brand)}
#top .hero-emoji{font-size:1.2rem;filter:drop-shadow(0 2px 8px rgba(0,255,136,.25))}
#top .hero-bubble-text{color:#eaeaea;font-weight:600;letter-spacing:.2px}
#top .cta-buy{margin-top:16px;margin-bottom:20px;padding:14px 24px;font-size:1.1rem}

/* ---------- Intro (hook + reveal) ---------- */
#intro{max-width:900px;color:#eee}
#intro p{font-size:1.05rem;line-height:1.8;color:#ccc;margin-bottom:14px}
.hook-callout{
  display:grid;place-items:center;gap:.35rem;padding:16px 20px;margin:0 auto 12px;max-width:920px;
  border:1px solid var(--brand);border-radius:16px;background:
  radial-gradient(120% 140% at 50% 0%,rgba(0,255,136,.08),transparent 60%),
  linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.2));
  box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 0 6px rgba(0,255,136,.04)
}
.hook-title{font-size:.98rem;color:#cfcfcf}
.hook-question{
  font-weight:900;font-size:clamp(1.05rem,2.8vw,1.45rem);
  background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;color:transparent
}
.hook-sub{color:var(--ink);opacity:.9;font-size:.98rem}

/* ---------- OS sections (3 Gaps) ---------- */
.os-section{
  max-width:900px;margin:48px auto;padding:32px 22px;
  background:linear-gradient(180deg,rgba(10,10,10,.85),rgba(5,5,5,.95));
  border:1px solid rgba(0,255,136,.2);border-radius:24px;box-shadow:0 0 60px rgba(0,255,136,.05);color:#f5f5f5;line-height:1.7
}
.os-section .lead,.os-section .solution,.os-section .difference,.os-section .result{
  text-align:left;border-radius:16px;padding:18px;margin-top:12px
}
.os-section .lead{background:rgba(255,255,255,.02)}
.os-section .lead ul{margin:8px 0 0 18px;list-style:"— ";list-style-position:inside;color:#aaa}
.os-section .solution{
  background:color-mix(in oklab,var(--brand) 12%, transparent);
  border:1px solid color-mix(in oklab,var(--brand) 35%, transparent)
}
.os-section .difference{background:rgba(255,255,255,.02)}
.os-section .difference ul{margin:10px 0 0 18px;list-style:"▸ ";list-style-position:inside;color:#aaa}
.os-section blockquote{
  margin:14px 0;padding:14px 16px;background:color-mix(in oklab,var(--brand) 18%,transparent);
  border-left:3px solid var(--brand);border-radius:10px;color:color-mix(in oklab,var(--brand) 75%, white 25%);font-style:italic
}
.os-section .result{
  text-align:center;background:
  linear-gradient(135deg,color-mix(in oklab,var(--brand) 14%,transparent),color-mix(in oklab,var(--brand2) 14%,transparent));
  border:1px solid color-mix(in oklab,var(--brand) 35%, transparent)
}

/* ---------- Agency Killer (ak-section) ---------- */
#agency-killer{
  --ak: #ff7ad6; --ak2:#7aa9ff;
  max-width:980px;margin:64px auto;padding:clamp(28px,5vw,44px) clamp(18px,4.6vw,32px);
  background:radial-gradient(1200px 600px at 10% -10%, rgba(255,122,214,.10), transparent 45%),
             linear-gradient(180deg, rgba(13,10,16,.92), rgba(8,6,10,.97));
  border:1px solid rgba(255,122,214,.22);border-radius:26px;box-shadow:0 0 70px rgba(255,122,214,.06)
}
.ak-header{text-align:center;margin-bottom:22px}
.ak-badge{display:inline-block;padding:8px 14px;font-weight:700;border-radius:999px;border:1px solid rgba(255,122,214,.22);
  background:rgba(255,255,255,.03);color:var(--ak)}
.ak-title{font-size:clamp(1.28rem,2.6vw,1.85rem);font-weight:800;margin:8px 0;background:linear-gradient(90deg,var(--ak),var(--ak2));
  -webkit-background-clip:text;color:transparent}
.ak-intro{color:#d9d9e3;max-width:820px;margin:0 auto}
.ak-quote{
  max-width:820px;margin:16px auto 0;padding:12px 16px;background:color-mix(in oklab,var(--ak) 14%, transparent);
  border-left:3px solid var(--ak);border-radius:12px;font-style:italic;color:color-mix(in oklab,var(--ak) 75%, white 25%)
}
.ak-table-wrap{margin-top:18px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:18px;overflow:hidden}
.ak-table{width:100%;border-collapse:collapse;font-size:.98rem}
.ak-table thead th{
  position:sticky;top:0;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.04));
  color:#f8eaff;text-align:left;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap
}
.ak-table td{padding:14px 16px;color:#dfe2f2;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}
.ak-table tbody tr:nth-child(odd) td{background:rgba(255,255,255,.02)}
.ak-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.04)}
.ak-table td.ak-hi{
  color:#eafff6;font-weight:700;background:linear-gradient(90deg,color-mix(in oklab,var(--ak) 8%,transparent),transparent 70%);
  border-left:2px solid color-mix(in oklab,var(--ak) 40%,transparent)
}
.ak-scroll-hint{text-align:center;font-size:.9rem;color:#bcbcd6;padding:10px 0;background:rgba(255,255,255,.02)}
@media (max-width:840px){.ak-table-wrap{overflow-x:auto}.ak-table{min-width:700px}}

/* ---------- Story + Intro Cards ---------- */
.story-section{
  max-width:960px;margin:64px auto;padding:40px 28px;background:linear-gradient(180deg,rgba(10,10,10,.95),rgba(5,5,5,.97));
  border:1px solid rgba(0,255,136,.2);border-radius:24px;box-shadow:0 0 60px rgba(0,255,136,.05);line-height:1.85
}
.story-heading{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;background:linear-gradient(90deg,var(--brand),#00ccff);
  -webkit-background-clip:text;color:transparent;margin-bottom:20px}
.story-section .lead{font-size:1.08rem;color:#e7fff0;margin-bottom:12px}
.story-section .highlight{font-size:1.08rem;color:var(--brand);font-weight:700;text-align:center;margin:16px 0}
.story-section .quote{font-style:italic;color:#b8ffe4;border-left:3px solid var(--brand);padding-left:16px;margin-top:20px;font-weight:600}
#intro-cards .cards-container{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px}
#intro-cards .intro-card{
  flex:0 0 260px;scroll-snap-align:start;border:1px solid rgba(180,255,220,.18);border-radius:18px;padding:20px;
  background:linear-gradient(180deg,rgba(18,18,20,.96),rgba(12,12,14,.96));box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.03) inset;
  color:#e8efec;line-height:1.7
}
#intro-cards .intro-card h3{color:#f3f8f6;margin-bottom:10px;letter-spacing:.1px}
#intro-cards .intro-card p{color:#cfd8d4;font-size:.98rem}

/* ---------- Features grid (inside .features-toggle) ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:20px}
.card{background:#111;border:1px solid var(--brand);border-radius:14px;padding:20px;text-align:left}
.card h3{color:var(--brand);margin-bottom:8px}
.card-highlight{background:linear-gradient(135deg,#000,#003322);border-color:var(--brand);box-shadow:0 0 20px rgba(0,255,136,.35)}
.card-highlight h3{color:var(--brand)}

/* ---------- Compound Growth ---------- */
.compound-growth{
  padding:64px 0;text-align:center;background:radial-gradient(100% 120% at 50% 0%,rgba(0,255,136,.06),rgba(0,224,255,.03));
  border-block:1px solid rgba(0,255,136,.08)
}
.compound-growth p{color:#d8d8d8;max-width:720px;margin:0 auto 1.4rem;line-height:1.6}
.compound-growth ul{list-style:none;padding:0;margin:0 auto 1.4rem;max-width:700px}
.compound-growth li{color:#e0e0e0;margin-bottom:10px;line-height:1.6;padding:10px 16px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid rgba(0,255,136,.08)}
.compound-growth li:hover{background:rgba(0,255,136,.06);border-color:rgba(0,255,136,.25)}

/* ---------- Comparison (toggle table) ---------- */
#comparison h2{margin-bottom:12px}
#comparison p{margin-bottom:16px;color:#bbb}
#comparisonTable{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#comparisonTable .table-wrapper{position:relative}
#comparisonTable table{
  width:max-content;min-width:900px;border-collapse:collapse;background:#0d0d0d;color:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.45)
}
#comparisonTable th,#comparisonTable td{padding:14px 16px;border-bottom:1px solid #222;white-space:nowrap;text-align:center;font-size:.95rem}
#comparisonTable th{background:#121212;color:#eaeaea;font-weight:800}
#comparisonTable th:first-child,#comparisonTable td:first-child{white-space:normal;text-align:left;font-weight:600;color:#fff}
#comparisonTable td:nth-child(5){ /* InginiaOS column highlight */
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#000;font-weight:800
}

/* ---------- Proof cases ---------- */
#proof-cases{max-width:100%}
.proof-card{border-top:1px solid rgba(255,255,255,.08);padding:32px 0;max-width:800px;margin:0 auto}
.proof-card:not(:last-child){border-bottom:1px solid rgba(255,255,255,.08)}
.proof-sub{font-size:1rem;color:#bbb;margin-bottom:8px}
.proof-number{
  font-size:2.4rem;font-weight:900;background:linear-gradient(90deg,#fff,#b0f4ff,var(--brand));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:4px 0 10px
}
.proof-detail{font-size:1rem;color:#ccc;line-height:1.6}

/* ---------- Pricing ---------- */
#pricing .tabs{display:flex;justify-content:center;gap:36px;margin:16px auto 26px;position:sticky;top:60px;background:#000;z-index:90;padding:10px 0;border-bottom:1px solid #222}
#pricing .tab{background:none;border:0;color:#aaa;font-size:1.08rem;font-weight:700;cursor:pointer;padding:8px 0}
#pricing .tab.active{color:#fff;border-bottom:3px solid var(--brand)}
.tab-content{display:none}
.tab-content.active{display:block}
.pricing-card-modern{
  background:radial-gradient(circle at top left, rgba(0,200,255,.12), rgba(0,0,0,.95));
  border-radius:20px;padding:32px 26px;text-align:center;color:#fff;max-width:420px;margin:0 auto;
  box-shadow:0 8px 30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px)
}
.pricing-card-modern .plan-title{font-size:1.25rem;font-weight:700;margin-bottom:10px;color:#ccc}
.pricing-card-modern .plan-price{font-size:2.6rem;font-weight:900;background:linear-gradient(90deg,#fff,#a0f0ff,#00ffcc);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px}
.pricing-card-modern .plan-price .per{font-size:1rem;font-weight:400;color:#aaa}
.pricing-card-modern .features-list{text-align:left;margin:16px 0}
.pricing-card-modern .feature-item{margin-bottom:16px}
.pricing-card-modern .feature-item h4{font-size:1.02rem;font-weight:700;margin-bottom:4px}
.pricing-card-modern .feature-item p{font-size:.95rem;color:#bbb;line-height:1.55}
.plan-cta{margin-top:16px;padding:14px 0;border-radius:12px;width:100%;font-size:1rem;box-shadow:0 4px 15px rgba(0,255,136,.4)}

/* ---------- Addons ---------- */
.addons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:20px}
.addon-card{
  background:#0d0d0d;border:1px solid #222;border-radius:14px;padding:22px;text-align:left;
  box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .25s, box-shadow .25s
}
.addon-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.addon-card h3{font-size:1.2rem;margin:0 0 8px;background:linear-gradient(90deg,#fff,#b0f4ff,var(--brand));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.addon-card .price{font-size:1.1rem;font-weight:700;margin-bottom:10px;color:var(--brand)}
.select-addon{width:100%;padding:10px 14px;border-radius:10px}
.select-addon.selected{background:#222;color:var(--brand);cursor:default}

/* ---------- Closing ---------- */
#closing{max-width:900px;text-align:center}
#closing p{font-size:1.05rem;line-height:1.7;margin:16px 0;color:#ddd}
#closing .highlight-box{
  background:rgba(0,255,136,.08);border:1px solid var(--brand);border-radius:12px;padding:18px;margin:24px auto;max-width:520px;
  color:var(--brand);font-weight:700;animation:scaleIn 1s ease forwards .2s both;transform:scale(.95);opacity:0
}
@keyframes scaleIn{to{transform:scale(1);opacity:1}}
.exclusive-box{
  display:none;margin-top:18px;background:rgba(0,255,136,.08);border:1px solid var(--brand);border-radius:14px;padding:20px;text-align:left;
  box-shadow:0 0 25px rgba(0,255,136,.3);max-width:600px;margin-left:auto;margin-right:auto;opacity:0;transform:translateY(-20px);
  transition:opacity .4s, transform .4s
}
.exclusive-box.show{display:block;opacity:1;transform:translateY(0)}

/* ---------- FAQ ---------- */
#faq{width:100%;padding:64px 0}
#faq h2{margin-bottom:8px}
.faq-container{width:100%;max-width:980px;margin:0 auto;padding:0 12px}
.faq-item{border-bottom:1px solid #222}
.faq-question{
  width:100%;background:none;border:0;text-align:left;padding:18px 12px;font-size:1.05rem;font-weight:700;color:#fff;cursor:pointer;position:relative
}
.faq-question::after{content:"+";position:absolute;right:12px;font-size:1.3rem;transition:transform .25s}
.faq-item.active .faq-question::after{content:"-";transform:rotate(180deg)}
.faq-answer{
  max-height:0;overflow:hidden;color:#bbb;font-size:1rem;line-height:1.6;padding:0 12px;transition:max-height .4s,padding .4s
}
.faq-item.active .faq-answer{max-height:1000px;padding:10px 12px}

/* ---------- Footer (compact sticky) ---------- */
footer{margin-top:auto;width:100%;padding:12px 10px;text-align:center;border-top:1px solid #111;color:#888;background:#000}
footer .trust-logos.darkmode{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
footer .trust-logos.darkmode img{height:26px;opacity:.8;filter:grayscale(1) brightness(.9);transition:filter .3s, opacity .3s, transform .3s}
footer .trust-logos.darkmode img:hover{opacity:1;filter:brightness(1.1) drop-shadow(0 0 6px rgba(0,255,136,.6));transform:scale(1.06)}
footer .trust-logos.darkmode .etc-tag{
  color:#555;font-weight:700;font-size:.9rem;letter-spacing:.6px;background:rgba(0,255,136,.08);
  border:1px solid rgba(0,255,136,.4);padding:5px 10px;border-radius:6px
}

/* ---------- Motion reduce ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- Responsive fine-tune ---------- */
@media (max-width:640px){
  #top{padding-top:56px;padding-bottom:40px}
  #top .hero-bubbles{gap:12px}
  #top .hero-bubble{padding:12px 14px}
  .story-section{margin:48px 12px;padding:24px 16px;border-radius:20px}
  .os-section{margin:40px 12px;padding:24px 16px;border-radius:20px}
  .pricing-card-modern{max-width:96%}
}
/* =========================================
   FINAL PATCH — safe overrides (append-only)
   ========================================= */

/* 0) ฟอนต์ปุ่ม / ลิงก์ CTA ให้ใช้ฟอนต์เดียวกับทั้งเว็บ */
button,
input,
select,
textarea,
.cta,
.cta-buy,
.plan-cta,
.cta-exclusive,
#revealContent {
  font-family: inherit !important;
}

/* 1) HERO – responsive และ spacing */
#top {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) 20px;
  text-align: center;
}
#top .h1-grad,
#top h1:first-of-type {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 0.75em;
}
#top h1 + h1 {
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.1em;
  opacity: .95;
}
#top h2 {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 400;
  color: #cfcfcf;
  line-height: 1.6;
  max-width: 860px;
  margin: 0 auto 1.75em;
}
#top > p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.85;
  color: #b8b8b8;
  max-width: 760px;
  margin: 0 auto 1.75em;
}

/* CTA ใน hero – ดูดึงดูดขึ้น แต่ยังใช้คลาสเดิม */
#top .cta-buy {
  margin-top: 1rem;
  margin-bottom: 24px !important;
  padding: 16px 32px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #000;
  border-radius: 999px;
  background: linear-gradient(135deg, #00ff88 0%, #00b8ff 100%);
  box-shadow: 0 10px 40px rgba(0,255,136,.25);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
#top .cta-buy:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 50px rgba(0,255,136,.35);
  filter: brightness(1.05);
}

/* 2) กล่องคำเตือนสีเหลือง (hook-warning) */
.hook-warning-box { display:flex; justify-content:center; align-items:center; margin: 12px auto 16px; width:100%; max-width:920px; }
.hook-warning-bg {
  position: relative; display:inline-block; text-align:center;
  padding: 18px 28px; font-size: 1rem; font-weight: 800; letter-spacing: .5px;
  color: #000; background-color: #ffcc00; border-radius: 8px;
  box-shadow: 0 6px 22px rgba(255,204,0,.25); overflow:hidden;
}
.hook-warning-bg::before{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(45deg,#000,#000 12px,#ffcc00 12px,#ffcc00 24px);
  opacity:.25; z-index:0;
}
.hook-warning-bg span,
.hook-warning-bg { position:relative; z-index:1; }

/* 3) Narrative หลัง hook (ย่อหน้าชี้นำ) */
.hook-closer {
  position: relative; margin: 20px auto 10px; max-width: 920px;
  font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: .2px;
  line-height: 1.45; background: linear-gradient(90deg,#00ff88,#00e0ff);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-align:center;
}
.hook-closer + p,
.hook-closer + p + p,
.hook-closer + p + p + p {
  max-width: 880px; margin: 12px auto; line-height: 1.8; font-size: 1.05rem; color: #e6e6e6;
  background: linear-gradient(90deg, rgba(0,255,136,.04), rgba(0,224,255,.03));
  border-left: 3px solid rgba(0,255,136,.45);
  border-radius: 10px; padding: 14px 16px 14px 18px;
}
.hook-closer + p strong,
.hook-closer + p + p strong,
.hook-closer + p + p + p strong { color:#00ff88; font-weight:800; }

/* 4) ปุ่ม “เริ่มอ่านต่อ” (แดงเตือน) */
#revealContent {
  background: linear-gradient(90deg,#ff3b30,#ff6a6a) !important;
  color:#000 !important; border:0 !important;
  box-shadow: 0 10px 32px rgba(255,59,48,.35);
}
#revealContent::before { content:"🔥"; margin-right:.5em; }
#revealContent::after  { content:"  →"; }

/* ปรับให้ปุ่มลอยตอนยังไม่กด (ไม่บังเนื้อหา) */
body.intro-hide #intro{ padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
body.intro-hide #revealContent{
  position: fixed !important; left:50% !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important; z-index: 9998 !important;
  max-width: min(520px, 92vw) !important; width: max-content !important;
}

/* 5) Agency Killer — ตาราง responsive */
#agency-killer { max-width: 980px; margin: 84px auto; padding: clamp(28px,5vw,44px) clamp(18px,4.6vw,32px); }
.ak-table-wrap { margin-top: clamp(16px, 3vw, 28px); background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 18px; overflow: hidden; }
.ak-table { width:100%; border-collapse: collapse; font-size: clamp(.95rem,1.6vw,1.02rem); }
.ak-table thead th { position: sticky; top:0; z-index:1; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); color:#f8eaff; text-align:left; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); white-space:nowrap; }
.ak-table tbody td { padding:14px 16px; color:#dfe2f2; vertical-align:top; border-bottom:1px solid rgba(255,255,255,.06); }
.ak-table tbody tr:nth-child(odd)  td { background: rgba(255,255,255,.02); }
.ak-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.04); }
.ak-table tbody td.ak-hi {
  color:#eafff6; font-weight:700;
  background: linear-gradient(90deg, color-mix(in oklab, #ff7ad6 8%, transparent), transparent 70%);
  border-left: 2px solid color-mix(in oklab, #ff7ad6 40%, transparent);
}
.ak-table tbody td:first-child, .ak-table thead th:first-child { min-width: 160px; width: 28%; color:#fff; font-weight:700; }
.ak-scroll-hint { text-align:center; font-size:.9rem; color:#bcbcd6; padding:10px 0 12px; background: rgba(255,255,255,.02); }
@media (max-width: 840px){ .ak-table-wrap{ overflow-x:auto; } .ak-table{ min-width:700px; } }
@media (max-width: 560px){ #agency-killer{ margin:56px 12px; border-radius:20px; } }

/* 6) Exclusive box (ดูสิทธิ์พิเศษ) — ไม่หาย/ไม่พัง */
.exclusive-box{
  display:none; opacity:0; transform: translateY(-6px);
  background: rgba(0,255,136,.08); border: 1px solid #00ff88;
  border-radius: 14px; padding: 22px; text-align: left;
  box-shadow: 0 0 25px rgba(0,255,136,.3);
  transition: opacity .3s ease, transform .3s ease;
}
.exclusive-box.show{ display:block; opacity:1; transform: translateY(0); }
.exclusive-box h3{ color:#00ff88; margin-bottom:12px; font-size:1.3rem; font-weight:700; }
.exclusive-box ul{ list-style:none; padding-left:0; color:#fff; line-height:1.7; font-size:1rem; }
.cta-exclusive{ display:block; width:100%; padding:14px 20px; background: linear-gradient(90deg,#00ff88,#00e0ff); color:#000; font-weight:700; border:none; border-radius:8px; cursor:pointer; margin-top:20px; }

/* 7) Closing – กันหาย/กัน AOS ค้าง */
body.intro-hide #closing { display:block !important; opacity:1 !important; }
#closing.fade-section { opacity:1 !important; transform:none !important; }
#closing .highlight-box{
  opacity: 1 !important; transform: none !important; animation: none !important;
}

/* 8) ลบ/ปิดใช้ “เปรียบเทียบตัวเลือกในตลาด” ทั้งบล็อค */
#comparison { display: none !important; }

/* 9) ระยะห่างพื้นฐานหลัง hero/divider ให้อ่านลื่น */
#top + .divider { margin-top: clamp(12px, 6vh, 56px); }
.divider { margin-top: 16px !important; margin-bottom: 16px !important; }

/* 10) FAQ – อย่าให้บีบกว้างเกิน/อ่านง่ายกลางจอ */
#faq .faq-question,
#faq .faq-answer {
  text-align: left !important;
  max-width: 800px;
  margin-left: auto; margin-right:auto;
}
/* === Fix: ปุ่ม "ดูสิทธิ์พิเศษ" ให้เหมือน CTA หลัก === */
#toggleExclusive{
  font-family: inherit !important;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding: 14px 28px;
  font-size: 1.15rem; font-weight: 800;
  color:#000; border:0;
  border-radius: 999px;
  background: linear-gradient(90deg,#00ff88,#00e0ff);
  box-shadow: 0 10px 32px rgba(0,255,136,.35);
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}
#toggleExclusive:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0,255,136,.45);
  filter: brightness(1.03);
}
#toggleExclusive:active{ transform: translateY(0) scale(.99); }
#toggleExclusive:focus-visible{
  outline: 3px solid #fff; outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(0,255,136,.35), 0 10px 32px rgba(0,255,136,.35);
}

/* ไอคอนลูกศรวิ่ง (เหมือน CTA อื่น ๆ) */
#toggleExclusive::after{
  content:"  →"; display:inline-block; transform: translateX(0);
  animation: exArrow 1.1s ease-in-out infinite;
}
@keyframes exArrow{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }

/* กล่องสิทธิ์พิเศษ — กันเนื้อหาถูกตัด */
.exclusive-box{
  overflow: visible; /* กันข้อความ/เงาหลุดโดนตัด */
}
/* =========================================================
   HOTFIX: Restore style for .os-section blocks + accents
   (สไตล์เท่านั้น ไม่แตะ layout)
   ========================================================= */

/* — Re-establish base look for the three sections — */
.os-section {
  /* คืนพื้นหลัง/ขอบ/เงาแบบเดิม และปลดการตัดเนื้อหา */
  background: linear-gradient(180deg, rgba(10,10,10,0.95), rgba(5,5,5,0.97)) !important;
  border: 1px solid rgba(0,255,136,0.20) !important;
  border-radius: 24px !important;
  box-shadow: 0 0 60px rgba(0,255,136,0.05) !important;
  overflow: visible !important;               /* <-- สำคัญ */
}

/* ป้องกันกฎอื่นที่ไปบีบ/ซ่อนลูกหลาน */
.os-section * {
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* — Accent per-section (ตามธีมเดิม) — */
#system-gap { --accent:#00ff88; --accent2:#00ccff; }
#memory-gap { --accent:#00d1ff; --accent2:#6a7cff; }
#engine-gap { --accent:#9dff6a; --accent2:#00ff88; }

/* หัวข้อแบบกราเดียนต์ */
.os-section .h2-grad,
.os-section h2.h2-grad{
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800;
}

/* กล่องย่อยในแต่ละ section */
.os-section .lead{
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  color: #cfcfcf;
}
.os-section .solution{
  background: color-mix(in oklab, var(--accent) 12%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  color: #e8e8e8;
}
.os-section .difference{
  background: rgba(255,255,255,0.02) !important;
  border-radius: 16px !important;
  padding: 22px !important;
}
.os-section .result{
  text-align: center !important;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 14%, transparent),
      color-mix(in oklab, var(--accent2) 14%, transparent)) !important;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent) !important;
  border-radius: 16px !important;
  padding: 26px !important;
  color: #e8e8e8;
}

/* รายการ / เน้นข้อความในบล็อก */
.os-section p{ color:#e0e0e0; line-height:1.8; }
.os-section strong{ color:#00ff88; font-weight:700; }
.os-section ul{ list-style:none; padding-left:0; margin-top:12px; }
.os-section ul li{ position:relative; padding-left:1.4em; margin:0.55em 0; }
.os-section ul li::before{
  content:"▸"; position:absolute; left:0; top:0; color:#00ff88; opacity:.85;
}
.os-section blockquote{
  border-left:3px solid #00ff88;
  background: rgba(0,255,136,0.06);
  border-radius:8px;
  padding:12px 16px;
  color:#b8f7d4;
  font-style:italic;
  margin:18px 0;
}
.os-section hr{ border:0; border-top:1px solid rgba(255,255,255,0.08); }

/* — Compound Growth: คืนโทนสี — */
.compound-growth{
  background: radial-gradient(100% 120% at 50% 0%, rgba(0,255,136,.08), rgba(0,224,255,.04)) !important;
  border-top: 1px solid rgba(0,255,136,.10) !important;
  border-bottom: 1px solid rgba(0,255,136,.10) !important;
}
.compound-growth h2.h2-grad{
  background: linear-gradient(90deg,#00ff88,#00e0ff) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}
.compound-growth ul li{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(0,255,136,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  color:#e0e0e0;
  transition: background .25s ease, border-color .25s ease;
}
.compound-growth ul li:hover{
  background: rgba(0,255,136,0.06);
  border-color: rgba(0,255,136,0.25);
}
.compound-growth h1 strong{ color:#00ff88; }
/* เปลี่ยนสีเน้นของ section Insight ให้เป็นฟ้าแทนเขียว */
#memory-gap, 
#memory-gap strong,
#memory-gap .solution strong,
#memory-gap .difference strong,
#memory-gap .result strong,
#memory-gap ul li::before,
#memory-gap blockquote {
  color: #00d1ff !important;
  border-color: rgba(0, 209, 255, 0.5) !important;
}

/* สำหรับหัวข้อ gradient */
#memory-gap .h2-grad, 
#memory-gap h2.h2-grad {
  background: linear-gradient(90deg, #00d1ff, #6a7cff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ปรับเฉดในกรอบย่อยให้แมทช์โทนฟ้า */
#memory-gap .solution {
  background: linear-gradient(135deg, rgba(0,209,255,0.08), rgba(106,124,255,0.06)) !important;
  border-color: rgba(0,209,255,0.25) !important;
}

#memory-gap .result {
  background: linear-gradient(135deg, rgba(0,209,255,0.12), rgba(106,124,255,0.08)) !important;
  border-color: rgba(0,209,255,0.3) !important;
}
/* === Tighten spacing under HERO → INTRO (gap fix) === */

/* ลดช่องว่างใต้ hero */
#top { padding-bottom: 20px !important; }
#top .cta-buy { margin-bottom: 10px !important; }

/* ลดระยะของเส้น divider หลัง hero */
#top + .divider { margin: 10px auto 12px !important; }

/* เปิด intro ให้เริ่มชิดขึ้น */
#intro { padding-top: 14px !important; }

/* กล่องคำเตือนให้ชิดขอบบนของ intro */
.hook-warning-box { margin-top: 6px !important; }

/* ปรับละเอียดสำหรับจอมือถือ */
@media (max-width: 640px){
  #top { padding-bottom: 16px !important; }
  #top .cta-buy { margin-bottom: 8px !important; }
  #top + .divider { margin: 8px auto 10px !important; }
  #intro { padding-top: 10px !important; }
  .hook-warning-box { margin-top: 4px !important; }
}
/* ========== SOLUTION (What you get) — visual upgrade ========== */
#solution{
  position: relative;
  max-width: 1100px;
  margin: 56px auto;
  padding: clamp(28px,4.2vw,44px) clamp(16px,4vw,32px);
  border-radius: 24px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(0,255,136,.08), rgba(0,224,255,.05)),
    linear-gradient(180deg, rgba(12,12,12,.96), rgba(8,8,8,.98));
  border: 1px solid rgba(0,255,136,.18);
  box-shadow: 0 0 60px rgba(0,255,136,.06);
  text-align: center;
}

/* headline gradient คงไว้ แต่เพิ่มระยะ */
#solution .h2-grad{
  margin-bottom: 6px;
}
#solution h2:nth-of-type(2){
  color:#eaeaea;
  font-weight: 900;
  font-size: clamp(1.15rem,2.4vw,1.6rem);
  letter-spacing:.2px;
  margin: 4px auto 18px;
  line-height: 1.35;
  max-width: 840px;
  position: relative;
}
#solution h2:nth-of-type(2)::after{
  content:"";
  display:block;
  width: 140px; height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg,#00ff88,#00e0ff);
  opacity:.75;
}

/* โครงสร้าง ul ที่ถูกอัดไว้ใน <p> — ทำเป็นการ์ดกริด */
#solution > p{ margin: 0; }
#solution > p > ul{
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(12px,2vw,16px);
}

/* การ์ดแต่ละข้อ */
#solution > p > ul > li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: #dfe7e4;
  line-height: 1.6;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
#solution > p > ul > li:hover{
  transform: translateY(-2px);
  background: rgba(0,255,136,.06);
  border-color: rgba(0,255,136,.28);
  box-shadow: 0 10px 26px rgba(0,255,136,.18);
}

/* ไอคอนเช็คแบบกลม + โกลว์ */
#solution > p > ul > li::before{
  content:"✓";
  display:grid; place-items:center;
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 999px;
  font-weight: 900; font-size: 14px;
  color:#000;
  background: linear-gradient(135deg,#00ff88,#00e0ff);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.5) inset,
    0 6px 18px rgba(0,255,136,.35);
  margin-top: 2px;
}

/* เน้นข้อความสำคัญในแต่ละการ์ด */
#solution > p > ul > li > strong{
  background: linear-gradient(90deg,#ffffff,#aef7ff,#00ffcc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 900;
}

/* คำอธิบายหลัง em dash ให้สีอ่านง่ายขึ้น */
#solution > p > ul > li{
  --dash: #9adbd0;
}
#solution > p > ul > li::after{ content:""; } /* กันบาง engine แปลก ๆ */

/* ระยะ/ตัวอักษรย่อย ๆ */
#solution > p > ul > li{ font-size: 1rem; }
@media (max-width: 640px){
  #solution{ margin: 44px 12px; border-radius: 20px; }
  #solution > p > ul{ gap: 10px; }
  #solution > p > ul > li{ padding: 12px 14px; }
}

/* แถบไฮไลต์เรืองๆ รอบกรอบ (สวยแต่เบา) */
#solution::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: radial-gradient(60% 40% at 50% 0%, rgba(0,255,136,.12), transparent 70%);
  z-index: -1;
}
/* --- ULTIMATE UNBLOCK FOR HERO CTA --- */
#top { position: relative; }
#top .cta-buy{
  position: relative;
  z-index: 2147483647;   /* ดันขึ้นสุด */
  pointer-events: auto;
}
#top .cta-buy::before,
#top .cta-buy::after{ pointer-events: none; }

/* ถ้าปุ่มเปิดคอนเทนต์แบบลอยยังอยู่ ให้ต่ำกว่า hero CTA */
#revealContent{ z-index: 2147483646; }

/* กัน overlay ใด ๆ ที่มี pointer-events ทับแบบโปร่งใส */
.pe-none{ pointer-events: none !important; }
/* === CTA base: ใช้กับปุ่มที่มี .cta (รวมปุ่ม "ขอใบเสนอราคา") === */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px !important;
  font-size:1.12rem !important;
  font-weight:800;
  line-height:1.2;
  border:0;
  border-radius:999px;
  color:#000;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 30px rgba(0,255,136,.22);
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, filter .2s;
}

.cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 46px rgba(0,255,136,.34);
  filter:brightness(1.03);
}

/* ปรับเฉพาะปุ่ม #requestQuote ให้กว้างและเด่นขึ้นนิด */
#requestQuote{
  min-width: min(520px, 88vw);
  margin: 18px auto 0;       /* ให้อยู่กลาง */
  display:inline-flex;        /* เผื่อถูก reset ที่อื่น */
}

/* มือถือ: ทำให้เต็มกว้างอ่านง่าย */
@media (max-width: 640px){
  #requestQuote{
    min-width: 92vw;
    padding:16px 20px !important;
    font-size:1.08rem !important;
  }
}
/* ===========================
   Milestone (timeline)
   =========================== */
#milestone{
  max-width: 1100px; margin: 64px auto; padding: 28px 18px;
  background: linear-gradient(180deg, rgba(10,10,10,.95), rgba(5,5,5,.97));
  border: 1px solid rgba(0,255,136,.20); border-radius: 24px;
  box-shadow: 0 0 60px rgba(0,255,136,.05); text-align: left;
}
#milestone .ms-head{ text-align:center; margin-bottom: 18px; }
#milestone .ms-badge{
  display:inline-block; padding:8px 14px; border-radius:999px;
  border:1px solid rgba(0,255,136,.35); color:#00ff88;
  background: rgba(255,255,255,.03); font-weight:800; letter-spacing:.3px;
}
#milestone .ms-title{
  margin:10px 0 6px; font-weight:900; line-height:1.25;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#milestone .ms-sub{ color:#cfcfcf; opacity:.9; font-size:1rem; }

/* Rail */
#milestone .ms-rail{
  list-style:none; margin: 20px auto 0; padding: 0 8px;
  max-width: 900px; position:relative;
}
#milestone .ms-rail::before{
  content:""; position:absolute; left:28px; top:0; bottom:0;
  width:2px; background: linear-gradient(180deg, rgba(0,255,136,.45), rgba(0,224,255,.35));
  border-radius:2px;
}
#milestone .ms-step{ display:flex; gap:12px; position:relative; }
#milestone .ms-step + .ms-step{ margin-top:18px; }

#milestone .ms-dot{
  position:relative; z-index:1; flex:0 0 56px; height:56px;
  display:grid; place-items:center; font-weight:900;
  color:#000; border-radius:50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 8px 26px rgba(0,255,136,.25);
}
#milestone .ms-card{
  flex:1; padding:16px 18px; border-radius:16px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
#milestone .ms-card h3{
  margin:0 0 6px; font-size:1.05rem; font-weight:800; color:#eafff6;
}
#milestone .ms-card p{
  margin:0; color:#d6d6d6; line-height:1.65;
}
#milestone .ms-card .ms-meta{
  display:inline-block; margin-top:10px; font-size:.9rem; color:#9eead1; font-weight:700;
  background: rgba(0,255,136,.08); border:1px solid rgba(0,255,136,.3);
  padding:6px 10px; border-radius:999px;
}

/* Responsive: stack on small */
@media (max-width:640px){
  #milestone .ms-rail::before{ left:22px; }
  #milestone .ms-dot{ flex-basis:46px; height:46px; font-size:.95rem; }
  #milestone .ms-card{ padding:14px; }
}

/* ===========================
   Fit-Who (audience buckets)
   =========================== */
#fit-who{
  max-width: 1100px; margin: 64px auto; padding: 28px 18px;
  background: linear-gradient(180deg, rgba(10,10,10,.95), rgba(5,5,5,.97));
  border: 1px solid rgba(0,255,136,.20); border-radius: 24px;
  box-shadow: 0 0 60px rgba(0,255,136,.05);
}
#fit-who .fw-head{ text-align:center; }
#fit-who .fw-badge{
  display:inline-block; padding:8px 14px; border-radius:999px;
  border:1px solid rgba(0,224,255,.35); color:#00e0ff;
  background: rgba(255,255,255,.03); font-weight:800;
}
#fit-who .fw-title{
  margin:10px 0 0; font-weight:900; line-height:1.25;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  background: linear-gradient(90deg, #a0f0ff, #00ff88);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Cards grid */
#fit-who .fw-grid{
  margin-top: 22px;
  display:grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
#fit-who .fw-card{
  display:flex; flex-direction:column; gap:6px;
  padding:18px; border-radius:16px; text-align:left;
  background: radial-gradient(140% 120% at 0% 0%, rgba(0,255,136,.07), rgba(0,224,255,.05));
  border:1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#fit-who .fw-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,255,136,.25);
  box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(0,255,136,.2) inset;
}
#fit-who .fw-emoji{
  font-size: 1.2rem; filter: drop-shadow(0 2px 8px rgba(0,255,136,.35));
}
#fit-who .fw-card h3{
  margin:0; font-size:1.05rem; font-weight:800; color:#eafff6;
}
#fit-who .fw-card p{
  margin:0; color:#d6d6d6; line-height:1.65;
}
/* 🔒 กันเลื่อนซ้าย-ขวา แบบไม่กวน AOS */
html { overflow-x: clip; }         /* ตัวเลือกหลัก: ไม่สร้าง scroll เลยแต่ไม่กระทบ layout */
body { overflow-x: visible; }      /* ปล่อย body ไว้ปกติ */

/* fallback ถ้าเบราว์เซอร์ไม่รองรับ clip */
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}
/* ===== Intro (Narrative) — Accent & Readability ===== */
#intro .hook-txt {
  margin: 18px auto;
  max-width: 920px;
  line-height: 1.85;
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.22rem);
  color: #e6e6e6;
}

#intro .hook-txt strong {
  font-weight: 700;
  background: linear-gradient(90deg, #00ff88 0%, #00e0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;               /* ทำให้ strong เป็นตัวอักษรไล่สี */
}

#intro .hook-txt em {
  font-style: normal;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,255,136,0.12), rgba(0,224,255,0.12));
  border: 1px solid rgba(0,255,136,0.35);
  white-space: nowrap;
}

/* Call-to-Action ที่ชวนเลื่อนอ่านต่อ */
#intro .hook-cta {
  margin: 26px auto 0;
  max-width: 920px;
  line-height: 1.9;
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.28rem);
  font-weight: 700;
  color: #ffffff;
  padding: 16px 18px;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 10% 20%, rgba(0,224,255,0.15), transparent 60%),
    radial-gradient(120% 120% at 90% 80%, rgba(0,255,136,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(0,255,136,0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

/* เส้นไฮไลต์คำว่า “เลื่อนลงมา” ให้เด้งตาแบบไม่รก */
#intro .hook-cta-line {
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
}

#intro .hook-cta-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, rgba(0,255,136,0.35), rgba(0,224,255,0.35));
  border-radius: 8px;
  transform: translateY(6px);
  filter: blur(1px);
  animation: hookUnderline 1.8s ease-in-out infinite;
}

/* ลูกศรชวนเลื่อนแบบละมุน ๆ ที่มุมกล่อง CTA */
#intro .hook-cta::before {
  content: "↓";
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 1.25rem;
  opacity: 0.7;
  transform: translateY(0);
  animation: nudgeDown 1.2s ease-in-out infinite;
}

/* ระยะห่างเล็กน้อยเหนือบล็อก (แทน <p class="hook-closer"></p> ที่เว้นช่อง) */
#intro .hook-closer {
  margin: 6px 0 10px;
}

/* เอฟเฟกต์นุ่มนวล ไม่ชนกับ AOS */
@keyframes hookUnderline {
  0%, 100% { transform: translateY(6px); opacity: 0.8; }
  50%      { transform: translateY(2px); opacity: 1; }
}

@keyframes nudgeDown {
  0%, 100% { transform: translateY(0);   opacity: 0.75; }
  50%      { transform: translateY(4px); opacity: 1;    }
}

/* Responsive tweaks */
@media (max-width: 640px) {
  #intro .hook-txt { line-height: 1.8; }
  #intro .hook-cta { padding: 14px 16px; }
}
/* WHAT YOU GET – stacked title/desc cards */
#solution .wyg-list{
  display:grid;
  gap:18px;
  max-width: 980px;
  margin: 22px auto 0;
}
#solution .wyg-item{
  position: relative;
  background: rgba(10,10,10,.55);
  border: 1px solid rgba(0,255,160,.25);
  border-radius: 16px;
  padding: 18px 20px 16px 58px;
  box-shadow: inset 0 0 0 1px rgba(0,255,160,.06), 0 10px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
}
#solution .wyg-item::before{
  content:"✓";
  position:absolute; left:16px; top:18px;
  width:28px; height:28px; line-height:28px; text-align:center;
  border-radius:999px; font-weight:700;
  color:#00150f; background: radial-gradient(100% 100% at 50% 50%, #00ffb0 0%, #00e0ff 100%);
  box-shadow: 0 0 18px rgba(0,255,160,.55);
}
#solution .wyg-title{
  margin: 0 0 6px 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #aefbea; /* เขียวอ่อนอ่านง่ายบนพื้นมืด */
}
#solution .wyg-desc{
  margin: 0;
  color: #cdd6d4;
  line-height: 1.7;
  font-size: 1.02rem;
}
#solution em{ font-style: normal; color:#a4f5ff; }
#solution strong{ color:#00ffb0; font-weight: 800; }

@media (max-width: 720px){
  #solution .wyg-item{ padding:16px 16px 14px 54px; }
  #solution .wyg-title{ font-size:1.05rem; }
  #solution .wyg-desc{ font-size: .98rem; }
}
/* --- แก้เฉพาะจุดที่เพี้ยนเท่านั้น --- */
.overflow-fix {
  overflow-x: hidden;   /* กันการเลื่อนข้างเฉพาะจุด */
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* ถ้าด้านในมี element ที่ตั้ง width:100vw อยู่ ให้บังคับเป็น % */
.overflow-fix [style*="100vw"],
.overflow-fix .full-bleed {
  width: 100% !important;
  max-width: 100% !important;
}

/* กรณีเป็นแถวแบบไอคอน + ข้อความ (flex row) ให้คอลัมน์ข้อความหดได้ */
.overflow-fix .row > *,
.overflow-fix [class*="row"] > *,
.overflow-fix .flex > * {
  min-width: 0;         /* สำคัญ: กันข้อความดันจนกองซ้าย/ขวา */
}

/* เผื่อการ์ด/คอนเทนเนอร์มี padding เยอะ ให้คิด padding ในความกว้างด้วย */
.overflow-fix .container,
.overflow-fix .card,
.overflow-fix .wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* สื่อภายในไม่ให้ดันกล่องล้น */
.overflow-fix img,
.overflow-fix video,
.overflow-fix svg,
.overflow-fix canvas {
  max-width: 100%;
  height: auto;
  display: block;
}
/* --- Fix เฉพาะ hero bubble: บังคับชิดซ้าย --- */
header#top .hero-bubbles { 
  justify-content: flex-start !important;
  align-items: stretch;
}

header#top .hero-bubble {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start !important; /* ชิดซ้าย */
  gap: .75rem;
  min-width: 0;
}

header#top .hero-emoji { 
  flex: 0 0 auto;            /* ไอคอนไม่ดันข้อความ */
}

header#top .hero-bubble-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left !important; 
  margin-left: 0 !important;  /* กันกฎ global ที่อาจตั้ง auto */
}
.hero-img {
  width: 80%;         /* ปรับให้เล็กลงจากขนาด container */
  max-width: 500px;   /* ไม่เกิน 500px */
  height: auto;       /* คงสัดส่วนภาพไว้ */
  display: block;     /* จัดให้อยู่เป็นบล็อก */
  margin: 0 auto;     /* จัดให้อยู่ตรงกลาง */
}