:root {
  --brand-1:#2EAEB2; 
  --brand-2:#40CC9F; 
  --grad:linear-gradient(135deg,var(--brand-1) 0%, var(--brand-2) 60%);
  --ink:#0b1220; 
  --muted:#5b6b7f; 
  --line:#e6ebf0; 
  --bg:#ffffff; 
  --bg-2:#f7fbff; 
  --err:#ef4444;
  --radius:18px; 
  --shadow:0 18px 60px rgba(2,6,23,.08);
  --space-1:8px; 
  --space-2:12px; 
  --space-3:16px; 
  --space-4:20px; 
  --space-5:28px; 
  --space-6:40px; 
  --space-7:64px; 
  --container: 960px;
}

* { box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
html,body { height:100%; margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg) }
a { text-decoration:none; color:inherit }

.container { max-width:var(--container); margin:0 auto; padding:0 var(--space-3) }

.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.nav .inner { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) 0 }
.logo { width:44px; height:44px; border-radius:16px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid var(--line); background:#fff; border-radius:14px; padding:12px 16px;
  font-weight:700; cursor:pointer; transition:transform .06s, filter .2s;
}
.btn:hover { filter:brightness(1.03) }
.btn:active { transform:translateY(1px) }
.btn.primary { background:var(--ink); color:#fff; border-color:#000; }

.hero { padding: var(--space-7) 0 var(--space-6); background:linear-gradient(180deg,#fff,#fbfefe) }
.hero .grid { display:grid; grid-template-columns:1.05fr .95fr; gap: var(--space-6); align-items:center }
@media (max-width: 980px){ .hero .grid { grid-template-columns:1fr } }

.h-title { font-size: clamp(34px, 5.2vw, 56px); line-height:1.08; letter-spacing:-0.012em; font-weight:800; margin:0 0 10px }
.h-sub { color:var(--muted); font-size: clamp(16px, 2vw, 20px); line-height:1.65; margin: 18px 0 0 }
.note { font-size:14px; margin-top:16px }

.emph { border:1px solid #c4f1de; background:linear-gradient(180deg,#f3fffb,#ffffff); padding:12px 14px; border-radius:14px; margin-top:16px }
.card { border:1px solid var(--line); background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--space-5) }

.field { display:flex; flex-direction:column; gap:8px; margin-bottom:14px }
.field label { font-weight:600 }
.field small { color:var(--muted) }

.inp, select, textarea {
  width:100%; padding:14px 14px; border:1px solid var(--line); border-radius:14px; outline:0; font-size:16px; background:#fff;
}
.inp:focus, select:focus, textarea:focus {
  box-shadow:0 0 0 6px rgba(46,174,178,.12); border-color:#9ce7e0;
}

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:680px){ .grid-2 { grid-template-columns:1fr } }

.check { display:flex; gap:12px; align-items:flex-start }
.error { color:var(--err); font-size:14px; margin-top:6px; display:none }

.badge { display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); font-weight:600 }
.hide { display:none !important }

.share { display:flex; gap:10px; flex-wrap:wrap }
.share a { border:1px solid var(--line); padding:10px 12px; border-radius:12px }

.form-actions { display:flex; gap:10px; align-items:center; margin-top:14px }

footer { padding:40px 0; color:var(--muted); font-size:14px }