/* ADVY — landing / PR site — DARK theme
   Deep navy surfaces, gold accents, light ink. */
:root{
  --bg:#0d1018; --panel:#161b27; --ink:#e9ebf3; --muted:#9499b0;
  --line:#262c3a; --line2:#1d2230;
  --brand:#c79e3e; --brand-d:#dcba5e; --brand-soft:#2b2516;
  --primary:#3c477a; --primary-d:#4c5a96;
  --navy:#090c14; --navy-ink:#b8bcca; --navy-line:#212736;
  --crit:#e26c6c; --crit-bg:#2c1518;
  --high:#d8b65a; --high-bg:#2a2310;
  --med:#6f9ce4; --med-bg:#131d2e;
  --ok:#6cc06c;  --ok-bg:#13260f;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Thai","Sarabun","Loma",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0; font-weight:680; letter-spacing:-.015em; line-height:1.2}
p{margin:0 0 1em}
a{color:var(--brand-d); text-decoration:none}
a:hover{color:var(--brand)}
.muted{color:var(--muted)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.center{text-align:center}

/* ---- top nav ---- */
.nav{position:sticky; top:0; z-index:30; background:rgba(13,16,24,.82);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:20px; height:80px}
.nav img{height:60px}
.nav .links{margin-left:auto; display:flex; gap:26px; align-items:center}
.nav .links a{color:var(--ink); font-size:14.5px; font-weight:560}
.nav .links a:hover{color:var(--brand-d)}
.nav .links a.lang{border:1px solid var(--line); border-radius:8px; padding:5px 11px;
  font-size:13px; font-weight:680; letter-spacing:.04em; color:var(--brand-d)}
.nav .links a.lang:hover{border-color:var(--brand); background:rgba(255,255,255,.03)}
.btn{display:inline-block; background:var(--primary); color:#fff; border:0; border-radius:10px;
  padding:11px 22px; font-weight:640; font-size:15px; cursor:pointer; transition:.15s}
.btn:hover{background:var(--primary-d); color:#fff; transform:translateY(-1px)}
.btn.gold{background:var(--brand); color:#1a1406} .btn.gold:hover{background:var(--brand-d); color:#1a1406}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{background:rgba(255,255,255,.03); border-color:var(--brand); color:var(--brand-d)}
.nav .btn{padding:8px 16px; font-size:14px}

/* ---- hero ---- */
.hero{padding:74px 0 50px; background:
  radial-gradient(1100px 460px at 80% -10%, rgba(199,158,62,.16) 0%, transparent 60%),
  radial-gradient(900px 400px at 0% 0%, rgba(60,71,122,.28) 0%, transparent 55%);}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:start}
.kicker{display:inline-flex; align-items:center; gap:8px; background:var(--brand-soft);
  color:var(--brand-d); font-weight:680; font-size:13px; padding:6px 14px; border-radius:30px;
  letter-spacing:.02em; margin-bottom:20px}
.hero h1{font-size:46px; line-height:1.1; margin-bottom:18px}
.hero h1 .g{color:var(--brand-d)}
.hero p.lead{font-size:18.5px; color:#b7bbcd; margin-bottom:28px; max-width:34ch}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.hero .badges{margin-top:26px; display:flex; gap:10px; flex-wrap:wrap}
.tag{display:inline-flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line);
  border-radius:30px; padding:7px 14px; font-size:13px; font-weight:560; color:#c3c7d7}
.tag b{color:var(--brand-d)}
.shot{border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.4); background:var(--panel)}
.shot img{display:block; width:100%; height:auto}
.hero .shot{transform:perspective(1600px) rotateY(-6deg) rotateX(2deg)}

/* ---- section scaffolding ---- */
section{padding:72px 0}
section.alt{background:linear-gradient(180deg,#10141f,#0c0f17)}
.eyebrow{color:var(--brand-d); font-weight:720; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:12px}
.sec-h{font-size:33px; margin-bottom:14px; letter-spacing:-.02em}
.sec-sub{font-size:18px; color:var(--muted); max-width:62ch; margin:0 auto}
.sec-head{margin-bottom:46px}
.sec-head.center{margin-left:auto; margin-right:auto}

/* ---- problem strip ---- */
.problem{background:var(--navy); color:#e7eaf2}
.problem .sec-h{color:#fff}
.problem .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px}
.problem .item{background:#141926; border:1px solid var(--navy-line); border-radius:14px; padding:22px}
.problem .item .n{font-size:30px; font-weight:760; color:var(--brand); line-height:1}
.problem .item h4{color:#fff; margin:12px 0 6px; font-size:16px}
.problem .item p{color:#aab0c2; font-size:14px; margin:0}

/* ---- feature cards ---- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px;
  box-shadow:0 1px 2px rgba(0,0,0,.3); transition:.18s}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(0,0,0,.85); border-color:#39404f}
.card .ic{width:46px; height:46px; border-radius:12px; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:22px}
.card h3{font-size:18px; margin-bottom:8px}
.card p{font-size:14.5px; color:#b1b5c7; margin:0}

/* ---- how it works ---- */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:14px; counter-reset:step}
.step{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 18px}
.step::before{counter-increment:step; content:counter(step);
  position:absolute; top:-14px; left:18px; width:30px; height:30px; border-radius:50%;
  background:var(--primary); color:#fff; font-weight:740; font-size:14px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px -3px rgba(0,0,0,.6)}
.step h4{font-size:15.5px; margin:10px 0 6px}
.step p{font-size:13px; color:#aab0c0; margin:0}
.step .arrow{display:none}

/* ---- showcase (alternating screenshot + text) ---- */
.show{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:64px}
.show:last-child{margin-bottom:0}
.show.flip .txt{order:2}
.show .num{font-size:13px; font-weight:720; color:var(--brand-d); letter-spacing:.08em; text-transform:uppercase}
.show h3{font-size:25px; margin:8px 0 12px}
.show p{font-size:16px; color:#bdc1d2}
.show ul{margin:14px 0 0; padding:0; list-style:none}
.show li{position:relative; padding-left:26px; margin-bottom:9px; font-size:15px; color:#b7bbcd}
.show li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--ok); font-weight:800}

/* ---- hero: static image stacked above the moving strip ---- */
.herostack{display:flex; flex-direction:column; gap:16px}
.herostack .shot{transform:none}

/* ---- hero moving thumbnail strip (small, auto ping-pong) ---- */
.heromarq{position:relative; overflow:hidden; border-radius:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.heromarq-track{display:flex; gap:12px; width:max-content; padding:4px 0;
  animation:heromarq 16s ease-in-out infinite alternate; will-change:transform}
.heromarq-track img{height:132px; width:auto; display:block; border-radius:9px;
  border:1px solid var(--line); background:var(--panel);
  box-shadow:0 14px 28px -20px rgba(0,0,0,.85)}
@keyframes heromarq{ from{transform:translateX(0)} to{transform:translateX(-42%)} }
@media(max-width:920px){ .heromarq-track img{height:140px} }
@media(max-width:600px){ .heromarq-track img{height:112px} }
@media(prefers-reduced-motion:reduce){ .heromarq-track{animation:none} }

/* desktop: stack hero vertically — text on top, image + moving strip below (left-aligned) */
@media(min-width:921px){
  .hero .wrap{grid-template-columns:1fr; gap:30px; text-align:left}
  .hero p.lead{max-width:74ch; margin-left:0; margin-right:0}
  .hero .cta{justify-content:flex-start}
  .hero .badges{justify-content:flex-start}
  .hero .herostack{max-width:900px; width:100%; margin:0}
}

/* ---- infographic showcase (full-width image + description) ---- */
.infoshow{margin-bottom:60px}
.infoshow:last-child{margin-bottom:0}
.infoshow .shot{margin-bottom:22px}
.infoshow .num{font-size:13px; font-weight:720; color:var(--brand-d); letter-spacing:.08em; text-transform:uppercase}
.infoshow h3{font-size:25px; margin:8px 0 16px}
.infoshow .body{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.infoshow p{font-size:16px; color:#bdc1d2; margin:0}
.infoshow ul{margin:0; padding:0; list-style:none}
.infoshow li{position:relative; padding-left:26px; margin-bottom:10px; font-size:15px; color:#b7bbcd}
.infoshow li:last-child{margin-bottom:0}
.infoshow li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--ok); font-weight:800}
.infoshow li b{color:#e9ebf3}

/* ---- intro video ---- */
.videoshot{max-width:900px; margin:0 auto; background:#000}
.videoshot video{display:block; width:100%; height:auto; background:#000}
.appshot{max-width:980px; margin:0 auto}

/* ---- benefits ---- */
.benefits{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.benefit{display:flex; gap:16px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px}
.benefit .b-ic{flex:0 0 44px; width:44px; height:44px; border-radius:11px; background:var(--primary);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px}
.benefit h4{font-size:17px; margin-bottom:5px}
.benefit p{font-size:14.5px; color:#b1b5c7; margin:0}

/* ---- code / quickstart ---- */
.code{background:#070b13; color:#d7e2f0; border:1px solid var(--line); border-radius:14px; padding:22px 24px; overflow:auto;
  font:13.5px/1.85 ui-monospace,Menlo,Consolas,monospace; box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
.code .c{color:#6b89ad} .code .p{color:#8fd6a0} .code .k{color:#e3b85f}
.start{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}

/* ---- pills row ---- */
.pillrow{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:24px}
.pill{background:var(--panel); border:1px solid var(--line); border-radius:30px; padding:8px 16px;
  font-size:13.5px; font-weight:560; color:#c3c7d7}
.pill b{color:var(--brand-d)}

/* ---- footer ---- */
footer{background:var(--navy); color:#9aa0b4; padding:48px 0 36px; margin-top:10px; border-top:1px solid var(--navy-line)}
footer img{height:60px; margin-bottom:14px}
footer .grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
footer h5{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px}
footer a{display:block; color:#9aa0b4; font-size:14px; margin-bottom:8px}
footer a:hover{color:var(--brand)}
footer .fine{border-top:1px solid var(--navy-line); margin-top:34px; padding-top:20px;
  font-size:13px; color:#717892; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
.note{background:var(--high-bg); border:1px solid #4a3d16; color:#e0c878; border-radius:12px;
  padding:14px 18px; font-size:14px; margin-top:22px}

/* ---- responsive ---- */
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr; gap:34px}
  .hero h1{font-size:36px}
  .hero .shot{transform:none}
  .cards,.problem .grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .show{grid-template-columns:1fr; gap:22px}
  .show.flip .txt{order:0}
  .infoshow .body{grid-template-columns:1fr; gap:16px}
  .benefits,.start{grid-template-columns:1fr}
  footer .grid{grid-template-columns:1fr}
  .nav .links a:not(.btn):not(.lang){display:none}
}