/* partners.nakordoni.eu — Stage 1 hand-rolled styling.
   Placeholder design system: deep navy + amber; will be superseded by the
   Lovable v1 tokens (design/lovable-v1/) when that round lands. */

:root {
  --navy-900: #0c1b2a;
  --navy-800: #12283d;
  --navy-700: #1a3a55;
  --navy-100: #e8eef4;
  --ink: #16232f;
  --ink-soft: #46586a;
  --amber: #f0a327;
  --amber-deep: #d18a10;
  --paper: #ffffff;
  --paper-alt: #f4f7fa;
  --border: #d8e0e8;
  --ok-bg: #e7f6ec; --ok-ink: #1c6b3c;
  --err-bg: #fdecec; --err-ink: #a02525;
  --radius: 10px;
  font-size: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 720px; }

a { color: var(--navy-700); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h2 { font-size: 1.75rem; margin-bottom: 1.4rem; color: var(--navy-900); }

.site-header {
  background: var(--navy-900);
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-row { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; }
.brand span { color: var(--amber); }
.top-nav { display: flex; align-items: center; gap: 22px; }
.top-nav a { color: var(--navy-100); text-decoration: none; font-size: .95rem; }
.top-nav a:hover { color: #fff; }

/* Language switcher. Plain links, never a <select>+JS: it has to work in the
   signed-out login form and on the manager pages, and a link is the only version
   that cannot be broken by a script that failed to load. */
.lang-switch { display: inline-flex; gap: 2px; align-items: center; font-size: .82rem; letter-spacing: .03em; }
.lang-switch a, .lang-switch .lang-cur { padding: 3px 7px; border-radius: 6px; text-decoration: none; line-height: 1.4; }
.lang-switch a { color: var(--navy-100); opacity: .75; }
.lang-switch a:hover { opacity: 1; background: rgba(255,255,255,.12); }
.lang-switch .lang-cur { color: var(--navy-900); background: var(--amber); font-weight: 700; }
/* On a light background (manager panel, dashboard) the inactive links need ink. */
.lang-switch--panel a { color: var(--navy-700); opacity: .8; }
.lang-switch--panel a:hover { background: var(--navy-100); opacity: 1; }
@media (max-width: 640px) {
  /* The switcher must survive `.top-nav a:not(.btn){display:none}` further down,
     which would otherwise hide the language links themselves on a phone — the one
     control a non-English visitor needs most. Both the wrapper AND its anchors. */
  .top-nav .lang-switch { display: inline-flex !important; }
  .top-nav .lang-switch a { display: inline-block !important; }
}

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  border: 0; border-radius: var(--radius);
  padding: 12px 24px; font-size: 1rem; font-weight: 600;
}
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn-primary { background: var(--amber); color: var(--navy-900); }
.btn-primary:hover { background: var(--amber-deep); color: var(--navy-900); }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }

.hero {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 70%);
  color: #fff; padding: 72px 0 56px; text-align: left;
}
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 18px; }
.lede { color: var(--ink); max-width: 46rem; font-size: 1.1rem; margin-bottom: 26px; }
/* The lede is light ONLY on the dark hero. Un-scoped it rendered #e8eef4 on white,
   which is invisible — the media-kit "Want a firm quote?" line and the preview note
   both sat on white and read as blank space. Scope the light colour to the hero. */
.hero .lede { color: var(--navy-100); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.stat-strip {
  list-style: none; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 26px;
}
.stat-strip strong { display: block; font-size: 1.35rem; color: var(--amber); }
.stat-strip span { color: var(--navy-100); font-size: .9rem; }

.section { padding: 60px 0; }
.section-alt { background: var(--paper-alt); }

.cards { display: grid; gap: 18px; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
}
.card h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--navy-800); }
.card p { color: var(--ink-soft); font-size: .95rem; }

.opps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.opp {
  border: 1px solid var(--border); border-left: 4px solid var(--amber);
  border-radius: var(--radius); padding: 22px; background: var(--paper);
}
.opp h3 { margin-bottom: 8px; color: var(--navy-800); }
.opp p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 12px; }
.opp-cta { font-weight: 600; text-decoration: none; }
.opp-cta:hover { text-decoration: underline; }

.trust { text-align: center; }
.trust-line { color: var(--ink-soft); max-width: 52rem; margin: 0 auto; }

form { margin-top: 24px; }
.grid-2 { display: grid; gap: 14px 18px; grid-template-columns: 1fr 1fr; }
label { display: block; font-size: .92rem; font-weight: 600; color: var(--navy-800); margin-bottom: 14px; }
/* ⚠ This blanket `display: block` on every input DEFEATS the `hidden` attribute.
   The HTML spec's UA rule is `[hidden] { display: none }` with NO !important, so any
   author rule that sets `display` wins — and this one matches every input on the
   site. Symptom found on /top/leads: each cell renders a visible <span> plus a
   hidden <input> holding the same value for Excel mode, so every company name was
   displayed TWICE (measured: hidden=true, computed display=block, height=27px).
   Note innerText and copied text do NOT include input values, which is why this was
   visible to the eye but invisible to automated text checks. The restore below must
   stay AFTER this rule. */
input, select, textarea {
  display: block; width: 100%; margin-top: 6px;
  font: inherit; font-weight: 400; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--amber); outline-offset: 0; border-color: var(--amber);
}
/* Restore the `hidden` attribute for everything, inputs included. !important is
   correct here rather than lazy: `hidden` is a statement that the element is not
   relevant, and no layout rule should ever be able to override it. */
[hidden] { display: none !important; }

.hp-field { position: absolute; left: -9999px; top: -9999px; }

.flash { border-radius: var(--radius); padding: 14px 18px; margin: 18px 0; font-weight: 600; }
.flash-ok { background: var(--ok-bg); color: var(--ok-ink); }
.flash-err { background: var(--err-bg); color: var(--err-ink); }

.site-footer { background: var(--navy-900); color: var(--navy-100); padding: 26px 0; font-size: .9rem; }
.footer-row { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.site-footer a { color: var(--navy-100); }

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .top-nav a:not(.btn) { display: none; }
  .hero { padding: 52px 0 40px; }
  .section { padding: 44px 0; }
}

/* Landing hero: measured-stats proof line under the stat strip. */
.hero-proof { margin: 14px 0 0; font-size: .88rem; opacity: .85; max-width: 720px; }
.hero-proof a { color: inherit; }

/* Billing: reach-band rows */
.band-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--border); padding: 10px 0; margin: 0; flex-wrap: wrap; }
.band-info strong { display: block; font-size: .95rem; }
.band-info span { font-size: .8rem; color: var(--ink-soft); }
.band-buy { display: flex; align-items: center; gap: 8px; }
.band-buy .price { font-size: 1.15rem; }