/* ==========================================================================
   FreeLogoGen — Neo-Brutalist Design System
   1. Tokens   2. Base   3. Buttons/Tags   4. Header/Footer
   5. Home     6. Maker   7. Templates   8. Blog/Prose   9. Legal/Contact
   10. Ads     11. Utilities   12. Responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#0E0E0E;
  --ink-soft:#2A2A2A;
  --paper:#F4F0E6;
  --paper-2:#FFFDF7;
  --paper-3:#EDE7D8;
  --yellow:#FFD93D;
  --coral:#FF5F5F;
  --sky:#6EC1E4;
  --lime:#B9F227;
  --violet:#C77DFF;
  --line:var(--ink);
  --bw:3px;
  --shadow:7px 7px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-lg:12px 12px 0 var(--ink);
  --font-head:'Archivo Black','Arial Black','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-body:'Space Grotesk','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',ui-monospace,'Courier New','Noto Sans SC','PingFang SC','Microsoft YaHei',monospace;
  --container:1240px;
  --gap:clamp(16px,2.4vw,28px);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--paper);
  background-image:radial-gradient(rgba(14,14,14,.10) 1px,transparent 1px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.1em}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;line-height:.95;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.5rem,5.6vw,5rem)}
h2{font-size:clamp(1.9rem,3.8vw,3.1rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.05}
h4{font-size:1.05rem;letter-spacing:0;line-height:1.2}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

/* ---------- 2b. Chinese typography (html[lang="zh-CN"]) ----------
   CJK glyphs fill nearly the whole em box, so Latin-tuned rules break:
   line-height .95 makes consecutive lines collide, negative tracking
   squeezes the character spacing, and Archivo Black has no CJK glyphs.
   Headings therefore switch to Noto Sans SC (loaded for the zh UI) with
   real bold weight instead of a synthesized one, and mono labels get a
   comfortable line box. */
html[lang="zh-CN"] body{line-height:1.8}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2{line-height:1.24;letter-spacing:0;text-wrap:balance}
html[lang="zh-CN"] h3{line-height:1.38;letter-spacing:0}
html[lang="zh-CN"] h4{line-height:1.45;letter-spacing:0}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2{
  font-family:'Noto Sans SC','Archivo Black','PingFang SC','Microsoft YaHei',sans-serif;
  font-weight:900;
}
html[lang="zh-CN"] h3,html[lang="zh-CN"] h4{
  font-family:'Noto Sans SC','Archivo Black','PingFang SC','Microsoft YaHei',sans-serif;
  font-weight:700;
}
html[lang="zh-CN"] p{text-wrap:pretty}
html[lang="zh-CN"] .nav-link,html[lang="zh-CN"] .lang-opt{line-height:1.4;letter-spacing:.02em}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--yellow);border:var(--bw) solid var(--ink);padding:10px 16px;z-index:999;font-family:var(--font-mono);font-size:13px}
.skip-link:focus{left:12px;top:12px}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
}
.eyebrow::before{content:"";width:10px;height:10px;background:var(--coral);border:2px solid var(--ink);display:block}
.section-label{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:18px;
}
.section-label span.num{
  display:inline-grid;place-items:center;min-width:34px;height:26px;
  border:2px solid var(--ink);background:var(--paper-2);font-size:11px;
}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:62ch;color:var(--ink-soft)}
.muted{color:#4a4a4a}

/* ---------- 3. Buttons & tags ---------- */
.btn{
  --btn-bg:var(--yellow);
  --btn-fg:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow-sm);
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  cursor:pointer;user-select:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  position:relative;
}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.btn [stroke]{stroke:currentColor}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-primary{--btn-bg:var(--yellow)}
.btn-dark{--btn-bg:var(--ink);--btn-fg:var(--paper-2);box-shadow:4px 4px 0 var(--coral)}
.btn-dark:hover{box-shadow:6px 6px 0 var(--coral)}
.btn-light{--btn-bg:var(--paper-2)}
.btn-coral{--btn-bg:var(--coral)}
.btn-lime{--btn-bg:var(--lime)}
.btn-sm{padding:9px 14px;font-size:11px;box-shadow:3px 3px 0 var(--ink)}
.btn-lg{padding:18px 30px;font-size:14px}
.btn-block{width:100%}
.btn-ghost{background:transparent;box-shadow:none;border-color:var(--ink)}
.btn-ghost:hover{background:var(--paper-2);transform:none;box-shadow:none}
.btn-ghost-dark{background:transparent;color:var(--paper-2);border-color:var(--paper-2);box-shadow:4px 4px 0 var(--yellow)}
.btn-ghost-dark:hover{box-shadow:6px 6px 0 var(--yellow)}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border:2px solid var(--ink);background:var(--paper-2);
}
.tag-yellow{background:var(--yellow)}
.tag-lime{background:var(--lime)}
.tag-coral{background:var(--coral);color:var(--paper-2)}
.tag-sky{background:var(--sky)}
.tag-plain{background:transparent}

/* ---------- 4. Header ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(244,240,230,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:var(--bw) solid var(--ink);
}
.head-inner{
  max-width:var(--container);margin:0 auto;
  padding:14px clamp(18px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand-mark{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  background:var(--yellow);border:var(--bw) solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.brand-mark svg{width:22px;height:22px;fill:var(--ink)}
.brand-word{
  font-family:var(--font-head);font-size:1.32rem;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1;
}
.brand-word span{color:var(--coral)}
.nav{display:flex;align-items:center;gap:6px}
.nav-link{
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:8px 11px;border:2px solid transparent;
}
.nav-link:hover{background:var(--paper-2);border-color:var(--ink)}
.nav-link.is-active{background:var(--ink);color:var(--paper-2)}
.nav-cta{margin-left:10px}

/* Language switcher (segmented EN | 中文 control) */
.lang-switch{
  display:inline-flex;align-items:stretch;
  border:2px solid var(--ink);background:var(--paper-2);
  box-shadow:3px 3px 0 var(--ink);margin-left:10px;
}
.lang-opt{
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:7px 10px;line-height:1;color:var(--ink);text-transform:uppercase;
}
.lang-opt + .lang-opt{border-left:2px solid var(--ink)}
.lang-opt:hover{background:var(--yellow)}
.lang-opt.is-on{background:var(--ink);color:var(--paper-2)}
.lang-opt.is-on:hover{background:var(--ink)}

.burger{display:none;width:44px;height:40px;background:var(--paper-2);border:var(--bw) solid var(--ink);padding:8px;cursor:pointer}
.burger span{display:block;height:3px;background:var(--ink);margin:3px 0;transition:.2s}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;background:var(--ink);color:var(--paper);
  border-bottom:var(--bw) solid var(--ink);
  padding:9px 0;
}
.marquee-track{display:flex;gap:34px;width:max-content;animation:slide 26s linear infinite}
.marquee span{
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:34px;
}
.marquee span::after{content:"✳";color:var(--yellow);font-size:14px}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- Hero ---------- */
.hero{padding:clamp(38px,6vw,78px) 0 clamp(30px,5vw,60px);position:relative}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{margin-bottom:.35em}
.hero h1 .mark{
  position:relative;display:inline-block;z-index:1;white-space:nowrap;
}
.hero h1 .mark::after{
  content:"";position:absolute;left:-4px;right:-4px;top:12%;bottom:6%;
  background:var(--yellow);border:3px solid var(--ink);z-index:-1;
  transform:rotate(-1.2deg);
}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:54ch;margin-bottom:26px;color:var(--ink-soft)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:22px}
.hero-note{display:flex;flex-wrap:wrap;gap:10px 18px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#3c3c3c}
.hero-note li{display:flex;align-items:center;gap:7px;list-style:none}
.hero-note li::before{content:"✓";font-weight:700;color:var(--ink);background:var(--lime);border:2px solid var(--ink);width:18px;height:18px;display:grid;place-items:center;font-size:10px}
.hero-note ul{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0;padding:0}

.hero-stage{
  position:relative;
  background:var(--paper-2);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow-lg);
  padding:18px;
}
.hero-stage-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:16px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
.dots{display:flex;gap:5px}
.dots i{width:9px;height:9px;border:2px solid var(--ink);display:block;border-radius:50%}
.dots i:nth-child(1){background:var(--coral)}
.dots i:nth-child(2){background:var(--yellow)}
.dots i:nth-child(3){background:var(--lime)}
.hero-logos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-logo{
  border:2px solid var(--ink);padding:10px;
  background:var(--paper);
  aspect-ratio:1/1;display:grid;place-items:center;
  transition:transform .18s ease,box-shadow .18s ease;
}
.hero-logo:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.hero-logo svg{width:100%;height:100%}
.hero-stage-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:16px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
}
.sticker{
  position:absolute;top:-18px;right:-14px;
  background:var(--coral);color:var(--paper-2);
  border:var(--bw) solid var(--ink);
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  padding:7px 12px;transform:rotate(6deg);
  box-shadow:3px 3px 0 var(--ink);text-transform:uppercase;
  z-index:2;
}

/* ---------- Section shell ---------- */
.section{padding:clamp(44px,7vw,88px) 0}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
  margin-bottom:clamp(26px,4vw,44px);flex-wrap:wrap;
}
.section-head h2{margin:0;max-width:20ch}
.section-head .lead{margin:0;max-width:46ch}
.section-alt{background:var(--paper-2);border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink)}
.section-dark{background:var(--ink);color:var(--paper-2);border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink)}
.section-dark .lead{color:#c9c4b8}
.section-dark .section-label span.num{background:var(--ink);color:var(--paper-2);border-color:var(--paper-2)}

/* ---------- Cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.card{
  background:var(--paper-2);border:var(--bw) solid var(--ink);
  padding:clamp(20px,2.6vw,30px);
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease;
  position:relative;
}
.card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.card-num{
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  display:inline-block;padding:3px 8px;border:2px solid var(--ink);margin-bottom:16px;background:var(--paper);
}
.card h3{margin-bottom:.5em}
.card p{margin:0;color:var(--ink-soft);font-size:15.5px}
.card-ico{width:52px;height:52px;border:var(--bw) solid var(--ink);background:var(--yellow);display:grid;place-items:center;margin-bottom:18px;box-shadow:3px 3px 0 var(--ink)}
.card-ico svg{width:28px;height:28px;fill:var(--ink)}
.card-ico.c-lime{background:var(--lime)}
.card-ico.c-sky{background:var(--sky)}
.card-ico.c-violet{background:var(--violet)}
.card-ico.c-coral{background:var(--coral)}

/* ---------- Feature strip / stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:var(--bw) solid var(--ink);background:var(--paper-2)}
.stat{padding:clamp(18px,2.4vw,28px);border-right:var(--bw) solid var(--ink)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--font-head);font-size:clamp(1.7rem,3vw,2.6rem);line-height:1;margin-bottom:6px}
.stat span{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);counter-reset:step}
.step{background:var(--paper);border:var(--bw) solid var(--ink);padding:clamp(20px,2.6vw,30px);position:relative}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:-18px;left:20px;
  font-family:var(--font-head);font-size:2.1rem;
  background:var(--yellow);border:var(--bw) solid var(--ink);
  padding:2px 10px;line-height:1.1;
}
.step h3{margin-top:16px;margin-bottom:.4em}
.step p{margin:0;font-size:15.5px;color:var(--ink-soft)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--yellow);border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);padding:clamp(40px,6vw,72px) 0;text-align:center}
.cta-band h2{margin:0 auto .3em;max-width:22ch}
.cta-band p{max-width:56ch;margin:0 auto 26px;font-size:1.08rem}

/* ---------- FAQ ---------- */
.faq{border-top:var(--bw) solid var(--ink)}
.faq details{border-bottom:var(--bw) solid var(--ink);background:var(--paper-2)}
.faq details[open]{background:var(--paper-2)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px clamp(16px,2.4vw,26px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--head);font-family:var(--font-body);font-weight:700;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--font-head);font-size:1.5rem;line-height:1;
  border:2px solid var(--ink);width:30px;height:30px;display:grid;place-items:center;flex:none;background:var(--yellow);
}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 clamp(16px,2.4vw,26px) 22px;max-width:80ch;color:var(--ink-soft)}
.faq .faq-a p:last-child{margin-bottom:0}

/* ---------- 5. Maker ---------- */
.maker-page{background:var(--paper)}
.maker-head{padding:26px 0 18px;border-bottom:var(--bw) solid var(--ink);background:var(--paper-2)}
.maker-head h1{font-size:clamp(1.7rem,3.2vw,2.6rem);margin:0}
.maker-head-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.maker-head p{margin:6px 0 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#4a4a4a}

.maker-shell{
  display:grid;grid-template-columns:392px 1fr;
  gap:clamp(16px,2.4vw,28px);
  padding:clamp(18px,2.6vw,30px) 0 clamp(40px,6vw,70px);
  align-items:start;
}
.panel{
  background:var(--paper-2);border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow-sm);
  margin-bottom:16px;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:2px solid var(--ink);background:var(--paper);
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.panel-body{padding:16px}
.panel-body.tight{padding:12px}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field > label,.f-label{
  display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px;
}
.field .row{display:flex;gap:8px;align-items:center}
input[type=text],input[type=email],select,textarea{
  width:100%;font-family:var(--font-body);font-size:14.5px;color:var(--ink);
  background:#fff;border:2px solid var(--ink);padding:10px 11px;border-radius:0;
  -webkit-appearance:none;appearance:none;
}
input[type=text]:focus,input[type=email]:focus,select:focus,textarea:focus{outline:3px solid var(--yellow);outline-offset:0;border-color:var(--ink)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px;cursor:pointer}
textarea{min-height:120px;resize:vertical}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--paper-3);
  border:2px solid var(--ink);cursor:pointer;margin:6px 0 0;
}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--yellow);border:2px solid var(--ink);cursor:grab}
input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--yellow);border:2px solid var(--ink);border-radius:0}
.range-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.range-row output{font-family:var(--font-mono);font-size:11px;border:2px solid var(--ink);padding:1px 6px;background:var(--paper)}

.seg{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:2px;background:var(--ink);border:2px solid var(--ink)}
.seg button{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper-2);border:0;padding:9px 4px;cursor:pointer;color:var(--ink);
  transition:background .12s;display:flex;align-items:center;justify-content:center;gap:5px;
}
.seg button:hover{background:var(--paper-3)}
.seg button.is-on{background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.seg button svg{width:14px;height:14px;fill:currentColor}

.preset-strip{display:flex;flex-wrap:wrap;gap:6px}
.preset-chip{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 9px;border:2px solid var(--ink);background:#fff;cursor:pointer;
}
.preset-chip:hover{background:var(--yellow);box-shadow:2px 2px 0 var(--ink);transform:translate(-1px,-1px)}

.icon-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  max-height:196px;overflow-y:auto;padding-right:4px;
}
.icon-grid::-webkit-scrollbar{width:10px}
.icon-grid::-webkit-scrollbar-track{background:var(--paper-3);border-left:2px solid var(--ink)}
.icon-grid::-webkit-scrollbar-thumb{background:var(--ink)}
.icon-btn{
  aspect-ratio:1/1;background:#fff;border:2px solid var(--ink);cursor:pointer;
  display:grid;place-items:center;padding:6px;transition:background .1s,transform .1s;
}
.icon-btn svg{width:100%;height:100%;fill:var(--ink)}
.icon-btn:hover{background:var(--paper-3);transform:translate(-1px,-1px)}
.icon-btn.is-on{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--ink)}

.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}
.swatch{
  aspect-ratio:1/1;border:2px solid var(--ink);cursor:pointer;position:relative;
  transition:transform .1s;
}
.swatch:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink)}
.swatch.is-on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000}
.color-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.color-row label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;flex:1}
input[type=color]{
  -webkit-appearance:none;appearance:none;width:44px;height:32px;border:2px solid var(--ink);
  background:none;cursor:pointer;padding:0;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0}

.stage-col{position:sticky;top:96px}
.stage{
  border:var(--bw) solid var(--ink);background:var(--paper-2);
  box-shadow:var(--shadow);position:relative;
}
.stage-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-bottom:2px solid var(--ink);background:var(--paper);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
.stage-canvas-wrap{
  padding:clamp(14px,3vw,34px);
  background-image:
    linear-gradient(45deg,#e2ddce 25%,transparent 25%),
    linear-gradient(-45deg,#e2ddce 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e2ddce 75%),
    linear-gradient(-45deg,transparent 75%,#e2ddce 75%);
  background-size:18px 18px;
  background-position:0 0,0 9px,9px -9px,-9px 0;
  display:grid;place-items:center;
}
#stage-svg{width:100%;max-width:min(460px,100%);height:auto;box-shadow:0 0 0 2px rgba(14,14,14,.08);background:transparent}
#stage-svg.has-bg{box-shadow:0 0 0 2px rgba(14,14,14,.08)}
.stage-tools{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 14px;border-top:2px solid var(--ink);background:var(--paper);
}
.stage-tools .grp{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mini-sizes{display:flex;gap:6px;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.size-chip{border:2px solid var(--ink);padding:5px 8px;background:#fff;cursor:pointer;font-family:var(--font-mono);font-size:10px;font-weight:700}
.size-chip:hover{background:var(--yellow)}
.export-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.export-bar .btn{width:100%}
.hint{
  display:flex;gap:8px;align-items:flex-start;
  font-size:12.5px;line-height:1.5;color:#4a4a4a;
  border-left:3px solid var(--ink);padding-left:10px;margin-top:12px;
}
.hint-inline{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}

/* toast */
.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:var(--ink);color:var(--paper-2);border:2px solid var(--ink);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 16px;box-shadow:4px 4px 0 var(--coral);
  animation:toastIn .18s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 6. Templates page ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.tpl-card{
  border:var(--bw) solid var(--ink);background:var(--paper-2);box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease;overflow:hidden;
}
.tpl-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.tpl-view{padding:20px;background:var(--paper);border-bottom:2px solid var(--ink);aspect-ratio:1/1;display:grid;place-items:center}
.tpl-view svg{width:100%;height:100%}
.tpl-meta{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tpl-meta strong{font-family:var(--font-head);font-size:.95rem;letter-spacing:0;text-transform:uppercase}
.tpl-meta small{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#5a5a5a}
.tpl-meta a{font-family:var(--font-mono);font-size:10px;border:2px solid var(--ink);padding:5px 8px;text-transform:uppercase;letter-spacing:.08em;background:var(--yellow);flex:none}
.tpl-meta a:hover{background:var(--lime)}

/* filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filter-bar button{
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 13px;border:2px solid var(--ink);background:var(--paper-2);cursor:pointer;
}
.filter-bar button.is-on{background:var(--ink);color:var(--paper-2)}

/* ---------- 7. Blog / prose ---------- */
.post-wrap{padding:clamp(34px,5vw,60px) 0 clamp(50px,7vw,90px)}
.post-head{max-width:820px;margin:0 auto clamp(24px,4vw,38px)}
.post-head h1{font-size:clamp(2rem,4.4vw,3.5rem);margin-bottom:.4em}
.post-meta{display:flex;flex-wrap:wrap;gap:10px 18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;align-items:center;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:10px 0}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(26px,4vw,54px);max-width:1120px;margin:0 auto}
.prose{font-size:17.5px;line-height:1.75;max-width:72ch}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:1.9em 0 .6em;padding-top:.2em}
.prose h3{font-size:1.24rem;margin:1.6em 0 .5em;font-family:var(--font-body);font-weight:700;letter-spacing:0}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--coral);font-weight:700}
.prose a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--coral)}
.prose a:hover{background:var(--yellow)}
.prose strong{font-weight:700}
.prose blockquote{
  margin:1.6em 0;padding:18px 22px;background:var(--paper-2);
  border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);
  font-size:1.05rem;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose figure{margin:1.8em 0}
.prose figcaption{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:8px;color:#5a5a5a}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px;background:var(--paper-2);border:var(--bw) solid var(--ink)}
.prose th,.prose td{padding:10px 12px;border:2px solid var(--ink);text-align:left}
.prose th{background:var(--yellow);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.prose code{font-family:var(--font-mono);font-size:.88em;background:var(--paper-3);border:1px solid var(--ink);padding:1px 5px}
.prose hr{border:0;border-top:var(--bw) solid var(--ink);margin:2em 0}
.callout{
  border:var(--bw) solid var(--ink);background:var(--lime);
  padding:18px 20px;margin:1.8em 0;box-shadow:var(--shadow-sm);
}
.callout p:last-child{margin-bottom:0}
.callout strong{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}

.side-card{
  border:var(--bw) solid var(--ink);background:var(--paper-2);padding:18px;
  box-shadow:var(--shadow-sm);margin-bottom:18px;
}
.side-card h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.side-card ul{list-style:none;margin:0;padding:0}
.side-card li{margin-bottom:9px;font-size:14.5px;line-height:1.4}
.side-card li a:hover{background:var(--yellow)}
.post-side{position:sticky;top:96px}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.post-card{
  border:var(--bw) solid var(--ink);background:var(--paper-2);padding:20px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease;
}
.post-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.post-card .tag{align-self:flex-start;margin-bottom:14px}
.post-card h3{font-size:1.12rem;font-family:var(--font-body);font-weight:700;line-height:1.25;letter-spacing:0;margin-bottom:.5em}
.post-card p{font-size:14.5px;color:var(--ink-soft);margin:0 0 16px}
.post-card .more{margin-top:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.post-card .more::after{content:" →"}
.post-card .pmeta{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5a5a5a;margin-top:12px;padding-top:10px;border-top:1px solid rgba(14,14,14,.2)}

/* ---------- 8. Legal / page header ---------- */
.page-head{padding:clamp(34px,5vw,62px) 0 clamp(22px,3vw,32px);border-bottom:var(--bw) solid var(--ink);background:var(--paper-2)}
.page-head h1{font-size:clamp(2rem,4.4vw,3.6rem);margin-bottom:.25em}
.page-head p{max-width:62ch;margin:0;color:var(--ink-soft)}
.page-body{padding:clamp(30px,5vw,64px) 0 clamp(50px,7vw,90px)}
.legal{max-width:78ch}
.legal h2{font-size:1.35rem;font-family:var(--font-body);font-weight:700;letter-spacing:0;margin:2em 0 .6em;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.legal h2:first-child{margin-top:0}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:.4em}
.legal table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:15px}
.legal th,.legal td{border:2px solid var(--ink);padding:9px 11px;text-align:left}
.legal th{background:var(--paper-3);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,4vw,48px);align-items:start}
.form-card{border:var(--bw) solid var(--ink);background:var(--paper-2);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow)}
.form-card .field{margin-bottom:18px}
.form-note{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#5a5a5a}
.alert{border:var(--bw) solid var(--ink);padding:14px 16px;margin-bottom:20px;font-size:14.5px}
.alert-ok{background:var(--lime)}
.alert-err{background:var(--coral);color:#fff}

/* ---------- 9. Ads ---------- */
.ad-slot{
  margin:clamp(22px,3vw,34px) 0;padding:10px;
  border:2px dashed rgba(14,14,14,.35);background:rgba(255,253,247,.5);
  text-align:center;min-height:100px;
  display:flex;flex-direction:column;justify-content:center;
}
.ad-label{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#6a6a6a;margin-bottom:6px}
.ad-ph{height:110px;display:grid;place-items:center;background:var(--paper-3);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em}
.ad-slot ins{display:block}
.side-ad{margin:0 0 18px}

/* ---------- 10. Footer ---------- */
.site-foot{background:var(--ink);color:var(--paper);border-top:var(--bw) solid var(--ink);overflow:hidden}
.foot-top{padding:clamp(38px,6vw,64px) 0 clamp(22px,3vw,30px)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(22px,4vw,46px)}
.brand-foot .brand-word{color:var(--paper-2)}
.brand-foot .brand-mark{box-shadow:3px 3px 0 var(--paper-2)}
.foot-desc{color:#b3aea1;font-size:14.5px;max-width:34ch;margin:16px 0 20px}
.foot-col h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:8px}
.foot-col a{font-size:14.5px;color:#ded9cc}
.foot-col a:hover{color:var(--ink);background:var(--yellow);padding:0 3px}
.foot-word{
  font-family:var(--font-head);font-size:clamp(2.4rem,12vw,11rem);line-height:.8;
  text-align:center;letter-spacing:-.03em;padding:0 10px;
  color:transparent;-webkit-text-stroke:1.5px rgba(244,240,230,.22);
  user-select:none;white-space:nowrap;overflow:hidden;
}
.foot-bottom{border-top:1px solid rgba(244,240,230,.18);padding:16px 0;margin-top:10px}
.foot-bottom-inner{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9a958a}
.foot-bottom-inner p{margin:0}
.foot-legal{display:flex;gap:16px}
.foot-legal a:hover{color:var(--yellow)}

/* ---------- 11. Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-2{margin-top:2rem}
.center{text-align:center}
.stack-sm > * + *{margin-top:10px}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- 12. Responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-stage{order:-1;max-width:520px}
  .maker-shell{grid-template-columns:340px 1fr}
  .tpl-grid{grid-template-columns:repeat(3,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .post-layout{grid-template-columns:1fr}
  .post-side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:var(--bw) solid var(--ink);
    padding:10px 18px 18px;display:none;
  }
  .nav.is-open{display:flex}
  .nav-link{padding:14px 10px;border-bottom:2px solid var(--ink);font-size:13px}
  .nav-cta{margin:14px 0 0;justify-content:center}
  .lang-switch{margin:14px 0 0;align-self:flex-start}
  .lang-opt{padding:10px 14px;font-size:12px}
  .burger{display:block}
  .maker-shell{grid-template-columns:1fr}
  .stage-col{position:static;order:-1}
  .export-bar{grid-template-columns:1fr 1fr}
  .icon-grid{grid-template-columns:repeat(8,1fr);max-height:150px}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:var(--bw) solid var(--ink)}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero h1{font-size:clamp(2.1rem,9vw,2.9rem)}
  .hero h1 .mark::after{top:8%;bottom:4%}
  .grid-2,.grid-4{grid-template-columns:1fr}
  .tpl-grid{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .post-side{grid-template-columns:1fr}
  .icon-grid{grid-template-columns:repeat(6,1fr)}
  .swatches{grid-template-columns:repeat(6,1fr)}
  .foot-bottom-inner{justify-content:flex-start}
  .sticker{right:6px;top:-14px;font-size:10px}
  .brand-word{font-size:1.12rem}
  .seg button{font-size:9px}
  .ad-slot{margin:18px 0}
}