:root {
  --bg: #07111f;
  --bg-soft: #0c1728;
  --card: #101b2f;
  --card-2: #13213a;
  --line: #223454;
  --text: #ecf3ff;
  --muted: #93a7c7;
  --primary: #3b82f6;
  --primary-2: #60a5fa;
  --accent: #22c55e;
  --danger: #ef4444;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  --radius: 22px;
  --max: 1280px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(34,197,94,.08), transparent 20%),
    linear-gradient(180deg, #06101d 0%, #091321 100%);
  color: var(--text);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.topbar {
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px);
  background: rgba(7,17,31,.82); border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav { display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:18px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.4px; font-size:22px; }
.brand-badge {
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--primary), #1d4ed8); box-shadow: var(--shadow); font-weight:900;
}
.nav-links { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.nav-links a {
  color: var(--muted); padding:10px 14px; border-radius:999px; transition:.2s ease;
  font-size:14px; border:1px solid transparent;
}
.nav-links a:hover, .nav-links a.active { color:var(--text); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
.cta-btn, .ghost-btn, .tool-btn {
  border:0; border-radius:14px; padding:12px 16px; font-weight:700; cursor:pointer; transition:.2s ease;
}
.cta-btn { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:white; box-shadow: var(--shadow); }
.cta-btn:hover { transform: translateY(-1px); }
.ghost-btn { background: rgba(255,255,255,.04); color: var(--text); border: 1px solid rgba(255,255,255,.08); }
.hero { padding:54px 0 30px; }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:26px; align-items:center; }
.hero-copy {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06); border-radius:28px; padding:34px; box-shadow: var(--shadow);
}
.eyebrow {
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background: rgba(59,130,246,.12); color:#bfdbfe; font-size:13px; border:1px solid rgba(96,165,250,.18);
  margin-bottom:18px;
}
h1 { margin:0 0 16px; font-size: clamp(36px, 6vw, 62px); line-height:1.05; letter-spacing:-1.4px; }
.hero-copy p, .section-copy, .feature-card p, .info-grid p, .legal-card p, .contact-card p, .legal-card li {
  color: var(--muted); line-height: 1.8; font-size: 15px;
}
.hero-copy p { margin:0; font-size:17px; max-width:760px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.hero-cards { display:grid; gap:16px; }
.mini-card, .panel, .stage-card, .feature-card, .info-grid article, .legal-card, .contact-card {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 22px; box-shadow: var(--shadow);
}
.mini-card { padding:22px; }
.mini-card h3, .feature-card h3, .info-grid h3, .legal-card h3, .contact-card h3 { margin:0 0 10px; font-size:20px; }
.mini-card p { margin:0; color: var(--muted); line-height:1.7; font-size:15px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.stat-box { padding:18px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); text-align:center; }
.stat-box strong { display:block; font-size:24px; margin-bottom:6px; }
.section { padding: 28px 0 42px; }
.section-title { margin:0 0 10px; font-size: clamp(28px, 4vw, 42px); }
.section-copy { max-width:900px; margin:0 0 22px; font-size:16px; }
.feature-grid, .info-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.feature-card, .info-grid article, .legal-card, .contact-card { padding:24px; }
.tool-layout { display:grid; grid-template-columns:350px 1fr; gap:22px; }
.panel { padding:20px; }
.stage-card { padding:16px; }
.tool-group { margin-bottom:18px; }
.tool-group label { display:block; margin-bottom:10px; color:#d7e7ff; font-size:14px; font-weight:700; }
.tool-group input[type="file"], .tool-group input[type="text"], .tool-group input[type="email"], .tool-group textarea, .tool-group select, .tool-group input[type="range"] { width:100%; }
.tool-group input[type="file"], .tool-group input[type="text"], .tool-group input[type="email"], .tool-group textarea, .tool-group select {
  background:#0b1526; color:var(--text); border:1px solid var(--line); border-radius:14px; padding:12px 14px; outline:none;
}
.tool-group textarea { min-height:150px; resize:vertical; }
.tool-group input[type="range"] { accent-color: var(--primary); }
.tool-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.tool-btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; }
.tool-btn.secondary { background: rgba(255,255,255,.04); color: var(--text); border:1px solid rgba(255,255,255,.08); }
.full-btn { width:100%; margin-top:12px; }
.hint { color:var(--muted); font-size:13px; line-height:1.7; margin-top:14px; }
.stage-wrap {
  width:100%; min-height:460px; display:flex; align-items:center; justify-content:center; background:#081120;
  border:1px dashed #29406a; border-radius:20px; overflow:auto; position:relative;
}
.stage { position:relative; display:inline-block; user-select:none; max-width:100%; margin:auto; }
#baseImage { display:none; max-width:100%; height:auto; border-radius:14px; }
.placeholder { color:#7290b9; text-align:center; padding:48px 24px; line-height:1.8; }
.overlay {
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:150px; height:150px; cursor:move; touch-action:none;
}
.overlay svg { width:100%; height:100%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
.stage-meta {
  display:flex; justify-content:space-between; gap:14px; margin-top:12px; color:#cfe0ff; font-size:13px; flex-wrap:wrap;
}
.contact-layout { display:grid; grid-template-columns:.95fr 1.05fr; gap:18px; }
.contact-list { display:grid; gap:12px; margin-top:16px; }
.contact-item {
  padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); color: var(--muted);
}
.contact-item strong { display:block; color:var(--text); margin-bottom:6px; }
.footer { padding:28px 0 46px; color:var(--muted); }
.footer-box {
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px; border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06);
}
.muted-link { color:#c1d8ff; }
.hero-note {
  margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); color: var(--muted);
}
.list-clean { margin: 0; padding-left: 18px; }
@media (max-width: 1024px) {
  .hero-grid, .tool-layout, .contact-layout, .feature-grid, .info-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav { flex-direction:column; align-items:flex-start; padding:12px 0; }
  .nav-links { width:100%; }
  .tool-actions { grid-template-columns:1fr; }
  .hero-copy, .mini-card, .panel, .stage-card, .feature-card, .legal-card, .contact-card { padding:18px; }
  .container { width:min(var(--max), calc(100% - 20px)); }
  h1 { letter-spacing:-.8px; }
}

.contact-form code { color: #cfe0ff; }
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.status-success { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); color: #d1fae5; }
.status-error { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); color: #fee2e2; }