:root {
  color-scheme: dark;
  --bg: #030813;
  --panel: rgba(3, 12, 26, .82);
  --border: rgba(46, 145, 240, .42);
  --border-faint: rgba(52, 131, 215, .21);
  --text: #f6f9ff;
  --muted: #9db4d1;
  --cyan: #04e5f5;
  --blue: #2478ff;
  --mono: 'Space Mono', ui-monospace, Consolas, monospace;
  --sans: 'DM Sans', Inter, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); overflow-x: hidden; }
a,button,input,select,textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #52edff; outline-offset: 4px; }
input, select, textarea { width: 100%; border: 1px solid rgba(61, 139, 218, .32); background: rgba(7, 21, 43, .82); color: #eff7ff; border-radius: 14px; padding: 14px 15px; font: 15px/1.4 var(--sans); }
textarea { resize: vertical; min-height: 120px; }
select { appearance: none; }
label span { display:block; margin-bottom: 8px; font: 12px/1.6 var(--mono); letter-spacing: 1.2px; color: #9ec2e7; }
small { color:#88a9cf; }
.hidden { display: none !important; }
.ambient-scene { position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 70% 18%,rgba(1,45,109,.17),transparent 44%), linear-gradient(115deg,#020811 10%,#041023 60%,#020813 100%); }
.ambient-scene::after { content:""; position:absolute; inset:0; opacity:.14; background-image: linear-gradient(rgba(31,108,194,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(31,108,194,.08) 1px,transparent 1px); background-size: 95px 95px; mask-image:linear-gradient(to right,transparent,black 70%); }
.page-shell { max-width: 1740px; min-height: 100vh; padding: 20px clamp(20px,2.2vw,42px) 14px; margin: 0 auto; }
.site-header { position: relative; z-index: 4; display:flex; align-items:center; justify-content:space-between; gap:22px; min-height: 78px; }
.brand { display:inline-flex; align-items:center; flex-shrink:0; }
.brand img { width:auto; height:56px; filter:drop-shadow(0 0 14px rgba(11,170,255,.16)); }
.top-nav { display:flex; align-items:center; gap:13px; justify-content:center; font:11px/1 var(--mono); letter-spacing:2px; color:#b7d3ef; text-transform:uppercase; flex-wrap:wrap; }
.top-nav i { color: rgba(112,154,204,.44); font-style: normal; }
.back-link { flex-shrink:0; display:inline-flex; align-items:center; gap:10px; padding: 13px 16px; border-radius: 14px; border:1px solid rgba(41,113,205,.48); background: rgba(7, 20, 39, .72); color:#f3f8ff; font-size:18px; font-weight:500; }
.back-link:hover { border-color:#4dbefb; box-shadow:0 0 0 1px rgba(77,190,251,.12),0 0 22px rgba(22,119,255,.08); }
.back-link svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.88fr); gap:clamp(26px,3vw,42px); border:1px solid rgba(48,137,230,.36); border-radius:28px; background:linear-gradient(180deg,rgba(2,11,25,.84),rgba(2,10,22,.93)); padding:70px clamp(18px,3vw,38px) 34px; }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(2,8,19,.86) 0%,rgba(2,8,19,.32) 58%,rgba(2,8,19,.56) 100%); }
.hero-visual { position:absolute; inset:-18px -12vw -24px 44%; opacity:.92; background:
    radial-gradient(circle at 40% 30%, rgba(53,135,255,.28), transparent 12%),
    radial-gradient(circle at 58% 44%, rgba(255,255,255,.15), transparent 2%),
    radial-gradient(circle at 62% 18%, rgba(255,255,255,.22), transparent 1.8%),
    repeating-radial-gradient(circle at 60% 28%, rgba(77,155,255,.18) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0));
  background-repeat:no-repeat; }
.hero-content,.why-card { position:relative; z-index:1; }
.eyebrow { display:flex; gap:13px; align-items:center; flex-wrap:wrap; font:11px/1.7 var(--mono); letter-spacing:2.3px; color:#9fc5f1; margin-bottom:38px; }
.eyebrow strong { font-weight:700; color:#eaf7ff; }
h1 { margin:0 0 16px; font-size:clamp(50px,5.5vw,90px); line-height:.95; letter-spacing:-4.6px; font-weight:800; color:#fff; }
h1 span { display:inline-block; background:linear-gradient(135deg,#12f0ff,#2b78ff 75%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { max-width:710px; margin:0 0 24px; font-size:clamp(16px,1.18vw,21px); line-height:1.68; color:#c1d5ee; }
.quick-actions { display:flex; gap:10px; flex-wrap:wrap; }
.chip { min-height:42px; padding:0 15px; border-radius:999px; border:1px solid rgba(42,126,214,.28); background: rgba(7, 24, 48, .72); color:#eff8ff; font:600 13px/1 var(--sans); }
.chip.active,.chip:hover { background:linear-gradient(135deg, rgba(23,150,255,.2), rgba(15,227,246,.2)); border-color: rgba(82, 192, 255, .52); }
.why-card { border:1px solid rgba(44,133,232,.36); border-radius:22px; padding:18px; background:linear-gradient(180deg,rgba(4,14,30,.82),rgba(3,12,27,.93)); backdrop-filter:blur(10px); box-shadow:0 16px 40px rgba(0,0,0,.26); }
.card-heading,.panel-header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:14px; }
.card-heading h2,.panel-header h2 { margin:0; font:12px/1.4 var(--mono); letter-spacing:1.7px; font-weight:700; color:#eff6ff; }
.card-heading span { display:block; height:2px; width:48px; border-radius:999px; background:linear-gradient(90deg,transparent,var(--cyan),var(--blue)); }
.panel-header span { color:#80a3c7; font:11px/1.5 var(--mono); letter-spacing:1.3px; }
.benefit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.benefit-card { display:flex; gap:12px; min-height:122px; border:1px solid rgba(32,104,188,.3); border-radius:18px; padding:16px; background:linear-gradient(180deg,rgba(6,19,40,.78),rgba(3,11,24,.92)); }
.benefit-icon { width:54px; height:54px; flex:0 0 54px; border-radius:16px; border:1px solid rgba(34,135,238,.42); background:rgba(6,25,50,.75); display:grid; place-items:center; color:#1bbfff; }
.benefit-icon svg,.strip-icon svg { width:26px; height:26px; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.benefit-card h3 { margin:2px 0 6px; font-size:17px; color:#fff; }
.benefit-card p { margin:0; color:#9db5d1; line-height:1.55; font-size:14px; }
.studio-grid { display:grid; grid-template-columns:minmax(0, 1.02fr) minmax(340px, .98fr); gap:18px; margin-top:20px; }
.panel { border:1px solid rgba(48,137,230,.36); border-radius:22px; padding:18px; background:linear-gradient(180deg,rgba(4,14,30,.84),rgba(3,11,24,.93)); box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.02); }
.tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.tab { min-height:40px; padding:0 14px; border-radius:12px; border:1px solid rgba(42,126,214,.28); background: rgba(7,24,48,.72); color:#f0f7ff; font:600 14px/1 var(--sans); }
.tab.active,.tab:hover { background:linear-gradient(135deg, rgba(23,150,255,.18), rgba(15,227,246,.18)); border-color: rgba(82,192,255,.52); }
.form-grid { display:grid; gap:18px; }
.form-section { display:grid; gap:14px; }
.divider { height:1px; background:linear-gradient(90deg, transparent, rgba(42,126,214,.3), transparent); }
.settings-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.checkbox-row { display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius:14px; border:1px solid rgba(61,139,218,.24); background:rgba(7,21,43,.4); }
.checkbox-row input { width:18px; height:18px; accent-color: var(--cyan); }
.helper-box { border-radius:18px; border:1px solid rgba(42,126,214,.24); padding:16px; background:rgba(7,24,48,.52); }
.helper-box strong { display:block; margin-bottom:6px; font-size:15px; }
.helper-box p { margin:0; color:#98b7d8; line-height:1.7; }
.preview-card { border:1px solid rgba(32,104,188,.28); border-radius:20px; padding:18px; background:linear-gradient(180deg,rgba(6,19,40,.78),rgba(3,11,24,.92)); }
.preview-meta { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.preview-meta strong { display:block; font-size:20px; margin-bottom:4px; }
.preview-meta small { display:block; max-width: 420px; word-break: break-word; color:#93b4d8; }
.status-dot { display:inline-flex; align-items:center; gap:8px; font:11px/1 var(--mono); letter-spacing:1.2px; color:#b8d8f8; }
.status-dot span { width:10px; height:10px; border-radius:50%; background: radial-gradient(circle at center, #12f0ff, #2478ff); box-shadow:0 0 18px rgba(18,240,255,.48); }
.qr-stage { display:grid; place-items:center; min-height: 480px; border-radius:18px; border:1px solid rgba(39,115,209,.24); background: radial-gradient(circle at center, rgba(255,255,255,.04), transparent 40%), rgba(3,12,26,.66); overflow:hidden; }
#qrCanvas { width: min(100%, 460px); height: auto; display:block; background:#fff; border-radius:16px; box-shadow:0 18px 36px rgba(0,0,0,.28); }
.export-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.button { min-height:54px; border-radius:16px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:16px; font-weight:700; border:1px solid rgba(57,149,242,.34); }
.button-primary { color:#effdff; background:linear-gradient(135deg,#1796ff,#0fe3f6); box-shadow:0 14px 38px rgba(8,106,226,.22), inset 0 1px 0 rgba(255,255,255,.22); }
.button-secondary { color:#f2f8ff; background: rgba(6,20,39,.82); }
.button-secondary:hover { border-color: rgba(82, 192, 255, .55); background: rgba(7, 24, 48, .92); }
.preview-note { margin:14px 0 0; color:#8faed0; font-size:14px; line-height:1.6; }
.feature-strip { margin-top:18px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid rgba(48,137,230,.40); border-radius:12px; background:rgba(2,11,25,.84); overflow:hidden; }
.strip-item { display:flex; gap:20px; align-items:flex-start; min-height:127px; padding:22px clamp(12px,1.9vw,27px); position:relative; }
.strip-item:not(:last-child)::after { content:""; position:absolute; right:0; top:20px; bottom:20px; border-right:1px solid rgba(47,112,177,.4); }
.strip-icon { flex:0 0 48px; width:48px; height:48px; border-radius:50%; border:1px solid rgba(18,126,244,.4); background:rgba(7,27,54,.58); display:grid; place-items:center; color:#128df7; }
.strip-item h3 { font-size:14px; margin:4px 0 5px; color:#eff7ff; font-weight:700; }
.strip-item p { font-size:12px; line-height:1.6; margin:0; color:#8caacc; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font:10px/1.8 var(--mono); letter-spacing:1.2px; color:#6381a8; padding:13px 5px 0; }
.site-footer a { color:#8ebadc; }
.site-footer a:hover { color:var(--cyan); }
.toast { position:fixed; z-index:20; bottom:28px; left:50%; transform:translate(-50%,18px); opacity:0; pointer-events:none; background:#062d43; color:#e8fdff; border:1px solid #0aa5d5; border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.36); padding:12px 22px; font-size:14px; transition:transform .23s,opacity .23s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1290px){ .hero{grid-template-columns:1fr;} .studio-grid{grid-template-columns:1fr;} .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .feature-strip{grid-template-columns:repeat(2,minmax(0,1fr));} .strip-item:nth-child(2)::after{display:none;} .strip-item:nth-child(-n+2){border-bottom:1px solid var(--border-faint);} }
@media (max-width:970px){ .site-header{flex-wrap:wrap;} .top-nav{order:3;width:100%;font-size:10px;} .hero{padding:60px 16px 28px;} .hero-visual{inset:-40px -20vw -45px 8vw; opacity:.72;} h1{font-size:clamp(44px,9vw,70px);letter-spacing:-3px;} .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:620px){ .page-shell{padding:14px 16px 10px;} .site-header{min-height:60px;gap:12px;} .brand img{height:40px;} .back-link{font-size:0;padding:11px;gap:0;border-radius:9px;} .back-link svg{width:18px;height:18px;} .top-nav{justify-content:flex-start;gap:8px;font-size:9px;letter-spacing:.6px;} .eyebrow{gap:8px;margin-bottom:24px;font-size:9px;letter-spacing:1.6px;} .lead{font-size:14px;line-height:1.68;} .benefit-grid{grid-template-columns:1fr;} .settings-grid{grid-template-columns:1fr;} .qr-stage{min-height:340px;} .export-actions{flex-direction:column;} .button{width:100%;min-height:56px;font-size:15px;} .feature-strip{grid-template-columns:1fr;} .strip-item{min-height:95px;} .strip-item::after{display:none;} .strip-item:not(:last-child){border-bottom:1px solid var(--border-faint);} .site-footer{font-size:9px;gap:8px;} .site-footer>span:nth-child(2){display:none;} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }