*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --blue-dark:#0d2a45;
  --blue-mid:#1a4a7a;
  --blue-accent:#2272b8;
  --blue-light:#e6f0fa;
  --blue-pale:#f4f8fd;
  --teal:#0e7a6e;
  --teal-light:#e4f4f2;
  --amber:#b5620a;
  --amber-light:#fdf3e7;
  --red:#c0392b;
  --red-light:#fde8e8;
  --green:#1e7a3e;
  --green-light:#e6f5ec;
  --text-primary:#0d1f35;
  --text-secondary:#3a5070;
  --text-muted:#7a90a8;
  --border:#cdd9e8;
  --bg:#ffffff;
  --bg-surface:#f4f8fd;
  --radius:10px;
  --radius-lg:16px;
}

html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6;color:var(--text-primary);background:var(--bg);-webkit-font-smoothing:antialiased;}

/* Header */
header{background:var(--blue-dark);padding:0 1.5rem}
.header-inner{max-width:860px;margin:0 auto;padding:1rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.logo{font-family:'DM Serif Display',serif;font-size:20px;color:#fff;text-decoration:none;letter-spacing:-0.02em;white-space:nowrap;}
.logo span{color:#7ab8e8}
nav{display:flex;gap:4px;flex-wrap:wrap;}
nav a{font-size:13px;color:rgba(255,255,255,0.6);text-decoration:none;padding:5px 10px;border-radius:6px;transition:all 0.12s;white-space:nowrap;}
nav a:hover{color:#fff;background:rgba(255,255,255,0.1)}
nav a.active{color:#7ab8e8;background:rgba(122,184,232,0.12)}

/* Hero */
.hero{background:var(--blue-dark);padding:2.5rem 1.5rem 3rem;text-align:center;position:relative;overflow:hidden;}
.hero::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:40px;background:var(--bg-surface);clip-path:ellipse(55% 100% at 50% 100%);}
.hero h1{font-family:'DM Serif Display',serif;font-size:clamp(26px,5vw,40px);color:#fff;line-height:1.15;margin-bottom:10px;letter-spacing:-0.02em;}
.hero p{font-size:16px;color:rgba(255,255,255,0.6);max-width:520px;margin:0 auto}
.hero-badge{display:inline-block;background:rgba(122,184,232,0.15);border:1px solid rgba(122,184,232,0.3);color:#7ab8e8;font-size:12px;padding:4px 12px;border-radius:20px;margin-bottom:14px;letter-spacing:0.04em;}

/* Main */
main{background:var(--bg-surface);padding:2.5rem 1.5rem 3rem}
.container{max-width:760px;margin:0 auto}
.section-label{font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;}

/* Cards */
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.25rem;margin-bottom:10px;}

/* Inputs */
.input-row{display:grid;gap:10px;margin-bottom:10px}
.two-col{grid-template-columns:1fr 1fr}
.three-col{grid-template-columns:1fr 1fr 1fr}
@media(max-width:480px){.two-col{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.two-col,.three-col{grid-template-columns:1fr}}
.input-group{display:flex;flex-direction:column;gap:5px}
.input-group label{font-size:12px;color:var(--text-muted)}
.input-group input,.input-group select{width:100%;height:40px;border:1px solid var(--border);border-radius:8px;padding:0 12px;font-size:15px;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text-primary);transition:border-color 0.15s;-webkit-appearance:none;appearance:none;}
.input-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233a5070' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
.input-group input:focus,.input-group select:focus{outline:none;border-color:var(--blue-accent);box-shadow:0 0 0 3px rgba(34,114,184,0.1);}

/* Preset pills */
.preset-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.preset-pill{font-size:12px;padding:4px 12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:20px;cursor:pointer;color:var(--text-secondary);font-family:'DM Sans',sans-serif;transition:all 0.12s;}
.preset-pill:hover{border-color:var(--blue-accent)}
.preset-pill.active{background:var(--blue-light);color:var(--blue-mid);border-color:var(--blue-accent);font-weight:500;}

/* Results box */
.results-box{background:var(--blue-dark);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:10px;}
.res-primary{display:flex;align-items:baseline;gap:8px;margin-bottom:1rem}
.res-big{font-family:'DM Serif Display',serif;font-size:56px;color:#fff;line-height:1;letter-spacing:-0.03em;}
.res-unit{font-size:18px;color:rgba(255,255,255,0.5)}
.res-label{font-size:13px;color:rgba(255,255,255,0.4);margin-top:2px}
.res-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:1rem;}
@media(max-width:420px){.res-cards{grid-template-columns:1fr 1fr}}
.res-card{background:rgba(255,255,255,0.07);border-radius:10px;padding:10px 12px}
.res-card .val{font-size:22px;font-weight:500;color:#fff}
.res-card .lbl{font-size:11px;color:rgba(255,255,255,0.45);margin-top:2px}

/* Rating badge */
.rating-row{border-top:1px solid rgba(255,255,255,0.1);padding-top:1rem;margin-top:0.25rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.rating-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;font-size:13px;font-weight:500;}
.rating-badge.good{background:rgba(46,183,120,0.18);color:#5de8a0}
.rating-badge.ok{background:rgba(250,180,50,0.18);color:#fad264}
.rating-badge.poor{background:rgba(240,80,80,0.18);color:#f87070}
.rating-text{font-size:12px;color:rgba(255,255,255,0.45);line-height:1.5}

/* Info cards */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:2rem}
@media(max-width:480px){.info-grid{grid-template-columns:1fr}}
.info-card{background:var(--amber-light);border-left:3px solid var(--amber);border-radius:0 8px 8px 0;padding:12px 14px;}
.info-card.blue{background:var(--blue-light);border-left-color:var(--blue-accent)}
.info-card.teal{background:var(--teal-light);border-left-color:var(--teal)}
.info-card.green{background:var(--green-light);border-left-color:var(--green)}
.info-card h3{font-size:13px;font-weight:500;color:var(--amber);margin-bottom:4px}
.info-card.blue h3{color:var(--blue-accent)}
.info-card.teal h3{color:var(--teal)}
.info-card.green h3{color:var(--green)}
.info-card p{font-size:13px;color:#4a5e78;line-height:1.5}
.info-card.blue p,.info-card.teal p,.info-card.green p{color:#2a4060}

/* FAQ */
.faq{margin-bottom:2rem}
.faq h2{font-family:'DM Serif Display',serif;font-size:24px;color:var(--text-primary);margin-bottom:1.25rem;}
.faq-item{margin-bottom:1.25rem}
.faq-item h3{font-size:15px;font-weight:500;color:var(--text-primary);margin-bottom:5px}
.faq-item p{font-size:14px;color:var(--text-secondary);line-height:1.65}
.faq-item a{color:var(--blue-accent);text-decoration:none;font-weight:500}
.faq-item a:hover{text-decoration:underline}

/* Footer */
footer{background:var(--blue-dark);padding:2rem 1.5rem;text-align:center;}
.footer-inner{max-width:760px;margin:0 auto;}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin-bottom:1rem;}
.footer-links a{font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.12s;}
.footer-links a:hover{color:#7ab8e8}
.footer-credit{font-size:13px;color:rgba(255,255,255,0.3);}
.footer-credit a{color:#7ab8e8;text-decoration:none;font-weight:500}
.footer-credit a:hover{text-decoration:underline}

.hidden{display:none!important}