@charset "utf-8";

:root { --brand-blue: #3aaee0; --brand-blue-deep: #1f3a8a; --brand-orange: #ff8a3d; --brand-green: #2bc48a; --gradient-brand: linear-gradient(135deg,#3aaee0,#ff8a3d); --gradient-soft: linear-gradient(180deg,#f4faff,#ffffff); --shadow-soft: 0 10px 30px -12px rgba(31,58,138,.18); --shadow-glow: 0 20px 60px -20px rgba(58,174,224,.35); --border: #e6ecf3; --muted: #5b6b80; --bg: #fff; --fg: #0f1a2e; }

* { box-sizing: border-box; }

html, body { margin: 0px; padding: 0px; background: var(--bg); color: var(--fg); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0px auto; padding: 0px 24px; }

header.site { position: sticky; top: 0px; z-index: 50; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }

header.site .row { display: flex; align-items: center; justify-content: space-between; height: 112px; }

header.site img { height: 88px; width: auto; }

nav.primary { display: flex; gap: 4px; flex-wrap: wrap; }

nav.primary a { padding: 10px 12px; font-size: 14px; font-weight: 500; color: rgb(58, 73, 96); border-radius: 8px; transition: 0.2s; }

nav.primary a:hover { color: var(--brand-blue); }

nav.primary a.active { color: var(--brand-blue-deep); font-weight: 600; }

.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; color: rgb(255, 255, 255); font-weight: 600; background: var(--gradient-brand); box-shadow: var(--shadow-soft); transition: 0.25s; }

.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }

.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--border); background: rgb(255, 255, 255); font-weight: 600; }

.hero { position: relative; overflow: hidden; background: var(--gradient-soft); border-bottom: 1px solid var(--border); }

.hero .inner { padding: 88px 0px; position: relative; }

.hero h1 { font-size: clamp(34px, 5vw, 64px); font-weight: 800; letter-spacing: -0.02em; margin: 0px 0px 16px; max-width: 900px; }

.hero p.lead { color: var(--muted); font-size: 18px; max-width: 680px; margin: 18px 0px 0px; }

.eyebrow { display: inline-block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-orange); font-weight: 700; margin-bottom: 12px; }

.section { padding: 72px 0px; }

.grid { display: grid; gap: 24px; }

.cards-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.cards-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.cards-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card { padding: 26px; border: 1px solid var(--border); border-radius: 18px; background: rgb(255, 255, 255); transition: 0.25s; animation: 0.7s ease 0s 1 normal both running fadeUp; }

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

.card h3 { margin: 0px 0px 8px; font-size: 18px; }

.card p { margin: 0px; color: var(--muted); font-size: 14px; }

.icon-sq { width: 48px; height: 48px; border-radius: 12px; background: var(--gradient-brand); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 22px; }

.stat { text-align: center; padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: rgb(255, 255, 255); }

.stat .v { font-size: 34px; font-weight: 800; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.stat .l { color: var(--muted); font-size: 13px; margin-top: 4px; }

.section-head { text-align: center; margin-bottom: 40px; }

.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; margin: 6px 0px 0px; }

ul.checks { list-style: none; padding: 0px; margin: 16px 0px; display: grid; gap: 10px; }

ul.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }

ul.checks li::before { content: "✓"; color: var(--brand-green); font-weight: 700; }

.cta { margin: 40px 0px 80px; }

.cta-inner { border-radius: 24px; padding: 56px 32px; background: var(--gradient-brand); color: rgb(255, 255, 255); text-align: center; }

.cta-inner h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0px; }

.cta-inner p { margin: 10px 0px 26px; color: rgba(255, 255, 255, 0.92); }

.cta-inner a { background: rgb(255, 255, 255); color: var(--brand-blue-deep); padding: 12px 26px; border-radius: 999px; font-weight: 700; display: inline-block; }

footer.site { margin-top: 80px; background: rgb(245, 248, 252); border-top: 1px solid var(--border); }

footer.site .grid-f { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 40px; padding: 56px 0px; }

footer.site h4 { font-size: 13px; margin: 0px 0px 12px; }

footer.site ul { list-style: none; padding: 0px; margin: 0px; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }

footer.site .copy { padding: 18px 0px; border-top: 1px solid var(--border); text-align: center; font-size: 12px; color: var(--muted); }

@media (max-width: 780px) {
  nav.primary, .hide-sm { display: none; }
  footer.site .grid-f { grid-template-columns: 1fr; }
  header.site img { height: 64px; }
  header.site .row { height: 88px; }
}

@keyframes fadeUp { 
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.policy-card { padding: 26px; border: 1px solid var(--border); border-radius: 18px; background: rgb(255, 255, 255); }

.policy-card h2 { margin: 0px 0px 8px; font-size: 18px; color: var(--brand-blue-deep); }

.policy-card p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0px; }

table.gdpr { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: rgb(255, 255, 255); margin-top: 24px; }

table.gdpr th { background: rgb(238, 243, 249); text-align: left; padding: 14px 16px; font-size: 14px; }

table.gdpr td { padding: 16px; font-size: 14px; border-top: 1px solid var(--border); vertical-align: top; }

table.gdpr td.demand { color: var(--fg); }

table.gdpr td.delivery { color: var(--muted); }

form.contact { padding: 30px; border: 1px solid var(--border); border-radius: 18px; background: rgb(255, 255, 255); }

form.contact .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 600px) {
  form.contact .row2 { grid-template-columns: 1fr; }
}

form.contact label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px; }

form.contact input, form.contact select, form.contact textarea { width: 100%; margin-top: 6px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; background: rgb(255, 255, 255); }

form.contact button { margin-top: 8px; width: 100%; }

.muted { color: var(--muted); }

.contact-card { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: rgb(255, 255, 255); margin-bottom: 14px; }
/* ---- Captcha ---- */
.captcha-box { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.captcha-box canvas { border: 1px solid var(--border); border-radius: 10px; background: #eef3f9; }
.captcha-refresh { width: auto !important; border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-size: 16px; line-height: 1; transition: .2s; }
.captcha-refresh:hover { color: var(--brand-blue); border-color: var(--brand-blue); }
.captcha-answer input { width: 100%; margin: 0 0 4px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; background: #fff; }
.captcha-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.captcha-error { color: #c0392b; font-size: 13px; font-weight: 600; margin: 10px 0 0; text-align: center; }