/* หน้าขาย Venzo — section 1-10 ตามม็อคอัพ Canva หน้า 13-22 */

/* S1 Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f7fafc 0%,#eef3f7 100%)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;min-height:640px;padding:72px 0}
.hero h1{font-size:50px;line-height:1.24}
.hero .sub{font-size:19px;color:var(--muted);margin-top:24px;max-width:620px}
.hero .cover{font-size:17px;color:var(--navy-ink);margin-top:24px;max-width:560px}
.hero .cover .dash{width:44px;height:2px;margin-bottom:16px}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.hero .shot{position:relative;isolation:isolate;align-self:stretch;margin-right:calc((100vw - min(1200px,100vw - 48px))/-2)}
.hero .shot>.pv-abs{height:100%;border-radius:28px 0 0 28px}
.hero .shot img{width:100%;height:100%;min-height:560px;object-fit:cover;border-radius:28px 0 0 28px}
.hero .shot::before{content:"";position:absolute;left:-38px;top:12%;bottom:-6%;width:70px;background:var(--green-2);transform:skewX(-14deg);border-radius:6px;opacity:.9;z-index:-1}

/* S2 Problem */
.pain-head{display:grid;grid-template-columns:1fr;gap:0;max-width:880px}
.pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.pain{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.pain img{aspect-ratio:16/9;object-fit:cover;width:100%}
.pain .body{padding:0 22px 26px;position:relative}
.pain .ic{width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin-top:-29px;border:5px solid #fff}
.pain .ic svg{width:24px;height:24px}
.pain .num{font-family:var(--f-head);font-weight:700;color:var(--navy);font-size:20px;margin:12px 0 6px}
.pain p{font-size:16.5px;line-height:1.65;color:var(--ink)}
.insight{display:flex;gap:22px;align-items:center;margin-top:40px;padding:26px 30px;border-left:4px solid var(--green);background:var(--green-soft);border-radius:0 var(--radius) var(--radius) 0}
.insight svg{width:44px;height:44px;flex:none;color:var(--navy)}
.insight p{font-size:18.5px;line-height:1.7}
.insight b{color:var(--green-dark)}

/* S3 Solution */
.sol .top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sol .top img{width:100%;aspect-ratio:10/7;object-fit:cover;border-radius:24px}
.sol .pts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.pt{border-top:3px solid var(--green);padding-top:22px}
.pt .n{font-family:var(--f-head);font-weight:700;font-size:44px;line-height:1;color:#d6e6bc}
.pt h3{font-size:23px;margin:10px 0 10px}
.pt p{font-size:17px;color:var(--muted)}

/* S4 Strength */
.str-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.str{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.str img{width:100%;aspect-ratio:12/5;object-fit:cover}
.str .body{padding:0 22px 26px}
.str .ic{width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin-top:-29px;border:5px solid #fff}
.str .ic svg{width:24px;height:24px}
.str h3{font-size:20px;margin:14px 0 4px}
.str .bar{width:34px;height:2px;background:var(--green);margin:10px 0 12px}
.str p{font-size:16.5px;line-height:1.65;color:var(--ink)}

/* S5 Products */
.prod-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:22px;margin-top:48px;align-items:stretch}
.prod{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.prod img{width:100%;aspect-ratio:16/8;object-fit:cover}
.prod.main img{aspect-ratio:16/8.6}
.prod .body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.prod .no{font-family:var(--f-head);font-weight:700;color:var(--green);font-size:15px;letter-spacing:.04em}
.prod h3{font-size:26px}
.prod p{font-size:16.5px;color:var(--muted);flex:1}
.prod .tag{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--navy-ink);background:var(--bg);border-radius:10px;padding:10px 14px}
.prod.main .tag{background:var(--green-soft);color:var(--green-dark);font-weight:600}
.note{display:flex;gap:12px;align-items:center;margin-top:28px;font-size:16.5px;color:var(--muted)}
.note svg{width:22px;height:22px;flex:none;color:var(--navy)}

/* S6 Proof */
.case{display:grid;grid-template-columns:.95fr 1fr 1.05fr;margin-top:48px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.case .lbl{background:var(--navy);color:#fff;padding:40px 36px;display:flex;flex-direction:column;gap:16px}
.case .badge{align-self:flex-start;background:var(--green-2);color:#fff;font:600 13px/1 var(--f-head);letter-spacing:.06em;padding:8px 12px;border-radius:6px}
.case .brand{font-family:var(--f-head);font-weight:700;font-size:46px;line-height:1.1;color:#fff}
.case .lbl h3{color:#fff;font-size:24px;padding-top:14px;border-top:2px solid var(--green-2);align-self:flex-start}
.case .lbl p{color:#cfdaea;font-size:16.5px}
.case .cimg{min-height:340px}
.case .cimg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.csr{padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
.csr .row{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.csr .row:last-child{border-bottom:0}
.csr .ic{width:52px;height:52px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center;flex:none}
.csr .ic svg{width:24px;height:24px}
.csr h4{font-size:19px;margin-bottom:4px}
.csr p{font-size:16px;color:var(--muted);line-height:1.6}
.refs-h{font-size:24px;margin:56px 0 22px}
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ref{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.ref .rimg{min-height:150px}
.ref .rimg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ref .body{padding:20px 20px}
.ref h4{font-size:19px}
.ref .bar{width:28px;height:2px;background:var(--green);margin:8px 0 10px}
.ref p{font-size:15px;color:var(--muted);line-height:1.55}

/* S7 Lead magnet (ตัวอย่างแบบประเมินข้อแรก) */
.lm{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:26px;overflow:hidden;box-shadow:0 18px 44px rgba(12,47,85,.16);background:#fff}
.lm-side{background:linear-gradient(180deg,var(--navy-2) 0%,var(--navy-2) 52%,rgba(11,58,102,.35) 75%,rgba(11,58,102,.1) 100%),url(../img/quiz-restaurant.jpg) bottom/cover no-repeat;color:#fff;padding:44px 42px 220px}
.lm-side img.logo{height:52px;width:auto;border-radius:6px}
.pill{display:inline-block;background:var(--green-2);color:#fff;font:500 16px/1.3 var(--f-body);padding:9px 18px;border-radius:999px;margin-top:26px}
.lm-side h2{color:#fff;font-size:32px;line-height:1.3;margin-top:22px;font-weight:600}
.lm-side .dash{margin:24px 0 20px;width:52px}
.ck{display:flex;gap:14px;margin-top:16px}
.ck .c{width:30px;height:30px;border-radius:50%;background:var(--green-2);display:grid;place-items:center;flex:none;margin-top:3px}
.ck .c svg{width:16px;height:16px;color:#fff}
.ck b{display:block;font-family:var(--f-head);font-size:19px;font-weight:600}
.ck span.d{display:block;font-size:15px;color:#d5e0ee;line-height:1.55}

/* S8 Process */
.proc-top{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end}
.proc-top p{font-size:17px;color:var(--muted);border-left:2px solid var(--line);padding-left:24px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px}
.step img{width:100%;aspect-ratio:16/9.5;object-fit:cover;border-radius:16px}
.step .hd{display:flex;align-items:center;gap:14px;margin-top:-30px;padding-left:16px}
.step .ic{width:62px;height:62px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;border:5px solid #fff;flex:none}
.step .ic svg{width:26px;height:26px}
.step .no{font-family:var(--f-head);font-weight:700;font-size:34px;color:#d6e6bc;margin-top:24px}
.step h3{font-size:21px;margin:12px 0 6px}
.step p{font-size:16.5px;color:var(--muted)}

/* S9 FAQ */
.faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.faq .side img{width:100%;border-radius:24px;margin-top:34px;aspect-ratio:8/7;object-fit:cover}
.qa{display:flex;flex-direction:column;gap:14px}
.qa details{background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(12,47,85,.07);border:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 22px;font-family:var(--f-head);font-weight:600;font-size:18px;color:var(--navy)}
.qa summary::-webkit-details-marker{display:none}
.qa .n{width:46px;height:46px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center;font-size:17px}
.qa .pm{width:34px;height:34px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:22px;color:var(--navy);transition:transform .2s}
.qa details[open] .pm{transform:rotate(45deg)}
.qa .a{padding:0 24px 22px 86px;font-size:16.5px;color:var(--muted)}

/* S10 CTA */
.cta{background:linear-gradient(115deg,#f3f7fb 0%,#f3f7fb 50%,#e7eef5 100%)}
.cta .grid{display:grid;grid-template-columns:1fr .95fr;gap:56px;align-items:start}
.cta h2{font-size:46px}
.cta .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.feats{display:grid;grid-template-columns:1fr;gap:12px;margin-top:34px}
.feat{display:flex;gap:14px;align-items:center;font-size:16.5px;line-height:1.55;color:var(--navy-ink)}
.feat .ic{width:46px;height:46px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center;flex:none}
.feat .ic svg{width:22px;height:22px}
.cta .helmet{margin-top:38px;border-radius:22px;width:100%;aspect-ratio:27/10;object-fit:cover}
.qform{background:#fff;border-radius:22px;padding:34px 32px;box-shadow:0 18px 44px rgba(12,47,85,.14);border:1px solid var(--line)}
.qform h3{font-size:28px}
.qform .hint{font-size:15px;color:var(--muted);margin:6px 0 22px}
.qform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qform .field{margin-bottom:16px}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cat{position:relative}
.cat input{position:absolute;opacity:0}
.cat label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border:1.5px solid #cfd9e4;border-radius:12px;background:#f7f9fc;font:500 14.5px/1.3 var(--f-body);color:var(--navy-ink);cursor:pointer;text-align:center}
.cat label svg{width:28px;height:28px;color:var(--navy)}
.cat input:checked+label{border-color:var(--green);background:var(--green-soft);color:var(--green-dark)}
.cat input:focus-visible+label{outline:2px solid var(--green);outline-offset:2px}
.qform .btn{width:100%;justify-content:center;margin-top:6px}
.ok{display:none;text-align:center;padding:30px 10px}
.ok .tick{width:72px;height:72px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin:0 auto 16px}
.ok .tick svg{width:36px;height:36px}
.ok h3{font-size:26px}
.ok p{color:var(--muted);margin-top:8px}

@media(max-width:1080px){
  .pain-grid,.str-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:1fr 1fr}.prod.main{grid-column:1/-1}
  .case{grid-template-columns:1fr 1fr}.case .csr{grid-column:1/-1}
  .refs{grid-template-columns:1fr}
  .lm{grid-template-columns:1fr}.lm-side{padding-bottom:150px}
  .cta .grid,.faq{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding:44px 0 0}
  .hero h1{font-size:32px}
  .hero .sub{font-size:17px}
  .hero .shot{margin:0 -16px}
  .hero .shot img{min-height:0;aspect-ratio:4/3.4;border-radius:0}
  .hero .shot::before{display:none}
  .sol .top{grid-template-columns:1fr;gap:30px}
  .sol .pts{grid-template-columns:1fr;gap:30px;margin-top:40px}
  .proc-top{grid-template-columns:1fr;gap:18px}
  .proc-top p{border-left:0;padding-left:0}
}
@media(max-width:620px){
  .pain-grid,.str-grid,.steps,.prod-grid,.feats{grid-template-columns:1fr}
  .case{grid-template-columns:1fr}.case .cimg{min-height:240px}
  .case .lbl{padding:30px 24px}.case .brand{font-size:38px}
  .csr{padding:16px 22px}
  .ref{grid-template-columns:.9fr 1.1fr}
  .lm-side{padding:30px 22px 120px}.lm-side h2{font-size:25px}
  .qa summary{grid-template-columns:auto 1fr auto;gap:12px;padding:16px;font-size:16.5px}
  .qa .n{width:38px;height:38px;font-size:15px}
  .qa .a{padding:0 18px 18px 18px}
  .cta h2{font-size:32px}
  .cta .ctas .btn,.qform .btn{font-size:15px;padding:15px 14px;width:100%;justify-content:center;gap:8px}
  .qform{padding:26px 20px}
  .qform .row{grid-template-columns:1fr;gap:0}
  .insight{flex-direction:column;align-items:flex-start;padding:22px}
}