/* MagniGenie — shared styles for every page */

:root{
  --navy:#0B1A3A;--navy2:#12244B;--ink:#0F1B2D;--muted:#5B6B84;--muted2:#8493A8;
  --line:#E5EAF2;--bg:#fff;--soft:#F5F7FC;--tint:#EEF2FB;
  --blue:#2F5DF4;--blue2:#2450DE;--cyan:#18C6E4;--mint:#1FD3A3;--peri:#8C93F7;
  --grad:linear-gradient(90deg,#1FD3A3,#18C6E4 38%,#2F5DF4 72%,#8C93F7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'Satoshi','Inter',sans-serif;margin:0;letter-spacing:-0.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue2)}
button{font-family:inherit}
::selection{background:#c9f4e8;color:var(--navy)}
[hidden]{display:none!important}

/* keyboard access and responsive CMS content */
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;transform:translateY(-160%);padding:10px 14px;border-radius:9px;background:var(--navy);color:#fff;font-weight:700;box-shadow:0 8px 24px rgba(11,26,58,.24)}
.skip-link:focus{transform:none;color:#fff}
:focus-visible{outline:3px solid rgba(47,93,244,.45);outline-offset:3px}
main[tabindex="-1"]:focus{outline:none}
.mg-rich-content{overflow-wrap:anywhere}
.mg-rich-content img,.mg-rich-content video,.mg-rich-content iframe,.mg-rich-content embed,.mg-rich-content object{max-width:100%}
.mg-rich-content img,.mg-rich-content video{height:auto}
.mg-rich-content iframe{width:100%;aspect-ratio:16/9;height:auto;min-height:280px;border:0}
.mg-rich-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
#deviceFrame,.om-phone-demo{max-width:100%}

/* icon sprite usage */
.ic{display:block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

@keyframes gShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes blockIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes riseIn{from{transform:translateY(15px)}to{transform:none}}
@keyframes tagIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.om-marquee:hover .om-marquee-track{animation-play-state:paused}

/* reveal — settled by site.js on load */
[data-reveal]{transition:transform .7s cubic-bezier(.2,.7,.3,1);transform:translateY(14px)}
[data-reveal].settled{transform:none}

/* hover / focus states (the .dc sources expressed these as style-hover attributes) */
.h-soft:hover{background:var(--soft)}
.h-white:hover{background:#fff}
.h-line:hover{border-color:var(--blue)}
.h-lift{transition:transform .25s}
.h-lift:hover{transform:translateY(-2px)}
.h-navy-cta{transition:transform .25s,box-shadow .25s}
.h-navy-cta:hover{transform:translateY(-2px);box-shadow:0 22px 44px -14px rgba(11,26,58,.7)}
.h-ghost-cta{transition:border-color .2s,transform .25s}
.h-ghost-cta:hover{border-color:var(--blue);transform:translateY(-2px)}
.h-card{transition:transform .3s,box-shadow .3s,border-color .3s}
.h-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px -26px rgba(15,27,45,.36);border-color:#d6def0}
.h-card-sm{transition:transform .3s,box-shadow .3s}
.h-card-sm:hover{transform:translateY(-3px);box-shadow:0 22px 46px -24px rgba(15,27,45,.3)}
.h-svc{transition:all .25s}
.h-svc:hover{border-color:var(--blue);background:var(--soft);transform:translateX(3px)}
.h-row{transition:border-color .2s,transform .2s}
.h-row:hover{border-color:var(--blue);transform:translateX(3px)}
.h-add{transition:background .2s}
.h-add:hover{background:var(--blue2)}
.h-foot:hover{color:#fff}
.h-social:hover{background:rgba(255,255,255,.08)}
.h-glass:hover{background:rgba(255,255,255,.14)}
.h-crumb:hover{color:var(--blue)}
.h-crumb-dark:hover{color:#fff}
.h-danger:hover{border-color:#f0b4b4;color:#d05a5a}
.f-blue:focus{border-color:var(--blue)}
.f-blue-white:focus{border-color:var(--blue);background:#fff}

/* ── responsive ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media (max-width:1024px){.om-hide-narrow{display:none!important}}

@media (max-width:1024px){
  /* Products page: sidebar stops sticking before it collides with content */
  .om-shop-side{top:auto}
}

@media (max-width:980px){
  .om-shop-grid{grid-template-columns:1fr!important}
  .om-shop-side{position:static!important;display:grid;grid-template-columns:1fr 1fr;gap:18px}
}

@media (max-width:940px){
  .om-pd-grid{grid-template-columns:1fr!important}
  .om-buybox{position:static!important}
  .om-feat-grid,.om-rel-grid{grid-template-columns:repeat(2,1fr)!important}
  .om-svc2-grid{grid-template-columns:repeat(2,1fr)!important}
  .om-cta-grid{grid-template-columns:1fr!important}
  .om-proc-grid{grid-template-columns:1fr 1fr!important}
  .om-story-grid{grid-template-columns:1fr!important}
  .om-val-grid{grid-template-columns:repeat(2,1fr)!important}
  .om-eco-grid{grid-template-columns:1fr!important}
  .om-chan-grid{grid-template-columns:repeat(2,1fr)!important}
  .om-sup-grid{grid-template-columns:1fr!important}
  .om-sup-side{position:static!important}
  .om-acct-grid{grid-template-columns:1fr!important}
  .om-acct-nav{position:static!important;display:flex!important;flex-wrap:wrap;flex-direction:row!important}
  .om-stat-grid{grid-template-columns:repeat(3,1fr)!important}
  .om-co-grid{grid-template-columns:1fr!important}
  .om-co-sum{position:static!important}
}

@media (max-width:880px){
  .om-desktop-nav{display:none!important}
  .om-mobile-only{display:grid!important}
  .om-footer-grid{grid-template-columns:1fr 1fr!important}
  .om-hero-grid,.om-demo-grid,.om-compat-grid,.om-svc-flow,.om-how-grid,.om-news-grid{grid-template-columns:1fr!important}
  .om-trust-grid{grid-template-columns:repeat(3,1fr)!important}
  .om-card-grid,.om-why-grid,.om-svc-grid,.om-blog-grid{grid-template-columns:repeat(2,1fr)!important}
  .om-cat-grid{grid-template-columns:repeat(2,1fr)!important}
}

@media (max-width:620px){
  .om-desktop-only{display:none!important}
  .om-card-grid,.om-why-grid,.om-svc-grid,.om-blog-grid,.om-trust-grid,.om-footer-grid{grid-template-columns:1fr!important}
}

@media (max-width:600px){
  .om-cat-grid{grid-template-columns:1fr!important}
  .om-shop-side{grid-template-columns:1fr!important}
  .om-toolbar{flex-direction:column!important;align-items:stretch!important}
  .om-feat-grid,.om-rel-grid,.om-lic-grid{grid-template-columns:1fr!important}
  .om-facts,.om-facts4{grid-template-columns:1fr 1fr!important}
  .om-svc2-grid,.om-proc-grid{grid-template-columns:1fr!important}
  .om-val-grid{grid-template-columns:1fr!important}
  .om-chan-grid{grid-template-columns:1fr!important}
  .om-stat-grid,.om-set-grid{grid-template-columns:1fr!important}
  .om-lic-row{flex-direction:column!important;align-items:flex-start!important}
  .om-pay-grid,.om-bill-grid{grid-template-columns:1fr!important}
  .om-item{flex-wrap:wrap!important}
  .mg-rich-content iframe{min-height:200px}
  #deviceFrame{width:100%!important}
}