/* ============================================================
   Signava Finance — landing page
   Tokens copied verbatim from Theme.swift (iOS). Do not restate
   colours by eye — if either changes, re-diff both against
   STACK.md.
   ============================================================ */

/* Bunny Fonts — EU-hosted, same provider as the web app. No request
   to Google, no consent banner required. */
@import url('https://fonts.bunny.net/css2?family=Playfair+Display:wght@300;400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --sig-bg:        #080808;
  --sig-card:      #101010;
  --sig-card-hi:   #181818;
  --sig-border:    #323232;
  --sig-gold:      #D4B76C;
  --sig-gold-sub:  rgba(212, 183, 108, 0.16);
  --sig-text:      #F0EDE6;
  --sig-text-sec:  #A8A69F;
  --sig-text-ter:  #7E7B74;
  --sig-green:     #5CB37E;
  --sig-green-bg:  rgba(92, 179, 126, 0.12);
  --sig-red:       #CC6A6A;
  --sig-amber:     #D69248;

  --sig-xs: 4px;  --sig-sm: 8px;  --sig-md: 16px;
  --sig-lg: 24px; --sig-xl: 32px; --sig-xxl: 48px;

  --sig-radius:    16px;
  --sig-radius-sm: 10px;
  --sig-radius-lg: 24px;

  --sig-font-display: 'Playfair Display', Georgia, serif;
  --sig-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sig-font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
}

[data-theme="light"] {
  --sig-bg:        #FAF8F4;
  --sig-card:      #FFFFFF;
  --sig-card-hi:   #F2EFE9;
  --sig-border:    #DAD4C8;
  --sig-gold:      #886A29;
  --sig-gold-sub:  rgba(136, 106, 41, 0.14);
  --sig-text:      #16130E;
  --sig-text-sec:  #4A4740;
  --sig-text-ter:  #6E6A62;
  --sig-green:     #23673D;
  --sig-red:       #8F2E2E;
  --sig-amber:     #8F5314;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --sig-bg: #FAF8F4; --sig-card: #FFFFFF; --sig-card-hi: #F2EFE9;
    --sig-border: #DAD4C8; --sig-gold: #886A29;
    --sig-gold-sub: rgba(136,106,41,0.14);
    --sig-text: #16130E; --sig-text-sec: #4A4740; --sig-text-ter: #6E6A62;
    --sig-green: #23673D; --sig-red: #8F2E2E; --sig-amber: #8F5314;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--sig-bg);
  color: var(--sig-text);
  font-family: var(--sig-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}

h1, h2, h3 { font-family: var(--sig-font-display); font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.2; margin-bottom: var(--sig-md); }
p  { color: var(--sig-text-sec); }
a  { color: var(--sig-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

.sig-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--sig-text-sec);
}
.sig-faint { color: var(--sig-text-ter); font-size: 13px; }

.sig-wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--sig-lg); }
.sig-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--sig-lg); }
.sig-section { padding: var(--sig-xxl) 0; }

.sig-card {
  background: var(--sig-card);
  border: 0.5px solid var(--sig-border);
  border-radius: var(--sig-radius);
  padding: var(--sig-lg);
}

.sig-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sig-font-body); font-size: 16px; font-weight: 600;
  padding: 14px var(--sig-lg); border-radius: var(--sig-radius-sm);
  border: none; cursor: pointer; text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), opacity .18s ease;
}
.sig-btn:hover { text-decoration: none; }
.sig-btn:active { transform: scale(.96); opacity: .88; }
.sig-btn-primary { background: var(--sig-gold); color: #fff; }
.sig-btn-ghost {
  background: var(--sig-card-hi); color: var(--sig-text);
  border: 0.5px solid var(--sig-border);
}

.sig-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--sig-gold-sub); color: var(--sig-gold);
}

.sig-feature { display: flex; gap: var(--sig-md); align-items: flex-start; }
.sig-feature-icon {
  flex: 0 0 44px; height: 44px; border-radius: 11px;
  background: var(--sig-gold-sub); display: grid; place-items: center;
  color: var(--sig-gold); font-size: 18px;
}
.sig-feature h3 { font-size: 16px; margin-bottom: 3px; font-family: var(--sig-font-body); font-weight: 600; }
.sig-feature p { font-size: 14px; }

.sig-grid { display: grid; gap: var(--sig-md); }
.sig-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.sig-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--sig-bg) 82%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: .5px solid var(--sig-border);
}
.sig-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; max-width: 1080px; margin: 0 auto; padding: 0 var(--sig-lg);
}
.sig-brand { display: flex; align-items: center; gap: 10px; }
.sig-brand-mark { width: 34px; height: 34px; display: block; object-fit: contain; }
.sig-brand-name {
  font-family: var(--sig-font-display); font-size: 19px;
  color: var(--sig-text); letter-spacing: .3px;
}
.sig-theme-btn {
  background: var(--sig-card-hi); border: .5px solid var(--sig-border);
  color: var(--sig-text-sec); width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font-size: 14px;
}

.sig-footer {
  border-top: .5px solid var(--sig-border);
  padding: var(--sig-xl) 0; margin-top: var(--sig-xxl);
}
.sig-footer-links { display: flex; flex-wrap: wrap; gap: var(--sig-md); margin-bottom: var(--sig-sm); }
.sig-footer-links a { font-size: 13px; color: var(--sig-text-sec); }

.sig-banner {
  background: var(--sig-gold-sub);
  border: 0.5px solid var(--sig-gold);
  border-radius: var(--sig-radius-sm);
  padding: var(--sig-md);
  display: flex; align-items: flex-start; gap: var(--sig-sm);
}
.sig-banner p { color: var(--sig-text); font-size: 14px; margin: 0; }
.sig-banner strong { color: var(--sig-gold); }

@media (max-width: 640px) {
  .sig-section { padding: var(--sig-xl) 0; }
}