/* base.css — styles partagés monhse.com */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#0e6377;--blue-mid:#1a8099;--blue-light:#e8f6f9;--blue-border:#a8dce6;
  --green:#55b734;--green-mid:#6acc45;--green-light:#eef9e9;--green-border:#b8e8a0;
  --ink:#0D1B2A;--ink-mid:#2D3F53;--ink-muted:#5E7490;
  --line:#DDE5F0;--bg:#F8FAFD;--white:#FFFFFF;
  --r-sm:10px;--r-md:16px;--r-lg:24px;
  --shadow-md:0 4px 20px rgba(13,27,42,.09);
  --shadow-lg:0 12px 48px rgba(13,27,42,.11);
  --shadow-xl:0 24px 72px rgba(13,27,42,.13);
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--white);color:var(--ink);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* NAV */
nav{position:sticky;top:0;z-index:200;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.logo-mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-img{height:58px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links>a{font-size:14px;font-weight:500;color:var(--ink-muted);text-decoration:none;transition:color .15s}
.nav-links>a:hover{color:var(--blue)}
.nav-link-main{font-size:14px;font-weight:500;color:var(--ink-muted);cursor:pointer;display:flex;align-items:center;gap:4px;transition:color .15s}
.nav-link-main:hover{color:var(--blue)}
.nav-arrow{font-size:10px}
.nav-item{position:relative;display:flex;align-items:center}
.has-dropdown .dropdown{position:absolute;top:calc(100% + 12px);left:-20px;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);padding:12px;min-width:320px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s ease;z-index:300}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;transition:background .15s;color:var(--ink)}
.dropdown a:hover,.dropdown a.dd-active{background:var(--blue-light)}
.dd-icon{font-size:20px;flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:8px;border:1px solid var(--line)}
.dropdown a strong{font-size:13px;font-weight:600;color:var(--ink);display:block}
.dropdown a small{font-size:12px;color:var(--ink-muted)}
.nav-actions{display:flex;align-items:center;gap:12px}
.btn-ghost{font-size:14px;font-weight:600;color:var(--blue);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;padding:8px 16px;border-radius:var(--r-sm);transition:background .15s;text-decoration:none;display:inline-block}
.btn-ghost:hover{background:var(--blue-light)}
.btn-nav{font-size:14px;font-weight:700;color:var(--white);background:var(--blue);border:none;cursor:pointer;font-family:'DM Sans',sans-serif;padding:10px 22px;border-radius:var(--r-sm);box-shadow:0 2px 10px rgba(14,99,119,.3);transition:background .15s,transform .15s;text-decoration:none;display:inline-block}
.btn-nav:hover{background:var(--blue-mid);transform:translateY(-1px)}

/* TYPOGRAPHY */
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;line-height:1.15;letter-spacing:-0.02em;color:var(--ink)}
h1{font-size:44px;margin-bottom:20px}
h2{font-size:36px;margin-bottom:16px}
h3{font-size:20px;font-weight:700;margin-bottom:10px}
h4{font-size:16px;font-weight:700;margin-bottom:8px}
.accent-green{color:var(--green)}
.accent-blue{color:var(--blue)}
.section-tag{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.section-sub{font-size:17px;color:var(--ink-muted);line-height:1.7;max-width:580px}
.inner{max-width:1140px;margin:0 auto}
section{padding:80px 48px}

/* BUTTONS */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:var(--white);border:none;border-radius:var(--r-md);padding:16px 30px;font-size:16px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;box-shadow:0 6px 24px rgba(14,99,119,.32);transition:transform .15s;text-decoration:none}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--ink-mid);border:1.5px solid var(--line);border-radius:var(--r-md);padding:15px 26px;font-size:15px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color .15s,background .15s;text-decoration:none}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}

/* FEATURE TAG */
.feat-tag{display:inline-flex;align-items:center;gap:8px;background:var(--blue-light);border:1px solid var(--blue-border);border-radius:100px;padding:6px 16px;font-size:13px;font-weight:600;color:var(--blue);margin-bottom:20px}

/* INFO CARDS */
.info-card{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);padding:28px 24px;transition:box-shadow .2s,transform .2s}
.info-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.info-card h3{font-size:18px;margin-bottom:10px}
.info-card p{font-size:14px;color:var(--ink-muted);line-height:1.65}

/* LEGAL NOTE */
.legal-note{margin-top:40px;background:var(--blue-light);border:1px solid var(--blue-border);border-left:4px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 20px;font-size:14px;color:var(--ink-mid);line-height:1.6}

/* MODE CARDS */
.mode-card{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:32px 28px}
.mode-badge{display:inline-block;border:1px solid;border-radius:100px;padding:5px 16px;font-size:12px;font-weight:700;margin-bottom:8px}
.mode-card h3{font-size:22px;margin-bottom:10px}
.mode-card p{font-size:14px;color:var(--ink-muted);line-height:1.65;margin-bottom:20px}

/* CHECKLIST */
.check-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.check-list li{font-size:14px;color:var(--ink-mid);display:flex;align-items:flex-start;gap:8px;line-height:1.45}
.check-list li::before{content:"✓";color:var(--green);font-weight:700;flex-shrink:0}

/* STEPS */
.step{text-align:center;position:relative;z-index:1;padding:0 16px}
.step-num{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--blue));color:var(--white);font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 4px 16px rgba(14,99,119,.25)}
.step h4{font-size:16px;margin-bottom:8px}
.step p{font-size:13px;color:var(--ink-muted);line-height:1.6}

/* FOOTER */
footer{background:var(--ink);padding:56px 48px 36px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand p{font-size:14px;color:#6B7F94;line-height:1.7;margin-top:14px;max-width:240px}
.footer-col h5{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;color:var(--white);margin-bottom:16px}
.footer-col a{display:block;font-size:14px;color:#6B7F94;text-decoration:none;margin-bottom:10px;transition:color .15s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:13px;color:#4A5A6A}
.flt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;color:var(--white);letter-spacing:-0.03em}
.flt span{color:#3B7DE8}
.flt em{font-style:normal;color:var(--green-mid)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
/* ── BURGER MENU MOBILE ─────────────────────────────────────── */
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; }
.burger span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:all .25s; }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media(max-width:960px){
  nav{padding:0 20px}
  .nav-links,.btn-ghost{display:none}
  .burger{display:flex}
  section{padding:56px 20px}
  h1{font-size:30px}
  h2{font-size:26px}
  .footer-top{grid-template-columns:1fr 1fr}
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns:repeat(3"],[style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr!important}
}

/* ── BURGER MENU MOBILE ─────────────────────────────────────── */


.mobile-menu {
  display:none;
  position:fixed;
  top:68px; left:0; right:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:16px 20px 24px;
  z-index:199;
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  flex-direction:column;
  gap:4px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  padding:12px 8px;
  border-bottom:1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom:none; }
.mobile-menu .mob-cta {
  margin-top:12px;
  background:var(--blue);
  color:#fff !important;
  text-align:center;
  border-radius:var(--r-sm);
  padding:14px 8px !important;
  font-weight:700 !important;
  border-bottom:none !important;
}
.mobile-menu .mob-section {
  font-size:11px;
  font-weight:700;
  color:var(--ink-muted);
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:16px 8px 4px;
  border-bottom:none !important;
}