:root{--teal:#0F766E;--teal-dark:#115E59;--teal-light:#CCFBF1;--amber:#F59E0B;--red:#DC2626;--gray:#6B7280;--bg:#FAFAF9;--card:#ffffff;--border:#E5E7EB;--radius:12px}
*{box-sizing:border-box}
body{margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:#111827; line-height:1.5}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
.nav{background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10}
.nav-inner{max-width:1100px; margin:0 auto; padding:10px 18px; display:flex; justify-content:space-between; align-items:center}
.brand{font-weight:800; letter-spacing:0.04em; color:#111827; display:flex; align-items:center; gap:8px; text-decoration:none}
.brand-icon{color:var(--teal); font-size:20px}
.brand-sub{font-weight:400; font-size:10px; color:var(--gray); letter-spacing:0.08em; margin-left:6px; border-left:1px solid var(--border); padding-left:6px}
.nav-links{display:flex; gap:16px; align-items:center; font-size:14px}
.nav-links a.active{color:var(--teal-dark); font-weight:600}
.btn{display:inline-block; padding:8px 14px; border-radius:8px; font-weight:600; font-size:14px; border:1px solid transparent; cursor:pointer; text-decoration:none}
.btn-sm{padding:6px 10px; font-size:13px}
.btn-lg{padding:10px 18px; font-size:15px}
.btn-primary{background:var(--teal); color:#fff; border-color:var(--teal)}
.btn-primary:hover{background:var(--teal-dark); text-decoration:none}
.btn-ghost{background:#fff; border-color:var(--border); color:#374151}
.btn-ghost:hover{background:#F9FAFB; text-decoration:none}
.main{max-width:1100px; margin:0 auto; padding:0 18px}
.flash-wrap{max-width:1100px; margin:12px auto; padding:0 18px}
.flash{padding:10px 12px; border-radius:8px; margin-bottom:8px; font-size:14px}
.flash-success{background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46}
.flash-error{background:#FEF2F2; border:1px solid #FECACA; color:#991B1B}
.hero{padding:36px 0 18px; text-align:center}
.hero-badge{display:inline-block; background:#F0FDFA; border:1px solid var(--teal-light); color:var(--teal-dark); font-size:12px; padding:4px 10px; border-radius:999px; font-weight:600; margin-bottom:12px}
.hero h1{font-size:38px; line-height:1.1; margin:0 0 12px; font-weight:800}
.accent{color:var(--teal)}
.hero-sub{max-width:720px; margin:0 auto; color:#475569; font-size:16px}
.hero-cta{margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.hero-trust{font-size:12px; color:var(--gray); margin-top:10px}
.hero-preview{margin-top:22px; display:flex; justify-content:center}
.preview-card{background:#fff; border:1px solid var(--border); border-radius:12px; width:620px; max-width:100%; text-align:left; box-shadow:0 8px 24px rgba(0,0,0,0.06); overflow:hidden}
.preview-header{background:#F8FAFC; border-bottom:1px solid var(--border); padding:8px 12px; display:flex; gap:6px; align-items:center; font-size:12px}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block}
.dot.red{background:#F87171}.dot.yellow{background:#FBBF24}.dot.green{background:#34D399}
.preview-title{margin-left:8px; color:var(--gray); font-weight:600}
.preview-grid{display:flex; gap:16px; padding:14px}
.preview-score{text-align:center; min-width:90px}
.score-num{font-size:28px; font-weight:800; color:var(--teal-dark)}
.score-den{color:var(--gray)}
.score-label{font-size:11px; color:#475569; margin-top:2px}
.preview-metrics{font-size:13px; color:#334155}
.preview-metrics div{margin-bottom:3px}
.preview-fixes{background:#FFFBEB; border-top:1px solid #FDE68A; padding:10px 14px; font-size:12px; color:#92400E}
.pill{display:inline-block; padding:2px 6px; border-radius:999px; font-size:11px; font-weight:700; line-height:1.2}
.pill-urgent{background:#FEE2E2; color:#991B1B; border:1px solid #FECACA}
.pill-high{background:#FFEDD5; color:#9A3412; border:1px solid #FED7AA}
.pill-medium{background:#FEF3C7; color:#92400E; border:1px solid #FDE68A}
.pill-low{background:#F3F4F6; color:#374151; border:1px solid #E5E7EB}
.pill-ok{background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0}
.pill-rank{background:#F0FDFA; color:#115E59; border:1px solid var(--teal-light)}
.section{padding:22px 0}
.section.alt{background:#fff; border:1px solid var(--border); border-radius:12px; padding:22px; margin:10px 0}
.section.narrow{max-width:780px; margin:0 auto}
h2{font-size:22px; margin:0 0 12px}
.muted{color:var(--gray)}
.small{font-size:13px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media(max-width:860px){.grid4{grid-template-columns:repeat(2,1fr)} .grid3{grid-template-columns:1fr} .grid2{grid-template-columns:1fr} .hero h1{font-size:28px}}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px}
.card.highlight{background:#F0FDFA; border-color:var(--teal-light)}
.card.small{padding:12px; font-size:14px}
.card-icon{width:32px; height:32px; background:#F0FDFA; border:1px solid var(--teal-light); color:var(--teal); display:flex; align-items:center; justify-content:center; border-radius:8px; font-weight:700; margin-bottom:8px}
.card h3{margin:0 0 6px; font-size:15px}
.card h4{margin:0 0 6px; font-size:14px}
.card p{margin:6px 0; font-size:13px; color:#475569}
.card-meta{font-size:11px; color:var(--gray)}
.split{display:grid; grid-template-columns:1.2fr 0.8fr; gap:16px}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.checklist{list-style:none; padding:0; margin:10px 0}
.checklist li{padding:4px 0; font-size:14px}
.checklist li:before{content:"✓ "; color:var(--teal); font-weight:700}
.compact{margin:6px 0; padding-left:18px; font-size:13px}
.callout{background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px; padding:12px 14px; font-size:14px}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{display:flex; gap:10px; background:#F8FAFC; border:1px solid var(--border); border-radius:10px; padding:12px}
.step-n{width:28px; height:28px; background:var(--teal); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; font-size:13px}
.muted-bg{background:#F8FAFC; border:1px solid var(--border); border-radius:12px; padding:14px}
.form label{display:block; font-weight:600; font-size:13px; margin-top:12px}
.form input{width:100%; padding:10px 10px; border:1px solid var(--border); border-radius:8px; margin-top:4px; font-size:14px}
.form input:disabled{background:#F8FAFC; color:var(--gray)}
.help{font-weight:400; color:var(--gray); font-size:12px; display:block; margin-top:3px}
.code{background:#111827; color:#E5E7EB; padding:10px 12px; border-radius:8px; font-family:monospace; font-size:13px; overflow:auto}
.footer{border-top:1px solid var(--border); margin-top:24px; padding:14px 18px; background:#fff}
.footer-inner{max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; gap:12px; font-size:12px; flex-wrap:wrap}
.footer-links{display:flex; gap:14px; align-items:center}
.pricing-card{position:relative}
.pricing-card.featured{border-color:var(--teal); box-shadow:0 8px 24px rgba(15,118,110,0.12)}
.badge{position:absolute; top:-10px; right:12px; background:var(--teal); color:#fff; font-size:11px; padding:3px 8px; border-radius:999px; font-weight:700}
.price{margin:8px 0}
.amount{font-size:32px; font-weight:800}
.per{color:var(--gray)}
.compare-table{width:100%; border-collapse:collapse; font-size:13px}
.compare-table th, .compare-table td{border:1px solid var(--border); padding:8px; text-align:left}
.compare-table th{background:#F8FAFC}
.report-header{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:start}
.report-actions{display:flex; gap:8px; flex-wrap:wrap}
.score-hero{display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; margin-top:12px}
.score-circle{width:110px; height:110px; border-radius:50%; border:6px solid var(--teal-light); background:#F0FDFA; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0}
.score-big{font-size:28px; font-weight:800; color:var(--teal-dark)}
.score-out{font-size:14px; color:var(--gray)}
.score-verdict{font-size:11px; color:#475569; font-weight:600}
.subscores{font-size:13px; display:grid; gap:4px}
.big{font-size:18px; font-weight:800; color:var(--teal-dark)}
.mini-table{width:100%; border-collapse:collapse; font-size:12px}
.mini-table th, .mini-table td{border:1px solid var(--border); padding:6px; text-align:left}
.mini-table th{background:#F8FAFC; font-size:11px}
.ok{color:#059669; font-weight:700}
.bad{color:var(--red); font-weight:700}
.fixes{display:grid; gap:8px}
.fix{background:#fff; border:1px solid var(--border); border-left:4px solid var(--border); border-radius:8px; padding:10px 12px}
.fix-urgent{border-left-color:var(--red)}
.fix-high{border-left-color:#EA580C}
.fix-medium{border-left-color:var(--amber)}
.fix-low{border-left-color:#9CA3AF}
.meter{height:8px; background:#E5E7EB; border-radius:999px; overflow:hidden; margin:6px 0}
.meter-fill{height:100%; background:var(--teal); border-radius:999px}
.alerts{display:grid; gap:6px; margin:10px 0}
.alert{padding:8px 10px; border-radius:8px; font-size:13px; font-weight:600}
.alert-critical{background:#FEF2F2; border:1px solid #FECACA; color:#991B1B}
.alert-warning{background:#FFFBEB; border:1px solid #FDE68A; color:#92400E}