:root{--ink:#17161c;--cream:#f6f3eb;--purple:#6446e8;--coral:#ff725e;--mint:#b9f4d2;--yellow:#ffe66b;--lilac:#d9ccff;--border:#dad6cd}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:'DM Sans','Noto Sans Thai',sans-serif}button,input,select{font:inherit}button,a{color:inherit}.shell{max-width:1240px;margin:auto;padding-left:28px;padding-right:28px}.nav{height:92px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:700;text-decoration:none}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--purple);color:white;font-weight:700;transform:rotate(-8deg)}.nav-links{display:flex;gap:36px}.nav-links a,.footer a{text-decoration:none;font-weight:600;font-size:14px}.nav-actions{display:flex;gap:10px}.btn{border:0;border-radius:12px;padding:12px 18px;font-weight:650;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-ghost{background:transparent}.btn-dark{background:var(--ink);color:white}.btn-primary{background:var(--purple);color:white;box-shadow:0 7px 0 #33208e}.btn-large{padding:17px 25px;border-radius:14px}.btn-outline{background:transparent;border:1.5px solid var(--ink)}.btn-light{background:white;color:var(--ink)}.menu-btn{display:none;border:0;background:none;font-size:25px}.hero{min-height:680px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:60px;padding-top:35px;padding-bottom:75px}.eyebrow,.kicker{font-size:12px;text-transform:uppercase;letter-spacing:2px;font-weight:700}.eyebrow{display:inline-flex;gap:9px;background:white;border:1px solid var(--border);border-radius:99px;padding:9px 14px}.eyebrow span{color:var(--purple)}h1{font-size:clamp(58px,7vw,100px);line-height:.97;letter-spacing:-6px;margin:25px 0 30px}h1 em{font-style:normal;color:var(--purple)}.hero-copy>p{font-size:20px;line-height:1.7;max-width:570px;color:#5c5962}.hero-actions{display:flex;align-items:center;gap:28px;margin:34px 0}.text-link{font-weight:700;text-underline-offset:5px}.trusted{display:flex;align-items:center;gap:16px;margin-top:48px}.trusted p{font-size:13px;line-height:1.5;color:#666}.avatars{display:flex}.avatars span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--yellow);border:3px solid var(--cream);margin-left:-8px;font-size:11px;font-weight:700}.avatars span:first-child{margin:0;background:var(--lilac)}.avatars span:nth-child(2){background:var(--mint)}.avatars span:last-child{background:var(--ink);color:#fff}.hero-visual{height:585px;position:relative;display:grid;place-items:center;background:var(--yellow);border:2px solid var(--ink);border-radius:50% 50% 45% 55%/45% 53% 47% 55%;overflow:hidden}.orbit{position:absolute;border:1.5px solid rgba(23,22,28,.18);border-radius:50%;width:520px;height:350px;transform:rotate(-28deg)}.orbit-two{transform:rotate(31deg);width:610px;height:310px}.phone{position:relative;z-index:2;width:270px;height:530px;background:#fffaf2;border:8px solid var(--ink);border-radius:40px;padding:15px 20px;text-align:center;box-shadow:18px 25px 0 rgba(23,22,28,.15);transform:rotate(3deg)}.phone-top{display:flex;justify-content:space-between;font-size:9px;font-weight:700}.profile-photo{width:68px;height:68px;margin:17px auto 8px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--coral),var(--lilac));font-size:21px;font-weight:700;border:3px solid white;outline:1px solid var(--ink)}.phone h3{margin:5px 0;font-size:18px}.handle,.bio{font-size:10px!important;margin:2px!important;color:#777!important}.bio{margin-top:8px!important}.socials{display:flex;justify-content:center;gap:12px;margin:13px 0}.demo-link{display:flex;justify-content:space-between;padding:12px 13px;margin:9px 0;background:white;border:1.5px solid var(--ink);border-radius:9px;font-size:10px;font-weight:700;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}.demo-link.coral{background:var(--coral);color:white}.made-with{display:block;margin-top:18px}.float-card{position:absolute;z-index:3;background:white;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:14px}.card-clicks{left:5px;top:150px;display:flex;align-items:center;gap:10px;padding:13px}.card-clicks b,.card-clicks small{display:block}.card-clicks small{font-size:9px;color:#777}.mini-icon{display:grid;place-items:center;width:32px;height:32px;background:var(--mint);border-radius:9px}.growth{font-size:10px;color:#159457}.card-share{right:10px;bottom:130px;padding:12px 15px;font-size:12px;display:flex;gap:20px}.sticker{position:absolute;right:42px;top:40px;text-align:center;transform:rotate(8deg);font-size:40px}.sticker small{font-size:9px;line-height:1.2;display:block;text-transform:uppercase;font-weight:bold}.ticker{overflow:hidden;background:var(--ink);color:white;padding:17px 0;font-size:15px;letter-spacing:1px;white-space:nowrap}.ticker div{animation:ticker 18s linear infinite}.ticker span{margin-left:30px}@keyframes ticker{to{transform:translateX(-50%)}}.section{padding-top:125px;padding-bottom:125px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:55px}.section-head h2{font-size:58px;line-height:1.04;letter-spacing:-3px;margin:15px 0 0}.section-head>p{max-width:420px;color:#68656e;line-height:1.7}.kicker{color:var(--purple)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{min-height:380px;padding:28px;border:1.5px solid var(--ink);border-radius:22px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.feature-card.yellow{background:var(--yellow)}.feature-card.mint{background:var(--mint)}.feature-card.lilac{background:var(--lilac)}.feature-no{position:absolute;top:25px;right:25px;font-size:12px}.feature-icon{position:absolute;top:70px;left:50%;transform:translateX(-50%);font-size:92px}.feature-card h3{font-size:24px;margin:0 0 10px}.feature-card p{font-size:14px;line-height:1.6;margin:0}.chart{height:120px;position:absolute;top:72px;left:50px;right:50px;display:flex;align-items:end;gap:11px;border-bottom:2px solid var(--ink)}.chart i{flex:1;background:var(--purple);border-radius:5px 5px 0 0}.templates{background:white}.template-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.template-card{height:430px;border:2px solid var(--ink);border-radius:25px;padding:38px;text-align:center;display:flex;flex-direction:column;align-items:center}.template-card.peach{background:#ffc9ad}.template-card.dark{background:#202024;color:white}.template-card.blue{background:#aec7ff}.tiny-avatar{width:95px;height:95px;border-radius:50%;display:grid;place-items:center;background:#ff7d60;margin:10px 0 20px;font-size:32px}.tiny-avatar.lime{background:#c9ff48;color:#111}.tiny-avatar.white{background:white}.template-card b{font-size:28px}.template-card p{font-size:12px;margin:6px 0 25px}.template-card>span{width:100%;padding:14px;margin:5px;border:1.5px solid currentColor;border-radius:10px;text-align:left;font-size:12px;font-weight:700}.cta-section{max-width:1184px;margin:100px auto;background:var(--purple);color:white;border-radius:30px;min-height:360px;display:flex;align-items:center;justify-content:space-between;padding-top:65px;padding-bottom:65px}.cta-section h2{font-size:60px;line-height:1.05;letter-spacing:-3px;margin:17px 0}.cta-section p{line-height:1.7;margin-bottom:28px}.kicker.light{color:#d9d0ff}.footer{border-top:1px solid var(--border);min-height:160px;display:flex;align-items:center;justify-content:space-between}.footer>p{color:#777}.footer>div{display:flex;gap:20px;color:#777;font-size:12px}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%,-90px);z-index:99;background:var(--ink);color:white;padding:13px 20px;border-radius:10px;transition:.3s}.toast.show{transform:translate(-50%,0)}dialog{border:0;border-radius:24px;padding:40px;width:min(450px,calc(100% - 30px));box-shadow:0 30px 100px #211b4c55}dialog::backdrop{background:#17161c99;backdrop-filter:blur(4px)}dialog h2{font-size:31px;margin:15px 0 5px;letter-spacing:-1px}dialog>p{color:#777;margin-bottom:25px}.modal-close{position:absolute;right:18px;top:15px;border:0;background:none;font-size:27px;cursor:pointer}.modal-brand{display:flex}.modal-brand .brand-mark{width:44px;height:44px}.modal-switch{text-align:center;font-size:13px}.modal-switch button{border:0;background:none;color:var(--purple);font-weight:700;cursor:pointer}form label{display:block;font-size:13px;font-weight:650;margin:16px 0}form input{display:block;width:100%;border:1.5px solid #d7d2ca;border-radius:11px;padding:14px;margin-top:7px;outline:0}form input:focus{border-color:var(--purple);box-shadow:0 0 0 3px #6446e820}.btn-full{width:100%;margin-top:12px}.hidden{display:none!important}
/* dashboard */.dashboard{min-height:100vh;background:#f6f6f8;display:grid;grid-template-columns:230px 1fr}.sidebar{background:#16151b;color:white;padding:28px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.sidebar .brand{padding:0 10px 28px}.sidebar nav{display:flex;flex-direction:column;gap:7px}.side-link{color:#aaa8b2;background:none;border:0;text-align:left;padding:12px 13px;border-radius:9px;cursor:pointer;display:flex;gap:13px;font-weight:600}.side-link.active,.side-link:hover{background:#2b2933;color:white}.side-bottom{margin-top:auto;display:flex;flex-direction:column}.dash-main{min-width:0}.dash-header{height:76px;background:white;border-bottom:1px solid #e6e3e9;padding:0 35px;display:flex;align-items:center;justify-content:space-between;font-size:13px}.dash-header>div:first-child span{color:#999}.user-chip{display:flex;align-items:center;gap:10px}.user-chip small,.user-chip b{display:block}.user-chip small{font-size:10px;color:#999}.avatar-sm{width:35px;height:35px;border-radius:10px;background:var(--yellow);display:grid;place-items:center;font-weight:700}.dash-content{padding:38px;max-width:1450px}.dash-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.dash-title h2{font-size:34px;margin:5px 0}.dash-title>div>p:last-child{color:#777;margin:0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stats-grid article,.panel{background:white;border:1px solid #e7e4eb;border-radius:15px;padding:22px}.stats-grid span,.stats-grid small{display:block;color:#8b8893;font-size:11px}.stats-grid b{display:block;font-size:30px;margin:13px 0 10px}.stats-grid .up{color:#129269}.dash-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:15px;margin-top:15px}.panel-head{display:flex;align-items:center;justify-content:space-between}.panel h3{margin:0 0 6px}.panel-head p{font-size:11px;color:#92909a;margin:0}.panel select{border:1px solid #ddd;border-radius:7px;padding:7px;background:white;font-size:11px}.line-chart{position:relative;height:260px;margin:30px 0 0;padding:0 0 28px 35px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 54px,#eee 55px)}.line-chart svg{width:100%;height:100%;overflow:visible}.y-labels{position:absolute;left:0;top:-5px;bottom:27px;display:flex;flex-direction:column;justify-content:space-between;font-size:9px;color:#aaa}.x-labels{position:absolute;left:35px;right:0;bottom:0;display:flex;justify-content:space-between;font-size:9px;color:#aaa}.dots{border:0;background:none}.link-list{margin-top:20px}.link-item{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #eee}.link-icon{width:38px;height:38px;border-radius:9px;background:#eee9ff;display:grid;place-items:center}.link-item b,.link-item small{display:block}.link-item b{font-size:12px}.link-item small{color:#999;font-size:9px;margin-top:4px}.click-num{text-align:right}.click-num b{font-size:14px}.add-link{width:100%;border:1px dashed #bbb;background:#fafafa;border-radius:9px;padding:11px;margin-top:13px;color:var(--purple);font-weight:700;cursor:pointer}
@media(max-width:900px){.nav-links{display:none}.hero{grid-template-columns:1fr;padding-top:60px}.hero-copy{text-align:center}.hero-copy>p{margin:auto}.hero-actions,.trusted{justify-content:center}.hero-visual{max-width:600px;width:100%;margin:auto}.feature-grid,.template-row{grid-template-columns:1fr}.section-head{align-items:flex-start}.stats-grid{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:1fr}.sidebar{width:75px}.sidebar .brand span:last-child,.side-link span{display:none}.dashboard{grid-template-columns:75px 1fr}}@media(max-width:620px){.shell{padding-left:18px;padding-right:18px}.nav{height:74px}.nav-actions{display:none}.menu-btn{display:block}h1{font-size:58px;letter-spacing:-4px}.hero{gap:30px}.hero-visual{height:510px}.phone{transform:scale(.86) rotate(3deg)}.float-card{display:none}.section{padding-top:80px;padding-bottom:80px}.section-head{display:block}.section-head h2{font-size:43px}.cta-section{margin:40px 12px;display:block}.cta-section h2{font-size:43px}.footer{padding-top:35px;padding-bottom:35px;display:block}.footer>div{margin-top:25px;flex-wrap:wrap}.dash-header{padding:0 15px}.dash-content{padding:22px 14px}.dash-title{align-items:flex-start}.dash-title .btn{display:none}.stats-grid{grid-template-columns:1fr 1fr}.stats-grid article{padding:15px}.stats-grid b{font-size:23px}.dashboard{grid-template-columns:0 1fr}.sidebar{display:none}}

.knowledge-section{background:#f5f8fc;border-top:1px solid #dfe5ee;border-bottom:1px solid #dfe5ee}.knowledge-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end;margin-bottom:54px}.knowledge-hero h2{font-size:clamp(48px,6vw,76px);line-height:1;letter-spacing:-4px;margin:16px 0 0}.knowledge-hero>p{font-size:18px;line-height:1.75;color:#5d626c;max-width:520px;margin:0 0 7px}.knowledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.knowledge-card{min-height:330px;border:1.5px solid var(--ink);border-radius:22px;padding:28px;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.knowledge-card.yellow{background:var(--yellow)}.knowledge-card.mint{background:var(--mint)}.knowledge-card.lilac{background:var(--lilac)}.knowledge-no{position:absolute;top:24px;right:25px;font-size:12px;font-weight:700}.knowledge-icon{position:absolute;top:45px;left:28px;font-size:68px;font-weight:700}.knowledge-card h3{font-size:23px;line-height:1.2;margin:0 0 12px}.knowledge-card p{font-size:14px;line-height:1.7;margin:0;color:#38363e}.knowledge-summary{margin-top:22px;background:var(--ink);color:white;border-radius:22px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:30px}.knowledge-summary span{font-size:11px;color:var(--yellow);font-weight:700;text-transform:uppercase;letter-spacing:1.5px}.knowledge-summary h3{font-size:26px;line-height:1.35;margin:8px 0 0}.knowledge-actions{display:flex;gap:14px;align-items:center;flex:none}.knowledge-actions .btn-primary{text-decoration:none}
@media(max-width:900px){.knowledge-hero{grid-template-columns:1fr;gap:24px}.knowledge-grid{grid-template-columns:1fr}.knowledge-card{min-height:285px}.knowledge-summary{align-items:flex-start;flex-direction:column}.knowledge-actions{width:100%;flex-wrap:wrap}}
@media(max-width:620px){.knowledge-hero h2{font-size:43px;letter-spacing:-2.5px}.knowledge-hero>p{font-size:16px}.knowledge-card{min-height:300px;padding:24px}.knowledge-summary{padding:28px 24px}.knowledge-summary h3{font-size:22px}.knowledge-actions{display:grid;grid-template-columns:1fr}.knowledge-actions .btn{width:100%;text-align:center}}

.seo-info-section{background:var(--cream)}.seo-step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.seo-step-grid article{background:white;border:1.5px solid var(--ink);border-radius:20px;padding:28px;box-shadow:5px 5px 0 var(--ink)}.seo-step-grid article>span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--yellow);font-size:12px;font-weight:700}.seo-step-grid h3{font-size:23px;margin:28px 0 10px}.seo-step-grid p{color:#5f5c65;line-height:1.75;margin:0}.seo-faq-section{background:white}.faq-list{max-width:900px;margin:0 auto}.faq-list details{border-bottom:1px solid var(--border);padding:22px 0}.faq-list details:first-child{border-top:1px solid var(--border)}.faq-list summary{font-size:19px;font-weight:700;cursor:pointer;list-style-position:outside}.faq-list p{color:#5f5c65;line-height:1.8;margin:14px 0 0}.footer>div{align-items:center;flex-wrap:wrap}
@media(max-width:900px){.seo-step-grid{grid-template-columns:1fr}}
@media(max-width:620px){.seo-step-grid article{padding:23px}.seo-step-grid h3{font-size:21px}.faq-list summary{font-size:17px}}