/* ==========================================================================
   28FiTech AG — design system
   Direction: flat digital banking, dark. The same system as the ETP portal,
   sharing its audited tokens and its self-hosted Space Grotesk + Inter, so the
   public site and the signed-in product stop being two different products.

   This replaced "Swiss precision instrument" (light paper, hairline rules, the
   logo's green #408d68 and teal #0f5f5e, 3px corners). The hairlines and the
   air survive; the ground inverted and the palette moved to the portal's.
   The logo green survives as an ACCENT and no longer carries structure.

   Hairlines are still the whole aesthetic — there is no shadow and no blur
   anywhere here either.
   ========================================================================== */

:root {
    /* FLAT DIGITAL BANKING — the same system as the portal, same values.
       The site and the portal are two halves of one product and were on two
       different design systems; they now share one. Colours are the portal's
       audited tokens, not a second set nobody re-measured.

       This page used to be light paper with dark "ink" bands. It is now dark
       throughout, and the band that was the contrast surface is the raised
       one. The green survives as an accent because it is the logo's colour,
       but it no longer carries structure. */

    /* Brand accents — the logo's green, kept as accent only */
    --green:      #009765;   /* foreground: 4.52:1 on the raised surface */
    --green-deep: #00754E;   /* fill: 5.75:1 behind white */

    /* Primary — carries the calls to action */
    --teal:       #0052CC;   /* fill: 6.82:1 behind white */
    --teal-deep:  #08111D;   /* the deepest ground; footer sits here */

    /* Ground */
    --paper:      #0A1628;   /* base */
    --paper-2:    #0F1D32;   /* raised: tinted bands, cards */
    --ink:        #ffffff;   /* was the darkest text, now the lightest */
    --ink-2:      #a3b3c9;
    --ink-3:      #74859f;

    /* Lines — hairlines are still the whole aesthetic, just inverted */
    --line:       rgba(255, 255, 255, .12);
    --line-soft:  rgba(255, 255, 255, .07);
    --line-onink: rgba(255, 255, 255, .16);

    /* Type — self-hosted, matching the portal exactly */
    --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* Rhythm */
    --shell:   1200px;
    --gutter:  clamp(1.25rem, 4vw, 2.5rem);
    --band:    clamp(4.5rem, 9vw, 8rem);
    --radius:  8px;          /* one radius, as in the portal */

    --ease: cubic-bezier(.22, .61, .36, 1);
}


/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Numerals should line up like an instrument readout */
.fi-num, time, address { font-variant-numeric: tabular-nums; }

/* ── Focus & skip link ─────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 2px;
}
.fi-skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--teal); color: #fff;
    padding: .75rem 1.25rem; font-size: .875rem; text-decoration: none;
}
.fi-skip:focus { left: 1rem; top: 1rem; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.fi-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.fi-band { padding-block: var(--band); position: relative; }
.fi-band--line { border-top: 1px solid var(--line); }
.fi-band--tint { background: var(--paper-2); }

/* Contrast band. It used to be a dark island on a light page; now the page is
   dark, so it raises rather than darkens. Same job, opposite direction. */
.fi-band--ink {
    background: var(--paper-2);
    color: var(--ink-2);
    border-block: 1px solid var(--line);
}
.fi-band--ink h2, .fi-band--ink h3 { color: var(--ink); }

/* ── Type scale ────────────────────────────────────────────────────────── */
.fi-display {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(2.4rem, 6.2vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.fi-h2 {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(1.9rem, 3.9vw, 3rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.fi-h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.15rem, 1.7vw, 1.375rem);
    line-height: 1.25;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.fi-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
    max-width: 46ch;
}
.fi-body { color: var(--ink-2); text-wrap: pretty; }

/* Binds a trailing phrase together so no single word is stranded on its own
   line. Set by no_orphan() in config.php. */
.fi-nowrap { white-space: nowrap; }
.fi-band--ink .fi-lead,
.fi-band--ink .fi-body { color: rgba(255, 255, 255, .8); }

/* Eyebrow — the small ruled label above each section title */
.fi-eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 1.25rem;
}
.fi-eyebrow::before {
    content: "";
    width: 1.75rem; height: 1px;
    background: currentColor;
    flex: none;
}
.fi-band--ink .fi-eyebrow { color: var(--green); }

/* Section head block */
.fi-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.fi-head .fi-lead { margin-top: 1.25rem; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.fi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .875rem 1.65rem;
    font-family: var(--body);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color .22s var(--ease), color .22s var(--ease),
                border-color .22s var(--ease), transform .22s var(--ease);
    white-space: nowrap;
}
.fi-btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .fi-btn:hover { transform: none; } }

/* White on the primary fill is 6.82:1. The hover BRIGHTENS to #0061F2 (5.26:1
   with white) rather than reaching for --teal-deep, which is now the deepest
   ground and would have turned the CTA nearly black on hover. Not #2A80FF
   either: that is the foreground token and only 3.73:1 behind white — the same
   fill/foreground trap the portal hit twice. */
.fi-btn--solid { background: var(--teal); color: #fff; }
.fi-btn--solid:hover { background: #0061f2; }

.fi-btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.fi-btn--ghost:hover { border-color: var(--teal); background: rgba(15, 95, 94, .04); }

.fi-btn--onink { background: var(--ink); color: var(--teal); }
.fi-btn--onink:hover { background: var(--ink-2); }

/* ── Header ────────────────────────────────────────────────────────────── */
.fi-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(251, 252, 251, .88);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.fi-header.is-stuck {
    border-bottom-color: var(--line);
    background: rgba(251, 252, 251, .96);
}
.fi-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    min-height: 78px;
}
.fi-brand { flex: none; display: block; line-height: 0; }
.fi-brand img { width: 190px; height: auto; }

.fi-nav { display: flex; gap: clamp(1rem, 2.4vw, 2.1rem); margin-inline-start: auto; }
.fi-nav__link {
    position: relative;
    font-size: .9375rem;
    text-decoration: none;
    color: var(--ink-2);
    padding-block: .35rem;
    transition: color .2s var(--ease);
}
.fi-nav__link::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--green);
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--ease);
}
.fi-nav__link:hover { color: var(--ink); }
.fi-nav__link:hover::after { transform: scaleX(1); }

.fi-header__cta { flex: none; padding: .7rem 1.35rem; }

.fi-burger {
    display: none;
    margin-inline-start: auto;
    width: 44px; height: 44px;
    background: none; border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0; cursor: pointer;
    position: relative;
}
.fi-burger span {
    position: absolute; left: 12px; right: 12px; height: 1px;
    background: var(--ink);
    transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.fi-burger span:nth-child(1) { top: 18px; }
.fi-burger span:nth-child(2) { top: 25px; }
.fi-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.fi-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Drawer. Uses [hidden] + an explicit display rule so the attribute actually
   wins — an author `display` on the element would otherwise defeat it. */
.fi-drawer {
    position: fixed; inset: 78px 0 auto 0; z-index: 99;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 1.5rem var(--gutter) 2rem;
}
.fi-drawer[hidden] { display: none; }
.fi-drawer__nav { display: flex; flex-direction: column; gap: .25rem; }
.fi-drawer__nav a {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 400;
    text-decoration: none;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.fi-drawer__cta { margin-top: 1.25rem; border-bottom: 0; justify-content: center; }
.fi-drawer__nav .fi-drawer__cta { font-family: var(--body); font-size: .9375rem; }

/* ── Ruled list (the check-bullets, redrawn as an engineered list) ─────── */
.fi-ruled { display: grid; gap: 0; }
.fi-ruled li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: baseline;
    gap: .5rem;
    padding: .85rem 0;
    border-top: 1px solid var(--line-soft);
    text-wrap: pretty;
}
.fi-ruled li:last-child { border-bottom: 1px solid var(--line-soft); }
.fi-ruled__n {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}
.fi-band--ink .fi-ruled li { border-color: var(--line-onink); }
.fi-band--ink .fi-ruled__n { color: var(--green); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.fi-cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fi-cards--3 { grid-template-columns: repeat(3, 1fr); }
.fi-cards--2 { grid-template-columns: repeat(2, 1fr); }
.fi-card {
    background: var(--paper-2);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    display: flex; flex-direction: column; gap: .9rem;
    transition: background-color .3s var(--ease);
}
/* Hover RECESSES, it does not raise. The obvious move was to lighten (a first
   cut used #16273F), but --ink-3 and the green accent sit at 4.51-4.52 against
   the raised surface — on the AA floor, with no headroom above it — so any
   lighter fill drops them to ~4.01. Darkening gains contrast instead of losing
   it, and matches the portal, where the second surface is a well for the same
   reason. */
.fi-card:hover { background: #08111d; }
.fi-card__n {
    font-size: .75rem; font-weight: 600; letter-spacing: .1em;
    color: var(--green); font-variant-numeric: tabular-nums;
}
.fi-card__icon { width: 34px; height: 34px; color: var(--green); }
.fi-card__icon svg { width: 100%; height: 100%; }
.fi-card p { font-size: .9375rem; color: var(--ink-2); text-wrap: pretty; }

/* On the dark band the cards invert */
.fi-band--ink .fi-cards { background: var(--line-onink); border-color: var(--line-onink); }
.fi-band--ink .fi-card { background: var(--teal); }
.fi-band--ink .fi-card:hover { background: var(--teal-deep); }
.fi-band--ink .fi-card p { color: rgba(255, 255, 255, .78); }
.fi-band--ink .fi-card__icon { color: var(--green); }

/* ── Split (text | figure) ─────────────────────────────────────────────── */
.fi-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}
.fi-split--wide { grid-template-columns: 1.05fr .95fr; }

/* ── Contact ───────────────────────────────────────────────────────────── */
.fi-form { display: grid; gap: 1.1rem; }
.fi-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.fi-field { display: grid; gap: .4rem; }
.fi-field label {
    font-size: .75rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3);
}
.fi-field input, .fi-field textarea {
    font-family: var(--body); font-size: 1rem; color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .8rem .95rem;
    width: 100%;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.fi-field input:focus, .fi-field textarea:focus {
    border-color: #2a80ff; background: #08111d; outline: none;
}
.fi-field textarea { resize: vertical; min-height: 8rem; }
.fi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fi-form__note { font-size: .8125rem; color: var(--ink-3); }
.fi-form__status { font-size: .9375rem; padding: .8rem 1rem; border-radius: var(--radius); }
.fi-form__status[hidden] { display: none; }
.fi-form__status.is-ok  { background: rgba(0, 151, 101, .12); color: #36b37e; border: 1px solid rgba(0, 151, 101, .35); }
.fi-form__status.is-err { background: rgba(255, 86, 48, .12); color: #ff5630; border: 1px solid rgba(255, 86, 48, .35); }

/* Contact detail block */
.fi-detail { display: grid; gap: 0; }
.fi-detail__row {
    display: grid; gap: .2rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--line-soft);
}
.fi-detail__row:last-child { border-bottom: 1px solid var(--line-soft); }
.fi-detail__k {
    font-size: .6875rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3);
}
.fi-detail__v { font-size: 1.0625rem; text-decoration: none; color: var(--ink); }
.fi-detail__v:hover { color: var(--green-deep); }
.fi-detail address { font-style: normal; display: grid; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.fi-footer { background: var(--teal-deep); color: rgba(255, 255, 255, .78); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.fi-footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    padding-bottom: 3rem;
}
.fi-footer__logo { width: 200px; }
.fi-footer__blurb { margin-top: 1.25rem; font-size: .9375rem; max-width: 32ch; text-wrap: pretty; }
.fi-footer__h {
    font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--green); margin-bottom: 1.1rem;
}
.fi-footer__addr { font-style: normal; display: grid; gap: .35rem; font-size: .9375rem; }
.fi-footer__addr a { text-decoration: none; }
.fi-footer__addr a:hover { color: #fff; }
.fi-footer__list { display: grid; gap: .55rem; font-size: .9375rem; }
.fi-footer__list a { text-decoration: none; }
.fi-footer__list a:hover { color: #fff; }

.fi-footer__base {
    display: flex; flex-wrap: wrap; gap: 1rem 2rem;
    align-items: center; justify-content: space-between;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line-onink);
    font-size: .8125rem;
}
.fi-footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.fi-footer__legal a { text-decoration: none; }
.fi-footer__legal a:hover { color: #fff; text-decoration: underline; }

/* ── Reveal-on-scroll ──────────────────────────────────────────────────── */
.fi-rise { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fi-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .fi-rise { opacity: 1; transform: none; transition: none; }
}