:root{
  --df-blue:#104a78;
  --df-blue-2:#0b3355;
  --df-orange:#f58220;
  --df-green:#138a43;
  --df-bg:#f4f7fb;
  --df-card:#ffffff;
  --df-border:#dbe5ef;
  --df-text:#102033;
  --df-muted:#5b6b80;
  --df-shadow:0 16px 40px rgba(16,74,120,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--df-bg);color:var(--df-text);line-height:1.45}
a{color:inherit}.df-hero{background:linear-gradient(135deg,var(--df-blue-2),var(--df-blue));color:#fff;padding:46px 20px 42px;text-align:center}
.df-hero h1{margin:0 0 10px;font-size:34px;letter-spacing:.3px}.df-hero p{margin:0;color:#dcecf8;font-size:17px}.df-wrap{width:min(1120px,calc(100% - 32px));margin:28px auto 56px}.df-topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}.df-nav{display:flex;flex-wrap:wrap;gap:10px}.df-nav a,.df-lang button{border:1px solid var(--df-border);background:#fff;border-radius:999px;padding:9px 14px;text-decoration:none;font-weight:700;color:var(--df-blue);cursor:pointer}.df-lang{display:flex;gap:8px}.df-lang button.active{background:var(--df-blue);color:#fff;border-color:var(--df-blue)}
.df-alert{background:#fff7ed;border:1px solid #ffd6a8;color:#7a2d00;border-radius:14px;padding:16px 18px;margin-bottom:22px}.df-alert strong{display:inline-block;margin-right:4px}.df-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.df-card{background:var(--df-card);border:1px solid var(--df-border);border-radius:18px;padding:22px;box-shadow:var(--df-shadow);display:flex;flex-direction:column;min-height:100%}.df-card.featured{border:2px solid var(--df-orange);position:relative}.df-badge{display:inline-flex;width:max-content;background:#eef6fc;color:var(--df-blue);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800;margin-bottom:12px}.df-badge.hot{background:#fff1e5;color:#a94800}.df-card h2{margin:0 0 8px;font-size:25px}.df-sub{color:var(--df-muted);min-height:50px}.df-price{font-size:31px;font-weight:900;margin:16px 0 4px}.df-price small{font-size:14px;color:var(--df-muted);font-weight:700}.df-note{color:var(--df-muted);font-size:13px;margin-bottom:14px}.df-features{padding-left:18px;margin:14px 0 20px;color:#25364a}.df-features li{margin:8px 0}.df-actions{margin-top:auto;display:flex;flex-direction:column;gap:10px}.df-btn{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;border-radius:10px;padding:13px 16px;font-weight:900;color:#fff;background:var(--df-blue);border:0;min-height:46px;text-align:center}.df-btn.orange{background:var(--df-orange)}.df-btn.green{background:var(--df-green)}.df-btn.gray{background:#607086}.df-btn.outline{background:#fff;color:var(--df-blue);border:1px solid var(--df-border)}.df-section{background:#fff;border:1px solid var(--df-border);border-radius:18px;padding:24px;margin-top:22px;box-shadow:var(--df-shadow)}.df-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:step}.df-step{border:1px solid var(--df-border);border-radius:14px;padding:15px;background:#fbfdff}.df-step:before{counter-increment:step;content:counter(step);display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--df-blue);color:#fff;align-items:center;justify-content:center;font-weight:900;margin-bottom:8px}.df-download-box{display:grid;grid-template-columns:1.4fr .8fr;gap:18px;align-items:center}.df-file{background:#f8fbfe;border:1px solid var(--df-border);border-radius:14px;padding:16px}.df-kv{display:grid;grid-template-columns:140px 1fr;gap:8px;margin-top:10px;color:var(--df-muted)}.df-kv strong{color:var(--df-text)}.df-footer{margin-top:30px;text-align:center;color:var(--df-muted);font-size:13px}.df-mini-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.df-mini-links a{color:var(--df-blue);font-weight:700;text-decoration:none}.df-hidden{display:none!important}
@media(max-width:900px){.df-grid{grid-template-columns:1fr}.df-steps{grid-template-columns:1fr 1fr}.df-download-box{grid-template-columns:1fr}.df-topbar{align-items:flex-start;flex-direction:column}.df-hero h1{font-size:28px}}
@media(max-width:560px){.df-steps{grid-template-columns:1fr}.df-wrap{width:min(100% - 20px,1120px)}.df-card{padding:18px}.df-price{font-size:26px}.df-nav a{font-size:13px}}