/* NOVA buttons — the one shared button style for every page (home, pricing, start, download, learn).
   Physical light model, four box shadows per button:
     1 top light     inset 0 1px 0        a thin highlight along the top edge
     2 bottom shade  inset 0 -2px 3px     the lower lip sits slightly in shadow
     3 contact       0 1px 2px            a tight dark shadow where the button meets the page
     4 glow          0 8px 24px -10px     soft coloured light: gold = action, cyan = everything else
   Tuned for deep space: the glow is a halo, never neon. Daylight sections (.light) and the white
   sign-up card get the same model with paper-friendly values.
   Motion (Emil): hover only on real pointers, 1px lift + slightly stronger glow; press = scale(.97);
   180ms custom ease-out; only transform and box-shadow animate. Reduced motion = no movement. */
:root{
  --btn-ease:cubic-bezier(.23,1,.32,1);
  --btn-gold-hi:#fbd998; --btn-gold-lo:#efb950; --btn-gold-ink:#1b1307; --btn-gold-edge:rgba(255,232,180,.55);
  --btn-glow-gold:245,198,107; --btn-glow-cyan:127,230,242; --btn-glow-cyan-ink:11,118,133;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:14px 22px;border-radius:999px;
  font:500 15px/1 var(--f-body,var(--body,ui-sans-serif,system-ui,sans-serif));
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  /* secondary, on dark: a quiet raised outline */
  color:#f2f5ff;
  background:linear-gradient(180deg,rgba(28,38,64,.62),rgba(12,18,34,.62));
  border:1px solid rgba(183,193,216,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 3px rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.55),
    0 8px 24px -12px rgba(var(--btn-glow-cyan),.16);
  transition:transform .18s var(--btn-ease),box-shadow .18s var(--btn-ease);
}
.btn .arr{display:inline-block;transition:transform .18s var(--btn-ease)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn:focus-visible{outline:2px solid #7fe6f2;outline-offset:3px;border-radius:999px}

/* primary: gold, the action colour */
.btn.primary{
  color:var(--btn-gold-ink);font-weight:600;
  background:linear-gradient(180deg,var(--btn-gold-hi),var(--btn-gold-lo));
  border-color:var(--btn-gold-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(122,74,0,.28),
    0 1px 2px rgba(0,0,0,.55),
    0 8px 24px -10px rgba(var(--btn-glow-gold),.45);
}

/* daylight sections and the white sign-up card: paper secondary, same gold primary */
.light .btn,.start .form .btn{
  color:#0b1220;background:linear-gradient(180deg,#fff,#f6f8fb);border-color:#d5dce7;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 3px rgba(11,18,32,.05),
    0 1px 2px rgba(11,18,32,.10),
    0 8px 20px -12px rgba(var(--btn-glow-cyan-ink),.22);
}
.light .btn.primary,.start .form .btn.primary{
  color:var(--btn-gold-ink);
  background:linear-gradient(180deg,var(--btn-gold-hi),var(--btn-gold-lo));
  border-color:#e2ad4a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 3px rgba(122,74,0,.22),
    0 1px 2px rgba(94,60,0,.28),
    0 10px 24px -12px rgba(201,140,30,.55);
}
.light .btn:focus-visible,.start .form .btn:focus-visible{outline-color:#0b7685}

@media (hover:hover) and (pointer:fine){
  .btn:hover{
    transform:translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -2px 3px rgba(0,0,0,.28),
      0 1px 2px rgba(0,0,0,.55),
      0 12px 30px -12px rgba(var(--btn-glow-cyan),.34);
  }
  .btn.primary:hover{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.65),
      inset 0 -2px 3px rgba(122,74,0,.28),
      0 1px 2px rgba(0,0,0,.55),
      0 12px 32px -10px rgba(var(--btn-glow-gold),.62);
  }
  .light .btn:hover,.start .form .btn:hover{
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -2px 3px rgba(11,18,32,.05),
      0 1px 2px rgba(11,18,32,.12),
      0 12px 26px -12px rgba(var(--btn-glow-cyan-ink),.34);
  }
  .light .btn.primary:hover,.start .form .btn.primary:hover{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      inset 0 -2px 3px rgba(122,74,0,.22),
      0 1px 2px rgba(94,60,0,.28),
      0 14px 30px -12px rgba(201,140,30,.7);
  }
  .btn:hover:active{transform:translateY(0) scale(.97)}
  .btn:disabled:hover{transform:none}
  .btn:hover .arr{transform:translateX(3px)}
  [dir="rtl"] .btn:hover .arr{transform:translateX(-3px)}
}

@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active,.btn:hover:active{transform:none}
  .btn:hover .arr,[dir="rtl"] .btn:hover .arr{transform:none}
}