main { position:relative; z-index:2; }

.hero { padding:126px 6% 54px; max-width:1220px; margin:0 auto; }
.crumb { font-size:13px; color:var(--text-3); margin-bottom:18px; }
.crumb a { color:var(--blue); text-decoration:none; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; background:rgba(99,179,237,.1); border:1px solid rgba(99,179,237,.22); color:var(--blue); padding:7px 16px; border-radius:100px; font-size:13px; font-weight:700; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:44px; align-items:center; }
.hero h1 { font-size:clamp(38px,5.5vw,70px); font-weight:900; letter-spacing:-2.3px; line-height:1.02; color:#fff; margin-bottom:18px; }
.hero h1 span { background:linear-gradient(120deg,var(--blue),var(--teal)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { font-size:17px; color:var(--text-2); max-width:650px; line-height:1.78; }
.hero-card { background:var(--bg-card); border:1px solid var(--border); border-radius:24px; padding:26px; }
.hero-card h2 { font-size:20px; color:#fff; margin-bottom:10px; }
.metric-mini { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.mini { padding:16px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.025); }
.mini strong { display:block; font-size:24px; color:#fff; }
.mini span { font-size:12px; color:var(--text-3); }

.section { padding:62px 6%; max-width:1220px; margin:0 auto; }
.section-head { margin-bottom:28px; }

.calculator-wrap { background:linear-gradient(180deg,rgba(99,179,237,.055),rgba(255,255,255,.02)); border:1px solid rgba(99,179,237,.18); border-radius:24px; padding:26px; }
.calc-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:22px; }
.panel { background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:18px; padding:22px; }
.panel h2, .panel h3 { font-size:20px; color:#fff; margin-bottom:8px; }
.panel p { font-size:14px; color:var(--text-2); margin-bottom:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-size:12px; font-weight:800; color:var(--text); }
.field input, .field select { width:100%; background:rgba(5,8,16,.75); border:1px solid var(--border); color:#fff; border-radius:10px; padding:12px; font-family:var(--font); font-size:14px; outline:none; }
.field input:focus, .field select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(99,179,237,.1); }
.field select option { color:#111; }
.full { grid-column:1/-1; }

.results { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.result-card, .result { background:rgba(5,8,16,.72); border:1px solid var(--border); border-radius:16px; padding:18px; }
.result-label, .label { font-size:12px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; }
.result-value, .value { font-size:30px; font-weight:900; color:#fff; letter-spacing:-1px; }
.result-note, .note { font-size:12px; color:var(--text-2); margin-top:5px; }
.good { color:var(--green); }
.warn { color:var(--amber); }
.bad { color:var(--red); }
.insight { margin-top:16px; border:1px solid rgba(79,209,197,.2); background:rgba(79,209,197,.07); border-radius:14px; padding:15px; color:var(--text); font-size:14px; }

.score { margin-top:16px; background:rgba(5,8,16,.65); border:1px solid var(--border); border-radius:16px; padding:18px; }
.score-top { display:flex; justify-content:space-between; color:var(--text-2); font-size:13px; margin-bottom:10px; }
.track { height:12px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.bar { height:100%; width:0%; background:linear-gradient(90deg,var(--red),var(--amber),var(--green)); border-radius:999px; transition:width .25s; }

.copy-row, .btn-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.btn { border:1px solid var(--border); background:rgba(255,255,255,.04); color:#fff; border-radius:10px; padding:10px 14px; font-family:var(--font); font-weight:800; cursor:pointer; }
.btn:hover { border-color:rgba(99,179,237,.45); color:var(--blue); }

.content { background:var(--bg-card); border:1px solid var(--border); border-radius:22px; padding:28px; margin-top:22px; }
.content h2 { color:#fff; margin-bottom:12px; font-size:24px; }
.content h3 { color:#fff; margin-top:24px; margin-bottom:8px; }
.content p, .content li { color:var(--text-2); font-size:15px; }
.content ul { padding-left:20px; margin-top:10px; }

.tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:16px; }
.tool-card { display:block; text-decoration:none; color:inherit; background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:18px; padding:20px; transition:.25s; }
.tool-card:hover { border-color:rgba(99,179,237,.45); transform:translateY(-3px); }
.tool-card strong { display:block; color:#fff; font-size:17px; margin-bottom:6px; }
.tool-card span { color:var(--text-2); font-size:14px; }

/* tools hub cards */
.tools-hub { padding:20px 6% 90px; max-width:1220px; margin:0 auto; }
.tools-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.hub-card { display:block; text-decoration:none; color:inherit; background:var(--bg-card); border:1px solid var(--border); border-radius:22px; padding:30px; min-height:250px; transition:.25s; }
.hub-card:hover { border-color:rgba(99,179,237,.45); transform:translateY(-4px); background:var(--bg-card-hover); }
.hub-icon { font-size:36px; margin-bottom:22px; }
.hub-card h2 { font-size:24px; color:#fff; margin-bottom:12px; }
.hub-card p { color:var(--text-2); font-size:15px; }
.hub-tag { display:inline-flex; margin-top:22px; color:var(--blue); border:1px solid rgba(99,179,237,.2); background:rgba(99,179,237,.1); padding:5px 12px; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; }

@media(max-width:900px) {
  .hero-grid, .calc-grid { grid-template-columns:1fr; }
  .hero { padding-top:108px; }
  .hero h1 { font-size:42px; }
  .form-grid, .results { grid-template-columns:1fr; }
  .calculator-wrap { padding:18px; }
  .metric-mini { grid-template-columns:1fr 1fr; }
}