/* Use the system typeface consistently for controls whose shorthand falls back in older browsers. */
button,textarea,input,select{font-family:inherit}
.seg,.style-choice,.button{font-family:inherit}
.seg{font-size:12px;font-weight:600}
.style-choice{font-size:9px;font-weight:600}
.button{font-size:12px;font-weight:650}
textarea,input[type=url],select{font-size:13px}
.site-cta,.contact-cta{font-size:11px;font-weight:650;color:#246b52;white-space:nowrap}
.contact-cta{border:1px solid #dfe7e1;border-radius:8px;padding:8px 10px}
.language-toggle{border:1px solid #dfe7e1;border-radius:8px;background:#fff;padding:8px 10px;color:#17211f;font:650 11px inherit;cursor:pointer;min-width:38px}
.language-toggle{font-family:inherit;font-size:11px;font-weight:650}
.cookie-open{border:0;background:transparent;color:#246b52;text-decoration:underline;font:inherit;cursor:pointer}
.cookie-dialog{width:min(540px,calc(100% - 32px));border:1px solid #dfe7e1;border-radius:16px;padding:28px;color:#17211f;box-shadow:0 20px 70px #17211f30}
.cookie-dialog::backdrop{background:#17211f70}
.cookie-dialog h2{font-size:21px;letter-spacing:-.5px;margin:12px 0}
.cookie-dialog p{font-size:13px;line-height:1.75;color:#59655f}
.cookie-dialog a{color:#246b52;text-decoration:underline;font-size:12px}
.dialog-close{float:right;border:1px solid #dfe7e1;background:white;border-radius:7px;width:34px;height:34px;font-size:20px;cursor:pointer}
.policy-title{font-size:clamp(36px,5vw,52px);letter-spacing:-2px;margin:18px 0}
.policy-card{padding:30px;margin-top:30px;line-height:1.8;font-size:14px}
.policy-card h2{font-size:18px;margin:28px 0 7px;letter-spacing:-.35px}
.policy-card h2:first-child{margin-top:0}
.policy-card p,.policy-card li{color:#57635d}
.policy-card a{color:#246b52;text-decoration:underline}
.policy-card ul{padding-left:22px}
@media(max-width:980px){.topbar{gap:8px}.topbar nav{gap:12px}.topbar nav a{font-size:11px}}
@media(max-width:760px){.topbar nav{display:none}.site-cta{margin-left:auto}}
@media(max-width:480px){.site-cta{font-size:10px}.contact-cta{display:none}.topbar{padding:0 14px}.brand{font-size:17px}}
.privacy-promise{margin-top:15px;font-size:11px;color:#567363;font-weight:600}
/* Independent dark product hero inspired by the reference's deep navy canvas, blue glow and floating product cards. */
:root{--ink:#101827;--muted:#667085;--line:#e5e9f0;--paper:#f6f8fc;--green:#2167e8;--green-dark:#1854c6;--mint:#edf3ff;--white:#fff;--shadow:0 18px 50px rgba(24,39,75,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
body{background:var(--paper)}
.topbar{position:relative;z-index:2;background:#060b16;color:#f7f9ff;border-bottom:1px solid rgba(192,208,239,.1)}
.brandmark{background:#2878f0;border-radius:50%;box-shadow:0 0 25px rgba(43,125,255,.45)}
.brand-light{color:#aab7cc}.topbar nav{color:#aeb9cb}.topbar nav a:hover,.topbar nav .active{color:#fff}
.free-pill{color:#c5d9ff;background:rgba(48,111,222,.18);border:1px solid rgba(105,158,255,.2)}
.site-cta,.contact-cta{color:#dbe7fc}.contact-cta,.language-toggle{border-color:#344054;background:#0c1423;color:#edf3ff}
.hero{position:relative;isolation:isolate;overflow:hidden;width:100vw;max-width:none;margin-left:calc(50% - 50vw);padding:92px 24px 50px;text-align:center;background:radial-gradient(ellipse at 18% 16%,rgba(0,88,220,.24),transparent 28%),radial-gradient(ellipse at 80% 4%,rgba(34,72,166,.2),transparent 30%),linear-gradient(180deg,#050a14 0%,#071021 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.38;background-image:radial-gradient(circle,rgba(214,228,255,.85) 1px,transparent 1.4px),radial-gradient(circle,rgba(81,139,255,.8) 1px,transparent 1.5px);background-size:127px 113px,181px 157px;background-position:12px 17px,66px 83px;mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%)}
.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;bottom:-185px;transform:translateX(-50%);width:min(1000px,95vw);height:350px;background:radial-gradient(ellipse,rgba(19,87,207,.22),transparent 70%);filter:blur(10px)}
.hero-content{max-width:890px;margin:0 auto;position:relative;z-index:1}.hero .eyebrow{width:max-content;max-width:100%;margin:0 auto 27px;padding:9px 15px;border:1px solid rgba(102,151,243,.42);border-radius:999px;background:rgba(11,25,48,.64);color:#cfdbf0;letter-spacing:.9px;font-size:10px}.hero .dot{background:#57a0ff;box-shadow:0 0 12px #398cff}.hero h1{color:#f7f9ff;font-size:clamp(47px,7vw,82px);font-weight:580;letter-spacing:-4.7px;line-height:1.02;margin:0 auto 19px}.hero h1 span{color:#d1ddf3}.hero .lead{color:#abb7cb;font-size:16px;line-height:1.75;max-width:660px;margin:0 auto}.privacy-promise{display:table;margin:17px auto 0;padding:8px 12px;color:#c6d0e1;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:500}.hero-cta{width:max-content;min-width:216px;margin:25px auto 0!important;gap:28px;justify-content:space-between!important;background:linear-gradient(110deg,#398bff,#1264e8)!important;border-color:#4a91ff!important;border-radius:999px!important;box-shadow:0 10px 30px rgba(18,100,232,.26)}.hero-cta:hover{background:#1d6de8!important}
.hero-cards{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:18px;max-width:920px;margin:65px auto 0;text-align:left}.hero-card{position:relative;min-height:166px;padding:20px;border:1px solid rgba(147,174,223,.17);border-radius:19px;background:linear-gradient(145deg,rgba(20,34,58,.96),rgba(10,19,35,.96));box-shadow:0 20px 50px rgba(0,0,0,.24);color:#f3f6fc}.hero-card-code{min-height:194px;display:grid;grid-template-columns:1fr 112px;grid-template-rows:auto 1fr;column-gap:14px;align-items:center}.hero-card-label{grid-column:1/-1;color:#8d9cb6;font-size:9px;font-weight:700;letter-spacing:1.1px}.hero-card-code #heroQr{width:112px;height:112px;display:grid;place-items:center;padding:7px;border-radius:12px;background:#fff;grid-column:2;grid-row:2}.hero-card-code #heroQr canvas,.hero-card-code #heroQr svg{display:block;max-width:100%;height:auto!important}.hero-card-foot{grid-column:1;grid-row:2;display:flex;align-items:center;gap:9px;font-size:12px;color:#ccd7e9}.hero-check{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(50,137,255,.18);color:#82b7ff}.hero-card-design,.hero-card-free{display:flex;flex-direction:column;justify-content:space-between}.hero-card b{display:block;font-size:13px;letter-spacing:-.15px}.hero-card p{margin:8px 0 0;color:#9baac1;font-size:11px;line-height:1.6}.hero-orbit{width:68px;height:68px;margin:0 auto 15px;position:relative;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(85,146,250,.28);background:radial-gradient(circle,rgba(31,103,226,.24),rgba(14,30,54,.5) 68%);color:#dce9ff;font-size:20px;font-weight:700}.hero-orbit::before,.hero-orbit::after{content:"";position:absolute;border:1px solid rgba(109,159,246,.17);border-radius:50%;inset:-8px}.hero-orbit::after{inset:-16px;border-color:rgba(109,159,246,.1)}.hero-orbit i{position:absolute;width:4px;height:4px;border-radius:50%;background:#7eb6ff;box-shadow:0 0 8px #60a2ff}.hero-orbit i:nth-child(1){top:1px;left:15px}.hero-orbit i:nth-child(2){right:2px;top:22px}.hero-orbit i:nth-child(3){bottom:2px;left:23px}.hero-orbit i:nth-child(4){left:0;bottom:17px}.hero-link-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#8bbaff;background:rgba(42,119,238,.18);border:1px solid rgba(121,173,255,.2);font-size:19px;margin-bottom:16px}
.builder{margin-top:72px}.card{border-color:#e4e9f2;box-shadow:0 18px 48px rgba(26,42,76,.075)}.step-num{color:#2167e8;background:#edf3ff}.segmented{background:#f1f4f9}.seg.active{color:#1458cf}.style-choice:hover,.style-choice.selected{border-color:#4385ed;background:#f4f8ff;color:#1859c8;box-shadow:0 0 0 2px #4385ed16}.textarea:focus,textarea:focus,input:focus,select:focus{border-color:#5e95f1;box-shadow:0 0 0 3px #3985ef20}.button.primary{background:#2167e8;border-color:#2167e8}.button.primary:hover{background:#1854c6}.button:focus-visible,.icon-button:focus-visible,.seg:focus-visible,.style-choice:focus-visible{outline-color:#5694f2}.preview-label{color:#64748b}.live{color:#2167e8}.live i{background:#3987f2}.empty-graphic{background:#f5f8ff;border-color:#d9e2f1;color:#98afd7}.safe-note{background:#f1f6ff;color:#2665c9}.safe-note>span{border-color:#bbd0f5}.text-link{color:#2167e8}.dyn-icon{background:#edf3ff;color:#2167e8}.about-strip{border-color:#e3e8f0}footer{color:#77839a}.privacy-promise{font-family:inherit}
@media(max-width:760px){.hero{padding:74px 19px 38px}.hero-cards{grid-template-columns:1fr 1fr;gap:12px;margin-top:45px}.hero-card-code{grid-column:1/-1;min-height:155px}.hero-card-design,.hero-card-free{min-height:150px}.hero-card-code #heroQr{width:96px;height:96px}.builder{margin-top:45px}}
@media(max-width:480px){.hero{padding:61px 16px 30px}.hero .eyebrow{font-size:8px;margin-bottom:23px}.hero h1{font-size:43px;letter-spacing:-2.7px}.hero .lead{font-size:13px}.privacy-promise{font-size:9px;padding:7px 10px}.hero-cta{min-width:205px}.hero-cards{gap:9px;margin-top:39px}.hero-card{padding:15px;border-radius:15px}.hero-card-code{grid-template-columns:1fr 86px;min-height:134px}.hero-card-code #heroQr{width:86px;height:86px;padding:5px}.hero-card-foot{font-size:10px}.hero-card-label{font-size:8px}.hero-card b{font-size:11px}.hero-card p{font-size:10px}.hero-orbit{width:54px;height:54px;margin-bottom:13px}.builder{margin-top:32px}}
.hero-cta{display:flex;align-items:center;min-height:44px;font-size:12px;line-height:1.2}
html{background:#070d18}
body{overflow-x:clip}
/* Carry the reference's dark, premium product palette through the working app. */
body{background:#070d18;color:#e8eef9}
.builder .card,.dynamic-card,.hero-card{background:#0e1727;border-color:#24324a;color:#e8eef9}
.editor,.preview{box-shadow:0 22px 58px rgba(0,0,0,.22)}
.step-head h2,.dynamic-card h3,.about-strip h2,.safe-note p,.hero-card b{color:#f0f4fc}
.step-head p,.section-copy p,.dynamic-card>p,.about-strip p{color:#a8b5ca}
.step-num{color:#91baff;background:#13294b}
.segmented{background:#091321;border:1px solid #1c2a40}.seg{color:#a9b6ca}.seg.active{background:#1c2c45;color:#fff;box-shadow:0 2px 9px #0005}
.field-label{color:#e2e9f5}.optional,.hint,.fineprint{color:#93a2ba}
textarea,input[type=url],select{background:#091321;border-color:#2a3850;color:#edf3fc}textarea::placeholder,input::placeholder{color:#71819b}textarea:focus,input:focus,select:focus{border-color:#4a8fff;box-shadow:0 0 0 3px #3985ef26}
.divider{background:#243149}.style-choice{background:#0a1423;border-color:#28364c;color:#b6c3d7}.style-choice:hover,.style-choice.selected{background:#142542;border-color:#4a8fff;color:#e9f2ff;box-shadow:0 0 0 2px #4385ed20}
.color-row>label{color:#abb8cc}.color-control input[type=color],.color-control input[type=text]{background:#091321;border-color:#2a3850;color:#e9effa}.editor input[type=file]{color:#aab8cd}.editor input[type=file]::file-selector-button{background:#142036;border-color:#31415c;color:#edf3fc}
.preview-label{color:#9baac1}.live{color:#86b7ff}.icon-button{background:#111d30;border-color:#31415c;color:#c4d3e9}.qr-stage{color:#eaf0fa}.empty-state{color:#aab8cc}.empty-graphic{background:#0a1423;border-color:#34445e;color:#7e9ac2}.empty-state strong{color:#e4ecf8}.empty-state small{color:#9daec7}
.safe-note{background:#101f34;color:#8eb8ff}.safe-note>span{border-color:#38577f}.safe-note b{color:#e8effb}.safe-note small{color:#9baac1}.button.secondary{background:#111d30;border-color:#31415c;color:#e6edf9}.button.secondary:hover:not(:disabled){background:#192a43;border-color:#5485ce}
.dynamic-section{color:#e9effa}.section-copy h2,.section-copy h2 span{color:#f2f6ff}.text-link{color:#83b4ff}.dyn-icon{background:#14294a;color:#8ab7ff}.dynamic-card input[type=url]{background:#091321;color:#edf3fc}.dyn-result{color:#8bb9ff}.about-strip{border-color:#25334a}.about-strip .eyebrow{color:#94a8c5}
footer{background:#070d18;color:#91a0b6}footer .small-brand{color:#edf3fc}footer a:hover{color:#fff}.cookie-open{color:#91bbff}.cookie-dialog{background:#0e1727;border-color:#2a3951;color:#eef3fb}.cookie-dialog p{color:#adbbd0}.dialog-close{background:#15233a;color:#eff4fb;border-color:#354660}.policy-card{background:#0e1727;border-color:#28364e}.policy-card h2,.policy-title{color:#f1f5fc}.policy-card p,.policy-card li{color:#b4c0d2}.policy-card a{color:#91bbff}
.color-control input:not([type=color]){background:#091321;border-color:#2a3850;color:#e9effa}
/* Header refinement, more readable UI scale, and subtle motion in the star field. */
.topbar{gap:clamp(10px,1.65vw,23px);justify-content:flex-start}.topbar nav{margin-left:auto;gap:clamp(18px,2.2vw,32px)}.topbar nav a{font-size:13px}.brand{white-space:nowrap}.site-cta{display:inline-flex;align-items:center;gap:9px;margin-left:0;margin-right:4px;padding:10px 14px;border:1px solid rgba(107,161,255,.36);border-radius:999px;background:linear-gradient(115deg,rgba(39,111,231,.24),rgba(25,57,112,.25));color:#f1f6ff!important;font-size:13px!important;font-weight:750!important;letter-spacing:.1px;box-shadow:inset 0 1px rgba(255,255,255,.06);transition:background .18s,border-color .18s,transform .18s}.site-cta:hover{background:linear-gradient(115deg,rgba(49,132,255,.39),rgba(33,72,140,.36));border-color:rgba(137,183,255,.68);transform:translateY(-1px)}.site-arrow{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#347ce5;color:#fff;font-size:12px}.contact-cta{font-size:13px!important;padding:10px 14px;border-radius:999px;border-color:#344763;color:#eaf1fd}.free-pill{font-size:12px}.language-toggle{font-size:12px;min-width:42px;padding:9px 11px}.hero::before{animation:starfield-drift 48s linear infinite}.hero::after{animation:blue-glow 12s ease-in-out infinite alternate}@keyframes starfield-drift{from{background-position:12px 17px,66px 83px}to{background-position:139px 130px,247px 240px}}@keyframes blue-glow{from{opacity:.52;transform:translateX(-52%) scale(.96)}to{opacity:.9;transform:translateX(-48%) scale(1.05)}}
.hero .lead{font-size:18px}.privacy-promise{font-size:12px}.hero-card-foot{font-size:13px}.hero-card b{font-size:14px}.hero-card p{font-size:12px}.hero-card-label{font-size:10px}
.step-head h2{font-size:16px}.step-head p,.dynamic-card>p{font-size:13px}.field-label{font-size:12px}.optional{font-size:11px}.hint,.fineprint{font-size:11px}.style-choice{font-size:10px}.color-row>label{font-size:11px}.color-control input:not([type=color]){font-size:12px}.seg{font-size:13px}.textarea,input[type=url],select{font-size:14px}.button{font-size:13px}.preview-label{font-size:10px}.live{font-size:11px}.empty-state strong{font-size:14px}.empty-state small{font-size:12px}.safe-note b{font-size:11px}.safe-note small{font-size:10px}.scan-warning{font-size:11px}.section-copy p,.about-strip p{font-size:14px}.text-link{font-size:13px}.dynamic-card h3{font-size:17px}.about-strip h2{font-size:24px}footer{font-size:11px}
@media(max-width:850px){.topbar nav{gap:15px}.topbar nav a{font-size:12px}.topbar{gap:10px}.site-cta,.contact-cta{font-size:12px!important;padding:8px 11px}}
@media(max-width:760px){.topbar nav{display:none}.site-cta{margin-left:auto}.topbar{gap:9px}}
@media(max-width:480px){.site-cta{font-size:11px!important;padding:8px 10px}.contact-cta{display:none}.topbar{padding:0 14px}.brand{font-size:17px}.hero .lead{font-size:14px}.privacy-promise{font-size:10px}.hero-card b{font-size:12px}.hero-card p{font-size:11px}.step-head h2{font-size:15px}.step-head p{font-size:12px}.field-label{font-size:12px}.hint,.fineprint{font-size:10px}.style-choice{font-size:9px}.button{font-size:12px}.section-copy p,.about-strip p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after,.site-cta{animation:none;transition:none}}
/* Irregular round star points and delicate cross-shaped glints, closer to the reference sky. */
.hero::before{opacity:.78;background-image:radial-gradient(circle,#f4f8ff 0 1.2px,transparent 1.8px),radial-gradient(circle,#95baff 0 1.5px,transparent 2.2px),radial-gradient(circle,#dbe8ff 0 1px,transparent 1.7px),radial-gradient(circle,#82aaff 0 1.1px,transparent 1.8px),radial-gradient(circle,#f4f8ff 0 1.4px,transparent 2px),radial-gradient(circle,#9bc2ff 0 1px,transparent 1.8px),radial-gradient(circle,#edf4ff 0 1.1px,transparent 1.8px),radial-gradient(circle,#739eff 0 1.5px,transparent 2.2px),radial-gradient(circle,#fff 0 1px,transparent 1.7px),radial-gradient(circle,#a8c8ff 0 1.1px,transparent 1.8px),radial-gradient(circle,#dce9ff 0 1.3px,transparent 2px),radial-gradient(circle,#83aaff 0 1px,transparent 1.7px),radial-gradient(circle,#fff 0 1.1px,transparent 1.8px),radial-gradient(circle,#a7c8ff 0 1.4px,transparent 2px),radial-gradient(circle,#edf4ff 0 1px,transparent 1.7px),radial-gradient(circle,#739eff 0 1.1px,transparent 1.8px),radial-gradient(circle,#fff 0 1.4px,transparent 2px),radial-gradient(circle,#94b9ff 0 1px,transparent 1.8px),radial-gradient(circle,#eaf2ff 0 1.1px,transparent 1.8px),radial-gradient(circle,#7faaff 0 1.3px,transparent 2px),linear-gradient(#dbe8ff,#dbe8ff),linear-gradient(#dbe8ff,#dbe8ff),linear-gradient(#a7c8ff,#a7c8ff),linear-gradient(#a7c8ff,#a7c8ff);background-position:7% 14%,18% 42%,28% 19%,39% 58%,49% 11%,58% 36%,68% 17%,77% 49%,88% 20%,95% 39%,12% 70%,23% 85%,34% 74%,45% 92%,55% 67%,64% 86%,74% 72%,84% 91%,92% 68%,4% 53%,29% 35%,29% 35%,72% 30%,72% 30%;background-size:4px 4px,5px 5px,4px 4px,4px 4px,5px 5px,4px 4px,4px 4px,5px 5px,4px 4px,4px 4px,5px 5px,4px 4px,4px 4px,5px 5px,4px 4px,4px 4px,5px 5px,4px 4px,4px 4px,4px 4px,1px 9px,9px 1px,1px 7px,7px 1px;background-repeat:no-repeat;animation:starfield-float 10s ease-in-out infinite alternate}
@keyframes starfield-float{from{opacity:.62;transform:translate3d(0,2px,0)}to{opacity:1;transform:translate3d(0,-5px,0)}}
/* Bump interface copy and supporting text while keeping the QR artwork crisp. */
.topbar nav a{font-size:14px}.site-cta,.contact-cta{font-size:14px!important}.free-pill{font-size:13px}.language-toggle{font-size:13px}.hero .eyebrow{font-size:11px}.hero .lead{font-size:20px}.privacy-promise{font-size:13px}.hero-card-label{font-size:11px}.hero-card-foot{font-size:14px}.hero-card b{font-size:15px}.hero-card p{font-size:13px}.step-head h2{font-size:17px}.step-head p,.dynamic-card>p{font-size:14px}.field-label{font-size:13px}.optional{font-size:12px}.hint,.fineprint{font-size:12px}.style-choice{font-size:11px}.color-row>label{font-size:12px}.color-control input:not([type=color]){font-size:13px}.seg{font-size:14px}.textarea,input[type=url],select{font-size:15px}.button{font-size:14px}.preview-label{font-size:11px}.live{font-size:12px}.empty-state strong{font-size:15px}.empty-state small{font-size:13px}.safe-note b{font-size:12px}.safe-note small{font-size:11px}.scan-warning{font-size:12px}.section-copy p,.about-strip p{font-size:15px}.text-link{font-size:14px}.dynamic-card h3{font-size:18px}.about-strip h2{font-size:25px}footer{font-size:12px}.cookie-dialog p{font-size:14px}.policy-card{font-size:15px}.policy-card h2{font-size:19px}
@media(max-width:850px){.topbar nav a{font-size:13px}.site-cta,.contact-cta{font-size:13px!important}}
@media(max-width:480px){.topbar nav a{font-size:12px}.site-cta{font-size:12px!important}.hero .eyebrow{font-size:9px}.hero .lead{font-size:15px}.privacy-promise{font-size:11px}.hero-card-label{font-size:9px}.hero-card-foot{font-size:11px}.hero-card b{font-size:13px}.hero-card p{font-size:12px}.step-head h2{font-size:16px}.step-head p{font-size:13px}.field-label{font-size:12px}.hint,.fineprint{font-size:11px}.style-choice{font-size:10px}.button{font-size:13px}.section-copy p,.about-strip p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none}}
/* Individual circular stars drift on separate, offset paths instead of moving as a grid. */
.hero::before{background-image:none;animation:none}.starfield{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%)}.starfield i{position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;background:#eef5ff;box-shadow:0 0 6px 1px rgba(145,186,255,.52);animation:star-irregular var(--speed,9s) ease-in-out var(--delay,0s) infinite alternate;will-change:transform,opacity}.starfield i:nth-child(1){left:7%;top:18%}.starfield i:nth-child(2){left:16%;top:42%}.starfield i:nth-child(3){left:27%;top:20%}.starfield i:nth-child(4){left:39%;top:57%}.starfield i:nth-child(5){left:49%;top:11%}.starfield i:nth-child(6){left:59%;top:35%}.starfield i:nth-child(7){left:69%;top:16%}.starfield i:nth-child(8){left:78%;top:48%}.starfield i:nth-child(9){left:89%;top:22%}.starfield i:nth-child(10){left:95%;top:39%}.starfield i:nth-child(11){left:11%;top:71%}.starfield i:nth-child(12){left:22%;top:85%}.starfield i:nth-child(13){left:34%;top:73%}.starfield i:nth-child(14){left:45%;top:93%}.starfield i:nth-child(15){left:55%;top:66%}.starfield i:nth-child(16){left:65%;top:86%}.starfield i:nth-child(17){left:75%;top:70%}.starfield i:nth-child(18){left:84%;top:91%}.starfield i:nth-child(19){left:92%;top:68%}.starfield i:nth-child(20){left:4%;top:53%}.starfield i:nth-child(21){left:31%;top:34%}.starfield i:nth-child(22){left:73%;top:30%}.starfield i:nth-child(23){left:53%;top:48%}.starfield i:nth-child(24){left:24%;top:62%}.starfield i:nth-child(25){left:82%;top:58%}.starfield i:nth-child(26){left:42%;top:27%}.starfield i:nth-child(27){left:62%;top:8%}.starfield i:nth-child(28){left:9%;top:88%}.starfield i:nth-child(29){left:97%;top:82%}.starfield i:nth-child(30){left:36%;top:88%}
.starfield i:nth-child(3n){--speed:13.8s;--delay:-6s;--dx:11px;--dy:-15px}.starfield i:nth-child(3n+1){--speed:7.1s;--delay:-2.7s;--dx:-9px;--dy:12px}.starfield i:nth-child(3n+2){--speed:10.4s;--delay:-8.3s;--dx:5px;--dy:17px}.starfield i:nth-child(5n){width:3px;height:3px;box-shadow:0 0 9px 2px rgba(116,167,255,.7)}.starfield i:nth-child(7n)::before,.starfield i:nth-child(7n)::after{content:"";position:absolute;left:50%;top:50%;background:rgba(202,223,255,.75);border-radius:50%;transform:translate(-50%,-50%)}.starfield i:nth-child(7n)::before{width:1px;height:9px}.starfield i:nth-child(7n)::after{width:9px;height:1px}
@keyframes star-irregular{0%{transform:translate3d(0,0,0) scale(.72);opacity:.36}37%{opacity:.9}68%{transform:translate3d(calc(var(--dx)*.48),calc(var(--dy)*.7),0) scale(1.05);opacity:.58}100%{transform:translate3d(var(--dx),var(--dy),0) scale(.78);opacity:.82}}
.seo-faq{padding:82px 3.5% 92px;max-width:900px;margin:0 auto}.seo-faq h2{font-size:clamp(28px,4vw,38px);letter-spacing:-1.3px;color:#f2f6ff;margin:14px 0 8px}.faq-intro{font-size:15px;color:#a8b5ca;line-height:1.65;margin:0 0 25px}.faq-list{border-top:1px solid #27364d}.faq-list details{border-bottom:1px solid #27364d;padding:0 2px}.faq-list summary{cursor:pointer;list-style:none;position:relative;padding:19px 40px 19px 0;color:#edf3ff;font-size:16px;font-weight:650}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";position:absolute;right:8px;top:14px;font-size:22px;font-weight:400;color:#8db7ff}.faq-list details[open] summary::after{content:"−"}.faq-list p{max-width:760px;margin:0;padding:0 30px 19px 0;color:#b3bfd1;font-size:14px;line-height:1.75}
@media(max-width:600px){.seo-faq{padding:60px 5%}.faq-list summary{font-size:15px;padding:17px 34px 17px 0}.faq-list p{font-size:13px}.starfield i{box-shadow:0 0 5px 1px rgba(145,186,255,.45)}}
@media(prefers-reduced-motion:reduce){.starfield i{animation:none!important;opacity:.72;transform:none}}
/* Desynchronise every star with its own travel vector, duration, and phase. */
.starfield i:nth-child(1){--dx:-8px;--dy:13px;--speed:7.4s;--delay:-1.1s}.starfield i:nth-child(2){--dx:13px;--dy:-6px;--speed:12.8s;--delay:-7.6s}.starfield i:nth-child(3){--dx:-5px;--dy:-16px;--speed:9.3s;--delay:-3.4s}.starfield i:nth-child(4){--dx:9px;--dy:8px;--speed:15.2s;--delay:-10.8s}.starfield i:nth-child(5){--dx:-14px;--dy:5px;--speed:6.8s;--delay:-4.2s}.starfield i:nth-child(6){--dx:6px;--dy:18px;--speed:11.7s;--delay:-8.1s}.starfield i:nth-child(7){--dx:12px;--dy:-12px;--speed:8.6s;--delay:-2.8s}.starfield i:nth-child(8){--dx:-10px;--dy:-8px;--speed:14.1s;--delay:-11.5s}.starfield i:nth-child(9){--dx:4px;--dy:15px;--speed:10.1s;--delay:-5.7s}.starfield i:nth-child(10){--dx:-16px;--dy:-4px;--speed:7.9s;--delay:-6.3s}.starfield i:nth-child(11){--dx:7px;--dy:-18px;--speed:13.2s;--delay:-9.7s}.starfield i:nth-child(12){--dx:15px;--dy:7px;--speed:9.8s;--delay:-1.9s}.starfield i:nth-child(13){--dx:-7px;--dy:11px;--speed:16.4s;--delay:-13.1s}.starfield i:nth-child(14){--dx:10px;--dy:-10px;--speed:6.5s;--delay:-3.8s}.starfield i:nth-child(15){--dx:-12px;--dy:16px;--speed:12.3s;--delay:-10.2s}.starfield i:nth-child(16){--dx:5px;--dy:-7px;--speed:8.2s;--delay:-5.1s}.starfield i:nth-child(17){--dx:-15px;--dy:9px;--speed:14.8s;--delay:-12.7s}.starfield i:nth-child(18){--dx:8px;--dy:14px;--speed:10.7s;--delay:-4.6s}.starfield i:nth-child(19){--dx:-6px;--dy:-14px;--speed:7.2s;--delay:-8.9s}.starfield i:nth-child(20){--dx:14px;--dy:4px;--speed:13.7s;--delay:-2.2s}.starfield i:nth-child(21){--dx:-9px;--dy:17px;--speed:9.1s;--delay:-11.2s}.starfield i:nth-child(22){--dx:11px;--dy:-9px;--speed:15.7s;--delay:-6.8s}.starfield i:nth-child(23){--dx:-13px;--dy:-5px;--speed:8.9s;--delay:-1.5s}.starfield i:nth-child(24){--dx:6px;--dy:12px;--speed:11.2s;--delay:-7.1s}.starfield i:nth-child(25){--dx:-4px;--dy:-17px;--speed:6.9s;--delay:-12.1s}.starfield i:nth-child(26){--dx:16px;--dy:6px;--speed:13.4s;--delay:-4.9s}.starfield i:nth-child(27){--dx:-10px;--dy:10px;--speed:9.6s;--delay:-9.2s}.starfield i:nth-child(28){--dx:7px;--dy:-13px;--speed:15.1s;--delay:-3.1s}.starfield i:nth-child(29){--dx:-12px;--dy:8px;--speed:10.5s;--delay:-13.6s}.starfield i:nth-child(30){--dx:13px;--dy:-11px;--speed:7.7s;--delay:-5.4s}
/* Faster, clearly visible independent star drift. */
.starfield i{animation-duration:var(--fast-speed,3.8s);box-shadow:0 0 8px 2px rgba(145,186,255,.72)}
.starfield i:nth-child(1n){--fast-speed:2.9s}.starfield i:nth-child(2n){--fast-speed:3.7s}.starfield i:nth-child(3n){--fast-speed:4.3s}.starfield i:nth-child(4n){--fast-speed:3.2s}.starfield i:nth-child(5n){--fast-speed:4.8s}.starfield i:nth-child(6n){--fast-speed:3.5s}.starfield i:nth-child(7n){--fast-speed:4.1s}
@keyframes star-irregular{0%{transform:translate3d(0,0,0) scale(.7);opacity:.35}28%{transform:translate3d(calc(var(--dx)*-1.1),calc(var(--dy)*.65),0) scale(1.08);opacity:.95}61%{transform:translate3d(calc(var(--dx)*.45),calc(var(--dy)*-1.15),0) scale(.8);opacity:.62}100%{transform:translate3d(calc(var(--dx)*1.65),calc(var(--dy)*1.5),0) scale(1);opacity:.9}}
@media(prefers-reduced-motion:reduce){.starfield i{animation:none!important}}
/* Varied field: different star sizes, paths and independent tempos. */
.starfield i{width:2px;height:2px}
.starfield i:nth-child(4n){width:1px;height:1px;opacity:.65}
.starfield i:nth-child(5n){width:4px;height:4px;box-shadow:0 0 12px 3px rgba(145,186,255,.78)}
.starfield i:nth-child(7n){width:3px;height:3px}
.starfield i:nth-child(1){animation:star-drift-a 8.5s ease-in-out -3s infinite}
.starfield i:nth-child(2){animation:star-drift-b 14s ease-in-out -9s infinite}
.starfield i:nth-child(3){animation:star-drift-c 6s ease-in-out -1s infinite}
.starfield i:nth-child(4){animation:star-drift-b 18s ease-in-out -12s infinite}
.starfield i:nth-child(5){animation:star-drift-a 11s ease-in-out -7s infinite}
.starfield i:nth-child(6){animation:star-drift-c 9s ease-in-out -4s infinite}
.starfield i:nth-child(7){animation:star-drift-b 12s ease-in-out -10s infinite}
.starfield i:nth-child(8){animation:star-drift-a 7s ease-in-out -2s infinite}
.starfield i:nth-child(9){animation:star-drift-c 16s ease-in-out -13s infinite}
.starfield i:nth-child(10){animation:star-drift-b 10s ease-in-out -6s infinite}
.starfield i:nth-child(11){animation:star-drift-a 13s ease-in-out -8s infinite}
.starfield i:nth-child(12){animation:star-drift-c 7.5s ease-in-out -5s infinite}
.starfield i:nth-child(13){animation:star-drift-b 20s ease-in-out -15s infinite}
.starfield i:nth-child(14){animation:star-drift-a 9.5s ease-in-out -4s infinite}
.starfield i:nth-child(15){animation:star-drift-c 12s ease-in-out -9s infinite}
.starfield i:nth-child(16){animation:star-drift-b 6.5s ease-in-out -2s infinite}
.starfield i:nth-child(17){left:71%;top:24%;width:3px;height:3px;animation:star-streak 10s linear 2s infinite;box-shadow:0 0 10px 2px #b9d8ff}
.starfield i:nth-child(18){animation:star-drift-a 15s ease-in-out -11s infinite}
.starfield i:nth-child(19){animation:star-drift-c 8s ease-in-out -3s infinite}
.starfield i:nth-child(20){animation:star-drift-b 17s ease-in-out -14s infinite}
.starfield i:nth-child(21){animation:star-drift-a 6.8s ease-in-out -5s infinite}
.starfield i:nth-child(22){animation:star-drift-c 13s ease-in-out -10s infinite}
.starfield i:nth-child(23){animation:star-drift-b 9s ease-in-out -6s infinite}
.starfield i:nth-child(24){animation:star-drift-a 19s ease-in-out -16s infinite}
.starfield i:nth-child(25){animation:star-drift-c 10.5s ease-in-out -7s infinite}
.starfield i:nth-child(26){animation:star-drift-b 7.8s ease-in-out -3s infinite}
.starfield i:nth-child(27){animation:star-drift-a 14.5s ease-in-out -12s infinite}
.starfield i:nth-child(28){animation:star-drift-c 5.8s ease-in-out -2s infinite}
.starfield i:nth-child(29){animation:star-drift-b 11.5s ease-in-out -8s infinite}
.starfield i:nth-child(30){animation:star-drift-a 16.5s ease-in-out -13s infinite}
@keyframes star-drift-a{0%,100%{transform:translate(0,0);opacity:.35}30%{transform:translate(22px,-18px);opacity:.95}68%{transform:translate(-13px,24px);opacity:.55}}
@keyframes star-drift-b{0%,100%{transform:translate(0,0);opacity:.45}24%{transform:translate(-28px,12px);opacity:.8}57%{transform:translate(18px,-27px);opacity:.35}82%{transform:translate(34px,19px);opacity:.9}}
@keyframes star-drift-c{0%,100%{transform:translate(0,0) scale(.8);opacity:.4}38%{transform:translate(12px,30px) scale(1.15);opacity:1}74%{transform:translate(-24px,-14px) scale(.72);opacity:.55}}
.starfield i:nth-child(17)::after{content:"";position:absolute;width:74px;height:2px;right:2px;top:50%;transform:translateY(-50%) rotate(-17deg);transform-origin:right center;background:linear-gradient(90deg,transparent,rgba(156,198,255,.78));filter:blur(.5px)}
@keyframes star-streak{0%,8%{transform:translate(0,0);opacity:0}10%{opacity:1}32%{transform:translate(-480px,145px);opacity:.95}36%,100%{transform:translate(-520px,160px);opacity:0}}
@media(prefers-reduced-motion:reduce){.starfield i{animation:none!important}.starfield i:nth-child(17)::after{display:none}}
/* Occasional full-field meteors: each crosses the entire hero and exits the viewport. */
.starfield i:nth-child(17){left:76%;top:18%;animation:meteor-left 13s linear 1.3s infinite}
.starfield i:nth-child(20){left:-2%;top:36%;animation:meteor-right 17s linear 4.8s infinite}
.starfield i:nth-child(23){left:91%;top:55%;animation:meteor-left-low 19s linear 7s infinite}
.starfield i:nth-child(26){left:18%;top:78%;animation:meteor-right-high 15s linear 10s infinite}
.starfield i:nth-child(17)::after,.starfield i:nth-child(23)::after{content:"";position:absolute;width:125px;height:2px;right:2px;top:50%;transform:translateY(-50%) rotate(-14deg);transform-origin:right center;background:linear-gradient(90deg,transparent,rgba(161,202,255,.86));filter:blur(.6px)}
.starfield i:nth-child(20)::after,.starfield i:nth-child(26)::after{content:"";position:absolute;width:105px;height:2px;left:2px;top:50%;transform:translateY(-50%) rotate(-12deg);transform-origin:left center;background:linear-gradient(90deg,rgba(161,202,255,.82),transparent);filter:blur(.6px)}
@keyframes meteor-left{0%,3%{transform:translate(0,0);opacity:0}5%{opacity:1}24%{transform:translate(-145vw,58vh);opacity:1}27%,100%{transform:translate(-155vw,62vh);opacity:0}}
@keyframes meteor-right{0%,3%{transform:translate(0,0);opacity:0}5%{opacity:1}24%{transform:translate(145vw,-37vh);opacity:1}27%,100%{transform:translate(155vw,-42vh);opacity:0}}
@keyframes meteor-left-low{0%,3%{transform:translate(0,0);opacity:0}5%{opacity:1}24%{transform:translate(-145vw,35vh);opacity:1}27%,100%{transform:translate(-155vw,40vh);opacity:0}}
@keyframes meteor-right-high{0%,3%{transform:translate(0,0);opacity:0}5%{opacity:1}24%{transform:translate(145vw,-55vh);opacity:1}27%,100%{transform:translate(155vw,-60vh);opacity:0}}
@media(prefers-reduced-motion:reduce){.starfield i:nth-child(17),.starfield i:nth-child(20),.starfield i:nth-child(23),.starfield i:nth-child(26){animation:none!important;opacity:.65}.starfield i::after{display:none!important}}
.starfield i:nth-child(17)::after,.starfield i:nth-child(20)::after,.starfield i:nth-child(23)::after,.starfield i:nth-child(26)::after{display:none}
/* Keep all grid/flex children within the viewport, including QR exports on phones. */
.builder > *, .hero-cards > *, .color-row > *, .safe-note p {min-width:0}
.color-control input:not([type=color]) {min-width:0;width:95px;max-width:100%;flex:1}
.preview, .editor, .preview-bottom, .qr-stage {min-width:0;max-width:100%}
#qr {min-width:0;max-width:100%;width:328px}
#qr canvas, #qr svg {display:block;width:100%!important;max-width:300px;height:auto!important}
.download-row .button {min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.4;padding:10px 12px}
.safe-note p, .empty-state, .about-strip p, .faq-list p, footer {overflow-wrap:anywhere}
@media(max-width:850px){.builder{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.download-row{flex-direction:column}.download-row .button{width:100%;min-height:48px}.color-control input[type=text]{min-width:0;max-width:100%;flex:1}.color-control input[type=color]{flex:none}.empty-graphic{max-width:100%}.hero-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.safe-note>span{flex:none}}
@media(max-width:360px){.topbar{gap:8px;padding-inline:10px}.site-cta{padding:8px 10px;gap:5px}.site-arrow{display:none}.hero h1{font-size:38px}.editor,.preview{padding:16px}.style-grid{gap:4px}}
@media(max-width:1220px){.hero{width:calc(100% + 48px);margin-left:-24px}}
@media(max-width:560px){.hero{width:calc(100% + 30px);margin-left:-15px}}
