/* ═══════════════════════════════════════════════════════════════
   FMST PREMIUM ENHANCEMENT LAYER · v1
   Additive polish only — refines existing classes, never removes.
   Loaded AFTER each page's inline styles so refinements win ties.
   Animates ONLY transform / opacity / filter / box-shadow.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --pm-ease: cubic-bezier(.16, 1, .3, 1);          /* luxury spring-out */
  --pm-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --pm-accent: #F97316;
  --pm-shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.25);
  --pm-shadow-2: 0 2px 4px rgba(0,0,0,.32), 0 12px 32px rgba(0,0,0,.38);
  --pm-shadow-3: 0 4px 8px rgba(0,0,0,.35), 0 24px 64px rgba(0,0,0,.50), 0 0 48px rgba(249,115,22,.06);
}

/* ── Global typographic refinement ─────────────────────────── */
html{ -webkit-text-size-adjust:100%; }
body{
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3{ text-wrap: balance; }
p{ text-wrap: pretty; }
::selection{ background: rgba(249,115,22,.32); color:#fff; }

/* Slim luxury scrollbar (desktop) */
@media (pointer:fine){
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:#0A0A0F; }
  ::-webkit-scrollbar-thumb{ background:#232838; border-radius:8px; border:2px solid #0A0A0F; }
  ::-webkit-scrollbar-thumb:hover{ background:#3A4258; }
}

/* Accessible focus — visible, on-brand, never removed */
:focus-visible{
  outline: 2px solid var(--pm-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Scroll progress bar (element injected by premium.js) ──── */
.pm-progress{
  position: fixed; top:0; left:0; height:2px; width:100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--pm-accent), #FBA94B);
  z-index: 2000; pointer-events:none;
  box-shadow: 0 0 12px rgba(249,115,22,.55);
}

/* ── Navigation: deepened glass + scroll elevation ──────────── */
.nav, nav.nav{
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  transition: background .45s var(--pm-ease-soft), box-shadow .45s var(--pm-ease-soft), border-color .45s var(--pm-ease-soft);
}
.nav.pm-scrolled{ box-shadow: 0 8px 32px rgba(0,0,0,.45); }
.nav-links a{ transition: color .25s var(--pm-ease-soft); }
/* animated underline for nav links that lack one */
.nav-links a:not(.active){ position:relative; }
.nav-links a:not(.active)::after{
  content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background: var(--pm-accent); border-radius:2px;
  transition: right .35s var(--pm-ease);
}
.nav-links a:not(.active):hover::after{ right:0; }

/* ── Buttons: spring, sheen, satisfying press ───────────────── */
.btn-wa, .btn-call, .nav-wa, .lc-wa, .lc-call, .btn-pwa, .btn-specs,
.btn-wa-brand, .btn-inquiry, .btn-brochure{
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--pm-ease), box-shadow .35s var(--pm-ease),
              background-color .3s var(--pm-ease-soft), border-color .3s var(--pm-ease-soft),
              color .3s var(--pm-ease-soft) !important;
  will-change: transform;
}
.btn-wa:active, .btn-call:active, .nav-wa:active, .lc-wa:active, .lc-call:active,
.btn-pwa:active, .btn-specs:active, .btn-wa-brand:active, .btn-inquiry:active{
  transform: scale(.965) !important;
  transition-duration: .08s !important;
}
/* light sweep on hover */
.btn-wa::before, .nav-wa::before, .lc-wa::before, .btn-pwa::before, .btn-wa-brand::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s var(--pm-ease);
  pointer-events:none;
}
.btn-wa:hover::before, .nav-wa:hover::before, .lc-wa:hover::before,
.btn-pwa:hover::before, .btn-wa-brand:hover::before{ transform: translateX(120%); }

/* ── Cards: layered depth + pointer lighting ────────────────── */
.product-card, .brand-card, .system-card, .line-card, .rb-card,
.std-card, .feature-tile, .app-tile, .cert-card, .trust-box, .dl-card,
.cat-card, .b3-logo-item{
  box-shadow: var(--pm-shadow-1);
  transition: transform .5s var(--pm-ease), box-shadow .5s var(--pm-ease),
              border-color .4s var(--pm-ease-soft), background-color .4s var(--pm-ease-soft) !important;
}
.product-card:hover, .brand-card:hover, .system-card:hover, .line-card:hover, .rb-card:hover,
.cat-card:hover{
  box-shadow: var(--pm-shadow-3) !important;
}
.b3-logo-item:hover{ box-shadow: var(--pm-shadow-2) !important; }
.std-card:hover, .feature-tile:hover, .cert-card:hover, .dl-card:hover{
  box-shadow: var(--pm-shadow-2) !important;
}
/* pointer-tracked sheen — --pm-x / --pm-y set by premium.js (desktop only) */
@media (pointer:fine){
  .pm-light{ position:relative; }
  .pm-light::before{
    content:''; position:absolute; inset:0; border-radius:inherit; z-index:2;
    background: radial-gradient(420px circle at var(--pm-x,50%) var(--pm-y,50%),
                rgba(255,255,255,.055), transparent 45%);
    opacity:0; transition: opacity .4s var(--pm-ease-soft);
    pointer-events:none;
  }
  .pm-light:hover::before{ opacity:1; }
}

/* image polish inside product visuals */
.product-visual img, .system-visual img, .rb-card-logo img, .brand-logo-area img{
  transition: transform .65s var(--pm-ease), filter .5s var(--pm-ease-soft) !important;
  backface-visibility: hidden;
}
.product-card:hover .product-visual img{ filter: brightness(1.04); }

/* ── Category tabs: springier ───────────────────────────────── */
.cat-tab{
  transition: transform .3s var(--pm-ease), background-color .3s var(--pm-ease-soft),
              border-color .3s var(--pm-ease-soft), box-shadow .3s var(--pm-ease-soft), color .25s !important;
}
.cat-tab:hover{ transform: translateY(-2px); }
.cat-tab:active{ transform: scale(.96); transition-duration:.08s !important; }

/* ── Reveal refinement: smoother curve + optional stagger ───── */
.reveal{
  transition: opacity .9s var(--pm-ease), transform .9s var(--pm-ease) !important;
  transition-delay: calc(var(--pm-stagger, 0) * 70ms) !important;
}

/* ── Cursor glow follower (injected by premium.js, desktop) ─── */
.pm-cursor{
  position: fixed; top:0; left:0; width:340px; height:340px;
  margin:-170px 0 0 -170px; border-radius:50%;
  background: radial-gradient(circle, rgba(249,115,22,.10) 0%, rgba(249,115,22,.035) 35%, transparent 65%);
  pointer-events:none; z-index:1;
  mix-blend-mode: screen;
  opacity:0; transition: opacity .5s ease;
  will-change: transform;
}
body:hover .pm-cursor{ opacity:1; }

/* ── Floating WhatsApp: gentle pulse ring ───────────────────── */
.float-wa{ isolation:isolate; }
.float-wa::after{
  content:''; position:absolute; inset:0; border-radius:50%; z-index:-1;
  box-shadow: 0 0 0 0 rgba(34,197,94,.45);
  animation: pm-pulse 2.6s var(--pm-ease-soft) infinite;
}
@keyframes pm-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
  70%{ box-shadow: 0 0 0 18px rgba(34,197,94,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ── Footer links: slide + underline ────────────────────────── */
footer a{ transition: color .25s var(--pm-ease-soft), transform .3s var(--pm-ease) !important; display:inline-block; }
footer a:hover{ transform: translateX(3px); }

/* ── Modal entrance ─────────────────────────────────────────── */
.modal-overlay.open .modal{ animation: pm-modal-in .5s var(--pm-ease) both; }
@keyframes pm-modal-in{
  from{ opacity:0; transform: translateY(22px) scale(.975); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ── Touch devices: keep it calm ────────────────────────────── */
@media (pointer:coarse){
  .pm-cursor{ display:none !important; }
}

/* ── Reduced motion: honour it completely ───────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .pm-cursor, .pm-progress{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}