/* ===================================================================
   FIXNI — DESIGN UPGRADE LAYER
   Non-destructive visual upgrade. Loaded AFTER the page's own <style>
   blocks, so every rule here only refines existing classes — nothing
   in the original markup, JS, form logic or IDs is touched.
   =================================================================== */

:root{
  --fx-ease: cubic-bezier(.16,.8,.24,1);
  --fx-ease-soft: cubic-bezier(.22,.61,.36,1);
  --fx-lime: #C5FF00;
  --fx-lime-soft: rgba(197,255,0,.5);
}

@media (prefers-reduced-motion: no-preference){

/* ---------- global feel: grain + smoother transitions ---------- */
body{position:relative}
body::before{
  content:"";
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav: animated underline + smoother lift ---------- */
.nav-links a{position:relative;padding-bottom:2px}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:linear-gradient(90deg,var(--fx-lime),transparent);
  transition:right .35s var(--fx-ease);
  border-radius:2px;
}
.nav-links a:hover::after{right:0}
nav{transition:box-shadow .3s var(--fx-ease),background .3s var(--fx-ease)}

.nbtn,.hbtn,.form-submit,.majster-cta-btn,.fixni-cat-bridge-btn{
  transition:transform .25s var(--fx-ease),box-shadow .3s var(--fx-ease),
             background .3s var(--fx-ease),border-color .3s var(--fx-ease),color .3s var(--fx-ease) !important;
}
.nbtn:hover,.hbtn:hover,.form-submit:hover,.majster-cta-btn:hover,.fixni-cat-bridge-btn:hover{
  transform:translateY(-2px) !important;
}
.nbtn:active,.hbtn:active,.form-submit:active,.majster-cta-btn:active,.fixni-cat-bridge-btn:active{
  transform:translateY(0) !important;
}

/* subtle sheen sweep across primary CTAs on hover */
.nbtn-lime,.hbtn-lime,.form-submit{
  position:relative;overflow:hidden;
}
.nbtn-lime::before,.hbtn-lime::before,.form-submit::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  transition:left .65s var(--fx-ease);
  pointer-events:none;
}
.nbtn-lime:hover::before,.hbtn-lime:hover::before,.form-submit:hover::before{left:130%}

/* ---------- hero polish ---------- */
.hero-tag{position:relative}
.hero-left h1,.hero-sub,.hero-desc,.hero-btns,.hero-trust-cards{
  animation:fxHeroIn .9s var(--fx-ease-soft) both;
}
.hero-sub{animation-delay:.06s}
.hero-desc{animation-delay:.12s}
.hero-btns{animation-delay:.18s}
.hero-trust-cards{animation-delay:.24s}
@keyframes fxHeroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero-trust-card{transition:transform .3s var(--fx-ease),border-color .3s var(--fx-ease),background .3s var(--fx-ease)}
.hero-trust-card:hover{transform:translateY(-3px)}
.hero-trust-card svg{transition:transform .3s var(--fx-ease)}
.hero-trust-card:hover svg{transform:scale(1.12)}

/* ---------- category / benefit / step / faq / review cards ----------
   Cursor-reactive glow. Uses --mx/--my written by upgrade.js. Falls
   back gracefully to nothing on touch (no mousemove = no vars = no glow). */
.fixni-cat-card,.ben-card,.step,.faq-item,.rev-card,.cat-card{
  position:relative;overflow:hidden;isolation:isolate;
}
.fixni-cat-card::after,.ben-card::after,.step::after,.faq-item::after,.rev-card::after,.cat-card::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(197,255,0,.14),transparent 70%);
  transition:opacity .4s var(--fx-ease);
}
.fixni-cat-card:hover::after,.ben-card:hover::after,.step:hover::after,
.faq-item:hover::after,.rev-card:hover::after,.cat-card:hover::after{opacity:1}
.fixni-cat-card > *,.ben-card > *,.step > *,.faq-item > *,.rev-card > *,.cat-card > *{position:relative;z-index:1}

.fixni-cat-card,.ben-card,.step,.rev-card,.cat-card{
  transition:transform .4s var(--fx-ease),border-color .3s var(--fx-ease),box-shadow .4s var(--fx-ease),background .3s var(--fx-ease) !important;
}

/* ---------- FAQ: smoother open/close ---------- */
.faq-item .faq-a{transition:max-height .45s var(--fx-ease),padding .3s var(--fx-ease) !important}
.faq-plus{transition:transform .35s var(--fx-ease),background .3s var(--fx-ease) !important}

/* ---------- rast-section (Rast s FIXNI) accessibility upgrade -----
   Original reveal is hover-only -> invisible on touch. Add a tap /
   focus path without touching the section's own HTML or JS. */
#rast-section .rstep{cursor:pointer}
#rast-section .rstep:focus-within .rdesc,
#rast-section .rstep.fx-open .rdesc{
  max-height:120px !important;opacity:1 !important;margin-top:8px !important;
}
#rast-section .rstep:focus-within .rnode,
#rast-section .rstep.fx-open .rnode{
  border-color:var(--rast-green,#d4f000);
  box-shadow:0 0 0 6px rgba(11,17,30,1),0 0 0 7px rgba(212,240,0,.16),0 0 26px rgba(212,240,0,.45);
  transform:scale(1.07);
}
#rast-section .rstep:focus-within .rbody h3,
#rast-section .rstep.fx-open .rbody h3{color:var(--rast-green,#d4f000)}

/* ---------- section reveal: refined easing for existing .reveal system --- */
.reveal.in{animation-timing-function:var(--fx-ease-soft) !important}

/* ---------- footer socials / links: micro-lift --------------------- */
.f-soc{transition:transform .3s var(--fx-ease),border-color .3s var(--fx-ease),color .3s var(--fx-ease) !important}
.f-soc:hover{transform:translateY(-3px) rotate(-4deg)}
.f-col a{transition:color .25s var(--fx-ease),padding-left .25s var(--fx-ease)}
.f-col a:hover{padding-left:4px}

/* ---------- form: focus polish -------------------------------------- */
input,select,textarea{transition:border-color .25s var(--fx-ease),box-shadow .25s var(--fx-ease),background .25s var(--fx-ease) !important}
input:focus,select:focus,textarea:focus{
  border-color:var(--fx-lime) !important;
  box-shadow:0 0 0 3px rgba(197,255,0,.15) !important;
}
.upload-zone{transition:border-color .3s var(--fx-ease),background .3s var(--fx-ease) !important}

/* ---------- diagonal accent motif (matches brand's "diagonal lines") --- */
.hero::before{
  content:"";position:absolute;top:0;right:6%;width:2px;height:120px;z-index:1;
  background:linear-gradient(180deg,transparent,var(--fx-lime-soft),transparent);
  transform:skewX(-18deg);opacity:.5;pointer-events:none;
}

} /* end prefers-reduced-motion guard */

/* ---------- category icon tap feedback (mobile) --------------------- */
.fixni-cat-card,.cat-card{-webkit-tap-highlight-color:transparent}
.fixni-cat-icon,.cat-icon-new img{transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .3s var(--fx-ease) !important}
.fixni-cat-card.is-pressed .fixni-cat-icon,.cat-card.is-pressed .cat-icon-new img{
  transform:scale(.88) !important;
}
.fixni-cat-card.is-pressed,.cat-card.is-pressed{
  border-color:rgba(197,255,0,.6) !important;
  box-shadow:0 0 0 1px rgba(197,255,0,.25),0 0 28px rgba(197,255,0,.22) !important;
}
@keyframes fxIconPop{
  0%{transform:scale(.88)}
  55%{transform:scale(1.12)}
  100%{transform:scale(1)}
}
.fixni-cat-icon.fx-pop,.cat-card.fx-pop .cat-icon-new img{
  animation:fxIconPop .45s cubic-bezier(.34,1.56,.64,1) both;
}

/* ===================================================================
   Multi-select category picker (used by both forms: dopyt + majster)
   =================================================================== */
.fixni-multiselect{position:relative}
.fixni-ms-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#18181b;border:1.5px solid rgba(255,255,255,.08);border-radius:11px;
  padding:13px 16px;font-family:'Manrope',sans-serif;font-size:.93rem;color:#fff;
  cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .2s;
}
.fixni-ms-trigger:hover{border-color:rgba(197,255,0,.35)}
.fixni-multiselect.open .fixni-ms-trigger{border-color:var(--fx-lime,#C5FF00);box-shadow:0 0 0 3px rgba(197,255,0,.1)}
.fixni-multiselect.is-invalid .fixni-ms-trigger{border-color:#ff6b6b}
.fixni-ms-arrow{flex-shrink:0;color:#9a9aa1;transition:transform .25s}
.fixni-multiselect.open .fixni-ms-arrow{transform:rotate(180deg)}
.fixni-ms-placeholder{color:#9a9aa1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fixni-ms-chips{display:flex;flex-wrap:wrap;gap:6px;overflow:hidden}
.fixni-ms-chip{
  display:inline-flex;align-items:center;gap:5px;background:rgba(197,255,0,.1);
  border:1px solid rgba(197,255,0,.3);color:#C5FF00;font-size:.78rem;font-weight:700;
  padding:3px 8px 3px 10px;border-radius:100px;white-space:nowrap;
}
.fixni-ms-chip-x{
  display:flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;background:rgba(197,255,0,.18);font-size:.7rem;line-height:1;
  cursor:pointer;flex-shrink:0;
}
.fixni-ms-chip-more{color:#9a9aa1;font-size:.8rem;flex-shrink:0}
.fixni-ms-panel{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;
  max-height:280px;overflow-y:auto;
  background:linear-gradient(160deg,rgba(24,24,27,.99),rgba(14,14,16,.99));
  border:1px solid rgba(197,255,0,.25);border-radius:14px;
  padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.5);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.fixni-ms-panel[hidden]{display:none}
.fixni-ms-option{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  font-size:.88rem;color:#fff;cursor:pointer;user-select:none;transition:background .15s;
}
.fixni-ms-option:hover{background:rgba(197,255,0,.07)}
.fixni-ms-option input[type="checkbox"]{
  width:17px;height:17px;flex-shrink:0;accent-color:#C5FF00;cursor:pointer;
}
.fixni-ms-option.is-checked{color:#C5FF00;font-weight:700}
.fixni-ms-error{
  display:none;color:#ff9b9b;font-size:.78rem;margin-top:.4rem;line-height:1.4;
}
.fixni-multiselect.is-invalid + .fixni-ms-error{display:block}

/* ---------- always-on accessibility fallback (no JS / reduced motion) --- */
#rast-section .rstep:focus-within .rdesc{max-height:120px;opacity:1;margin-top:8px}

/* ===================================================================
   FIX: mobile nav overflow ("Som majster" pushed off-screen)
   The page's own mobile CSS stacks several fixed min-width rules on
   .nbtn-lime / .nbtn-ghost across breakpoints; on narrow phones
   (≤480px, and tight up to ~500px) logo + both buttons add up to
   more than the viewport width, so the ghost button spills past the
   right edge. This removes the fixed min-widths and lets the buttons
   size to their own (shorter) padding instead, so both always fit.
   =================================================================== */
@media (max-width: 500px){
  nav .nav-btns{ gap:5px !important; }
  nav .nav-btns .nbtn{
    min-width:0 !important;
    padding:0 9px !important;
    font-size:11px !important;
    letter-spacing:-.1px !important;
  }
  nav .nav-btns .nbtn-lime{ min-width:0 !important; }
  nav .nav-btns .nbtn-ghost{ min-width:0 !important; }
  nav > a{ width:auto !important; min-width:0 !important; }
  nav .nav-logo-main{ width:84px !important; }
  nav{ padding:0 12px !important; gap:6px !important; overflow:hidden; }
}
@media (max-width: 340px){
  nav .nav-btns .nbtn-ghost{ display:none !important; }
  nav .nav-btns{ justify-content:flex-end !important; }
}

/* ===================================================================
   FIX: hero CTA buttons overflow on phones.
   The page's own mobile CSS squeezes both hero buttons into a
   2-column grid with small fixed padding, so on real phones the
   button label doesn't fit and overflows/touches the edges. Stack
   them full-width instead, one under the other.
   =================================================================== */
@media (max-width: 600px){
  .hero .hero-btns{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    width:100% !important;
    gap:12px !important;
  }
  .hero .hero-btns .hbtn{
    width:100% !important;
    flex:none !important;
    white-space:normal !important;
    text-align:center !important;
    box-sizing:border-box !important;
    padding:16px 20px !important;
    font-size:1rem !important;
    line-height:1.3 !important;
  }
}