:root{
  --primary:#1d4ed8;
  --accent:#f59e0b;
  --ink:#0b1220;
  --muted:#475569;
  --soft: rgba(15,23,42,.12);
  --max: 1160px;
  --radius: 18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(29,78,216,.22), transparent 58%),
    radial-gradient(900px 420px at 90% -10%, rgba(245,158,11,.14), transparent 58%),
    #fff;
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}
.skip{position:absolute; left:-999px; width:1px; height:1px; overflow:hidden}
.skip:focus{position:static; width:auto; height:auto; padding:.75rem 1rem; background:#fff; border:2px solid var(--primary); border-radius:12px}

.top{position:sticky; top:0; z-index:50; backdrop-filter: blur(12px); background: rgba(255,255,255,.82); border-bottom: 1px solid var(--soft)}
.top-inner{padding: 1rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; gap:.85rem}
.mark{width:44px; height:44px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), rgba(29,78,216,.22)); border:1px solid var(--soft)}
.name{font-weight:1000; letter-spacing:-.03em}
.tag{font-size:.9rem; color: var(--muted); font-weight:900}
.nav{display:flex; gap:1rem}
.nav a{color: var(--muted); font-weight:900}
.nav a[aria-current="page"]{color: var(--ink); border-bottom:1px solid rgba(29,78,216,.45); padding-bottom:.2rem}
@media (max-width: 860px){ .nav{display:none} }

.hero{padding: 2.2rem 0 1rem}
.hero-card{
  border:1px solid var(--soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 44px rgba(2,6,23,.10);
  padding: 1.35rem;
}
.kicker{font-weight:1000; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; color: var(--muted)}
.hero h1{margin:.75rem 0 .5rem; letter-spacing:-.04em; font-size: clamp(1.8rem, 3.2vw, 2.5rem)}
.hero p{margin:0; color: var(--muted); max-width: 70ch}
.note{margin-top:1rem; padding: 1rem; border-radius: 14px; border:1px dashed rgba(29,78,216,.35); background: rgba(29,78,216,.06)}
.note ol{margin:.5rem 0 0 1.2rem; color: var(--muted)}

.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem; padding: 1rem 0 2.2rem}
@media (max-width: 980px){ .grid{grid-template-columns:1fr} }

.card{
  border:1px solid var(--soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 44px rgba(2,6,23,.08);
  padding: 1.25rem;
}
.card h2{margin:0 0 .75rem; letter-spacing:-.03em}
.muted{color: var(--muted)}
.tiny{font-size:.9rem}

.field{display:grid; gap:.35rem; margin:.75rem 0}
label{font-weight:1000; font-size:.92rem}
input, textarea, select{
  font: inherit;
  padding:.82rem .92rem;
  border-radius: 14px;
  border:1px solid var(--soft);
  background: rgba(255,255,255,.96);
  outline:none;
}
input:focus, textarea:focus, select:focus{border-color: rgba(29,78,216,.55); box-shadow:0 0 0 4px rgba(29,78,216,.12)}
.hint{font-size:.9rem; color: var(--muted)}

.two{display:grid; grid-template-columns: 1fr 1fr; gap: .75rem}
.three{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:.75rem}
@media (max-width: 720px){ .two, .three{grid-template-columns:1fr} }

.hr{height:1px; background: var(--soft); margin: 1.1rem 0}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.78rem 1rem;
  border-radius: 999px;
  border:1px solid var(--soft);
  background: rgba(255,255,255,.96);
  font-weight:1000;
  cursor:pointer;
}
.btn.primary{background: var(--primary); border-color: transparent; color:#fff}
.btn:hover{opacity:.92}

.notice{padding:.9rem 1rem; border-radius:14px; border:1px solid var(--soft); background: rgba(245,158,11,.12); color:#7c2d12}
.notice.success{background: rgba(34,197,94,.12); color:#14532d}
.notice.error{background: rgba(239,68,68,.12); color:#7f1d1d}

.preview-box{
  border-radius: 16px;
  border:1px solid var(--soft);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  padding: 1rem;
}
.preview-line{font-weight:1000; margin:.4rem 0}
.preview-line.big{font-size:1.25rem; letter-spacing:-.02em}
.preview-line.small{font-size:.95rem; color: var(--muted); font-weight:900}

.list{margin:.25rem 0 0 1.1rem; color: var(--muted)}
.footer{border-top:1px solid var(--soft); padding: 2rem 0 2.2rem; color: var(--muted)}