:root{
--blue-950:#0a1628;--blue-900:#0f1f3d;--blue-800:#1a3260;--blue-700:#1e4080;--blue-600:#2563eb;--blue-500:#3b82f6;--blue-400:#60a5fa;--blue-200:#bfdbfe;--blue-100:#dbeafe;--blue-50:#eff6ff;--accent:#0ea5e9;--accent-light:#e0f2fe;--wa-green:#25d366;--surface:#f6f8fc;--page-bg:#f6f8fc;--white:#fff;--text-primary:#0a1628;--text-secondary:#4b5e7e;--text-muted:#8499b8;--border:#e2eaf8;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:100px;--shadow-sm:0 1px 4px rgba(10,22,40,.07);--shadow-md:0 4px 20px rgba(37,99,235,.10);--shadow-lg:0 8px 40px rgba(37,99,235,.15);--shadow-blue:0 8px 32px rgba(37,99,235,.22)
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'DM Sans',sans-serif;background:var(--page-bg);color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}button{cursor:pointer;border:0;background:none}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}.highlight{color:var(--blue-600)}.display-highlight{color:#2f67f6}
.tag,.marketing-eyebrow{display:inline-flex;width:fit-content;border-radius:var(--radius-full);font-family:'Plus Jakarta Sans',sans-serif;text-transform:uppercase}
.tag{padding:6px 12px;border:1px solid var(--blue-100);background:var(--blue-50);color:var(--blue-600);font-size:11px;font-weight:800;letter-spacing:.08em}
.marketing-eyebrow{padding:6px 11px;border:1px solid #dce6ff;background:#f2f6ff;color:#2f67f6;font-size:11px;font-weight:900;letter-spacing:.09em}
.eyebrow{color:#2f67f6;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 26px;border-radius:var(--radius-full);background:var(--blue-600);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;box-shadow:var(--shadow-blue);transition:.2s}.btn-primary:hover{background:var(--blue-700);transform:translateY(-1px)}
.tool-hero{position:relative;overflow:hidden;padding:80px 0 64px;background:radial-gradient(ellipse 55% 42% at 73% 48%,rgba(47,103,246,.06),transparent 70%),radial-gradient(ellipse 34% 58% at 7% 85%,rgba(225,48,108,.025),transparent 60%)}
.tool-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(37,99,235,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 80%)}
.hero-grid{position:relative;display:grid;grid-template-columns:.87fr 1.13fr;gap:64px;align-items:center}
.hero-copy h1{margin-top:18px;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(40px,5vw,58px);line-height:1.05;letter-spacing:-.045em;font-weight:800}
.hero-lead{margin-top:22px;color:var(--text-secondary);font-size:18px;line-height:1.7}.hero-lead strong{color:var(--text-primary);font-weight:600}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;color:var(--text-muted);font-size:12px;font-weight:600}.hero-trust span{position:relative;padding-left:16px}.hero-trust span::before{content:"✓";position:absolute;left:0;color:#18a05e;font-weight:900}
.generator-card{padding:28px;border:1px solid var(--border);border-radius:var(--radius-xl);background:#fff;box-shadow:var(--shadow-lg)}
.generator-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:24px}.generator-head h2{margin-top:5px;font-family:'Plus Jakarta Sans',sans-serif;font-size:25px;letter-spacing:-.025em}
.privacy-chip{padding:6px 9px;border-radius:var(--radius-full);background:#ecfbf3;color:#18a05e;font-size:10px;font-weight:800}
.field{margin-top:16px}.field>label{display:block;margin-bottom:8px;color:var(--text-primary);font-size:13px;font-weight:700}.field label span{color:var(--text-muted);font-weight:500}
.field input,.field textarea{width:100%;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text-primary);outline:0;transition:.2s}.field input{min-height:48px;padding:0 14px}.field textarea{min-height:90px;padding:12px 14px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(37,99,235,.1)}.field small,.advanced-heading p{display:block;margin-top:6px;color:var(--text-muted);font-size:10px;line-height:1.45}
.username-input{display:flex;align-items:center;min-height:48px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}.username-input:focus-within{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(37,99,235,.1)}.username-input.error{border-color:#ef4444}.username-input>span{display:flex;align-items:center;align-self:stretch;padding:0 14px;border-right:1px solid var(--border);background:#f8faff;color:var(--text-secondary);font-weight:700}.username-input input{border:0;border-radius:0;box-shadow:none!important}
.advanced-field{padding:14px;border:1px solid #e7ebf2;border-radius:14px;background:#fbfcff}.advanced-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.advanced-heading label{font-size:12px;font-weight:700}.advanced-heading p{max-width:360px;margin-top:4px}
.switch{position:relative;flex:0 0 42px;width:42px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;border-radius:999px;background:#d8e1ed;transition:.2s}.slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:.2s}.switch input:checked+.slider{background:var(--blue-600)}.switch input:checked+.slider::before{transform:translateX(18px)}
#prefillWrap{margin-top:12px}.preset-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.preset{padding:6px 9px;border:1px solid #e4eaf5;border-radius:var(--radius-full);background:#fff;color:var(--text-secondary);font-size:10px;font-weight:600}.preset:hover{border-color:var(--blue-200);background:var(--blue-50);color:var(--blue-600)}
.live-preview{margin-top:18px;padding:12px 14px;border:1px solid #e4eaf5;border-radius:12px;background:#f9fbff}.live-preview span,.html-wrap>span{display:block;margin-bottom:6px;color:var(--text-muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.live-preview code{display:block;overflow:hidden;color:var(--blue-700);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.generate-btn{width:100%;margin-top:14px}
.result-panel{margin-top:16px;padding:16px;border:1px solid #cfe0ff;border-radius:16px;background:#f9fbff}.result-top{display:flex;justify-content:space-between;align-items:center;gap:16px}.result-top small{display:block;color:var(--text-muted);font-size:9px;text-transform:uppercase;font-weight:800;letter-spacing:.06em}.result-top strong{display:block;margin-top:3px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px}.result-top>span{padding:5px 8px;border-radius:999px;background:#ecfbf3;color:#18a05e;font-size:9px;font-weight:900;text-transform:uppercase}
.copy-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:11px}.copy-row input{min-width:0;height:44px;padding:0 12px;border:1px solid #dae4f3;border-radius:10px;background:#fff;color:#263951;font-size:11px;outline:0}.copy-row button{padding:0 15px;border-radius:10px;background:var(--blue-600);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:800}
.result-actions{display:flex;gap:8px;margin-top:9px}.outline-btn{display:inline-flex;align-items:center;justify-content:center;flex:1;min-height:40px;border:1px solid #cfe0ff;border-radius:10px;background:#fff;color:var(--blue-600);font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:800}
.html-wrap{margin-top:11px}.html-wrap pre{overflow:auto;padding:11px;border:1px solid #dfe6f1;border-radius:10px;background:#fff}.html-wrap code{font-size:10px;white-space:pre-wrap;word-break:break-all}
.privacy-note{margin-top:12px;color:var(--text-muted);font-size:10px;line-height:1.5;text-align:center}
.seo-section{padding:82px 0}.seo-section.compact-top{padding-top:28px}.section-intro{max-width:740px;margin-bottom:34px}.section-intro.centered{margin-inline:auto;text-align:center}.section-intro h2,.split-heading h2,.guide-copy h2,.faq-intro h2{margin-top:14px;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(34px,4.3vw,52px);line-height:1.06;letter-spacing:-.045em;font-weight:800}.section-intro p,.split-heading>p,.guide-copy>p,.faq-intro p{margin-top:14px;color:#6f7f96;font-size:17px;line-height:1.65}.section-intro code{color:var(--blue-700);font-size:.9em}
.format-card{display:grid;grid-template-columns:.95fr 1.05fr;gap:28px;align-items:center;padding:28px;border:1px solid var(--border);border-radius:var(--radius-xl);background:#fff;box-shadow:var(--shadow-sm)}.format-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#ecfbf3;color:#18a05e;font-size:9px;font-weight:900;text-transform:uppercase}.format-copy h3{margin-top:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:18px}.format-copy p{margin-top:6px;color:var(--text-secondary);font-size:13px;line-height:1.55}.format-example{padding:18px;border:1px solid #e3e9f2;border-radius:14px;background:#f9fbff}.format-example small{display:block;margin-bottom:7px;color:var(--text-muted);font-size:9px;font-weight:800;text-transform:uppercase}.format-example code{color:var(--blue-700);font-size:13px;word-break:break-all}
.split-heading{display:grid;grid-template-columns:1fr .72fr;align-items:end;gap:50px;margin-bottom:32px}.steps-grid,.mistakes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.step-card,.use-card,.mistake-card{padding:24px;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm);transition:.25s}.step-card:hover,.use-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.step-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--blue-50);color:var(--blue-600);font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:800}.step-card h3,.use-card h3{margin-top:21px;font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;line-height:1.35}.step-card p,.use-card p{margin-top:8px;color:var(--text-secondary);font-size:14px;line-height:1.65}
.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.use-icon,.related-icon{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 9px;border-radius:12px;background:var(--blue-50);color:var(--blue-600);font-family:'Plus Jakarta Sans',sans-serif;font-size:9px;font-weight:900}
.guide-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}.guide-list{display:grid;gap:13px;margin-top:25px}.guide-list>div{display:grid;grid-template-columns:28px 1fr;gap:11px}.guide-list>div>span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:9px;font-weight:900}.guide-list .good{background:#ecfbf3;color:#18a05e}.guide-list .bad{background:#fee2e2;color:#dc2626}.guide-list strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px}.guide-list p{margin-top:3px;color:var(--text-secondary);font-size:12px;line-height:1.5}.guide-list code{color:var(--blue-700)}
.profile-card{padding:26px;border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(180deg,#fff,#fafbff);box-shadow:var(--shadow-md)}.profile-top{display:flex;align-items:center;gap:12px;padding-bottom:17px;border-bottom:1px solid #e8edf4}.fb-avatar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:#1877f2;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:900}.profile-top strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px}.profile-top span{display:block;margin-top:2px;color:var(--text-muted);font-size:11px}.profile-lines{display:grid;gap:9px;margin-top:16px}.profile-lines>div{display:grid;grid-template-columns:100px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid #e7ebf2;border-radius:12px;background:#fff}.profile-lines>div.active{border-color:#cfe0ff;background:#f9fbff}.profile-lines small{color:var(--text-muted);font-size:9px;text-transform:uppercase;font-weight:800}.profile-lines b{font-size:12px}.not-used,.used{font-size:9px;font-weight:800}.not-used{color:#dc2626}.used{color:#18a05e}.profile-result{margin-top:13px;padding:13px;border-radius:12px;background:#0f1f3d;color:#fff}.profile-result small{display:block;margin-bottom:5px;color:rgba(255,255,255,.45);font-size:8px;text-transform:uppercase}.profile-result code{font-size:11px}
.mistake-card code{display:block;margin:12px 0 10px;padding:12px;border-radius:10px;background:#f8faff;color:var(--blue-700);font-size:11px;word-break:break-all}.mistake-card p{color:var(--text-secondary);font-size:13px}.mistake-badge{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase}.mistake-badge.bad{background:#fee2e2;color:#dc2626}.mistake-badge.good{background:#ecfbf3;color:#18a05e}
.related-tools{padding:72px 0}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.related-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:19px;border:1px solid var(--border);border-radius:18px;background:#fff;transition:.25s}.related-card.featured{border-color:#cfe0ff;background:#fbfdff}.related-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.related-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px}.related-card p{margin-top:4px;color:var(--text-muted);font-size:11px;line-height:1.45}.related-arrow{color:var(--blue-600);font-size:18px}
.faq-section{padding:82px 0}.faq-wrap{width:min(1100px,calc(100% - 48px));margin-inline:auto;display:grid;grid-template-columns:.72fr 1.28fr;gap:58px;align-items:start}.faq-list{display:grid;gap:10px}.faq-item{border:1px solid #e6ebf2;border-radius:16px;background:#fff;overflow:hidden}.faq-item[open]{border-color:#d8e3ff;background:#fafdff}.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:16px 18px;cursor:pointer;list-style:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary span{color:var(--blue-600);font-size:19px;transition:.2s}.faq-item[open] summary span{transform:rotate(45deg)}.faq-answer{padding:0 18px 18px;color:var(--text-secondary);font-size:13px;line-height:1.65}.faq-answer code{color:var(--blue-700)}
.cta-section{padding:80px 0 94px}.cta-inner{padding:54px 28px;border:1px solid #e3e8f0;border-radius:var(--radius-xl);background:radial-gradient(circle at 10% 15%,rgba(47,103,246,.08),transparent 28%),radial-gradient(circle at 90% 90%,rgba(116,87,246,.07),transparent 28%),#fff;text-align:center;box-shadow:var(--shadow-sm)}.cta-inner .marketing-eyebrow{margin-inline:auto}.cta-inner h2{max-width:800px;margin:18px auto 0;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(40px,5vw,64px);line-height:1.02;letter-spacing:-.055em}.cta-inner>p{max-width:700px;margin:18px auto 0;color:#6f7f96;font-size:17px;line-height:1.65}.lcta-actions{display:flex;justify-content:center;gap:10px;margin-top:26px}.lcta-btn-primary,.lcta-btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 19px;border-radius:14px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:800}.lcta-btn-primary{background:#2f67f6;color:#fff;box-shadow:0 12px 26px rgba(47,103,246,.22)}.lcta-btn-secondary{border:1px solid #dbe2ec}.cta-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin-top:18px;color:var(--text-muted);font-size:11px;font-weight:600}.cta-trust span::before{content:"✓";color:#18a05e;margin-right:6px;font-weight:900}
@media(max-width:1024px){.hero-grid,.guide-grid{grid-template-columns:1fr}.hero-copy{max-width:760px}.use-grid{grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:1fr}}
@media(max-width:768px){.container{width:min(100% - 40px,1180px)}.tool-hero{padding:54px 0 44px}.hero-copy h1{font-size:clamp(32px,9vw,44px)}.hero-lead{font-size:16px}.generator-card{padding:20px;border-radius:22px;width:100%;max-width:100%}.generator-head{display:block}.privacy-chip{display:inline-flex;margin-top:10px}.seo-section,.related-tools,.faq-section{padding:48px 0}.seo-section.compact-top{padding-top:10px}.format-card,.split-heading{grid-template-columns:1fr}.split-heading{gap:8px}.steps-grid,.use-grid,.mistakes-grid{grid-template-columns:1fr}.section-intro h2,.split-heading h2,.guide-copy h2{font-size:clamp(28px,8vw,34px)}.copy-row{grid-template-columns:1fr}.copy-row input,.live-preview code,.html-wrap code{word-break:break-all;white-space:pre-wrap}.result-actions,.lcta-actions{flex-direction:column}.lcta-btn-primary,.lcta-btn-secondary{width:100%;min-height:48px}.cta-inner{padding:36px 18px}.cta-inner h2{font-size:clamp(28px,8vw,40px)}.profile-lines>div{grid-template-columns:1fr}.hero-trust{display:grid;gap:8px}.username-input,.field input,.field textarea,.generate-btn,.outline-btn{min-height:48px}.related-card{grid-template-columns:auto 1fr;gap:12px}.related-arrow{display:none}}
@media(max-width:480px){.container{width:min(100% - 32px,1180px)}.generator-card{padding:16px}.advanced-heading{flex-direction:column;gap:12px}.preset-row{display:grid;grid-template-columns:1fr 1fr}.format-example code{font-size:12px}}