/* InstantCalc.org — shared design system (clean & modern) */
:root{
  --bg:#f6f8fb; --surface:#ffffff; --ink:#0f2033; --muted:#5b6b7d;
  --line:#e4e9f0; --brand:#1d6fe0; --brand-d:#1657b3; --accent:#12b886; --accent-d:#0c8a63;
  --con:#f59f00; --fin:#1d6fe0; --hea:#e8590c; --eve:#7048e8;
  --radius:14px; --shadow:0 2px 14px rgba(16,42,73,.07);
  --maxw:1120px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:64px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:8px}
.logo .mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;font-size:16px}
.logo b{color:var(--brand)}
.nav{display:flex;gap:6px;margin-left:6px;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:600;font-size:14px}
.nav a:hover{background:#eef3fb;color:var(--ink);text-decoration:none}
.head-search{margin-left:auto;position:relative}
.head-search input{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px 9px 36px;width:230px;font-size:14px;outline:none}
.head-search input:focus{border-color:var(--brand)}
.head-search svg{position:absolute;left:12px;top:9px;color:var(--muted)}

/* Hero */
.hero{background:linear-gradient(160deg,#eaf1fd,#f6f8fb 60%);border-bottom:1px solid var(--line);padding:56px 0 40px}
.hero h1{font-size:40px;line-height:1.1;letter-spacing:-.03em;margin:0 0 12px}
.hero p{font-size:18px;color:var(--muted);max-width:600px;margin:0 auto 26px}
.hero.center{text-align:center}
.bigsearch{max-width:560px;margin:0 auto;position:relative}
.bigsearch input{width:100%;padding:16px 18px 16px 48px;border-radius:12px;border:1px solid var(--line);font-size:17px;box-shadow:var(--shadow);outline:none}
.bigsearch input:focus{border-color:var(--brand)}
.bigsearch svg{position:absolute;left:16px;top:16px;color:var(--muted)}
.search-hits{position:absolute;top:60px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;text-align:left;display:none;z-index:20}
.search-hits a{display:block;padding:11px 16px;color:var(--ink);border-bottom:1px solid var(--line)}
.search-hits a:last-child{border-bottom:none}
.search-hits a:hover{background:#f2f6fd;text-decoration:none}
.search-hits a small{color:var(--muted);float:right}

/* Section + category grid */
section{padding:40px 0}
.sec-title{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:0 0 18px}
h2.big{font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
.lead{color:var(--muted);margin:0 0 24px;max-width:680px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.cat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease;display:block;color:inherit}
.cat-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,42,73,.12);text-decoration:none}
.cat-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;margin-bottom:14px;color:#fff}
.cat-card h3{margin:0 0 6px;font-size:18px}
.cat-card p{margin:0 0 12px;color:var(--muted);font-size:14px}
.cat-card .tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;color:var(--muted);background:#f0f4f9;border:1px solid var(--line);padding:3px 8px;border-radius:999px}
.ic-con{background:var(--con)} .ic-fin{background:var(--fin)} .ic-hea{background:var(--hea)} .ic-eve{background:var(--eve)}

/* Calculator cards */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px;align-items:start}
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;scroll-margin-top:80px}
.calc > h3{margin:0;padding:16px 20px;font-size:17px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.calc > h3 .dot{width:9px;height:9px;border-radius:50%}
.calc .body{padding:18px 20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input,.field select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px;outline:none;background:#fff}
.field input:focus,.field select:focus{border-color:var(--brand)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:9px;padding:11px 18px;font-size:15px;font-weight:600;cursor:pointer;width:100%}
.btn:hover{background:var(--brand-d)}
.btn.sm{width:auto;padding:8px 14px;font-size:13px}
.btn.ghost{background:#eef3fb;color:var(--brand)}
.result{margin-top:14px;padding:14px 16px;background:#f2fbf7;border:1px solid #cceee0;border-radius:10px;font-size:15px;display:none}
.result.show{display:block}
.result b{font-size:22px;color:var(--accent-d)}
.result .line{display:flex;justify-content:space-between;padding:3px 0}
.hint{font-size:12px;color:var(--muted);margin-top:6px}

/* Concrete visual diagram */
.concrete-vis{background:#fbfcfe;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px;text-align:center}
.concrete-vis svg{max-width:100%;height:auto}
.shape-tabs{display:flex;gap:6px;margin-bottom:14px}
.shape-tabs button{flex:1;padding:8px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.shape-tabs button.active{background:var(--con);color:#fff;border-color:var(--con)}

/* Currency multi-output */
.cc-out{margin-top:6px;display:grid;gap:8px}
.cc-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.cc-row .flag{font-size:18px;margin-right:8px}
.cc-row .amt{font-weight:700}
.cc-row .rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px}
.cc-add{display:flex;gap:8px;margin:12px 0 4px}

/* Ad slots */
.ad{margin:26px auto;max-width:970px;min-height:90px;border:1px dashed #c7d2e0;border-radius:10px;background:repeating-linear-gradient(45deg,#fff,#fff 10px,#f4f7fb 10px,#f4f7fb 20px);display:grid;place-items:center;color:#9aa8b8;font-size:12px;letter-spacing:.05em;text-transform:uppercase;text-align:center}
.ad.side{min-height:600px;max-width:300px;margin-top:0}
.layout{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}.ad.side{display:none}}

/* SEO content block */
.seo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);margin-top:8px}
.seo h2{font-size:20px;margin:0 0 10px}
.seo h3{font-size:16px;margin:18px 0 6px}
.seo p{color:#33475b;margin:0 0 12px}
.faq details{border-top:1px solid var(--line);padding:12px 0}
.faq summary{font-weight:600;cursor:pointer}
.faq p{margin:8px 0 0}

/* Footer */
.site-foot{background:#0f2033;color:#c3d0de;margin-top:50px;padding:40px 0 30px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
.site-foot .logo{color:#fff}
.site-foot p{font-size:14px;color:#8ba0b5;max-width:280px}
.site-foot h4{color:#fff;font-size:14px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.06em}
.site-foot a{color:#c3d0de;display:block;padding:3px 0;font-size:14px}
.site-foot a:hover{color:#fff}
.foot-bot{border-top:1px solid #24384d;margin-top:26px;padding-top:18px;font-size:13px;color:#8ba0b5;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:30px}.head-search{display:none}}

.crumb{font-size:13px;color:var(--muted);padding:16px 0 0}
.crumb a{color:var(--muted)}
.page-head{padding:10px 0 18px}
.page-head h1{font-size:30px;letter-spacing:-.02em;margin:6px 0}
.page-head p{color:var(--muted);margin:0;max-width:680px}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;color:#fff}