/* =========================================================
   Section 01 — Journey horizontal track
   Tokens aligned to home_journey.css LIGHT mode
   + brand navy #162984 · violet #7C3AED
   ========================================================= */

/* Brand logo font — local copy (serves when root is docs/marketing-brand)
   Source of truth: frontend/css/fonts/TiltNeon-Variable.ttf · .aio-brand-logo in ai_brand.css */
@font-face {
  font-family: "Tilt Neon";
  src:
    url("../assets/fonts/TiltNeon-Variable.ttf") format("truetype-variations"),
    url("../assets/fonts/TiltNeon-Variable.ttf") format("truetype"),
    url("../../assets/fonts/TiltNeon-Variable.ttf") format("truetype-variations"),
    url("../../assets/fonts/TiltNeon-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Page / brand */
  --bg: #f8fafc;
  --navy: #162984;
  --violet: #7c3aed;
  --ink: #0f172a;

  /* From home_journey light */
  --jc-bg: #f1f5f9;
  --jc-card-bg: #ffffff;
  --jc-card-border: rgba(15, 23, 42, 0.12);
  --jc-text: #0f172a;
  --jc-text-secondary: #1e293b;
  --jc-text-muted: #475569;
  --jc-text-dim: #64748b;
  --jc-green: #047857;
  --jc-red: #b91c1c;
  --jc-purple: #6d28d9;
  --jc-cyan: #0e7490;
  --jc-glow: rgba(99, 102, 241, 0.1);
  --jc-accent: #7c3aed;

  --nav-h: 48px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

/* =========================================================
   Scroll FX — Parallax + fade ease in/out (all sections)
   JS drives --px-y / --px-o; CSS composes transform+opacity
   ========================================================= */

.px-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.px-section.px-ready .px-layer {
  will-change: transform, opacity;
}

.px-layer {
  --px-y: 0px;
  --px-o: 1;
  --px-rise: 0px;
  transform: translate3d(0, calc(var(--px-y) + var(--px-rise)), 0);
  opacity: var(--px-o);
  /* scroll-fx lerps via rAF — avoid CSS transition fighting scroll */
  transition: none;
}

/* Pre-ready only: soft fade/rise into first frame */
.px-section:not(.px-ready) .px-layer {
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Before first paint from scroll-fx: soft pre-state (non-origin) */
.px-section:not(#origin):not(.px-ready) .px-layer[data-px-fade="copy"],
.px-section:not(#origin):not(.px-ready) .px-layer[data-px-fade="stage"] {
  --px-o: 0;
  --px-rise: 28px;
}

.px-section:not(#origin):not(.px-ready) .px-layer[data-px-fade="soft"] {
  --px-o: 0;
}

/* Ambient orbs — depth layers for parallax glow */
.px-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.px-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.85;
}

.px-orb--violet {
  width: min(52vw, 420px);
  height: min(52vw, 420px);
  top: -8%;
  left: -10%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.35) 0%, transparent 68%);
}

.px-orb--navy {
  width: min(48vw, 380px);
  height: min(48vw, 380px);
  bottom: -6%;
  right: -8%;
  background: radial-gradient(circle, rgba(22, 41, 132, 0.4) 0%, transparent 70%);
}

.px-orb--soft-violet {
  width: min(46vw, 360px);
  height: min(46vw, 360px);
  top: 4%;
  right: -12%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12) 0%, transparent 70%);
}

.px-orb--soft-navy {
  width: min(42vw, 320px);
  height: min(42vw, 320px);
  bottom: 6%;
  left: -10%;
  background: radial-gradient(circle, rgba(22, 41, 132, 0.1) 0%, transparent 70%);
}

.px-orb--soft-teal {
  width: min(40vw, 300px);
  height: min(40vw, 300px);
  bottom: 10%;
  right: -8%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
}

/* Keep section content above ambient */
.px-section > :not(.px-ambient) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .px-layer {
    --px-y: 0px !important;
    --px-o: 1 !important;
    --px-rise: 0px !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .px-section:not(#origin):not(.px-ready) .px-layer[data-px-fade="copy"],
  .px-section:not(#origin):not(.px-ready) .px-layer[data-px-fade="stage"],
  .px-section:not(#origin):not(.px-ready) .px-layer[data-px-fade="soft"] {
    --px-o: 1;
    --px-rise: 0px;
  }
}

@media (max-width: 720px) {
  /* lighter parallax on small screens (JS also scales depth) */
  .px-orb--violet,
  .px-orb--navy {
    width: min(70vw, 280px);
    height: min(70vw, 280px);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

/* Logo wordmark — BRAND_GUIDELINES + frontend/css/ai_brand.css .aio-brand-logo */
.logo,
.aio-brand-logo {
  font-family: "Tilt Neon", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: "XROT" 0, "YROT" 0 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  background: transparent !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #162984 !important;
  color: #162984 !important;
  display: inline-block;
  white-space: nowrap;
  line-height: 1.15;
}

/* ——— Nav ——— */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(20px, 4vw);
  background: rgba(248, 250, 252, 0.8);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, background 0.25s;
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.nav .logo,
.nav .aio-brand-logo {
  font-size: 1.5rem !important;
  line-height: 1.15 !important;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--jc-text-muted, #475569);
  transition: color 0.2s;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--violet);
  outline: none;
}

.nav-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: color 0.2s;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  color: var(--violet);
  outline: none;
}

.nav-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
  border-radius: 4px;
}

/* ——— Mobile nav toggle ("เมนู" dot trigger) ——— */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(22, 41, 132, 0.06);
  border: 1px solid rgba(22, 41, 132, 0.12);
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--navy);
  transition: background 0.2s, border-color 0.2s;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: rgba(22, 41, 132, 0.1);
  outline: none;
}

.nav-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

.nav-toggle-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.nav-toggle-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-dots i:nth-child(1) {
  transform: translateX(2px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-dots i:nth-child(3) {
  transform: translateX(-2px);
}

.nav-scrim {
  display: none;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav-scrim {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    background: rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(2px);
    z-index: 48;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }

  .nav.is-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-right {
    position: fixed;
    top: var(--nav-h);
    right: max(12px, 3vw);
    left: auto;
    z-index: 49;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: min(78vw, 300px);
    max-height: calc(100vh - var(--nav-h) - 16px);
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
  }

  .nav.is-open .nav-right {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s, transform 0.2s;
  }

  .nav-link {
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    background: rgba(124, 58, 237, 0.08);
  }

  .nav-cta {
    margin-top: 6px;
    padding: 11px 12px;
    border-radius: 10px;
    text-align: center;
    background: var(--navy);
    color: #fff !important;
    font-weight: 700;
  }

  .nav-cta:hover,
  .nav-cta:focus-visible {
    color: #fff;
    opacity: 0.9;
  }
}

/* =========================================================
   Section 00 — ปฐมบท (Origin)
   Doc ticker · number flood → 7+ digit settle
   ========================================================= */

.origin {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--nav-h) + clamp(36px, 6vh, 56px)) 0 clamp(48px, 8vh, 72px);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(124, 58, 237, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(22, 41, 132, 0.35), transparent 50%),
    #080816;
  color: #e2e8f0;
  overflow: hidden;
}

.origin-inner {
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 0 max(16px, 4vw);
  text-align: center;
  position: relative;
  z-index: 2;
}

.origin-kicker {
  font-family: "Kanit", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 12px;
}

.origin-title {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 6.5vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #f8fafc;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.origin-title-em {
  background: linear-gradient(90deg, #c4b5fd, #93c5fd 50%, #a5b4fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.origin-lead {
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: #94a3b8;
  max-width: 36rem;
  margin: 0 auto 24px;
}

/* Infinite doc-type ticker */
.origin-ticker {
  position: relative;
  margin: 0 auto 36px;
  max-width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.origin-ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.origin-ticker-track {
  display: flex;
  width: max-content;
  gap: 10px;
  animation: originMarquee 48s linear infinite;
  will-change: transform;
}

.origin-ticker-track:hover {
  animation-play-state: paused;
}

.origin-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: "Kanit", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(167, 139, 250, 0.22);
}

.origin-pill i {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
}

.origin-pill i.is-pdf { background: #dc2626; }
.origin-pill i.is-xls { background: #059669; }
.origin-pill i.is-doc { background: #2563eb; }
.origin-pill i.is-us { background: #7c3aed; }

@keyframes originMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/*
 * #originStage
 * - stars: abstract dots (docs as night sky)
 * - cabinets accumulate & align in a neat row
 * - stays as soft background when stats are on
 */
.origin-stage {
  position: relative;
  min-height: clamp(300px, 48vh, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  overflow: hidden;
}

.origin-cabinet-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1s ease;
}

/* ตัวเลขขึ้นแล้วตู้/ดาวยังชัด — เป็น visual หลักของเวที */
.origin-stage.is-settled .origin-cabinet-scene {
  opacity: 0.88;
}

/* Abstract starfield — brighter, more presence */
.origin-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.origin-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: rgba(241, 245, 249, var(--a, 0.7));
  box-shadow: 0 0 var(--glow, 8px) rgba(196, 181, 253, var(--ga, 0.45));
  animation: originStarTwinkle ease-in-out infinite;
  animation-duration: var(--dur, 3.2s);
  animation-delay: var(--delay, 0s);
}

.origin-star.is-drift {
  animation-name: originStarDrift;
}

@keyframes originStarTwinkle {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

@keyframes originStarDrift {
  0% {
    opacity: 0.4;
    transform: translate(0, 0) scale(0.95);
  }
  50% {
    opacity: 1;
    transform: translate(var(--dx, 4px), var(--dy, -6px)) scale(1.2);
  }
  100% {
    opacity: 0.45;
    transform: translate(0, 0) scale(0.95);
  }
}

.origin-fly-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Cabinets — hero of the stage, clear line-art */
.origin-cabinets {
  position: absolute;
  left: 50%;
  top: 48%;
  bottom: auto;
  transform: translate(-50%, -38%);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 18px 20px;
  z-index: 2;
  width: min(96%, 720px);
  max-height: 62%;
  overflow: visible;
}

.origin-cabinet {
  flex: 0 0 auto;
  width: 118px;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  transition:
    opacity 0.55s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.origin-cabinet.is-in {
  opacity: 1;
  transform: none;
}

.origin-cabinet.is-active .origin-cabinet-frame {
  border-color: rgba(216, 180, 254, 0.9);
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.2);
}

.origin-cabinet.is-full .origin-cabinet-frame {
  border-color: rgba(203, 213, 225, 0.55);
}

.origin-cabinet-frame {
  position: relative;
  height: 152px;
  border: 1.5px solid rgba(226, 232, 240, 0.62);
  border-radius: 8px;
  background: rgba(15, 18, 36, 0.12);
  overflow: hidden;
}

.origin-cabinet-frame::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 28px;
  bottom: 10px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 3px;
  pointer-events: none;
}

.origin-cabinet-tag {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Kanit", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(226, 232, 240, 0.88);
}

.origin-cabinet-slots {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 34px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.origin-cabinet-slots i {
  display: block;
  height: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.origin-cabinet-fill {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 0%;
  max-height: calc(100% - 48px);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(
    180deg,
    rgba(124, 58, 237, 0.14),
    rgba(124, 58, 237, 0.03)
  );
  transition: height 0.35s ease;
  pointer-events: none;
}

.origin-cabinet-label {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-family: "Kanit", sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(148, 163, 184, 0.75);
}

/* Abstract star-dots that fly into the active cabinet */
.origin-doc {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: var(--sz, 5px);
  height: var(--sz, 5px);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(226, 232, 240, 0.85);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.45);
  transform: translate(var(--x), var(--y)) scale(1);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    background 0.3s ease;
}

.origin-doc.is-show {
  opacity: 0.9;
}

.origin-doc.is-file {
  opacity: 0.35;
  transform: translate(var(--tx), var(--ty)) scale(0.35);
  background: rgba(196, 181, 253, 0.9);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.55);
}

.origin-doc.is-gone {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/*
 * Stats — compact proof strip (same row), secondary to cabinets/stars
 * Signature visual = ตู้เอกสาร + ดาว · ตัวเลขเป็น caption เบา
 */
.origin-stats {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%) translateY(8px);
  z-index: 4;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(28px, 6vw, 56px);
  width: min(100%, 520px);
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.origin-stats.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.origin-stat {
  padding: 0 6px;
  text-align: center;
  background: none;
  border: none;
  box-shadow: none;
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
}

.origin-stat--accent {
  border: none;
  background: none;
  box-shadow: none;
}

.origin-stat-num {
  font-family: "Kanit", ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(1.35rem, 3.6vw, 1.85rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: rgba(248, 250, 252, 0.92);
  margin-bottom: 4px;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.origin-stats.is-visible .origin-stat:nth-child(1) .origin-stat-num {
  opacity: 1;
  transform: none;
  transition-delay: 0.06s;
}

.origin-stats.is-visible .origin-stat:nth-child(2) .origin-stat-num {
  opacity: 1;
  transform: none;
  transition-delay: 0.16s;
}

.origin-stat-num.is-tick {
  transform: scale(1.02);
}

.origin-stat--accent .origin-stat-num {
  font-weight: 500;
  background: linear-gradient(100deg, #e9d5ff 0%, #c4b5fd 45%, #a5f3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 10px rgba(124, 58, 237, 0.25));
}

.origin-stat-label {
  font-family: "Kanit", sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  opacity: 0;
  transition: opacity 0.6s ease 0.28s;
}

.origin-stats.is-visible .origin-stat-label {
  opacity: 1;
}

@media (max-width: 640px) {
  .origin-stats {
    gap: 20px;
    bottom: 4%;
    width: 94%;
  }

  .origin-stat {
    padding: 0 4px;
  }

  .origin-stat-num {
    font-size: clamp(1.15rem, 5.5vw, 1.45rem);
    font-weight: 500;
  }

  .origin-stat-label {
    font-size: 0.58rem;
  }

  .origin-stage {
    min-height: 340px;
  }

  .origin-lead {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .origin-ticker-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
  }

  .origin-doc {
    transition: none !important;
  }

  .origin-stats,
  .origin-stats.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .origin-stat-num,
  .origin-stats.is-visible .origin-stat-num,
  .origin-stat-label,
  .origin-stats.is-visible .origin-stat-label {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .origin-stat-num.is-tick {
    transform: none;
  }
}

@media (max-width: 640px) {
  .origin-cabinets {
    gap: 10px 12px;
    top: 44%;
    width: 96%;
    max-height: 52%;
  }

  .origin-cabinet {
    width: 88px;
  }

  .origin-cabinet-frame {
    height: 118px;
  }

  .origin-cabinet-tag {
    font-size: 0.72rem;
  }

  .origin-cabinet-label {
    font-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .origin-star {
    animation: none !important;
    opacity: 0.4;
  }
}

/* ——— Welcome ——— */
.welcome {
  padding: calc(var(--nav-h) + clamp(28px, 5vh, 48px)) 0 0;
}

.welcome-head {
  text-align: center;
  padding: 0 max(16px, 4vw);
  margin-bottom: clamp(16px, 3vh, 28px);
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 8px;
}

.product,
.welcome-head .aio-brand-logo {
  font-size: clamp(36px, 8vw, 56px) !important;
  line-height: 1.05 !important;
  margin-bottom: 10px;
}

.headline {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 5.5vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ——— Journey hero (matches product track feel) ——— */
.journey-hero {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jc-market-chips {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 14px;
}

.jc-mkt-chip {
  border: 1px solid var(--jc-card-border);
  background: #fff;
  color: var(--jc-text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.jc-mkt-chip:hover {
  border-color: rgba(124, 58, 237, 0.3);
  color: var(--navy);
}

.jc-mkt-chip.is-on {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.35);
  color: var(--violet);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.08);
}

.jc-mkt-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

/* Horizontal track — cards side by side like home_journey */
.journey-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px max(16px, calc(50vw - 240px)) 24px;
  min-height: 320px;
}

.journey-track::-webkit-scrollbar {
  display: none;
}

/* ——— Editorial Journey cards ———
   Sparse copy + mini ticker widgets (sample UI)
   Anatomy: code + label · big line · promise · stock chips
*/
.jc-story {
  flex: 0 0 min(84vw, 400px);
  width: min(84vw, 400px);
  max-width: 400px;
  min-height: 300px;
  scroll-snap-align: center;
  margin: 0 12px;
  padding: 26px 24px 30px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0.55;
  transform: scale(0.94);
  transition: transform 0.45s var(--ease), opacity 0.45s, box-shadow 0.45s, border-color 0.45s;
  color: var(--jc-text);
}

.jc-story.jc-active {
  opacity: 1;
  transform: scale(1);
  box-shadow:
    0 12px 40px rgba(22, 41, 132, 0.1),
    0 0 0 1px rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.22);
}

/* Soft type tints — brand-safe, not data signals */
.jc-story--th {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(22, 41, 132, 0.07), transparent 55%),
    #fff;
}
.jc-story--us {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(6, 182, 212, 0.08), transparent 55%),
    #fff;
}
.jc-story--cn {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(159, 18, 57, 0.06), transparent 55%),
    #fff;
}
.jc-story--crypto {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(180, 83, 9, 0.07), transparent 55%),
    #fff;
}
.jc-story--commodity {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(15, 118, 110, 0.07), transparent 55%),
    #fff;
}
.jc-story--mustknow {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(124, 58, 237, 0.1), transparent 55%),
    #fff;
}

/* Top: market identity */
.jc-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.jc-code {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: "Kanit", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--navy);
  flex-shrink: 0;
}

.jc-story--us .jc-code { background: #0e7490; }
.jc-story--cn .jc-code { background: #9f1239; }
.jc-story--crypto .jc-code { background: #b45309; }
.jc-story--commodity .jc-code { background: #0f766e; }
.jc-story--mustknow .jc-code { background: #6d28d9; }

.jc-top-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jc-label {
  font-family: "Kanit", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.jc-kicker {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--jc-text-dim);
  letter-spacing: 0.02em;
}

/* Body: one clear idea + stock widgets */
.jc-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: flex-start;
  padding-bottom: 6px;
}

.jc-line {
  font-family: "Kanit", sans-serif;
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

.jc-line.is-swap {
  animation: swap 0.4s var(--ease-out);
}

.jc-promise {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--jc-text-muted);
  max-width: 30ch;
}

/* Mini stock / ticker widgets — compact, not dominant */
.jc-stocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}

.jc-stk {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 7px 9px 6px;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.2s, background 0.2s;
}

.jc-story.jc-active .jc-stk {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.jc-stk-sym {
  font-family: "Kanit", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.15;
}

.jc-stk-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.jc-stk-px {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--jc-text-secondary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.jc-stk-ch {
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.jc-stk.is-up .jc-stk-ch {
  color: var(--jc-green);
}

.jc-stk.is-down .jc-stk-ch {
  color: var(--jc-red);
}

.jc-stk.is-up {
  border-color: rgba(4, 120, 87, 0.12);
  background: linear-gradient(160deg, rgba(4, 120, 87, 0.05), rgba(248, 250, 252, 0.95) 70%);
}

.jc-stk.is-down {
  border-color: rgba(185, 28, 28, 0.1);
  background: linear-gradient(160deg, rgba(185, 28, 28, 0.04), rgba(248, 250, 252, 0.95) 70%);
}

/* Autoplay progress — bottom of each card */
.jc-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.jc-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--navy), var(--violet));
  border-radius: 0 2px 2px 0;
}

.jc-progress-bar.is-running {
  animation: progressRun 3.8s linear forwards;
}

@keyframes progressRun {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* Meta under track */
.journey-meta {
  padding: 0 16px 8px;
  text-align: center;
}

.journey-hint {
  font-size: 13px;
  color: var(--jc-text-muted);
  margin-bottom: 12px;
}

.journey-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.journey-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: background 0.25s, transform 0.25s;
}

.journey-dots i.is-on {
  background: var(--violet);
  transform: scale(1.25);
}

/* CTA */
.welcome-cta {
  text-align: center;
  padding: 20px 16px 8px;
}

.sub {
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}

.buy-link {
  font-size: 17px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  transition: color 0.2s;
}

.buy-link::after {
  content: " ›";
}

.buy-link:hover,
.buy-link:focus-visible {
  color: var(--violet);
  outline: none;
}

.buy-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
  border-radius: 4px;
}

/* Was used for scroll-inject cards; keep minimal so S01→S02 is tight */
.scroll-runway {
  height: 0;
  pointer-events: none;
}

/* Motion */
@keyframes cardIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateX(40px);
  }
  to {
    opacity: 0.62;
    transform: scale(0.94);
  }
}

.jc-story.is-enter:not(.jc-active) {
  animation: cardIn 0.55s var(--ease-out) both;
}

.jc-story.is-enter.jc-active {
  animation: cardInActive 0.55s var(--ease-out) both;
}

@keyframes cardInActive {
  from {
    opacity: 0;
    transform: scale(0.96) translateX(36px);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes swap {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.welcome-head .eyebrow,
.welcome-head .product,
.welcome-head .headline,
.journey-hero {
  opacity: 0;
  animation: fadeUp 0.85s var(--ease-out) forwards;
}

.welcome-head .eyebrow { animation-delay: 0.05s; }
.welcome-head .product { animation-delay: 0.1s; }
.welcome-head .headline { animation-delay: 0.18s; }
.journey-hero { animation-delay: 0.28s; }

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-head .eyebrow,
  .welcome-head .product,
  .welcome-head .headline,
  .journey-hero,
  .jc-story.is-enter,
  .jc-line.is-swap,
  .jc-progress-bar.is-running {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .jc-story {
    opacity: 1;
    transform: none;
  }

  .jc-progress-bar.is-running {
    width: 100%;
  }

  .scroll-runway {
    height: 0;
  }

  .journey-track {
    scroll-behavior: auto;
  }
}

@media (min-width: 900px) {
  .jc-story {
    flex-basis: 400px;
    width: 400px;
  }

  .journey-track {
    padding-left: max(24px, calc(50% - 210px));
    padding-right: max(24px, calc(50% - 210px));
  }
}

/* =========================================================
   Section 02 — MaX Chat
   Apple chapter layout (iPhone 17 “การออกแบบ” pattern):
   label · dual headline · feature tabs · media gallery · caption
   ========================================================= */

.maxchat {
  position: relative;
  padding: clamp(56px, 8vh, 88px) 0 clamp(64px, 9vh, 100px);
  background: #f5f5f7; /* Apple-like soft gray canvas */
  /* visible so icons can start outside the iMac within the gallery */
  overflow: visible;
}

/* Copy block — like “การออกแบบ / ประทับใจยิ่งกว่า ทนทานยิ่งขึ้น” */
.s2-copy {
  text-align: center;
  padding: 0 max(20px, 5vw);
  max-width: 920px;
  margin: 0 auto 28px;
}

.s2-label {
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.s2-headline {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 6.5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.s2-headline span {
  display: block;
}

/* Gallery: tabs (vertical) + iMac side by side */
.s2-gallery {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 max(12px, 3vw);
}

.s2-media {
  position: relative;
  background: linear-gradient(180deg, #e8e8ed 0%, #dedee5 100%);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 36px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 28px);
  min-height: clamp(360px, 48vw, 520px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  transition: background 0.45s var(--ease);
  overflow: visible;
}

.s2-media.is-projectx {
  background: linear-gradient(180deg, #e4eef3 0%, #d5e4ec 100%);
}

.s2-media.is-news {
  background: linear-gradient(180deg, #ebe8f5 0%, #e0dcf0 100%);
}

.s2-media.is-trust {
  background: linear-gradient(180deg, #e8eaf5 0%, #d9deef 100%);
}

/* Vertical feature list beside iMac */
.s2-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  width: min(200px, 28%);
  min-width: 148px;
  margin: 0;
  padding: 0;
  z-index: 3;
}

.s2-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: "Kanit", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1d1d1f;
  background: rgba(255, 255, 255, 0.72);
  border: none;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
  white-space: nowrap;
}

.s2-tab-num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #86868b;
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
}

.s2-tab-label {
  flex: 1;
  line-height: 1.25;
}

.s2-tab:hover,
.s2-tab:focus-visible {
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.s2-tab.is-on {
  background: #1d1d1f;
  color: #f5f5f7;
  box-shadow: 0 8px 20px rgba(29, 29, 31, 0.2);
}

.s2-tab.is-on .s2-tab-num {
  color: rgba(245, 245, 247, 0.55);
}

.s2-tab:active {
  transform: scale(0.98);
}

.s2-tab:disabled {
  opacity: 0.65;
  cursor: wait;
}


.s2-caption {
  text-align: center;
  max-width: 640px;
  margin: 22px auto 0;
  font-size: clamp(15px, 2.1vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: #1d1d1f;
  min-height: 3.2em;
  padding: 0 8px;
}

.s2-caption strong {
  font-weight: 700;
  color: var(--navy);
}

/*
 * Signature layout: tabs | product column
 * Trust rail sits UNDER iMac — small file chips + flow dots rising into the machine
 * Story: “คำตอบมาจากไฟล์ Trust ที่ตรวจสอบได้”
 */
.s2-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: min(100%, 560px);
  max-width: 560px;
  gap: 0;
}

.imac {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* —— Trust rail: compact grid + flow animation —— */
.trust-rail {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-top: 4px;
  padding: 18px 12px 10px;
  text-align: center;
}

.trust-rail-kicker {
  font-family: "Kanit", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6e6e73;
  margin-bottom: 12px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px 6px;
  align-items: start;
  justify-items: center;
}

/* Compact chip — pill + tiny color badge, not giant documents */
.tchip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  opacity: 0.38;
  transform: translateY(6px);
  filter: grayscale(0.35);
  transition:
    opacity 0.35s var(--ease),
    transform 0.4s var(--ease-out),
    filter 0.35s;
}

.tchip.is-hot {
  opacity: 1;
  transform: translateY(0);
  filter: none;
  animation: tchipIn 0.5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 0.06s);
}

.tchip.is-hot .tchip-ico {
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.35);
  animation: tchipPulse 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.12s);
}

.tchip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  font-family: "Kanit", system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
}

.tchip-ico--pdf {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.tchip-ico--xlsx {
  background: linear-gradient(135deg, #10b981, #047857);
}

.tchip-ico--word {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.tchip-name {
  font-family: "Kanit", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.15;
  max-width: 4.5rem;
  text-align: center;
}

/* Flow: dots rising from rail into iMac (trust → chat) */
.trust-flow {
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.trust-rail.is-flowing .trust-flow {
  opacity: 1;
}

.trust-flow-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.55), rgba(22, 41, 132, 0.15));
  border-radius: 2px;
}

.trust-flow-dot {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #7c3aed;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.6);
  animation: trustDotUp 1.6s ease-in-out infinite;
  opacity: 0;
}

.trust-flow-dot:nth-child(2) { animation-delay: 0s; }
.trust-flow-dot:nth-child(3) { animation-delay: 0.45s; }
.trust-flow-dot:nth-child(4) { animation-delay: 0.9s; }

@keyframes trustDotUp {
  0% {
    top: 16px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    top: -6px;
    opacity: 0;
  }
}

@keyframes tchipIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tchipPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
  }
}

.imac-bezel {
  width: 100%;
  background: linear-gradient(180deg, #3e3e44 0%, #242428 55%, #1a1a1e 100%);
  border-radius: 16px 16px 0 0;
  padding: 11px 12px 8px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 20px 48px rgba(15, 23, 42, 0.22),
    0 6px 16px rgba(15, 23, 42, 0.12);
}

.imac-camera {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a2a30;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  margin: 0 auto 8px;
}

.imac-screen {
  position: relative;
  background: #0b0f1a;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 260px;
  max-height: 420px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}

/* Chin under display (classic iMac bar) */
.imac-chin {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #efefF2 0%, #e2e2e8 40%, #d4d4dc 100%);
  border-radius: 0 0 14px 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 10px 24px rgba(15, 23, 42, 0.1);
}

.imac-mark {
  font-family: "Tilt Neon", sans-serif;
  font-size: 0.7rem;
  letter-spacing: -0.02em;
  color: rgba(22, 41, 132, 0.35);
  font-variation-settings: "XROT" 0, "YROT" 0;
  font-weight: 400;
}

/* Stand */
.imac-neck {
  width: 88px;
  height: 52px;
  margin-top: -1px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 18%, rgba(0, 0, 0, 0.08) 82%, transparent 100%),
    linear-gradient(180deg, #c8c8d0 0%, #a8a8b2 55%, #94949e 100%);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

.imac-foot {
  width: 148px;
  height: 9px;
  margin-top: -1px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #b8b8c0, #909098);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}



/* Chat app inside screen */
.chat-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(124, 58, 237, 0.12), transparent 50%),
    linear-gradient(180deg, #0e1220 0%, #0a0d18 100%);
  color: #e2e8f0;
  font-family: "Sarabun", system-ui, sans-serif;
}

.chat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 18, 32, 0.85);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.chat-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  flex-shrink: 0;
}

.chat-app-name {
  font-family: "Kanit", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.15;
}

.chat-app-meta {
  font-size: 0.62rem;
  color: #94a3b8;
  margin-top: 1px;
}

.chat-trust-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.35);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.chat-msg {
  max-width: 92%;
  animation: chatIn 0.4s var(--ease-out) both;
}

.chat-msg--user {
  align-self: flex-end;
}

.chat-msg--bot {
  align-self: flex-start;
}

.chat-bubble {
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.chat-msg--user .chat-bubble {
  background: linear-gradient(135deg, #162984, #4c1d95);
  color: #f8fafc;
  border-bottom-right-radius: 5px;
}

.chat-msg--bot .chat-bubble {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: #e2e8f0;
  border-bottom-left-radius: 5px;
}

.chat-bubble strong {
  color: #c4b5fd;
  font-weight: 700;
}

.chat-bubble .chat-muted {
  color: #94a3b8;
  font-size: 0.72rem;
}

/* Skill ACK card */
.skill-ack {
  align-self: stretch;
  margin: 2px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(124, 58, 237, 0.35);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.08), 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: skillPop 0.45s var(--ease-out) both;
}

.skill-ack--projectx {
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.1), 0 8px 24px rgba(0, 0, 0, 0.25);
}

.skill-ack-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.skill-ack-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  flex-shrink: 0;
}

.skill-ack--knowledge .skill-ack-icon {
  background: rgba(124, 58, 237, 0.25);
  color: #c4b5fd;
}

.skill-ack--projectx .skill-ack-icon {
  background: rgba(6, 182, 212, 0.22);
  color: #67e8f9;
}

.skill-ack-name {
  font-family: "Kanit", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.2;
}

.skill-ack-status {
  font-size: 0.62rem;
  color: #86efac;
  margin-left: auto;
  font-weight: 600;
}

.skill-ack-desc {
  font-size: 0.68rem;
  color: #94a3b8;
  line-height: 1.45;
  margin-bottom: 8px;
}

.skill-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.skill-src {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: 6px;
  color: #e2e8f0;
  background: rgba(51, 65, 85, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.18);
  animation: srcIn 0.35s var(--ease-out) both;
}

.skill-src.is-hot {
  color: #ede9fe;
  background: rgba(124, 58, 237, 0.35);
  border-color: rgba(167, 139, 250, 0.45);
}

.skill-ack--projectx .skill-src.is-hot {
  color: #cffafe;
  background: rgba(6, 182, 212, 0.28);
  border-color: rgba(34, 211, 238, 0.4);
}

.chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}

.chat-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94a3b8;
  animation: typingDot 1s ease-in-out infinite;
}

.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }

.chat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(10, 13, 24, 0.9);
  flex-shrink: 0;
}

.chat-composer-ph {
  flex: 1;
  font-size: 0.72rem;
  color: #64748b;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(71, 85, 105, 0.4);
}

.chat-composer-send {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--violet));
  flex-shrink: 0;
}



@keyframes chatIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes skillPop {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes srcIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes typingDot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* Tablet: still side-by-side if room */
@media (max-width: 820px) {
  .s2-media {
    gap: 14px;
    padding: 20px 14px;
  }

  .s2-tabs {
    width: 150px;
    min-width: 132px;
    gap: 8px;
  }

  .s2-tab {
    padding: 12px 12px;
    font-size: 0.85rem;
    border-radius: 12px;
  }

  .s2-tab-num {
    display: none;
  }
}

/* Mobile: tabs บน, iMac ล่าง (ยังเรียงแนวตั้งใน list) */
@media (max-width: 640px) {
  .maxchat {
    padding: 44px 0 56px;
  }

  .s2-media {
    flex-direction: column;
    align-items: stretch;
    border-radius: 20px;
    min-height: 0;
    padding: 16px 12px 18px;
    gap: 16px;
  }

  .s2-stage {
    width: 100%;
    max-width: 100%;
    order: 2;
  }

  .s2-tabs {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    order: 1;
  }

  .s2-tab {
    width: auto;
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
    justify-content: center;
    text-align: center;
    padding: 11px 12px;
    border-radius: 980px;
    font-size: 0.82rem;
  }

  .s2-tab-num {
    display: none;
  }

  .imac-bezel {
    padding: 8px 8px 6px;
    border-radius: 12px 12px 0 0;
  }

  .imac-screen {
    min-height: 220px;
    max-height: none;
    aspect-ratio: auto;
    height: min(46vh, 300px);
  }

  .imac-chin {
    height: 30px;
  }

  .imac-neck {
    width: 68px;
    height: 36px;
  }

  .imac-foot {
    width: 112px;
    height: 7px;
  }

  .chat-trust-badge {
    display: none;
  }

  .chat-bubble {
    font-size: 0.74rem;
  }

  .s2-caption {
    font-size: 15px;
    margin-top: 16px;
  }

  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 8px;
    max-width: 280px;
    margin: 0 auto;
  }

  .trust-rail {
    padding-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-msg,
  .skill-ack,
  .skill-src,
  .chat-typing i,
  .tchip.is-hot,
  .tchip.is-hot .tchip-ico,
  .trust-flow-dot {
    animation: none !important;
  }

  .tchip {
    transition: none;
    transform: none;
  }

  .trust-rail.is-flowing .trust-flow {
    opacity: 0.4;
  }
}

/* Tablet: 3×2 trust grid if narrow stage */
@media (max-width: 900px) and (min-width: 641px) {
  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 300px;
    margin: 0 auto;
    gap: 10px 12px;
  }
}

/* =========================================================
   Section 03 — Stock Infographic
   Apple iPhone 17 “กล้อง” chapter pattern:
   label · elevated headline · body · media gallery card
   (prompt caption + frame that changes)
   ========================================================= */

.infograph {
  position: relative;
  padding: calc(var(--nav-h, 52px) + clamp(48px, 7vh, 72px)) 0 clamp(80px, 11vh, 120px);
  background: #ffffff;
  color: #1d1d1f;
  outline: none;
  scroll-margin-top: calc(var(--nav-h, 52px) + 8px);
}

.infograph:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(22, 41, 132, 0.35);
}

/* Copy block — like กล้อง / กล้องหน้า 18MP Center Stage… */
.ig-copy {
  text-align: center;
  padding: 0 max(20px, 5vw);
  max-width: 920px;
  margin: 0 auto 36px;
}

.ig-label {
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

/* Elevated headline — Apple camera style (กล้องหน้า 18MP… / ชัดเลยว่า…) */
.ig-headline {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 5.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #1d1d1f;
  margin: 0 auto 18px;
  max-width: 14em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06em;
}

.ig-headline span {
  display: block;
}

.ig-body {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(15px, 1.9vw, 19px);
  font-weight: 400;
  line-height: 1.55;
  color: #6e6e73;
  margin: 0 auto;
  max-width: 34em;
}

/* Gallery — prompt + horizontal phone carousel */
.ig-gallery {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.ig-prompt {
  margin: 0;
  padding: 0 max(16px, 4vw);
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: #1d1d1f;
  text-align: center;
  max-width: 24em;
  min-height: 1.5em;
}

.ig-prompt.is-pop {
  animation: igPromptPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Carousel chrome */
.ig-carousel {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  max-width: 1100px;
  padding: 0 max(8px, 1.5vw);
  box-sizing: border-box;
}

.ig-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(29, 29, 31, 0.06);
  color: #1d1d1f;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.ig-nav:hover,
.ig-nav:focus-visible {
  background: rgba(29, 29, 31, 0.12);
  outline: none;
}

.ig-nav:active {
  transform: scale(0.96);
}

.ig-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  padding: 18px 0 28px;
  cursor: grab;
  touch-action: pan-y;
  /* soft edge fade so side phones dissolve into page */
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.ig-viewport:active {
  cursor: grabbing;
}

.ig-track {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ig-slide {
  flex: 0 0 auto;
  width: min(300px, 72vw);
  opacity: 0.42;
  transform: scale(0.86);
  transform-origin: center center;
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  user-select: none;
}

.ig-slide.is-on {
  opacity: 1;
  transform: scale(1);
  cursor: default;
  z-index: 1;
}

/* —— Phone chassis — height follows image aspect ratio —— */
.ig-phone {
  position: relative;
  width: 100%;
  margin: 0;
  pointer-events: none; /* clicks go to slide */
}

.ig-phone-shell {
  position: relative;
  width: 100%;
  border-radius: 40px;
  padding: 12px 11px 16px;
  box-sizing: border-box;
  background:
    linear-gradient(160deg, #3a3a3e 0%, #1c1c1f 38%, #2c2c30 72%, #141416 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset,
    0 22px 48px rgba(15, 23, 42, 0.18),
    0 8px 18px rgba(15, 23, 42, 0.1);
}

.ig-slide.is-on .ig-phone-shell {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset,
    0 28px 64px rgba(15, 23, 42, 0.24),
    0 12px 28px rgba(22, 41, 132, 0.1);
}

.ig-phone-btn {
  position: absolute;
  background: linear-gradient(180deg, #4a4a4e, #2a2a2e);
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.35);
}

.ig-phone-btn--silent {
  left: -2px;
  top: 14%;
  width: 3px;
  height: 18px;
  border-radius: 2px 0 0 2px;
}

.ig-phone-btn--vol-up {
  left: -2px;
  top: 22%;
  width: 3px;
  height: 28px;
  border-radius: 2px 0 0 2px;
}

.ig-phone-btn--vol-down {
  left: -2px;
  top: 32%;
  width: 3px;
  height: 28px;
  border-radius: 2px 0 0 2px;
}

.ig-phone-btn--power {
  right: -2px;
  top: 26%;
  width: 3px;
  height: 42px;
  border-radius: 0 2px 2px 0;
}

.ig-phone-island {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 26%;
  height: 20px;
  border-radius: 999px;
  background: #0a0a0c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  pointer-events: none;
}

.ig-phone-screen {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 30px;
  overflow: hidden;
  background: #05050c;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset;
  line-height: 0;
}

.ig-phone-screen img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  -webkit-user-drag: none;
}

.ig-phone-home {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 32%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.ig-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(210, 210, 215, 0.55);
}

.ig-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(29, 29, 31, 0.22);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.ig-dot:hover,
.ig-dot:focus-visible {
  background: rgba(29, 29, 31, 0.45);
  outline: none;
}

.ig-dot.is-on {
  background: #1d1d1f;
  transform: scale(1.15);
}

@keyframes igPromptPop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.infograph.is-inview .ig-carousel {
  animation: igEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes igEnter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 720px) {
  .ig-headline {
    max-width: 12em;
    font-size: clamp(26px, 7.2vw, 34px);
  }

  .ig-carousel {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .ig-nav {
    display: none;
  }

  .ig-slide {
    width: min(280px, 78vw);
  }

  .ig-viewport {
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 6%,
      #000 94%,
      transparent 100%
    );
  }

  .ig-phone-shell {
    border-radius: 34px;
    padding: 10px 9px 14px;
  }

  .ig-phone-screen {
    border-radius: 26px;
  }

  .ig-phone-island {
    top: 14px;
    height: 17px;
  }
}

@media (min-width: 900px) {
  .ig-slide {
    width: min(320px, 34vw);
  }
}

@media (min-width: 1100px) {
  .ig-slide {
    width: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-track,
  .ig-slide,
  .ig-prompt,
  .infograph.is-inview .ig-carousel {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Section 04 — MaX VPort
   Full-bleed wide chart · systems as tabs
   Auto Trade · Auto DCA · MaX FIRM · Winloss · Auto Dividend
   ========================================================= */

.vport {
  position: relative;
  padding: clamp(72px, 10vh, 112px) 0 clamp(56px, 8vh, 88px);
  background: #f5f5f7;
  color: #1d1d1f;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h, 52px) + 8px);
}

.vp-copy {
  text-align: center;
  padding: 0 max(20px, 5vw);
  max-width: 880px;
  margin: 0 auto 28px;
}

.vp-label {
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.vp-headline {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #1d1d1f;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.vp-headline span {
  display: block;
}

.vp-body {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.55;
  color: #6e6e73;
  margin: 0 auto;
  max-width: 36em;
}

/* Full-bleed chart stage */
.vp-stage {
  position: relative;
  width: 100%;
  margin: 0;
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%, rgba(124, 58, 237, 0.1), transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 100%, rgba(22, 41, 132, 0.1), transparent 50%),
    linear-gradient(180deg, #eef0f5 0%, #e4e6ee 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.vp-stage-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 28px;
  padding: 22px max(20px, 4vw) 10px;
  max-width: 1440px;
  margin: 0 auto;
}

.vp-metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

/* Stats แบบ plain · คั่นด้วยเส้นบาง ไม่ใช่การ์ด */
.vp-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
}

.vp-stat {
  min-width: 0;
  padding: 2px 14px;
  background: none;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid rgba(15, 23, 42, 0.1);
}

.vp-stat:first-child {
  border-left: none;
  padding-left: 0;
}

.vp-stat:last-child {
  padding-right: 0;
}

/* ปันผล / กำไร — เน้นด้วยสีตัวอักษร ไม่ใช้กล่อง */
.vp-stat--div .vp-stat-k {
  color: #0f766e;
}

.vp-stat--profit .vp-stat-k {
  color: #6d28d9;
}

.vp-stat--div .vp-stat-v {
  color: #0f766e;
}

.vp-stat--profit .vp-stat-v.is-up {
  color: #0f766e;
}

.vp-stat--profit .vp-stat-v.is-down {
  color: #b91c1c;
}

.vp-stat-delta {
  font-family: "Kanit", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-top: 0;
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.vp-stat-delta.is-up {
  color: #0f766e;
}

.vp-stat-delta.is-down {
  color: #b91c1c;
}

.vp-stat-delta.is-show {
  opacity: 1;
  transform: none;
}

/* flash เบา — แค่สี ไม่มีพื้นหลังกล่อง */
.vp-stat.is-flash .vp-stat-v {
  animation: vpStatFlash 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes vpStatFlash {
  0%,
  100% {
    opacity: 1;
  }
  40% {
    opacity: 0.55;
  }
}

.vp-stat-k {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #86868b;
}

.vp-stat-v {
  font-family: "Kanit", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  font-variant-numeric: tabular-nums;
}

.vp-metric-label {
  width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #86868b;
}

.vp-metric-val {
  font-family: "Kanit", sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1d1d1f;
  font-variant-numeric: tabular-nums;
}

.vp-metric-delta {
  font-family: "Kanit", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.vp-metric-delta.is-up {
  color: #0f766e;
  background: rgba(16, 185, 129, 0.14);
}

.vp-metric-delta.is-down {
  color: #b91c1c;
  background: rgba(248, 113, 113, 0.16);
}

.vp-caption {
  margin: 0;
  max-width: 28em;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.45;
  color: #6e6e73;
  text-align: right;
}

.vp-chart-wrap {
  width: 100%;
  height: clamp(300px, 44vw, 440px);
  margin: 0;
  position: relative;
  overflow: hidden;
}

.vp-chart {
  display: block;
  width: 100%;
  height: 100%;
  /* keep label proportions more readable on wide stage */
  overflow: visible;
}

/* Auto Trade event marks (SVG on equity line) */
.vp-ev-dot {
  stroke: #fff;
  stroke-width: 1.75;
}

.vp-ev-dot--win {
  fill: #10b981;
}

.vp-ev-dot--loss {
  fill: #ef4444;
}

.vp-ev-dot--dca {
  fill: #162984;
}

.vp-ev-dot--div {
  fill: #0d9488;
}

.vp-ev-dot--firm,
.vp-ev-dot--eq {
  fill: #7c3aed;
}

.vp-ev-stem {
  stroke: rgba(124, 58, 237, 0.35);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

.vp-ev-stem--win {
  stroke: rgba(16, 185, 129, 0.45);
}

.vp-ev-stem--loss {
  stroke: rgba(239, 68, 68, 0.4);
}

.vp-ev-stem--dca {
  stroke: rgba(22, 41, 132, 0.4);
}

.vp-ev-stem--div {
  stroke: rgba(13, 148, 136, 0.45);
}

.vp-ev-label {
  font-family: "Kanit", sans-serif;
  font-size: 9px;
  font-weight: 700;
  fill: #6e6e73;
  text-anchor: middle;
}

.vp-ev-label--win {
  fill: #059669;
}

.vp-ev-label--loss {
  fill: #dc2626;
}

.vp-ev-label--dca {
  fill: #162984;
}

.vp-ev-label--div {
  fill: #0f766e;
}

.vp-ev-label--firm,
.vp-ev-label--eq {
  fill: #7c3aed;
}

/* Event badges — anchored to chart point */
.vp-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.vp-badge {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 132px;
  max-width: min(200px, 62vw);
  padding: 8px 10px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  /* blur ทุกเฟรมแพง — ใช้เงาเบาแทน */
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  font-family: "Kanit", sans-serif;
  /* JS ขับ transform ล้วน (ไม่มี CSS var ทุกเฟรม) */
  transform: translate3d(0, 0, 0) translate(-50%, calc(-100% - 14px));
  opacity: 0;
  will-change: transform, opacity;
  contain: layout style;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.vp-badge.is-in {
  opacity: 1;
}

.vp-badge.is-out {
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.vp-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: #fff;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  transform: rotate(45deg);
  border-radius: 0 0 2px 0;
}

.vp-badge-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vp-badge-title {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  line-height: 1.25;
}

.vp-badge-meta {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.35;
}

.vp-badge--eq .vp-badge-tag {
  color: #7c3aed;
}

.vp-badge--dca .vp-badge-tag {
  color: #162984;
}

.vp-badge--div .vp-badge-tag {
  color: #0d9488;
}

.vp-badge--win .vp-badge-tag {
  color: #059669;
}

.vp-badge--loss .vp-badge-tag {
  color: #dc2626;
}

.vp-badge--eq {
  border-left: 3px solid #7c3aed;
}

.vp-badge--dca {
  border-left: 3px solid #162984;
}

.vp-badge--div {
  border-left: 3px solid #0d9488;
}

.vp-badge--win {
  border-left: 3px solid #10b981;
}

.vp-badge--loss {
  border-left: 3px solid #f87171;
}

.vp-badge--firm {
  border-left: 3px solid #7c3aed;
}

.vp-badge--firm .vp-badge-tag {
  color: #7c3aed;
}

/* badge motion is JS-driven (transform) for smooth 60fps */

.vp-grid .vp-grid-h,
.vp-grid .vp-grid-v {
  stroke: rgba(29, 29, 31, 0.08);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.vp-grid .vp-grid-h.is-zero,
.vp-grid .vp-grid-v.is-major {
  stroke: rgba(29, 29, 31, 0.12);
}

.vp-axes .vp-axis {
  stroke: rgba(29, 29, 31, 0.28);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  fill: none;
}

.vp-axes .vp-tick {
  stroke: rgba(29, 29, 31, 0.35);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.vp-axis-labels text {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  fill: #86868b;
}

.vp-axis-labels .vp-y-label {
  text-anchor: end;
  dominant-baseline: middle;
}

.vp-axis-labels .vp-x-label {
  text-anchor: middle;
  dominant-baseline: hanging;
}

.vp-axis-labels .vp-axis-title {
  font-family: "Kanit", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: #aeaeb2;
  text-transform: uppercase;
}

.vp-line {
  fill: none;
  stroke-width: 2.25;
}

.vp-line--eq {
  stroke: #7c3aed;
  stroke-width: 2.85;
}

.vp-line--dca {
  stroke: #162984;
  stroke-width: 2.2;
  stroke-dasharray: 7 5;
  opacity: 0.92;
}

.vp-line--div {
  stroke: #0d9488;
  stroke-width: 2.65;
  opacity: 0.95;
  filter: drop-shadow(0 0 3px rgba(13, 148, 136, 0.35));
}

.vp-line--wl {
  stroke: #f59e0b;
  stroke-width: 1.85;
  opacity: 0.78;
}

.vp-area {
  opacity: 1;
}

.vp-tip {
  fill: #a78bfa;
  stroke: #fff;
  stroke-width: 2;
}

.vp-tip-ring {
  fill: none;
  stroke: rgba(124, 58, 237, 0.45);
  stroke-width: 1.5;
  animation: vpPulse 1.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes vpPulse {
  0%,
  100% {
    opacity: 0.85;
    r: 10;
  }
  50% {
    opacity: 0.25;
    r: 16;
  }
}

.vp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  padding: 6px max(16px, 4vw) 18px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6e6e73;
}

/* ——— MaX FIRM · single-line overlay on chart ——— */
.vp-firm-bar {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px 10px;
  width: max-content;
  max-width: min(720px, calc(100% - 24px));
  padding: 6px 8px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(124, 58, 237, 0.18);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  pointer-events: auto;
  transform: translateX(-50%);
  transition:
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.vp-firm-bar.is-sent {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow:
    0 8px 24px rgba(16, 185, 129, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.vp-firm-bar.is-swap .vp-firm-msg {
  animation: vpFirmMsgIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vpFirmMsgIn {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.vp-firm-badge {
  flex-shrink: 0;
  font-family: "Kanit", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #162984);
  white-space: nowrap;
}

.vp-firm-msg {
  flex: 1;
  min-width: 0;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(0.72rem, 1.5vw, 0.82rem);
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vp-firm-go {
  flex-shrink: 0;
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: "Kanit", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
  transition:
    transform 0.15s var(--ease),
    box-shadow 0.2s var(--ease),
    opacity 0.2s;
}

.vp-firm-go:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}

.vp-firm-go:active {
  transform: scale(0.97);
}

.vp-firm-go:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.5);
  outline-offset: 2px;
}

.vp-firm-go:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

@media (max-width: 520px) {
  .vp-firm-bar {
    left: 50%;
    bottom: 8px;
    max-width: calc(100% - 20px);
    padding: 5px 6px 5px 8px;
    gap: 6px;
    transform: translateX(-50%);
  }

  .vp-firm-msg {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
  }

  .vp-firm-go {
    padding: 5px 10px;
    font-size: 0.68rem;
  }
}

/* Chart firm overlays */
.vp-firm-line {
  fill: none;
  stroke-width: 1.75;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: vpFirmLineIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.vp-firm-line--sell {
  stroke: #ef4444;
}

.vp-firm-line--trail {
  stroke: #f59e0b;
  stroke-dasharray: 3 4;
}

.vp-firm-line--dca {
  stroke: #162984;
}

.vp-firm-zone {
  fill: rgba(124, 58, 237, 0.08);
  stroke: none;
  opacity: 0;
  animation: vpFirmLineIn 0.65s ease forwards;
}

.vp-firm-label {
  font-family: "Kanit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  fill: #7c3aed;
  opacity: 0;
  animation: vpFirmLineIn 0.55s 0.1s ease forwards;
}

.vp-firm-label--sell {
  fill: #dc2626;
}

.vp-firm-label--trail {
  fill: #d97706;
}

.vp-firm-label--dca {
  fill: #162984;
}

.vp-firm-marker {
  fill: #7c3aed;
  stroke: #fff;
  stroke-width: 2;
  opacity: 0;
  animation: vpFirmMarker 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes vpFirmLineIn {
  from {
    opacity: 0;
    stroke-dashoffset: 40;
  }
  to {
    opacity: 0.92;
    stroke-dashoffset: 0;
  }
}

@keyframes vpFirmMarker {
  0% {
    opacity: 0;
    r: 2;
  }
  40% {
    opacity: 1;
    r: 8;
  }
  100% {
    opacity: 0.95;
    r: 5;
  }
}

.vp-stage.is-firm-pulse .vp-chart-wrap {
  animation: vpFirmPulse 0.7s ease;
}

@keyframes vpFirmPulse {
  0%,
  100% {
    filter: none;
  }
  40% {
    filter: drop-shadow(0 0 18px rgba(124, 58, 237, 0.28));
  }
}

.vp-line--eq.is-boost {
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55));
  transition: filter 0.4s;
}

.vp-line--dca.is-boost {
  stroke-width: 2.8;
  filter: drop-shadow(0 0 4px rgba(22, 41, 132, 0.4));
}

.vp-line--div.is-boost {
  stroke-width: 3.1;
  filter: drop-shadow(0 0 6px rgba(13, 148, 136, 0.5));
}

.vp-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vp-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.vp-swatch--eq {
  background: #7c3aed;
  height: 3.5px;
}

.vp-swatch--dca {
  background: repeating-linear-gradient(
    90deg,
    #162984 0 5px,
    transparent 5px 8px
  );
  height: 3px;
}

.vp-swatch--div {
  background: #0d9488;
  height: 3.5px;
  box-shadow: 0 0 6px rgba(13, 148, 136, 0.45);
}

.vp-swatch--wl {
  background: #f59e0b;
}

.vp-live {
  color: #5b21b6;
}

.vp-live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: vpLive 1.4s ease-out infinite;
}

@keyframes vpLive {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.vp-note {
  text-align: center;
  margin: 16px auto 0;
  padding: 0 20px;
  font-size: 0.72rem;
  color: #86868b;
  max-width: 40em;
}

@media (max-width: 720px) {
  .vp-stage-top {
    padding-bottom: 4px;
  }

  .vp-stats {
    width: 100%;
    justify-content: flex-start;
    row-gap: 8px;
  }

  .vp-stat {
    padding: 0 12px;
  }

  .vp-stat:nth-child(odd) {
    border-left: none;
    padding-left: 0;
  }

  .vp-stat:nth-child(even) {
    border-left: 1px solid rgba(15, 23, 42, 0.1);
  }

  .vp-chart-wrap {
    height: min(52vw, 300px);
    min-height: 240px;
  }

  .vp-badge {
    min-width: 120px;
    max-width: min(180px, 72vw);
    padding: 7px 9px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-tip-ring,
  .vp-live-dot,
  .vp-badge,
  .vp-stat.is-flash .vp-stat-v,
  .vp-firm-bar.is-swap .vp-firm-msg,
  .vp-firm-line,
  .vp-firm-zone,
  .vp-firm-label,
  .vp-firm-marker,
  .vp-stage.is-firm-pulse .vp-chart-wrap {
    animation: none !important;
  }

  .vp-badge {
    opacity: 1;
    transition: none !important;
  }

  .vp-stat.is-flash .vp-stat-v {
    opacity: 1;
  }

  .vp-firm-line,
  .vp-firm-zone,
  .vp-firm-label,
  .vp-firm-marker {
    opacity: 0.9 !important;
  }
}

/* =========================================================
   Section 05 — MaX Port Intelligent
   Apple chapter + dark product shell (from port_mockup)
   ========================================================= */

.portint {
  position: relative;
  padding: clamp(72px, 10vh, 112px) 0 clamp(64px, 9vh, 100px);
  background: #ffffff;
  color: #1d1d1f;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h, 52px) + 8px);
}

.pi-copy {
  text-align: center;
  padding: 0 max(20px, 5vw);
  max-width: 920px;
  margin: 0 auto 28px;
}

.pi-label {
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.pi-headline {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 5.4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #1d1d1f;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pi-headline span {
  display: block;
}

.pi-body {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.55;
  color: #6e6e73;
  margin: 0 auto;
  max-width: 34em;
}

.pi-gallery {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 max(16px, 3vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Feature tabs — horizontal chips under copy */
.pi-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 640px;
}

.pi-tab {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f5f5f7;
  color: #6e6e73;
  border-radius: 999px;
  padding: 9px 16px 9px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Kanit", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.2s var(--ease);
}

.pi-tab:hover {
  border-color: rgba(124, 58, 237, 0.28);
  color: #1d1d1f;
  transform: translateY(-1px);
}

.pi-tab.is-on {
  background: linear-gradient(135deg, #162984 0%, #7c3aed 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.28);
}

.pi-tab-num {
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.pi-tab.is-on .pi-tab-num {
  opacity: 0.9;
}

/* Product stage */
.pi-stage {
  width: 100%;
  border-radius: 28px;
  padding: clamp(16px, 3vw, 28px);
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(124, 58, 237, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(22, 41, 132, 0.12), transparent 50%),
    linear-gradient(180deg, #eef0f6 0%, #e4e6ef 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
  transition: background 0.5s var(--ease);
}

.pi-stage[data-scene="rebalance"] {
  background:
    radial-gradient(ellipse 70% 60% at 20% 10%, rgba(6, 182, 212, 0.12), transparent 55%),
    radial-gradient(ellipse 55% 50% at 85% 90%, rgba(124, 58, 237, 0.12), transparent 50%),
    linear-gradient(180deg, #e9eef4 0%, #dde5ef 100%);
}

.pi-stage[data-scene="dividend"] {
  background:
    radial-gradient(ellipse 70% 60% at 30% 0%, rgba(16, 185, 129, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 50% at 90% 90%, rgba(245, 158, 11, 0.12), transparent 50%),
    linear-gradient(180deg, #e8f4ef 0%, #e2ebe8 100%);
}

.pi-stage[data-scene="assist"] {
  background:
    radial-gradient(ellipse 70% 60% at 70% 0%, rgba(124, 58, 237, 0.16), transparent 55%),
    radial-gradient(ellipse 55% 50% at 10% 100%, rgba(22, 41, 132, 0.14), transparent 50%),
    linear-gradient(180deg, #ebe8f5 0%, #e0dcf0 100%);
}

.pi-product {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #07071a;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 28px 64px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(124, 58, 237, 0.12);
  min-height: clamp(380px, 52vw, 480px);
  font-family: "Sarabun", system-ui, sans-serif;
}

.pi-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: rgba(7, 7, 26, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.pi-chrome-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pi-brand {
  font-family: "Tilt Neon", "Kanit", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #a78bfa, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pi-chrome-sep {
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.85rem;
}

.pi-chrome-page {
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
}

.pi-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #a78bfa;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.14);
  border: 1px solid rgba(124, 58, 237, 0.28);
}

.pi-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: piLive 1.5s ease-out infinite;
}

@keyframes piLive {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.pi-body-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  flex: 1;
  min-height: 0;
}

/* Portfolio side */
.pi-port {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(124, 58, 237, 0.08), transparent 50%),
    #090921;
}

.pi-port-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pi-port-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f1f5f9;
}

.pi-port-cnt {
  font-size: 0.65rem;
  font-weight: 600;
  color: #94a3b8;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pi-ai-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #e9d5ff;
  padding: 5px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.45), rgba(91, 33, 182, 0.55));
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.2);
}

.pi-stage[data-scene="assist"] .pi-ai-btn {
  animation: piBtnPulse 1.8s ease-in-out infinite;
}

@keyframes piBtnPulse {
  0%,
  100% {
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.2);
  }
  50% {
    box-shadow: 0 0 22px rgba(124, 58, 237, 0.45);
  }
}

.pi-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pi-kpi-card {
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  transition:
    border-color 0.35s var(--ease),
    background 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.pi-kpi-card.is-focus {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.1);
  transform: translateY(-1px);
}

.pi-kpi-k {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.pi-kpi-v {
  font-family: "Kanit", sans-serif;
  font-size: clamp(0.82rem, 1.6vw, 0.98rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pi-kpi-v.is-up {
  color: #34d399;
}

.pi-kpi-v.is-dn {
  color: #f87171;
}

.pi-kpi--cost {
  border-top: 2px solid #7c3aed;
}

.pi-kpi--mkt {
  border-top: 2px solid #06b6d4;
}

.pi-kpi--pnl {
  border-top: 2px solid #10b981;
}

.pi-kpi--div {
  border-top: 2px solid #f59e0b;
}

.pi-mid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.pi-donut-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}

.pi-donut {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pi-donut-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 12;
}

.pi-donut-seg {
  fill: none;
  stroke-width: 12;
  stroke-linecap: butt;
  transition: stroke-dasharray 0.7s var(--ease-out), stroke-dashoffset 0.7s var(--ease-out);
}

.pi-seg--a {
  stroke: #7c3aed;
}

.pi-seg--b {
  stroke: #06b6d4;
}

.pi-seg--c {
  stroke: #10b981;
}

.pi-seg--d {
  stroke: #f59e0b;
}

.pi-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pi-donut-n {
  font-family: "Kanit", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #a78bfa;
  line-height: 1;
}

.pi-donut-l {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
}

.pi-holdings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pi-hold {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 40px 52px 48px;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
  transition:
    border-color 0.35s var(--ease),
    background 0.35s var(--ease),
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.pi-hold.is-focus {
  border-color: rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.1);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.15);
  transform: translateX(2px);
}

.pi-hold.is-dim {
  opacity: 0.45;
}

.pi-hold-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #7c3aed);
}

.pi-hold-sym {
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.01em;
}

.pi-hold-w {
  font-weight: 600;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pi-hold-pnl {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pi-hold-pnl.is-up {
  color: #34d399;
}

.pi-hold-pnl.is-dn {
  color: #f87171;
}

.pi-hold-act {
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  padding: 2px 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  transition: background 0.3s, color 0.3s;
}

.pi-hold-act[data-act="add"] {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

.pi-hold-act[data-act="reduce"] {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
}

.pi-hold-act[data-act="watch"] {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
}

.pi-hold-act[data-act="hold"] {
  background: rgba(124, 58, 237, 0.14);
  color: #c4b5fd;
}

/* Plan card */
.pi-plan-card {
  margin-top: auto;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    border-color 0.4s var(--ease),
    background 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.pi-stage[data-scene="plan"] .pi-plan-card {
  border-color: rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.08);
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.12);
}

.pi-stage[data-scene="dividend"] .pi-plan-card {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 28px rgba(16, 185, 129, 0.14);
}

.pi-stage[data-scene="dividend"] .pi-kpi--div {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  transform: translateY(-1px);
}

.pi-stage[data-scene="dividend"] .pi-kpi--div .pi-kpi-v {
  color: #fbbf24;
}

/* Passive income panel */
.pi-income-mode[hidden],
.pi-alloc-mode[hidden] {
  display: none !important;
}

.pi-income-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 10px;
  margin-bottom: 12px;
}

.pi-income-year-block,
.pi-income-month-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.pi-income-year-block {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.08);
}

.pi-income-k {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.pi-income-year {
  font-family: "Kanit", sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #34d399;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.pi-income-month {
  font-family: "Kanit", sans-serif;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.pi-months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 56px;
  margin-bottom: 8px;
}

.pi-mo {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.pi-mo::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 14px;
  height: var(--h, 40%);
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.85), rgba(6, 182, 212, 0.55));
  transition:
    height 0.7s var(--ease-out),
    background 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.pi-mo.is-peak::before {
  background: linear-gradient(180deg, #fbbf24, #10b981);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

.pi-mo.is-on::before {
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}

.pi-mo span {
  font-size: 0.48rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 3px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

.pi-income-hint {
  margin: 0;
  font-size: 0.65rem;
  line-height: 1.4;
  color: #94a3b8;
  font-weight: 500;
}

.pi-income-hint strong {
  color: #6ee7b7;
  font-weight: 700;
}

.pi-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.pi-plan-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a78bfa;
}

.pi-plan-goal {
  font-size: 0.72rem;
  font-weight: 600;
  color: #e2e8f0;
}

.pi-plan-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pi-plan-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 600;
}

.pi-plan-row em {
  font-style: normal;
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pi-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.pi-bar i {
  display: block;
  height: 100%;
  width: var(--p, 30%);
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #06b6d4);
  transition: width 0.75s var(--ease-out);
}

.pi-plan-row:nth-child(2) .pi-bar i {
  background: linear-gradient(90deg, #0d9488, #34d399);
}

.pi-plan-row:nth-child(3) .pi-bar i {
  background: linear-gradient(90deg, #162984, #6366f1);
}

/* AI panel */
.pi-ai {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background:
    radial-gradient(ellipse 90% 40% at 100% 0%, rgba(124, 58, 237, 0.14), transparent 55%),
    #0e0e2a;
}

.pi-ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.pi-ai-orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #c4b5fd, transparent 50%),
    linear-gradient(135deg, #7c3aed, #06b6d4);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.45);
  animation: piOrb 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes piOrb {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 22px rgba(6, 182, 212, 0.35);
  }
}

.pi-ai-title {
  font-family: "Kanit", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f1f5f9;
}

.pi-ai-meta {
  font-size: 0.65rem;
  font-weight: 500;
  color: #94a3b8;
  margin-top: 1px;
}

.pi-ai-stream {
  flex: 1;
  min-height: 180px;
  max-height: 260px;
  overflow: hidden;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pi-msg {
  max-width: 96%;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  animation: piMsgIn 0.45s var(--ease-out) both;
}

.pi-msg--user {
  align-self: flex-end;
  background: rgba(124, 58, 237, 0.22);
  border: 1px solid rgba(167, 139, 250, 0.28);
  color: #e9d5ff;
  border-bottom-right-radius: 4px;
}

.pi-msg--ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border-bottom-left-radius: 4px;
}

.pi-msg--ai strong {
  color: #c4b5fd;
  font-weight: 700;
}

.pi-msg-kicker {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 4px;
}

.pi-msg-list {
  margin: 6px 0 0;
  padding: 0 0 0 1.1em;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pi-msg-list li {
  color: #cbd5e1;
}

.pi-msg-list li em {
  font-style: normal;
  color: #34d399;
  font-weight: 700;
}

.pi-msg-list li.dn em {
  color: #fbbf24;
}

@keyframes piMsgIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pi-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 8px;
}

.pi-chip {
  font-size: 0.62rem;
  font-weight: 600;
  color: #94a3b8;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.3s,
    color 0.3s,
    background 0.3s;
}

.pi-chip.is-on {
  border-color: rgba(124, 58, 237, 0.4);
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.12);
}

.pi-ai-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.pi-ai-ph {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.32);
}

.pi-ai-send {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  flex-shrink: 0;
}

.pi-caption {
  margin: 0;
  padding: 0 max(12px, 2vw);
  text-align: center;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(0.95rem, 1.7vw, 1.1rem);
  line-height: 1.5;
  color: #6e6e73;
  max-width: 36em;
  min-height: 1.5em;
  transition: opacity 0.25s var(--ease);
}

.pi-caption strong {
  color: #1d1d1f;
  font-weight: 600;
}

.pi-caption.is-pop {
  animation: piCaptionPop 0.4s var(--ease-out) both;
}

@keyframes piCaptionPop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pi-note {
  text-align: center;
  margin: 20px auto 0;
  padding: 0 20px;
  font-size: 0.72rem;
  color: #86868b;
  max-width: 40em;
}

/* Responsive */
@media (max-width: 860px) {
  .pi-body-layout {
    grid-template-columns: 1fr;
  }

  .pi-port {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .pi-ai-stream {
    min-height: 160px;
    max-height: 200px;
  }

  .pi-product {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .pi-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pi-mid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pi-holdings {
    width: 100%;
  }

  .pi-hold {
    grid-template-columns: 8px minmax(0, 1fr) 36px 48px 44px;
  }

  .pi-ai-btn {
    margin-left: 0;
  }

  .pi-tabs {
    gap: 6px;
  }

  .pi-tab {
    padding: 8px 12px 8px 10px;
    font-size: 0.8rem;
  }

  .pi-stage {
    padding: 12px;
    border-radius: 20px;
  }

  .pi-income-hero {
    grid-template-columns: 1fr 1fr;
  }

  .pi-months {
    height: 48px;
    gap: 2px;
  }

  .pi-mo span {
    font-size: 0.42rem;
  }

  .pi-mo::before {
    max-width: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-live-dot,
  .pi-ai-orb,
  .pi-msg,
  .pi-caption.is-pop,
  .pi-stage[data-scene="assist"] .pi-ai-btn {
    animation: none !important;
  }

  .pi-msg {
    opacity: 1;
    transform: none;
  }

  .pi-donut-seg,
  .pi-bar i {
    transition: none !important;
  }
}

/* =========================================================
   Section 06 — MaX Dividend Intelligent
   Theme picker + one-click result (from dividend_journey)
   ========================================================= */

.divint {
  position: relative;
  padding: clamp(72px, 10vh, 112px) 0 clamp(64px, 9vh, 100px);
  background: #f5f5f7;
  color: #1d1d1f;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h, 52px) + 8px);
}

.di-copy {
  text-align: center;
  padding: 0 max(20px, 5vw);
  max-width: 920px;
  margin: 0 auto 28px;
}

.di-label {
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.di-headline {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 5.4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #1d1d1f;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.di-headline span {
  display: block;
}

.di-body {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.55;
  color: #6e6e73;
  margin: 0 auto;
  max-width: 34em;
}

.di-gallery {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 max(16px, 3vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.di-stage {
  width: 100%;
  border-radius: 28px;
  padding: clamp(14px, 2.5vw, 24px);
  background:
    radial-gradient(ellipse 70% 55% at 20% 0%, rgba(16, 185, 129, 0.12), transparent 55%),
    radial-gradient(ellipse 55% 50% at 90% 100%, rgba(124, 58, 237, 0.1), transparent 50%),
    linear-gradient(180deg, #e8f0ee 0%, #e2e8e6 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.di-product {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #07071a;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 28px 64px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(16, 185, 129, 0.1);
  min-height: clamp(400px, 54vw, 500px);
  font-family: "Sarabun", system-ui, sans-serif;
}

.di-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: rgba(7, 7, 26, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.di-chrome-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.di-brand {
  font-family: "Tilt Neon", "Kanit", sans-serif;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #a78bfa, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.di-chrome-sep {
  color: rgba(255, 255, 255, 0.28);
}

.di-chrome-page {
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
}

.di-data-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #6ee7b7;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.di-data-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
  animation: diLive 1.5s ease-out infinite;
}

@keyframes diLive {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(52, 211, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

.di-body-layout {
  display: grid;
  grid-template-columns: minmax(200px, 0.92fr) minmax(0, 1.2fr);
  flex: 1;
  min-height: 0;
}

/* Theme list */
.di-themes {
  padding: 14px 12px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(ellipse 90% 40% at 0% 0%, rgba(16, 185, 129, 0.08), transparent 55%),
    #090921;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: min(520px, 70vh);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.di-themes::-webkit-scrollbar {
  width: 5px;
}

.di-themes::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
}

.di-themes-kicker {
  margin: 0 4px 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.di-theme {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition:
    border-color 0.22s var(--ease),
    background 0.22s var(--ease),
    transform 0.18s var(--ease),
    box-shadow 0.22s var(--ease);
}

.di-theme:hover {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
  transform: translateX(2px);
}

.di-theme.is-on {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(124, 58, 237, 0.1));
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.12), 0 8px 20px rgba(16, 185, 129, 0.1);
}

.di-theme:focus-visible {
  outline: 2px solid rgba(16, 185, 129, 0.5);
  outline-offset: 2px;
}

.di-theme-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.22);
}

.di-theme.is-on .di-theme-ico {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(124, 58, 237, 0.25));
  color: #fff;
}

.di-theme-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.di-theme-name {
  font-family: "Kanit", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.di-theme-desc {
  font-size: 0.65rem;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.di-theme-yield {
  font-family: "Kanit", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #34d399;
  font-variant-numeric: tabular-nums;
}

/* Result panel */
.di-result {
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  background:
    radial-gradient(ellipse 80% 40% at 100% 0%, rgba(124, 58, 237, 0.12), transparent 55%),
    #0e0e2a;
}

.di-result.is-pop {
  animation: diResultPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes diResultPop {
  from {
    opacity: 0.6;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.di-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.di-result-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6ee7b7;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.di-result-title {
  font-family: "Kanit", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f1f5f9;
}

.di-result-sub {
  margin: -4px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #94a3b8;
}

.di-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.di-metric {
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.di-metric--accent {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.08);
}

.di-metric-k {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.di-metric-v {
  font-family: "Kanit", sans-serif;
  font-size: clamp(0.88rem, 1.8vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.di-metric--accent .di-metric-v {
  color: #34d399;
}

.di-calendar {
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.di-cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
}

.di-cal-hint {
  color: #a78bfa;
  font-size: 0.62rem;
}

.di-cal-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 72px;
}

.di-cal {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.di-cal::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 14px;
  height: var(--h, 40%);
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.85), rgba(6, 182, 212, 0.45));
  transition: height 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.di-cal.is-peak::before {
  background: linear-gradient(180deg, #fbbf24, #10b981);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.di-cal span {
  font-size: 0.48rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

.di-stocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.di-stock {
  font-family: "Kanit", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #c4b5fd;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.22);
  animation: diStockIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.di-stock:nth-child(2) {
  animation-delay: 0.04s;
}
.di-stock:nth-child(3) {
  animation-delay: 0.08s;
}
.di-stock:nth-child(4) {
  animation-delay: 0.12s;
}
.di-stock:nth-child(5) {
  animation-delay: 0.16s;
}
.di-stock:nth-child(6) {
  animation-delay: 0.2s;
}

@keyframes diStockIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.di-click-hint {
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.4;
}

.di-click-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #7c3aed;
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5);
  animation: diLive 1.4s ease-out infinite;
}

.di-caption {
  margin: 0;
  padding: 0 max(12px, 2vw);
  text-align: center;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(0.95rem, 1.7vw, 1.1rem);
  line-height: 1.5;
  color: #6e6e73;
  max-width: 38em;
}

.di-caption strong {
  color: #1d1d1f;
  font-weight: 600;
}

.di-note {
  text-align: center;
  margin: 20px auto 0;
  padding: 0 20px;
  font-size: 0.72rem;
  color: #86868b;
  max-width: 40em;
}

@media (max-width: 860px) {
  .di-body-layout {
    grid-template-columns: 1fr;
  }

  .di-themes {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .di-themes-kicker {
    width: 100%;
    margin-bottom: 2px;
  }

  .di-theme {
    flex: 1 1 calc(50% - 6px);
    min-width: 140px;
  }

  .di-product {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .di-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .di-theme {
    flex: 1 1 100%;
  }

  .di-cal-bars {
    height: 56px;
  }

  .di-cal span {
    font-size: 0.42rem;
  }

  .di-stage {
    padding: 12px;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .di-data-dot,
  .di-click-pulse,
  .di-result.is-pop,
  .di-stock,
  .di-cal::before {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Section 07 — ตัวจริง aioMax
   Apple iPhone 17 Performance-style · phone mockups + UI
   ========================================================= */

.realmax {
  position: relative;
  padding: clamp(80px, 11vh, 120px) 0 clamp(72px, 10vh, 110px);
  background: #ffffff;
  color: #1d1d1f;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h, 52px) + 8px);
}

.rm-copy {
  text-align: center;
  padding: 0 max(20px, 5vw);
  max-width: 920px;
  margin: 0 auto 32px;
}

.rm-label {
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.rm-headline {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 6.2vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.038em;
  color: #1d1d1f;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.rm-headline span {
  display: block;
}

.rm-body {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55;
  color: #6e6e73;
  margin: 0 auto;
  max-width: 32em;
}

.rm-gallery {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 max(12px, 2vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.rm-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 640px;
}

.rm-tab {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f5f5f7;
  color: #6e6e73;
  border-radius: 999px;
  padding: 9px 15px 9px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Kanit", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.2s var(--ease);
}

.rm-tab:hover {
  border-color: rgba(124, 58, 237, 0.28);
  color: #1d1d1f;
  transform: translateY(-1px);
}

.rm-tab.is-on {
  background: linear-gradient(135deg, #162984 0%, #7c3aed 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.28);
}

.rm-tab-num {
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.rm-tab.is-on .rm-tab-num {
  opacity: 0.9;
}

/* Phone stage — Apple product fan */
.rm-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  min-height: clamp(380px, 58vw, 560px);
  padding: 20px 0 8px;
  perspective: 1200px;
}

.rm-phone {
  position: relative;
  flex-shrink: 0;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s var(--ease),
    filter 0.45s var(--ease);
}

.rm-phone-shell {
  position: relative;
  background: linear-gradient(160deg, #2a2a2e 0%, #0c0c0f 55%, #1a1a1e 100%);
  border-radius: 36px;
  padding: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 28px 60px rgba(15, 23, 42, 0.28),
    0 8px 20px rgba(15, 23, 42, 0.12);
}

.rm-phone-island {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 22px;
  border-radius: 999px;
  background: #050507;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.rm-phone-screen {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #0a0a12;
  aspect-ratio: 390 / 844;
  width: 100%;
}

.rm-phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.35s var(--ease), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.rm-phone-screen img.is-swap {
  animation: rmImgIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rmImgIn {
  from {
    opacity: 0.35;
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rm-phone-home {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  z-index: 2;
}

/* Hero phone — largest */
.rm-phone--hero {
  width: min(280px, 42vw);
  z-index: 3;
}

.rm-phone--hero .rm-phone-shell {
  border-radius: 40px;
  padding: 11px;
}

.rm-phone--hero .rm-phone-screen {
  border-radius: 30px;
}

.rm-phone-cap {
  margin: 14px 0 0;
  text-align: center;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(0.85rem, 1.6vw, 0.98rem);
  font-weight: 500;
  line-height: 1.4;
  color: #6e6e73;
  max-width: 18em;
  margin-left: auto;
  margin-right: auto;
  min-height: 2.8em;
}

.rm-phone-cap.is-pop {
  animation: rmCapPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rmCapPop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Side phones — smaller, angled */
.rm-phone--side {
  width: min(200px, 28vw);
  z-index: 1;
  opacity: 0.72;
  filter: saturate(0.92);
}

.rm-phone--l {
  transform: translateY(28px) rotateY(12deg) rotateZ(-4deg) scale(0.92);
  transform-origin: right bottom;
}

.rm-phone--r {
  transform: translateY(28px) rotateY(-12deg) rotateZ(4deg) scale(0.92);
  transform-origin: left bottom;
}

.rm-stage:hover .rm-phone--l {
  transform: translateY(22px) rotateY(10deg) rotateZ(-3deg) scale(0.93);
  opacity: 0.82;
}

.rm-stage:hover .rm-phone--r {
  transform: translateY(22px) rotateY(-10deg) rotateZ(3deg) scale(0.93);
  opacity: 0.82;
}

.rm-caption {
  margin: 0;
  text-align: center;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.5;
  color: #6e6e73;
  max-width: 34em;
}

.rm-caption strong {
  color: #1d1d1f;
  font-weight: 600;
}

/* Proof strip — Apple-like three columns */
.rm-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 28px;
  max-width: 880px;
  margin: 40px auto 0;
  padding: 0 max(20px, 4vw);
}

.rm-proof-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rm-proof-item strong {
  font-family: "Kanit", sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}

.rm-proof-item span {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  line-height: 1.45;
  color: #6e6e73;
}

.rm-note {
  text-align: center;
  margin: 28px auto 0;
  padding: 0 20px;
  font-size: 0.72rem;
  color: #86868b;
  max-width: 40em;
}

@media (max-width: 720px) {
  .rm-phone--side {
    display: none;
  }

  .rm-phone--hero {
    width: min(260px, 72vw);
  }

  .rm-stage {
    min-height: 0;
    padding-top: 8px;
  }

  .rm-proof {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
  }

  .rm-tabs {
    gap: 6px;
  }

  .rm-tab {
    padding: 8px 12px 8px 10px;
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rm-phone,
  .rm-phone-screen img,
  .rm-phone-cap.is-pop,
  .rm-phone-screen img.is-swap {
    transition: none !important;
    animation: none !important;
  }

  .rm-stage:hover .rm-phone--l {
    transform: translateY(28px) rotateY(12deg) rotateZ(-4deg) scale(0.92);
  }

  .rm-stage:hover .rm-phone--r {
    transform: translateY(28px) rotateY(-12deg) rotateZ(4deg) scale(0.92);
  }
}

/* =========================================================
   Section 08 — ทำไมใช้ aioMax ถึงดีที่สุด
   Apple Mac incentive · staggered cards + clean modal
   ========================================================= */

.incentive {
  position: relative;
  padding: clamp(72px, 10vh, 112px) 0 clamp(64px, 9vh, 100px);
  background: #f5f5f7;
  color: #1d1d1f;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h, 52px) + 8px);
}

.inc-copy {
  text-align: center;
  padding: 0 max(20px, 5vw);
  max-width: 820px;
  margin: 0 auto 36px;
}

.inc-headline {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5.6vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #1d1d1f;
  margin: 0 0 12px;
}

.inc-sub {
  margin: 0 auto;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.55;
  color: #6e6e73;
  max-width: 28em;
}

/* Carousel */
.inc-carousel-wrap {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 max(8px, 2vw);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
}

.inc-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 4px 18px;
  outline: none;
}

.inc-track::-webkit-scrollbar {
  display: none;
}

.inc-nav {
  appearance: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.95);
  color: #1d1d1f;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
  z-index: 2;
  flex-shrink: 0;
}

.inc-nav:hover {
  background: #fff;
  transform: scale(1.05);
}

.inc-nav:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}

.inc-nav:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.inc-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.inc-dot {
  appearance: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(15, 23, 42, 0.15);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

.inc-dot.is-on {
  background: #7c3aed;
  transform: scale(1.25);
}

.inc-dot:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}

.inc-card {
  appearance: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 0 0 min(300px, 82vw);
  scroll-snap-align: center;
  min-height: 240px;
  padding: 24px 22px 56px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 32px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s var(--ease);
}

.inc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.95) inset, 0 20px 44px rgba(15, 23, 42, 0.1);
}

.inc-card:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 3px;
}

.inc-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #162984;
  background: linear-gradient(145deg, rgba(22, 41, 132, 0.08), rgba(124, 58, 237, 0.1));
  flex-shrink: 0;
}

.inc-icon svg {
  width: 28px;
  height: 28px;
}

.inc-card-title {
  margin: 0;
  font-family: "Kanit", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: #1d1d1f;
}

.inc-card-text {
  margin: 0;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #6e6e73;
}

.inc-plus {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  background: #1d1d1f;
  transition: background 0.2s, transform 0.2s;
}

.inc-card:hover .inc-plus {
  background: #7c3aed;
  transform: scale(1.06);
}

.inc-foot {
  text-align: center;
  margin: 28px auto 0;
  padding: 0 20px;
  font-size: 0.78rem;
  color: #86868b;
  max-width: 36em;
}

.inc-foot strong {
  color: #1d1d1f;
  font-weight: 600;
}

/* —— Clean modal —— */
/* Must live under body — not inside .px-section (transform/overflow break fixed) */
.inc-modal {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 9999;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: max(16px, 3vw);
  box-sizing: border-box;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto;
}

.inc-modal[hidden] {
  display: none !important;
}

.inc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
  animation: incFadeIn 0.25s ease both;
}

.inc-modal-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  padding: 32px 28px 28px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
  animation: incPanelIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.inc-modal-close {
  appearance: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f5f5f7;
  color: #1d1d1f;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.inc-modal-close:hover {
  background: #e8e8ed;
}

.inc-modal-close:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}

.inc-modal-kicker {
  margin: 0 0 8px;
  font-family: "Kanit", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7c3aed;
}

.inc-modal-title {
  margin: 0 0 16px;
  padding-right: 36px;
  font-family: "Kanit", sans-serif;
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #1d1d1f;
}

.inc-modal-body {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #424245;
}

.inc-modal-body p {
  margin: 0 0 12px;
}

.inc-modal-body p:last-child {
  margin-bottom: 0;
}

.inc-modal-body ul {
  margin: 0 0 12px;
  padding-left: 1.15em;
}

.inc-modal-body li {
  margin-bottom: 6px;
}

.inc-modal-body .inc-modal-stat {
  display: inline-block;
  margin: 4px 0 12px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #f5f5f7;
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #162984;
  letter-spacing: -0.02em;
}

@keyframes incFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes incPanelIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.inc-modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .inc-carousel-wrap {
    grid-template-columns: 1fr;
  }

  .inc-nav {
    display: none;
  }

  .inc-card {
    flex-basis: min(280px, 86vw);
    min-height: 220px;
  }

  .inc-modal-panel {
    padding: 28px 20px 22px;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inc-track {
    scroll-behavior: auto;
  }

  .inc-card,
  .inc-modal-backdrop,
  .inc-modal-panel {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Section 09 — Promotion package CTA
   ========================================================= */

.promo {
  position: relative;
  padding: clamp(72px, 10vh, 110px) 0 clamp(56px, 8vh, 80px);
  background: #ffffff;
  color: #1d1d1f;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h, 52px) + 8px);
}

.promo-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 max(20px, 5vw);
  text-align: center;
}

.promo-label {
  margin: 0 0 12px;
  font-family: "Kanit", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c3aed;
}

.promo-headline {
  margin: 0 0 14px;
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #1d1d1f;
}

.promo-body {
  margin: 0 auto 28px;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.55;
  color: #6e6e73;
  max-width: 30em;
}

.promo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: "Kanit", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    transform 0.2s var(--ease),
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    color 0.2s var(--ease);
}

.promo-cta--primary {
  color: #fff;
  background: linear-gradient(135deg, #162984 0%, #7c3aed 100%);
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.28);
}

.promo-cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(124, 58, 237, 0.35);
}

.promo-cta--ghost {
  color: #162984;
  background: transparent;
  border: 1px solid rgba(22, 41, 132, 0.22);
}

.promo-cta--ghost:hover {
  background: rgba(22, 41, 132, 0.05);
  transform: translateY(-1px);
}

.promo-cta:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 3px;
}

.promo-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #a1a1a6;
}

/* =========================================================
   Site footer — Apple-style legal strip
   ========================================================= */

.site-footer {
  background: #f5f5f7;
  color: #6e6e73;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding: 28px 0 36px;
  font-family: "Sarabun", system-ui, sans-serif;
}

.site-footer-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 max(20px, 4vw);
}

.site-footer-promo {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.site-footer-promo-title {
  margin: 0 0 6px;
  font-family: "Kanit", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1d1d1f;
}

.site-footer-promo-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #6e6e73;
}

.site-footer-promo-text a {
  color: #162984;
  text-decoration: none;
  font-weight: 600;
}

.site-footer-promo-text a:hover {
  text-decoration: underline;
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.site-footer-nav a {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6e6e73;
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer-nav a:hover {
  color: #162984;
}

.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 12px;
}

.site-footer-copy {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #86868b;
}

.site-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
}

.site-footer-links li {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  line-height: 1.5;
}

.site-footer-links li:not(:last-child)::after {
  content: "|";
  margin: 0 10px;
  color: rgba(15, 23, 42, 0.18);
  font-weight: 400;
}

.site-footer-links a {
  color: #6e6e73;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer-links a:hover {
  color: #162984;
  text-decoration: underline;
}

.site-footer-disclaimer {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #a1a1a6;
  max-width: 52em;
}

@media (max-width: 640px) {
  .site-footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer-links li:not(:last-child)::after {
    margin: 0 8px;
  }
}

/* (legacy compare/metrics styles retained below if present — unused) */

/* =========================================================
   Section 08 — ต่างอย่างไร (legacy product-stories — unused)
   ========================================================= */

.compare {
  position: relative;
  padding: clamp(72px, 10vh, 112px) 0 clamp(64px, 9vh, 96px);
  background: #f5f5f7;
  color: #1d1d1f;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h, 52px) + 8px);
}

.cmp-copy {
  text-align: center;
  padding: 0 max(20px, 5vw);
  max-width: 900px;
  margin: 0 auto 28px;
}

.cmp-label {
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.cmp-headline {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #1d1d1f;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cmp-headline span {
  display: block;
}

.cmp-body {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.55;
  color: #6e6e73;
  margin: 0 auto;
  max-width: 34em;
}

.cmp-stories-wrap {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 max(8px, 2vw);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
}

.cmp-stories {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 20px;
  outline: none;
}

.cmp-stories::-webkit-scrollbar {
  display: none;
}

.cmp-story {
  flex: 0 0 min(340px, 82vw);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 18px 48px rgba(15, 23, 42, 0.08);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.cmp-story:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 24px 56px rgba(15, 23, 42, 0.12);
}

.cmp-story-media {
  position: relative;
  height: clamp(200px, 28vw, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  overflow: hidden;
}

.cmp-story-media--trust {
  background: linear-gradient(160deg, #ebe4ff 0%, #e8eef9 55%, #f5f5f7 100%);
}

.cmp-story-media--thai {
  background: linear-gradient(160deg, #e4eefc 0%, #ebe8f8 50%, #f5f5f7 100%);
}

.cmp-story-media--port {
  background: linear-gradient(160deg, #e8e4fb 0%, #f0e9ff 50%, #f5f5f7 100%);
}

.cmp-story-media--div {
  background: linear-gradient(160deg, #e4f5ef 0%, #eef6f1 50%, #f5f5f7 100%);
}

.cmp-story-media--auto {
  background: linear-gradient(160deg, #ebe6fb 0%, #e6eaf8 50%, #f5f5f7 100%);
}

.cmp-story-media--stack {
  background: linear-gradient(160deg, #e8eaf5 0%, #efe9fb 50%, #f5f5f7 100%);
}

.cmp-viz {
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.cmp-chip {
  font-family: "Kanit", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  color: #475569;
}

.cmp-chip--pdf {
  color: #b91c1c;
  border-left: 3px solid #ef4444;
}

.cmp-chip--xlsx {
  color: #047857;
  border-left: 3px solid #10b981;
}

.cmp-chip--set {
  color: #162984;
  border-left: 3px solid #162984;
}

.cmp-chip--md {
  color: #6d28d9;
  border-left: 3px solid #7c3aed;
}

.cmp-viz-core {
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cmp-viz-brand {
  font-family: "Tilt Neon", "Kanit", sans-serif;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: #162984;
}

.cmp-viz-line {
  width: 100%;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6e6e73;
  margin-top: 4px;
}

.cmp-big {
  font-family: "Kanit", sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #162984, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cmp-ticker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}

.cmp-ticker span {
  font-family: "Kanit", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(22, 41, 132, 0.08);
  color: #162984;
}

.cmp-bar-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 36px;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
}

.cmp-bar-row i {
  display: block;
  height: 10px;
  width: var(--w, 50%);
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #162984);
}

.cmp-bar-row:nth-child(2) i {
  background: linear-gradient(90deg, #10b981, #0d9488);
}

.cmp-bar-row:nth-child(3) i {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

.cmp-theme-pill {
  font-family: "Kanit", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #64748b;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.cmp-theme-pill.is-on {
  background: linear-gradient(135deg, #0d9488, #10b981);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.25);
}

.cmp-mini-chart {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
}

.cmp-stack-step {
  font-family: "Kanit", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  color: #162984;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  position: relative;
}

.cmp-stack-step:not(.is-last)::after {
  content: "→";
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: #a78bfa;
  font-size: 0.7rem;
}

.cmp-stack-step.is-last {
  background: linear-gradient(135deg, #162984, #7c3aed);
  color: #fff;
}

.cmp-story-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.cmp-story-kicker {
  margin: 0;
  font-family: "Kanit", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7c3aed;
}

.cmp-story-title {
  margin: 0;
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #1d1d1f;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmp-story-title span {
  display: block;
}

.cmp-story-text {
  margin: 0;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #6e6e73;
  flex: 1;
}

.cmp-vs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 0.72rem;
  font-weight: 600;
}

.cmp-vs-them {
  color: #94a3b8;
  text-decoration: line-through;
  text-decoration-color: rgba(148, 163, 184, 0.55);
}

.cmp-vs-arrow {
  color: #c4b5fd;
}

.cmp-vs-us {
  color: #162984;
  background: rgba(22, 41, 132, 0.06);
  padding: 3px 9px;
  border-radius: 999px;
}

.cmp-nav {
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.92);
  color: #1d1d1f;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
  z-index: 2;
}

.cmp-nav:hover {
  background: #fff;
  transform: scale(1.05);
}

.cmp-nav:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}

.cmp-nav:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.cmp-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.cmp-dot {
  appearance: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(15, 23, 42, 0.15);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

.cmp-dot.is-on {
  background: #7c3aed;
  transform: scale(1.2);
}

.cmp-dot:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}

.cmp-foot {
  text-align: center;
  margin: 22px auto 0;
  padding: 0 max(20px, 4vw);
  font-size: 0.72rem;
  line-height: 1.5;
  color: #86868b;
  max-width: 40em;
}

@media (max-width: 720px) {
  .cmp-stories-wrap {
    grid-template-columns: 1fr;
  }

  .cmp-nav {
    display: none;
  }

  .cmp-story {
    flex-basis: min(300px, 88vw);
  }

  .cmp-story-media {
    height: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-stories {
    scroll-behavior: auto;
  }

  .cmp-story {
    transition: none;
  }
}

/* =========================================================
   Section 08b — Metrics (Apple-style big numbers · polite)
   Large stat · short title · quiet footnote
   ========================================================= */

.metrics {
  position: relative;
  padding: clamp(72px, 10vh, 108px) 0 clamp(64px, 9vh, 96px);
  background: #ffffff;
  color: #1d1d1f;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h, 52px) + 8px);
}

.mx-copy {
  text-align: center;
  padding: 0 max(20px, 5vw);
  max-width: 880px;
  margin: 0 auto 36px;
}

.mx-label {
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.mx-headline {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #1d1d1f;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mx-headline span {
  display: block;
}

.mx-body {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.55;
  color: #6e6e73;
  margin: 0 auto;
  max-width: 32em;
}

.mx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 max(16px, 3vw);
  background: rgba(15, 23, 42, 0.06);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
}

.mx-card {
  background: #fbfbfd;
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100%;
  transition: background 0.3s var(--ease);
}

.mx-card:hover {
  background: #ffffff;
}

.mx-num {
  margin: 0 0 4px;
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #162984;
  font-variant-numeric: tabular-nums;
}

.mx-num--text {
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  background: linear-gradient(135deg, #162984 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mx-title {
  margin: 0;
  font-family: "Kanit", sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}

.mx-desc {
  margin: 0;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #6e6e73;
  flex: 1;
}

.mx-note {
  margin: 8px 0 0;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #86868b;
}

.mx-note sup {
  font-size: 0.65em;
  color: #a1a1a6;
}

.mx-footnotes {
  list-style: none;
  max-width: 720px;
  margin: 28px auto 0;
  padding: 0 max(20px, 4vw);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mx-footnotes li {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #a1a1a6;
}

.mx-footnotes sup {
  color: #86868b;
  margin-right: 4px;
}

@media (max-width: 900px) {
  .mx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .mx-grid {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .mx-card {
    padding: 24px 20px;
  }

  .mx-num {
    font-size: 2.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-card {
    transition: none;
  }
}

/* =========================================================
   Section — ห้องเรียนหุ้น (Classroom)
   Apple chapter pattern · feature cards grid · inspirational
   ========================================================= */

.classroom {
  position: relative;
  padding: clamp(72px, 10vh, 112px) 0 clamp(64px, 9vh, 100px);
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  color: #1d1d1f;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h, 52px) + 8px);
}

/* Copy block */
.cl-copy {
  text-align: center;
  padding: 0 max(20px, 5vw);
  max-width: 820px;
  margin: 0 auto 44px;
}

.cl-label {
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  color: #7c3aed;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.cl-headline {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 6.5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #1d1d1f;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 0 16px;
}

.cl-headline span {
  display: block;
}

.cl-body {
  margin: 0 auto;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.6;
  color: #6e6e73;
  max-width: 30em;
}

/* Stage layout: Mockup left, Feature cards right */
.cl-stage {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 max(16px, 4vw);
  align-items: start;
}

/* Feature cards grid (right column) */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.cl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 20px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(124, 58, 237, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 28px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}

.cl-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 42px rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.14);
}

/* Card icon */
.cl-card-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #162984;
  background: linear-gradient(145deg, rgba(22, 41, 132, 0.07), rgba(124, 58, 237, 0.09));
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.cl-card:hover .cl-card-ico {
  transform: scale(1.08);
}

.cl-card-ico svg {
  width: 26px;
  height: 26px;
}

/* Card title */
.cl-card-title {
  margin: 0;
  font-family: "Kanit", sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: #1d1d1f;
}

/* Card quote */
.cl-card-quote {
  margin: 0;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.5;
  color: #6e6e73;
}

/* =========================================================
   YouTube Live-style Mockup
   ========================================================= */

.cl-mockup {
  background: #0f172a;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 24px 50px -12px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
}

.cl-mock-chrome {
  background: #1e293b;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cl-mock-chrome-left {
  display: flex;
  gap: 6px;
}

.cl-mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c, #64748b);
}

.cl-mock-chrome-title {
  font-family: "Kanit", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.cl-mock-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-family: "Kanit", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

.cl-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: clPulse 1.5s infinite;
}

@keyframes clPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.85); }
}

.cl-mock-body {
  display: flex;
  flex-direction: row;
  height: 380px;
}

/* Video area & Studio Stage */
.cl-mock-video {
  flex: 1.38;
  min-height: 0;
  background: radial-gradient(circle at 60% 45%, #1e1b4b 0%, #0b1120 85%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.cl-vid-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  overflow: hidden;
}

/* Left: Holographic Stock Chart Board */
.cl-vid-board {
  position: relative;
  width: 58%;
  height: 100%;
  max-height: 230px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(124, 58, 237, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}

.cl-board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Kanit", sans-serif;
  font-size: 0.72rem;
  color: #94a3b8;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.cl-board-symbol strong {
  color: #f8fafc;
  font-size: 0.82rem;
  margin-left: 4px;
}

.cl-board-change {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.7rem;
}

.cl-vid-chart {
  width: 100%;
  height: 140px;
  overflow: visible;
}

.cl-vid-area {
  transition: d 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-vid-line {
  stroke: #a855f7;
  stroke-width: 2.5;
  transition: d 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.6));
}

.cl-chart-target-pulse {
  animation: clTargetPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes clTargetPulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Right: Animated Instructor Draft Illustration ("ดราฟภาพผู้สอน") */
.cl-ins-draft {
  position: absolute;
  right: 0px;
  bottom: -4px;
  width: 225px;
  height: 255px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.cl-ins-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.4) 0%, transparent 70%);
  bottom: 50px;
  right: 35px;
  z-index: -1;
  filter: blur(14px);
  animation: insGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes insGlowPulse {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 1; }
}

.cl-ins-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 235px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.75));
}

.cl-ins-img {
  width: 100%;
  height: auto;
  max-height: 235px;
  object-fit: contain;
  transform-origin: bottom right;
  animation: insTeachingGesture 4s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

/* Dynamic Teaching Gesture Animation (ขยับตัวและเอียงองศาเสมือนกำลังอธิบายกระดานหุ้น) */
@keyframes insTeachingGesture {
  0% { transform: rotate(0deg) scale(1) translateY(0); }
  25% { transform: rotate(-1.5deg) scale(1.015) translateY(-2px); }
  55% { transform: rotate(1deg) scale(1.01) translateY(-4px); }
  80% { transform: rotate(-1deg) scale(1.02) translateY(-2px); }
  100% { transform: rotate(1.8deg) scale(1.025) translateY(-5px); }
}

/* Animated Pointer Beam pointing dynamically at chart breakout target (Teaching Gesture!) */
.cl-ins-laser-pointer {
  position: absolute;
  top: 105px;
  left: -95px;
  width: 190px;
  height: 100px;
  z-index: 4;
  pointer-events: none;
}

.cl-laser-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cl-laser-beam {
  animation: laserDash 1.2s linear infinite;
}

@keyframes laserDash {
  to { stroke-dashoffset: -18; }
}

.cl-laser-pulse {
  animation: laserPulse 1.5s ease-out infinite;
  transform-origin: 15px 40px;
}

@keyframes laserPulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Speaking Voice Waves */
.cl-ins-voice {
  position: absolute;
  top: 62px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  z-index: 3;
}

.cl-v-bar {
  width: 3px;
  background: #a855f7;
  border-radius: 2px;
  animation: insSpeakBar 0.5s ease-in-out infinite alternate;
}

.cl-v-bar.b1 { height: 6px; animation-delay: 0.1s; }
.cl-v-bar.b2 { height: 14px; animation-delay: 0.35s; }
.cl-v-bar.b3 { height: 10px; animation-delay: 0.2s; }
.cl-v-bar.b4 { height: 16px; animation-delay: 0.45s; }

@keyframes insSpeakBar {
  0% { transform: scaleY(0.3); opacity: 0.5; }
  100% { transform: scaleY(1.3); opacity: 1; }
}

/* Instructor Name Tag */
.cl-ins-tag {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 20px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin-top: -12px;
  z-index: 4;
}

.ins-badge {
  background: #7c3aed;
  color: #fff;
  font-family: "Kanit", sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
}

.ins-name {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.72rem;
  color: #f8fafc;
  font-weight: 500;
  white-space: nowrap;
}

/* Overlay & Controls */
.cl-vid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 10px 16px;
  display: flex;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, transparent 100%);
  pointer-events: none;
}

.cl-vid-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cl-vid-topic {
  font-family: "Kanit", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #f8fafc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.cl-vid-viewers {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.74rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cl-viewer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.cl-vid-controls {
  position: relative;
  z-index: 5;
  padding: 8px 16px;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.6) 80%, transparent 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.78rem;
  color: #cbd5e1;
}

.cl-ctrl-play {
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}

.cl-ctrl-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.cl-ctrl-progress {
  display: block;
  width: 68%;
  height: 100%;
  background: #7c3aed;
  border-radius: 2px;
}

/* Chat sidebar */
.cl-mock-chat {
  width: 250px;
  min-height: 0;
  background: #131c31;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.cl-chat-head {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #18223a;
}

.cl-chat-mode {
  flex: 1;
  text-align: center;
  padding: 9px 4px;
  font-family: "Kanit", sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.cl-chat-mode.is-on {
  color: #a855f7;
  border-bottom-color: #a855f7;
  font-weight: 600;
}

.cl-chat-stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
}

.cl-chat-stream::-webkit-scrollbar {
  display: none;
}

.cl-chat-msg {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #e2e8f0;
  animation: clMsgSlide 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes clMsgSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cl-chat-user {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  color: #c084fc;
  margin-right: 5px;
}

.cl-chat-user.is-ai {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
}

.cl-chat-composer {
  padding: 10px 12px;
  background: #18223a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cl-chat-ph {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.76rem;
  color: #64748b;
}

.cl-chat-send {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #7c3aed;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

/* CTA area */
.cl-cta-wrap {
  text-align: center;
  margin-top: 44px;
  padding: 0 20px;
}

.cl-cta {
  display: inline-block;
  font-family: "Kanit", sans-serif;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #162984;
  text-decoration: none;
  padding: 0 4px 2px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.cl-cta:hover {
  color: #7c3aed;
  border-bottom-color: #7c3aed;
}

.cl-note {
  margin: 14px auto 0;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.78rem;
  color: #86868b;
  max-width: 32em;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
  .cl-stage {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  .cl-mockup {
    margin-bottom: 8px;
  }
}

@media (max-width: 640px) {
  .cl-mock-body {
    flex-direction: column;
    height: auto;
  }

  .cl-mock-video {
    flex: 0 0 auto;
    height: 250px;
    max-height: 250px;
  }

  .cl-vid-stage {
    padding: 44px 10px 4px;
  }

  .cl-vid-board {
    padding: 6px 8px;
  }

  .cl-vid-chart {
    height: 80px;
  }

  .cl-ins-draft {
    width: 130px;
    height: 165px;
    right: -4px;
    bottom: -2px;
  }

  .cl-ins-img-wrap,
  .cl-ins-img {
    max-height: 145px;
  }

  .cl-ins-voice {
    top: 34px;
    right: 16px;
  }

  .cl-ins-laser-pointer {
    top: 55px;
    left: -50px;
    width: 110px;
    height: 60px;
  }

  .cl-ins-tag {
    margin-top: -6px;
    padding: 2px 8px;
  }

  .cl-vid-overlay {
    padding: 6px 10px;
  }

  .cl-vid-topic {
    font-size: 0.72rem;
  }

  .cl-vid-viewers {
    font-size: 0.62rem;
  }

  .cl-vid-controls {
    padding: 5px 10px;
    font-size: 0.68rem;
    gap: 8px;
  }

  .cl-mock-chat {
    width: 100%;
    height: 220px;
    max-height: 220px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .cl-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cl-card {
    padding: 20px 18px 22px;
    border-radius: 18px;
  }

  .cl-card-ico {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-card {
    transition: none;
  }

  .cl-card:hover {
    transform: none;
  }

  .cl-card-ico {
    transition: none;
  }

  .cl-live-dot,
  .cl-chat-msg {
    animation: none;
  }
}

/* =========================================================
   CHAPTER 06 — กิจกรรม (ออกไปเห็นธุรกิจจริง)
   Apple-Style Carousel Section
   ========================================================= */

.activities {
  position: relative;
  padding: 100px 0 110px;
  background: #fbfbfd;
  overflow: hidden;
}

.act-header {
  max-width: 1200px;
  margin: 0 auto 36px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.act-kicker {
  font-family: "Kanit", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #7c3aed;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.act-title {
  font-family: "Kanit", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.12;
  color: #1d1d1f;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}

.act-sub {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  line-height: 1.55;
  color: #6e6e73;
  margin: 0;
  max-width: 580px;
}

.act-header-right {
  display: flex;
  align-items: center;
}

.act-nav-group {
  display: flex;
  gap: 10px;
}

.act-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1d1d1f;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.act-nav:hover {
  background: #1d1d1f;
  color: #ffffff;
  border-color: #1d1d1f;
  transform: scale(1.06);
}

.act-carousel-wrap {
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 0 30px;
}

.act-carousel-wrap::-webkit-scrollbar {
  display: none;
}

.act-track {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.act-card {
  flex: 0 0 360px;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.act-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(124, 58, 237, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.act-card-media {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #0f172a;
}

.act-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.act-card:hover .act-card-img {
  transform: scale(1.08);
}

.act-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: "Kanit", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  letter-spacing: 0.02em;
}

.act-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.7) 100%);
}

.act-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
}

.act-img-placeholder::before {
  content: "aioMax";
  font-family: "Tilt Neon", sans-serif;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.35);
}

.act-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.act-card-title {
  font-family: "Kanit", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: #1d1d1f;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.act-card-desc {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #6e6e73;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.act-card-link {
  font-family: "Kanit", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #7c3aed;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.25s ease, color 0.25s ease;
}

.act-card-link:hover {
  color: #6d28d9;
  gap: 8px;
}

.act-progress-wrap {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 0 24px;
}

.act-progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.act-progress-fill {
  width: 33.33%;
  height: 100%;
  background: #7c3aed;
  border-radius: 2px;
  transition: width 0.35s ease, transform 0.35s ease;
}

@media (max-width: 768px) {
  .activities {
    padding: 70px 0 80px;
  }

  .act-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }

  .act-card {
    flex: 0 0 290px;
  }
}

/* =========================================================
   Section — เกี่ยวกับเรา (About Us)
   Company story, milestones & team grid
   ========================================================= */

.about {
  position: relative;
  padding: 120px 0 100px;
  background: #0b0b0f;
  overflow: hidden;
}

/* --- Story Block --- */

.about-story {
  max-width: 800px;
  margin: 0 auto 80px;
  padding: 0 24px;
  text-align: center;
}

.about-kicker {
  font-family: "Kanit", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.about-title {
  font-family: "Kanit", sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
}

.about-body {
  text-align: left;
}

.about-body p {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.75;
  color: rgba(255,255,255,.7);
  margin: 0 0 18px;
}

.about-body p:last-child {
  margin-bottom: 0;
}

/* --- Milestones Timeline --- */

.about-milestones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 48px;
  padding: 0 16px;
}

.about-mile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.about-mile-year {
  font-family: "Kanit", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #a78bfa;
  line-height: 1;
}

.about-mile-desc {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.88rem;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}

.about-mile-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, rgba(167,139,250,.5), rgba(167,139,250,.15));
  border-radius: 1px;
  flex-shrink: 0;
  margin: 0 12px;
  margin-bottom: 14px;
}

/* --- Team Block --- */

.about-team {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.about-team-kicker {
  font-family: "Kanit", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.2);
}

.about-team-title {
  font-family: "Kanit", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.about-team-sub {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,.5);
  margin: 0 0 48px;
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}

/* --- Member Card --- */

.about-member {
  text-align: center;
}

.about-member-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}

.about-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.about-member:hover .about-member-photo {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(124,58,237,.25), 0 8px 24px rgba(0,0,0,.5);
}

.about-member:hover .about-member-photo img {
  transform: scale(1.06);
}

.about-member-name {
  font-family: "Kanit", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
}

.about-member-role {
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #34d399;
}

/* --- About Responsive --- */

@media (max-width: 900px) {
  .about-team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .about-member-photo {
    width: 120px;
    height: 120px;
    border-radius: 22px;
  }
}

@media (max-width: 600px) {
  .about {
    padding: 80px 0 70px;
  }

  .about-story {
    margin-bottom: 56px;
  }

  .about-milestones {
    flex-direction: column;
    gap: 12px;
  }

  .about-mile-line {
    width: 2px;
    height: 32px;
    background: linear-gradient(180deg, rgba(167,139,250,.5), rgba(167,139,250,.15));
    margin: 0;
  }

  .about-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .about-member-photo {
    width: 100px;
    height: 100px;
    border-radius: 20px;
  }

  .about-member-name {
    font-size: 0.88rem;
  }
}