:root{--bg:#090d19;--panel:#101728;--panel2:#141d31;--text:#f5f7ff;--muted:#9ba7bf;--line:rgba(167,183,220,.13);--purple:#8b5cf6;--cyan:#22d3ee;--shadow:0 24px 70px rgba(0,0,0,.25);--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.55;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(ellipse at 18% 4%,rgba(85,55,160,.16),transparent 36%),radial-gradient(ellipse at 92% 26%,rgba(23,121,157,.12),transparent 32%)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.ambient{position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(110px);opacity:.12;pointer-events:none;z-index:-1}.ambient-one{background:#7c3aed;top:400px;left:-190px}.ambient-two{background:#0891b2;top:1050px;right:-190px}.topbar{height:82px;max-width:var(--max);margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:10}.brand{display:flex;align-items:center;gap:10px;font:700 21px 'Space Grotesk',sans-serif;letter-spacing:-.8px}.brand-mark{width:39px;height:39px;display:block}.brand-mark svg{width:100%;height:100%;filter:drop-shadow(0 5px 12px #6d28d955)}.brand-light{color:#a5b4fc}.brand small{display:block;font:600 8px 'DM Sans',sans-serif;letter-spacing:2.3px;color:#8290ac;margin-top:-2px}.desktop-nav{display:flex;gap:32px;color:var(--muted);font-size:13px}.desktop-nav a,.footer-links a{transition:color .2s}.desktop-nav a:hover,.footer-links a:hover{color:white}.top-actions{display:flex;align-items:center;gap:10px}.privacy-pill{display:flex;align-items:center;gap:7px;font-size:11px;color:#b9c6dc;margin-right:7px}.privacy-pill i{width:7px;height:7px;background:#34d399;border-radius:50%;box-shadow:0 0 12px #34d399}.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;border:1px solid transparent;border-radius:12px;padding:12px 17px;font-size:13px;font-weight:700;transition:transform .2s,box-shadow .2s,border-color .2s;background:none;color:var(--text);white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(115deg,#8b5cf6,#6366f1 60%,#3b82f6);box-shadow:0 8px 24px #6554d53b,inset 0 1px 0 #ffffff40}.btn-primary:hover{box-shadow:0 12px 34px #6554d56b}.btn-glass{border-color:var(--line);background:linear-gradient(140deg,#ffffff0b,#ffffff03);box-shadow:inset 0 1px 0 #ffffff08}.btn-glass:hover{border-color:#8b5cf677}.btn-small{padding:9px 12px;font-size:12px;border-radius:10px}.btn-large{padding:15px 20px;font-size:14px}.menu-toggle{display:none;color:var(--text);background:none;border:0;font-size:22px}.hero{max-width:var(--max);min-height:590px;margin:auto;padding:78px 24px 62px;display:grid;grid-template-columns:1fr .92fr;align-items:center;gap:45px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:700;color:#a5b4fc;display:flex;align-items:center;gap:9px}.sparkle{color:#67e8f9;font-size:17px}.eyebrow-line{height:1px;width:38px;background:linear-gradient(90deg,#8b5cf6,transparent)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-1.3px}h1{font-size:clamp(43px,5.4vw,68px);line-height:1.07;margin:23px 0 20px;font-weight:700} .gradient-text{background:linear-gradient(100deg,#c4b5fd 4%,#8b5cf6 42%,#67e8f9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-desc{font-size:16px;color:var(--muted);max-width:480px;line-height:1.8}.hero-buttons{display:flex;gap:12px;margin-top:29px;flex-wrap:wrap}.hero-proof{display:flex;align-items:center;gap:13px;margin-top:39px}.avatar-stack{display:flex;padding-left:5px}.avatar-stack span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;border:2px solid var(--bg);margin-left:-5px;background:linear-gradient(135deg,#6d28d9,#0e7490);font-size:13px}.avatar-stack span:nth-child(2){background:linear-gradient(135deg,#0e7490,#4338ca)}.avatar-stack span:nth-child(3){background:linear-gradient(135deg,#db2777,#7c3aed)}.hero-proof strong,.hero-proof small{display:block}.hero-proof strong{font-size:12px}.hero-proof small{color:var(--muted);font-size:11px;margin-top:2px}.hero-visual{position:relative;min-height:410px;display:grid;place-items:center}.visual-glow{position:absolute;width:310px;height:310px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#0891b2);filter:blur(95px);opacity:.28}.image-stack{width:330px;height:340px;position:relative;transform:rotate(-4deg)}.art-card,.stack-back,.stack-mid{position:absolute;inset:20px 22px 20px 20px;border-radius:25px;border:1px solid #ffffff30;box-shadow:0 30px 65px #0007;overflow:hidden}.stack-back{background:linear-gradient(145deg,#1d2750,#101829);transform:rotate(13deg) translate(17px,1px);opacity:.8}.stack-mid{background:linear-gradient(145deg,#26345e,#12182b);transform:rotate(6deg) translate(7px,0);opacity:.9}.art-card{background:#171d36;transform:rotate(1deg);inset:15px 30px 20px 10px}.art-sky{position:absolute;inset:0 0 38%;background:linear-gradient(150deg,#f9a8d4 0%,#a78bfa 42%,#38bdf8 100%)}.art-sun{position:absolute;width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,#fff7ad,#fb7185);top:48px;right:49px;box-shadow:0 0 60px #fda4afaa}.art-mountain{position:absolute;bottom:35%;width:0;height:0;border-left:180px solid transparent;border-right:180px solid transparent}.mountain-one{border-bottom:190px solid #353b72;left:-65px}.mountain-two{border-bottom:140px solid #252b54;right:-95px;border-left-width:160px;border-right-width:160px}.art-ground{position:absolute;bottom:0;height:40%;width:100%;background:linear-gradient(170deg,#172e50,#101827)}.art-ground:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(105deg,transparent 0 28px,#6ee7f91a 29px 30px)}.art-label{position:absolute;bottom:18px;left:18px;font-size:8px;letter-spacing:2px;font-weight:700;color:#e0e7ff}.float-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:linear-gradient(145deg,#202a42eF,#111827ed);border:1px solid #ffffff20;box-shadow:0 15px 45px #0005;backdrop-filter:blur(15px)}.float-chip b,.float-chip small{display:block}.float-chip b{font-size:11px}.float-chip small{font-size:9px;color:#9caecb;margin-top:2px}.chip-top{top:34px;right:-3px}.chip-bottom{bottom:35px;left:-10px}.chip-icon,.lock-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#8b5cf62b;color:#c4b5fd;font-size:18px}.lock-icon{background:#0891b22a;color:#67e8f9}.check{color:#34d399;margin-left:4px}.mini-stat{position:absolute;z-index:3;right:8px;bottom:55px;display:flex;gap:9px;align-items:center;padding:11px 14px;background:#0b1324;border:1px solid #ffffff25;border-radius:13px;box-shadow:0 10px 30px #0005}.mini-stat-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;color:#34d399;background:#34d39920;font-size:19px}.mini-stat strong,.mini-stat small{display:block}.mini-stat strong{font:700 16px 'Space Grotesk';color:#6ee7b7}.mini-stat small{font-size:9px;color:var(--muted)}.trust-row{border-block:1px solid var(--line);padding:23px 24px;display:flex;justify-content:center;align-items:center;gap:55px;color:#7f8ba4;font-size:10px;letter-spacing:1.6px;flex-wrap:wrap}.trust-row div{display:flex;gap:32px;flex-wrap:wrap;justify-content:center;color:#b3bed2;letter-spacing:0;font-size:12px}.section-wrap{max-width:var(--max);margin:auto;padding:100px 24px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px}.section-heading h2{font-size:clamp(31px,4vw,43px);line-height:1.15;margin:12px 0 0}.muted-heading{color:#7e8ba5}.section-heading>p{max-width:340px;color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 3px}.tool-controls{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:23px}.search-box{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#ffffff04;border-radius:11px;padding:0 12px;height:43px;width:265px;color:#8290aa}.search-box>span{font-size:22px}.search-box input{width:100%;background:none;border:0;outline:0;color:var(--text);font-size:12px;min-width:0}.search-box kbd{font-size:9px;border:1px solid var(--line);border-radius:5px;padding:3px 5px;white-space:nowrap}.filter-tabs{display:flex;gap:5px;flex-wrap:wrap}.filter{padding:9px 12px;border-radius:9px;border:1px solid transparent;background:transparent;color:#95a2ba;font-size:11px;transition:.2s}.filter:hover{color:white;background:#ffffff08}.filter.active{color:#e9e5ff;background:#8b5cf624;border-color:#8b5cf64a}.filter span{margin-left:4px;color:#c4b5fd}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.tool-card{position:relative;min-height:213px;padding:21px 19px 17px;border-radius:17px;border:1px solid var(--line);background:linear-gradient(145deg,#ffffff08,#ffffff02 65%);box-shadow:inset 0 1px 0 #ffffff07;transition:transform .25s,border-color .25s,box-shadow .25s;cursor:pointer;overflow:hidden}.tool-card:before{content:"";position:absolute;inset:auto -35px -70px auto;width:130px;height:130px;background:radial-gradient(circle,#8b5cf61c,transparent 70%);transition:opacity .2s;opacity:0}.tool-card:hover,.tool-card:focus-visible{transform:translateY(-6px);border-color:#8b5cf66e;box-shadow:0 18px 45px #0003,inset 0 1px 0 #ffffff12;outline:none}.tool-card:hover:before{opacity:1}.tool-card-top{display:flex;justify-content:space-between;align-items:center}.tool-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:13px;font-size:23px;border:1px solid #ffffff0c;box-shadow:inset 0 1px 0 #ffffff20}.violet{background:linear-gradient(145deg,#8b5cf64a,#6d28d91a);color:#c4b5fd}.blue{background:linear-gradient(145deg,#3b82f64a,#1d4ed81a);color:#93c5fd}.cyan{background:linear-gradient(145deg,#06b6d44a,#0e74901a);color:#67e8f9}.pink{background:linear-gradient(145deg,#ec48994a,#9d174d1a);color:#f9a8d4}.orange{background:linear-gradient(145deg,#f973164a,#9a34121a);color:#fdba74}.green{background:linear-gradient(145deg,#10b9814a,#065f461a);color:#6ee7b7}.indigo{background:linear-gradient(145deg,#6366f14a,#3730a31a);color:#a5b4fc}.yellow{background:linear-gradient(145deg,#eab3084a,#854d0e1a);color:#fde68a}.tool-tag{font-size:8px;font-weight:700;letter-spacing:1px;color:#8492ae}.tool-card h3{font-size:16px;letter-spacing:-.4px;margin:18px 0 6px}.tool-card p{font-size:11px;line-height:1.65;color:#98a5bc;min-height:37px;margin-bottom:15px}.tool-card-bottom{border-top:1px solid #ffffff0c;padding-top:12px;display:flex;justify-content:space-between;align-items:center;color:#c4b5fd;font-size:12px;font-weight:800}.arrow-circle{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#8b5cf61c;color:#c4b5fd;font-size:14px;transition:transform .2s}.tool-card:hover .arrow-circle{transform:translate(2px,-2px)}.no-results{color:var(--muted);text-align:center;padding:35px}.workflow-section{padding-top:30px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.step-card{position:relative;padding:24px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(140deg,#ffffff07,#ffffff02)}.step-num{font:700 11px 'Space Grotesk';color:#a5b4fc;letter-spacing:1px}.step-art{height:135px;margin:12px 0 20px;border:1px solid #ffffff10;border-radius:13px;background:radial-gradient(ellipse at 50% 100%,#4338ca2b,transparent 70%),#0b1222;display:flex;align-items:center;justify-content:center;position:relative;color:#a5b4fc;font-size:30px}.upload-art{flex-direction:column;gap:7px}.step-art>span{font-size:9px;letter-spacing:2px;color:#73829e}.tune-art{gap:12px;font-size:13px}.tune-art span:nth-child(2){color:#3c4a67;letter-spacing:0}.download-art{flex-direction:column;gap:5px}.step-card h3{font-size:17px;letter-spacing:-.5px;margin-bottom:8px}.step-card p{color:var(--muted);font-size:12px;line-height:1.8;margin:0}.privacy-section{padding-top:10px;padding-bottom:80px}.privacy-card{display:flex;align-items:center;gap:25px;padding:30px;border:1px solid #22d3ee25;border-radius:20px;background:linear-gradient(110deg,#0e749019,#8b5cf60b);box-shadow:inset 0 1px 0 #ffffff08}.privacy-symbol{flex-shrink:0;width:62px;height:62px;display:grid;place-items:center;border-radius:17px;background:#22d3ee14;border:1px solid #22d3ee30;color:#67e8f9;font-size:29px}.privacy-card>div:nth-child(2){flex:1}.privacy-card h2{font-size:24px;margin:9px 0}.privacy-card p{font-size:12px;line-height:1.8;color:var(--muted);max-width:640px;margin:0}.privacy-badge{white-space:nowrap;font-size:10px;color:#6ee7b7;padding:9px 12px;border:1px solid #34d39930;border-radius:30px;background:#34d3990d}.privacy-badge span{margin-right:5px}.faq-section{padding-top:25px}.faq-list{max-width:780px;margin-left:auto;border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:0 4px}.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:13px;font-weight:600}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:18px;color:#a5b4fc;transition:transform .2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{font-size:12px;color:var(--muted);line-height:1.8;max-width:690px;padding:0 0 18px;margin:0}.cta-section{padding-top:15px;padding-bottom:90px}.cta-card{position:relative;overflow:hidden;text-align:center;padding:60px 24px;border:1px solid #8b5cf638;border-radius:24px;background:radial-gradient(ellipse at 50% 0%,#6d28d926,transparent 55%),linear-gradient(130deg,#14172b,#0d1423 70%);box-shadow:inset 0 1px 0 #ffffff0b}.cta-orb{position:absolute;width:280px;height:180px;left:calc(50% - 140px);top:-140px;border-radius:50%;background:#8b5cf6;filter:blur(80px);opacity:.28}.cta-card .eyebrow{justify-content:center}.cta-card h2{font-size:clamp(30px,4vw,44px);line-height:1.15;margin:16px 0 12px}.cta-card p{font-size:13px;color:var(--muted);margin-bottom:24px}.footer{max-width:var(--max);margin:auto;padding:25px 24px 30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:25px;flex-wrap:wrap}.footer .brand{transform:scale(.85);transform-origin:left center}.footer>p{font-size:11px;color:#8390a8;margin:0}.footer-links{display:flex;gap:18px;margin-left:auto;font-size:11px;color:#a4b0c5}.copyright{width:100%;color:#68758e;font-size:10px;margin-top:6px}.modal-backdrop{position:fixed;inset:0;z-index:100;background:#030611c9;backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:20px;overflow:auto}.modal-backdrop.open{display:flex}.tool-modal{width:min(790px,100%);max-height:92vh;overflow:auto;border:1px solid #ffffff20;border-radius:22px;background:linear-gradient(145deg,#151e32,#0c1221);box-shadow:0 35px 100px #000a;animation:modalIn .22s ease}.modal-header{padding:23px 25px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.modal-header h2{font-size:24px;margin:7px 0 0}.icon-button{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:#ffffff08;color:var(--text)}.modal-body{padding:24px}.drop-zone{border:1px dashed #8b5cf677;border-radius:16px;background:radial-gradient(ellipse at 50% 0%,#8b5cf61c,transparent 60%),#ffffff03;min-height:280px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px;transition:background .2s,border-color .2s}.drop-zone.dragover{border-color:#22d3ee;background:#22d3ee12}.drop-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#8b5cf626;color:#c4b5fd;font-size:30px;margin-bottom:13px}.drop-zone h3{font-size:19px;margin-bottom:5px}.drop-zone p{color:var(--muted);font-size:12px;margin-bottom:17px}.drop-zone small{font-size:10px;color:#74819b;margin-top:15px}.editor{display:grid;grid-template-columns:1fr 1fr;gap:17px}.preview-panel{min-height:260px;border:1px solid var(--line);border-radius:14px;background:#090f1d;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:15px;overflow:hidden}.preview-panel img{max-width:100%;max-height:245px;object-fit:contain;border-radius:7px}.image-meta{font-size:10px;color:#9ba7bf;text-align:center;overflow-wrap:anywhere}.settings-panel{border:1px solid var(--line);border-radius:14px;padding:17px;display:flex;flex-direction:column;gap:15px}.setting{display:flex;flex-direction:column;gap:7px}.setting label,.setting-label{font-size:11px;font-weight:600;color:#dbe4f5}.setting input[type=number],.setting input[type=text],.setting select{width:100%;border:1px solid #ffffff18;border-radius:9px;background:#0b1221;color:var(--text);padding:10px;font-size:12px;outline:none}.setting input:focus,.setting select:focus{border-color:#8b5cf6}.setting input[type=range]{width:100%;accent-color:#8b5cf6}.range-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}.inline-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.check-setting{display:flex;gap:8px;align-items:center;color:#aab6cb;font-size:11px}.check-setting input{accent-color:#8b5cf6}.editor-actions{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px}.result-panel{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px;border:1px solid #34d39938;background:#34d3990b;border-radius:13px}.result-panel strong{font-size:12px}.result-panel p{font-size:10px;color:var(--muted);margin:4px 0 0}.modal-note{margin:20px 0 0;text-align:center;color:#7e8ba5;font-size:10px}.toast{position:fixed;z-index:200;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#17233a;border:1px solid #ffffff22;border-radius:12px;padding:12px 18px;box-shadow:var(--shadow);font-size:12px;transition:.25s;max-width:calc(100% - 30px)}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}body.light{--bg:#f4f6fc;--panel:#fff;--panel2:#e9eef9;--text:#121a2c;--muted:#596780;--line:rgba(45,60,95,.16);--shadow:0 24px 70px #17213a15;background:#f4f6fc}body.light:before{opacity:.3}body.light .tool-card,body.light .step-card{background:linear-gradient(145deg,#fff,#f7f8ff)}body.light .topbar{background:#f4f6fcdd}body.light .tool-card h3,body.light .step-card h3{color:#18223a}body.light .tool-card p,body.light .step-card p{color:#65728b}body.light .filter{color:#56627a}body.light .filter.active{color:#4f46e5;background:#6366f118}body.light .search-box input{color:#121a2c}body.light .modal-backdrop{background:#11182780}body.light .tool-modal{background:linear-gradient(145deg,#fff,#f2f5fc);color:#172036}body.light .settings-panel,body.light .preview-panel{background:#f5f7fc}body.light .setting input[type=number],body.light .setting input[type=text],body.light .setting select{background:#fff;color:#172036}body.light .setting label{color:#27334c}body.light .cta-card{background:linear-gradient(130deg,#e9e7ff,#edf9ff)}body.light .cta-card p{color:#596780}body.light .float-chip{background:#f7f8ffed;color:#172036}body.light .float-chip small{color:#66728a}body.light .mini-stat{background:#f7f8ff;color:#172036}body.light .footer-links{color:#4c5a74}body.light .trust-row div{color:#52617b}body.light .privacy-card{background:#e9f8fb}body.light .faq-list summary{color:#172036}body.light .modal-header{border-color:var(--line)}body.light .icon-button{color:#172036}
@media(max-width:950px){.hero{gap:20px;padding-top:60px;min-height:550px}.hero-visual{transform:scale(.9)}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-controls{align-items:flex-start;flex-direction:column}.search-box{width:100%;max-width:380px}.privacy-card{align-items:flex-start;flex-wrap:wrap}.privacy-badge{margin-left:87px}.desktop-nav{gap:17px}.privacy-pill{display:none}}
@media(max-width:650px){.topbar{height:70px;padding:0 17px}.brand{font-size:19px}.brand-mark{width:35px;height:35px}.desktop-nav{display:none;position:absolute;top:69px;left:0;right:0;background:#11182a;padding:18px 22px;border-bottom:1px solid var(--line);flex-direction:column;gap:16px}.desktop-nav.open{display:flex}.top-actions{gap:7px}.top-actions>.btn-primary{display:none}.menu-toggle{display:block}.hero{grid-template-columns:1fr;padding:55px 20px 40px;gap:8px}.hero-copy{text-align:center}.hero-copy .eyebrow{justify-content:center;font-size:8px;letter-spacing:1.4px}.eyebrow-line{width:20px}.hero-desc{font-size:14px;margin-inline:auto}.hero-buttons{justify-content:center}.hero-proof{justify-content:center;margin-top:26px}.hero-visual{min-height:350px;transform:scale(.86);margin:-5px 0 -25px}.chip-top{right:-15px}.chip-bottom{left:-15px}.trust-row{gap:15px;padding:20px 15px}.trust-row>span{width:100%;text-align:center;font-size:9px}.trust-row div{gap:12px 20px}.section-wrap{padding:68px 18px}.section-heading{display:block;margin-bottom:27px}.section-heading h2{font-size:34px}.section-heading>p{margin-top:14px}.tool-grid{gap:10px}.tool-card{padding:15px 13px;min-height:205px;border-radius:14px}.tool-icon{width:39px;height:39px;font-size:20px}.tool-tag{font-size:7px;letter-spacing:.6px}.tool-card h3{font-size:14px;margin-top:15px}.tool-card p{font-size:10px;min-height:49px}.tool-card-bottom{font-size:10px}.filter-tabs{gap:3px}.filter{font-size:10px;padding:8px}.steps-grid{grid-template-columns:1fr;gap:12px}.step-card{display:grid;grid-template-columns:60px 1fr;column-gap:15px;padding:18px}.step-num{grid-column:1/-1}.step-art{grid-row:2/4;grid-column:1;height:80px;margin:9px 0 0}.step-card h3{align-self:end;margin:10px 0 5px;font-size:16px}.step-card p{font-size:11px}.privacy-card{padding:22px;gap:15px}.privacy-symbol{width:48px;height:48px;font-size:23px}.privacy-card>div:nth-child(2){flex-basis:calc(100% - 65px)}.privacy-card h2{font-size:21px}.privacy-card p{font-size:11px}.privacy-badge{margin-left:0}.faq-section .section-heading{margin-bottom:22px}.faq-list summary{font-size:12px;padding:17px 0}.cta-section{padding-top:0;padding-bottom:60px}.cta-card{padding:45px 18px}.cta-card h2{font-size:32px}.footer{padding:22px 18px;gap:10px}.footer>p{width:100%}.footer-links{margin-left:0;flex-wrap:wrap;gap:13px}.copyright{margin-top:12px}.modal-backdrop{padding:9px;align-items:flex-start}.tool-modal{max-height:calc(100vh - 18px);border-radius:17px;margin:auto 0}.modal-header{padding:18px}.modal-header h2{font-size:20px}.modal-body{padding:15px}.drop-zone{min-height:245px}.editor{grid-template-columns:1fr}.preview-panel{min-height:190px}.preview-panel img{max-height:210px}.settings-panel{padding:14px}.editor-actions{grid-column:1}.result-panel{grid-column:1;align-items:flex-start;flex-direction:column}.result-panel .btn{width:100%}}
@media(max-width:370px){h1{font-size:39px}.hero-buttons .btn{width:100%}.tool-card{padding:13px 10px}.tool-card h3{font-size:13px}.tool-tag{font-size:6px}.filter{padding:7px 8px}.image-stack{transform:scale(.88) rotate(-4deg)}}


/* =========================================
   PIXELFORGE - MOBILE RESPONSIVE FIX
   Add this at the END of style.css
========================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

.hero,
.section-wrap,
.topbar,
.footer,
.tool-controls,
.editor,
.modal-body {
    min-width: 0;
}

.hero-copy,
.hero-visual,
.section-heading,
.tool-card,
.preview-panel,
.settings-panel {
    min-width: 0;
}

.hero-desc,
.tool-card h3,
.tool-card p,
.section-heading h2,
.image-meta {
    overflow-wrap: anywhere;
}

.search-box {
    min-width: 0;
}

.search-box input {
    min-width: 0;
    flex: 1;
}

.tool-card {
    height: auto;
    overflow: hidden;
}

.tool-card p {
    overflow-wrap: anywhere;
}

.hero-visual {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.image-stack {
    max-width: calc(100vw - 70px);
}

.modal-backdrop {
    width: 100%;
    max-width: 100%;
    overscroll-behavior: contain;
}

.tool-modal {
    width: 100%;
    min-width: 0;
}

.editor,
.settings-panel,
.preview-panel {
    min-width: 0;
}

.setting input,
.setting select,
.setting textarea {
    max-width: 100%;
    min-width: 0;
}

.inline-fields > *,
.editor-actions > * {
    min-width: 0;
}

.editor-actions .btn {
    white-space: normal;
}

.result-panel {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 650px) {
    .topbar {
        padding-left: 12px;
        padding-right: 12px;
        gap: 8px;
    }

    .brand {
        min-width: 0;
        font-size: 17px;
        gap: 7px;
    }

    .brand small {
        font-size: 7px;
        letter-spacing: 1.5px;
    }

    .top-actions {
        flex-shrink: 0;
    }

    .hero {
        width: 100%;
        padding: 42px 16px 30px;
        grid-template-columns: minmax(0, 1fr);
    }

    .hero h1 {
        font-size: clamp(34px, 9vw, 48px);
        overflow-wrap: anywhere;
    }

    .hero-visual {
        width: 100%;
        min-height: 320px;
        margin: 0;
        transform: none;
        overflow: hidden;
    }

    .image-stack {
        width: 300px;
        max-width: calc(100vw - 72px);
        height: 300px;
        transform: scale(.88) rotate(-4deg);
        transform-origin: center;
    }

    .chip-top {
        right: 0;
        top: 18px;
    }

    .chip-bottom {
        left: 0;
        bottom: 18px;
    }

    .mini-stat {
        right: 0;
        bottom: 35px;
    }

    .hero-buttons {
        width: 100%;
    }

    .hero-buttons .btn {
        max-width: 100%;
        white-space: normal;
    }

    .section-wrap {
        padding: 52px 14px;
    }

    .section-heading h2 {
        font-size: clamp(28px, 7vw, 36px);
    }

    .tool-controls {
        width: 100%;
    }

    .search-box {
        width: 100%;
        max-width: none;
    }

    .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .tool-card {
        padding: 13px 11px;
        min-width: 0;
    }

    .tool-card h3 {
        font-size: 13px;
        line-height: 1.4;
    }

    .tool-card p {
        min-height: 0;
    }

    .filter-tabs {
        width: 100%;
    }

    .filter {
        max-width: 100%;
    }

    .privacy-card {
        min-width: 0;
    }

    .privacy-card > div:nth-child(2) {
        min-width: 0;
        flex: 1 1 180px;
    }

    .footer-links {
        min-width: 0;
    }

    .modal-backdrop {
        padding: 8px;
        align-items: flex-start;
    }

    .tool-modal {
        width: 100%;
        max-height: calc(100dvh - 16px);
        margin: 0;
    }

    .modal-header {
        gap: 10px;
        padding: 15px;
    }

    .modal-header h2 {
        font-size: 18px;
        overflow-wrap: anywhere;
    }

    .modal-body {
        padding: 12px;
    }

    .editor {
        grid-template-columns: minmax(0, 1fr);
    }

    .preview-panel {
        width: 100%;
        min-height: 160px;
        padding: 10px;
    }

    .preview-panel img {
        width: auto;
        max-width: 100%;
        max-height: 220px;
        height: auto;
        object-fit: contain;
    }

    .settings-panel {
        padding: 12px;
    }

    .inline-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .editor-actions {
        display: flex;
        flex-wrap: wrap;
    }

    .editor-actions .btn {
        flex: 1 1 130px;
    }

    .result-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .result-panel .btn {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .brand {
        font-size: 15px;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
    }

    .hero {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero h1 {
        font-size: 33px;
    }

    .tool-grid {
        gap: 8px;
    }

    .tool-card {
        padding: 11px 9px;
    }

    .tool-card h3 {
        font-size: 12px;
    }

    .tool-tag {
        font-size: 6px;
        letter-spacing: 0;
    }

    .tool-icon {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .image-stack {
        max-width: calc(100vw - 55px);
    }

    .modal-body {
        padding: 10px;
    }
}

/* Mobile viewport and responsive layout fix */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: clip;
}

#root,
#app,
main,
section,
header,
footer {
    min-width: 0;
    max-width: 100%;
}

img,
video,
canvas,
iframe {
    max-width: 100%;
}

@media screen and (max-width: 650px) {
    .hero {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-copy,
    .hero-visual,
    .section-wrap {
        min-width: 0;
        max-width: 100%;
    }

    .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .image-stack {
        max-width: 100%;
    }
}


/* FIX: Prevent mobile layout shifting */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
}

@media (max-width: 650px) {
    .hero,
    .section-wrap,
    .tool-grid,
    .topbar,
    .footer {
        max-width: 100%;
        min-width: 0;
    }

    .hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    

/* PixelForge - Tools cards text fix */
.tool-card h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

.tool-card p {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
}

.tool-tag {
    font-size: 9px !important;
    font-weight: 700 !important;
}

.tool-card-bottom {
    font-size: 12px !important;
    font-weight: 700 !important;
}

@media (max-width: 650px) {
    .tool-card h3 {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .tool-card p {
        font-size: 12px !important;
        font-weight: 500 !important;
        min-height: 0 !important;
    }

    .tool-tag {
        font-size: 8px !important;
    }

    .tool-card-bottom {
        font-size: 12px !important;
    }
}


/* Footer content center alignment */
.footer {
    justify-content: center;
    text-align: center;
}

.footer > p,
.footer .footer-links,
.footer .copyright {
    width: 100%;
    text-align: center;
}

.footer .brand {
    margin-left: auto;
    margin-right: auto;
    transform-origin: center;
}

.footer .footer-links {
    justify-content: center;
    margin-left: 0;
}
}

/* PixelForge Footer - Center content below logo */
.footer > p,
.footer .footer-links,
.footer .copyright {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.footer .footer-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
}

.footer .copyright {
    margin-top: 10px !important;
}