:root{
  --bg:#f7f9fc;--card:#ffffff;--text:#102033;--muted:#68788d;--line:#dfe6ee;
  --primary:#176bff;--primary2:#12b981;--soft:#edf4ff;--shadow:0 12px 30px rgba(15,35,60,.08);
  --radius:20px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:inherit;text-decoration:none}
.container{width:min(1160px,calc(100% - 32px));margin:auto}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;gap:26px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:25px;letter-spacing:-.8px}
.logoMark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;display:grid;place-items:center;font-weight:900}
.navlinks{display:flex;gap:20px;margin-left:auto;font-size:14px;font-weight:700;color:#536478}
.navcta{background:#102033;color:#fff;padding:10px 16px;border-radius:12px}
.mobileMenu{display:none;margin-left:auto;border:0;background:#eef3f8;border-radius:10px;padding:10px 12px;font-size:18px}
.toolstrip{background:#fff;border-bottom:1px solid var(--line)}
.toolstrip .container{display:flex;gap:18px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
.toolstrip a{white-space:nowrap;font-size:13px;font-weight:700;color:#5c6b80}
.hero{padding:72px 0 44px;background:radial-gradient(circle at 75% 15%,#e1f7ef 0,transparent 30%),radial-gradient(circle at 20% 10%,#e7efff 0,transparent 36%)}
.heroGrid{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;background:#e9f1ff;color:#1559c8;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
h1{font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-2.8px;margin:18px 0 18px}
.hero p{font-size:19px;color:var(--muted);max-width:720px}
.heroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{border:0;border-radius:14px;padding:14px 18px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.btnPrimary{background:var(--primary);color:#fff}
.btnGhost{background:#fff;border:1px solid var(--line)}
.heroCard{background:#0f2136;color:#fff;padding:28px;border-radius:26px;box-shadow:var(--shadow)}
.heroCard .mini{color:#a9bed7;font-size:13px;text-transform:uppercase;font-weight:900;letter-spacing:.08em}
.heroNum{font-size:42px;font-weight:900;margin:8px 0}
.heroCard .bar{height:11px;border-radius:99px;background:#233a54;overflow:hidden;margin-top:20px}
.heroCard .bar span{display:block;width:76%;height:100%;background:linear-gradient(90deg,#3e8bff,#18c78c)}
.section{padding:58px 0}.sectionTitle{font-size:34px;letter-spacing:-1.1px;margin:0 0 10px}.sectionLead{color:var(--muted);margin:0 0 26px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.toolCard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 5px 18px rgba(15,35,60,.04);transition:.18s}
.toolCard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.icon{width:44px;height:44px;border-radius:13px;background:var(--soft);display:grid;place-items:center;font-weight:900;color:var(--primary);margin-bottom:16px}
.toolCard h3{margin:0 0 8px;font-size:19px}.toolCard p{margin:0;color:var(--muted);font-size:14px}
.badge{display:inline-block;margin-top:14px;background:#effaf5;color:#11845f;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:900}
.featureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.pageHero{padding:48px 0 24px}.pageHero h1{font-size:46px;letter-spacing:-1.7px;margin:10px 0}.crumbs{font-size:13px;color:var(--muted)}
.calcLayout{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:start;padding-bottom:58px}
.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-size:13px;font-weight:800;margin-bottom:7px;color:#43546a}
.field input,.field select{width:100%;padding:13px 14px;border:1px solid #cfd8e3;border-radius:12px;background:#fbfcfe;font:inherit;color:var(--text);outline:none}
.field input:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(23,107,255,.12)}
.span2{grid-column:1/-1}.actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.resultCard{background:linear-gradient(145deg,#10233a,#0f3045);color:#fff;border-radius:20px;padding:24px}
.resultLabel{color:#a9c0d3;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.resultMain{font-size:42px;font-weight:900;margin:6px 0 18px;letter-spacing:-1.6px}
.resultRow{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.resultRow span:first-child{color:#bcd0df}.resultRow strong{text-align:right}
.miniChart{display:flex;height:150px;align-items:end;gap:8px;padding-top:16px}
.miniChart span{flex:1;background:linear-gradient(180deg,#48a1ff,#16bd88);border-radius:6px 6px 2px 2px;min-height:4px}
.content{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;margin-bottom:30px}
.content h2{font-size:28px;letter-spacing:-.8px}.content h3{margin-top:26px}.content p,.content li{color:#536478}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 17px;margin:10px 0}.faq summary{font-weight:800;cursor:pointer}
.footer{background:#0d1b2b;color:#cfdae7;margin-top:60px}.footer .container{padding:42px 0}
.footerGrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}.footer h4{color:#fff;margin-top:0}.footer a{display:block;margin:8px 0;color:#aebfd1;font-size:14px}.footerSmall{border-top:1px solid #203247;padding-top:20px;margin-top:28px;color:#8fa3b7;font-size:13px}
.notice{background:#fff9e8;border:1px solid #f4de9e;color:#735f21;border-radius:14px;padding:14px 16px;font-size:13px}
@media(max-width:900px){.heroGrid,.calcLayout{grid-template-columns:1fr}.grid,.featureGrid{grid-template-columns:1fr 1fr}.footerGrid{grid-template-columns:1fr 1fr}.navlinks{display:none}.mobileMenu{display:block}}
@media(max-width:620px){.container{width:min(100% - 22px,1160px)}.nav{height:64px}.toolstrip .container{padding:10px 0}.hero{padding:48px 0 30px}h1{font-size:42px;letter-spacing:-1.8px}.hero p{font-size:16px}.grid,.featureGrid,.formGrid,.footerGrid{grid-template-columns:1fr}.span2{grid-column:auto}.pageHero h1{font-size:36px}.panel{padding:18px}.resultMain{font-size:34px}}


/* Calcuno V2 — centered layout & richer result visuals */
body{text-align:center}
.nav{justify-content:center}
.logo{justify-content:center}
.navlinks{margin-left:0}
.toolstrip .container{justify-content:center}
.heroGrid{grid-template-columns:1fr;max-width:980px;margin:auto;text-align:center}
.hero p{margin-left:auto;margin-right:auto}
.heroActions{justify-content:center}
.heroCard{max-width:620px;width:100%;margin:10px auto 0}
.sectionTitle,.sectionLead,.pageHero,.crumbs{text-align:center}
.grid,.featureGrid{max-width:1080px;margin-left:auto;margin-right:auto}
.toolCard,.feature{text-align:center}
.icon{margin-left:auto;margin-right:auto}
.calcLayout{grid-template-columns:minmax(0,700px) minmax(0,560px);justify-content:center;max-width:1320px;margin:auto}
.panel{text-align:center}
.formGrid{align-items:end}
.field label{text-align:center}
.field input,.field select{text-align:center}
.actions{justify-content:center}
.resultCard{text-align:center}
.resultRow{align-items:center}
.resultRow span,.resultRow strong{text-align:center;flex:1}
.content{max-width:980px;margin-left:auto;margin-right:auto;text-align:center}
.content ul,.content ol{display:inline-block;text-align:left;max-width:780px}
.faq{max-width:980px;margin-left:auto;margin-right:auto;text-align:center}
.faq details{text-align:left}
.notice{max-width:860px;margin:16px auto}
.footer .container{text-align:center}
.footerGrid{align-items:start}
.footer .logo{justify-content:center}
.footer a{text-align:center}
.footerSmall{text-align:center}

.liveHint{font-size:12px;color:#7b8ca1;margin-top:12px;font-weight:700}
.chartBox{margin-top:18px;padding:16px;border-radius:16px;background:rgba(255,255,255,.06)}
.splitBar{height:18px;border-radius:999px;overflow:hidden;display:flex;background:#233a54;margin-top:12px}
.splitBar .principal{background:#3e8bff}
.splitBar .interest{background:#18c78c}
.legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:#bcd0df}
.legend b{color:#fff}
.tableWrap{overflow-x:auto;margin-top:22px}
.dataTable{width:100%;border-collapse:collapse;min-width:620px;background:#fff;border-radius:16px;overflow:hidden}
.dataTable th,.dataTable td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:center}
.dataTable th{background:#f2f6fb;color:#42536a;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.dataTable td{font-size:14px}
.exampleGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.exampleCard{background:#f8fbff;border:1px solid var(--line);border-radius:15px;padding:16px;text-align:center}
.exampleCard strong{display:block;font-size:18px;margin-bottom:4px}
.exampleCard span{font-size:13px;color:var(--muted)}
.centerIntro{max-width:820px;margin-left:auto;margin-right:auto}
@media(max-width:900px){
  .calcLayout{grid-template-columns:1fr;max-width:720px}
  .exampleGrid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .nav{justify-content:space-between}
  .logo{justify-content:flex-start}
  .toolstrip .container{justify-content:flex-start}
  .resultRow{flex-direction:column;gap:4px}
}

/* Cleaner Calcuno desktop navigation */
@media (min-width: 901px) {
  .nav {
    height: 66px;
    gap: 34px;
  }

  .navlinks {
    gap: 24px;
  }

  .toolstrip .container {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 22px;
  }

  .toolstrip a {
    font-size: 13px;
  }
}

/* Perfect vertical alignment for top navigation */
@media (min-width: 901px) {
  .nav {
    display: flex;
    align-items: center;
  }

  .logo,
  .navlinks {
    display: flex;
    align-items: center;
  }

  .navlinks a {
    display: flex;
    align-items: center;
    height: 44px;
  }

  .navcta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

.mobileDropdown {
  display: none;
}

@media (max-width: 900px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .nav {
    position: relative;
  }

  .mobileDropdown {
    position: absolute;
    top: 64px;
    right: 12px;
    width: min(320px, calc(100vw - 24px));
    background: #ffffff;
    border: 1px solid #dfe6ee;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15,35,60,.18);
    padding: 10px;
    z-index: 2000;
  }

  .mobileDropdown.open {
    display: block;
  }

  .mobileDropdown a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 800;
    color: #102033;
    text-align: left;
  }

  .mobileDropdown a:hover {
    background: #edf4ff;
  }

  .mobileDropdown hr {
    border: 0;
    border-top: 1px solid #dfe6ee;
    margin: 8px 0;
  }
}

@media (max-width: 900px) {
  .mobileDropdown .mobileStart {
    margin-top: 8px;
    background: #102033;
    color: #fff;
    text-align: center;
  }
}

/* =========================================================
   CALCUNO MOBILE V3
   Dedicated mobile layout
   ========================================================= */

@media (max-width: 700px) {

  html, body {
    overflow-x: hidden;
  }

  body {
    text-align: center;
  }

  .container {
    width: calc(100% - 28px);
    max-width: 100%;
  }

  /* HEADER */
  .topbar {
    background: rgba(255,255,255,.98);
  }

  .nav {
    height: 72px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    font-size: 25px;
    gap: 10px;
  }

  .logoMark {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    font-size: 23px;
  }

  .mobileMenu {
    width: 50px;
    height: 50px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 26px;
    border-radius: 15px;
    margin: 0;
  }

  .toolstrip {
    display: none;
  }

  .mobileDropdown {
    top: 66px;
    right: 8px;
    width: calc(100vw - 28px);
    max-width: 350px;
    border-radius: 18px;
    padding: 10px;
  }

  .mobileDropdown a {
    padding: 13px 15px;
    font-size: 15px;
  }

  /* HOMEPAGE HERO */
  .hero {
    padding: 42px 0 32px;
  }

  .heroGrid {
    gap: 30px;
  }

  .eyebrow {
    font-size: 11px;
    padding: 8px 12px;
  }

  h1 {
    font-size: clamp(39px, 11vw, 53px);
    line-height: 1.03;
    letter-spacing: -2px;
    margin: 20px auto 18px;
  }

  .hero p {
    font-size: 17px;
    line-height: 1.65;
    padding: 0 4px;
  }

  .heroActions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 360px;
    margin: 28px auto 0;
    gap: 12px;
  }

  .heroActions .btn {
    width: 100%;
    min-height: 56px;
    font-size: 16px;
    border-radius: 16px;
  }

  .heroCard {
    width: 100%;
    max-width: 100%;
    padding: 24px 18px;
    border-radius: 23px;
    margin-top: 4px;
  }

  .heroNum {
    font-size: 42px;
  }

  /* SECTIONS */
  .section {
    padding: 42px 0;
  }

  .sectionTitle {
    font-size: 30px;
    line-height: 1.15;
  }

  .sectionLead {
    font-size: 15px;
    padding: 0 8px;
  }

  .grid,
  .featureGrid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .toolCard,
  .feature {
    padding: 21px 18px;
    border-radius: 18px;
  }

  .toolCard .icon {
    width: 50px;
    height: 50px;
    font-size: 23px;
    border-radius: 15px;
  }

  /* CALCULATOR PAGE TITLE */
  .pageHero {
    padding: 32px 0 18px;
  }

  .pageHero h1 {
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: -1.4px;
    margin: 11px 0;
  }

  .pageHero .sectionLead {
    font-size: 15px;
    line-height: 1.55;
  }

  .crumbs {
    font-size: 12px;
  }

  /* CALCULATOR LAYOUT */
  .calcLayout {
    display: flex;
    flex-direction: column;
    width: calc(100% - 24px);
    max-width: 620px;
    margin: 0 auto;
    gap: 16px;
    padding-bottom: 38px;
  }

  .panel {
    width: 100%;
    padding: 18px 15px;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(15,35,60,.07);
  }

  .formGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .field {
    width: 100%;
  }

  .field label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .field input,
  .field select {
    min-height: 51px;
    padding: 11px 13px;
    border-radius: 13px;
    font-size: 16px;
    width: 100%;
  }

  .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 17px;
  }

  .actions .btn {
    width: 100%;
    padding: 13px 8px;
    min-height: 50px;
    border-radius: 14px;
    font-size: 14px;
  }

  .liveHint {
    font-size: 11px;
    line-height: 1.45;
    margin: 13px auto 0;
    max-width: 280px;
  }

  /* RESULTS */
  .resultCard {
    padding: 21px 16px;
    border-radius: 18px;
  }

  .resultLabel {
    font-size: 11px;
  }

  .resultMain {
    font-size: 38px;
    line-height: 1.1;
    margin: 9px 0 17px;
    word-break: break-word;
  }

  .resultRow {
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
  }

  .resultRow span,
  .resultRow strong {
    flex: initial;
    text-align: inherit;
    font-size: 13px;
  }

  .resultRow span {
    text-align: left;
  }

  .resultRow strong {
    text-align: right;
  }

  .chartBox {
    padding: 13px;
    margin-top: 15px;
  }

  .legend {
    gap: 11px;
    font-size: 11px;
  }

  .miniChart {
    height: 115px;
    gap: 5px;
  }

  /* COMPOUND INTEREST TABLE */
  .tableWrap {
    width: 100%;
    margin-top: 16px;
    border-radius: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dataTable {
    min-width: 540px;
  }

  .dataTable th,
  .dataTable td {
    padding: 10px 8px;
    font-size: 12px;
  }

  /* ARTICLE / SEO CONTENT */
  .content {
    width: calc(100% - 24px);
    padding: 22px 17px;
    border-radius: 19px;
    margin: 0 auto 24px;
  }

  .content h2 {
    font-size: 25px;
    line-height: 1.2;
  }

  .content h3 {
    font-size: 19px;
  }

  .content p,
  .content li {
    font-size: 14px;
    line-height: 1.65;
  }

  .exampleGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .exampleCard {
    padding: 14px;
  }

  .faq {
    width: calc(100% - 24px);
  }

  .faq details {
    padding: 14px;
  }

  /* FOOTER */
  .footer {
    margin-top: 42px;
  }

  .footer .container {
    padding: 34px 0;
  }

  .footerGrid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footerGrid > div {
    text-align: center;
  }

  .footer p {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .footerSmall {
    margin-top: 24px;
  }

}

@media (max-width: 380px) {

  .container {
    width: calc(100% - 20px);
  }

  .calcLayout,
  .content,
  .faq {
    width: calc(100% - 16px);
  }

  .pageHero h1 {
    font-size: 32px;
  }

  .resultMain {
    font-size: 33px;
  }

  .logo {
    font-size: 23px;
  }

}

@media (max-width: 700px) {
  .toolstrip {
    display: block !important;
    background: #ffffff;
    border-bottom: 1px solid #dfe6ee;
    overflow: hidden;
  }

  .toolstrip .container {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 18px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 11px 14px;
    width: 100%;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .toolstrip .container::-webkit-scrollbar {
    display: none;
  }

  .toolstrip a {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
    color: #536478;
  }
}