:root { --brand:#2563eb; --text:#111827; --muted:#6b7280; --border:#e5e7eb; }
* { box-sizing:border-box }
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background:#fff; }
img { max-width: 100%; display: block; }

.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.header { background:#fff; border-bottom:1px solid var(--border); position: sticky; top:0; z-index:1000; }
.header-inner { display:flex; justify-content:space-between; align-items:center; padding: .8rem 0; gap:1rem; }
.logo img { height: 44px; width:auto; image-rendering:auto; }
.nav { display:flex; align-items:center; gap:1rem; font-weight:600; }
.nav a { text-decoration:none; color:inherit; }
.flag img { width:22px; height:auto; display:block; }

.btn { display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; }
.btn-primary { background: var(--brand); color:#fff; }
.btn-outline { border:1px solid var(--border); color:inherit; }
.btn-login { background: var(--brand); color:#fff; padding:6px 12px; border-radius:8px; }

.hero { padding: 3.5rem 0; background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%); }
.hero-grid { display:grid; grid-template-columns: 1fr; gap:2rem; align-items:center; }
.hero h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); margin:.25rem 0; }
.hero p { color: var(--muted); max-width: 60ch; }
.hero-visual { border:1px solid var(--border); background:#fff; padding:1rem; border-radius:16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

.section { padding: 3rem 0; }
.section h2 { font-size: 1.8rem; margin: 0 0 .5rem; }
.section p { color: var(--muted); }

.features { padding: 3rem 0; }
.feature-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 1rem; }
.feature-card { padding:1rem; border:1px solid var(--border); border-radius:14px; text-align:center; background:#fff; }
.feature-icon { width: 44px; height:44px; margin: 0 auto .5rem; opacity:.9; }

.pricing { background:#f7f9fc; padding: 3rem 0; text-align:center; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pricing-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top:1rem; }
.pricing-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:1rem; text-align:left; }
.price { font-size: 1.6rem; font-weight: 800; margin: .25rem 0 .75rem; }

.faq details { border:1px solid var(--border); border-radius:12px; background:#fff; padding: .75rem 1rem; margin:.5rem 0; }
.faq summary { cursor:pointer; font-weight:600; }
.faq p { margin:.5rem 0 0; color:#374151; }

.contact { padding: 3rem 0; }
.contact-form { display:grid; gap:.75rem; max-width:520px; }
.contact-form input, .contact-form textarea { width:100%; padding:.8rem 1rem; border:1px solid var(--border); border-radius:12px; font:inherit; }
.contact-form .hp { display:none; }
.contact-form button { justify-self:start; }
.form-msg { color: #065f46; font-weight:600; min-height:1.5rem; }
.form-error{display:none;background:#FEE2E2;color:#991B1B;padding:.75rem 1rem;border:1px solid #FCA5A5;border-radius:10px;margin-bottom:.5rem;font-weight:600}

.footer { padding: 2rem 0; background:#fff; border-top:1px solid var(--border); color:#6b7280; }
.footer a { color: inherit; text-decoration: underline; }
.footer-notice{margin:0;color:#6b7280;font-size:.95rem}

details.bank summary { cursor:pointer; list-style:none; }
details.bank[open] summary::marker, details.bank summary::-webkit-details-marker { display:none; }
details.bank { border:1px solid var(--border); border-radius:10px; padding:.5rem .75rem; margin:.5rem 0; background:#fff; }
@media (min-width: 900px){
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
  details.bank { border:none; padding:0; background:transparent; }
  details.bank summary { pointer-events:none; }
  details.bank[open] > * { display:block; }
}