/* Qonta Home — the same design system as qonta.rw, hand-written.
 *
 * WHY THE TOKENS ARE COPIED AND NOT IMPORTED
 * ------------------------------------------
 * These values are qonta-web's `--q-*` set, and the reason they are duplicated
 * here rather than shared is the rule this whole project is built on: no code
 * crosses the boundary. A shared stylesheet would be a build step shared between
 * two products, and the first time one needed a colour the other did not it would
 * become the reason neither could ship. Copied, and owned. See
 * tests/test_independence.py.
 *
 * A value changed on the business site must be changed here to keep the two
 * looking like siblings — which is a real cost, paid deliberately.
 *
 * WHY LIGHT, WHEN THIS PRODUCT USED TO BE DARK
 * --------------------------------------------
 * qonta-web carries a note worth repeating: the site once ran a palette of its
 * own, and a visitor who signed up walked out of it into a differently-coloured
 * app and read the two as separate products. One palette, so the page somebody
 * lands on and the screen they end up in are recognisably the same thing.
 *
 * That argument applies twice over here — across the marketing page and the app
 * screen, AND across Qonta and Qonta Home, which are meant to look like siblings
 * even though they share nothing else. So this file is used by both the landing
 * page and the signed-in screens.
 */

:root {
  --q-page:  #FFFFFF;   /* the page itself, edge to edge */
  --q-panel: #F7F9F8;   /* raised surface — rows, inputs */
  --q-card:  #EFF2F0;   /* the big panels — a shade down from the page */
  --q-line:  #EDF0EE;   /* hairlines; only ever a divider, never a box */
  --q-line-strong: #E2E6E3;
  --q-ink:   #0E1A17;   /* headlines and anything load-bearing */
  --q-body:  #414B46;   /* body copy */
  --q-muted: #6B7671;   /* the second half of a two-tone heading, secondary text */
  --q-faint: #949D98;   /* captions, placeholders */
  --q-dark:  #0B1A19;   /* footer, dark bands */
  --q-accent:#27D366;   /* one accent, used sparingly and always on ink */

  /* Semantic. The ledger mock on this page shows real money moving, so it uses
     the same greens and ambers the product does rather than a set picked to look
     nice next to the hero. */
  --q-pos:     #0A7C56;
  --q-warn:    #B4541E;
  --q-neg:     #C2553F;
  --q-pos-bg:  #E6F6EF;
  --q-warn-bg: #FBEDE4;

  --q-radius: 10px;
  --q-radius-lg: 20px;
  --q-measure: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
body {
  margin: 0;
  background: var(--q-page);
  color: var(--q-body);
  font-family: "Google Sans", "Funnel Sans", ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
a { color: inherit; }
p { margin: 0; }

/* ── layout ─────────────────────────────────────────────── */
.wrap { margin: 0 auto; width: 100%; max-width: var(--q-measure); padding: 0 20px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }

section { border-bottom: 1px solid var(--q-line); padding: 64px 0; }
@media (min-width: 640px) { section { padding: 96px 0; } }
section.panel { background: var(--q-panel); }

/* ── headings ───────────────────────────────────────────────
   Every heading is two-tone: a statement in ink, then the consequence in grey,
   both at the same size and weight. The grey half is what stops a 56px line from
   shouting — it reads as one sentence trailing off into detail rather than as a
   headline with a subheading stuck under it. */
h1, h2, h3 { margin: 0; color: var(--q-ink); text-wrap: balance; font-weight: 500; }
h1 .trail, h2 .trail, h3 .trail { color: var(--q-muted); }

.h-hero {
  font-size: 34px; line-height: 1.04; font-weight: 600; letter-spacing: -0.034em;
}
.h-xl { font-size: 31px; line-height: 1.05; letter-spacing: -0.032em; }
.h-lg { font-size: 26px; line-height: 1.08; letter-spacing: -0.028em; }
.h-md { font-size: 21px; line-height: 1.14; letter-spacing: -0.022em; }
@media (min-width: 640px) {
  .h-hero { font-size: 46px; line-height: 1.0; }
  .h-xl { font-size: 42px; }
  .h-lg { font-size: 32px; }
  .h-md { font-size: 24px; }
}
@media (min-width: 1024px) {
  .h-hero { font-size: 56px; line-height: 0.99; }
  .h-xl { font-size: 50px; line-height: 1.02; }
  .h-lg { font-size: 36px; }
}

.lead { margin-top: 22px; max-width: 62ch; color: var(--q-muted); font-size: 17px;
        line-height: 1.6; }
@media (min-width: 640px) { .lead { font-size: 19px; } }

/* Small uppercase label above a heading. Once per section at most. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--q-muted);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--q-accent);
}

/* ── buttons ────────────────────────────────────────────────
   Two shapes only. Accent is the single "do the thing" button and is always
   ink-on-mint; ghost is everything else. Barely-rounded rectangles rather than
   pills, which is most of why these pages read as a tool and not a brochure. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--q-radius); padding: 13px 20px; font-size: 15px; font-weight: 500;
  text-decoration: none; border: 0; cursor: pointer; transition: all 150ms;
  white-space: nowrap;
}
.btn-accent { background: var(--q-accent); color: var(--q-ink); }
.btn-accent:hover { filter: brightness(0.94); }
.btn-ink { background: var(--q-ink); color: #fff; }
.btn-ink:hover { background: #1B3331; }
.btn-ghost { background: rgba(14,26,23,0.05); color: var(--q-ink); }
.btn-ghost:hover { background: rgba(14,26,23,0.09); }
.btn-ghost-dark { background: rgba(255,255,255,0.10); color: #fff; }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.16); }
.btn-sm { padding: 10px 16px; font-size: 14.5px; }

/* ── panels ─────────────────────────────────────────────── */
.card {
  background: var(--q-card); border-radius: var(--q-radius-lg); overflow: hidden;
  position: relative;
}
.card-pad { padding: 24px; }
@media (min-width: 640px) { .card-pad { padding: 32px; } }
.card-white { background: var(--q-page); border: 1px solid var(--q-line-strong); }

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.body { color: var(--q-body); font-size: 15.5px; line-height: 1.6; }
.muted { color: var(--q-muted); }
.faint { color: var(--q-faint); }

/* Numbers line up or they cannot be compared at a glance, which is the only way
   anybody reads them. */
.amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
       color: var(--q-ink); }
.amt.out { color: var(--q-warn); }
.amt.in  { color: var(--q-pos); }

.tag {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 99px;
  border: 1px solid var(--q-line-strong); color: var(--q-muted); white-space: nowrap;
}
.tag.keep { color: var(--q-pos); border-color: rgba(10,124,86,0.28); background: var(--q-pos-bg); }

/* ── textures ───────────────────────────────────────────────
   The dot grid is the page's ground. It sits behind everything and shows through
   wherever a panel does not cover it, which is what makes the margins read as
   deliberate space rather than as emptiness. */
.q-dots {
  background-image: radial-gradient(rgba(14, 26, 23, 0.11) 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: -1px -1px;
}

/* Fade a horizontally-scrolling strip into the page at both edges, so a marquee
   reads as continuous rather than as something starting and stopping at a crop. */
.q-fade-x {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Ruled exercise-book paper: feint horizontal lines plus the red margin rule.
   Both painted in one background so they scroll together and stay in register
   with text set on a matching line-height. */
.q-ruled {
  background-color: #FFFDF8;
  background-image:
    linear-gradient(90deg, transparent 0 33px, rgba(206,106,106,0.42) 33px 34px, transparent 34px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(120,158,196,0.34) 25px 26px);
  background-position: 0 0, 0 14px;
}
.q-hand { font-family: "Caveat", "Bradley Hand", cursive; letter-spacing: 0.01em; }

/* Thermal receipt paper — very slightly warm, with the faint vertical banding a
   cheap printer leaves. */
.q-thermal {
  background-color: #FDFCF9;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.016) 0 2px, transparent 2px 5px);
}

/* ── motion ─────────────────────────────────────────────── */
@keyframes q-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes q-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes q-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.q-rise { animation: q-rise 0.85s cubic-bezier(0.2,0.7,0.2,1) both; }
.q-float { animation: q-float 7s ease-in-out infinite; }
.q-marquee { animation: q-marquee 34s linear infinite; }

/* Motion is decoration here — everything animated is legible at rest, so
   honouring the OS preference costs nothing, and it is the one accessibility
   default a marketing page most often gets wrong. */
@media (prefers-reduced-motion: reduce) {
  .q-rise, .q-float, .q-marquee { animation: none !important; }
  .q-rise { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── site chrome ────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--q-line);
  background: rgba(255,255,255,0.9); backdrop-filter: blur(20px);
}
.bar { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 16px; }
.mark { display: flex; align-items: center; gap: 9px; text-decoration: none;
        font-weight: 600; letter-spacing: -0.02em; color: var(--q-ink); font-size: 17px; }
.mark .sq {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--q-accent); color: var(--q-ink); font-size: 14px; font-weight: 700;
}
.mark small { color: var(--q-faint); font-weight: 500; letter-spacing: 0; font-size: 15px; }
.site-nav { display: none; align-items: center; gap: 28px; }
@media (min-width: 1024px) { .site-nav { display: flex; } }
.site-nav a { font-size: 15px; font-weight: 500; color: var(--q-ink); text-decoration: none; }
.site-nav a:hover { color: var(--q-muted); }

.site-footer { background: var(--q-dark); color: #fff; }
.site-footer a { color: rgba(255,255,255,0.62); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer h3 { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
                  text-transform: uppercase; }
.rule-dark { border: 0; border-top: 1px solid rgba(255,255,255,0.10); margin: 0; }