/* ============================================================
   SFMB Platform — design system
   Styles ported verbatim from the Claude Design handoff
   (SFMB Platform.dc.html) so the Laravel build matches pixel-for-pixel.
   ============================================================ */

:root{
  --navy-900:#0c2034;
  --navy-700:#0f3a5d;
  --navy-600:#11436b;
  --navy-500:#185a8c;
  --navy-400:#1c5286;
  --cream:#f6f1e8;
  --cream-200:#efe7d8;
  --red:#c0392b;
  --red-700:#9e2b22;
  --green:#2f7d62;
  --ink:#22303c;
  --ink-700:#15324b;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Source Sans 3','Hind Siliguri',sans-serif;color:#22303c;background:#f6f1e8;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Plus Jakarta Sans','Hind Siliguri',sans-serif}
.sfmb-burger{display:none}
@media(max-width:1024px){
  .sfmb-nav{display:none !important}
  .sfmb-burger{display:flex !important}
  .sfmb-login-btn{display:none !important}
  .sfmb-hero{grid-template-columns:1fr !important}
  .sfmb-4col{grid-template-columns:repeat(2,1fr) !important}
  .sfmb-5col{grid-template-columns:repeat(3,1fr) !important}
  .sfmb-foot{grid-template-columns:1fr 1fr !important}
}
@media(max-width:760px){
  .sfmb-2col,.sfmb-3col,.sfmb-4col,.sfmb-5col,.sfmb-foot{grid-template-columns:1fr !important}
}
@media(max-width:560px){
  .sfmb-brand-sub{display:none !important}
}
::selection{background:#c0392b;color:#fff}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{text-decoration:none;color:inherit}
input,textarea,select{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cdbfa8;border-radius:8px}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floatySlow{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-26px) rotate(6deg)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glowPulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.8;transform:scale(1.12)}}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes ringPulse{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pageEnter{from{opacity:0;transform:translateY(22px) scale(.992)}to{opacity:1;transform:none}}
@keyframes secEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}}
.row-hover{transition:background .18s ease}
.row-hover:hover{background:#f7fafc}
.page-enter{animation:pageEnter .55s cubic-bezier(.22,1,.36,1) both}
.sec-enter{animation:secEnter .45s cubic-bezier(.22,1,.36,1) both}
/* top navigation progress bar */
.navbar-load{position:fixed;top:0;left:0;height:3px;z-index:9500;background:linear-gradient(90deg,#c0392b,#e8654f,#185a8c);box-shadow:0 0 10px rgba(192,57,43,.6);border-radius:0 3px 3px 0;transition:width .45s cubic-bezier(.22,1,.36,1),opacity .35s ease .15s}
/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-reveal="left"]{transform:translateX(-36px)}
[data-reveal][data-reveal="right"]{transform:translateX(36px)}
[data-reveal].in{transform:none}
[data-delay="1"]{transition-delay:.08s}[data-delay="2"]{transition-delay:.16s}[data-delay="3"]{transition-delay:.24s}[data-delay="4"]{transition-delay:.32s}[data-delay="5"]{transition-delay:.4s}
/* hover helpers */
.lift{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.lift:hover{transform:translateY(-7px);box-shadow:0 20px 44px rgba(15,58,93,.16)!important}
.pop{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,filter .25s ease}
.pop:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.05)}
.pop:active{transform:scale(.97)}
.zoomwrap{overflow:hidden}
.zoomwrap img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.zoomwrap:hover img{transform:scale(1.08)}
.ul-anim{position:relative}
.ul-anim::after{content:'';position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:#c0392b;transform:scaleX(0);transform-origin:left;transition:transform .3s ease;border-radius:2px}
.ul-anim:hover::after{transform:scaleX(1)}
.shine{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);background-size:200% 100%;animation:shimmer 3.5s linear infinite}
@media(prefers-reduced-motion:reduce){*{animation:none!important}[data-reveal]{opacity:1!important;transform:none!important}}

/* hidden utility used by JS-driven step/drawer toggles */
[hidden]{display:none !important}