:root {
  --el-primary: #1267d5;
  --el-primary-dark: #0c4fa7;
  --el-accent: #1f9d72;
  --el-dark: #172033;
  --el-text: #5d6678;
  --el-soft: #f6f9fd;
  --el-border: #e2e8f0;
  --el-warning: #fff8df;
  --el-radius: 18px;
  --el-shadow: 0 10px 30px rgba(23, 32, 51, .08);
  --el-shadow-hover: 0 16px 38px rgba(23, 32, 51, .13);
}

html { scroll-behavior: smooth; }
body { color: var(--el-dark); background: #fff; }
a { color: var(--el-primary); }

.header-area { background: rgba(255,255,255,.98); box-shadow: 0 3px 16px rgba(0,0,0,.05); }
.main-nav .logo { display: flex !important; align-items: center; min-height: 80px; text-decoration: none; }
.el-logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.35rem; color: var(--el-dark); letter-spacing: -.4px; }
.el-logo i { color: var(--el-accent); font-size: 1.45rem; }
.el-logo .dot { color: var(--el-primary); }
.main-nav .nav > li > a { font-weight: 600; }
.main-nav .nav > li > a.active { color: var(--el-primary) !important; }
.nav-cta { background: var(--el-primary) !important; color: #fff !important; border-radius: 9px; padding: 10px 15px !important; margin-top: 18px; height: auto !important; line-height: 1.2 !important; }
.nav-cta:hover { background: var(--el-primary-dark) !important; color: #fff !important; }

.el-hero { padding: 130px 0 78px; background: linear-gradient(180deg,#fff 0%,#f5f9ff 100%); }
.el-hero.compact { padding: 118px 0 58px; }
.el-kicker { display:inline-flex; align-items:center; gap:8px; border:1px solid #dbe9fb; background:#f7fbff; color:var(--el-primary); padding:8px 13px; border-radius:999px; font-weight:700; font-size:.92rem; margin-bottom:18px; }
.el-hero h1 { font-size: clamp(2rem, 4vw, 3.55rem); line-height: 1.08; font-weight: 800; letter-spacing: -1.4px; color: var(--el-dark); }
.el-hero h1 em { color: var(--el-primary); font-style: normal; }
.el-hero .lead { max-width: 900px; margin: 20px auto 0; color: var(--el-text); line-height: 1.75; }
.el-hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
.el-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 20px; border-radius:10px; font-weight:700; text-decoration:none; transition:.2s ease; border:1px solid transparent; }
.el-btn:hover { transform:translateY(-2px); text-decoration:none; }
.el-btn-primary { background:var(--el-primary); color:#fff; }
.el-btn-primary:hover { background:var(--el-primary-dark); color:#fff; }
.el-btn-secondary { background:#fff; border-color:#d7deea; color:var(--el-dark); }
.el-btn-secondary:hover { border-color:#b9c7db; color:var(--el-dark); }

.el-notice { border:1px solid #ffe39a; background:var(--el-warning); border-radius:14px; padding:18px 20px; color:#5c4a13; max-width:1000px; margin:26px auto 0; }
.el-notice strong { color:#3f330d; }

.el-section { padding: 78px 0; }
.el-section.soft { background: var(--el-soft); }
.el-section-title { text-align:center; margin-bottom:42px; }
.el-section-title h2 { font-size: clamp(1.65rem, 2.6vw, 2.25rem); font-weight:800; margin-bottom:10px; }
.el-section-title p { max-width:850px; margin:0 auto; color:var(--el-text); line-height:1.7; }

.el-card { height:100%; background:#fff; border:1px solid var(--el-border); border-radius:var(--el-radius); padding:26px; box-shadow:var(--el-shadow); transition:.22s ease; }
.el-card:hover { transform:translateY(-4px); box-shadow:var(--el-shadow-hover); }
.el-card h3 { font-size:1.15rem; font-weight:800; margin-bottom:10px; }
.el-card p { color:var(--el-text); line-height:1.65; }
.el-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#eaf3ff; color:var(--el-primary); font-size:1.25rem; margin-bottom:16px; }
.el-icon.green { background:#e9f8f2; color:var(--el-accent); }

.el-steps { display:grid; gap:16px; max-width:950px; margin:0 auto; }
.el-step { display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--el-border); border-radius:15px; padding:20px; }
.el-step-num { width:42px; height:42px; flex:0 0 42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#eaf3ff; color:var(--el-primary); font-weight:800; }
.el-step h3 { font-size:1.05rem; font-weight:800; margin-bottom:6px; }
.el-step p { margin:0; color:var(--el-text); line-height:1.65; }

.el-price { position:relative; }
.el-price.recommended { border:2px solid var(--el-primary); }
.el-badge { display:inline-block; background:var(--el-primary); color:#fff; border-radius:999px; padding:6px 10px; font-size:.78rem; font-weight:800; margin-bottom:12px; }
.el-price-value { font-size:2rem; font-weight:800; color:var(--el-dark); margin:8px 0 15px; }
.el-price-value small { font-size:.95rem; color:var(--el-text); font-weight:600; }
.el-list { list-style:none; padding:0; margin:0; }
.el-list li { position:relative; padding-left:28px; margin:10px 0; color:var(--el-text); line-height:1.55; }
.el-list li:before { content:"\f058"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; color:var(--el-accent); }

.el-table-wrap { overflow-x:auto; border:1px solid var(--el-border); border-radius:14px; background:#fff; box-shadow:var(--el-shadow); }
.el-table { width:100%; margin:0; border-collapse:collapse; min-width:720px; }
.el-table th { background:#f2f6fb; color:var(--el-dark); font-weight:800; padding:15px; border-bottom:1px solid var(--el-border); }
.el-table td { padding:15px; border-bottom:1px solid #edf1f6; vertical-align:top; color:var(--el-text); line-height:1.6; }
.el-table tr:last-child td { border-bottom:0; }

.el-checklist { max-width:980px; margin:0 auto; display:grid; gap:12px; }
.el-checkitem { display:flex; gap:12px; padding:15px 18px; border:1px solid var(--el-border); border-radius:12px; background:#fff; }
.el-checkitem i { color:var(--el-accent); margin-top:4px; }
.el-checkitem strong { color:var(--el-dark); }

.el-source-box { background:#fbfcfe; border:1px solid var(--el-border); border-radius:14px; padding:20px; color:var(--el-text); }
.el-source-box a { word-break:break-word; }

.el-form-shell { max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--el-border); border-radius:18px; box-shadow:var(--el-shadow); padding:28px; }
.el-form-shell label { font-weight:700; margin-bottom:7px; }
.el-form-shell .form-control { padding:12px 13px; border-radius:9px; }

.el-status { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-weight:700; background:#eef2f7; color:#536070; }

.footer-extra { background:#f7f9fc !important; }
.footer-extra h4 { font-weight:800; }
.footer-extra a { text-decoration:none; }
footer { background:#172033; color:#dbe3ef; }

.cookie-banner-el { position:fixed; bottom:15px; left:15px; right:15px; z-index:9999; max-width:900px; margin:auto; background:#fff; border:1px solid var(--el-border); border-radius:14px; box-shadow:0 15px 40px rgba(0,0,0,.16); padding:16px; display:none; align-items:center; gap:15px; justify-content:space-between; }
.cookie-banner-el p { margin:0; color:var(--el-text); font-size:.92rem; }

@media(max-width:991px){
  .nav-cta { margin-top:0; border-radius:0; }
  .main-nav .logo { min-height:70px; }
  .el-hero { padding-top:105px; }
}
@media(max-width:768px){
  .el-section { padding:58px 0; }
  .el-hero { padding:100px 0 55px; }
  .el-card { padding:21px; }
  .cookie-banner-el { flex-direction:column; align-items:flex-start; }
}