/* ============================================================
   FinTabi — shared site styles
   Brand: navy + gold, premium & calm. Hanken Grotesk + Newsreader.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap');

:root{
  --navy-0:#0B1A33;   /* deepest */
  --navy-1:#0E1E3A;
  --navy-2:#15294A;
  --navy-3:#1E3358;
  --gold:#F4B63F;
  --gold-deep:#E29A24;
  --gold-hi:#FFDD8C;
  --cream:#F7F1E4;
  --cream-2:#ECE2CF;
  --ink:#15294A;       /* text on light */
  --ink-soft:#5C6884;  /* muted on light */
  --line-light:rgba(21,41,74,.12);
  --line-dark:rgba(255,255,255,.12);
  --maxw:1200px;
  --sans:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--sans); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* ---- serif display helper ---- */
.serif{ font-family:var(--serif); font-weight:500; letter-spacing:-.015em; line-height:1.05; }
.serif em{ font-style:italic; color:var(--gold-deep); }
.on-dark .serif em, .serif.gold em{ color:var(--gold); }

/* ============================== NAV ============================== */
.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; height:74px; }
.nav .brand{ display:flex; align-items:center; gap:11px; font-weight:600; font-size:19px;
  letter-spacing:-.01em; }
.nav .brand img{ width:34px; height:34px; border-radius:8px; }
.nav-links{ display:flex; align-items:center; gap:30px; font-size:15px; font-weight:500; }
.nav-links a{ color:inherit; opacity:.78; transition:opacity .15s; }
.nav-links a:hover{ opacity:1; }

.nav.on-dark{ color:#EAF0FA; border-bottom:1px solid var(--line-dark);
  background:rgba(11,26,51,.72); backdrop-filter:saturate(160%) blur(14px); }
.nav.on-light{ color:var(--ink); border-bottom:1px solid var(--line-light);
  background:rgba(247,241,228,.78); backdrop-filter:saturate(160%) blur(14px); }

/* ============================== BUTTONS ============================== */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans);
  font-weight:600; font-size:16px; padding:14px 26px; border-radius:13px; cursor:pointer;
  border:1px solid transparent; transition:transform .12s ease, box-shadow .2s, background .2s; }
.btn:active{ transform:translateY(1px); }
.btn-gold{ background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  color:#2A1B05; box-shadow:0 10px 26px -10px rgba(226,154,36,.7); }
.btn-gold:hover{ box-shadow:0 14px 30px -10px rgba(226,154,36,.85); }
.btn-ghost-dark{ border-color:var(--line-dark); color:#EAF0FA; background:rgba(255,255,255,.02); }
.btn-ghost-dark:hover{ background:rgba(255,255,255,.07); }
.btn-ghost-light{ border-color:var(--line-light); color:var(--ink); }
.btn-ghost-light:hover{ background:rgba(21,41,74,.04); }

/* ============================== APP STORE BADGE ============================== */
.appstore{ display:inline-flex; align-items:center; gap:13px; padding:12px 22px 12px 18px;
  border-radius:15px; cursor:default; position:relative;
  background:#000; color:#fff; border:1px solid rgba(255,255,255,.16); }
.appstore .apple{ width:28px; height:28px; flex:none; }
.appstore .t{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.appstore .t .s{ font-size:11px; font-weight:500; opacity:.82; letter-spacing:.02em; }
.appstore .t .b{ font-size:19px; font-weight:600; letter-spacing:-.01em; }
.appstore .soon{ position:absolute; top:-9px; right:-9px; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#2A1B05; padding:3px 8px; border-radius:999px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 4px 10px -3px rgba(0,0,0,.4); }

.comingsoon-line{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600;
  letter-spacing:.02em; color:var(--gold-deep); }
.on-dark .comingsoon-line{ color:var(--gold); }
.comingsoon-line .dot{ width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }

/* ============================== EYEBROW ============================== */
.eyebrow{ font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); }
.on-dark .eyebrow{ color:var(--gold); }

/* ============================== FOOTER ============================== */
.footer{ background:var(--navy-0); color:#C8D2E4; padding:64px 0 40px; }
.footer .grid{ display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between;
  align-items:flex-start; }
.footer .brand{ display:flex; align-items:center; gap:12px; color:#fff; font-weight:600; font-size:20px; }
.footer .brand img{ width:40px; height:40px; border-radius:9px; }
.footer .tag{ margin-top:16px; max-width:320px; font-size:14.5px; line-height:1.6; color:#93A1BC; }
.footer .col h4{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:#7C8AA8;
  margin:0 0 16px; font-weight:600; }
.footer .col a{ display:block; font-size:15px; color:#C8D2E4; margin-bottom:11px; opacity:.85; }
.footer .col a:hover{ opacity:1; color:#fff; }
.footer .rule{ height:1px; background:var(--line-dark); margin:48px 0 26px; }
.footer .legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  font-size:13px; color:#7C8AA8; }

/* ============================== SECTION RHYTHM ============================== */
.section{ padding:120px 0; }
.section-sm{ padding:88px 0; }

/* ============================== PREVIEW-ONLY direction switcher ============================== */
.dirswitch{ position:fixed; z-index:200; right:18px; bottom:18px; display:flex; align-items:center;
  gap:4px; padding:6px; border-radius:14px; font-size:13px; font-weight:600;
  background:rgba(11,26,51,.9); color:#cdd7ea; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5); backdrop-filter:blur(8px); }
.dirswitch .lbl{ padding:0 8px 0 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.6; }
.dirswitch a{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#cdd7ea; }
.dirswitch a:hover{ background:rgba(255,255,255,.1); }
.dirswitch a.on{ background:var(--gold); color:#2A1B05; }

@media (max-width:860px){
  .nav-links{ display:none; }
  .section{ padding:84px 0; }
  .wrap{ padding:0 22px; }
}