
:root{--smg-blue:#0a2240;--smg-accent:#0ea5e9;--smg-text:#0f172a;--smg-radius:20px}
.smg-hero{position:relative;border-radius:var(--smg-radius);overflow:hidden;margin:26px auto;max-width:1100px;aspect-ratio:16/9;background:#07152b;box-shadow:0 26px 64px rgba(10,34,64,.28)}
.smg-hero::before{content:"";position:absolute;inset:0;background-image:var(--smg-hero),linear-gradient(180deg,rgba(8,20,40,.25),rgba(8,20,40,.85));background-size:cover;background-position:center}
.smg-hero__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;padding:26px}
.smg-headline{font-size:clamp(32px,4.2vw,52px);margin:0 0 12px;line-height:1.05;text-shadow:0 3px 10px rgba(0,0,0,.45);font-weight:800}
.smg-subline{font-size:clamp(14px,1.6vw,18px);margin:0 0 18px;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.smg-subline strong{font-weight:inherit}
.smg-btn{display:inline-block;padding:12px 24px;border-radius:999px;text-decoration:none;font-weight:800;border:0}
.smg-btn--primary{background:var(--smg-accent);color:#fff;box-shadow:0 12px 24px rgba(14,165,233,.35)}
.smg-hero__badges{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.smg-badge{display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);box-shadow:0 10px 28px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.6)}
.smg-badge__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e8f6ff;box-shadow:inset 0 0 0 2px rgba(14,165,233,.2)}
.smg-badge__title{font-weight:800;font-size:14px;color:#08223f;display:block;line-height:1.1}
.smg-badge__sub{font-size:12px;opacity:.75;display:block;line-height:1.1}

.smg-mood{position:relative;max-width:1100px;margin:18px auto 38px;aspect-ratio:16/5;border-radius:18px;overflow:hidden;background:#001a33;box-shadow:0 20px 50px rgba(10,34,64,.2)}
.smg-mood__slide{position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;opacity:0;animation:smgFade 24s linear infinite;animation-delay:var(--delay)}
@keyframes smgFade{0%{opacity:0}8%{opacity:1}33%{opacity:1}41%{opacity:0}100%{opacity:0}}
.smg-mood__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,34,64,.55),rgba(10,34,64,.15) 40%,rgba(10,34,64,.55))}

.smg-vision{max-width:1100px;margin:0 auto 44px;display:grid;grid-template-columns:1fr 1.05fr;gap:18px;align-items:stretch;padding:0 16px}
.smg-vision__image{border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(10,34,64,.22);background-image:var(--img);background-size:cover;background-position:center;position:relative}
.smg-vision__image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,21,43,.18),rgba(7,21,43,.55))}
.smg-vision__card{background:#fff;border:1px solid #e9eef7;border-radius:18px;box-shadow:0 16px 36px rgba(10,34,64,.12);padding:30px;display:flex;flex-direction:column;justify-content:center}
.smg-title{text-align:center;font-size:clamp(28px,4vw,40px);margin:0 0 16px;color:#081a34}
.smg-vision__text{font-size:16.5px;line-height:1.7;color:#0b2545}

.smg-section{max-width:1100px;margin:44px auto;padding:0 16px}
.smg-videoCard{background:#0a2240;color:#fff;border-radius:18px;padding:28px;text-align:center;box-shadow:0 12px 30px rgba(10,34,64,.15)}
.smg-videoWrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;margin-top:12px}
.smg-videoWrap iframe{position:absolute;inset:0;width:100%;height:100%}

.smg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.smg-card{background:#f5f7fb;border:1px solid #e6ecf5;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px}
.smg-card__title{margin:0;font-size:22px;line-height:1.1;color:#0f172a}
.smg-btn--ghost{background:transparent;color:#0f172a;border:1px solid rgba(15,23,42,.15);padding:10px 14px;border-radius:12px;text-decoration:none}
.smg-card__text{margin:0}

.smg-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:12px}
.smg-quote{background:#fff;border:1px solid #e8eef7;border-radius:14px;padding:16px;box-shadow:0 8px 20px rgba(0,0,0,.06);display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start}
.smg-quote__avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;border:3px solid #eaf2fb}
.smg-quote__avatar img{width:100%;height:100%;object-fit:cover}
.smg-quote__text{font-size:14.5px;line-height:1.5;margin:0}
.smg-quote__name{display:block;margin-top:8px;font-size:12.5px;opacity:.75}

.smg-cta{background:#0a2240;color:#fff;border-radius:18px;padding:28px;text-align:center;margin-top:18px}

@media (max-width: 700px){
  .smg-hero{aspect-ratio:auto; min-height: 360px;}
  .smg-hero__overlay{padding:16px 14px; justify-content:flex-start}
  .smg-headline{font-size:clamp(22px,6vw,30px); margin-top:12px}
  .smg-subline{font-size:13px; line-height:1.35; margin:6px 0 12px}
  .smg-btn{padding:10px 18px}
  .smg-hero__badges{gap:8px; margin-top:10px}
  .smg-badge{min-height:46px; padding:8px 12px}
  .smg-badge__icon{width:28px;height:28px}
  .smg-badge__title{font-size:13px}
  .smg-badge__sub{font-size:11px}
}
@media (max-width: 400px){
  .smg-headline{font-size:20px}
  .smg-subline{font-size:12px}
}


/* v2.1R6: CTA layout improvements (stack on mobile) */
.smg-cta{display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left}
.smg-cta h3{margin:0 0 6px}
.smg-cta p{margin:0}
.smg-cta .smg-btn{white-space:nowrap}
@media (max-width: 700px){
  .smg-cta{flex-direction:column; text-align:center; align-items:center}
  .smg-cta .smg-btn{width:100%; max-width:420px}
}


/* v2.1R7: Hero claim badge */
.smg-claim{
  margin: 4px 0 10px;
  font-weight: 800;
  font-size: clamp(16px, 2.2vw, 22px);
  letter-spacing: .2px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(8, 20, 40, .35);
  box-shadow: 0 4px 18px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.28);
  color: #fff;
  backdrop-filter: blur(3px);
  display: inline-block;
}

/* v2.1R7: mobile aspect for vision image to prevent stretching */
@media(max-width: 700px){
  .smg-vision__image{
    aspect-ratio: 16/9;
    min-height: 220px;
    background-size: cover;
    background-position: center;
  }
}


/* v2.1R8: Mobile refinements for Hero & CTA */
@media (max-width: 700px){
  .smg-hero__overlay{padding-top:18px}
  .smg-hero .smg-btn{margin-top:8px;margin-bottom:16px}
  .smg-hero__badges{
    width:100%;
    max-width:560px;
    padding:0 10px;
    margin-top:8px;
    gap:10px;
  }
  .smg-badge{width:100%; justify-content:flex-start}
  .smg-badge__title{font-size:14px}
  .smg-badge__sub{font-size:11.5px}
  /* CTA more breathing room */
  .smg-cta{padding:28px 20px}
  .smg-cta h3{font-size:clamp(20px,6vw,28px); line-height:1.2}
  .smg-cta p{margin-top:8px; line-height:1.5}
  .smg-cta .smg-btn{margin-top:16px}
}


/* v2.1R9: Hard mobile fixes (wider breakpoint + !important to override theme/minify) */
@media (max-width: 900px){
  /* HERO */
  .smg-hero__overlay{ padding:18px 16px !important; }
  .smg-hero .smg-btn{ margin:10px 0 18px !important; }
  .smg-hero__badges{
    width:100% !important;
    max-width:560px !important;
    padding:0 14px !important;
    margin-top:8px !important;
    gap:12px !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .smg-badge{
    width:100% !important;
    justify-content:flex-start !important;
    min-height:50px !important;
    padding:10px 12px !important;
  }
  .smg-badge__title{ font-size:14px !important; }
  .smg-badge__sub{ font-size:12px !important; }

  /* CTA */
  .smg-cta{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    padding:30px 20px !important;
    gap:10px !important;
  }
  .smg-cta h3{ font-size:24px !important; line-height:1.25 !important; margin:0 !important; }
  .smg-cta p{ margin:6px 0 0 !important; line-height:1.5 !important; }
  .smg-cta .smg-btn{ width:100% !important; max-width:420px !important; margin-top:16px !important; }
}


/* v2.1R10: Strong mobile overrides (explicit context + wider breakpoint) */
@media (max-width: 980px){
  /* HERO */
  .smg-hero__overlay{ padding:18px 16px 36px !important; }
  .smg-hero .smg-btn{ margin-top:10px !important; margin-bottom:18px !important; position:static !important; }
  .smg-hero__badges{
    width:100% !important;
    max-width:600px !important;
    padding:0 14px !important;
    margin-top:14px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }
  .smg-badge{ width:100% !important; min-height:52px !important; padding:10px 12px !important; }

  /* CTA (inside section) */
  .smg-section .smg-cta{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    padding:34px 22px !important;
    gap:14px !important;
  }
  .smg-section .smg-cta h3,
  .smg-section .smg-cta p{ width:100% !important; margin:0 !important; }
  .smg-section .smg-cta p{ margin-top:8px !important; line-height:1.55 !important; }
  .smg-section .smg-cta .smg-btn{
    width:100% !important;
    max-width:480px !important;
    display:block !important;
    margin-top:16px !important;
    align-self:center !important;
  }
}


/* v2.1R11: robust mobile class override */
.smg-cta.smg--stack{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  padding:34px 22px !important;
  gap:14px !important;
}
.smg-cta.smg--stack .smg-btn{
  width:100% !important;
  max-width:480px !important;
  margin-top:16px !important;
}

/* Extra safety for hero spacing on small screens */
@media (max-width: 1100px){
  .smg-hero__overlay{ padding-bottom:40px !important; }
  .smg-hero .smg-btn{ position:static !important; margin-top:12px !important; margin-bottom:20px !important; }
  .smg-hero__badges{ margin-top:20px !important; }
}

/* v2.1R13: CTA alignment + chips + blog */
.smg-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left}
.smg-cta__text{max-width:760px}
.smg-cta__text h3{margin:0 0 8px}
@media (max-width:980px){
  .smg-cta{flex-direction:column;text-align:center;align-items:center}
  .smg-cta__text{max-width:unset}
  .smg-cta .smg-btn{width:100%;max-width:480px}
}

/* Chips mobil */
.smg-chips{display:none;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 10px}
.smg-chip{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#08223f;font-weight:700;font-size:13px;border:1px solid rgba(8,34,63,.12)}
@media (max-width:900px){
  .smg-chips{display:flex}
  body[data-smg-badges-mode="hide"] .smg-hero__badges{display:none !important;}
  body[data-smg-badges-mode="badges"] .smg-chips{display:none !important;}
}

/* Blog */
.smg-blog{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.smg-post{background:#fff;border:1px solid #e8eef7;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(10,34,64,.08);display:flex;flex-direction:column}
.smg-post__thumb{display:block;aspect-ratio:16/9;background:#0a2240;overflow:hidden}
.smg-post__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.smg-post__body{padding:14px;display:flex;flex-direction:column;gap:8px}
.smg-post__date{font-size:12px;opacity:.7}
.smg-post__title{margin:0;font-size:18px}
.smg-post__title a{text-decoration:none;color:#0a1e38}
.smg-post__excerpt{margin:0 0 6px;font-size:14px}
