:root{--ink:#241F4A;--mute:#6A6590;--lilac:#8B7CFF;--lilac-d:#6A5BE0;--rose:#FF8FB8;--peach:#FFB59A;--mint:#8FE3CF;--cloud:#F6F3FF;--line:#E7E2FA;--grad:linear-gradient(135deg,#8B7CFF 0%,#C27BFF 50%,#FF8FB8 100%);--shadow:0 18px 40px -18px rgba(106,91,224,.35);--f-head:"Bricolage Grotesque",system-ui,sans-serif;--f-body:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:400 17px/1.65 var(--f-body);color:var(--ink);background:#FDFBFF;position:relative;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(600px 400px at 8% 4%,#E6DEFF 0,transparent 70%),radial-gradient(520px 380px at 96% 12%,#FFE0EC 0,transparent 70%),radial-gradient(600px 420px at 70% 100%,#D8F7EE 0,transparent 70%)}
img,svg,canvas{max-width:100%;height:auto}a{color:var(--lilac-d)}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem);font-weight:800}h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700}h3{font-size:1.3rem;font-weight:700}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}.narrow{width:min(780px,100% - 40px)}.center{text-align:center}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.skip:focus{position:fixed;top:8px;left:8px;background:#fff;padding:8px 14px;border-radius:10px;z-index:99}
:focus-visible{outline:3px solid var(--lilac);outline-offset:3px;border-radius:8px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.7em 1.35em;border-radius:999px;border:2px solid transparent;background:var(--grad);color:#fff;font:700 1rem var(--f-body);text-decoration:none;cursor:pointer;box-shadow:0 12px 24px -12px rgba(194,123,255,.8);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(194,123,255,.9)}
.btn-ghost{background:#fff;color:var(--lilac-d);border-color:var(--line);box-shadow:none}.btn-ghost:hover{border-color:var(--lilac);box-shadow:none}
.btn-lg{padding:.9em 1.7em;font-size:1.05rem}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(253,251,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:28px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 1.4rem var(--f-head)}
.brand-mark{width:34px;height:34px;border-radius:11px;background:var(--grad);box-shadow:inset -4px -5px 0 rgba(0,0,0,.14),inset 3px 3px 0 rgba(255,255,255,.4),0 8px 14px -6px rgba(139,124,255,.9)}
.primary-nav{display:flex;align-items:center;flex:1;gap:20px}
.menu,.menu ul{list-style:none;margin:0;padding:0}.menu{display:flex;gap:4px;flex:1}
.menu a{display:block;padding:.5em .9em;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:500}
.menu a:hover,.menu .current-menu-item>a{background:var(--cloud);color:var(--lilac-d)}
.menu li{position:relative}.menu .menu-item-has-children>a:after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px)}
.menu .sub-menu{position:absolute;top:100%;left:0;min-width:240px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.hdr-cta{display:flex;gap:10px}.hdr-cta .btn{padding:.55em 1.1em}
.nav-toggle{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-toggle i{width:20px;height:2px;background:var(--ink);border-radius:2px}
/* hero */
.hero{padding:clamp(40px,7vw,90px) 0 30px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.lead{font-size:1.2rem;color:var(--mute);max-width:34em}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 14px}.hero-note{color:var(--mute);font-size:.95rem;margin:0}
.hero-art svg{width:100%;filter:drop-shadow(0 30px 40px rgba(106,91,224,.18));animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
/* sections */
.section{padding:clamp(50px,7vw,96px) 0}.section.tight{padding:20px 0 50px}.tint{background:linear-gradient(180deg,rgba(246,243,255,.9),rgba(255,240,246,.7))}
.section-head{text-align:center;max-width:620px;margin:0 auto 44px}.section-head p{color:var(--mute);margin:0}
/* tools */
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tool-card{display:flex;flex-direction:column;padding:26px;background:#fff;border:1px solid var(--line);border-radius:32px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .2s}
.tool-card:hover{transform:translateY(-6px)}.tool-card:nth-child(2){border-radius:32px 32px 90px 32px}.tool-card:nth-child(3){border-radius:32px 90px 32px 32px}
.tool-art{background:linear-gradient(160deg,var(--cloud),#fff0f6);border-radius:24px;padding:10px;margin-bottom:18px}.tool-card p{color:var(--mute);margin:0 0 16px;flex:1}.tool-link{font-weight:700;color:var(--lilac-d)}.tool-link:after{content:" \2192"}
/* steps */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:0;margin:0}
.steps li{counter-increment:s;background:#fff;padding:28px;border-radius:28px;border:1px solid var(--line);position:relative}
.steps li:before{content:counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;font:800 1.2rem var(--f-head);margin-bottom:16px;box-shadow:inset -3px -4px 0 rgba(0,0,0,.14)}.steps p{margin:0;color:var(--mute)}
/* features */
.feature-split{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}.feature-big p{color:var(--mute);margin-bottom:24px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}.feature-list div{padding:22px;border-radius:24px;background:#fff;border:1px solid var(--line)}.feature-list div:nth-child(2),.feature-list div:nth-child(3){background:var(--cloud)}.feature-list p{margin:0;color:var(--mute);font-size:.95rem}
/* pricing */
.billing-toggle{display:flex;width:max-content;margin:0 auto 34px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px}
.billing-toggle button{border:0;background:none;padding:.5em 1.2em;border-radius:999px;font:700 .95rem var(--f-body);color:var(--mute);cursor:pointer}.billing-toggle .is-on{background:var(--grad);color:#fff}.billing-toggle span{font-weight:500;font-size:.8rem}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:32px;background:#fff;border:1px solid var(--line);border-radius:30px}
.plan-featured{background:linear-gradient(160deg,#fff,#F3EEFF);border:2px solid var(--lilac);box-shadow:var(--shadow);transform:translateY(-10px)}
.plan-badge{position:absolute;top:-14px;left:28px;background:var(--grad);color:#fff;font:700 .8rem var(--f-body);padding:.3em 1em;border-radius:999px}
.plan-price{margin:0;font:800 3rem var(--f-head)}.plan-price .per{font:500 1rem var(--f-body);color:var(--mute)}.plan-credits{color:var(--lilac-d);font-weight:700}
.plan ul{list-style:none;padding:0;margin:10px 0 26px;flex:1}.plan li{padding:6px 0 6px 28px;position:relative}.plan li:before{content:"";position:absolute;left:0;top:13px;width:14px;height:8px;border:solid var(--lilac);border-width:0 0 3px 3px;transform:rotate(-45deg)}
/* faq */
.faq details{background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 22px;margin-bottom:12px}.faq summary{cursor:pointer;font:700 1.05rem var(--f-head);padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-size:1.5rem;line-height:1;color:var(--lilac-d)}.faq details[open] summary:after{content:"\2212"}.faq p{margin:0 0 18px;color:var(--mute)}
/* cta */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:clamp(30px,5vw,56px);border-radius:40px;background:var(--grad);color:#fff;box-shadow:0 30px 50px -28px rgba(194,123,255,.9)}
.cta-band h2{margin-bottom:.2em}.cta-band p{margin:0;opacity:.92}.cta-band .btn{background:#fff;color:var(--lilac-d)}.cta-band.small{padding:28px 34px;border-radius:28px}
/* page head, prose */
.page-head{padding:clamp(40px,6vw,76px) 0 10px}.page-head .lead{margin:0}.page-head.center{text-align:center}
.tool-head-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:center}.art-sm svg{max-height:240px;width:100%;filter:drop-shadow(0 20px 26px rgba(106,91,224,.2))}
.prose h2{margin-top:1.6em}.prose h3{margin-top:1.4em}.prose li{margin:.3em 0}.prose a.btn{color:#fff}
/* workspace */
.workspace{display:grid;grid-template-columns:420px 1fr;gap:26px;padding:26px;background:#fff;border:1px solid var(--line);border-radius:36px;box-shadow:var(--shadow)}
.ws-controls{display:flex;flex-direction:column;gap:16px}.ws-controls label,.idea legend{font-weight:700;font-size:.95rem;display:flex;flex-direction:column;gap:6px}
input[type=text],input[type=email],input[type=password],input[type=file],select,textarea{width:100%;font:400 1rem var(--f-body);color:var(--ink);padding:.75em 1em;border:1.5px solid var(--line);border-radius:14px;background:#FDFBFF}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lilac);box-shadow:0 0 0 4px rgba(139,124,255,.18)}
.idea{border:1.5px dashed var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}.idea legend{padding:0 6px}
.bg-picks{display:flex;gap:10px}.bg-pick{width:40px;height:40px;border-radius:12px;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer}.bg-pick.is-on{box-shadow:0 0 0 3px var(--lilac)}
.ws-result{display:grid;place-items:center;background:linear-gradient(160deg,var(--cloud),#fff0f6);border-radius:26px;min-height:380px;padding:16px}
.ws-result canvas,.ws-result img,.ws-result video{border-radius:18px;max-height:640px;width:auto;box-shadow:var(--shadow)}.placeholder{text-align:center;color:var(--mute)}.placeholder svg{max-width:280px}
.msg{min-height:1.4em;margin:0;font-size:.95rem;color:var(--mute)}.msg.err{color:#C0305F}.cost{margin:-6px 0 0;font-size:.9rem;color:var(--mute)}
.spin{width:44px;height:44px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--lilac);animation:sp 1s linear infinite;margin:0 auto 12px}@keyframes sp{to{transform:rotate(360deg)}}
/* blog */
.cat-pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:22px 0 0}.cat-pills a{display:block;padding:.4em 1em;border-radius:999px;background:#fff;border:1px solid var(--line);text-decoration:none;font-weight:500;color:var(--ink)}.cat-pills a:hover,.cat-pills a.on{background:var(--grad);color:#fff;border-color:transparent}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.post-card{background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden}.post-thumb{display:block;background:linear-gradient(160deg,var(--cloud),#fff0f6);padding:14px}.post-thumb svg,.post-thumb img{display:block;margin:auto;max-height:190px;width:auto}
.post-body{padding:20px 24px 26px}.post-body h2{font-size:1.3rem}.post-body h2 a{color:var(--ink);text-decoration:none}.post-body p{color:var(--mute);margin:0}.post-meta{font-size:.88rem;color:var(--mute)!important;margin-bottom:8px!important}.post-meta a{color:var(--lilac-d)}
.pager{margin-top:40px;text-align:center}.pager .nav-links{display:flex;gap:8px;justify-content:center}.pager a,.pager span{padding:.4em .9em;border-radius:12px;background:#fff;border:1px solid var(--line);text-decoration:none}.pager .current{background:var(--grad);color:#fff}
/* forms */
.form{display:flex;flex-direction:column;gap:16px;background:#fff;padding:28px;border:1px solid var(--line);border-radius:28px}.form label{font-weight:700;display:flex;flex-direction:column;gap:6px}.hp{position:absolute;left:-9999px}
.auth p{margin:0}.auth .login-submit input{background:var(--grad);color:#fff;border:0;border-radius:999px;padding:.8em 1.6em;font:700 1rem var(--f-body);cursor:pointer}.auth form p{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.notice{padding:14px 18px;border-radius:16px}.notice.ok{background:#E3FAF2;color:#146C55}.notice.err{background:#FFE6EE;color:#A22650}
/* footer */
.site-footer{margin-top:40px;background:#fff;border-top:1px solid var(--line);padding-top:56px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}.foot-about p{color:var(--mute);max-width:26em}
.site-footer h4{font-size:1rem}.site-footer ul{list-style:none;padding:0;margin:0}.site-footer li a{display:block;padding:4px 0;color:var(--mute);text-decoration:none}.site-footer li a:hover{color:var(--lilac-d)}
.foot-base{border-top:1px solid var(--line);margin-top:40px;padding:22px 0;color:var(--mute);font-size:.9rem}.foot-base p{margin:0}
/* responsive */
@media(max-width:980px){.hero-grid,.feature-split,.tool-head-grid,.workspace{grid-template-columns:1fr}.tool-grid,.plan-grid,.steps,.post-grid{grid-template-columns:1fr}.plan-featured{transform:none}.foot-grid{grid-template-columns:1fr 1fr}.tool-card:nth-child(n){border-radius:32px}
.nav-toggle{display:flex}.primary-nav{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:16px 20px 24px;display:none;max-height:calc(100vh - 72px);overflow:auto}.primary-nav.open{display:flex}
.menu{flex-direction:column}.menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px;min-width:0}.hdr-cta{flex-direction:column}.art-sm{max-width:260px}}
@media(max-width:560px){.feature-list,.foot-grid{grid-template-columns:1fr}.workspace{padding:16px;border-radius:26px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}