* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; color: #19302f; background: #eef3f2; font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
.contMain, .sdaL { display: none !important; }
.home-hero { padding: 20px 18px 34px; color: #fff; background: linear-gradient(135deg, #0b5b55, #063f3b); border-bottom: 4px solid #daa520; }
.home-nav { width: min(980px, 100%); margin: 0 auto 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.home-brand { display: flex; align-items: center; gap: 10px; min-width: 0; width: auto; color: #fff; text-decoration: none; font-weight: 800; }
.home-brand img { width: 42px; height: 42px; border-radius: 10px; }
.home-nav__links { display: flex; gap: 8px; margin-left: auto; }
/* style.css sets a { width: 100% } for every link on the site, so the width
   has to be reset here or each link claims the whole row. The links also
   keep their own width and never wrap: without this they get squeezed by
   the brand on a narrow screen, the text breaks over three lines, the row
   grows tall and the 999px radius turns both links into circles instead
   of pills. */
.home-nav__links a { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.13); text-decoration: none; font-size: .86rem; font-weight: 700; }
.home-hero__content { width: min(880px, 100%); margin: 0 auto; text-align: center; }
.home-kicker { color: #f4d78a; font-size: .78rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.home-hero h1 { margin: 10px 0; font-size: clamp(2rem, 7vw, 4rem); line-height: 1.03; }
.home-hero p { max-width: 680px; margin: 0 auto; color: #d7ebe8; line-height: 1.6; }
.home-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.home-action { width: auto; display: inline-block; min-width: 170px; padding: 13px 18px; border-radius: 12px; color: #fff; background: #0f766e; text-decoration: none; font-weight: 800; box-shadow: 0 12px 26px rgba(0,0,0,.17); }
.home-action--gold { color: #2d2100; background: #daa520; }
.home-main { width: min(980px, 100%); margin: 0 auto; padding: 22px 16px 40px; }
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; margin: 18px 0; }
.home-card { width: auto; display: block; min-width: 0; padding: 18px; border: 1px solid #d7e2e0; border-radius: 15px; color: inherit; background: #fff; box-shadow: 0 5px 18px rgba(26,49,47,.07); text-decoration: none; }
.home-card h2 { margin: 0 0 7px; color: #0b5b55; font-size: 1.03rem; }
.home-card p { margin: 0; color: #5c6f6d; font-size: .9rem; line-height: 1.5; }
.home-install { margin-top: 18px; padding: 16px; border: 1px solid #d7e2e0; border-radius: 15px; background: #fff; }
.home-install summary { color: #0b5b55; font-weight: 800; cursor: pointer; }
.home-install__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.home-install button { padding: 10px 12px; border: 0; border-radius: 9px; color: #fff; background: #0b5b55; font: inherit; font-weight: 700; }
.home-footer { padding: 22px 16px; color: #bdd4d1; background: #063f3b; text-align: center; font-size: .86rem; }
.home-footer a { color: #f4d78a; }
#overlay { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.42); }
.div1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(360px,calc(100% - 24px)); padding: 18px; border-radius: 15px; background: #fff; }
#ins, #spin { display: none; }
@media (max-width: 760px) {
    .home-grid { grid-template-columns: 1fr 1fr; }
    /* The brand name is 405px wide and would squeeze the two nav links off
       the row. The logo alone carries the identity, so the name goes. */
    .home-brand span { display: none; }
}
@media (max-width: 520px) {
    .home-nav { margin-bottom: 24px; }
    .home-nav__links a:first-child { display: none; }
    .home-grid { grid-template-columns: 1fr; }
    .home-action { width: 100%; }
}