:root{
  --brand: #20a7ad;
  --ink: #080b0d;
  --bg: #ffffff;
  --surface: #f6f8f9;
  --border: #0a0a0a;

  --page-pad: clamp(12px, 4vw, 32px);
  --radius: 14px;
  --shadow-soft: 0 10px 24px rgba(0,0,0,.08);
  --shadow-pop: 0 2px 0 var(--border), 0 1px 12px rgba(0,0,0,.10);

  --fs-xs: clamp(12px, 0.78rem + 0.1vw, 13px);
  --fs-sm: clamp(13px, 0.82rem + 0.2vw, 15px);
  --fs-md: clamp(15px, 0.96rem + 0.3vw, 17px);
  --fs-lg: clamp(18px, 1.05rem + 0.6vw, 22px);
  --fs-xl: clamp(24px, 1.35rem + 1.6vw, 34px);
  --fs-xxl: clamp(30px, 1.6rem + 3vw, 54px);
}

/* Base */
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family: Montserrat;line-height:1.6;min-width:0;overflow-x:hidden}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
button {
    font-family: "Montserrat", Sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 2em;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
a{color:var(--brand);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--brand);}
a:focus{outline:3px solid rgba(32,167,173,.55);outline-offset:2px}

section{position:relative}

img{max-width:100%;height:auto;display:block}
.container{margin-inline:auto;padding:var(--page-pad);min-width:0}
@media (min-width: 960px){ .container{width:100%;max-width:1200px} }

/* Header */
header{position:sticky;top:0;z-index:100;background:#fffffff0;backdrop-filter:saturate(160%) blur(8px);border-bottom:2px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;min-width:0}
.brand img{height:36px;border-radius:10px}

/* Desktop links */
.nav-links{display:flex;gap:10px;align-items:center}
.nav-links a{font-weight:700;text-decoration:none;color:var(--ink);padding:.35rem .6rem;border-radius:10px}
.nav-links a:focus-visible{outline:3px solid rgba(32,167,173,.55);outline-offset:2px}

/* CTA Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.05rem;border-radius:12px;background:#000;color:#fff;font-weight:800;border:2px solid var(--brand);cursor:pointer;box-shadow:var(--shadow-soft);text-decoration:none}
.btn.secondary{background:#fff;color:var(--ink);border:2px solid var(--border)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid rgba(32,167,173,.55);outline-offset:2px}
.btn.small{padding:.6rem .8rem;font-size:var(--fs-sm);border-radius:10px}

/* Mobile nav trigger */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--border);border-radius:12px;background:#fff}
.nav-toggle svg{width:22px;height:22px}

/* Mobile menu */
.mobile-menu{position:fixed;top: calc(var(--header-h, 64px) + env(safe-area-inset-top)); left:0; right:0; bottom:0;background:#ffffff; border-top:2px solid var(--border); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; padding:var(--page-pad); display:flex; flex-direction:column; gap:12px; z-index:40; overflow:auto}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-menu a{display:block;padding:12px 10px;border:2px solid var(--border);border-radius:12px;text-decoration:none;font-weight:800;color:var(--ink);background:var(--surface)}
body.no-scroll{overflow:hidden}
body.no-scroll header{background:#fff !important;backdrop-filter:none}

@media (max-width: 960px){ .nav .nav-links, .nav > .btn{display:none} .nav .nav-toggle{display:inline-flex} }
@media (min-width: 961px){ .mobile-menu{display:none} .nav .nav-links{display:flex !important} .nav > .btn{display:inline-flex !important} }

/* Hero */
.hero{display:flex;flex-direction:column;gap:clamp(16px,3vw,28px);align-items:stretch}
.badge{display:inline-flex;gap:8px;align-items:center;background:#fff;border:2px solid var(--border);border-radius:999px;padding:8px 12px;font-size:var(--fs-sm)}
.hero h1{font-size:var(--fs-xxl);line-height:1.05;margin:.4rem 0}
.hero p{font-size:var(--fs-md);margin:.2rem 0 1rem}
.panel{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:clamp(14px,2.2vw,22px)}

/* Auto list */
.auto-grid{display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,18px)}
.auto-grid > *{flex:1 1 clamp(200px, 32%, 420px);min-width:0}

/* Cards */
.card{background:#fff;border:2px solid var(--border);border-radius:var(--radius);padding:clamp(12px,1.8vw,18px);box-shadow:var(--shadow-soft);transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.card h3{margin:0 0 .35rem;font-size:var(--fs-lg)}
.pill{display:inline-block;font-size:var(--fs-xs);background:#fff;border:2px solid var(--border);border-radius:999px;padding:3px 10px;margin-bottom:6px}

/* Steps */
.steps{display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,16px);margin:clamp(16px,3vw,24px) 0}
.steps > .step{flex:1 1 clamp(220px, 32%, 440px);min-width:0}
.step{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px dashed var(--border);padding:clamp(12px,2vw,16px);border-radius:14px}
.num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:var(--surface);font-weight:800;flex:0 0 32px}

/* Calculator */
#calculator{scroll-margin-top:84px}
.calculator{display:flex;flex-wrap:wrap;gap:clamp(12px,2.4vw,18px);margin-top:clamp(8px,1.4vw,12px)}
.calculator > *{flex:1 1 clamp(260px, 48%, 560px);min-width:0}
.field{display:flex;flex-direction:column;gap:6px}
label{font-weight:700;font-size:var(--fs-sm)}
input, select{background:#fff;color:var(--ink);border:2px solid var(--border);padding:12px;border-radius:12px;outline:none;font-size:var(--fs-md)}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M7 10l5 5 5-5H7z" fill="%23000"/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
input:focus, select:focus{outline:3px solid rgba(32,167,173,.55);outline-offset:2px}
.result{background:#fff;border:2px solid var(--border);border-radius:14px;padding:clamp(12px,2vw,16px)}
.result b{font-size:clamp(22px,2.2vw,28px)}
.teaser{font-size:var(--fs-sm);opacity:.85}

/* Lead Gate */
.gate{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.4);z-index:120}
.gate.open{display:flex;flex-direction:column;align-content: center;align-items: center;}
.gate .sheet{width: 90%;height: 75%;margin:15px;background:#fff;border-top:2px solid var(--border);border-bottom: 2px solid black;border-left:2px solid var(--border);border-right:2px solid var(--border);border-radius:16px 16px 0 0;box-shadow:var(--shadow-soft);padding:clamp(14px,2.2vw,22px)}
@media (min-width: 960px){ .gate .sheet{width:clamp(320px, 50vw, 640px);max-width:100%;border-radius:16px;box-shadow:var(--shadow-pop);margin:0} }
.gate h3{margin:.2rem 0 .6rem}
.gate form{display:flex;flex-wrap:wrap;gap:10px}
.gate input{flex:1 1 220px;background:#fff;color:var(--ink);border:2px solid var(--border);padding:12px;border-radius:12px}
.gate .actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:clamp(8px,1.4vw,12px)}
details{background:#fff;border:2px solid var(--border);border-radius:12px;padding:clamp(10px,1.8vw,14px)}
summary{cursor:pointer;font-weight:800;font-size:var(--fs-md)}

/* CTA */
.cta{display:flex;flex-wrap:wrap;gap:clamp(14px,2.6vw,24px);align-items:stretch}
.cta > *{flex:1 1 clamp(280px, 48%, 640px);min-width:0}
.cta .panel{background:#fff;border:2px solid var(--border);border-radius:var(--radius);padding:clamp(14px,2.2vw,22px)}
.cta form{display:flex;flex-wrap:wrap;gap:10px}
.cta form > input{flex:1 1 200px}
.cta input{background:#fff;color:var(--ink);border:2px solid var(--border);padding:12px;border-radius:12px}
.logos{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.logo{height:26px}

/* Accent */
.accent, .highlight, .footer-highlight, .pill, .badge, .result b { color: var(--brand);font-weight: 700; }

.logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.logos img {
    height: 26px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Footer */
footer { color: #333; text-align: center; }
.footer-highlight { font-size: 1.4rem; font-weight: bold; color: #20a7ad; margin-top: 10px; }
.footer-text { text-decoration: none; font-size: 0.9rem; font-weight: 500; margin-bottom: 10px; line-height: 1.5; }
.footer-text a { color: #000; text-decoration: none; }
.footer-text a:hover { color: #115356; }
.footer-bottom { font-size: x-small; }

/* Desktop layout */
@media (min-width: 960px){
  .hero{flex-direction:row}
  .hero > :first-child{flex:1 1 55%;min-width:0}
  .hero > .panel{flex:1 1 100%;min-width:0}
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* Optional dark tweak */
@media (prefers-color-scheme: dark){ .card, .result, details, .cta .panel{background:color-mix(in srgb, var(--surface) 88%, black)} }

/* Flex gap fallback */
@supports not (gap: 1rem){
  .auto-grid, .steps, .calculator, .cta, .faq, .logos{margin:-6px}
  .auto-grid > *, .steps > * , .calculator > *, .cta > * , .faq > * , .logos > *{margin:6px}
}

/* Calculator UX Enhancements */
.calc-title{ margin:.4rem 0 .4rem; font-size:var(--fs-xl); }
.calc-subtitle{ margin:0 0 .8rem; font-size:var(--fs-md); opacity:.9; }

.calc-grid{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(20px,3vw,32px);
  margin-top:clamp(8px,1.4vw,12px);
  align-items:flex-start;
}

.calc-form{
    flex: 1 1 775px;
    /* max-width: 480px; */
    /* background: #fff; */
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(16px, 2vw, 24px);
    box-shadow: var(--shadow-soft);
    gap: 16px;
    justify-content: end;
    /* align-content: center; */
}

.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-weight:600;font-size:var(--fs-sm);}
.field input,
.field select{
  width:90%;
  background:#fff;
  color:var(--ink);
  border:2px solid var(--border);
  padding:12px 14px;
  border-radius:12px;
  font-size:var(--fs-md);
  line-height:1.4;
  transition:border .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(32,167,173,.25);
  outline:none;
}

.field.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:700px){.field.two{grid-template-columns:1fr;}}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}
.calc-hint{ font-size:var(--fs-xs); opacity:.8; margin-top:4px; }

/* Results panel */
.result{
  flex:1 1 480px;
  min-width:320px;
  background:#fff;
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(16px,2vw,24px);
  box-shadow:var(--shadow-soft);
}
.metrics{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap:12px;
  margin-bottom:12px;
}
.metric{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:12px;
  padding:10px;
  text-align:center;
}
.metric-label{ font-size:var(--fs-xs); opacity:.75; margin-bottom:4px;}
.metric-value{ font-weight:800; color:var(--ink);}
.metric-value .accent{ color:var(--brand); }

.am-table-wrap{ margin-top:10px; }
.am-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); background:#fff; border:2px solid var(--border); border-radius:12px; overflow:hidden; }
.am-table thead th{ text-align:left; padding:10px; border-bottom:2px solid var(--border); background:var(--surface); }
.am-table tbody td{ padding:10px; border-top:1px dashed var(--border); vertical-align:top; }
.am-date{ font-size:var(--fs-xs); opacity:.7; }

.am-foot{
display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 6px;
    flex-wrap: wrap;
    flex-direction: column;
}
.am-note{ font-size:var(--fs-xs); opacity:.8; }

@media (max-width: 520px){
  .am-table thead{ display:none; }
  .am-table tbody tr{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px 10px; }
  .am-table tbody td{ border:none; padding:0; }
  .am-table tbody tr + tr{ border-top:1px dashed var(--border); padding-top:10px; margin-top:10px; }
  .am-table tbody td:nth-child(1){ grid-column:1 / -1; font-weight:700; }
}

.am-table-wrap{ position:relative; }

.am-table-wrap.locked tbody tr:nth-child(n+4){
  filter: blur(5px);
  opacity:.9;
  user-select:none;
  pointer-events:none;
}

.am-table-wrap.locked::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:60px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events:none;
}

.am-table{ margin-bottom:8px; }

.am-foot{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin-top:6px; flex-wrap:wrap;
}

@media (max-width: 520px){
    .am-table{ display:none; }
    .hideMobile{ display:none !important; }
}

#bdGateForm{
  display:grid;
  grid-template-columns: 1fr;      
  gap:16px;
  border:none;
  box-shadow:none;
  padding:0;
  max-width:none;
}

#bdGateForm > div:not(.actions){
  display:grid;
  grid-template-columns: 160px minmax(0,1fr);
  align-items:center;
  gap:12px;
}

#bdGateForm label{
  font-weight:600;
  font-size: var(--fs-sm, 14px);
  line-height:1.2;
}

#bdGateForm input{
  width:90%;
  background:#fff;
  color:var(--ink, #080b0d);
  border:2px solid var(--border, #0a0a0a);
  padding:12px 14px;
  border-radius:12px;
  font-size:var(--fs-md, 16px);
  line-height:1.4;
  transition:border .2s ease, box-shadow .2s ease;
}

#bdGateForm input:focus{
  border-color:var(--brand, #20a7ad);
  box-shadow:0 0 0 3px rgba(32,167,173,.25);
  outline:none;
}

#bdGateForm .actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  margin-top:4px;
  grid-column: 1 / -1; 
}

#bdGateForm .calc-hint{
  font-size:var(--fs-xs, 12px);
  opacity:.8;
  margin-top:4px;
  grid-column: 1 / -1;
}

@media (max-width: 560px){
  #bdGateForm > div:not(.actions){
    grid-template-columns: 1fr;
    gap:6px;
  }
  #bdGateForm label{
    margin-bottom:2px;
  }
  #bdGateForm .actions{
    justify-content:stretch; 
  }
  #bdGateForm .actions .btn{
    flex:1 1 auto;
  }
}

@media (min-width: 961px){
  #bdGateForm{
    max-width:720px;
  }
}