:root{--bee:#FFC31F;--bee-d:#E5A800;--ink:#1F150E;--ink2:#4A3F36;--muted:#62574D;--wing:#DCE9F8;--cream:#FFF8E7;--line:#ECE4D6;--bg:#FFFFFF;--r:18px;
--f-head:'Fredoka',system-ui,sans-serif;--f:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:1.0625rem/1.65 var(--f);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:var(--ink)}
h1,h2,h3{font-family:var(--f-head);font-weight:600;line-height:1.15;margin:0 0 .5em;text-wrap:balance}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);text-align:center}h3{font-size:1.2rem}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}.skip:focus{left:8px}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}.narrow{width:min(780px,100% - 40px)}.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.7em 1.25em;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--ink);line-height:1.2;white-space:nowrap;transition:transform .15s,background .15s,color .15s}
.btn:hover{transform:translateY(-1px)}.btn-bee{background:var(--bee);color:var(--ink)}.btn-bee:hover{background:var(--ink);color:var(--bee)}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:var(--bee);color:var(--ink)}.btn-line{background:#fff}.btn-lg{padding:.9em 1.7em;font-size:1.1rem}.btn-block{width:100%}
/* header */
.top{position:sticky;top:0;z-index:20;background:rgb(255 255 255/.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:14px;min-height:70px}.logo{margin-right:auto}.logo img{height:34px;width:auto}
.topnav{display:flex;gap:4px}.topnav a{text-decoration:none;font-weight:600;padding:8px 12px;border-radius:10px;color:var(--ink2)}.topnav a:hover{background:var(--cream);color:var(--ink)}
.lang{font-weight:800;font-size:.85rem;text-decoration:none;border:2px solid var(--line);padding:6px 10px;border-radius:10px}
@media (max-width:980px){.topnav{display:none}}@media (max-width:560px){.hide-sm{display:none}.top-in{gap:8px}.logo img{height:28px}.top .btn-bee{padding:.6em .9em;font-size:.92rem}}
/* hero */
.hero{background:radial-gradient(1200px 520px at 80% 0%,#FFE9A8 0%,rgb(255 233 168/0) 60%),var(--cream);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(48px,8vw,96px) 0 clamp(40px,7vw,88px)}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);letter-spacing:-.01em}.hero h1 span{display:block;color:var(--ink);background:linear-gradient(transparent 62%,var(--bee) 62%,var(--bee) 92%,transparent 92%);width:fit-content}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--ink2);max-width:36em}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:26px 0 22px}.pl{margin:0;color:var(--ink2)}.pl b{color:var(--ink)}
.trust{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:600;font-size:.98rem}.trust li{display:flex;align-items:center;gap:6px}.trust svg{color:#1E7B45}
.hero-art img{width:min(440px,100%);margin-inline:auto;filter:drop-shadow(0 24px 30px rgb(31 21 14/.18));animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:860px){.hero-in{grid-template-columns:1fr}.hero-art{order:-1}.hero-art img{width:min(240px,62vw)}}
/* sections */
.sec{padding:clamp(60px,9vw,110px) 0}.sec.alt{background:var(--cream)}.sub{text-align:center;color:var(--muted);font-size:1.15rem;max-width:40em;margin:-6px auto 36px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}@media (max-width:900px){.feats{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.feats{grid-template-columns:1fr}}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:0 1px 2px rgb(31 21 14/.04),0 10px 30px rgb(31 21 14/.05)}
.fi{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--bee);margin-bottom:14px}.feat p{color:var(--muted);margin:0}
.steps{list-style:none;padding:0;margin:36px 0 34px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
@media (max-width:860px){.steps{grid-template-columns:1fr}}.steps li{background:#fff;border-radius:var(--r);padding:28px;border:1px solid var(--line)}
.sn{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--bee);font:600 1.3rem var(--f-head);margin-bottom:14px}.steps p{color:var(--muted);margin:0}
/* templates */
.tpls{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}@media (max-width:1100px){.tpls{grid-template-columns:repeat(3,1fr)}}@media (max-width:720px){.tpls{grid-template-columns:repeat(2,1fr)}}@media (max-width:420px){.tpls{grid-template-columns:1fr}}
.tplcard{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgb(31 21 14/.07);transition:transform .2s}
.tplcard:hover{transform:translateY(-3px)}.browser{height:20px;background:#EFEAE1;display:flex;align-items:center;padding:0 8px}.dots{display:flex;gap:4px}.dots i{width:7px;height:7px;border-radius:50%;background:#CFC6B8}
.m-site{height:170px;display:flex;flex-direction:column;font-size:10px}.m-nav{display:flex;align-items:center;gap:6px;padding:6px 8px;font-size:9px}.m-nav b{margin-right:auto;font-size:10px}
.m-nav span{width:16px;height:3px;border-radius:2px;background:currentColor;opacity:.4}
.m-hero{flex:1;display:flex;align-items:center;gap:6px;padding:8px 10px;position:relative}.m-hero.c{justify-content:center;text-align:center}.m-hero.c .m-txt{align-items:center}
.m-txt{display:flex;flex-direction:column;gap:4px;max-width:62%}.m-hero.c .m-txt{max-width:88%}
.m-txt strong{font-size:13px;line-height:1.1}.m-txt em{display:block;height:3px;width:70%;opacity:.35;border-radius:2px}.m-txt u{display:block;width:42px;height:10px;margin-top:3px}
.m-media{position:absolute;right:10px;top:12px;bottom:14px;width:30%}
.m-cards{display:flex;gap:6px;padding:8px}.m-cards i{flex:1;height:22px;background:#fff;border-radius:3px}
.tplcard figcaption{padding:10px 12px}.tplcard figcaption b{display:block;font-family:var(--f-head);font-weight:600}.tplcard figcaption span{font-size:.85rem;color:var(--muted)}
.ex-h{text-align:center;margin:56px 0 20px;font-size:1.5rem}.exs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media (max-width:800px){.exs{grid-template-columns:1fr}}
.ex{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px rgb(31 21 14/.08);background:#fff}.ex img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.ex figcaption{padding:10px 14px;font-weight:600}
/* price + support */
.price-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}@media (max-width:860px){.price-grid{grid-template-columns:1fr}}
.price-card{background:#fff;border:2px solid var(--ink);border-radius:24px;padding:clamp(26px,4vw,40px);box-shadow:10px 10px 0 var(--bee)}.price-card h2{text-align:left}
.amount{display:flex;align-items:baseline;gap:6px;margin:6px 0 0}.num{font:600 clamp(3rem,7vw,4.4rem)/1 var(--f-head)}.per{font-size:1.2rem;font-weight:600;color:var(--ink2)}
.tax{color:var(--muted);margin:4px 0 18px;font-size:.95rem}.plist{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.plist li{display:flex;gap:10px;align-items:flex-start}.plist svg{flex:none;color:#1E7B45;margin-top:3px}
.support{background:var(--ink);color:#fff;border-radius:24px;padding:clamp(26px,4vw,40px);display:flex;flex-direction:column;justify-content:center}
.support img{width:72px;margin-bottom:16px}.support p{color:#E9E1D6}.support .mail{display:inline-flex;align-items:center;gap:8px;color:var(--bee);font-weight:700;text-decoration:none;font-size:1.1rem}
/* faq */
.faq{margin-top:28px}.faq details{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:1.1rem;padding:20px 40px 20px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font:600 1.6rem var(--f-head);color:var(--ink2)}.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin:0 0 20px}
.final{background:var(--bee);padding:clamp(56px,8vw,96px) 0}.final h2{margin-bottom:.3em}.final p{font-size:1.2rem;margin:0 0 26px}
.foot{background:var(--ink);color:#D9D0C4;padding:40px 0}.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}.foot a{color:#fff}.foot p{margin:0}.copy{font-size:.9rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.paths{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:960px;margin:0 auto}@media (max-width:760px){.paths{grid-template-columns:1fr}}
.path{background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:4px;box-shadow:6px 6px 0 var(--bee)}
.path h3{font-size:1.4rem;margin:0}.path p{margin:0 0 8px;color:var(--muted)}.path .btn{margin-top:auto;align-self:flex-start;white-space:normal;text-align:center}
.path-addr{font-family:var(--f-head);font-weight:600;font-size:1.1rem;color:var(--ink)!important;background:var(--cream);border-radius:10px;padding:6px 12px;width:fit-content;max-width:100%;overflow-wrap:anywhere}
.path-price b{color:var(--ink);font-size:1.15rem}
.foot .legal{flex-basis:100%;order:3;font-size:.92rem}
/* showcase: real screenshots of the sample sites (2026-10-04) */
a.tplcard{display:block;color:inherit;text-decoration:none}a.tplcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgb(31 21 14/.14)}
a.tplcard:focus-visible{outline:3px solid var(--bee-d,#1F150E);outline-offset:3px}
.browser .url{margin-left:10px;font-size:.7rem;color:#4A3F36;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot{position:relative;background:#EFEAE1}.shot .sd{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shot .sp{position:absolute;right:8px;bottom:-14px;width:24%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:10px;border:3px solid #1F150E;box-shadow:0 10px 24px rgb(0 0 0/.25);background:#fff}
.tplcard .cap{display:block;padding:20px 12px 12px}.tplcard .cap b{display:block;font-family:var(--f-head);font-weight:600;font-size:1.1rem}
.tplcard .cap>span{display:block;font-size:.85rem;color:var(--muted)}.tplcard .cap .go{margin-top:6px;color:var(--ink,#1F150E);font-weight:600;text-decoration:underline;text-underline-offset:3px}