/* ── SPOTLIGHT CARD ──────────────────────────────────────────── */
.s-card {
  --mouse-x: 50%;
  --mouse-y: 50%;
  position:relative;
  background:var(--card);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  border:1px solid var(--border);
}
.s-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:0;
  opacity:0; transition:opacity .4s ease;
  background:radial-gradient(
    280px circle at var(--mouse-x) var(--mouse-y),
    rgba(56,189,248,.09) 0%,
    transparent 70%
  );
  pointer-events:none;
}
.s-card:hover::before { opacity:1; }
.s-card::after {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:0;
  opacity:0; transition:opacity .4s ease;
  background:radial-gradient(
    180px circle at var(--mouse-x) var(--mouse-y),
    rgba(56,189,248,.18) 0%,
    transparent 60%
  );
  pointer-events:none;
  /* this masks to just the border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite:exclude;
  padding:1px;
}
.s-card:hover::after { opacity:1; }
.s-card:hover { transform:translateY(-3px); border-color:rgba(56,189,248,.2); }
.s-card-body { position:relative; z-index:1; padding:28px; }

/* ── BENTO FEATURES ──────────────────────────────────────────── */
.bento {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.bento .s-card { grid-column:span 1; }
.bento .s-card.s-feat { grid-column:span 2; }
/* 3-col variant (used by "Built for scale and security"). Single-class
   selector so the @768 and @500 .bento mobile overrides (also single-class)
   win on cascade order instead of losing on specificity. */
.bento-3 { grid-template-columns:repeat(3,1fr); }

/* ── PILLAR TABS ─────────────────────────────────────────────── */
.pillar-tabs {
  display:inline-flex; padding:6px; gap:4px;
  background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:14px;
  margin:0 auto 48px; max-width:100%;
  flex-wrap:wrap; justify-content:center;
}
[data-theme="light"] .pillar-tabs { background:rgba(0,30,80,.03); border-color:rgba(0,30,80,.08); }
.pillar-tab {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border:none; background:transparent; border-radius:10px;
  font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;
  color:var(--muted); letter-spacing:-.005em;
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
[data-lang="th"] .pillar-tab { font-family:var(--font-th); }
.pillar-tab .material-symbols-outlined {
  font-size:18px; color:inherit;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 20;
}
.pillar-tab:hover { color:var(--text); background:rgba(56,189,248,.06); }
.pillar-tab.active {
  background:var(--sky-grad); color:#050d1a;
  box-shadow:0 6px 20px rgba(56,189,248,.32);
}
.pillar-tab.active .material-symbols-outlined { font-variation-settings:'FILL' 1,'wght' 600; }
.pillar-tab-count {
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:rgba(0,0,0,.15); color:inherit; opacity:.7;
}
.pillar-tab:not(.active) .pillar-tab-count { background:rgba(255,255,255,.04); }

.pillar-panels-wrap { position:relative; min-height:300px; }
.pillar-panel {
  display:none; opacity:0;
  animation:panel-in .45s cubic-bezier(.16,1,.3,1) forwards;
}
.pillar-panel.active { display:block; }
@keyframes panel-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.pillar-meta {
  text-align:center; max-width:580px; margin:0 auto 32px;
  font-size:14px; color:var(--muted); line-height:1.65;
}
.pillar-meta strong { color:var(--text); font-weight:700; }

/* Desktop default — wrap centers the pillar-tabs (replaces the old inline text-align:center). */
.pillar-tabs-wrap { text-align:center; }

/* ── PILLAR TABS — sticky on mobile so visitors can switch
   pillars from anywhere inside a long panel without scrolling back up. */
@media(max-width:768px){
  /* display:contents on the wrap removes it from the box tree so .pillar-tabs
     becomes a direct child of .wrap (which contains the panels too) — sticky
     can now engage across the entire features section. */
  .pillar-tabs-wrap { display:contents; }
  .pillar-tabs {
    position:sticky; top:64px; z-index:50;
    display:flex; width:100%; max-width:100%;
    margin:0 0 24px;
    background:rgba(10,10,10,.92);
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    border-color:rgba(255,255,255,.08);
    box-shadow:0 6px 20px rgba(0,0,0,.32);
    padding:6px;
  }
  [data-theme="light"] .pillar-tabs {
    background:rgba(238,243,250,.94);
    border-color:rgba(0,30,80,.08);
    box-shadow:0 4px 16px rgba(0,30,80,.1);
  }
  .pillar-tab { flex:1 1 auto; justify-content:center; }
  /* Anchor jumps land just below the sticky tab bar instead of underneath it */
  .pillar-panels-wrap, [id^="panel-"] { scroll-margin-top:140px; }
}
@media(max-width:640px){
  .pillar-tabs { padding:4px; gap:2px; }
  .pillar-tab { padding:9px 14px; font-size:13px; }
  .pillar-tab .material-symbols-outlined { font-size:16px; }
}

.feat-icon {
  width:46px; height:46px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(129,140,248,.08));
  border:1px solid rgba(56,189,248,.18);
  color:var(--sky);
}
.feat-icon .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
[data-theme="light"] .feat-icon {
  background:linear-gradient(135deg, rgba(56,189,248,.14), rgba(129,140,248,.08));
  border-color:rgba(14,165,233,.25);
  color:var(--sky-dim);
}
.feat-title { font-size:15px; font-weight:700; margin-bottom:7px; color:var(--text); letter-spacing:-.01em; }
.feat-desc  { font-size:13px; color:var(--muted); line-height:1.65; }
.feat-tags  { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.feat-tag {
  padding:2px 8px; border-radius:4px;
  font-size:10px; font-weight:700; letter-spacing:.03em;
  background:rgba(255,255,255,.04); color:var(--dim); border:1px solid var(--border);
  text-transform:uppercase;
}

/* ── SHOWCASE ────────────────────────────────────────────────── */
.showcase-item {
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:center; padding:64px 0;
  border-bottom:1px solid var(--border);
}
.showcase-item:last-child { border-bottom:none; }
.showcase-item:nth-child(even) .showcase-vis { order:-1; }

.show-label { font-size:11px; font-weight:700; color:var(--sky); text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; opacity:.85; }
.show-title { font-size:30px; font-weight:800; line-height:1.13; letter-spacing:-.025em; margin-bottom:14px; text-wrap:balance; }
.show-desc  { font-size:15px; color:var(--muted); line-height:1.75; margin-bottom:24px; }
.show-list  { list-style:none; display:flex; flex-direction:column; gap:10px; }
.show-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted); }
.show-check {
  width:20px; height:20px; min-width:20px; border-radius:50%;
  background:rgba(52,211,153,.12); color:var(--emerald);
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.show-check .material-symbols-outlined { font-size:14px; font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 20; }

.showcase-vis {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:24px;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
}

/* mock widgets */
.mock-row { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:var(--r-sm); background:rgba(255,255,255,.025); border:1px solid var(--border); margin-bottom:8px; transition:background .2s; }
.mock-row:hover { background:rgba(255,255,255,.04); }
.mock-row-label { font-size:12px; color:var(--muted); }
.mock-row-val   { font-size:16px; font-weight:800; letter-spacing:-.02em; }
.mock-row-val.gold    { color:var(--sky); }
.mock-row-val.blue    { color:var(--blue); }
.mock-row-val.emerald { color:var(--emerald); }
.progress-wrap { margin-top:10px; }
.progress-meta { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:6px; }
.progress-meta span:last-child { color:var(--emerald); font-weight:700; }
.progress-bar { height:6px; border-radius:100px; background:rgba(255,255,255,.05); overflow:hidden; }
.progress-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--sky-dim),var(--sky)); }

.esign-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.esign-title  { font-size:13px; font-weight:700; color:var(--text); }
.badge-status { padding:3px 10px; border-radius:4px; font-size:10px; font-weight:700; background:rgba(52,211,153,.12); color:var(--emerald); }
.signer { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:var(--r-sm); background:rgba(255,255,255,.025); border:1px solid var(--border); margin-bottom:7px; transition:background .2s; }
.signer:hover { background:rgba(255,255,255,.04); }
.signer-name { font-size:12px; font-weight:600; color:var(--text); }
.signer-role { font-size:10px; color:var(--muted); }
.signer-sig  { font-family:'Georgia',serif; font-style:italic; font-size:14px; color:var(--sky); }
.signer-pending { font-size:11px; color:var(--amber); }

.notif-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm); background:rgba(255,255,255,.025); border:1px solid var(--border); margin-bottom:7px; transition:background .2s; }
.notif-row:hover { background:rgba(255,255,255,.04); }
.notif-icon { width:32px; height:32px; border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center; min-width:32px; background:rgba(56,189,248,.1); color:var(--sky); }
.notif-icon .material-symbols-outlined { font-size:18px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20; }
.notif-channel { font-size:11px; font-weight:700; color:var(--text); }
.notif-text { font-size:11px; color:var(--muted); }
.notif-badge { margin-left:auto; padding:2px 7px; border-radius:4px; font-size:9px; font-weight:700; }
.notif-sent   { background:rgba(52,211,153,.12); color:var(--emerald); }
.notif-queued { background:rgba(56,189,248,.12); color:var(--sky); }

/* ── THAILAND ────────────────────────────────────────────────── */
.th-section { background:linear-gradient(180deg,var(--bg),rgba(56,189,248,.02),var(--bg)); }
.th-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.th-card {
  padding:28px; text-align:center;
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.th-icon {
  width:56px; height:56px; margin:0 auto 14px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(129,140,248,.08));
  border:1px solid rgba(56,189,248,.22);
  color:var(--sky);
}
.th-icon .material-symbols-outlined {
  font-size: 28px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 28;
}
[data-theme="light"] .th-icon { color:var(--sky-dim); border-color:rgba(14,165,233,.28); }
.th-title { font-size:15px; font-weight:700; margin-bottom:8px; color:var(--text); letter-spacing:-.01em; }
.th-desc  { font-size:13px; color:var(--muted); line-height:1.6; }

/* ── PRICING ─────────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pricing-card {
  padding:32px 24px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); position:relative; display:flex; flex-direction:column;
  transition:border-color .3s ease;
}
.pricing-card:hover { border-color:rgba(56,189,248,.18); }
.pricing-card.featured {
  border-color:rgba(56,189,248,.35);
  background:linear-gradient(160deg,rgba(56,189,248,.04) 0%,var(--card) 50%);
  box-shadow:0 0 48px rgba(56,189,248,.07);
}
.pricing-badge {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  padding:3px 12px; border-radius:4px;
  background:var(--sky); color:#080808;
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap;
}
.pricing-name { font-size:17px; font-weight:700; margin-bottom:5px; color:var(--text); letter-spacing:-.01em; }
.pricing-desc { font-size:13px; color:var(--muted); margin-bottom:22px; }
.pricing-amount { font-size:34px; font-weight:900; color:var(--text); letter-spacing:-.04em; }
.pricing-price { min-height:52px; display:flex; align-items:baseline; margin-bottom:4px; }
.pricing-period { font-size:13px; color:var(--muted); margin-left:4px; }
.pricing-features { list-style:none; display:flex; flex-direction:column; gap:10px; margin:24px 0 28px; flex:1; }
.pricing-features li { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); }
.pricing-features li::before {
  content:'check'; color:var(--emerald);
  font-family:'Material Symbols Outlined'; font-weight:400; font-size:16px;
  font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 20;
  width:18px; min-width:18px; text-align:center; line-height:1;
  font-feature-settings:'liga';
}
.pricing-features li.off { opacity:.4; text-decoration:line-through; }
.pricing-features li.off::before { content:'close'; color:var(--muted); }

.pricing-btn {
  width:100%; padding:12px; border-radius:var(--r-xs); border:none;
  font-size:13px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:all .25s cubic-bezier(.16,1,.3,1); letter-spacing:-.01em;
}
.pricing-btn-gold { background:var(--sky-grad); color:#050d1a; box-shadow:0 4px 16px rgba(56,189,248,.25); }
.pricing-btn-gold:hover { background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 55%,#a5b4fc 100%); box-shadow:0 8px 28px rgba(56,189,248,.42); transform:translateY(-1px); }
.pricing-btn-gold:active { transform:scale(.98); }
.pricing-btn-outline { background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--muted); }
.pricing-btn-outline:hover { border-color:rgba(56,189,248,.25); color:var(--text); background:rgba(56,189,248,.04); }
.pricing-btn-outline:active { transform:scale(.98); }

/* ── MODERN VALUE COMPARISON ───────────────────────────────── */
.value-modern {
  max-width:1200px; margin:72px auto 0;
  position:relative;
}
.value-modern-header { text-align:center; max-width:700px; margin:0 auto 48px; }
.value-modern-eyebrow {
  display:inline-block; font-size:11px; font-weight:700; color:var(--rose);
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:14px;
  padding:5px 12px; background:rgba(251,113,133,.08); border:1px solid rgba(251,113,133,.2); border-radius:var(--r-xs);
}
.value-modern-title {
  font-size:clamp(32px,4.2vw,46px); font-weight:800;
  letter-spacing:-.025em; line-height:1.15; text-wrap:balance; margin-bottom:14px;
}
.value-modern-title em {
  font-style:italic;
  background:var(--sky-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.value-modern-desc { font-size:16px; color:var(--muted); line-height:1.75; }

.value-modern-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}

.value-modern-card {
  padding:24px 22px; background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  position:relative; overflow:hidden; transition:transform .3s ease, border-color .3s ease;
  display:flex; flex-direction:column;
}
.value-modern-card:hover { transform:translateY(-3px); }

/* CROSS (red) cards */
.value-modern-cross { opacity:.85; }
.value-modern-cross:hover { opacity:1; border-color:rgba(251,113,133,.22); }
.value-modern-cross .value-modern-card-tag {
  font-size:11px; font-weight:700; color:var(--rose); letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:14px;
}
.value-modern-cross .value-modern-card-price {
  font-size:32px; font-weight:800; color:var(--muted); letter-spacing:-.03em;
  line-height:1; margin-bottom:6px;
}
.value-modern-cross .value-modern-card-price s { text-decoration:line-through; text-decoration-color:rgba(251,113,133,.7); text-decoration-thickness:2px; }
.value-modern-card-period { font-size:12px; color:var(--dim); margin-bottom:18px; line-height:1.45; }

/* WIN (sky) card */
.value-modern-win {
  background:linear-gradient(160deg, rgba(56,189,248,.08) 0%, var(--card) 60%);
  border-color:rgba(56,189,248,.35);
  box-shadow:0 0 48px rgba(56,189,248,.08);
}
.value-modern-win::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--sky), transparent);
}
.value-modern-card-tag-win {
  display:inline-block; font-size:11px; font-weight:700; color:var(--sky); letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:14px;
  padding:4px 10px; background:rgba(56,189,248,.1); border-radius:99px;
}
.value-modern-card-price-win {
  font-size:36px; font-weight:900;
  background:var(--sky-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:-.035em; line-height:1; margin-bottom:6px;
  display:inline-flex; align-items:baseline; gap:4px;
}
.value-modern-card-period-inline {
  font-size:14px; font-weight:600; color:var(--muted);
  -webkit-text-fill-color:var(--muted);
}

/* Lists */
.value-modern-card-list {
  list-style:none; display:flex; flex-direction:column; gap:9px;
  padding-top:14px; border-top:1px dashed var(--border);
}
.value-modern-card-list li {
  display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; color:var(--muted); line-height:1.5;
}
.value-modern-card-list li .material-symbols-outlined {
  font-size:14px; flex-shrink:0; margin-top:2px;
  font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 18;
}
.value-modern-cross .value-modern-card-list li .material-symbols-outlined { color:var(--rose); }
.value-modern-card-list-win li .material-symbols-outlined {
  color:var(--emerald);
  width:18px; height:18px; border-radius:50%; background:rgba(52,211,153,.14);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px;
}
.value-modern-card-list-win li { color:var(--text); font-weight:500; }

/* Savings banner */
.value-modern-savings {
  margin-top:32px; padding:20px 28px;
  background:linear-gradient(90deg, rgba(56,189,248,.08), rgba(129,140,248,.06));
  border:1px solid rgba(56,189,248,.2); border-radius:var(--r);
  display:flex; align-items:center; gap:16px;
  font-size:15px; color:var(--text); line-height:1.65;
}
.value-modern-savings .material-symbols-outlined {
  color:var(--sky); font-size:28px;
  font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 28;
  flex-shrink:0;
}
.value-modern-savings strong { background:var(--sky-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:800; }

@media(max-width:1100px){ .value-modern-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){
  .value-modern-grid { grid-template-columns:1fr; }
  .value-modern-savings { flex-direction:column; text-align:center; }
}

/* Legacy value-box (kept for safe fallback, not rendered) */
.value-box {
  max-width:1100px; margin:56px auto 0; padding:40px;
  background:rgba(56,189,248,.03);
  border:1px solid rgba(56,189,248,.12); border-radius:var(--r); position:relative; overflow:hidden;
}
.value-box::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--sky),transparent); }
.value-title { font-size:20px; font-weight:800; text-align:center; margin-bottom:6px; letter-spacing:-.02em; }
.value-sub { text-align:center; color:var(--muted); font-size:13px; margin-bottom:28px; }
.value-cols { display:grid; grid-template-columns:repeat(3,1fr) auto 1fr; gap:0; align-items:center; }
.value-col { text-align:center; padding:16px; }
.value-col-label { font-size:12px; color:var(--muted); margin-bottom:6px; }
.value-col-price { font-size:24px; font-weight:800; color:var(--rose); letter-spacing:-.03em; }
.value-col-note { font-size:10px; color:var(--dim); margin-top:3px; }
.value-vs { display:flex; align-items:center; justify-content:center; }
.value-vs span { font-size:10px; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.12em; }
.value-hero-col { text-align:center; padding:24px; background:rgba(56,189,248,.05); border:1px solid rgba(56,189,248,.2); border-radius:var(--r-sm); }
.value-hero-label { font-size:11px; font-weight:700; color:var(--sky); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.value-hero-price { font-size:36px; font-weight:900; color:var(--sky); letter-spacing:-.04em; }
.value-hero-note { font-size:11px; color:var(--muted); margin-top:4px; }
.value-saving { text-align:center; margin-top:20px; padding:12px; background:rgba(56,189,248,.06); border-radius:var(--r-sm); font-size:14px; font-weight:700; color:var(--sky); }

/* ── CTA ─────────────────────────────────────────────────────── */
.cta-section { padding:96px 0; position:relative; overflow:hidden; }
.cta-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 50% at 50% 60%,rgba(56,189,248,.07) 0%,transparent 65%);
}
.cta-inner { text-align:center; max-width:540px; margin:0 auto; position:relative; z-index:1; }
.cta-tag { display:inline-block; font-size:11px; font-weight:700; color:var(--sky); text-transform:uppercase; letter-spacing:.1em; margin-bottom:24px; opacity:.8; }
.cta-title { font-size:clamp(30px,4vw,46px); font-weight:800; margin-bottom:14px; letter-spacing:-.028em; text-wrap:balance; }
.cta-desc { font-size:16px; color:var(--muted); margin-bottom:40px; line-height:1.75; }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── FOOTER (modern) ─────────────────────────────────────────── */
.footer {
  padding:72px 0 32px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, transparent 0%, rgba(56,189,248,.02) 100%);
  position:relative;
}
.footer::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:240px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.5), transparent);
}
/* Footer-only widening — gives the brand column room for the description on 2 lines
   and lets both compliance badges sit side-by-side without wrapping. */
.footer .wrap { max-width:1440px; }

.footer-top {
  display:grid; grid-template-columns:minmax(480px, 1.5fr) minmax(0, 2.5fr);
  gap:48px; margin-bottom:0;
  padding-bottom:0;
}

.footer-brand { max-width:560px; }
.footer-brand-desc {
  font-size:14px; color:var(--muted); line-height:1.75; margin:18px 0 24px;
}

.footer-socials { display:flex; gap:8px; align-items:center; position:relative; }
/* Label is positioned OUTSIDE the centered group so the 4 icons themselves
   land on the visual centre line of the footer row, not the centre of
   (label + icons). */
.footer-socials-label {
  position:absolute;
  right:calc(100% + 10px);
  top:50%; transform:translateY(-50%);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--muted); text-transform:none;
  white-space:nowrap;
}
@media (max-width:760px){
  /* On mobile: label sits above the icons, icons stay HORIZONTAL in a row. */
  .footer-socials {
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    padding-top:24px;  /* leave room above for the label */
  }
  .footer-socials-label {
    position:absolute;
    top:0; left:50%;
    right:auto;
    transform:translateX(-50%);
    margin:0;
  }
}
.footer-social-icon {
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; flex-shrink:0;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  color:var(--muted);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, color .25s ease, background .25s ease, border-color .25s ease;
}
.footer-social-icon svg { width:16px; height:16px; }
.footer-social-icon:hover { transform:translateY(-2px) scale(1.06); }
[data-theme="light"] .footer-social-icon { background:#fff; border-color:rgba(0,30,80,.08); }

/* ── "Compliant by design" badges in the brand column ─────────── */
.footer-badges-label {
  font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
  margin-bottom:12px;
}
.footer-badges { display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
.footer-badge { white-space:nowrap; flex:0 1 auto; }
.footer-badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:12px;
  background:rgba(56,189,248,.05);
  border:1px solid rgba(56,189,248,.16);
  color:var(--muted);
  text-decoration:none;
  transition:border-color .25s ease, background .25s ease;
}
.footer-badge, .footer-badge * { text-decoration:none !important; }
.footer-badge:hover { border-color:rgba(56,189,248,.32); background:rgba(56,189,248,.08); }
.footer-badge-icon {
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg, rgba(56,189,248,.18), rgba(129,140,248,.1));
  color:var(--sky); display:flex; align-items:center; justify-content:center;
}
.footer-badge-icon .material-symbols-outlined { font-size:16px; font-variation-settings:'FILL' 1,'wght' 600; }
.footer-badge-text { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.footer-badge-title { font-size:12.5px; font-weight:700; color:var(--text); letter-spacing:-.005em; }
.footer-badge-sub   { font-size:10.5px; color:var(--dim); margin-top:2px; }
[data-theme="light"] .footer-badge { background:rgba(56,189,248,.04); border-color:rgba(14,165,233,.16); }
[data-theme="light"] .footer-badge:hover { border-color:rgba(14,165,233,.3); background:rgba(56,189,248,.06); }

/* Bangkok office block — under the newsletter signup in the right column */
.footer-office {
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:6px;
}
.footer-office-label {
  font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.footer-office-addr {
  font-size:13px; line-height:1.6; color:var(--muted);
  font-style:normal; max-width:420px;
}
.footer-office-contact {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:400; color:var(--muted); line-height:1.6;
  text-decoration:none; width:fit-content;
  border-bottom:1px dashed transparent; transition:color .2s, border-color .2s;
}
.footer-office-contact:hover { color:var(--sky); border-bottom-color:rgba(56,189,248,.5); }
.footer-office-contact .material-symbols-outlined {
  font-size:18px; color:var(--sky);
  font-variation-settings:'FILL' 1,'wght' 500;
}

/* Social icons — uniform mono: transparent bg + dark grey glyph at rest,
 * filled with each platform's original brand color on hover. */
.footer-social-instagram,
.footer-social-facebook,
.footer-social-line,
.footer-social-linkedin,
.footer-social-youtube {
  color: #475569 !important;
  background: transparent !important;
  border-color: var(--border) !important;
}
/* Hover — restore each platform's original brand color */
.footer-social-instagram:hover {
  color: #fff !important;
  background: linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(220,39,67,.38) !important;
}
.footer-social-facebook:hover {
  color: #fff !important;
  background: #1877f2 !important;
  border-color: #1877f2 !important;
  box-shadow: 0 10px 24px rgba(24,119,242,.42) !important;
}
.footer-social-line:hover {
  color: #fff !important;
  background: #06c755 !important;
  border-color: #06c755 !important;
  box-shadow: 0 10px 24px rgba(6,199,85,.42) !important;
}
.footer-social-linkedin:hover {
  color: #fff !important;
  background: #0a66c2 !important;
  border-color: #0a66c2 !important;
  box-shadow: 0 10px 24px rgba(10,102,194,.42) !important;
}
.footer-social-youtube:hover {
  color: #fff !important;
  background: #ff0000 !important;
  border-color: #ff0000 !important;
  box-shadow: 0 10px 24px rgba(255,0,0,.42) !important;
}

.footer-cols {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.7fr);
  gap:36px;
}
.footer-col-title { white-space:nowrap; }

/* Newsletter signup — 3rd footer column, fused input+button */
.footer-newsletter-desc { font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 14px; }
.footer-newsletter-form {
  display:flex; gap:0; max-width:420px;
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.04);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.footer-newsletter-form:focus-within {
  border-color:var(--sky);
  background:rgba(56,189,248,.04);
  box-shadow:0 0 0 3px rgba(56,189,248,.15);
}
.footer-newsletter-input {
  flex:1; min-width:0;
  padding:11px 14px; border:none; background:transparent;
  color:var(--text); font-family:inherit; font-size:13px;
  outline:none;
}
.footer-newsletter-input::placeholder { color:var(--dim); }
[data-theme="light"] .footer-newsletter-form { background:#fff; }
.footer-newsletter-btn {
  flex-shrink:0; padding:0 18px; border:none; cursor:pointer;
  background:var(--sky-grad); color:#050d1a;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:-.005em;
  transition:background .35s ease, opacity .2s ease;
}
.footer-newsletter-btn:hover { background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 55%,#a5b4fc 100%); }
.footer-newsletter-btn:disabled { opacity:.55; cursor:wait; }

/* ── Payment-accepted strip (between footer-cols and footer-bottom) ────
 * Single-color row of pills. PromptPay, Visa, Mastercard, TrueMoney
 * and SWIFT/wire transfer. Monochrome via currentColor so it never
 * fights the sky-blue brand — hover lifts color + adds sky-glow bg. */
.footer-payments {
  display: flex; flex-direction: column; gap: 10px;
}
/* Strip now lives inside .footer-brand right after the badges — keep a small
   margin-top for vertical separation, but no border or giant padding (the
   old full-width variant created a huge empty gap below the right column
   because the brand col was shorter than the cols col). */
.footer-payments-in-brand { margin-top: 22px; max-width: 560px; }
.footer-payments-in-brand .footer-payments-row { flex-wrap: nowrap; }
@media (max-width: 640px) {
  /* Mobile: allow wrap because brand col is full-width and 5 pills won't fit */
  .footer-payments-in-brand .footer-payments-row { flex-wrap: wrap; gap: 6px; }
}
.footer-payments-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.footer-payments-row {
  display: flex; gap: 5px; flex-wrap: nowrap; align-items: center;
}
.footer-pay-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 10.5px; font-weight: 600;
  color: var(--muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="light"] .footer-pay-pill { background: rgba(0,30,80,.03); }
.footer-pay-pill:hover {
  border-color: var(--border-sky);
  color: var(--text);
  background: var(--sky-glow);
}
.footer-pay-ic { width: 18px; height: 12px; flex-shrink: 0; }
.footer-pay-ic.is-square { width: 13px; height: 13px; }
@media (max-width: 640px) {
  /* Allow wrap only on small mobile — desktop stays single line */
  .footer-payments-row { gap: 6px; flex-wrap: wrap; }
  .footer-pay-pill { padding: 5px 8px; font-size: 11px; }
  .footer-pay-ic { width: 22px; height: 14px; }
  .footer-pay-ic.is-square { width: 16px; height: 16px; }
}
.footer-newsletter-msg {
  margin-top:10px; font-size:12px; line-height:1.5;
  color:var(--emerald); min-height:1em;
  display:none;
}
.footer-newsletter-msg.show { display:block; }
.footer-newsletter-msg.err { color:#fb7185; }
.footer-newsletter-note { margin-top:10px; font-size:11px; color:var(--dim); line-height:1.5; }

.footer-col-title {
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.14em;
  color:var(--text); margin-bottom:18px;
}
.footer-links { list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer-links a {
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:500;
  transition:color .2s ease, transform .2s ease;
  display:inline-block; white-space:nowrap;
}
.footer-links a:hover { color:var(--sky); transform:translateX(3px); }

.footer-bottom {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
  padding-top:20px;
  margin-top:18px;
  /* Very light hairline separating sub-footer (copyright/socials/legal)
     from main footer (brand+columns+payments). Visible on light bg,
     near-invisible on dark — exactly the discreet level needed. */
  border-top:1px solid rgba(15,23,42,.06);
  font-size:12px; color:var(--dim);
}
[data-theme="light"] .footer-bottom { border-top-color:rgba(15,23,42,.08); }
/* Reserve safe gutters so the floating buttons (back-to-top arrow on
   the left, LINE chat fab on the right) don't sit on top of the text.
   Left  arrow is ~52px wide; right LINE pill is ~72px wide. */
.footer-bottom-left   { justify-self:start; padding-left:72px; }
.footer-bottom-center { justify-self:center; }
.footer-bottom-right  { justify-self:end;   padding-right:96px; text-align:right; }
.footer-copyright { font-weight:500; }
.footer-tagline { color:var(--dim); font-size:11.5px; letter-spacing:.01em; }

@media(max-width:1100px){
  .footer-cols { grid-template-columns:1fr 1.1fr 1.6fr; gap:28px; }
}
@media(max-width:900px){
  .footer-top { grid-template-columns:1fr; gap:36px; }
  /* 3 cols collapse: Product + Company side-by-side on row 1, Newsletter full-width on row 2 */
  .footer-cols { grid-template-columns:1fr 1fr; gap:36px 24px; }
  .footer-col-newsletter { grid-column:span 2; }
  .footer-newsletter-form { max-width:480px; }
}
@media(max-width:640px){
  .footer-cols { grid-template-columns:1fr 1fr; gap:32px 24px; }
  .footer-col-newsletter { grid-column:span 2; }
  .footer-bottom {
    grid-template-columns:1fr; gap:14px;
    text-align:center;
  }
  .footer-bottom-left, .footer-bottom-center, .footer-bottom-right {
    justify-self:center; text-align:center;
    /* On mobile the row stacks vertically so the desktop "safe gutter"
       paddings would push items off-centre. Reset them. */
    padding-left:0; padding-right:0;
  }
  .footer-legal-links { justify-content:center; }
}
@media(max-width:480px){
  .footer-cols { grid-template-columns:1fr; }
  .footer-col-newsletter { grid-column:span 1; }
}

/* Legal links in the bottom bar (right side) */
.footer-legal-links {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:12px;
}
.footer-legal-links a {
  color:var(--dim); text-decoration:none;
  transition:color .2s ease;
}
.footer-legal-links a:hover { color:var(--sky); }
.footer-legal-links .sep {
  width:3px; height:3px; border-radius:50%; background:var(--dim); opacity:.5;
}

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes float      { 0%,100%{ transform:translateY(0);    } 50%{ transform:translateY(-10px); } }
@keyframes pulse-glow { 0%,100%{ opacity:.4; }                 50%{ opacity:1; } }
@keyframes slide-up   { from{ opacity:0; transform:translateY(32px); } to{ opacity:1; transform:translateY(0); } }

.reveal       { opacity:0; transform:translateY(36px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.reveal-left  { opacity:0; transform:translateX(-48px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.reveal-right { opacity:0; transform:translateX(48px);  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.visible      { opacity:1 !important; transform:none !important; }

/* ── Reveal animations: disabled on mobile + reduced-motion ──
 * On mobile, the opacity:0 start state caused a perceived layout-shift
 * on first paint: visitors had to scroll to the bottom + back up to
 * "recalibrate" the page because the IntersectionObserver fired late.
 * On phones the animation adds no value (everything is already in
 * viewport quickly during scroll) so we just show content immediately. */
@media (max-width: 760px) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.d1{ transition-delay:.08s; } .d2{ transition-delay:.16s; } .d3{ transition-delay:.24s; }
.d4{ transition-delay:.32s; } .d5{ transition-delay:.40s; } .d6{ transition-delay:.48s; }

/* hero initial */
.hero-eyebrow { animation:slide-up .7s ease-out both; }
.hero-title   { animation:slide-up .7s ease-out .1s both; }
.hero-desc    { animation:slide-up .7s ease-out .2s both; }
.hero-actions { animation:slide-up .7s ease-out .3s both; }
.hero-visual  { animation:slide-up 1s ease-out .4s both; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1100px){
  .hero-content{ grid-template-columns:1fr; gap:48px; }
  .hero-visual { max-width:600px; margin:0 auto; }
  .hero-stage { transform:none; }
  .bento { grid-template-columns:repeat(3,1fr); }
  .bento .s-card, .bento .s-card.s-feat { grid-column:span 1; }
  .pricing-grid{ grid-template-columns:1fr 1fr; }
  .pricing-card.featured{ transform:none; }
  .value-cols{ grid-template-columns:1fr; gap:12px; }
  .value-vs{ padding:8px 0; }
}
@media(max-width:768px){
  
  .nav-links {
    display:none;
    position:fixed; top:65px; left:0; right:0; z-index:998;
    flex-direction:column; gap:0;
    background:rgba(8,8,8,.97); backdrop-filter:blur(24px) saturate(150%);
    border-bottom:1px solid var(--border);
    padding:20px 28px 28px;
  }
  .nav.menu-open .nav-links { display:flex; }
  .nav.menu-open .nav-links a {
    padding:14px 0; font-size:16px; color:var(--text);
    border-bottom:1px solid var(--border); display:block; width:100%;
  }
  .nav.menu-open .nav-links .nav-cta {
    margin-top:12px; text-align:center; border-bottom:none;
    padding:12px; border-radius:var(--r-xs); display:block; width:100%;
    box-shadow:none;
  }
  
  .hero-desc{ font-size:15px; }
  .hero-content{ gap:36px; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento .s-card, .bento .s-card.s-feat { grid-column:span 1; }
  .showcase-item{ grid-template-columns:1fr; gap:36px; }
  .showcase-item:nth-child(even) .showcase-vis{ order:0; }
  .th-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-item{ border-right:none; border-bottom:1px solid var(--border); padding:16px; }
  .stat-item:nth-child(even){ border-right:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  .section{ padding:56px 0; }
  .constat{ padding:56px 0; }
  .scenarios{ padding:56px 0; }
  .diag{ padding:56px 0; }
  .cta-section{ padding:64px 0; }
  .proof-bar{ padding:20px 0; }
  .sec-header, .sec-header-center{ margin-bottom:36px; }
  .hero{ padding:88px 0 56px; min-height:auto; }

  /* ── MOBILE HERO HARD RESET ──────────────────────────────────
     Some larger phones (e.g. iPhone 14 Pro Max @ 430px) showed
     content drifting right because parent paddings were asymmetric
     after the absolute-positioned hero-floats and hero-bg-orbs got
     clipped by overflow:hidden. We hard-force symmetric padding on
     the hero wrap and zero margin on every direct hero descendant. */
  .hero { padding-left:0; padding-right:0; }
  .hero .wrap-wide {
    padding-left:20px !important;
    padding-right:20px !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box;
  }
  .hero-content,
  .hero-text,
  .hero-visual {
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
  }

  /* Mobile hero CTA: primary button centered, ghost stays compact with glow.
     Both children of .hero-actions are centred horizontally in their column. */
  .hero-actions {
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:14px;
  }
  /* Primary "Free 20-min diagnostic" button — capped width, centred, text
     wraps onto 2 lines on narrow phones via display:block (inline-flex
     refuses to wrap, so we override it explicitly here). */
  .hero-actions .btn-magnetic-wrap {
    display:block;
    width:100%;
    max-width:320px;
    margin:0 auto;
  }
  .hero-actions .btn-primary {
    display:block !important;
    width:100%; max-width:100%;
    text-align:center;
    white-space:normal !important;
    word-break:keep-all;
    overflow-wrap:break-word;
    line-height:1.3;
    padding:14px 18px;
    box-sizing:border-box;
  }
  /* "Try it live" — natural compact width + subtle sky glow */
  .hero-actions .btn-ghost {
    width:auto;
    box-shadow:0 2px 12px rgba(56,189,248,0.14);
  }
  .hero-actions .btn-ghost:hover {
    box-shadow:0 4px 18px rgba(56,189,248,0.26);
    transform:translateY(-1px);
  }

  /* Dashboard mock-up: hard-clamp every descendant to its parent width so no
     interior table/chart can push the container past the viewport. */
  .hero-visual,
  .hero-visual *,
  .dash-wrap,
  .dash-wrap * {
    max-width:100% !important;
    box-sizing:border-box;
  }
  .hero-visual { width:100%; margin:0 auto; }
  .dash-wrap { width:100%; margin:0 auto; overflow:hidden; }

  /* Belt-and-braces against horizontal scroll from any rogue element */
  html, body { overflow-x:hidden; max-width:100vw; }
  .kpi-row { grid-template-columns:1fr 1fr; }
  .pricing-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:500px){
  .pricing-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-float{ display:none; }
  .bento{ grid-template-columns:1fr; }
}

/* ── PHONE TIGHTENING (≤ 480px) ─────────────────────────────────
   Final mobile pass — caps oversized headlines, shrinks chunky stats,
   tightens wrap padding, and makes sure long French/Thai strings have
   somewhere to wrap. */
@media(max-width:480px){
  .wrap { padding:0 18px; }
  body { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

  /* Headlines that were sized for desktop */
  
  .hero-desc   { font-size:14.5px; }
  .sec-title   { font-size:clamp(24px,7vw,32px); line-height:1.18; }
  .diag-title  { font-size:clamp(30px,8vw,38px); line-height:1.1; }
  .constat-title { font-size:clamp(24px,6.5vw,32px); }
  .scenarios-header h2 { font-size:clamp(24px,6.5vw,32px); }

  /* Chunky numbers shrink so they don't push card width */
  .stat-num      { font-size:clamp(28px,8vw,36px); }
  .stat-label    { font-size:12px; }
  .pricing-amount { font-size:28px; }
  .kpi-value     { font-size:17px; }

  /* Cards & containers */
  .s-card        { padding:20px 18px; }
  .scenario-card { padding:24px 20px; }
  .constat-card  { padding:22px 18px; }
  .pricing-card  { padding:24px 20px; }
  .feat-tag      { font-size:10px; }

  /* Live-demo cards — credentials chip wraps to two lines instead of overflowing */
  .live-demo-creds { padding:9px 12px; font-size:11px; }
  .live-demo-creds > span { flex-basis:100%; }

  /* Footer — compliance badges stack again on the narrowest phones so neither
     chip clips. Inputs + buttons sit a bit tighter. */
  .footer-badges { flex-direction:column; align-items:stretch; }
  .footer-badge  { width:100%; }
  .footer-newsletter-input { font-size:12.5px; padding:10px 12px; }
  .footer-newsletter-btn   { padding:0 14px; font-size:12.5px; }

  /* Make sure the Nisa chat FAB never covers a CTA. */
  .line-widget { bottom:14px; right:14px; }
  .line-fab    { width:48px; height:48px; }
  .line-fab .line-fab-svg { width:24px; height:24px; }
}

/* ── TABLET COVERAGE GAP (601-900px) ─────────────────────────────
   Catches the in-between zone where bento was 2-col but value-modern
   stayed 1-col only after 600. Keeps the layout consistent. */
@media(min-width:601px) and (max-width:900px){
  .value-modern-grid { grid-template-columns:repeat(2,1fr); }
  .live-demo-grid    { grid-template-columns:1fr 1fr; gap:14px; }
}

/* ── CHANNEL INTEGRATION BAR ─────────────────────────────────── */
.proof-bar {
  padding:28px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(56,189,248,.025) 0%,rgba(129,140,248,.025) 100%);
}
.proof-inner {
  display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; text-align:center;
}
.proof-label {
  font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.14em;
  white-space:nowrap;
}
.channel-strip {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
}
.channel-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:999px;
  font-size:13px; font-weight:600; color:var(--muted); letter-spacing:-.005em;
  transition:all .25s ease; cursor:default;
}
.channel-pill:hover { color:var(--text); border-color:rgba(56,189,248,.3); background:rgba(56,189,248,.05); }
.channel-pill svg { width:18px; height:18px; flex-shrink:0; }
.channel-pill .material-symbols-outlined { font-size:18px; }
[data-theme="light"] .channel-pill { background:rgba(0,30,80,.03); border-color:rgba(0,30,80,.08); }
@media(max-width:768px){
  .proof-inner { flex-direction:column; gap:14px; }
  .channel-pill { padding:6px 12px; font-size:12px; }
}

/* ── PRICING TOGGLE ─────────────────────────────────────────── */
.pricing-toggle {
  display:inline-flex; align-items:center; gap:0; margin:24px auto 56px;
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r-xs); padding:4px;
}
[data-theme="light"] .pricing-toggle { background:rgba(0,0,0,.04); }
.pricing-toggle-btn {
  padding:8px 20px; border:none; background:transparent; border-radius:var(--r-xs);
  font-size:13px; font-weight:700; font-family:inherit; color:var(--muted); cursor:pointer;
  transition:all .2s ease; letter-spacing:-.01em; position:relative;
}
.pricing-toggle-btn.active { background:var(--sky-grad); color:#050d1a; }
.pricing-toggle-btn:not(.active):hover { color:var(--text); }
.pricing-toggle-save {
  display:inline-block; margin-left:6px; padding:2px 7px; border-radius:4px;
  background:rgba(52,211,153,.16); color:var(--emerald);
  font-size:10px; font-weight:800; letter-spacing:.04em;
}
.pricing-toggle-wrap { text-align:center; }

/* ── FORM ───────────────────────────────────────────────────── */
.contact-form-wrap {
  max-width:680px; margin:0 auto;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:40px; position:relative; overflow:hidden;
}
.contact-form-wrap::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--sky),transparent); }
[data-theme="light"] .contact-form-wrap { box-shadow:0 4px 28px rgba(0,30,80,.08); }
.form-banner {
  margin-bottom:24px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25);
  font-size:13px; color:var(--amber); display:flex; gap:10px; align-items:flex-start; line-height:1.55;
}
.form-banner-icon { font-size:16px; flex-shrink:0; line-height:1.2; }
.form-banner a { color:var(--amber); font-weight:700; text-decoration:underline; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-row.single { grid-template-columns:1fr; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-label {
  font-size:12px; font-weight:600; color:var(--text);
  letter-spacing:-.01em; display:flex; align-items:center; gap:4px;
}
.form-label .req { color:var(--rose); }
.form-input, .form-select, .form-textarea {
  width:100%; padding:11px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:var(--r-xs);
  color:var(--text); font-size:14px; font-family:inherit;
  transition:all .2s ease;
}
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea { background:#fff; border-color:rgba(0,30,80,.12); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--dim); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color:var(--sky); background:rgba(56,189,248,.04);
  box-shadow:0 0 0 3px rgba(56,189,248,.12);
}
.form-textarea { resize:vertical; min-height:96px; font-family:inherit; line-height:1.55; }
.form-select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer;
}
.form-submit {
  width:100%; margin-top:10px; padding:14px;
  background:var(--sky-grad); color:#050d1a; border:none; border-radius:var(--r-xs);
  font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; letter-spacing:-.01em;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  box-shadow:0 4px 20px rgba(56,189,248,.25);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.form-submit:hover:not(:disabled) {
  background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 55%,#a5b4fc 100%);
  box-shadow:0 8px 32px rgba(56,189,248,.42); transform:translateY(-1px);
}
.form-submit:active { transform:scale(.99); }
.form-submit:disabled { opacity:.7; cursor:wait; }
.form-submit:focus-visible { outline:2px solid var(--sky); outline-offset:3px; }
.form-spinner {
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(5,13,26,.25); border-top-color:#050d1a;
  animation:spin .8s linear infinite; display:none;
}
.form-submit.loading .form-spinner { display:inline-block; }
.form-submit.loading .form-submit-label { opacity:.5; }
@keyframes spin { to { transform:rotate(360deg); } }
.form-success, .form-error {
  display:none; padding:24px; border-radius:var(--r-sm);
  font-size:14px; line-height:1.7; text-align:left;
}
.form-success {
  background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.25); color:var(--emerald);
}
.form-success-title { font-size:17px; font-weight:800; margin-bottom:8px; color:var(--text); }
.form-success-body { color:var(--muted); }
.form-error {
  background:rgba(251,113,133,.08); border:1px solid rgba(251,113,133,.25); color:var(--rose);
}
.form-error-retry { margin-top:10px; padding:8px 16px; background:transparent; border:1px solid var(--rose); border-radius:var(--r-xs); color:var(--rose); font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.form-state .contact-form { display:none; }
.form-state[data-state="success"] .form-success { display:block; }
.form-state[data-state="error"]   .form-error   { display:block; }
.form-state[data-state="error"]   .contact-form { display:block; }
.form-privacy { font-size:11px; color:var(--dim); text-align:center; margin-top:14px; line-height:1.55; }
.form-privacy a { color:var(--muted); text-decoration:underline; }
@media(max-width:640px){
  .contact-form-wrap { padding:28px 20px; }
  .form-row { grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm);
  overflow:hidden; transition:border-color .25s ease;
}
.faq-item[open] { border-color:rgba(56,189,248,.25); }
.faq-summary {
  padding:18px 22px; cursor:pointer; font-size:15px; font-weight:600; color:var(--text);
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  letter-spacing:-.01em; user-select:none;
}
.faq-summary::-webkit-details-marker { display:none; }
.faq-summary:hover { color:var(--sky); }
.faq-toggle {
  width:22px; height:22px; border-radius:50%; background:rgba(56,189,248,.08); color:var(--sky);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .3s ease; font-size:14px; font-weight:700;
}
.faq-item[open] .faq-toggle { transform:rotate(45deg); }
.faq-body { padding:0 22px 20px; color:var(--muted); font-size:14px; line-height:1.75; }

/* ── STICKY CTA ─────────────────────────────────────────────── */
.sticky-cta {
  position:fixed; bottom:30px; left:24px; z-index:99;
  padding:13px 22px; border-radius:var(--r-xs); border:none;
  background:var(--sky-grad); color:#050d1a;
  font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; text-decoration:none;
  display:none; align-items:center; gap:8px; letter-spacing:-.01em;
  box-shadow:0 8px 32px rgba(56,189,248,.4);
  transition:transform .25s ease, box-shadow .25s ease, opacity .35s ease;
  opacity:0;
}
.sticky-cta.visible { display:inline-flex; opacity:1; }
.sticky-cta:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(56,189,248,.55); }
.sticky-cta:focus-visible { outline:2px solid var(--sky); outline-offset:3px; }

/* Back-to-top arrow — slides into the sticky-cta slot once the footer is in
   view (sticky-cta hides at the same moment so they never overlap). */
.back-to-top {
  position:fixed; bottom:30px; left:24px; z-index:1000;
  width:48px; height:48px; border-radius:50%; border:none;
  background:var(--sky-grad); color:#050d1a; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(56,189,248,.42);
  opacity:0; transform:translateY(8px);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, opacity .35s ease;
}
.back-to-top.visible { display:inline-flex; opacity:1; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(56,189,248,.6); }
.back-to-top:active { transform:scale(.96); }
.back-to-top:focus-visible { outline:2px solid var(--sky); outline-offset:3px; }
.back-to-top .material-symbols-outlined { font-size:22px; font-variation-settings:'FILL' 1,'wght' 700; }

/* ── HERO PROOF (under CTA buttons) ────────────────────────── */
.hero-proof {
  margin-top:24px; display:flex; align-items:center; gap:10px;
  font-size:12px; color:var(--muted); letter-spacing:-.005em;
}
.hero-proof-dot { width:6px; height:6px; border-radius:50%; background:var(--emerald); animation:pulse-glow 2.4s infinite; flex-shrink:0; }
.hero-proof strong { color:var(--text); font-weight:700; }

/* ── DIAGNOSTIC CONTACT (Kliniko-style split) ──────────────── */
.diag {
  padding:72px 0; position:relative; overflow:hidden;
}
.diag-bg {
  position:absolute; inset:0; pointer-events:none;
  /* Lighter than before — same palette family as the rest of the page,
   * gradients in the 4-7% range so the section sits flush with neighbours
   * instead of looking like a darker band. */
  background:
    radial-gradient(ellipse 70% 55% at 18% 25%, rgba(56,189,248,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 88% 78%, rgba(129,140,248,.05) 0%, transparent 60%),
    linear-gradient(180deg, #f1f6fd 0%, #eaf1fa 100%);
}
.diag-shell {
  position:relative; z-index:1;
  background:linear-gradient(160deg, #ffffff 0%, #f4f8ff 60%, #eaf3ff 100%);
  border:1px solid rgba(56,189,248,.18);
  border-radius:24px;
  padding:64px 64px; max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,        /* glassy top edge */
    0 24px 64px -16px rgba(56,189,248,.22),    /* sky-tinted lift */
    0 8px 24px -8px rgba(0,30,80,.10);         /* depth shadow */
}
.diag-shell::before {
  content:''; position:absolute; top:-40%; right:-20%; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(56,189,248,.14) 0%, transparent 60%);
  pointer-events:none;
}
.diag-shell::after {
  content:''; position:absolute; bottom:-30%; left:-15%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(129,140,248,.10) 0%, transparent 60%);
  pointer-events:none;
}

/* LEFT — pitch */
.diag-left { position:relative; z-index:1; color:#e8f4fb; }
.diag-title {
  font-family:'DM Sans', sans-serif;
  font-size:clamp(36px, 4.2vw, 56px); font-weight:700;
  letter-spacing:-.025em; line-height:1.1; color:#fff;
  margin-bottom:24px;
}
.diag-title em {
  display:block;
  font-family:'DM Serif Display', 'DM Sans', serif;
  font-style:italic; font-weight:400;
  background:linear-gradient(135deg, #7dd3fc 0%, #38bdf8 55%, #a5b4fc 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.diag-desc {
  font-size:16px; line-height:1.8; color:#8aa0b3;
  margin-bottom:40px; max-width:480px;
}
.diag-bullets {
  list-style:none; display:flex; flex-direction:column; gap:14px;
}
.diag-bullets li {
  display:flex; align-items:flex-start; gap:14px;
  font-size:15px; color:#cfd9e3; line-height:1.5;
}
.diag-bullets li b { color:#fff; font-weight:700; }
.diag-bullet-icon {
  width:24px; height:24px; min-width:24px; border-radius:50%;
  background:linear-gradient(135deg, #67e8f9 0%, #38bdf8 55%, #818cf8 100%);
  display:flex; align-items:center; justify-content:center;
  color:#0c1322; box-shadow:0 4px 14px rgba(56,189,248,.4);
  flex-shrink:0;
}
.diag-bullet-icon .material-symbols-outlined { font-size:16px; font-variation-settings:'FILL' 1,'wght' 800,'GRAD' 0,'opsz' 20; }

/* RIGHT — form card */
.diag-form-card {
  position:relative; z-index:1;
  background:#131313; border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:36px 32px;
}

/* ── DIAG section LIGHT-MODE overrides ──
   When the global theme flips to light, the form section adopts the DevProp light palette
   (white surface / dark text / sky-blue accents) instead of staying dark. */
[data-theme="light"] .diag-left          { color:var(--text); }
[data-theme="light"] .diag-title         { color:var(--text); }
[data-theme="light"] .diag-desc          { color:var(--muted); }
[data-theme="light"] .diag-bullets li    { color:var(--muted); }
[data-theme="light"] .diag-bullets li b  { color:var(--text); }
[data-theme="light"] .diag-form-card     {
  background:linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border-color:rgba(56,189,248,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 12px 32px -8px rgba(56,189,248,.18),
    0 4px 12px -4px rgba(0,30,80,.08);
}
[data-theme="light"] .diag-form-title    { color:var(--text); }
[data-theme="light"] .diag-tag           { color:var(--sky-dim); }
[data-theme="light"] .diag-label         { color:var(--muted); }
[data-theme="light"] .diag-input,
[data-theme="light"] .diag-select        { background:#fff; color:var(--text); border:1px solid rgba(0,30,80,.1); }
[data-theme="light"] .diag-input::placeholder { color:#94a3b8; }
[data-theme="light"] .diag-microcopy     { color:var(--dim); }
[data-theme="light"] .diag-microcopy strong { color:var(--muted); }
[data-theme="light"] .diag-success-title { color:var(--text); }
[data-theme="light"] .diag-form-banner   { color:var(--sky-dim); }
[data-theme="light"] .diag-form-banner a { color:var(--sky-dim); }
.diag-tag {
  display:block; font-size:11px; font-weight:700; color:#7dd3fc;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px;
}
.diag-form-title {
  font-family:'DM Sans', sans-serif;
  font-size:24px; font-weight:700; color:#fff;
  line-height:1.25; letter-spacing:-.015em; margin-bottom:26px;
}
.diag-form-banner {
  display:none; margin-bottom:20px; padding:12px 14px; border-radius:10px;
  background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.3);
  font-size:13px; color:#7dd3fc; line-height:1.55;
  gap:10px; align-items:flex-start;
}
.diag-form-banner:not([hidden]) { display:flex; }
.diag-form-banner .material-symbols-outlined { font-size:18px; flex-shrink:0; }
.diag-form-banner a { color:#7dd3fc; font-weight:700; text-decoration:underline; }

.diag-field { margin-bottom:18px; }
.diag-label {
  display:block; font-size:11px; font-weight:700; color:#a3b8cc;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px;
}
.diag-input, .diag-select {
  width:100%; padding:14px 16px;
  background:#fff; color:#0d1521;
  border:1px solid transparent; border-radius:8px;
  font-size:14.5px; font-family:inherit; font-weight:500;
  transition:all .2s ease;
}
[data-lang="th"] .diag-input, [data-lang="th"] .diag-select { font-family:var(--font-th); }
.diag-input::placeholder { color:#94a3b8; font-weight:400; }
.diag-input:focus, .diag-select:focus {
  outline:none; border-color:#38bdf8;
  box-shadow:0 0 0 4px rgba(56,189,248,.22);
}
.diag-select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; cursor:pointer;
}

.diag-submit {
  width:100%; margin-top:8px; padding:16px;
  background:linear-gradient(135deg, #67e8f9 0%, #38bdf8 55%, #818cf8 100%);
  color:#050d1a; border:none; border-radius:10px;
  font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; letter-spacing:-.005em;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .35s ease;
  box-shadow:0 8px 28px rgba(56,189,248,.38);
}
[data-lang="th"] .diag-submit { font-family:var(--font-th); }
.diag-submit:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(56,189,248,.55);
  background:linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #a5b4fc 100%);
}
.diag-submit:active { transform:scale(.99); }
.diag-submit:disabled { opacity:.6; cursor:wait; }
.diag-spinner {
  display:none; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(5,13,26,.25); border-top-color:#050d1a;
  animation:spin .8s linear infinite;
}
.diag-submit.loading .diag-spinner { display:inline-block; }
.diag-submit.loading .diag-submit-label { opacity:.5; }

.diag-microcopy {
  text-align:center; font-size:12px; color:#7a8a9d;
  margin-top:14px; line-height:1.55;
}
.diag-microcopy strong { color:#a3b8cc; font-weight:600; }

/* States: success / error */
.diag-success, .diag-error { display:none; padding:18px; border-radius:10px; font-size:14px; line-height:1.7; }
.diag-success {
  background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.28); color:#34d399;
}
.diag-success-title { font-size:17px; font-weight:800; color:#fff; margin-bottom:8px; }
.diag-error {
  background:rgba(251,113,133,.08); border:1px solid rgba(251,113,133,.28); color:#fb7185;
}
.diag-error a { color:#fb7185; text-decoration:underline; font-weight:700; }
.diag-error-retry { margin-top:10px; padding:7px 14px; background:transparent; border:1px solid #fb7185; border-radius:6px; color:#fb7185; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.diag-form-state[data-state="success"] .diag-form { display:none; }
.diag-form-state[data-state="success"] .diag-success { display:block; }
.diag-form-state[data-state="error"]   .diag-error   { display:block; }

@media(max-width:900px){
  .diag-shell { grid-template-columns:1fr; gap:40px; padding:48px 36px; }
  .diag-title { font-size:clamp(32px, 7vw, 44px); }
}
@media(max-width:520px){
  .diag-shell { padding:36px 24px; border-radius:14px; }
  .diag-form-card { padding:28px 22px; }
}

/* ── COOKIE CONSENT BANNER ──────────────────────────────────────
 * PDPA + GDPR consent banner. Sky-blue branding, dark+light mode aware,
 * mobile-responsive. Triggered by JS only on first visit (or via the
 * "Cookie preferences" link in the footer). Slides up from the bottom. */
.cookie-banner{
  position:fixed; bottom:16px; left:16px; right:16px; z-index:9999;
  max-width:880px; margin:0 auto;
  background:rgba(15,15,21,.94); backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(56,189,248,.22); border-radius:18px;
  padding:20px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(56,189,248,.04);
  font-family:var(--font);
  animation:cookieSlideUp .42s cubic-bezier(.22,.85,.36,1);
  transition:opacity .28s ease;
}
[data-theme="light"] .cookie-banner{
  background:rgba(255,255,255,.97);
  border-color:rgba(14,165,233,.22);
  box-shadow:0 16px 48px rgba(0,30,80,.15), 0 0 0 1px rgba(14,165,233,.06);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner.is-closing{ opacity:0; transform:translateY(20px); }

@keyframes cookieSlideUp{
  from{ transform:translateY(120%); opacity:0; }
  to{   transform:translateY(0);    opacity:1; }
}

.cookie-banner-inner{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
}
.cookie-banner-icon{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(129,140,248,.08));
  border:1px solid rgba(56,189,248,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--sky); flex-shrink:0;
}
.cookie-banner-icon .material-symbols-outlined{ font-size:24px; font-variation-settings:'wght' 500, 'FILL' 1; }

.cookie-banner-text{ min-width:0; }
.cookie-banner-title{
  font-size:14.5px; font-weight:700; color:var(--text); margin-bottom:5px;
  letter-spacing:-.005em;
}
.cookie-banner-desc{
  font-size:13px; color:var(--muted); line-height:1.6; margin:0;
}
.cookie-banner-desc a{
  color:var(--sky); text-decoration:underline; text-decoration-color:rgba(56,189,248,.4); text-underline-offset:2px;
}
.cookie-banner-desc a:hover{ text-decoration-color:var(--sky); }

.cookie-banner-actions{
  display:flex; gap:10px; align-items:center; flex-shrink:0;
}
.cookie-banner-btn{
  padding:11px 22px; border-radius:10px;
  font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:-.005em;
  border:none; cursor:pointer; transition:all .22s ease;
  display:inline-flex; align-items:center; gap:6px;
}
.cookie-banner-btn-ghost{
  background:rgba(255,255,255,.04); color:var(--text);
  border:1px solid var(--border);
}
[data-theme="light"] .cookie-banner-btn-ghost{
  background:rgba(0,30,80,.03);
}
.cookie-banner-btn-ghost:hover{
  border-color:rgba(56,189,248,.35); color:var(--sky);
  background:rgba(56,189,248,.05);
}
.cookie-banner-btn-primary{
  background:var(--sky-grad); color:#050d1a;
  box-shadow:0 4px 18px rgba(56,189,248,.32);
}
.cookie-banner-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(56,189,248,.46);
}
.cookie-banner-btn-primary:active{ transform:translateY(0); }

@media (max-width:760px){
  .cookie-banner{ left:12px; right:12px; bottom:12px; padding:16px 18px; border-radius:14px; }
  .cookie-banner-inner{ grid-template-columns:1fr; gap:14px; }
  .cookie-banner-icon{ display:none; }
  .cookie-banner-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
  .cookie-banner-btn{ width:100%; justify-content:center; padding:12px 14px; }
}

/* ── LINE CHAT WIDGET (Kliniko-style, compact) ─────────────── */
.line-widget {
  position:fixed !important; bottom:20px; right:20px; z-index:1000;
  font-family:var(--font);
  display:block;
  visibility:visible;
  opacity:1;
}
[data-lang="th"] .line-widget { font-family:var(--font-th); }

/* Closed FAB (small round LINE button) */
.line-fab {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, #06c755 0%, #00b900 100%);
  border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 8px 24px rgba(0,185,0,.4), 0 0 0 5px rgba(6,199,85,.12);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, opacity .25s ease;
  animation:line-pulse 2.4s ease-in-out infinite;
}
.line-fab .line-fab-svg { width:30px; height:30px; }
.line-fab:hover { transform:scale(1.06) translateY(-2px); box-shadow:0 14px 36px rgba(0,185,0,.55), 0 0 0 8px rgba(6,199,85,.16); animation-play-state:paused; }
.line-fab:active { transform:scale(.96); }
.line-fab:focus-visible { outline:3px solid rgba(0,185,0,.6); outline-offset:4px; }
.line-widget.open .line-fab { opacity:0; pointer-events:none; transform:scale(.6); }

@keyframes line-pulse {
  0%,100% { box-shadow:0 8px 24px rgba(0,185,0,.4), 0 0 0 0   rgba(6,199,85,.35); }
  50%     { box-shadow:0 8px 24px rgba(0,185,0,.45),0 0 0 12px rgba(6,199,85,0);   }
}

/* Open panel — compact 300px wide */
.line-panel {
  position:absolute; bottom:0; right:0;
  width:300px; max-width:calc(100vw - 32px);
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04);
  opacity:0; pointer-events:none; transform:translateY(16px) scale(.96);
  transform-origin:bottom right;
  transition:opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
}
.line-widget.open .line-panel { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
[data-theme="dark"] .line-panel { background:#fff; }

/* Light sweep across the open widget every 3s (parity with website.devprop.io) */
.line-panel-shine {
  position:absolute; top:0; bottom:0; left:0; width:55%;
  pointer-events:none; z-index:6;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.13) 46%, rgba(255,255,255,.24) 52%, rgba(255,255,255,.13) 58%, rgba(255,255,255,0) 100%);
  transform:skewX(-12deg) translateX(-190%);
}
.line-widget.open .line-panel-shine { animation:linePanelShine 3s ease-in-out infinite; will-change:transform; }
@keyframes linePanelShine {
  0%   { transform:skewX(-12deg) translateX(-190%); }
  20%  { transform:skewX(-12deg) translateX(320%); }
  100% { transform:skewX(-12deg) translateX(320%); }
}

/* Header — dark navy */
.line-header {
  padding:14px 14px 14px 16px;
  background:#0f1a2e; color:#fff;
  display:flex; align-items:center; gap:12px;
  border-radius:14px 14px 0 0;
}
.line-avatar {
  width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg, #67e8f9 0%, #38bdf8 55%, #818cf8 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 0 2px rgba(56,189,248,.18);
  position:relative;
}
.line-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
/* Fallback styled initial when /assets/nisa.webp hasn't been uploaded yet */
.line-avatar-initial { font-size:15px; font-weight:700; color:#0d1521; letter-spacing:.02em; }
.line-header-info { flex:1; min-width:0; }
.line-header-title {
  font-size:14px; font-weight:700; color:#fff; letter-spacing:-.01em; line-height:1.2;
}
.line-header-status { font-size:11px; font-weight:500; color:#a3e6c1; margin-top:3px; display:flex; align-items:center; gap:6px; }
.line-header-dot {
  width:6px; height:6px; border-radius:50%; background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:line-status-pulse 2s infinite;
}
@keyframes line-status-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(52,211,153,.55); }
  70%     { box-shadow:0 0 0 6px rgba(52,211,153,0); }
}
.line-close {
  background:transparent; border:none; cursor:pointer;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6);
  transition:background .2s ease, color .2s ease;
}
.line-close .material-symbols-outlined { font-size:18px; }
.line-close:hover { background:rgba(255,255,255,.12); color:#fff; }

/* Body */
.line-body {
  padding:16px;
  background:#f4f6fa;
  color:#0d1521;
}
.line-greet {
  display:flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:#0d1521; margin-bottom:6px;
}
.line-greet-icon { color:#f59e0b; font-size:18px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20; }
.line-text { font-size:13px; line-height:1.55; color:#374151; margin-bottom:6px; }
.line-text b { color:#0d1521; font-weight:700; }
.line-text-sub { font-size:13px; line-height:1.55; color:#6b7280; }

/* CTA — AI chat (top, primary — sky-blue gradient) */
.line-ai-cta {
  display:flex; align-items:center; gap:12px;
  margin:0; padding:13px 14px;
  background:linear-gradient(135deg, #67e8f9 0%, #38bdf8 55%, #818cf8 100%);
  color:#050d1a; text-decoration:none;
  border-top:1px solid #e5e7eb;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.line-ai-cta:hover { background:linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #a5b4fc 100%); }
.line-ai-cta:active { transform:scale(.99); }
.line-ai-icon {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.32); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:#050d1a;
}
.line-ai-icon .material-symbols-outlined { font-size:18px; font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 20; }
.line-ai-text { display:flex; flex-direction:column; line-height:1.2; }
.line-ai-title { font-size:14px; font-weight:700; letter-spacing:-.005em; }
.line-ai-sub   { font-size:11px; font-weight:500; opacity:.78; margin-top:2px; }

/* CTA — big LINE green button (secondary, below the AI option) */
.line-cta {
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0; padding:13px;
  background:linear-gradient(135deg, #06c755 0%, #00b900 100%);
  color:#fff; text-decoration:none;
  font-size:14px; font-weight:700; letter-spacing:-.005em;
  border-top:1px solid rgba(0,0,0,.06);
  transition:background .25s ease, transform .25s ease;
}
.line-cta svg { width:20px; height:20px; flex-shrink:0; }
.line-cta:hover { background:linear-gradient(135deg, #00b900 0%, #009e00 100%); }
.line-cta:active { transform:scale(.99); }

/* Footer */
.line-footer {
  padding:10px 16px;
  background:#fff;
  font-size:10.5px; color:#9ca3af;
  text-align:center; line-height:1.5;
  border-radius:0 0 14px 14px;
  border-top:1px solid #f3f4f6;
}
.line-footer strong { color:#374151; font-weight:600; }

/* ── AI CHAT VIEW (in-widget conversation) ─────────────────────── */
/* The panel toggles between data-state="welcome" (choice screen) and
   data-state="ai-chat" (full conversation). Welcome is the default. */
.ai-chat-view { display:none; flex-direction:column; }
.line-panel[data-state="ai-chat"] .line-body,
.line-panel[data-state="ai-chat"] .line-ai-cta,
.line-panel[data-state="ai-chat"] .line-cta,
.line-panel[data-state="ai-chat"] .line-footer { display:none; }
.line-panel[data-state="ai-chat"] .ai-chat-view { display:flex; }
.line-panel[data-state="ai-chat"] { width:340px; }

.ai-chat-messages {
  background:#f4f6fa;
  padding:14px;
  max-height:360px; min-height:240px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:10px;
}
.ai-chat-messages::-webkit-scrollbar { width:6px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background:rgba(0,0,0,.15); border-radius:3px; }

.ai-bubble {
  max-width:85%; padding:9px 12px; border-radius:14px;
  font-size:13px; line-height:1.5; word-wrap:break-word; white-space:pre-wrap;
  animation:ai-bubble-in .25s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ai-bubble-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.ai-bubble.from-agent {
  align-self:flex-start;
  background:#fff; color:#0d1521;
  border:1px solid #e5e7eb;
  border-bottom-left-radius:4px;
}
.ai-bubble.from-user {
  align-self:flex-end;
  background:linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  color:#fff;
  border-bottom-right-radius:4px;
}
.ai-bubble a { color:inherit; text-decoration:underline; }
.ai-typing {
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:4px;
  padding:11px 14px;
  background:#fff; border:1px solid #e5e7eb;
  border-radius:14px; border-bottom-left-radius:4px;
}
.ai-typing span {
  width:6px; height:6px; border-radius:50%;
  background:#9ca3af;
  animation:ai-typing-bounce 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay:.18s; }
.ai-typing span:nth-child(3) { animation-delay:.36s; }
@keyframes ai-typing-bounce {
  0%, 60%, 100% { transform:translateY(0); opacity:.5; }
  30%           { transform:translateY(-4px); opacity:1; }
}

.ai-chat-input-row {
  display:flex; align-items:flex-end; gap:8px;
  padding:10px 12px;
  background:#fff; border-top:1px solid #e5e7eb;
}
.ai-chat-textarea {
  flex:1; resize:none; border:1px solid #e5e7eb;
  background:#f9fafb; color:#0d1521;
  font-family:inherit; font-size:13px; line-height:1.4;
  padding:9px 12px; border-radius:10px;
  max-height:80px; min-height:38px;
  outline:none; transition:border-color .15s ease, background .15s ease;
}
.ai-chat-textarea:focus { border-color:#38bdf8; background:#fff; box-shadow:0 0 0 3px rgba(56,189,248,.18); }
.ai-chat-textarea::placeholder { color:#9ca3af; }
[data-lang="th"] .ai-chat-textarea { font-family:var(--font-th); }
.ai-chat-send {
  width:38px; height:38px; border-radius:10px; border:none; cursor:pointer; flex-shrink:0;
  background:linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 4px 14px rgba(56,189,248,.32);
}
.ai-chat-send:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 18px rgba(56,189,248,.45); }
.ai-chat-send:active { transform:scale(.96); }
.ai-chat-send:disabled { opacity:.5; cursor:not-allowed; }
.ai-chat-send .material-symbols-outlined { font-size:18px; font-variation-settings:'FILL' 1,'wght' 600; }

.ai-chat-footer {
  padding:10px 14px; background:#fff;
  border-top:1px solid #f3f4f6; border-radius:0 0 14px 14px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:11px; color:#9ca3af;
}
.ai-chat-footer a {
  color:#fff; font-weight:700; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:8px; font-size:12.5px;
  background:linear-gradient(135deg, #06c755 0%, #00b900 100%);
  box-shadow:0 2px 8px rgba(0,185,0,.28);
  transition:background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.ai-chat-footer a:hover { background:linear-gradient(135deg, #00b900 0%, #009e00 100%); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,185,0,.42); }
.ai-chat-footer a:active { transform:scale(.98); }
.ai-chat-footer a svg { width:16px; height:16px; flex-shrink:0; }
.ai-chat-footer-meta strong { color:#374151; font-weight:600; }

@media(max-width:640px){
  .line-widget { bottom:16px; right:16px; }
  .line-panel { width:calc(100vw - 32px); max-width:320px; }
  .line-fab { width:52px; height:52px; }
  .line-fab .line-fab-svg { width:28px; height:28px; }
}

/* ── LE CONSTAT (Problem statement) ──────────────────────────
 * Same cool-blue family as the surrounding sections (was solid white
 * = var(--surface), which made it stand out as a brighter band).
 * Section now sits flush with the neighbours; constat-card stays
 * lighter via its own var(--card) bg so the grid still pops. */
.constat {
  padding:72px 0;
  background:linear-gradient(180deg, #f1f6fd 0%, #eaf1fa 100%);
  border-top:1px solid rgba(14,165,233,.12);
  border-bottom:1px solid rgba(14,165,233,.12);
  position:relative; overflow:hidden;
}
.constat::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 18% 20%, rgba(56,189,248,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(129,140,248,.05) 0%, transparent 60%);
}
.constat-header { text-align:center; max-width:680px; margin:0 auto 56px; position:relative; z-index:1; }
.constat-eyebrow {
  display:inline-block; font-size:11px; font-weight:700; color:var(--sky);
  text-transform:uppercase; letter-spacing:.12em; margin-bottom:16px;
  padding:5px 12px; background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.22); border-radius:var(--r-xs);
}
.constat-title { font-size:clamp(28px,3.8vw,42px); font-weight:800; letter-spacing:-.025em; line-height:1.15; text-wrap:balance; margin-bottom:14px; }
.constat-title em { font-style:italic; background:var(--sky-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:800; }
.constat-sub { font-size:16px; color:var(--muted); line-height:1.7; }
.constat-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  position:relative; z-index:1;
}
.constat-card {
  padding:28px 24px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  transition:transform .3s ease, border-color .3s ease;
}
.constat-card:hover { transform:translateY(-3px); border-color:rgba(56,189,248,.28); }
.constat-card-icon {
  width:44px; height:44px; border-radius:var(--r-sm);
  background:linear-gradient(135deg, rgba(56,189,248,.16), rgba(129,140,248,.08));
  border:1px solid rgba(56,189,248,.22);
  color:var(--sky); display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.constat-card-icon .material-symbols-outlined { font-size:24px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }
.constat-card-title { font-size:15px; font-weight:700; letter-spacing:-.01em; margin-bottom:8px; color:var(--text); }
.constat-card-text  { font-size:13px; color:var(--muted); line-height:1.65; }
.constat-foot { text-align:center; margin-top:48px; font-size:13px; color:var(--dim); }
.constat-foot strong { color:var(--muted); font-weight:600; }
@media(max-width:900px){ .constat-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px){ .constat-grid { grid-template-columns:1fr; } }

/* ── PRICING REASSURE — risk-reversal under each "Get started" ── */
.pricing-reassure{
  margin:10px 0 0;
  text-align:center;
  font-size:11px;
  color:var(--muted);
  line-height:1.5;
  letter-spacing:.005em;
}

/* ── PROOF + LIMITED-COHORT BANNER ──────────────────── */
.early-access{
  padding:18px 0;
  background:linear-gradient(135deg,rgba(56,189,248,.06) 0%,rgba(129,140,248,.06) 100%);
  border-top:1px solid rgba(14,165,233,.16);
  border-bottom:1px solid rgba(14,165,233,.16);
}
.early-access .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.early-access-inner{
  display:flex; align-items:center; gap:18px;
  flex-wrap:wrap;
}
.early-access-tag{
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:6px;
  background:#fff; color:#0ea5e9;
  border:1px solid rgba(14,165,233,.28);
  box-shadow:0 2px 8px rgba(14,165,233,.12);
  flex-shrink:0;
}
.early-access-text{
  flex:1; min-width:240px; font-size:13.5px; color:#52657a;
  display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
  line-height:1.55;
}
.early-access-text strong{ color:#0d1521; font-weight:700; font-size:14px; }
.early-access-cta{
  flex-shrink:0;
  padding:9px 18px; border-radius:8px;
  background:#fff; color:#0ea5e9;
  font-size:13px; font-weight:700;
  border:1px solid rgba(14,165,233,.28);
  text-decoration:none;
  transition:all .2s ease;
}
.early-access-cta:hover{
  background:linear-gradient(135deg,#67e8f9 0%,#38bdf8 55%,#818cf8 100%);
  color:#050d1a; border-color:transparent;
  box-shadow:0 4px 16px rgba(56,189,248,.32);
  transform:translateY(-1px);
}
@media (max-width:640px){
  .early-access-inner{ gap:12px; }
  .early-access-text{ font-size:13px; }
}

/* ── ECOSYSTEM MARQUEE — scrolling brand strip below Early access ─────
 * Infinite horizontal scroll of channel + portal + automation logos so
 * prospects instantly see what DevProp talks to. Two identical halves
 * sit side-by-side; we translate -50% over 48s, then loop seamlessly.
 * Respects prefers-reduced-motion: animation stops, content visible. */
.eco-marquee{
  padding:48px 0 56px;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}
.eco-marquee-header{
  max-width:880px; margin:0 auto 28px;
  padding:0 24px; text-align:center;
}
.eco-marquee-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sky);
  padding:5px 12px; border-radius:6px;
  background:var(--sky-glow);
  border:1px solid var(--border-sky);
}
.eco-marquee-title{
  margin:14px 0 8px; font-size:clamp(22px,3.2vw,30px);
  font-weight:700; letter-spacing:-.01em; color:var(--text);
  line-height:1.2;
}
.eco-marquee-sub{
  margin:0; font-size:14px; color:var(--muted); line-height:1.55;
}

.eco-marquee-viewport{
  position:relative; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.eco-marquee-track{
  display:flex; width:max-content;
  animation:eco-marquee 48s linear infinite;
}
/* Two identical groups, each with its own trailing gap so the -50% wrap is pixel-seamless (no jump, no stop). */
.eco-marquee-group{ display:flex; gap:14px; padding-right:14px; }
.eco-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:999px;
  background:var(--panel,rgba(255,255,255,.04));
  border:1px solid var(--border);
  color:var(--text);
  font-size:13.5px; font-weight:600;
  white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.eco-pill svg{ flex-shrink:0; width:20px; height:20px; }
.eco-pill svg, .eco-pill .material-symbols-outlined{ color:var(--ic, currentColor); }
.eco-pill:hover{
  border-color:var(--border-sky);
  background:var(--sky-glow);
  color:var(--sky);
  transform:translateY(-1px);
}
[data-theme="light"] .eco-pill{ background:rgba(0,30,80,.03); }
[data-theme="light"] .eco-pill:hover{ background:rgba(14,165,233,.08); }

@keyframes eco-marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
/* Eco marquee motion kept on by design (plays regardless of OS reduce-motion). */
@media (max-width:640px){
  .eco-marquee{ padding:40px 0 44px; }
  .eco-pill{ padding:8px 14px; font-size:12.5px; }
  .eco-pill svg{ width:18px; height:18px; }
}



/* ╔══════════════════════════════════════════════════════════════╗
   ║ CONVERSION-MACHINE additions (Sprint 9):                    ║
   ║  - .credibility-strip  (production proof under hero)         ║
   ║  - .roi-calc           (interactive ROI calculator)          ║
   ║  - .compare-table      (DevProp vs HubSpot / Pipedrive / XL) ║
   ║  - .final-cta          (risk-reversal CTA before footer)     ║
   ║  - .mobile-sticky-cta  (fixed bottom CTA on small screens)   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 1) CREDIBILITY STRIP ─────────────────────────────────────────── */
.credibility-strip {
  padding:48px 0 40px;
  background:linear-gradient(180deg, var(--bg) 0%, var(--panel,rgba(255,255,255,.02)) 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.credibility-strip .wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.cred-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
.cred-stat { text-align:center; padding:8px 0; }
.cred-stat-num {
  font-size:clamp(34px, 4.5vw, 46px); font-weight:800; letter-spacing:-.02em;
  line-height:1;
  background:var(--sky-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:10px;
}
.cred-stat-label { font-size:14px; font-weight:700; color:var(--text); margin-bottom:6px; }
.cred-stat-hint  { font-size:12px; color:var(--muted); line-height:1.5; max-width:240px; margin:0 auto; }
@media (max-width:880px) { .cred-grid { grid-template-columns:repeat(2, 1fr); gap:36px 16px; } }
@media (max-width:520px) { .cred-grid { grid-template-columns:1fr; } }

/* ── 2) ROI CALCULATOR ────────────────────────────────────────────── */
.roi-calc { padding:72px 0; background:var(--bg); }
.roi-calc .wrap { max-width:1100px; margin:0 auto; padding:0 24px; }
.roi-header { text-align:center; max-width:720px; margin:0 auto 36px; }
.roi-eyebrow { display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sky); padding:5px 12px; border-radius:6px;
  background:var(--sky-glow); border:1px solid var(--border-sky); margin-bottom:14px;
}
.roi-title { font-size:clamp(26px, 3.4vw, 34px); font-weight:800; letter-spacing:-.02em; margin:0 0 10px; color:var(--text); }
.roi-sub { font-size:14.5px; color:var(--muted); line-height:1.6; margin:0; }

.roi-card {
  background:var(--card, var(--panel, rgba(255,255,255,.03)));
  border:1px solid var(--border); border-radius:18px;
  padding:36px 40px;
  box-shadow:0 4px 30px rgba(0,0,0,.04);
  display:grid; grid-template-columns:1fr 1fr; gap:36px;
}
@media (max-width:820px) { .roi-card { grid-template-columns:1fr; gap:24px; padding:28px 24px; } }
.roi-inputs { display:flex; flex-direction:column; gap:22px; }
.roi-field { display:flex; flex-direction:column; gap:8px; }
.roi-field-label {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:13px; font-weight:600; color:var(--text);
}
.roi-field-label .v {
  font-size:16px; font-weight:800; color:var(--sky);
  background:var(--sky-glow); padding:2px 10px; border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.roi-field input[type=range] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--sky) 0%, var(--sky) var(--p,50%), var(--border) var(--p,50%), var(--border) 100%);
  outline:none; cursor:pointer;
}
.roi-field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--sky);
  box-shadow:0 2px 8px rgba(56,189,248,.4);
  cursor:grab;
}
.roi-field input[type=range]::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--sky);
  box-shadow:0 2px 8px rgba(56,189,248,.4);
  cursor:grab;
}
.roi-field-hint { font-size:11.5px; color:var(--muted); }

.roi-output {
  display:flex; flex-direction:column; gap:14px;
  background:linear-gradient(135deg, rgba(56,189,248,.06) 0%, rgba(129,140,248,.04) 100%);
  border:1px solid var(--border-sky); border-radius:14px;
  padding:24px 22px;
  position:relative;
}
.roi-out-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--border); }
.roi-out-row:last-of-type { border-bottom:none; }
.roi-out-row.total {
  margin-top:8px; padding:14px 16px;
  background:#fff; border:1px solid var(--border-sky);
  border-radius:10px; border-bottom:none;
  box-shadow:0 2px 12px rgba(56,189,248,.1);
}
[data-theme="light"] .roi-out-row.total { background:#fff; }
.roi-out-label { font-size:13px; font-weight:600; color:var(--muted); }
.roi-out-row.total .roi-out-label { color:var(--text); font-weight:700; font-size:14px; }
.roi-out-val { font-size:18px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.roi-out-val.positive { color:#047857; }
.roi-out-val.cost { color:var(--sky); }
.roi-out-row.total .roi-out-val { font-size:26px; color:var(--sky); }

.roi-disclaimer { font-size:11px; color:var(--muted); text-align:center; margin-top:20px; max-width:720px; margin-left:auto; margin-right:auto; }

/* ── 3) COMPARISON TABLE ──────────────────────────────────────────── */
.compare-section { padding:72px 0; background:var(--bg); position:relative; }
.compare-section .wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.compare-header { text-align:center; max-width:720px; margin:0 auto 36px; }
.compare-card {
  background:var(--card, var(--panel, rgba(255,255,255,.02)));
  border:1px solid var(--border); border-radius:16px;
  overflow:hidden;
}
.compare-table { width:100%; border-collapse:collapse; font-size:14px; }
.compare-table thead th {
  padding:18px 14px;
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:var(--bg);
  border-bottom:1px solid var(--border); text-align:center; vertical-align:middle;
}
.compare-table thead th.feat-col { text-align:left; width:30%; }
.compare-table thead th.devprop-col {
  color:var(--sky); background:var(--sky-glow);
  position:relative;
}
.compare-table thead th.devprop-col::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--sky-grad);
}
.compare-table tbody td {
  padding:13px 14px;
  border-bottom:1px solid var(--border);
  font-size:13.5px; color:var(--text); text-align:center; vertical-align:middle;
}
.compare-table tbody tr:last-child td { border-bottom:none; }
.compare-table tbody td.feat-col { text-align:left; font-weight:600; }
.compare-table tbody td.devprop-col { background:rgba(56,189,248,.04); font-weight:700; }
.compare-cell-icon { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.compare-cell-icon .material-symbols-outlined { font-size:20px; }
.compare-yes { color:#047857; }
.compare-no  { color:#B91C1C; opacity:.7; }
.compare-warn { color:#B45309; opacity:.85; }
.compare-cell-note { font-size:11px; color:var(--muted); font-weight:500; margin-top:2px; display:block; }
@media (max-width:780px) {
  .compare-card { overflow-x:auto; }
  .compare-table { min-width:760px; }
}

/* ── 4) FINAL CTA (risk reversal) ─────────────────────────────────── */
.final-cta {
  padding:88px 0; text-align:center; position:relative;
  background:radial-gradient(ellipse at top, rgba(56,189,248,.10) 0%, transparent 65%), var(--bg);
  border-top:1px solid var(--border);
}
.final-cta .wrap { max-width:840px; margin:0 auto; padding:0 24px; }
.final-cta-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sky); padding:5px 14px; border-radius:6px;
  background:var(--sky-glow); border:1px solid var(--border-sky); margin-bottom:18px;
}
.final-cta-title {
  font-size:clamp(28px, 4vw, 44px); font-weight:800; letter-spacing:-.025em;
  margin:0 0 16px; color:var(--text); line-height:1.15;
}
.final-cta-title em {
  font-style:normal;
  background:var(--sky-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.final-cta-sub {
  font-size:15.5px; line-height:1.65; color:var(--muted);
  margin:0 auto 28px; max-width:620px;
}
.final-cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.final-cta-actions .btn-primary,
.final-cta-actions .btn-ghost { font-size:14px; }
.final-cta-trust {
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  font-size:12.5px; color:var(--muted); font-weight:500;
}
.final-cta-trust span { display:inline-flex; align-items:center; gap:6px; }
.final-cta-trust .material-symbols-outlined { font-size:16px; color:var(--sky); }

/* ── 5) MOBILE STICKY CTA ─────────────────────────────────────────── */
.mobile-sticky-cta {
  display:none;
  position:fixed; left:14px; right:14px; bottom:14px; z-index:90;
  padding:14px 20px;
  background:var(--sky-grad);
  color:#050d1a !important;
  font-weight:800; font-size:14px;
  text-align:center; text-decoration:none;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(56,189,248,.4);
  transition:transform .25s ease, opacity .25s ease;
  transform:translateY(120%);
  opacity:0;
}
.mobile-sticky-cta.visible { transform:translateY(0); opacity:1; }
.mobile-sticky-cta:hover { transform:translateY(-2px); }
@media (max-width:768px) {
  .mobile-sticky-cta { display:block; }
  /* ensure footer + last-section padding leaves room */
  body { padding-bottom:80px; }
}


/* ── LIVE DEMO STRIP — two side-by-side cards: CRM demo + public website demo ── */
.live-demo {
  padding:72px 0; position:relative; background:var(--bg);
}
/* ── LIVE DEMOS — minimal horizontal ──────────────────────── */
.live-demo { padding:88px 0; }
.live-demo-header {
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  max-width:1080px; margin:0 auto;
}
.live-demo-header .sec-label { justify-content:flex-start; }
.live-demo-header .sec-title { margin:0; }
.live-demo-head-left { max-width:600px; }
.live-demo-head-desc { max-width:360px; margin:0 0 6px; text-align:left; }
.live-demo-rows { max-width:1080px; margin:20px auto 0; }
.live-demo-row {
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;
  padding:52px 0; border-top:1px solid var(--border);
}
.live-demo-row.reverse .demo-frame { order:2; }
.demo-frame {
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--card); box-shadow:0 14px 44px rgba(15,23,42,.07);
}
.demo-frame-bar {
  display:flex; align-items:center; gap:6px;
  padding:9px 14px; background:var(--surface); border-bottom:1px solid var(--border);
}
.demo-frame-bar i { width:11px; height:11px; border-radius:50%; }
.demo-frame-bar i:nth-child(1) { background:#ff5f57; }
.demo-frame-bar i:nth-child(2) { background:#febc2e; }
.demo-frame-bar i:nth-child(3) { background:#28c840; }
.demo-frame-bar em {
  margin-left:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; color:var(--dim); font-style:normal;
}
.demo-frame img {
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; object-position:top center;
}
.demo-info-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.demo-num {
  font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1;
  color:var(--border); font-family:'DM Sans', sans-serif;
}
.demo-label {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sky);
}
.live-demo-body { font-size:14px; color:var(--muted); line-height:1.7; margin:0 0 18px; max-width:440px; }
.live-demo-creds {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:11px 14px; margin-bottom:18px;
  background:rgba(56,189,248,.05); border:1px dashed rgba(56,189,248,.25);
  border-radius:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
}
.live-demo-creds > span { display:inline-flex; align-items:center; gap:8px; color:var(--text); }
.live-demo-creds strong {
  font-family:var(--font); font-weight:600; color:var(--muted); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
}
.demo-copy {
  display:inline-flex; align-items:center; gap:5px; margin-left:auto;
  font-family:var(--font); font-size:11px; font-weight:600; color:var(--sky);
  background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.22);
  border-radius:8px; padding:5px 10px; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.demo-copy:hover { background:rgba(56,189,248,.16); }
.demo-copy .material-symbols-outlined { font-size:14px; }
.demo-copy.copied { color:#16a34a; border-color:rgba(22,163,74,.32); background:rgba(22,163,74,.1); }
.live-demo-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; font-size:12px; color:var(--dim); }
.live-demo-cta {
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:14px; font-weight:700; color:var(--sky); transition:gap .2s ease;
}
.live-demo-cta:hover { gap:10px; }
@media(max-width:820px){
  .live-demo { padding:56px 0; }
  .live-demo-header { flex-direction:column; align-items:flex-start; gap:12px; }
  .live-demo-head-desc { max-width:none; }
  .live-demo-rows { margin-top:8px; }
  .live-demo-row { grid-template-columns:1fr; gap:22px; padding:34px 0; }
  .live-demo-row.reverse .demo-frame { order:0; }
  .live-demo-body { font-size:13.5px; max-width:none; }
}

/* ── UN SEUL CRM, PLUSIEURS SCÉNARIOS ──────────────────────── */
.scenarios { padding:72px 0; }
.scenarios-header { text-align:center; max-width:680px; margin:0 auto 56px; }
.scenarios-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.scenario-card {
  padding:36px 32px; background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  position:relative; overflow:hidden; transition:transform .3s ease, border-color .3s ease;
}
.scenario-card:hover { transform:translateY(-3px); border-color:rgba(56,189,248,.25); }
.scenario-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--sky), transparent); opacity:.6; }
.scenario-card.scenario-featured {
  background:linear-gradient(160deg, rgba(56,189,248,.05) 0%, var(--card) 50%);
  border-color:rgba(56,189,248,.28);
}
.scenario-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; color:var(--sky);
  text-transform:uppercase; letter-spacing:.1em;
  padding:5px 12px; background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.2); border-radius:var(--r-xs);
  margin-bottom:18px;
}
.scenario-tag .material-symbols-outlined { font-size:14px; font-variation-settings:'FILL' 1,'wght' 600; }
.scenario-title { font-size:24px; font-weight:800; letter-spacing:-.02em; margin-bottom:8px; line-height:1.2; }
.scenario-title em { font-style:italic; color:var(--sky); }
.scenario-desc { font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:22px; }
.scenario-list { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.scenario-list li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted); line-height:1.6; }
.scenario-list li .material-symbols-outlined {
  font-size:16px; color:var(--emerald); margin-top:3px; flex-shrink:0;
  width:20px; height:20px; border-radius:50%; background:rgba(52,211,153,.12);
  display:inline-flex; align-items:center; justify-content:center;
  font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 18;
}
.scenario-recommend {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--dim); padding-top:18px; border-top:1px dashed var(--border);
}
.scenario-recommend strong { color:var(--sky); font-weight:700; }
@media(max-width:768px){ .scenarios-grid { grid-template-columns:1fr; } }

/* Reduce-motion no longer kills brand animations (product decision).
   Keep only a gentle courtesy: instant scroll for reduce-motion users. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
}

/* ── SHOWCASE CARD ANIMATIONS (scroll-triggered, once; anti-FOUC via .showcase-anim JS flag) ── */
.showcase-anim .showcase-vis .esign-header,
.showcase-anim .showcase-vis .signer,
.showcase-anim .showcase-vis .notif-row,
.showcase-anim .showcase-vis .mock-row,
.showcase-anim .showcase-vis .progress-wrap { opacity:0; }
.showcase-vis.play .esign-header,
.showcase-vis.play .signer,
.showcase-vis.play .notif-row,
.showcase-vis.play .mock-row,
.showcase-vis.play .progress-wrap { animation:scIn .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes scIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.showcase-vis.play .esign-header{animation-delay:.02s}
.showcase-vis.play .signer:nth-child(2){animation-delay:.14s}
.showcase-vis.play .signer:nth-child(3){animation-delay:.26s}
.showcase-vis.play .signer:nth-child(4){animation-delay:.38s}
.showcase-vis.play .notif-row:nth-child(1){animation-delay:.05s}
.showcase-vis.play .notif-row:nth-child(2){animation-delay:.17s}
.showcase-vis.play .notif-row:nth-child(3){animation-delay:.29s}
.showcase-vis.play .notif-row:nth-child(4){animation-delay:.41s}
.showcase-vis.play .mock-row:nth-child(1){animation-delay:.05s}
.showcase-vis.play .mock-row:nth-child(2){animation-delay:.15s}
.showcase-vis.play .mock-row:nth-child(3){animation-delay:.25s}
.showcase-vis.play .progress-wrap{animation-delay:.35s}
/* signature draws in (left->right clip) after its row appears */
.showcase-anim .showcase-vis .signer-sig { clip-path:inset(0 100% 0 0); }
.showcase-vis.play .signer:nth-child(2) .signer-sig { animation:scSign .75s ease-out .6s forwards; }
.showcase-vis.play .signer:nth-child(3) .signer-sig { animation:scSign .75s ease-out 1s forwards; }
@keyframes scSign { to { clip-path:inset(0 0 0 0); } }
/* "Signed" badge pops after signatures */
.showcase-anim .showcase-vis .badge-status { opacity:0; transform:scale(.6); }
.showcase-vis.play .badge-status { animation:scPop .5s cubic-bezier(.34,1.56,.64,1) 1.55s forwards; }
/* notif status badges pop after their row */
.showcase-anim .showcase-vis .notif-badge { opacity:0; transform:scale(.6); }
.showcase-vis.play .notif-row:nth-child(1) .notif-badge{animation:scPop .42s cubic-bezier(.34,1.56,.64,1) .38s forwards}
.showcase-vis.play .notif-row:nth-child(2) .notif-badge{animation:scPop .42s cubic-bezier(.34,1.56,.64,1) .5s forwards}
.showcase-vis.play .notif-row:nth-child(3) .notif-badge{animation:scPop .42s cubic-bezier(.34,1.56,.64,1) .62s forwards}
.showcase-vis.play .notif-row:nth-child(4) .notif-badge{animation:scPop .42s cubic-bezier(.34,1.56,.64,1) .74s forwards}
@keyframes scPop { to { opacity:1; transform:scale(1); } }
/* progress bar fills on play (fallback: inline width:85% shows without JS) */
.showcase-anim .progress-fill { width:0 !important; transition:width 1.1s cubic-bezier(.16,1,.3,1) .5s; }
.showcase-vis.play .progress-fill { width:85% !important; }

/* ── HERO DASHBOARD ENTRANCE (pure CSS on load; compositor-friendly, no JS/TBT/CLS) ── */
@keyframes heroRise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes heroFade { to{opacity:1} }
@keyframes heroPop  { from{opacity:0;transform:scale(.72)} to{opacity:1;transform:scale(1)} }
@keyframes heroDraw { to{stroke-dashoffset:0} }
.hero-visual .kpi { opacity:0; animation:heroRise .6s cubic-bezier(.16,1,.3,1) both; }
.hero-visual .kpi:nth-child(1){animation-delay:.15s}
.hero-visual .kpi:nth-child(2){animation-delay:.27s}
.hero-visual .kpi:nth-child(3){animation-delay:.39s}
.hero-visual .kpi:nth-child(4){animation-delay:.51s}
.dash-line { stroke-dasharray:1; stroke-dashoffset:1; animation:heroDraw 1.5s cubic-bezier(.22,1,.36,1) .6s forwards; }
.dash-area { opacity:0; animation:heroFade .9s ease-out 1.35s forwards; }
.dash-chart-dot  { opacity:0; animation:heroPop .5s cubic-bezier(.34,1.56,.64,1) 1.7s forwards; }
.dash-chart-peak { opacity:0; animation:heroPop .5s cubic-bezier(.34,1.56,.64,1) 1.9s forwards; }
.hero-visual .dash-tr { opacity:0; animation:heroRise .55s cubic-bezier(.16,1,.3,1) both; }
.hero-visual .dash-tr:nth-child(2){animation-delay:.7s}
.hero-visual .dash-tr:nth-child(3){animation-delay:.82s}
.hero-visual .dash-tr:nth-child(4){animation-delay:.94s}
.hero-float { opacity:0; }
.hero-float-1 { animation:float 5s ease-in-out infinite,        heroFade .6s ease-out 1.9s forwards; }
.hero-float-2 { animation:float 6.5s ease-in-out infinite 1.2s, heroFade .6s ease-out 2.0s forwards; }
.hero-float-3 { animation:float 7s ease-in-out infinite 2.5s,   heroFade .6s ease-out 2.1s forwards; }
.hero-float-4 { animation:float 6s ease-in-out infinite .6s,    heroFade .6s ease-out 2.2s forwards; }
.hero-float-5 { animation:float 7.5s ease-in-out infinite 1.8s, heroFade .6s ease-out 2.3s forwards; }
.hero-float-6 { animation:float 6.8s ease-in-out infinite .9s,  heroFade .6s ease-out 2.4s forwards; }
.hero-float-7 { animation:float 7.2s ease-in-out infinite 2.1s, heroFade .6s ease-out 2.5s forwards; }

/* ── HERO STAGE — uniform minimize (keeps landscape) + ambient premium glow ── */
.hero-stage { position:relative; }
@media (min-width:1101px){ .hero-stage { transform:scale(.88); transform-origin:center center; } }
.hero-stage::before {
  content:''; position:absolute; inset:-12% -8% -14% -8%; z-index:0; pointer-events:none;
  background:
    radial-gradient(55% 50% at 63% 36%, rgba(56,189,248,.30), transparent 70%),
    radial-gradient(46% 46% at 28% 78%, rgba(129,140,248,.20), transparent 72%);
  filter:blur(48px);
}

/* ── HERO ROTATING HEADLINE — grid-stack: both variants share one cell → height = tallest at every width/lang → zero CLS ── */