/* RoomHub — Landing page styles (โทนส้ม Prompt) */
.lwrap{max-width:1180px;margin:0 auto;padding:0 24px}
#landing{background:
  radial-gradient(1100px 500px at 80% -8%,#FFE0C7 0%,transparent 55%),
  radial-gradient(900px 500px at -10% 5%,#FFEAD6 0%,transparent 50%),
  var(--bg);min-height:100vh}

/* nav */
.lnav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(255,247,241,.8);border-bottom:1px solid rgba(241,230,219,.7)}
.lnav .inner{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.llogo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px}
.llogo .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#FF9A4D);display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 6px 16px rgba(255,106,26,.35)}
.lnav nav{display:flex;gap:6px}
.lnav nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);padding:8px 14px;border-radius:999px;transition:.2s}
.lnav nav a:hover{background:#fff;color:var(--primary)}
.lnav .right{display:flex;align-items:center;gap:10px}

/* hero */
.hero{padding:64px 0 30px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:52px;line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:18px 0}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero p.sub{font-size:17px;color:var(--ink-2);max-width:460px;margin-bottom:28px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .trust{display:flex;align-items:center;gap:12px;margin-top:30px;color:var(--muted);font-size:13.5px}
.avs{display:flex}
.avs span{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--bg);margin-left:-10px;background:linear-gradient(135deg,#FFB061,#FF6A1A);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.avs span:first-child{margin-left:0}
.stars-mini{color:var(--amber);font-size:12px}

.preview{position:relative}
.pv-card{background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);padding:18px;border:1px solid var(--line)}
.pv-top{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 14px;border-bottom:1px solid var(--line);font-size:13px}
.pv-top .live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--green)}
.pv-top .live i{font-size:9px;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.pvr{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:12px;transition:.2s}
.pvr:hover{background:var(--primary-soft2)}
.pvr .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex-shrink:0}
.pvr .meta{flex:1;min-width:0}
.pvr .meta b{font-size:13.5px;font-weight:600;display:block}
.pvr .meta small{font-size:11.5px;color:var(--muted)}
.pv-float{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;border:1px solid var(--line);display:flex;align-items:center;gap:10px}
.pv-float.f1{top:-22px;right:-14px}
.pv-float.f2{bottom:-20px;left:-18px}
.pv-float .big{font-size:20px;font-weight:800;color:var(--primary)}

/* stat strip */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-top:40px;overflow:hidden}
.statbar .s{padding:26px;text-align:center;border-right:1px solid var(--line)}
.statbar .s:last-child{border-right:none}
.statbar .s .v{font-size:32px;font-weight:800;color:var(--primary);letter-spacing:-.02em}
.statbar .s .l{font-size:13.5px;color:var(--muted)}

/* sections */
.lsection{padding:70px 0}
.sec-head{text-align:center;max-width:620px;margin:0 auto 44px}
.sec-head .k{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--primary);text-transform:uppercase}
.sec-head h2{font-size:36px;font-weight:800;letter-spacing:-.02em;margin:10px 0 12px}
.sec-head h2 em{font-style:normal;color:var(--primary)}
.sec-head p{color:var(--ink-2);font-size:16px}

/* features */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:.25s}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--primary-soft)}
.bcard .ic{width:48px;height:48px;border-radius:14px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.bcard h3{font-size:18px;font-weight:700;margin-bottom:7px}
.bcard p{font-size:14px;color:var(--ink-2)}

/* steps */
.steps{display:flex;flex-direction:column;gap:16px;max-width:880px;margin:0 auto}
.lstep{display:flex;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.lstep .n{width:46px;height:46px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;flex-shrink:0}
.lstep .tx h4{font-size:18px;font-weight:700;margin:0 0 4px}
.lstep .tx p{font-size:14px;color:var(--ink-2)}

/* ===== scroll reveal (fade-up) ===== */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
[data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ===== COMPARE section ===== */
.compare{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:28px;max-width:980px;margin:0 auto}

/* toggle switch */
.cmp-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px;max-width:440px;margin:0 auto 30px}
.cmp-tab{position:relative;z-index:2;border:0;background:transparent;cursor:pointer;font-family:inherit;font-weight:700;font-size:14.5px;color:var(--muted);padding:11px 10px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:color .25s}
.cmp-tab.is-active{color:#fff}
.cmp-tab[data-mode="old"].is-active{color:#fff}
.cmp-thumb{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;box-shadow:0 6px 16px rgba(255,106,26,.3);transition:transform .32s cubic-bezier(.34,1.56,.64,1),background .25s}
.compare[data-mode="use"] .cmp-thumb{transform:translateX(100%);background:linear-gradient(135deg,var(--primary),#FF9A4D)}
.compare[data-mode="old"] .cmp-thumb{transform:translateX(0);background:linear-gradient(135deg,#B9A695,#9A8676)}

/* grid */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.cmp-col{border:1px solid var(--line);border-radius:18px;padding:22px;transition:opacity .35s,transform .35s,box-shadow .35s,border-color .35s,filter .35s}
.cmp-head{display:flex;align-items:center;gap:13px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line)}
.cmp-badge{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;flex-shrink:0}
.cmp-badge.bad{background:#F1ECE6;color:#9A8676}
.cmp-badge.good{background:var(--primary-soft);color:var(--primary)}
.cmp-head h3{font-size:18px;font-weight:800;margin:0}
.cmp-head small{font-size:12px;color:var(--muted)}
.cmp-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.cmp-list li{font-size:13.7px;line-height:1.5;color:var(--ink-2);display:flex;gap:9px;align-items:flex-start}
.cmp-list li i{flex-shrink:0;font-size:16px;margin-top:1px}
.cmp-old .cmp-list li i{color:#C9B8A8}
.cmp-use .cmp-list li i{color:var(--green)}

/* highlight state ตาม toggle */
.compare[data-mode="use"] .cmp-use{border-color:var(--primary-soft);box-shadow:0 14px 34px rgba(255,106,26,.14);transform:translateY(-3px);background:linear-gradient(180deg,#fff,#FFF8F2)}
.compare[data-mode="use"] .cmp-old{opacity:.5;filter:saturate(.4)}
.compare[data-mode="old"] .cmp-old{border-color:var(--line-2);box-shadow:var(--shadow-sm);transform:translateY(-3px);background:linear-gradient(180deg,#fff,#FBF7F3)}
.compare[data-mode="old"] .cmp-use{opacity:.5;filter:saturate(.55)}

/* metrics */
.cmp-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.cmp-metrics .m{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:20px;text-align:center}
.cmp-metrics .mv{font-size:34px;font-weight:800;color:var(--primary);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.cmp-metrics .ml{font-size:12.5px;color:var(--ink-2);margin-top:7px;display:flex;gap:5px;align-items:center;justify-content:center}
.cmp-metrics .ml i{color:var(--primary);font-size:15px}

@media(max-width:760px){
  .compare{padding:18px}
  .cmp-grid{grid-template-columns:1fr}
  .compare[data-mode="use"] .cmp-old,.compare[data-mode="old"] .cmp-use{display:none}
  .cmp-metrics{grid-template-columns:1fr}
}

/* cta band */
.ctaband{margin:20px 24px 0;border-radius:30px;background:linear-gradient(135deg,var(--primary),#FF9A4D);padding:60px 24px;text-align:center;color:#fff}
.ctaband h2{font-size:34px;font-weight:800;margin-bottom:12px}
.ctaband p{opacity:.92;margin-bottom:26px;font-size:16px}
.ctaband .btn-white{background:#fff;color:var(--primary)}
.ctaband .btn-white:hover{background:#fff;color:var(--primary-600)}

/* footer */
.lfoot{padding:56px 0 26px;border-top:1px solid var(--line);margin-top:60px;background:linear-gradient(180deg,transparent,#FFF1E6)}
.lfoot .grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
.lfoot p.d{font-size:13.5px;color:var(--ink-2);max-width:320px;margin:14px 0 18px;line-height:1.6}
.lfoot .fsocial{display:flex;gap:10px}
.lfoot .fsocial a{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);font-size:17px;transition:.2s}
.lfoot .fsocial a:hover{background:var(--primary);border-color:var(--primary);color:#fff;transform:translateY(-3px);box-shadow:0 8px 18px rgba(255,106,26,.3)}
.lfoot h5{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.lfoot h5 i{color:var(--primary);font-size:15px}
.lfoot ul{list-style:none}
.lfoot li{padding:6px 0}
.lfoot li a{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);transition:.18s}
.lfoot li a i{color:var(--muted);font-size:14px;transition:.18s}
.lfoot li a:hover{color:var(--primary);transform:translateX(3px)}
.lfoot li a:hover i{color:var(--primary)}
.lfoot .bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.lfoot .ftrust{display:flex;gap:18px;flex-wrap:wrap}
.lfoot .ftrust span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.lfoot .ftrust i{color:var(--green);font-size:14px}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .lfoot .grid{grid-template-columns:1fr 1fr;gap:28px}
  .lfoot .fbrand{grid-column:1/-1}
  .bento{grid-template-columns:1fr}
  .statbar{grid-template-columns:1fr 1fr}
  .hero h1{font-size:38px}
  .lnav nav{display:none}
  .preview{display:none}
}
@media(max-width:560px){
  .lfoot .grid{grid-template-columns:1fr}
  .lfoot .bottom{justify-content:center;text-align:center}
  .lwrap{padding:0 16px}
  .hero h1{font-size:30px}
  .sec-head h2,.ctaband h2{font-size:26px}
  .ctaband{padding:40px 20px;margin:20px 16px}
  .statbar{grid-template-columns:1fr 1fr;gap:12px}
}