/* ============================================================
   Tavon Partners — shared styles
   Base reset/keyframes below are carried over verbatim from the
   Claude Design export so the visual design is unchanged.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#07090C;color:#F3F6FA;font-family:'Sora',"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%}
a{color:#7CC0FF;text-decoration:none}
a:hover{color:#fff}
input,select,textarea,button{font-family:inherit}
@keyframes fadeU{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes glow{0%,100%{opacity:.45}50%{opacity:.8}}

/* ============================================================
   New: responsive header nav (fixes desktop nav being hidden
   behind the mobile menu button, and logo/nav sizing)
   ============================================================ */

.desktop-nav{ display:none; }

/* Landscape phones / small tablets: compact inline nav instead of the
   full-screen overlay — there's enough width, no need for a takeover menu. */
@media (min-width:600px){
  .desktop-nav{
    display:flex;
    align-items:center;
    gap:13px;
    margin-right:auto;
    margin-left:16px;
  }
  .desktop-nav a{
    font-size:12.5px;
    font-weight:600;
    color:#C4CDDB;
    transition:color .18s ease;
    white-space:nowrap;
  }
  .desktop-nav a:hover,
  .desktop-nav a.active{ color:#fff; }
  .mobile-only{ display:none !important; }
  .header-logo-sub{ display:none; }
  .header-wa-btn{ padding:9px 14px !important; font-size:12.5px !important; }
}

/* Tablets and up: roomier nav */
@media (min-width:820px){
  .desktop-nav{ gap:20px; margin-left:24px; }
  .desktop-nav a{ font-size:14px; }
  .header-logo-sub{ display:block; }
  .header-wa-btn{ padding:11px 18px !important; font-size:13.5px !important; }
}

/* ============================================================
   Overlay / form-state visibility (state previously handled by
   the framework's component state, now plain classList toggles)
   ============================================================ */

.nav-overlay{ display:none; }
.nav-overlay.open{ display:flex !important; }
.form-sent.visible{ display:block !important; }

/* Card-terminal setup-selector default state uses inline styles
   for colour; this just ensures consistent pointer affordance. */
.setup-btn, .bank-tab, .mode-tab{ transition:background .18s ease, color .18s ease; }

/* Bank flip-card QR box needs a light background regardless of
   theme so the generated QR code stays scannable. */
.flip-card-inner{ transform: rotateY(0deg); }
.flip-card.flipped .flip-card-inner{ transform: rotateY(180deg); }