:root{
  --bg:#0b0f13;--panel:#121922;--panel-2:#182230;--line:#243244;--text:#e9f1f7;--muted:#9cb0c3;
  --accent:#3ddc97;--accent-2:#84fab0;--warning:#ffd166;--danger:#ff6b6b;--shadow:0 20px 40px rgba(0,0,0,.28);
  --radius:22px;--radius-sm:14px;--max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth}
body{font-family:Inter,Arial,Helvetica,sans-serif;background:
radial-gradient(circle at top right, rgba(61,220,151,.10), transparent 25%),
radial-gradient(circle at top left, rgba(95,142,255,.08), transparent 22%),
linear-gradient(180deg,#0a0d12,#0d1218 35%,#0b0f13 100%);color:var(--text);line-height:1.65}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(8,12,17,.78);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.1rem;color:var(--text)}
.brand-badge{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#2dc0ff);color:#061018;box-shadow:var(--shadow);font-weight:900}
.nav-links{display:flex;gap:16px;flex-wrap:wrap}
.nav-links a{color:var(--muted);padding:10px 14px;border-radius:999px;border:1px solid transparent}
.nav-links a:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06);text-decoration:none;color:var(--text)}
.hero{padding:72px 0 40px}.hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.hero-card,.stats-card,.tool-card,.content-card,.ad-box,.affiliate,.calculator-card,.tool-links,.footer-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{padding:36px}.hero h1{font-size:clamp(2rem,4vw,4rem);line-height:1.05;margin-bottom:16px}
.lead{font-size:1.08rem;color:var(--muted);max-width:60ch}.badges{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 24px}
.badge{padding:10px 14px;border-radius:999px;background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.22);color:#cffff0;font-size:.93rem}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-radius:14px;border:1px solid transparent;font-weight:700;transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)} .btn-primary{background:linear-gradient(135deg,var(--accent),#29c7ff);color:#081219} .btn-secondary{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.09);color:var(--text)}
.hero-visual{display:grid;gap:16px}.stats-card{padding:24px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.stat{padding:18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)} .stat strong{display:block;font-size:1.6rem}
.section{padding:26px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px} .section-head h2{font-size:clamp(1.5rem,2vw,2.2rem)} .section-head p{color:var(--muted);max-width:60ch}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:18px}
.tool-card{padding:22px;display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,border-color .18s ease, background .18s ease}
.tool-card:hover{transform:translateY(-5px);border-color:rgba(61,220,151,.32);background:linear-gradient(180deg,rgba(61,220,151,.06),rgba(255,255,255,.02))}
.tool-card h3{font-size:1.12rem}.tool-card p{color:var(--muted);font-size:.96rem}.tool-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.pill{font-size:.84rem;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:#cbd8e5}
.calculator-page{padding:34px 0 60px}.breadcrumbs{margin:14px 0 18px;color:var(--muted);font-size:.95rem}.page-layout{display:grid;grid-template-columns:minmax(0,1.1fr) 360px;gap:22px}
.calculator-card,.content-card,.tool-links,.ad-box,.affiliate,.footer-card{padding:24px}
.tool-hero{margin-bottom:18px}.tool-hero h1{font-size:clamp(1.9rem,3vw,3rem);line-height:1.08;margin-bottom:10px}.tool-hero p{color:var(--muted)}
.illustration{margin-top:18px;height:160px;border-radius:20px;overflow:hidden;position:relative;background:linear-gradient(135deg,rgba(61,220,151,.12),rgba(41,199,255,.12)),linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06)}
.illustration:before,.illustration:after{content:"";position:absolute;border-radius:50%;filter:blur(8px)}
.illustration:before{width:150px;height:150px;background:rgba(61,220,151,.18);right:-15px;top:-10px}
.illustration:after{width:120px;height:120px;background:rgba(41,199,255,.15);left:-12px;bottom:-10px}
.bars{position:absolute;inset:18px;display:flex;align-items:flex-end;gap:10px}.bars span{flex:1;border-radius:12px 12px 0 0;background:linear-gradient(180deg,var(--accent),#29c7ff);opacity:.88}
.bars span:nth-child(1){height:35%}.bars span:nth-child(2){height:60%}.bars span:nth-child(3){height:48%}.bars span:nth-child(4){height:78%}.bars span:nth-child(5){height:92%}
form .field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:flex;flex-direction:column;gap:8px} label{font-weight:700;font-size:.95rem}
input,select{width:100%;padding:14px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:#0f1720;color:var(--text);outline:none}
input:focus,select:focus{border-color:rgba(61,220,151,.5);box-shadow:0 0 0 4px rgba(61,220,151,.12)}
.actions-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.result{margin-top:18px;padding:18px;border-radius:18px;background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.18);font-size:1.05rem}
.small{font-size:.92rem;color:var(--muted)}.ad-box{min-height:160px;display:grid;place-items:center;color:var(--muted);text-align:center}.ad-box strong{display:block;color:var(--text);margin-bottom:6px}
.affiliate h3,.tool-links h3,.content-card h2,.content-card h3{margin-bottom:12px}.affiliate p,.tool-links p,.content-card p,.content-card li{color:var(--muted)}.affiliate .btn,.tool-links .btn{margin-top:14px}
.link-list{display:grid;gap:10px;margin-top:14px}.link-list a{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:var(--text)}
.link-list a:hover{text-decoration:none;border-color:rgba(61,220,151,.28)}.content-card h2{font-size:1.5rem;margin-top:18px}.content-card h3{font-size:1.1rem;margin-top:16px}.content-card ul{padding-left:18px;margin:12px 0}
.cta-banner{margin:20px 0;padding:20px;border-radius:22px;background:linear-gradient(135deg,rgba(61,220,151,.16),rgba(41,199,255,.14));border:1px solid rgba(61,220,151,.22)}
.footer{padding:28px 0 60px}.footer-card{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.footer small{color:var(--muted)}.muted{color:var(--muted)}.note{font-size:.9rem;color:var(--muted);margin-top:10px}
@media (max-width: 980px){.hero-wrap,.page-layout{grid-template-columns:1fr}}
@media (max-width: 700px){.nav{flex-direction:column;align-items:flex-start}form .field-grid{grid-template-columns:1fr}.hero{padding-top:42px}.hero-card,.stats-card,.tool-card,.content-card,.ad-box,.affiliate,.calculator-card,.tool-links,.footer-card{border-radius:18px}}
.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer-links a{
    color:#ddd;
    text-decoration:none;
}

.footer-links a:hover{
    color:#fff;
}

.footer-bottom{
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.1);
    color:#999;
    font-size:14px;
}

.legal-page {
    padding: 80px 0;
}

.legal-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 34px;
    max-width: 920px;
    margin: 0 auto;
}

.legal-card h1 {
    margin-bottom: 14px;
}

.legal-card h2 {
    margin-top: 30px;
    margin-bottom: 10px;
}

.legal-card p,
.legal-card li {
    color: #cfcfcf;
    line-height: 1.7;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 24px 0;
}

.info-box {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 16px;
}