/* ==========================================================================
   Lukas Lanx, shared stylesheet
   Built from the Figma file "Lukas Lanx" (ryZq7zZF8oNXNzyh3utvht), 2026-09-10.

   Every colour, type size and spacing value here was measured out of that
   file rather than chosen. Where the file contradicted itself (the frames
   were generated from HTML and carry leftover Inter, Playfair Display,
   Plus Jakarta Sans and Liberation Mono on nodes whose visible runs are
   Epilogue or Manrope), the visible run wins and the strays are dropped.
   ========================================================================== */

:root {
  /* Greens, darkest to lightest */
  --deep:        #021f14;  /* proof section ground */
  --deep-glow:   #032819;  /* centre of the proof radial */
  --near-black:  #08140f;  /* header scrim, footer ground */
  --surface-2:   #0a1d16;  /* cards on the dark sections */
  --bg:          #143224;  /* page ground */
  --surface:     #1a472a;  /* raised panels */
  --line:        #2c5a3d;  /* hairlines that are not gold */

  /* Gold */
  --gold:        #d4af37;
  --gold-deep:   #c8a153;
  --gold-hover:  #b8952c;
  --gold-pale:   #f3dca1;  /* top stop of the numeral gradient */
  --gold-warm:   #cca550;  /* the FAQ headline italic */

  /* Text */
  --text:        #ffffff;
  --text-soft:   #e5e7eb;
  --text-body:   #d1d5db;
  --text-dim:    #9ca3af;
  --text-faint:  #93a39b;
  --text-muted:  #9ca3af;  /* the first build's name for --text-dim; header-hero.css reads it */

  /* Layout. --gutter keeps the header logo and the hero headline on one
     vertical line at every width; it is the original build's value and is
     deliberately left alone. Section content uses --shell instead. */
  --gutter: max(24px, calc((100vw - 1280px) / 2 + 24px));
  --shell: 1152px;
  --section-y: 96px;

  --radius: 12px;
  --radius-sm: 8px;

  --font-head: 'Epilogue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* scroll-padding-top keeps an anchored section clear of the fixed header:
   96px covers the tall state, 72px the compact one it settles into. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Deliberately does NOT set font-weight or line-height: the header and hero
   carried over from the first build inherit from here, and giving body a
   weight or a leading would silently restyle work that is already signed off.
   New components set their own. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

/* The language toggle hides one side of every bilingual pair. */
[data-lang-text].is-hidden { display: none; }

/* --------------------------------------------------------------------------
   Shell and section furniture
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
}

.section--deep { background: var(--deep); }
.section--bg   { background: var(--bg); }

/* The soft radial bloom behind the proof numbers. */
.section--glow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 16%;
  width: 800px;
  height: 800px;
  max-width: 140vw;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(20, 83, 45, 0.55), rgba(2, 31, 20, 0) 70%);
  filter: blur(60px);
  pointer-events: none;
}

.section > .shell { position: relative; z-index: 1; }

/* Kicker: the small gold uppercase label above every section headline,
   flanked in the design by two thin gold rules. */
.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;

  /* The frames put clear air between a kicker and its heading. Without this
     the two sat flush, gap 0, in five of seven places, and the kicker's own
     gold rules crossed the headline's ascenders. */
  margin-bottom: 16px;
}

.kicker::before,
.kicker::after {
  content: '';
  height: 1px;
  width: 96px;
  max-width: 18vw;
}

.kicker::before { background: linear-gradient(to right, rgba(205, 167, 92, 0), rgba(205, 167, 92, 0.6)); }
.kicker::after  { background: linear-gradient(to left,  rgba(205, 167, 92, 0), rgba(205, 167, 92, 0.6)); }

.kicker--left { justify-content: flex-start; }
.kicker--left::before,
.kicker--left::after { display: none; }

/* The hairline with a dot in the middle, under the centred headlines. */
.rule-glow {
  position: relative;
  height: 1px;
  width: min(384px, 70%);
  margin: 24px auto 0;
  background: linear-gradient(to right, rgba(223, 168, 86, 0), rgba(223, 168, 86, 0.8) 50%, rgba(223, 168, 86, 0));
}

.rule-glow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--gold);
  transform: translate(-50%, -50%);
}

.rule-flat {
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, rgba(200, 161, 83, 0), rgba(200, 161, 83, 0.5) 50%, rgba(200, 161, 83, 0));
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* The signature: white first half, gold italic second half. */
.accent { color: var(--gold); }
.accent-i { color: var(--gold); font-style: italic; }

.h-section {
  font-size: clamp(34px, 4.2vw, 60px);
  text-align: center;
}

.h-section--left { text-align: left; }

.lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--text-body);
  text-align: center;
  max-width: 62ch;
  margin: 24px auto 0;
}

.lede--left { text-align: left; margin-left: 0; margin-right: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  padding: 18px 30px;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background: var(--gold);
  color: #143224;
}

.btn--primary:hover { background: var(--gold-hover); }

.btn--ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.btn--ghost:hover { border-color: var(--gold-hover); color: var(--gold-hover); }

.btn--lg { font-size: clamp(20px, 2vw, 30px); padding: 22px 40px; }

/* "30 minutes . Few Spots Only", the reassurance line under every CTA. */
.cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-note {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-dim);
}

.cta-note strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

/* Named .cta-facts, not .cta-meta: the hero already owns .cta-meta in
   header-hero.css with a different layout, and that file loads last. */
.cta-facts {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--text-body);
}

.cta-facts .gold { color: var(--gold); }
.cta-facts .dot { color: #6b7280; }

/* Text link with a trailing arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
}

.link-arrow:hover { color: var(--gold-pale); }
.link-arrow svg { flex: none; }

/* --------------------------------------------------------------------------
   The header lives in header-hero.css, carried over verbatim from the first
   build. It is not redefined here.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: rgba(10, 29, 22, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--radius);
  padding: 32px;
}

.card--plain { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); }

.grid {
  display: grid;
  gap: 32px;
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--near-black);
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  padding: 48px 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  color: var(--text-dim);
}

.footer-inner { row-gap: 14px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }

/* The legal set reads as secondary to the site links, and on a narrow screen
   it wants its own row rather than running on from them. */
.footer-legal { font-size: 13px; }
.footer-legal a { color: var(--text-faint); }

@media (max-width: 720px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 18px 20px; }
}
.footer-links a { color: var(--text-dim); text-decoration: none; }
.footer-links a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   Responsive. The design ships a 380px mobile frame and a 1440px desktop
   frame and nothing between them, so the tablet band is a judgment call:
   three-column grids fall to two at 1024 and to one at 720.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .site-nav { display: flex; }
  .header-cta { display: inline-flex; }
}

@media (max-width: 1024px) {
  :root { --section-y: 72px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  :root { --section-y: 56px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .grid { gap: 20px; }
  .card { padding: 24px; }

  /* Grid items size to min-content by default, so one long German compound
     (Dienstleistungsunternehmen) pushed the Who-is-it-for cards wider than
     the screen and the right edge was cut off at 320px. */
  .grid > * { min-width: 0; }
  .card, .card * { min-width: 0; }

  /* anywhere, not break-word: break-word will not shrink a flex or grid
     item below the longest word, which is the case that clipped here. */
  /* hyphens first, so German compounds break at a hyphen where the language
     allows one; anywhere is the fallback for the words it cannot hyphenate.
     site.js sets <html lang>, which is what the hyphenation dictionary
     keys off. */
  .card { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
  .kicker::before, .kicker::after { width: 40px; }
  .btn { width: 100%; }
  .btn--lg { font-size: 20px; padding: 18px 28px; }
}