/* =========================================================
   Daniel Budak — site prototype, v3
   Visual direction: SOFT BABY BLUE · AIRY light theme.
   Banking-trust palette: cool near-white bg, baby-blue accents,
   deep trust-blue CTAs. Same component vocabulary as v2 — only
   the color tokens have shifted.
   ========================================================= */

/* ---- Typography v2 ----
   Display:  Plus Jakarta Sans (variable, modern fintech-friendly)
   Body:     Inter            (variable, world-class readability)
   Mono:     JetBrains Mono   (variable, used for HUD + numerics)
   All loaded with display=swap for SEO + perceived perf.
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* ---- surfaces ---- */
  --bg: #F4F8FC;             /* page background — near-white with cool tint */
  --bg-alt: #FFFFFF;          /* card surface */
  --bg-elev: #FFFFFF;         /* elevated card */
  --bg-soft: #ECF2F8;         /* section alt — slightly deeper baby */
  --bg-tint: #DCEAF6;         /* tint highlight bands */

  /* ---- accent (keep --green* names so existing rules just work) ---- */
  --green: #2C5F8D;           /* deep trust blue — primary CTA / link */
  --green-bright: #1F4A75;    /* hover (darker = stronger on light bg) */
  --green-deep: #1B3A5C;      /* darkest variant for headings on hover */
  --green-glow: rgba(127, 179, 217, 0.30);

  /* ---- secondary blue accents (new) ---- */
  --baby:        #7FB3D9;     /* baby blue — soft accent */
  --baby-soft:   #B8D4EA;     /* lighter baby */
  --baby-faint:  rgba(127, 179, 217, 0.12);

  /* ---- text ---- */
  --ink: #1B2A4E;             /* deep navy text */
  --ink-soft: #5A6B85;        /* muted body */
  --ink-faint: #95A4BD;       /* very muted */

  /* ---- borders ---- */
  --line: #DCE5EE;            /* hairline borders */
  --line-soft: #ECF2F8;

  --gold: #C9A96A;            /* very sparing — kept for any legacy use */

  --shadow-sm: 0 1px 2px rgba(28, 50, 90, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 50, 90, 0.08), 0 2px 6px rgba(28, 50, 90, 0.04);
  --shadow-lg: 0 20px 50px rgba(28, 50, 90, 0.12), 0 6px 14px rgba(28, 50, 90, 0.06);
  --glow-green: 0 0 0 1px rgba(127, 179, 217, 0.45), 0 6px 24px rgba(127, 179, 217, 0.22);

  --radius: 8px;
  --radius-lg: 14px;
  --display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; transition: color .2s; }
a:hover { color: var(--green-bright); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: 0;
}
h1 { font-size: 3rem; }
h2 { font-size: 2rem; margin-top: 2.5rem; }
h3 { font-size: 1.35rem; margin-top: 2rem; }
p { margin: 0 0 1.1rem; }
strong { color: var(--ink); }

/* ---------- Top promo banner (above the header on the homepage) ---------- */
.top-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.55rem 1.5rem;
  background:
    linear-gradient(90deg,
      rgba(80, 130, 220, 0.18) 0%,
      rgba(79, 233, 79, 0.12) 100%);
  border-bottom: 1px solid rgba(120, 180, 255, 0.25);
  font-size: 0.9rem;
  color: var(--ink);
  position: relative;
  z-index: 60;
  flex-wrap: wrap;
}
.top-banner .flag-icon {
  width: 18px; height: 12px;
  flex-shrink: 0;
}
.top-banner-tag {
  background: rgba(79, 233, 79, 0.18);
  color: var(--green);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
}
.top-banner-text { color: var(--ink); }
.top-banner-cta {
  color: var(--green);
  font-weight: 600;
  border-bottom: 1px solid rgba(79, 233, 79, 0.4);
  text-decoration: none;
  white-space: nowrap;
}
.top-banner-cta:hover { color: #C2FFC2; border-bottom-color: var(--green); }
.top-banner-close {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  margin-left: 0.4rem;
  border-radius: 999px;
}
.top-banner-close:hover { color: var(--ink); background: rgba(255,255,255,0.08); }
@media (max-width: 720px) {
  .top-banner { font-size: 0.82rem; padding: 0.5rem 1rem; }
  .top-banner-tag { font-size: 0.6rem; }
}

/* ---------- Header ---------- */
.site-header {
  background: rgba(10,20,16,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.nav-wrap {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.75rem;
  gap: 1.5rem;
}
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  display: flex; flex-direction: column;
  line-height: 1.05;
}
.brand:hover { color: var(--ink); }
.brand .credentials {
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  font-family: var(--body);
  font-size: 0.92rem; color: var(--ink); font-weight: 500;
}
.nav-links a:hover { color: var(--green); }
.nav-right { display: flex; gap: 1rem; align-items: center; }
.lang-switch {
  display: inline-flex; gap: 0.45rem; align-items: center;
  font-size: 0.74rem; letter-spacing: 0.1em; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.32rem 0.7rem;
  background: var(--bg-alt);
}
.lang-switch a {
  color: var(--ink-soft);
  padding: 0 0.15rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: none;
}
.lang-switch a.active { color: var(--green); }
.lang-switch a:hover { color: var(--ink); }
.cta-pill {
  background: var(--green); color: var(--bg);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-weight: 600; font-size: 0.88rem;
  letter-spacing: -0.005em;
  border: 1px solid var(--green);
  transition: background .2s, transform .15s;
}
.cta-pill:hover { background: var(--green-bright); color: var(--bg); transform: translateY(-1px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--body); font-size: 0.95rem; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--green);
  background: var(--green); color: var(--bg);
  transition: background .2s, transform .15s, box-shadow .2s;
  cursor: pointer; letter-spacing: -0.005em;
}
.btn:hover { background: var(--green-bright); color: var(--bg); transform: translateY(-1px); box-shadow: var(--glow-green); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); background: transparent; box-shadow: none; transform: translateY(-1px); }

/* ---------- Hero ----------
 * The hero is a full-bleed stage so the neural-impulse background fills the
 * entire viewport width. The original max-width / grid layout is preserved
 * in .hero-inner. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5rem 1.75rem 3.5rem;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(40, 80, 180, 0.18) 0%, rgba(2, 6, 22, 0) 55%),
    radial-gradient(ellipse at 50% 30%,  rgba(20, 50, 130, 0.13) 0%, rgba(2, 6, 22, 0) 60%),
    linear-gradient(180deg, #02061A 0%, #03081F 50%, #060B22 100%);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-inner .hero-eyebrow,
.hero-inner h1,
.hero-inner .lede {
  text-shadow:
    0 0 22px rgba(2, 6, 22, 0.85),
    0 1px 3px rgba(2, 6, 22, 0.7);
}

/* Neural-impulse background: faint paths + bright travelling particles. */
.neural-path {
  fill: none;
  stroke: rgba(120, 180, 255, 0.08);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}
.impulse-head,
.impulse-trail {
  shape-rendering: geometricPrecision;
}
/* drift the grid behind the homepage hero too — uses the same keyframe as the tool hero */
.hero .hero-grid-rect {
  animation: tool-hero-grid-drift 38s linear infinite;
}
.hero-eyebrow {
  font-size: 0.78rem; font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.hero-eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--green);
}
.hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 1.4rem;
}
.hero h1 .accent { color: var(--green); }
.hero .lede {
  font-size: 1.13rem; color: var(--ink-soft);
  max-width: 30em; margin-bottom: 2rem;
  line-height: 1.6;
}
.hero-cta { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* Hero visual — video-style block + floating stats cards (Altoria) */
.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  background-color: #0E1B16;
  background-image:
    url('images/portrait-full.jpg'),
    radial-gradient(circle at 30% 25%, rgba(79,233,79,0.18) 0%, transparent 55%),
    linear-gradient(135deg, #15291F 0%, #0E1B16 100%);
  background-size: cover, auto, auto;
  background-position: center 18%, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-visual::after {
  /* dark vignette so floating cards remain readable on a bright photo */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,20,16,0.65) 100%),
              linear-gradient(90deg, rgba(10,20,16,0.25) 0%, transparent 35%, transparent 65%, rgba(10,20,16,0.25) 100%);
  pointer-events: none;
}
.hero-visual::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(79,233,79,0.04) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(79,233,79,0.04) 40px);
  pointer-events: none;
}
.play-button {
  position: relative;
  width: 78px; height: 78px;
  border-radius: 50%; background: rgba(255,255,255,0.95); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform .2s;
}
.play-button:hover { transform: scale(1.06); }
.play-button::after {
  content: ''; width: 0; height: 0;
  border-left: 16px solid var(--bg);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  margin-left: 5px;
}
.float-card {
  position: absolute;
  /* Darker, more opaque navy panel — readable against the busy hero backdrop */
  background: rgba(6, 12, 28, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Soft-blue hairline border to lift it off the navy backdrop */
  border: 1px solid rgba(120, 180, 255, 0.28);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  font-size: 0.82rem;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex; align-items: center; gap: 0.6rem;
}
.float-card .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--green);
  letter-spacing: -0.02em;
  /* Subtle glow so the number reads brightly against the dark panel */
  text-shadow: 0 0 14px rgba(79, 233, 79, 0.45);
}
.float-card .lbl {
  /* Much brighter than the previous --ink-soft so it actually reads */
  color: rgba(225, 240, 252, 0.88);
  font-size: 0.78rem;
  line-height: 1.35;
}
.float-1 { top: 12%; right: -18px; }
.float-2 { bottom: 14%; left: -22px; }
.float-arrow {
  position: absolute; top: 8%; left: 18%;
  font-family: var(--display); font-weight: 700; color: var(--green);
  font-size: 2rem; opacity: 0.8;
}

/* ---------- Hero stats strip ---------- */
.hero-stats {
  max-width: 1240px; margin: -1rem auto 0;
  padding: 2rem 1.75rem 4rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--line);
}
.hero-stat .num {
  font-family: var(--display); font-weight: 700;
  font-size: 2.2rem; color: var(--ink);
  letter-spacing: -0.02em;
}
.hero-stat .num .accent { color: var(--green); }
.hero-stat .lbl {
  font-size: 0.85rem; color: var(--ink-soft);
  margin-top: 0.25rem;
}

/* ---------- Sections ---------- */
section { padding: 5rem 0; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 1.75rem; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 1.75rem; }
.section-kicker {
  font-size: 0.74rem; font-weight: 600;
  color: var(--green);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.section-kicker::before {
  content: ''; width: 24px; height: 1px; background: var(--green);
}
.section-title { font-size: 2.2rem; margin-bottom: 0.6rem; }
.divider { height: 1px; background: var(--line); margin: 3rem 0; border: none; }

/* ---------- Three-card starter path ---------- */
.starter-path { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.starter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.starter-card {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.85rem;
  position: relative;
  overflow: hidden;
}
.starter-card:hover { border-color: var(--green); background: var(--bg-elev); }
.starter-card .step {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em;
  color: var(--green); text-transform: uppercase;
}
.starter-card h3 { font-size: 1.4rem; margin: 0.5rem 0 0.75rem; }
.starter-card p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.25rem; }
.starter-card .read-more { font-weight: 600; font-size: 0.92rem; color: var(--green); display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---------- Article grid ---------- */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
.article-card {
  display: flex; flex-direction: column;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem 1.5rem;
}
.article-card:hover { border-color: var(--green); }
.article-card:hover h3 { color: var(--green); }
.article-card .thumb {
  aspect-ratio: 4/3;
  background:
    radial-gradient(circle at 70% 30%, rgba(79,233,79,0.14), transparent 55%),
    var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase;
}
.article-card .pillar { font-size: 0.72rem; font-weight: 700; color: var(--green); letter-spacing: 0.14em; text-transform: uppercase; }
.article-card h3 { font-size: 1.18rem; margin: 0.45rem 0 0.5rem; transition: color .2s; }
.article-card .meta { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- Featured tool block ---------- */
.feature-block {
  background:
    radial-gradient(circle at 20% 50%, rgba(79,233,79,0.1), transparent 55%),
    var(--bg-alt);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 4.5rem 0;
}
.feature-block .container { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
.feature-mockup {
  aspect-ratio: 4/3;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase;
  position: relative; overflow: hidden;
}
.feature-mockup::after {
  content: ''; position: absolute; inset: 1.25rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
}

/* ---------- Newsletter inline ---------- */
.newsletter-inline { background: var(--bg-soft); padding: 4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.newsletter-inline .container-narrow { text-align: center; }
.newsletter-inline h2 { margin-bottom: 0.5rem; }
.newsletter-inline p { color: var(--ink-soft); margin-bottom: 1.5rem; }
.subscribe-form {
  display: flex; gap: 0.5rem; max-width: 460px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}
.subscribe-form input[type="email"], .subscribe-form select {
  flex: 1; min-width: 220px;
  padding: 0.95rem 1.1rem;
  font-family: var(--body); font-size: 0.95rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-alt); color: var(--ink);
}
.subscribe-form input[type="email"]:focus, .subscribe-form select:focus { outline: none; border-color: var(--green); }
.subscribe-form input[type="email"]::placeholder { color: var(--ink-faint); }
.consent {
  font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.85rem;
  display: flex; gap: 0.5rem; align-items: flex-start; max-width: 460px;
  margin-left: auto; margin-right: auto; text-align: left;
}
.subscribe-form .consent { flex-basis: 100%; }
.consent input { margin-top: 0.2rem; }

/* ---------- Article page ---------- */
.article-header {
  max-width: 760px; margin: 0 auto;
  padding: 4.5rem 1.75rem 2rem;
}
.breadcrumb { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--green); }
.article-title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.article-standfirst {
  font-size: 1.18rem; color: var(--ink-soft);
  line-height: 1.6; margin-bottom: 2rem;
}
.article-byline {
  display: flex; align-items: center; gap: 1rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1rem 0; font-size: 0.9rem; color: var(--ink-soft);
}
.byline-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
}
.byline-name { color: var(--ink); font-weight: 600; }
.byline-meta { display: flex; gap: 1.5rem; flex: 1; align-items: center; flex-wrap: wrap; }

.article-body { max-width: 720px; margin: 0 auto; padding: 2rem 1.75rem; }
.article-body h2 { font-size: 1.7rem; margin-top: 3rem; }
.article-body h3 { font-size: 1.25rem; margin-top: 2.2rem; }
.article-body ul, .article-body ol { padding-left: 1.4rem; margin: 0 0 1.2rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body p { font-size: 1.05rem; line-height: 1.75; }

.takeaways {
  background: var(--bg-alt); border: 1px solid var(--line); border-left: 3px solid var(--green);
  padding: 1.5rem 1.85rem; margin: 2rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.takeaways h4 {
  font-family: var(--body); font-size: 0.74rem; font-weight: 700;
  color: var(--green); text-transform: uppercase; letter-spacing: 0.16em;
  margin: 0 0 0.85rem;
}
.takeaways ul { margin: 0; padding-left: 1.2rem; }
.takeaways li { margin-bottom: 0.45rem; font-size: 0.96rem; color: var(--ink); }

.lead-magnet-card {
  background:
    radial-gradient(circle at 80% 30%, rgba(79,233,79,0.1), transparent 50%),
    var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.85rem;
  margin: 2.5rem 0;
}
.lead-magnet-card h4 {
  font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  margin: 0 0 0.5rem; color: var(--ink);
}
.lead-magnet-card p { font-size: 0.96rem; color: var(--ink-soft); margin-bottom: 1.1rem; }

.callout-warning {
  background: rgba(201,169,106,0.06);
  border: 1px solid rgba(201,169,106,0.18);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.4rem; margin: 1.5rem 0;
  font-size: 0.94rem; color: var(--ink-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout-warning strong { color: var(--ink); }

/* Translation banner — auto-hides when innerHTML is empty (i.e., in EN). */
.translation-banner {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  padding: 0.9rem 1.2rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.translation-banner:empty { display: none; }
.translation-banner strong { color: var(--ink); }

table.compact {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem;
}
table.compact th, table.compact td {
  padding: 0.8rem 0.95rem; border-bottom: 1px solid var(--line); text-align: left;
}
table.compact th {
  background: var(--bg-alt); color: var(--ink); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
}
table.compact td { color: var(--ink-soft); }
table.compact tr:hover td { color: var(--ink); }

.sources-block {
  font-size: 0.88rem; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 3rem;
}
.sources-block h4 {
  font-family: var(--body); font-size: 0.74rem; font-weight: 700;
  color: var(--green); text-transform: uppercase; letter-spacing: 0.16em;
  margin: 0 0 0.6rem;
}

/* ---------- About page ---------- */
.about-hero {
  max-width: 980px; margin: 0 auto;
  padding: 5rem 1.75rem 2rem;
  display: grid; grid-template-columns: 1fr 1.7fr; gap: 3rem; align-items: center;
}
.about-portrait {
  width: 100%; aspect-ratio: 1/1;
  background-color: var(--bg-alt);
  background-image:
    url('images/portrait-square.jpg'),
    radial-gradient(circle at 30% 30%, rgba(79,233,79,0.22), transparent 55%),
    linear-gradient(135deg, var(--bg-alt) 0%, var(--bg) 100%);
  background-size: cover, auto, auto;
  background-position: center, center, center;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.byline-avatar {
  background-image: url('images/portrait-square.jpg'), linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%) !important;
  background-size: cover, auto;
  background-position: center, center;
}

/* ---------- Newsletter landing ---------- */
.newsletter-hero {
  max-width: 720px; margin: 0 auto;
  padding: 5rem 1.75rem 3rem; text-align: center;
}
.newsletter-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); margin-bottom: 0.85rem; font-weight: 700; }
.newsletter-hero h1 .accent { color: var(--green); }
.newsletter-hero .lede { font-size: 1.15rem; color: var(--ink-soft); }
.sample-issue {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  margin: 2rem 0;
  font-size: 0.95rem;
}
.sample-issue h3 { color: var(--ink); }
.sample-tag {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green); font-weight: 700; margin-bottom: 0.6rem;
}

/* ---------- eBook product page ---------- */
.ebook-hero {
  max-width: 1140px; margin: 0 auto; padding: 5rem 1.75rem 3rem;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 3.5rem; align-items: center;
}
.ebook-cover {
  width: 100%; aspect-ratio: 3/4;
  background:
    radial-gradient(circle at 30% 25%, rgba(79,233,79,0.18), transparent 55%),
    linear-gradient(160deg, #16291F 0%, #0E1B16 100%);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem 1.85rem;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
}
.ebook-cover::before {
  content: ''; position: absolute; inset: 1rem;
  border: 1px solid rgba(79,233,79,0.18); border-radius: 4px; pointer-events: none;
}
.ebook-cover .pub {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green); font-weight: 700;
}
.ebook-cover .cover-title {
  font-family: var(--display); font-size: 1.85rem; line-height: 1.1;
  font-weight: 700; letter-spacing: -0.02em; margin: 0;
}
.ebook-cover .cover-author {
  font-size: 0.85rem; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 0.85rem;
}
.ebook-meta { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ebook-price {
  font-family: var(--display); font-size: 1.6rem; color: var(--green); font-weight: 700;
}
.ebook-bullets { padding-left: 1.2rem; margin: 1.5rem 0; }
.ebook-bullets li { margin-bottom: 0.5rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-soft);
  color: var(--ink-soft);
  padding: 4rem 0 2rem; margin-top: 5rem;
  border-top: 1px solid var(--line);
}
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--green); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
  max-width: 1240px; margin: 0 auto; padding: 0 1.75rem;
}
.footer-brand {
  font-family: var(--display); font-weight: 700;
  color: var(--ink); font-size: 1.3rem;
  margin-bottom: 0.75rem; letter-spacing: -0.02em;
  display: flex; flex-direction: column; line-height: 1.05;
}
.footer-brand .credentials {
  font-family: var(--body); font-size: 0.7rem;
  color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 4px; font-weight: 500;
}
.footer-h {
  font-family: var(--body);
  font-size: 0.74rem; font-weight: 700; color: var(--ink);
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1rem;
}
.footer-list { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
.footer-list li { margin-bottom: 0.5rem; }
.footer-bottom {
  max-width: 1240px; margin: 3rem auto 0; padding: 1.5rem 1.75rem 0;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.82rem; color: var(--ink-faint);
}
.altoria-badge {
  display: inline-block; padding: 0.4rem 0.85rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.78rem; color: var(--ink-soft);
  background: var(--bg-alt);
}
.altoria-badge .accent { color: var(--green); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero, .ebook-hero, .about-hero, .feature-block .container { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero { padding-top: 3rem; }
  .article-grid, .starter-grid, .footer-grid, .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .hero h1 { font-size: 2.5rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .float-1, .float-2 { position: static; margin: 0.5rem auto 0; max-width: fit-content; }
  .float-arrow { display: none; }
}
@media (max-width: 560px) {
  .article-grid, .starter-grid, .footer-grid, .hero-stats { grid-template-columns: 1fr; }
  .nav-wrap { padding: 0.85rem 1.1rem; gap: 0.75rem; }
  .brand { font-size: 1.05rem; }
  .brand .credentials { font-size: 0.55rem; }
}
@media (max-width: 360px) {
  .nav-wrap {
    flex-wrap: wrap;
  }
  .brand {
    flex: 1 1 100%;
  }
  .nav-right {
    width: 100%;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 0;
  }
  .lang-switch {
    padding: 0.28rem 0.55rem;
  }
  .cta-pill {
    padding: 0.52rem 0.9rem;
    font-size: 0.82rem;
  }
}

/* =====================================================
   ALIVE / HOLOGRAPHIC EFFECTS — added 2026-04-29
   Subtle, professional, never garish. Disabled when the
   user has prefers-reduced-motion set.
   ===================================================== */

@property --holo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- HOLO CARDS ---------- */
.holo-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .55s cubic-bezier(.18, .9, .22, 1.05),
              border-color .3s, background-color .3s, box-shadow .4s ease;
}

/* Layer 1 — cursor-following radial spotlight (under content) */
.holo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(127, 179, 217, 0.28),
    rgba(127, 179, 217, 0.08) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 0;
}
.holo-card:hover::before { opacity: 1; }

/* Layer 2 — diagonal holographic shimmer sweep */
.holo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(127, 179, 217, 0.18) 44%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(127, 179, 217, 0.18) 56%,
    transparent 72%
  );
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
  mix-blend-mode: normal;
  z-index: 1;
}
.holo-card:hover::after {
  opacity: 1;
  animation: holo-sweep 2.6s linear infinite;
}
@keyframes holo-sweep {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

/* keep card content above the effect layers */
.holo-card > * { position: relative; z-index: 2; }

/* hover lift: top-edge accent + green ambient glow */
.holo-card:hover {
  box-shadow:
    inset 0 2px 0 0 var(--baby),
    0 14px 36px rgba(127, 179, 217, 0.20),
    0 4px 10px rgba(28, 50, 90, 0.10);
}

/* tilt cards (3D follow-cursor) — JS sets the transform inline */
.holo-tilt { transform: perspective(1000px); }

/* small-scope tweak: when applied to article-card, ensure thumbnail layers correctly */
.article-card.holo-card .thumb { z-index: 2; }

/* ---------- BUTTON SHEEN ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.40) 50%,
    transparent 68%
  );
  background-size: 260% 100%;
  background-position: 140% 0;
  transition: background-position .75s cubic-bezier(.2, .9, .2, 1);
  pointer-events: none;
  z-index: 0;
}
.btn:hover::before { background-position: -140% 0; }
.btn > * { position: relative; z-index: 1; }

/* ---------- NAV LINK animated underline ---------- */
.nav-links a { position: relative; padding-bottom: 4px; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--green);
  transition: width .3s cubic-bezier(.2, .9, .2, 1);
}
.nav-links a:hover::after { width: 100%; }

/* ---------- SECTION KICKER pulsing line ---------- */
.section-kicker { position: relative; }
.section-kicker::before {
  animation: kicker-pulse 2.6s ease-in-out infinite;
}
@keyframes kicker-pulse {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 0 var(--green); }
  50%      { opacity: 1;    box-shadow: 0 0 8px var(--green); }
}

/* ---------- HERO ACCENT word — luminous shimmer ----------
 * Two separate looks. Newsletter hero stays green (its theme is still green).
 * Homepage hero now lives on a navy/space backdrop with a busy neural network,
 * so it gets a blue-to-pure-white shimmer plus a layered cyan halo behind the
 * gradient text. The white peak burns through the busy backdrop; the halo
 * keeps the word readable instead of washing out as transparent gradient. */

.newsletter-hero h1 .accent {
  background: linear-gradient(
    120deg,
    var(--green) 0%,
    var(--green-bright) 25%,
    #C2FFC2 50%,
    var(--green-bright) 75%,
    var(--green) 100%
  );
  background-size: 220% auto;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: text-shimmer 5.5s linear infinite;
}

/* .hero h1 .accent intentionally unstyled here — falls back to the original
 * solid-green color rule earlier in this file (`color: var(--green)`).
 * No shimmer, no gradient, no animation. */

@keyframes text-shimmer {
  to { background-position: 220% 0; }
}

/* ---------- HERO floating cards subtle constant pulse ---------- */
.float-card {
  animation: float-pulse 3.6s ease-in-out infinite;
}
@keyframes float-pulse {
  0%, 100% { box-shadow: var(--shadow-md); }
  50%      { box-shadow: var(--shadow-md), 0 0 26px rgba(79, 233, 79, 0.22); }
}

/* ---------- HERO VISUAL grid overlay slow drift ---------- */
.hero-visual::before {
  animation: grid-drift 22s linear infinite;
}
@keyframes grid-drift {
  to { background-position: 40px 40px, 40px 40px; }
}

/* ---------- LANG CHIP active — subtle glow ---------- */
.lang-switch a.active {
  text-shadow: 0 0 8px rgba(79, 233, 79, 0.6);
}

/* ---------- ANIMATED FLAG CHIPS ---------- */
.flag-icon {
  display: inline-block;
  width: 18px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 1.5px;
  overflow: visible;
  transform-origin: left center;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.45));
  animation: flag-wave 3.4s ease-in-out infinite;
  background: rgba(0,0,0,0.25);
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.12);
}
/* Stagger so flags don't move in lockstep */
.lang-switch a:nth-child(1) .flag-icon { animation-duration: 3.4s; animation-delay: 0s;    }
.lang-switch a:nth-child(2) .flag-icon { animation-duration: 3.8s; animation-delay: -0.7s; }
.lang-switch a:nth-child(3) .flag-icon { animation-duration: 3.2s; animation-delay: -1.4s; }

@keyframes flag-wave {
  0%, 100% { transform: skewX(-2.5deg) skewY(0.6deg)  rotate(-0.4deg) scaleY(1); }
  25%      { transform: skewX(1.5deg)  skewY(-0.6deg) rotate(0.3deg)  scaleY(0.97); }
  50%      { transform: skewX(3.5deg)  skewY(0.4deg)  rotate(0.5deg)  scaleY(1); }
  75%      { transform: skewX(-0.5deg) skewY(-0.3deg) rotate(-0.2deg) scaleY(0.98); }
}

/* Inactive flags fade slightly so the active one reads brighter */
.lang-switch a:not(.active) .flag-icon {
  filter: saturate(0.55) brightness(0.78) drop-shadow(0 0 1.5px rgba(0,0,0,0.4));
  opacity: 0.78;
  transition: filter .25s, opacity .25s;
}
.lang-switch a:hover:not(.active) .flag-icon {
  filter: saturate(1) brightness(1) drop-shadow(0 0 2px rgba(0,0,0,0.5));
  opacity: 1;
}

/* On very narrow screens, hide flags so the chip stays compact */
@media (max-width: 480px) {
  .flag-icon { display: none; }
}

/* ---------- SUBSCRIBE PILL — periodic attention pulse ----------
 * Quiet for the bulk of the cycle; one soft 2-second halo bloom every 16s.
 * Suppressed on the newsletter page and after the first click via JS.
 */
@keyframes cta-attention {
  0%, 78%, 100% {
    box-shadow: 0 0 0 0 rgba(79,233,79,0), 0 0 0 0 rgba(79,233,79,0);
  }
  82% {
    box-shadow: 0 0 0 0   rgba(79,233,79,0.55), 0 0 0 0  rgba(79,233,79,0.4);
  }
  88% {
    box-shadow: 0 0 0 6px rgba(79,233,79,0.18), 0 0 26px 4px rgba(79,233,79,0.55);
  }
  94% {
    box-shadow: 0 0 0 14px rgba(79,233,79,0),   0 0 26px 0  rgba(79,233,79,0);
  }
}

.cta-pill {
  animation: cta-attention 16s ease-in-out infinite;
  animation-delay: 14s;          /* quiet for the first 14s of the visit */
}
.cta-pill.no-pulse { animation: none; }

/* =====================================================
   AUSTRIAN INSURANCE TOOL — homepage promo block
   Subtle blue accent ties back to the tool's navy theme
   without breaking the homepage's green palette.
   ===================================================== */
.feature-block-at {
  background:
    radial-gradient(circle at 82% 50%, rgba(80, 130, 220, 0.10), transparent 55%),
    radial-gradient(circle at 20% 50%, rgba(79, 233, 79, 0.05), transparent 55%),
    var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4.5rem 0;
}
.feature-block-at .container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
@media (max-width: 900px) {
  .feature-block-at .container { grid-template-columns: 1fr; gap: 2.25rem; }
}
.at-promo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.at-promo-kicker .flag-icon {
  width: 16px;
  height: 11px;
}
.at-promo-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1.75rem;
}
.at-promo-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.96rem;
  color: var(--ink);
  margin-bottom: 0.55rem;
  padding-left: 1.5rem;
  position: relative;
}
.at-promo-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.at-promo-note {
  margin-top: 1rem;
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.at-example-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 0.85rem;
  font-size: 0.93rem;
  color: var(--ink);
  transition: border-color .25s, transform .25s;
}
.at-example-card:last-child { margin-bottom: 0; }
.at-example-card:hover {
  border-left-color: rgba(120, 180, 255, 0.85);
  transform: translateX(3px);
}
.at-example-card .ex-tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 0.45rem;
}
.at-example-card p {
  margin: 0;
  font-style: italic;
  color: rgba(225, 240, 252, 0.82);
  line-height: 1.5;
}

/* =====================================================
   INSURANCE TOOL PAGE — "Was deckt meine Versicherung?"
   ===================================================== */

.tool-hero {
  position: relative;
  padding: 5.5rem 1.75rem 3.5rem;
  min-height: 500px;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  /* Deep-space navy backdrop with a subtle glow rising from the bottom-centre,
   * suggesting the planet under the protective shield. */
  background:
    radial-gradient(ellipse at 50% 110%, rgba(40, 80, 180, 0.18) 0%, rgba(2, 6, 22, 0) 55%),
    radial-gradient(ellipse at 50% 30%, rgba(20, 50, 130, 0.12) 0%, rgba(2, 6, 22, 0) 60%),
    linear-gradient(180deg, #02061A 0%, #03081F 40%, #04091F 70%, #060B22 100%);
  border-bottom: 1px solid rgba(80, 130, 220, 0.18);
}
.tool-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 32% 48%, rgba(2, 6, 22, 0.92) 0%, rgba(2, 6, 22, 0.72) 28%, rgba(2, 6, 22, 0.28) 52%, rgba(2, 6, 22, 0) 74%),
    linear-gradient(90deg, rgba(2, 6, 22, 0.62) 0%, rgba(2, 6, 22, 0.22) 48%, rgba(2, 6, 22, 0) 100%);
}
.tool-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  transform: translateX(14%);
  transform-origin: center;
}
.tool-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin-left: max(1.75rem, calc((100vw - 1180px) / 2));
  margin-right: auto;
}
.tool-hero-inner .hero-eyebrow,
.tool-hero-inner h1,
.tool-hero-inner .lede,
.tool-hero-inner .trust-strip {
  text-shadow:
    0 0 22px rgba(2, 6, 22, 0.85),
    0 1px 3px rgba(2, 6, 22, 0.7);
}
.tool-hero-inner h1 { color: var(--ink); }
.tool-hero-inner h1 .accent {
  /* Override the green text-shimmer on the hero accent — fits the new blue context */
  background: linear-gradient(120deg,
    #7CC6FF 0%, #B7E0FF 25%, #E8F4FF 50%, #B7E0FF 75%, #7CC6FF 100%);
  background-size: 220% auto;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: text-shimmer 6s linear infinite;
}
.tool-hero .trust-strip {
  background: rgba(10, 20, 50, 0.7);
  border-color: rgba(120, 180, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tool-hero .trust-strip .dot { color: rgba(120, 200, 255, 0.85); }

/* The hero stars share the existing twinkle animation but get slightly slower
 * timing so the whole space scene reads more meditative. */
.tool-hero-bg .cg-star { animation-duration: 5.5s; }
.tool-hero-bg .cg-star:nth-child(2n)  { animation-duration: 7s;   animation-delay: -1.6s; }
.tool-hero-bg .cg-star:nth-child(3n)  { animation-duration: 8.5s; animation-delay: -3.2s; }
.tool-hero-bg .cg-star:nth-child(5n)  { animation-duration: 4.8s; animation-delay: -1s;   }
.tool-hero-bg .cg-star:nth-child(7n)  { animation-duration: 9.5s; animation-delay: -4.5s; }

/* slow grid drift behind the polytope — matches the 48px pattern tile size */
.hero-grid-rect {
  animation: tool-hero-grid-drift 38s linear infinite;
}
@keyframes tool-hero-grid-drift {
  to { transform: translate(48px, 48px); }
}

/* =====================================================
   4D POLYTOPE (24-cell) — interactive component
   Used in tool-hero (blue) + homepage calc-scene (green).
   Edge stroke / vertex fill set per-frame by JS based on
   depth in 3D and W-coordinate in 4D.
   ===================================================== */
.p4d-edge {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* geometricPrecision = anti-aliased sub-pixel rasterization. Required for
   * smooth slow motion; without it the browser pixel-snaps and we get stutter. */
  shape-rendering: geometricPrecision;
}
.p4d-vertex {
  shape-rendering: geometricPrecision;
  /* No CSS filter — drop-shadow on every frame-mutating element is the second
   * biggest SVG perf trap after group filters. Saturated fill carries the look. */
}
.tool-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 1.1rem;
}
.tool-hero h1 .accent { color: var(--green); }
.tool-hero .lede {
  font-size: 1.1rem; color: var(--ink-soft);
  max-width: 38em; margin: 0 0 1.5rem;
  text-align: left;
}
.trust-strip {
  display: inline-flex; flex-wrap: wrap; gap: 0.5rem 0.75rem;
  justify-content: center; align-items: center;
  font-size: 0.78rem; color: var(--ink-soft);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-alt);
}
.trust-strip .dot { color: var(--green); }

/* ---- The form card ---- */
.tool-form-section { padding: 2rem 0 4rem; }
.tool-form {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-md);
}

.form-step {
  position: relative;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px dashed var(--line);
}
.form-step:last-of-type {
  border-bottom: none;
  margin-bottom: 0.5rem;
}
.form-step .step-num {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.26rem 0.58rem;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--green);
  background: rgba(127, 179, 217, 0.15);
  border: 1px solid rgba(127, 179, 217, 0.32);
  border-radius: 999px;
  box-shadow: none;
  margin-bottom: 0.55rem;
}
.form-step h3 {
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
}
.form-step .form-help {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

.tool-form label {
  display: block;
  margin-bottom: 1rem;
}
.tool-form label > span {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.tool-form input[type="text"],
.tool-form input[type="email"],
.tool-form input[type="tel"],
.tool-form select,
.tool-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--body);
  font-size: 0.96rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s, box-shadow .25s;
}
.tool-form input:focus,
.tool-form select:focus,
.tool-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(79,233,79,0.12);
}
.tool-form textarea { resize: vertical; min-height: 110px; }
.tool-form select option:disabled { color: var(--ink-faint); }

.form-upload {
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.form-upload summary {
  cursor: pointer;
  color: var(--ink-soft);
  user-select: none;
}
.form-upload summary:hover { color: var(--green); }
.form-upload input[type="file"] {
  display: block; margin-top: 0.85rem;
  font-size: 0.88rem; color: var(--ink-soft);
}
.form-upload small {
  display: block; margin-top: 0.5rem;
  font-size: 0.78rem; color: var(--ink-faint);
}

.form-consent { margin: 1.25rem 0 1.5rem; }
.form-consent .consent { margin-bottom: 0.75rem; }
.tool-form button[type="submit"] { width: 100%; }
.legal-line {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-align: center;
}

@media (max-width: 760px) {
  .tool-hero {
    min-height: auto;
    padding: 4.25rem 1.25rem 3rem;
    text-align: center;
  }
  .tool-hero::before {
    background:
      radial-gradient(ellipse at 50% 44%, rgba(2, 6, 22, 0.94) 0%, rgba(2, 6, 22, 0.78) 40%, rgba(2, 6, 22, 0.36) 68%, rgba(2, 6, 22, 0) 100%);
  }
  .tool-hero-bg {
    opacity: 0.84;
    transform: translate(9%, 5%) scale(1.08);
  }
  .tool-hero-inner {
    max-width: 36rem;
    margin: 0 auto;
  }
  .tool-hero .lede {
    margin: 0 auto 1.4rem;
    text-align: center;
  }
  .tool-hero .trust-strip {
    border-radius: 16px;
    padding: 0.7rem 0.8rem;
    line-height: 1.35;
  }
  .tool-hero .trust-strip .dot {
    display: none;
  }
}

@media (max-width: 640px) {
  .tool-form-section {
    padding: 1.35rem 0 3rem;
  }
  .tool-form {
    padding: 1.35rem 1rem;
    border-radius: 12px;
  }
  .form-step {
    padding-bottom: 1.45rem;
    margin-bottom: 1.45rem;
  }
  .form-step .step-num {
    font-size: 0.72rem;
    margin-bottom: 0.5rem;
  }
  .form-step h3 {
    font-size: 1.08rem;
    line-height: 1.18;
  }
  .form-consent .consent {
    max-width: none;
    overflow-wrap: anywhere;
  }
  .tool-form button[type="submit"] {
    min-height: 48px;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

/* ---- Loading state with mini-mandala ---- */
.tool-loading {
  padding: 3rem 1.75rem 4rem;
  text-align: center;
}
.tool-loading.hidden,
.tool-output.hidden { display: none; }
.loading-mandala {
  width: 220px; height: 220px;
  margin: 0 auto 1.5rem;
  position: relative;
}
.loading-mandala svg { width: 100%; height: 100%; display: block; }
.loading-text {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
}
.loading-steps {
  display: inline-flex; flex-direction: column; gap: 0.4rem;
  font-size: 0.88rem; color: var(--ink-soft);
}
.loading-step {
  position: relative;
  padding-left: 1.4rem;
  opacity: 0.4;
  transition: opacity .4s;
}
.loading-step::before {
  content: '○';
  position: absolute; left: 0;
  color: var(--ink-soft);
}
.loading-step.is-active {
  opacity: 1; color: var(--ink);
}
.loading-step.is-active::before {
  content: '◉'; color: var(--green);
}
.loading-step.is-done {
  opacity: 0.7;
}
.loading-step.is-done::before {
  content: '✓'; color: var(--green);
}

/* ---- Output panel ---- */
.tool-output { padding: 2rem 0 3rem; }
.output-card {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-md);
}
.output-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}
.output-label {
  font-size: 0.74rem; font-weight: 700;
  color: var(--green); letter-spacing: 0.18em;
  text-transform: uppercase;
}
.output-header h2 {
  font-size: 1.45rem;
  margin: 0.4rem 0 0;
  color: var(--ink);
}
.output-section { margin-bottom: 1.75rem; }
.output-section h3 {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 0.6rem;
}
.output-section p {
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.clause {
  background: var(--bg);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.85rem 1.15rem;
  margin: 0 0 0.75rem;
  font-size: 0.94rem;
}
.clause-source {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.clause p {
  font-style: italic;
  color: var(--ink);
  margin: 0;
}
.output-section ol {
  padding-left: 1.4rem;
  margin: 0;
}
.output-section ol li {
  margin-bottom: 0.5rem;
  color: var(--ink);
}

.output-feedback {
  display: flex; gap: 0.75rem; align-items: center;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.feedback-btn {
  padding: 0.45rem 0.9rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.feedback-btn:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(79,233,79,0.06);
}
.feedback-btn.is-clicked {
  border-color: var(--green);
  background: rgba(79,233,79,0.16);
  color: var(--green);
}

.output-disclaimer {
  margin-top: 1.5rem;
  padding: 0.95rem 1.2rem;
  background: rgba(201,169,106,0.06);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ---- Tippgeber CTA card ---- */
.tippgeber-card {
  margin-top: 1.5rem;
  background:
    radial-gradient(circle at 80% 30%, rgba(79,233,79,0.10), transparent 55%),
    var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.85rem 2rem;
  text-align: center;
}
.tippgeber-card h3 {
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.tippgeber-card p {
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}

/* ---- FAQ ---- */
.tool-faq { padding: 3rem 0 1rem; }
.tool-faq h2 {
  font-size: 1.7rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.faq-item summary {
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; color: var(--green);
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--green); }
.faq-item p {
  padding: 0 1.2rem 1.1rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}

/* ---- Mini-mandala for the loading state ---- */
.lm-spin { transform-origin: 110px 110px; animation: cg-spin 14s linear infinite; }
.lm-spin.r2 { animation-duration: 22s; animation-direction: reverse; }
.lm-spin.r3 { animation-duration: 30s; }
.lm-core {
  fill: #ECFFEC;
  filter: drop-shadow(0 0 8px rgba(194,255,194,0.95));
  transform-origin: 110px 110px;
  transform-box: fill-box;
  animation: cg-core-pulse 2s ease-in-out infinite;
}

/* ---------- ALIVE: starter-card .step number tag — green dot pulse ---------- */
.starter-card .step::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(79, 233, 79, 0.7);
  animation: dot-radar 2.4s ease-out infinite;
}
@keyframes dot-radar {
  0%   { box-shadow: 0 0 0 0 rgba(79, 233, 79, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(79, 233, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 233, 79, 0); }
}

/* ---------- REDUCED MOTION: kill animations + transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .holo-card { transform: none !important; }
}

/* =====================================================
   "LIMITLESS"-STYLE CALCULATION SCENE
   For .feature-mockup.calc-scene
   Cognition visualization: cascading symbols, fractal
   geometry, equation fragments. No calculator UI.
   ===================================================== */

.calc-scene {
  background: radial-gradient(ellipse at 50% 55%, #0E1F18 0%, #050B08 65%, #02060A 100%);
  overflow: hidden;
  padding: 0;
  border-color: var(--line);
}
.calc-scene::after { display: none; } /* scene has its own shimmer */
.calc-scene .calc-svg {
  width: 100%; height: 100%;
  display: block; position: relative; z-index: 0;
}

/* ---- STARS (ambient) ---- */
.cg-star {
  transform-origin: center;
  animation: cg-twinkle 3.2s ease-in-out infinite;
}
.cg-star:nth-child(2n)  { animation-duration: 4.5s; animation-delay: -1.2s; }
.cg-star:nth-child(3n)  { animation-duration: 5.5s; animation-delay: -2.6s; }
.cg-star:nth-child(5n)  { animation-duration: 2.8s; animation-delay: -0.8s; }
.cg-star:nth-child(7n)  { animation-duration: 6.5s; animation-delay: -3.4s; }
@keyframes cg-twinkle {
  0%, 100% { opacity: 0.20; }
  50%      { opacity: 0.85; }
}

/* ---- DIGIT STREAMS (Matrix-rain refined) ----
 * Each stream contains 12 chars stacked vertically.
 * A traveling brightness pulse runs from top to bottom
 * via per-digit animation-delay stagger.
 */
.cg-d {
  font-family: ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
  font-size: 14px;
  font-weight: 500;
  text-anchor: middle;
  fill: rgba(79, 233, 79, 0.08);
  animation: cg-pulse-down 8s linear infinite;
}

.cg-d-0  { animation-delay: 0s; }
.cg-d-1  { animation-delay: 0.66s; }
.cg-d-2  { animation-delay: 1.33s; }
.cg-d-3  { animation-delay: 2s; }
.cg-d-4  { animation-delay: 2.66s; }
.cg-d-5  { animation-delay: 3.33s; }
.cg-d-6  { animation-delay: 4s; }
.cg-d-7  { animation-delay: 4.66s; }
.cg-d-8  { animation-delay: 5.33s; }
.cg-d-9  { animation-delay: 6s; }
.cg-d-10 { animation-delay: 6.66s; }
.cg-d-11 { animation-delay: 7.33s; }

.cg-stream.s2 .cg-d { animation-duration: 6s; }
.cg-stream.s3 .cg-d { animation-duration: 10s; }
.cg-stream.s4 .cg-d { animation-duration: 7s; }
.cg-stream.s5 .cg-d { animation-duration: 9s; }
.cg-stream.s6 .cg-d { animation-duration: 8.5s; }

@keyframes cg-pulse-down {
  0%   { fill: rgba(79, 233, 79, 0.04); filter: none; }
  3%   { fill: #ECFFEC; filter: drop-shadow(0 0 5px rgba(194, 255, 194, 0.95)); }
  7%   { fill: rgba(194, 255, 194, 0.85); }
  14%  { fill: rgba(79, 233, 79, 0.50); filter: none; }
  25%  { fill: rgba(79, 233, 79, 0.25); }
  40%  { fill: rgba(79, 233, 79, 0.10); }
  100% { fill: rgba(79, 233, 79, 0.04); }
}

/* ---- EQUATION FRAGMENTS (drift in/out, like a thought passing through) ---- */
.cg-eq {
  font-family: ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  fill: rgba(216, 232, 220, 0.92);
  opacity: 0;
  animation: cg-eq-fade 9s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  filter: drop-shadow(0 0 5px rgba(79, 233, 79, 0.55));
}
@keyframes cg-eq-fade {
  0%, 100% { opacity: 0; transform: translateY(4px); }
  18%, 70% { opacity: 0.92; transform: translateY(0); }
  88%      { opacity: 0; transform: translateY(-4px); }
}
.cg-eq { transform-box: fill-box; }

/* ---- CENTRAL MANDALA (concentric rotating geometry) ---- */
.cg-mring,
.cg-mhex,
.cg-mdia,
.cg-mtri {
  fill: none;
  stroke-linejoin: round;
  transform-origin: 300px 240px;
  transform-box: fill-box;
}
.cg-mring {
  stroke: rgba(79, 233, 79, 0.55);
  stroke-width: 0.7;
  stroke-dasharray: 3 7;
  animation: cg-spin 35s linear infinite;
}
.cg-mring.outer {
  stroke: rgba(79, 233, 79, 0.32);
  stroke-dasharray: 1 11;
  animation-duration: 55s;
  animation-direction: reverse;
}
.cg-mhex {
  stroke: rgba(79, 233, 79, 0.6);
  stroke-width: 0.9;
  animation: cg-spin 22s linear infinite reverse;
}
.cg-mdia {
  stroke: rgba(194, 255, 194, 0.55);
  stroke-width: 0.85;
  animation: cg-spin 18s linear infinite;
}
.cg-mtri {
  stroke: rgba(79, 233, 79, 0.7);
  stroke-width: 1;
  animation: cg-spin 14s linear infinite reverse;
}
@keyframes cg-spin {
  to { transform: rotate(360deg); }
}

/* fine reticle marks at the very center */
.cg-tick {
  stroke: rgba(194, 255, 194, 0.55);
  stroke-width: 0.7;
}

/* core */
.cg-core {
  fill: #ECFFEC;
  filter: drop-shadow(0 0 8px rgba(194, 255, 194, 0.95));
  transform-origin: 300px 240px;
  transform-box: fill-box;
  animation: cg-core-pulse 2.2s ease-in-out infinite;
}
@keyframes cg-core-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.7); }
}

/* expanding pulse rings emitted from core */
.cg-pulse-ring {
  fill: none;
  stroke: rgba(79, 233, 79, 0.65);
  stroke-width: 1;
  transform-origin: 300px 240px;
  transform-box: fill-box;
  animation: cg-pulse-out 4.5s ease-out infinite;
  opacity: 0;
}
.cg-pulse-ring.p2 { animation-delay: -1.5s; }
.cg-pulse-ring.p3 { animation-delay: -3s; }
@keyframes cg-pulse-out {
  0%   { transform: scale(0.4); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: scale(7); opacity: 0; }
}

/* orbiting micro-dots */
.cg-orbit {
  transform-origin: 300px 240px;
  transform-box: fill-box;
  animation: cg-spin 9s linear infinite;
}
.cg-orbit.o2 { animation-duration: 13s; animation-direction: reverse; }
.cg-orbit.o3 { animation-duration: 17s; }

/* ---- HORIZONTAL SCAN-LINE CURRENTS (slow drift) ---- */
.cg-current {
  stroke: rgba(79, 233, 79, 0.20);
  stroke-width: 0.5;
  fill: none;
  animation: cg-current-slide 18s linear infinite;
}
.cg-current.c2 {
  animation-duration: 26s;
  animation-direction: reverse;
  stroke: rgba(194, 255, 194, 0.10);
}
@keyframes cg-current-slide {
  0%   { transform: translateY(-30px); }
  100% { transform: translateY(510px); }
}

/* ---- RESULT PANEL (top-right, discreet) ---- */
.cg-result-label,
.cg-result-meta {
  font-family: var(--body, 'Inter', sans-serif);
  font-size: 8px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  fill: rgba(156, 177, 160, 0.65);
}
.cg-result-line {
  stroke: rgba(79, 233, 79, 0.45);
  stroke-width: 0.6;
}

/* ---- LIVE-TICKING DISPLAY NUMBER ---- */
.cg-display {
  font-family: ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
  font-size: 22px;
  font-weight: 700;
  fill: #ECFFEC;
  letter-spacing: 0.4px;
  filter: drop-shadow(0 0 6px rgba(194, 255, 194, 0.55));
  transition: filter 0.15s;
}
.cg-display.tick {
  filter: drop-shadow(0 0 14px rgba(194, 255, 194, 1));
}

/* ---- BOTTOM CAPTION (subtle, no badge) ---- */
.cg-caption {
  font-family: var(--body, 'Inter', sans-serif);
  font-size: 8px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  fill: rgba(79, 233, 79, 0.45);
}
.cg-caption-tick {
  fill: rgba(194, 255, 194, 0.85);
  animation: cg-tick-pulse 1.4s ease-in-out infinite;
}
@keyframes cg-tick-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* =====================================================================
   SERVICES / TEMPLATES / PROJECTS / EXPANDED ABOUT
   ===================================================================== */

/* Shared section header */
.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem;
}
.section-header h2 {
  margin-bottom: 0.6rem;
}
.section-header p {
  color: var(--ink-soft);
  font-size: 1.02rem;
}

/* ---- Services hero (also used by /templates and /projects) ---- */
.services-hero {
  padding: 5.5rem 1.75rem 3rem;
  text-align: center;
}
.services-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -0.02em;
  margin: 0.5rem 0 1.2rem;
}
.services-lede {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto;
}

/* ---- Three-tier services grid ---- */
.services-grid-section { padding: 1.5rem 0 4rem; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.service-tier {
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.service-tier.tier-featured {
  border-color: rgba(0, 255, 127, 0.4);
  box-shadow: 0 0 0 1px rgba(0,255,127,0.12), 0 12px 30px rgba(0,0,0,0.25);
}
.tier-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.service-tier h2 {
  font-size: 1.55rem;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.tier-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.tier-price-num {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.tier-price-unit {
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.service-tier > p {
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.tier-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}
.tier-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
  color: var(--ink);
}
.tier-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-weight: 700;
}

/* ---- Disclaimer block on services ---- */
.services-disclaimer-section { padding: 2rem 0; }
.disclaimer-block {
  padding: 1.75rem;
  border-color: rgba(255, 200, 80, 0.18);
  background: rgba(255, 200, 80, 0.04);
}
.disclaimer-block h3 {
  margin-top: 0;
  color: rgba(255, 220, 130, 0.95);
}
.disclaimer-block p { color: var(--ink-soft); }

/* ---- Booking section / Calendly ---- */
.booking-section {
  padding: 4rem 0;
  text-align: center;
}
.booking-section h2 {
  font-size: 2rem;
  margin: 0.4rem 0 0.6rem;
}
.calendly-inline-widget {
  background: var(--bg-card, rgba(255,255,255,0.02));
}

/* ---- Templates grid ---- */
.templates-section { padding: 3rem 0; }
.templates-section-paid {
  background: linear-gradient(180deg, rgba(0,255,127,0.02) 0%, transparent 100%);
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.template-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.template-thumb {
  position: relative;
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(0,255,127,0.10), rgba(120,180,255,0.04));
}
.template-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.thumb-tag {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(0,255,127,0.08);
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  border: 1px solid rgba(0,255,127,0.22);
}
.thumb-title {
  position: relative;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.thumb-etfs    { background: linear-gradient(135deg, rgba(0,255,127,0.18), rgba(0,80,40,0.04)); }
.thumb-kest    { background: linear-gradient(135deg, rgba(120,180,255,0.16), rgba(60,90,140,0.04)); }
.thumb-ifrs    { background: linear-gradient(135deg, rgba(255,140,90,0.14), rgba(140,70,30,0.04)); }
.thumb-fmva    { background: linear-gradient(135deg, rgba(180,120,255,0.16), rgba(80,40,140,0.04)); }
.thumb-3stmt   { background: linear-gradient(135deg, rgba(0,255,127,0.18), rgba(20,60,40,0.06)); }
.thumb-fire    { background: linear-gradient(135deg, rgba(255,160,80,0.16), rgba(140,80,20,0.04)); }
.thumb-vorsorge{ background: linear-gradient(135deg, rgba(120,180,255,0.16), rgba(40,60,120,0.04)); }
.thumb-broker  { background: linear-gradient(135deg, rgba(180,255,160,0.14), rgba(40,80,40,0.04)); }
.thumb-hedging { background: linear-gradient(135deg, rgba(255,90,160,0.14), rgba(120,30,80,0.04)); }
.thumb-portfolio{background: linear-gradient(135deg, rgba(120,255,220,0.14), rgba(20,80,80,0.04)); }
.template-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.template-meta {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.lang-pill, .format-pill {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
}
.lang-pill {
  background: rgba(0, 255, 127, 0.10);
  color: var(--green);
  border: 1px solid rgba(0,255,127,0.25);
}
.format-pill {
  background: rgba(255,255,255,0.04);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.template-body h3 {
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 0.6rem;
}
.template-body p {
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  flex-grow: 1;
}
.template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.template-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.template-price.free {
  color: var(--green);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- Bundle card ---- */
.templates-bundle-section { padding: 1.5rem 0 5rem; }
.bundle-card {
  padding: 2.5rem 2rem;
  text-align: center;
  border-color: rgba(0,255,127,0.4);
  box-shadow: 0 0 0 1px rgba(0,255,127,0.10), 0 12px 30px rgba(0,0,0,0.3);
}
.bundle-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.bundle-card h2 { font-size: 2rem; margin: 0 0 0.75rem; }
.bundle-card > p { color: var(--ink-soft); max-width: 560px; margin: 0 auto 1.5rem; }
.bundle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.bundle-price-old {
  font-size: 1.05rem;
  color: var(--ink-soft);
  text-decoration: line-through;
  margin-right: 0.5rem;
}
.bundle-price-new {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.02em;
}

/* ---- Projects rows ---- */
.projects-section { padding: 2rem 0 4rem; }
.project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2.5rem;
  padding: 2.5rem;
  margin-bottom: 2rem;
  align-items: center;
}
.project-row.project-row-reverse {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.project-row.project-row-reverse .project-visual {
  order: 2;
}
.project-row.project-row-reverse .project-body {
  order: 1;
}
.project-visual {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(2, 6, 22, 0.55);
  padding: 1rem;
  overflow: hidden;
}
.project-visual svg {
  width: 100%;
  height: auto;
  display: block;
}
.project-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.project-tag {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.project-tag.project-tag-live {
  color: var(--green);
  background: rgba(0,255,127,0.08);
  border-color: rgba(0,255,127,0.3);
}
.project-body h2 {
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
.project-body > p {
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}
.project-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.project-stats > div {
  display: flex;
  flex-direction: column;
}
.ps-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.01em;
}
.ps-lbl {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.project-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.case-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.case-list li {
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--green);
  border-radius: 0 6px 6px 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.case-list li strong { color: var(--ink); }

/* ---- Stack section ---- */
.stack-section { padding: 3rem 0 4rem; }
.stack-section h2 { text-align: center; }
.stack-section > .container-narrow > p {
  color: var(--ink-soft);
  text-align: center;
  margin: 0.5rem auto 2rem;
}
.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
}
.stack-cell {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.stack-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.stack-val {
  font-size: 0.92rem;
  color: var(--ink);
}

/* ---- About: experience tiles ---- */
.about-experience { padding: 3rem 0; }
.experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.experience-tile {
  padding: 1.75rem 1.75rem;
}
.exp-period {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.exp-employer {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.experience-tile h3 {
  font-size: 1.2rem;
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.experience-tile > p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.exp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.exp-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.45rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.exp-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* ---- About: certifications ---- */
.about-certs { padding: 2rem 0; }
.certs-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}
.cert-pill {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cert-pill.cert-cfi {
  border-color: rgba(0,255,127,0.3);
  background: rgba(0,255,127,0.04);
}
.cert-name {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}
.cert-issuer {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---- About: built grid ---- */
.about-built { padding: 2rem 0 4rem; }
.built-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.built-card {
  padding: 1.5rem 1.5rem 1.6rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.built-card:hover { text-decoration: none; }
.built-tag {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.built-card h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.built-card p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* ---- Add-on AI services grid ---- */
.addon-services-section { padding: 2.5rem 0 2rem; }
.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.addon-card {
  padding: 1.5rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
}
.addon-tag {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 0.65rem;
}
.addon-card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.addon-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.addon-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 1rem;
  flex-grow: 1;
}
.addon-cta {
  font-size: 0.92rem;
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
}
.addon-cta:hover { color: var(--green-bright); text-decoration: underline; }

/* ---- How-it-works strip ---- */
.how-it-works-section { padding: 3rem 0 4rem; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  position: relative;
}
.how-step {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.how-num {
  position: absolute;
  top: -14px;
  left: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--bg, #02061d);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 0 0 4px rgba(2, 6, 22, 1);
}
.how-step h4 {
  font-size: 1rem;
  margin: 0.35rem 0 0.5rem;
  color: var(--ink);
}
.how-step p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* ---- Mobile fallbacks ---- */
@media (max-width: 760px) {
  .project-row,
  .project-row.project-row-reverse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.75rem;
  }
  .project-row.project-row-reverse .project-visual { order: 0; }
  .project-row.project-row-reverse .project-body   { order: 0; }
  .services-hero { padding: 4rem 1.25rem 2rem; }
}

/* =====================================================================
   LIGHT-THEME OVERRIDES — v3 (soft baby blue · airy)
   These rules invert remaining dark-mode assumptions so existing
   components work on the new light background without per-rule edits.
   ===================================================================== */

/* Glass surfaces — flip white-tinted glass to navy-tinted glass */
.float-card,
.experience-tile,
.cert-pill,
.stack-cell,
.case-list li,
.disclaimer-block {
  background: rgba(28, 50, 90, 0.025) !important;
  border-color: var(--line) !important;
}

/* Header / footer — light surfaces with subtle border */
.site-header {
  background: rgba(244, 248, 252, 0.85) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.site-footer {
  background: var(--bg-soft) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
}
.site-footer a { color: var(--ink-soft) !important; }
.site-footer a:hover { color: var(--green) !important; }
.footer-h { color: var(--ink) !important; }

/* Brand text */
.brand,
.brand:hover,
.footer-brand {
  color: var(--ink) !important;
}
.credentials {
  color: var(--ink-soft) !important;
}

/* Nav links — dark text on light bg */
.nav-links a { color: var(--ink-soft) !important; }
.nav-links a:hover,
.nav-links a.active { color: var(--green) !important; }

/* CTA pill — solid trust-blue button on light surface */
.cta-pill {
  background: var(--green) !important;
  color: #fff !important;
  border: 1px solid var(--green) !important;
}
.cta-pill:hover {
  background: var(--green-bright) !important;
  border-color: var(--green-bright) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Primary button */
.btn {
  background: var(--green) !important;
  color: #fff !important;
  border: 1px solid var(--green) !important;
}
.btn:hover {
  background: var(--green-bright) !important;
  border-color: var(--green-bright) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(44, 95, 141, 0.25);
}
.btn-ghost {
  background: transparent !important;
  color: var(--green) !important;
  border: 1px solid var(--baby) !important;
}
.btn-ghost:hover {
  background: var(--baby-faint) !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
}

/* Top banner (kept lighter) */
.top-banner {
  background: var(--bg-tint) !important;
  border-bottom: 1px solid var(--line) !important;
}
.top-banner-text { color: var(--ink) !important; }
.top-banner-cta { color: var(--green) !important; }
.top-banner-cta:hover { color: var(--green-bright) !important; }
.top-banner-close { color: var(--ink-soft) !important; }
.top-banner-close:hover { color: var(--ink) !important; background: rgba(28,50,90,0.06) !important; }

/* Translation banner */
.translation-banner {
  background: var(--bg-tint) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

/* Generic section backgrounds that referenced dark gradients */
section[class*="section"]:not([class*="hero"]):not(.tool-faq) {
  background: transparent;
}

/* Hero eyebrow color reset */
.hero-eyebrow {
  color: var(--green) !important;
}
.hero-eyebrow::before {
  background: var(--baby) !important;
}

/* Float-card inner labels */
.float-card .num { color: var(--green) !important; }
.float-card .lbl { color: var(--ink-soft) !important; }

/* Strong text */
strong { color: var(--ink) !important; }

/* FAQ items */
.faq-item {
  background: var(--bg-alt) !important;
  border: 1px solid var(--line) !important;
}
.faq-item summary { color: var(--ink) !important; }
.faq-item summary::after { color: var(--green) !important; }
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item p { color: var(--ink-soft) !important; }

/* Calc-scene + tool-hero (dark-only spaces) — keep dark to preserve animation contrast */
.tool-hero,
.calc-scene-wrap,
.cog-stage {
  background: radial-gradient(ellipse at 50% 55%, #0F1B2D 0%, #050B17 65%, #02060A 100%) !important;
  color: #EEF1FF !important;
}
.tool-hero-inner h1,
.tool-hero-inner .lede,
.tool-hero-inner .hero-eyebrow,
.tool-hero-inner .trust-strip {
  color: #EEF1FF !important;
}
.tool-hero-inner .hero-eyebrow { color: var(--baby) !important; }
.tool-hero-inner h1 .accent { color: var(--baby) !important; }
.tool-hero .trust-strip { color: rgba(238, 241, 255, 0.78) !important; }
.tool-hero .trust-strip .dot { color: rgba(127, 179, 217, 0.85) !important; }

/* Article cards / generic cards on white surface */
.article-card.holo-card,
.holo-card {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* Inputs and form fields */
input[type="text"], input[type="email"], textarea, select {
  background: var(--bg-alt) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--green) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--baby-faint) !important;
}

/* Lang switcher chips — light surface */
.lang-switch a {
  color: var(--ink-soft) !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-alt) !important;
}
.lang-switch a.active {
  color: #fff !important;
  background: var(--green) !important;
  border-color: var(--green) !important;
}

/* Altoria badge → just remove green-glow */
.altoria-badge {
  background: var(--bg-tint) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
.altoria-badge .accent { color: var(--green) !important; }

/* =====================================================================
   HELLO SITE — v3 (personal landing page)
   ===================================================================== */

/* ---- Hero ---- */
.hello-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.75rem 4rem;
  overflow: hidden;
  isolation: isolate;
}
.hello-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.hello-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
}

/* greetings cycling above the H1 */
.greetings {
  height: 38px;
  position: relative;
  display: inline-flex;
  margin-bottom: 0.6rem;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--green);
}
.greetings .hi {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
  opacity: 0;
  animation: hi-cycle 7.5s infinite;
}
.greetings .hi-en { animation-delay: 0s; }
.greetings .hi-hr { animation-delay: 2.5s; }
.greetings .hi-de { animation-delay: 5s; }
@keyframes hi-cycle {
  0%, 28%   { opacity: 0; transform: translateY(8px); }
  4%, 24%   { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* portrait — circular w/ soft baby-blue ring */
.portrait-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 1.6rem;
}
.portrait {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background:
    url('images/portrait-square.jpg') center/cover no-repeat,
    var(--bg-tint);
  border: 3px solid #fff;
  box-shadow:
    0 8px 24px rgba(28, 50, 90, 0.14),
    0 0 0 1px rgba(127, 179, 217, 0.35);
  position: relative;
  z-index: 2;
}
.portrait-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--baby);
  opacity: 0.65;
  animation: portrait-ring-pulse 4.5s ease-in-out infinite;
}
@keyframes portrait-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.65; }
  50%      { transform: scale(1.06); opacity: 0.30; }
}

.hello-h1 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 1rem;
}
.hello-lede {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 auto 2rem;
}
.hello-lede strong { color: var(--ink); font-weight: 600; }

.hello-ctas {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}

.hello-langs {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.hello-langs-label { color: var(--ink-faint); margin-right: 0.25rem; }
.lang-chip {
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(127, 179, 217, 0.14);
  color: var(--green);
  font-weight: 600;
  font-size: 0.82rem;
  border: 1px solid rgba(127, 179, 217, 0.28);
}

/* ---- About paragraph ---- */
.hello-about {
  padding: 5rem 1.75rem 3.5rem;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}
.hello-about h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1.4rem;
  color: var(--ink);
}
.hello-about p {
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 1.1rem;
  font-size: 1.04rem;
}
.hello-about p:last-child {
  font-size: 0.95rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* ---- Tool teaser card ---- */
.hello-tool {
  padding: 4rem 1.75rem;
}
.hello-tool-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  padding: 3rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--bg-tint) 100%);
  border: 1px solid var(--line);
}
.hello-tool-content h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1rem;
  color: var(--ink);
}
.hello-tool-content p {
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 1.4rem;
}
.hello-tool-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hello-tool-visual svg { max-width: 100%; height: auto; }

/* ---- Contact ---- */
.hello-contact {
  padding: 4.5rem 1.75rem 5rem;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}
.hello-contact h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1rem;
  color: var(--ink);
}
.hello-contact > .container-narrow > p {
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
  line-height: 1.7;
}
.hello-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.hello-contact-list li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.02rem;
}
.hello-contact-list .contact-label {
  flex: 0 0 110px;
  color: var(--ink-faint);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hello-contact-list a {
  color: var(--green);
  font-weight: 500;
  text-decoration: none;
}
.hello-contact-list a:hover { color: var(--green-bright); text-decoration: underline; }

/* ---- Mobile ---- */
@media (max-width: 740px) {
  .hello-hero { padding: 4.5rem 1.25rem 3rem; min-height: 80vh; }
  .greetings { font-size: 1.3rem; }
  .portrait-wrap, .portrait { width: 124px; height: 124px; }
  .hello-tool-card { grid-template-columns: 1fr; padding: 2rem 1.5rem; }
  .hello-tool-visual { order: -1; }
  .hello-contact-list .contact-label { flex-basis: 90px; }
}

/* About page small adjustments — v3 */
.built-card-soft {
  cursor: default;
  opacity: 0.85;
}
.built-card-soft:hover {
  transform: none;
}
.built-card-soft .built-tag {
  color: var(--ink-faint);
}

/* Allow exp-period to act as employer-line label when no dates */
.experience-tile .exp-period {
  font-variant-numeric: lining-nums;
}

/* =====================================================================
   HELLO HERO — halo refinements + subscribe pill (v3.1)
   ===================================================================== */

/* ---- Halo anchors (Zagreb / Vienna) — slow breathing rings ---- */
.halo-anchor {
  transform-origin: center;
}
.halo-ring {
  transform-origin: center;
  animation: halo-ring-pulse 9s ease-in-out infinite;
}
.halo-ring-1 { animation-delay: 0s;   }
.halo-ring-2 { animation-delay: 1.4s; }
.halo-ring-3 { animation-delay: 2.8s; }
@keyframes halo-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.55; }
}

/* City labels (ZG · WI) — minimal, monospace-feeling */
.halo-label {
  fill: rgba(44, 95, 141, 0.40);
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* Twinkling compound-growth specks */
.hello-star { transform-origin: center; }
.hello-star.tw-1 { animation: hello-twinkle 4.8s ease-in-out infinite;        }
.hello-star.tw-2 { animation: hello-twinkle 6.2s ease-in-out infinite -1.4s; }
.hello-star.tw-3 { animation: hello-twinkle 5.4s ease-in-out infinite -3.0s; }
.hello-star.tw-4 { animation: hello-twinkle 7.0s ease-in-out infinite -2.0s; }
.hello-star.tw-5 { animation: hello-twinkle 5.8s ease-in-out infinite -4.2s; }
@keyframes hello-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50%      { opacity: 0.95; transform: scale(1.2); }
}

/* ---- Subscribe pill — transparent · cool · constantly flowing ---- */
.cta-pill {
  /* Override the solid baby-blue from the light-theme block above */
  background: rgba(127, 179, 217, 0.16) !important;
  color: var(--green) !important;
  border: 1px solid rgba(127, 179, 217, 0.55) !important;
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 6px 18px rgba(44, 95, 141, 0.10);
  transition: transform .25s ease, border-color .25s ease, box-shadow .35s ease;
  /* Disable the previous attention-pulse animation */
  animation: none !important;
}

/* Constant flowing shimmer — sweeps left-to-right forever */
.cta-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(127, 179, 217, 0.30) 42%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(127, 179, 217, 0.30) 58%,
    transparent 75%
  );
  background-size: 240% 100%;
  background-position: 100% 0;
  animation: cta-flow 4.8s linear infinite;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.85;
}
@keyframes cta-flow {
  0%   { background-position: 100% 0; }
  100% { background-position: -120% 0; }
}

/* Soft outer halo that breathes alongside the shimmer */
.cta-pill::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  background: radial-gradient(
    closest-side,
    rgba(127, 179, 217, 0.45),
    rgba(127, 179, 217, 0) 70%
  );
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
  animation: cta-halo 4.8s ease-in-out infinite;
}
@keyframes cta-halo {
  0%, 100% { opacity: 0.30; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(1.06); }
}

/* Keep the label on top of the shimmer */
.cta-pill > * { position: relative; z-index: 2; }

.cta-pill:hover {
  background: rgba(127, 179, 217, 0.28) !important;
  border-color: var(--green) !important;
  color: var(--green-bright) !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 24px rgba(44, 95, 141, 0.18);
}

/* =====================================================================
   THE COMPOSER — interactive UI surface (v3.2)
   Two doorways joined by a flowing thread. Reactive halos, ripples on
   keystroke, cycling multilingual placeholder. One submit input + one
   portrait door, presented as a single living object.
   ===================================================================== */

.composer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) 12px minmax(0, 1.4fr);
  align-items: stretch;
  gap: 0;
  width: min(720px, 92vw);
  margin: 2.4rem auto 1.4rem;
  padding: 14px;
  border-radius: 22px;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.78) 0%, rgba(244, 248, 252, 0.55) 100%);
  border: 1px solid rgba(127, 179, 217, 0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 24px 60px -28px rgba(28, 50, 90, 0.18),
    0 4px 16px rgba(28, 50, 90, 0.06);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  overflow: visible;
  isolation: isolate;
  transition: border-color .35s ease, box-shadow .55s ease, transform .35s ease;
}

/* Aurora — soft moving gradient halo behind the composer */
.composer-aurora {
  position: absolute;
  inset: -32px;
  border-radius: 32px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 18% 50%, rgba(127, 179, 217, 0.28), transparent 65%),
    radial-gradient(55% 65% at 82% 55%, rgba(44, 95, 141, 0.22), transparent 65%),
    radial-gradient(80% 80% at 50% 110%, rgba(184, 212, 234, 0.32), transparent 70%);
  filter: blur(8px);
  opacity: 0.75;
  transition: opacity .5s ease, filter .5s ease, transform .5s ease;
  animation: composer-aurora-drift 14s ease-in-out infinite;
}
@keyframes composer-aurora-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);    }
  50%      { transform: translate3d(0, -6px, 0) scale(1.03); }
}

/* Ripple host — particles get appended by JS on each keystroke */
.composer-ripples {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.cmp-ripple {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 95, 141, 0.55) 0%, rgba(127, 179, 217, 0) 70%);
  transform: translate(-50%, -50%) scale(0.4);
  animation: cmp-ripple-anim 1.1s ease-out forwards;
  pointer-events: none;
}
@keyframes cmp-ripple-anim {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(7);   opacity: 0; }
}

/* ---- Door (shared) ---- */
.composer-door {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  z-index: 1;
  transition: background .35s ease, transform .35s ease;
}
.composer-door:hover {
  background: rgba(127, 179, 217, 0.08);
}

/* Eyebrow text shared */
.cd-eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 6px;
}

/* ---- LEFT door — portrait gateway ---- */
.composer-door-left {
  cursor: pointer;
}
.cd-portrait {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    url('images/portrait-square.jpg') center/cover no-repeat,
    var(--bg-tint);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(28, 50, 90, 0.18), 0 0 0 1px rgba(127, 179, 217, 0.5);
  position: relative;
  z-index: 2;
  transition: transform .45s cubic-bezier(.18,.9,.22,1.05), box-shadow .35s;
}
/* small orbiting ring around the avatar — present, calm */
.cd-portrait::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(127, 179, 217, 0.55);
  animation: cd-orbit 18s linear infinite;
}
@keyframes cd-orbit { to { transform: rotate(360deg); } }
.composer-door-left:hover .cd-portrait {
  transform: scale(1.06);
  box-shadow: 0 8px 22px rgba(28, 50, 90, 0.24), 0 0 0 2px var(--baby);
}
.cd-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
}
.cd-h {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.cd-arrow {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--green);
  transition: transform .35s ease;
}
.composer-door-left:hover .cd-arrow {
  transform: translateY(3px);
}

/* ---- BRIDGE — animated thread + travelling bead ---- */
.composer-bridge {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.composer-bridge svg {
  width: 12px;
  height: 100%;
  display: block;
  overflow: visible;
}
.cmp-bead {
  filter: drop-shadow(0 0 4px rgba(44, 95, 141, 0.6));
  animation: cmp-bead-travel 3.4s cubic-bezier(.6,.05,.4,.95) infinite;
}
@keyframes cmp-bead-travel {
  0%,  10% { transform: translateY(0);    opacity: 0; }
  20%      { opacity: 1; }
  80%      { opacity: 1; }
  90%, 100%{ transform: translateY(88px); opacity: 0; }
}

/* When user focuses the input, bridge "fires" toward right */
.composer.is-active .cmp-bead {
  animation-duration: 1.6s;
  fill: var(--baby);
}

/* ---- RIGHT door — input field ---- */
.composer-door-right {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 16px 14px;
}
.cd-input-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(127, 179, 217, 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.composer.is-active .cd-input-row {
  background: #fff;
  border-color: var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 4px rgba(127, 179, 217, 0.22);
}
.cd-prefix {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--green);
  line-height: 1;
}
.cd-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  outline: 0;
  font: 500 0.96rem/1.4 var(--body);
  color: var(--ink) !important;
  caret-color: var(--green);
}
.cd-input::placeholder { color: transparent; }

/* Cycling placeholder — runs only when input is empty AND not focused */
.cd-placeholder {
  position: absolute;
  left: 38px;
  right: 56px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
  color: var(--ink-faint);
  font: 500 0.96rem/1.4 var(--body);
  white-space: nowrap;
}
.cd-ph {
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  animation: cd-ph-cycle 22s infinite;
}
.cd-ph-1 { animation-delay:  0s; }
.cd-ph-2 { animation-delay:  4.4s; }
.cd-ph-3 { animation-delay:  8.8s; }
.cd-ph-4 { animation-delay: 13.2s; }
.cd-ph-5 { animation-delay: 17.6s; }
@keyframes cd-ph-cycle {
  0%, 1%   { opacity: 0; transform: translateY(8px); }
  3%, 18%  { opacity: 1; transform: translateY(0); }
  20%, 100%{ opacity: 0; transform: translateY(-8px); }
}
/* Pause cycling when user starts typing or focuses */
.composer.is-active .cd-placeholder,
.composer.has-value .cd-placeholder {
  display: none;
}

/* ---- Send button (paper plane) ---- */
.cd-send {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.18,.9,.22,1.05), background .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 10px rgba(44, 95, 141, 0.25);
}
.cd-send svg {
  width: 16px;
  height: 16px;
  transform: translate(0, 0) rotate(-15deg);
  transition: transform .45s cubic-bezier(.18,.9,.22,1.05);
}
.cd-send:hover {
  background: var(--green-bright);
  transform: translateX(2px);
  box-shadow: 0 6px 14px rgba(44, 95, 141, 0.35);
}
.cd-send:hover svg {
  transform: translate(2px, -2px) rotate(-15deg);
}
.composer.has-value .cd-send {
  animation: cd-send-bob 1.6s ease-in-out infinite;
}
@keyframes cd-send-bob {
  0%, 100% { transform: translateY(0)   rotate(0); }
  50%      { transform: translateY(-2px) rotate(-2deg); }
}

/* Hint line below the input */
.cd-hint {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 6px;
  padding-left: 4px;
  transition: color .3s ease;
}
.composer.is-active .cd-hint {
  color: var(--green);
}

/* ---- Active / focus state on whole composer ---- */
.composer.is-active {
  border-color: var(--green);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 28px 70px -22px rgba(28, 50, 90, 0.30),
    0 0 0 4px rgba(127, 179, 217, 0.22);
  transform: translateY(-1px);
}
.composer.is-active .composer-aurora {
  opacity: 1;
  filter: blur(6px);
  transform: scale(1.04);
}

/* ---- Live badge below the composer ---- */
.composer-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 auto 1.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.cmp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2EBE7F;
  box-shadow: 0 0 0 0 rgba(46, 190, 127, 0.7);
  animation: cmp-dot-pulse 1.8s ease-out infinite;
}
@keyframes cmp-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(46, 190, 127, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(46, 190, 127, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(46, 190, 127, 0);   }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .composer {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 8px;
    padding: 12px;
    width: 100%;
  }
  .composer-bridge {
    transform: rotate(90deg);
    height: 18px;
    margin: -6px auto;
  }
  .composer-bridge svg { width: 60px; height: 12px; }
  .composer-door { padding: 12px; }
  .cd-portrait { width: 48px; height: 48px; }
  .cd-placeholder { left: 32px; right: 50px; font-size: 0.88rem; }
  .cd-input { font-size: 0.95rem; }
}

/* =====================================================================
   IRIDESCENT FIELD — global cosmic shimmer (v3.3)
   Canvas auto-injected by effects.js. Sits behind everything via a
   stacking-context on body. Mix-blend "screen" lifts the cyan tones.
   ===================================================================== */
body { isolation: isolate; }

#iridescenceCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  /* No blend mode on light bg — additive compositing happens INSIDE the
     canvas (globalCompositeOperation 'lighter'). Direct rgba is enough. */
  opacity: 0.85;
}

/* =====================================================================
   MATRIX HOLOGRAM PORTRAIT — v3.3
   Photo materializes from cyan code rain. Layered:
     · ground reflection (flat ellipse, pulsing)
     · frame: rain canvas + duotone photo + scanlines + glitch + brackets
     · emitter beam at base (suggests projection)
     · monospace meta-line below
   ===================================================================== */

.hologram {
  --hg-frame-w: 320px;
  --hg-frame-h: 420px;
  --hg-cyan: #6CD9F2;
  --hg-cyan-deep: #2C5F8D;
  --hg-bg: #061224;

  position: relative;
  margin: 3rem auto 1.5rem;
  width: var(--hg-frame-w);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Floor reflection (under the frame) */
.hg-ground {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  width: 86%;
  height: 32px;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(108, 217, 242, 0.55) 0%,
    rgba(108, 217, 242, 0.18) 35%,
    rgba(108, 217, 242, 0) 70%
  );
  filter: blur(4px);
  animation: hg-ground-pulse 3.4s ease-in-out infinite;
  z-index: 0;
}
@keyframes hg-ground-pulse {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scaleX(1);   }
  50%      { opacity: 0.55; transform: translateX(-50%) scaleX(1.05); }
}

/* Main projection frame */
.hg-frame {
  position: relative;
  width: 100%;
  height: var(--hg-frame-h);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 60%, #0B2348 0%, #051226 70%, #02060F 100%);
  box-shadow:
    0 0 0 1px rgba(108, 217, 242, 0.35),
    0 0 36px rgba(108, 217, 242, 0.20),
    0 24px 60px rgba(28, 50, 90, 0.35);
  isolation: isolate;
  /* gentle floating */
  animation: hg-float 6s ease-in-out infinite;
}
@keyframes hg-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Inner CRT vignette */
.hg-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* Rain canvas */
.hg-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

/* Duotone portrait — emerges from rain */
.hg-photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    url('images/portrait-square.jpg') center 22% / cover no-repeat;
  /* Greyscale + bright + cyan tint via hue-rotate */
  filter: grayscale(1) contrast(1.05) brightness(1.18) sepia(0.45) hue-rotate(160deg) saturate(1.6);
  opacity: 0.78;
  /* mask: fades top + sides so the photo dissolves into the rain */
  -webkit-mask: linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,0.35) 10%,
      #000 28%,
      #000 75%,
      rgba(0,0,0,0.6) 92%,
      transparent 100%);
  mask: linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,0.35) 10%,
      #000 28%,
      #000 75%,
      rgba(0,0,0,0.6) 92%,
      transparent 100%);
  mix-blend-mode: screen;
  animation: hg-photo-pulse 4.2s ease-in-out infinite;
}
@keyframes hg-photo-pulse {
  0%, 100% { opacity: 0.78; filter: grayscale(1) contrast(1.05) brightness(1.18) sepia(0.45) hue-rotate(160deg) saturate(1.6); }
  50%      { opacity: 0.92; filter: grayscale(1) contrast(1.10) brightness(1.30) sepia(0.5)  hue-rotate(168deg) saturate(1.8); }
}

/* Scanlines — repeating thin rgba bars */
.hg-scanlines {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(108, 217, 242, 0.08) 0px,
    rgba(108, 217, 242, 0.08) 1px,
    transparent 1px,
    transparent 4px
  );
  /* slow drift down so scanlines feel alive */
  animation: hg-scanlines-drift 6s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes hg-scanlines-drift {
  from { background-position: 0 0;   }
  to   { background-position: 0 4px; }
}

/* Chromatic glitch — fires at random intervals */
.hg-glitch {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    url('images/portrait-square.jpg') center 22% / cover no-repeat;
  filter: grayscale(1) brightness(1.4) hue-rotate(160deg) saturate(2);
  mix-blend-mode: screen;
  opacity: 0;
  animation: hg-glitch 7.3s steps(1, end) infinite;
}
@keyframes hg-glitch {
   0%,  92%, 100% { opacity: 0; transform: translate(0, 0); }
  92.5%           { opacity: 0.40; transform: translate(2px, -1px); filter: grayscale(1) brightness(1.4) hue-rotate(120deg) saturate(2); }
  93%             { opacity: 0.55; transform: translate(-3px, 1px); filter: grayscale(1) brightness(1.5) hue-rotate(190deg) saturate(2); }
  93.5%           { opacity: 0.30; transform: translate(1px, 0);    }
  94%             { opacity: 0;    transform: translate(0, 0);      }
}

/* Frame brackets — futuristic UI corners */
.hg-bracket {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.4px solid var(--hg-cyan);
  z-index: 6;
  pointer-events: none;
}
.hg-br-tl { top: 8px;    left: 8px;    border-right: 0; border-bottom: 0; }
.hg-br-tr { top: 8px;    right: 8px;   border-left: 0;  border-bottom: 0; }
.hg-br-bl { bottom: 8px; left: 8px;    border-right: 0; border-top: 0;    }
.hg-br-br { bottom: 8px; right: 8px;   border-left: 0;  border-top: 0;    }

/* HUD readouts */
.hg-hud {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 9.5px/1 'JetBrains Mono', 'Menlo', monospace;
  color: var(--hg-cyan);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(108, 217, 242, 0.45);
}
.hg-hud-tl { top: 16px; left: 30px; }
.hg-hud-tr { top: 16px; right: 30px; }
.hg-hud-key {
  padding: 2px 5px;
  border: 1px solid rgba(108, 217, 242, 0.55);
  border-radius: 3px;
  background: rgba(108, 217, 242, 0.10);
}
.hg-hud-val { color: rgba(225, 245, 255, 0.95); }
.hg-hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hg-cyan);
  box-shadow: 0 0 0 0 rgba(108, 217, 242, 0.7);
  animation: hg-dot-pulse 1.6s ease-out infinite;
}
@keyframes hg-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(108, 217, 242, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(108, 217, 242, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(108, 217, 242, 0);   }
}

/* Bottom emitter beam — soft cyan uplight */
.hg-emitter {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70%;
  height: 38%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(108, 217, 242, 0)   0%,
    rgba(108, 217, 242, 0.18) 60%,
    rgba(108, 217, 242, 0.45) 100%
  );
  filter: blur(2px);
  animation: hg-emitter-pulse 3.6s ease-in-out infinite;
}
@keyframes hg-emitter-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.55; }
}

/* Meta line under the projection */
.hg-meta {
  display: flex;
  gap: 1.4rem;
  margin-top: 1.2rem;
  font: 500 0.72rem/1 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hg-mk-1 { color: var(--green); }
.hg-mk-2 { color: var(--ink-soft); }

/* Mobile */
@media (max-width: 540px) {
  .hologram {
    --hg-frame-w: 260px;
    --hg-frame-h: 340px;
  }
  .hg-meta { gap: 0.8rem; font-size: 0.65rem; }
  .hg-hud  { font-size: 8.5px; }
  .hg-hud-tl { left: 18px; top: 12px; }
  .hg-hud-tr { right: 18px; top: 12px; }
}

/* =====================================================================
   GLOBAL JUSTIFY — readable structural rhythm for body copy (v3.4)
   ===================================================================== */
.hello-about p,
.about-experience .experience-tile > p,
.about-built .built-card p,
section > .container-narrow > p,
section > .container-narrow > ul > li,
.case-list li,
.faq-item p,
.disclaimer-block p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-justify: inter-word;
}

/* preserve centered context where the layout calls for it */
.hello-hero .hello-lede,
.hello-contact > .container-narrow > p,
.section-header p,
.tool-hero p {
  text-align: center;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* =====================================================================
   FLOATING HOLOGRAM v2 — refined per references (v3.4)
   No rectangle. Daniel as a duotone cyan apparition that floats,
   reflects on a glowing floor, and catches drifting light particles.
   ===================================================================== */

.holo-section {
  position: relative;
  padding: 4rem 0 2rem;
  display: flex;
  justify-content: center;
}

.holo-v2 {
  --hv-w: 380px;
  --hv-h: 520px;
  --hv-cyan: #6CD9F2;
  --hv-cyan-soft: #B8ECF7;
  --hv-glow: rgba(108, 217, 242, 0.55);

  position: relative;
  width: var(--hv-w);
  max-width: 92vw;
  height: var(--hv-h);
  isolation: isolate;
  pointer-events: none;
}

/* Soft dark portal — radial mask that fades to page bg, no hard frame */
.holo-portal {
  position: absolute;
  inset: -40px -80px;
  z-index: 0;
  background:
    radial-gradient(
      ellipse at 50% 55%,
      rgba(6, 18, 36, 0.86) 0%,
      rgba(6, 18, 36, 0.55) 28%,
      rgba(6, 18, 36, 0.20) 55%,
      rgba(6, 18, 36, 0)    78%
    );
  filter: blur(2px);
}

/* Particle aura canvases (back + front of figure) */
.holo-aura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.holo-aura-back  { z-index: 1; }
.holo-aura-front { z-index: 5; }

/* Floor — glowing cyan ellipse the figure stands on */
.holo-floor {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: 70%;
  height: 26px;
  z-index: 2;
  background: radial-gradient(
    ellipse at center,
    rgba(108, 217, 242, 0.85) 0%,
    rgba(108, 217, 242, 0.30) 35%,
    rgba(108, 217, 242, 0)    70%
  );
  filter: blur(5px);
  animation: holo-floor-pulse 3.4s ease-in-out infinite;
}
@keyframes holo-floor-pulse {
  0%, 100% { opacity: 0.95; transform: translateX(-50%) scaleX(1);    }
  50%      { opacity: 0.65; transform: translateX(-50%) scaleX(1.06); }
}

/* Floor reflection — flipped, blurred copy of the photo, very low alpha */
.holo-reflect {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 20%;
  z-index: 2;
  background:
    url('images/portrait-square.jpg') center 22% / cover no-repeat;
  filter: grayscale(1) blur(7px) brightness(1.3) sepia(0.5) hue-rotate(165deg) saturate(2.2);
  opacity: 0.22;
  transform: scaleY(-1);
  mix-blend-mode: screen;
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 92%);
          mask: linear-gradient(180deg, #000 0%, transparent 92%);
}

/* The figure — floating apparition */
.holo-figure {
  position: absolute;
  inset: 4% 14% 18% 14%;
  z-index: 3;
  /* gentle anti-gravity float */
  animation: holo-float-2 6.5s ease-in-out infinite;
  /* outer cyan halo */
  filter: drop-shadow(0 0 22px rgba(108, 217, 242, 0.55))
          drop-shadow(0 0 40px rgba(108, 217, 242, 0.20));
}
@keyframes holo-float-2 {
  0%, 100% { transform: translateY(0)     rotateZ(0); }
  50%      { transform: translateY(-12px) rotateZ(-0.4deg); }
}

/* Photo treatments — base + edge layer */
.holo-photo {
  position: absolute;
  inset: 0;
  background:
    url('images/portrait-square.jpg') center 22% / cover no-repeat;
  border-radius: 12% / 8%;
  -webkit-mask:
    radial-gradient(ellipse 70% 80% at 50% 48%, #000 55%, transparent 95%);
          mask:
    radial-gradient(ellipse 70% 80% at 50% 48%, #000 55%, transparent 95%);
}

/* Layer 1 — soft cyan duotone of the photo (the "body" of the apparition) */
.holo-photo-base {
  filter:
    grayscale(1)
    contrast(1.15)
    brightness(1.20)
    sepia(0.55)
    hue-rotate(168deg)
    saturate(2.4);
  opacity: 0.62;
  mix-blend-mode: screen;
  animation: holo-pulse-base 4.2s ease-in-out infinite;
}
@keyframes holo-pulse-base {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 0.78; }
}

/* Layer 2 — high-contrast edge layer (gives wireframe-feel outlines) */
.holo-photo-edge {
  filter:
    grayscale(1)
    contrast(2.4)
    brightness(1.5)
    sepia(0.6)
    hue-rotate(170deg)
    saturate(3);
  opacity: 0.45;
  mix-blend-mode: screen;
  animation: holo-pulse-edge 5.8s ease-in-out infinite;
}
@keyframes holo-pulse-edge {
  0%, 100% { opacity: 0.45; transform: translate(0, 0) scale(1); }
  50%      { opacity: 0.65; transform: translate(0.5px, 0) scale(1.005); }
}

/* Scanlines on the figure — subtle */
.holo-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(108, 217, 242, 0.10) 0,
    rgba(108, 217, 242, 0.10) 1px,
    transparent 1px,
    transparent 5px
  );
  animation: holo-scan-drift 8s linear infinite;
  mix-blend-mode: overlay;
  border-radius: inherit;
  -webkit-mask: radial-gradient(ellipse 70% 80% at 50% 48%, #000 55%, transparent 95%);
          mask: radial-gradient(ellipse 70% 80% at 50% 48%, #000 55%, transparent 95%);
}
@keyframes holo-scan-drift {
  from { background-position: 0 0;   }
  to   { background-position: 0 5px; }
}

/* Faint dot-grid laid over the figure for "data" feel */
.holo-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(108, 217, 242, 0.18) 0.6px, transparent 0.7px);
  background-size: 7px 7px;
  mix-blend-mode: screen;
  opacity: 0.6;
  animation: holo-grid-drift 12s linear infinite;
  -webkit-mask: radial-gradient(ellipse 70% 80% at 50% 48%, #000 55%, transparent 95%);
          mask: radial-gradient(ellipse 70% 80% at 50% 48%, #000 55%, transparent 95%);
}
@keyframes holo-grid-drift {
  from { background-position: 0 0;   }
  to   { background-position: 7px 7px; }
}

/* HUD readouts — small monospace tags floating in the surrounding space */
.holo-readouts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  font: 600 9.5px/1 'JetBrains Mono', 'Menlo', monospace;
  color: var(--hv-cyan);
  text-shadow: 0 0 6px rgba(108, 217, 242, 0.5);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hr-line {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}
.hr-tl { top: 8%;  left:  4%; }
.hr-tr { top: 8%;  right: 4%; }
.hr-bl { bottom: 22%; left:  4%; }
.hr-br { bottom: 22%; right: 4%; }
.hr-key {
  padding: 2px 5px;
  border: 1px solid rgba(108, 217, 242, 0.55);
  border-radius: 3px;
  background: rgba(108, 217, 242, 0.10);
}
.hr-val { color: rgba(225, 245, 255, 0.92); }
.hr-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hv-cyan);
  box-shadow: 0 0 0 0 rgba(108, 217, 242, 0.7);
  animation: holo-dot-pulse 1.7s ease-out infinite;
}
@keyframes holo-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(108, 217, 242, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(108, 217, 242, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(108, 217, 242, 0);   }
}

/* Mobile */
@media (max-width: 540px) {
  .holo-v2 {
    --hv-w: 280px;
    --hv-h: 380px;
  }
  .holo-readouts { font-size: 8.5px; }
}

/* =====================================================================
   ABOUT-PORTRAIT — stronger override so the photo shows on light theme
   ===================================================================== */
.about-portrait {
  width: 100% !important;
  aspect-ratio: 1/1;
  background:
    url('images/portrait-square.jpg') center 18% / cover no-repeat,
    linear-gradient(135deg, #FFFFFF 0%, var(--bg-tint) 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 14px 40px -18px rgba(28, 50, 90, 0.20),
    0 4px 12px rgba(28, 50, 90, 0.08) !important;
  position: relative;
  overflow: hidden;
}
/* subtle baby-blue glow rim */
.about-portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(127, 179, 217, 0.25);
}

/* =====================================================================
   HOLOGRAM v2 — tighter HEAD-ONLY mask, no background wall (v3.5)
   ===================================================================== */
.holo-figure {
  /* re-frame so the head sits centered */
  inset: 6% 18% 22% 18% !important;
}

/* Tight ellipse mask: only the head/upper-shoulders area */
.holo-photo,
.holo-scanlines,
.holo-grid {
  -webkit-mask:
    radial-gradient(ellipse 52% 60% at 50% 38%,
      #000 38%,
      rgba(0,0,0,0.85) 55%,
      rgba(0,0,0,0.40) 75%,
      transparent 95%) !important;
          mask:
    radial-gradient(ellipse 52% 60% at 50% 38%,
      #000 38%,
      rgba(0,0,0,0.85) 55%,
      rgba(0,0,0,0.40) 75%,
      transparent 95%) !important;
}

/* tighten the photo crop so the FACE is centered in frame */
.holo-photo {
  background-position: center 12% !important;
  background-size: 130% auto !important;
  background-repeat: no-repeat !important;
}

/* darker base so background/wall fades to cyan mist via screen blend */
.holo-photo-base {
  filter:
    grayscale(1)
    contrast(1.32)
    brightness(0.95)
    sepia(0.50)
    hue-rotate(168deg)
    saturate(2.6) !important;
  opacity: 0.55 !important;
}
.holo-photo-edge {
  filter:
    grayscale(1)
    contrast(2.6)
    brightness(1.1)
    sepia(0.60)
    hue-rotate(170deg)
    saturate(3.2) !important;
  opacity: 0.55 !important;
}

/* Reflection now mirrors only the head zone too */
.holo-reflect {
  -webkit-mask:
    linear-gradient(180deg, #000 0%, transparent 88%),
    radial-gradient(ellipse 52% 60% at 50% 38%, #000 60%, transparent 95%) !important;
          mask:
    linear-gradient(180deg, #000 0%, transparent 88%),
    radial-gradient(ellipse 52% 60% at 50% 38%, #000 60%, transparent 95%) !important;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  background-position: center 12% !important;
  background-size: 130% auto !important;
}

/* =====================================================================
   HOLOGRAM v3 — INLINE MODE (upper-left of about-hero, page-bg face)
   No dark portal, no rectangle frame. Just the floating cyan head
   isolated against the page's baby-blue background, ringed by particles
   and a soft floor glow.
   ===================================================================== */

/* When the hologram is rendered INSIDE about-hero (inline mode),
   it inherits the about-portrait's slot — square aspect, full width. */
.about-hero .holo.holo-inline {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  --hv-w: 100%;
  --hv-h: auto;
  margin: 0;
}

/* Kill the dark portal in inline mode — page bg shows through */
.holo-inline .holo-portal {
  display: none !important;
}

/* When inline, the figure occupies a tighter, vertically-centered area */
.holo-inline .holo-figure {
  inset: 8% 14% 18% 14% !important;
}

/* PHOTO TREATMENT FOR LIGHT PAGE BG
   ---------------------------------
   Use mix-blend-mode 'multiply' so the lighter areas of the photo
   let the page bg through, while darker areas tint deep cyan/navy.
   Net effect: a cyan duotone face that *belongs* on the light bg,
   just like the reference picture. */
.holo-inline .holo-photo-base {
  filter:
    grayscale(1)
    contrast(1.45)
    brightness(0.85)
    sepia(0.65)
    hue-rotate(170deg)
    saturate(3.0) !important;
  opacity: 0.92 !important;
  mix-blend-mode: multiply !important;
  animation: holo-pulse-base-light 4.6s ease-in-out infinite !important;
}
@keyframes holo-pulse-base-light {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1.00; }
}

/* Edge layer (cyan accent highlights) — keep screen blend so highlights pop */
.holo-inline .holo-photo-edge {
  filter:
    grayscale(1)
    contrast(2.4)
    brightness(1.45)
    sepia(0.55)
    hue-rotate(172deg)
    saturate(3.4) !important;
  opacity: 0.55 !important;
  mix-blend-mode: screen !important;
}

/* TIGHTER head-only mask — no shoulders, no wall — just the FACE oval */
.holo-inline .holo-photo,
.holo-inline .holo-scanlines,
.holo-inline .holo-grid {
  -webkit-mask:
    radial-gradient(ellipse 38% 46% at 50% 36%,
      #000 35%,
      rgba(0,0,0,0.85) 55%,
      rgba(0,0,0,0.30) 80%,
      transparent 100%) !important;
          mask:
    radial-gradient(ellipse 38% 46% at 50% 36%,
      #000 35%,
      rgba(0,0,0,0.85) 55%,
      rgba(0,0,0,0.30) 80%,
      transparent 100%) !important;
}

/* Photo crop tuned to face (top half of portrait JPG) */
.holo-inline .holo-photo {
  background-position: center 8% !important;
  background-size: 145% auto !important;
}

/* Reflection — also head-only, very low alpha, near-bottom of slot */
.holo-inline .holo-reflect {
  bottom: 6% !important;
  height: 16% !important;
  background-position: center 8% !important;
  background-size: 145% auto !important;
  filter: grayscale(1) blur(6px) brightness(0.85) sepia(0.55) hue-rotate(170deg) saturate(2.8) !important;
  opacity: 0.18 !important;
  mix-blend-mode: multiply !important;
  -webkit-mask:
    linear-gradient(180deg, #000 0%, transparent 90%),
    radial-gradient(ellipse 38% 46% at 50% 36%, #000 70%, transparent 100%) !important;
          mask:
    linear-gradient(180deg, #000 0%, transparent 90%),
    radial-gradient(ellipse 38% 46% at 50% 36%, #000 70%, transparent 100%) !important;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Floor glow — subtle, on light bg less visible — slightly bigger blur */
.holo-inline .holo-floor {
  bottom: 15% !important;
  width: 56% !important;
  height: 22px !important;
  background: radial-gradient(
    ellipse at center,
    rgba(44, 95, 141, 0.50) 0%,
    rgba(108, 217, 242, 0.25) 35%,
    rgba(108, 217, 242, 0)    70%
  ) !important;
  filter: blur(6px) !important;
}

/* HUD readouts — only TL + TR in inline mode (compact) */
.holo-inline .hr-bl,
.holo-inline .hr-br { display: none; }

.holo-inline .holo-readouts {
  /* Make HUD visible on light bg — darker color, no glow halo */
  color: var(--green) !important;
}
.holo-inline .hr-line { color: var(--green); text-shadow: none !important; }
.holo-inline .hr-key {
  border-color: rgba(44, 95, 141, 0.45) !important;
  background: rgba(127, 179, 217, 0.16) !important;
  color: var(--green) !important;
}
.holo-inline .hr-val { color: var(--ink) !important; }
.holo-inline .hr-dot { background: var(--green) !important; }

/* Outer glow on the figure: dimmer cyan, but visible on light */
.holo-inline .holo-figure {
  filter: drop-shadow(0 0 18px rgba(44, 95, 141, 0.45))
          drop-shadow(0 0 36px rgba(108, 217, 242, 0.30)) !important;
}

/* =====================================================================
   HOLOGRAM v3.1 — head fitting + dark-halo removal (final tune)
   The dark "circle" behind the head was the photo's own wall background
   bleeding through the soft mask edges and being multiplied onto the
   page bg. Two fixes: (a) HARDER mask cliff so wall never reaches the
   visible edge, (b) brighten the base photo so multiply yields cyan,
   not navy. Plus the chin is brought up by tighter crop.
   ===================================================================== */

/* Tighter, higher, harder face-only mask */
.holo-inline .holo-photo,
.holo-inline .holo-scanlines,
.holo-inline .holo-grid {
  -webkit-mask:
    radial-gradient(ellipse 30% 36% at 50% 33%,
      #000 55%,
      rgba(0,0,0,0.55) 75%,
      transparent 92%) !important;
          mask:
    radial-gradient(ellipse 30% 36% at 50% 33%,
      #000 55%,
      rgba(0,0,0,0.55) 75%,
      transparent 92%) !important;
}

/* Crop tighter — face higher, chin hits the bottom of the mask cleanly */
.holo-inline .holo-photo {
  background-position: center 4% !important;
  background-size: 165% auto !important;
}

/* Brighten the BASE so multiply tints cyan (not navy).
   Reducing contrast also keeps wall midtones from going opaque. */
.holo-inline .holo-photo-base {
  filter:
    grayscale(1)
    contrast(1.15)
    brightness(1.18)
    sepia(0.55)
    hue-rotate(172deg)
    saturate(2.4) !important;
  opacity: 0.85 !important;
  /* Switch to screen blend on light bg so dark wall *fades* rather
     than multiplying into a navy halo. Screen makes blacks clear. */
  mix-blend-mode: screen !important;
}

/* Edge highlights — slightly subdued so the silhouette stays clean */
.holo-inline .holo-photo-edge {
  filter:
    grayscale(1)
    contrast(2.1)
    brightness(1.55)
    sepia(0.50)
    hue-rotate(174deg)
    saturate(3.0) !important;
  opacity: 0.55 !important;
  mix-blend-mode: screen !important;
}

/* Reflection — also re-cropped + lighter, screen blend so no dark band */
.holo-inline .holo-reflect {
  bottom: 8% !important;
  height: 12% !important;
  background-position: center 4% !important;
  background-size: 165% auto !important;
  filter: grayscale(1) blur(7px) brightness(1.2) sepia(0.50) hue-rotate(172deg) saturate(2.6) !important;
  opacity: 0.18 !important;
  mix-blend-mode: screen !important;
  -webkit-mask:
    linear-gradient(180deg, #000 0%, transparent 90%),
    radial-gradient(ellipse 30% 36% at 50% 33%, #000 70%, transparent 100%) !important;
          mask:
    linear-gradient(180deg, #000 0%, transparent 90%),
    radial-gradient(ellipse 30% 36% at 50% 33%, #000 70%, transparent 100%) !important;
}

/* Drop-shadow: remove navy darkening — just a soft cyan halo */
.holo-inline .holo-figure {
  filter:
    drop-shadow(0 0 14px rgba(127, 200, 240, 0.55))
    drop-shadow(0 0 28px rgba(127, 200, 240, 0.25)) !important;
}

/* =====================================================================
   HOLOGRAM v3.2 — final perfectionism (full face: forehead → chin)
   The mask was too short vertically; chin & mouth were getting clipped.
   This version:
     · Crops the photo less aggressively so the head fits the slot
     · Mask is taller and centered slightly lower so it covers the
       complete face from hairline to under the chin
     · Falloff is smoother — no hard mouth-cutoff
   ===================================================================== */

/* Mask: vertical 56% covers forehead → chin cleanly */
.holo-inline .holo-photo,
.holo-inline .holo-scanlines,
.holo-inline .holo-grid {
  -webkit-mask:
    radial-gradient(ellipse 36% 46% at 50% 42%,
      #000 50%,
      rgba(0,0,0,0.85) 70%,
      rgba(0,0,0,0.35) 86%,
      transparent 100%) !important;
          mask:
    radial-gradient(ellipse 36% 46% at 50% 42%,
      #000 50%,
      rgba(0,0,0,0.85) 70%,
      rgba(0,0,0,0.35) 86%,
      transparent 100%) !important;
}

/* Photo crop — slightly looser so the chin sits inside the mask */
.holo-inline .holo-photo {
  background-position: center 7% !important;
  background-size: 148% auto !important;
}

/* Reflection — match the new mask geometry */
.holo-inline .holo-reflect {
  bottom: 6% !important;
  height: 14% !important;
  background-position: center 7% !important;
  background-size: 148% auto !important;
  -webkit-mask:
    linear-gradient(180deg, #000 0%, transparent 90%),
    radial-gradient(ellipse 36% 46% at 50% 42%, #000 65%, transparent 100%) !important;
          mask:
    linear-gradient(180deg, #000 0%, transparent 90%),
    radial-gradient(ellipse 36% 46% at 50% 42%, #000 65%, transparent 100%) !important;
}

/* =====================================================================
   PORTRAIT v4 — site-context recreation (final)
   Position kept (upper-left). Particles kept. Float kept.
   Photo treatment is now NATURAL, with a baby-blue halo, white avatar
   ring, and soft floor shadow. No cyan duotone, no scanlines, no HUD.
   ===================================================================== */

/* Hide all the hologram artefacts in inline mode */
.holo-inline .holo-photo-edge,
.holo-inline .holo-scanlines,
.holo-inline .holo-grid,
.holo-inline .holo-readouts,
.holo-inline .holo-reflect {
  display: none !important;
}

/* The figure becomes a clean circular avatar */
.holo-inline .holo-figure {
  inset: 8% 8% 14% 8% !important;
  filter:
    drop-shadow(0 14px 28px rgba(28, 50, 90, 0.18))
    drop-shadow(0 0 36px rgba(127, 179, 217, 0.32)) !important;
  /* Float kept — same animation, calm bob */
}

/* Photo: natural color, slight site-tint, framed in a circle */
.holo-inline .holo-photo,
.holo-inline .holo-photo-base {
  border-radius: 50% !important;
  background-position: center 22% !important;
  background-size: cover !important;
  /* Strip the entire mask — we're using border-radius now */
  -webkit-mask: none !important;
          mask: none !important;
  /* Natural treatment: subtle warmth balance + tiny saturation tweak */
  filter: contrast(1.04) saturate(1.05) brightness(1.02) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  /* White avatar ring */
  box-shadow:
    inset 0 0 0 4px #ffffff,
    inset 0 0 0 5px rgba(127, 179, 217, 0.55) !important;
  /* Calm pulse instead of duotone shimmer */
  animation: portrait-breath 5.6s ease-in-out infinite !important;
}
@keyframes portrait-breath {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.012); }
}

/* Soft baby-blue floor halo under the avatar */
.holo-inline .holo-floor {
  bottom: 9% !important;
  width: 70% !important;
  height: 18px !important;
  background: radial-gradient(
    ellipse at center,
    rgba(127, 179, 217, 0.55) 0%,
    rgba(127, 179, 217, 0.18) 40%,
    rgba(127, 179, 217, 0)    75%
  ) !important;
  filter: blur(7px) !important;
}

/* Faint outer halo ring around the avatar — site-cyan, not hologram-cyan */
.holo-inline::after {
  content: '';
  position: absolute;
  inset: 6% 6% 12% 6%;
  border-radius: 50%;
  border: 1px dashed rgba(127, 179, 217, 0.45);
  pointer-events: none;
  animation: portrait-ring-spin 24s linear infinite;
}
@keyframes portrait-ring-spin { to { transform: rotate(360deg); } }

/* Make sure the holo container has no leftover dark portal */
.holo-inline .holo-portal { display: none !important; }

/* =====================================================================
   SERVICES PAGE — booking form (v3.5)
   Site-context layout · checkout submit button
   ===================================================================== */

.booking-section {
  padding: 1rem 0 4rem;
}
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.booking-step {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  border-radius: 14px;
  padding: 2rem 1.75rem 1.5rem 1.75rem;
  margin: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 6px 18px -10px rgba(28, 50, 90, 0.10);
}
.booking-step legend {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 600;
  padding: 0;
  margin: 0;
  display: block;
}
.step-num {
  position: absolute;
  top: -14px;
  left: 18px;
  width: 36px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  border-radius: 6px;
  font: 700 0.78rem/1 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 10px rgba(44, 95, 141, 0.20);
}
.step-help {
  color: var(--ink-soft);
  font-size: 0.96rem;
  margin: 0.4rem 0 1rem;
}
.step-foot {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0.85rem 0 0;
}

/* Step 1 — language pick */
.lang-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.lang-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.lang-tile input { position: absolute; opacity: 0; pointer-events: none; }
.lang-tile:hover { border-color: var(--baby); transform: translateY(-1px); }
.lang-tile:has(input:checked) {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(127, 179, 217, 0.22);
  background: rgba(127, 179, 217, 0.06);
}
.lt-flag {
  display: inline-flex;
  border-radius: 4px;
  overflow: hidden;
}
.lt-flag .flag-icon { width: 30px; height: auto; }
.lt-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* Step 2 — upload */
.upload-tile {
  display: block;
  position: relative;
  border: 1.4px dashed rgba(127, 179, 217, 0.65);
  border-radius: 12px;
  background: rgba(127, 179, 217, 0.06);
  cursor: pointer;
  padding: 0;
  transition: background .25s, border-color .25s;
}
.upload-tile:hover { border-color: var(--green); background: rgba(127, 179, 217, 0.10); }
.upload-tile:has(input[type="file"]:disabled) {
  cursor: default;
  border-style: solid;
  border-color: rgba(127, 179, 217, 0.32);
  background: rgba(127, 179, 217, 0.045);
}
.upload-tile:has(input[type="file"]:disabled):hover {
  border-color: rgba(127, 179, 217, 0.32);
  background: rgba(127, 179, 217, 0.045);
}
.upload-tile:has(input[type="file"]:disabled) .upload-icon {
  opacity: 0.72;
}
.upload-tile input[type="file"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.upload-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
}
.upload-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 179, 217, 0.16);
  border-radius: 50%;
  color: var(--green);
}
.upload-icon svg { width: 20px; height: 20px; }
.upload-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.upload-text strong {
  font-size: 0.96rem;
  color: var(--ink);
  font-weight: 600;
}
.upload-hint {
  font-size: 0.8rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.upload-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 1.2rem 1rem 1.2rem;
}
.upload-file {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', 'Menlo', monospace;
}

/* Step 3 — textarea */
.booking-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.9rem 1rem;
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  font: 400 0.96rem/1.55 var(--body);
  resize: vertical;
}
.booking-form textarea:focus {
  outline: none;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(127, 179, 217, 0.22) !important;
}

/* Step 4 — duration cards */
.dur-pick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.dur-card {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.6rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  display: block;
}
.dur-card input { position: absolute; opacity: 0; pointer-events: none; }
.dur-card:hover { border-color: var(--baby); transform: translateY(-1px); }
.dur-card:has(input:checked) {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(127, 179, 217, 0.20), 0 12px 30px -16px rgba(28,50,90,0.20);
}
.dur-len {
  display: inline-block;
  font: 700 0.78rem/1 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(127, 179, 217, 0.14);
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  margin-bottom: 0.7rem;
}
.dur-name {
  font-family: var(--display);
  font-size: 1.18rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dur-desc {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}
.dur-price {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.dur-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font: 600 0.66rem/1 'Inter', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--green);
  color: #fff;
  padding: 0.32rem 0.55rem;
  border-radius: 4px;
}
.dur-tag-deep { background: var(--baby); color: var(--green); }

/* =====================================================================
   CHECKOUT SUBMIT BUTTON
   Site-native payment CTA for Stripe / PayPal checkout paths.
   ===================================================================== */
.booking-submit {
  margin-top: 0.5rem;
  text-align: center;
}

.btn-checkout {
  --checkout-fill: #B8D4EA;
  --checkout-fill-hover: #DCEAF6;
  --checkout-ink: #1B2A4E;

  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.6rem;
  background: var(--checkout-fill);
  color: var(--checkout-ink);
  border: 2px solid var(--checkout-ink);
  border-radius: 6px;
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 var(--checkout-ink);
  transition: transform .15s ease, box-shadow .15s ease, background .25s ease;
  text-decoration: none;
}
.btn-checkout:hover {
  background: var(--checkout-fill-hover);
  color: var(--checkout-ink);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--checkout-ink);
}
.btn-checkout:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--checkout-ink);
}
.bg-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--checkout-ink);
}
.bg-icon svg { width: 100%; height: 100%; }
.bg-arrow {
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform .25s;
}
.btn-checkout:hover .bg-arrow { transform: translateX(3px); }

.booking-meta {
  margin-top: 1rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.powered-by {
  display: inline-block;
  margin-left: 1rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.powered-by strong {
  color: #FF90E8;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Booking disclaimer */
.booking-disclaimer {
  margin-top: 2.5rem;
  padding: 1.2rem 1.4rem;
  background: rgba(255, 200, 80, 0.06);
  border: 1px solid rgba(255, 200, 80, 0.30);
  border-radius: 10px;
}
.booking-disclaimer p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* mobile */
@media (max-width: 640px) {
  .lang-pick { grid-template-columns: 1fr; }
  .dur-pick  { grid-template-columns: 1fr; }
  .booking-step { padding: 1.75rem 1.25rem 1.25rem; }
  .btn-checkout { width: 100%; justify-content: center; }
}

/* ===== Tiny "Book a 1:1" CTA card to drop into about.html under Get in touch ===== */
.book-cta {
  margin-top: 1.4rem;
  padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--bg-tint) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.book-cta-text { flex: 1 1 240px; }
.book-cta-text h3 {
  margin: 0 0 0.2rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.book-cta-text p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* =====================================================================
   DURATION CARDS — interactive sparklers (v3.6)
   3D push-out · blue-grey gradient · cyan back-illumination ·
   constant cyan vertical sparkle-rain inside each card
   ===================================================================== */

.dur-pick {
  /* give the parent enough perspective for a 3D push-out feel */
  perspective: 1200px;
  perspective-origin: 50% 30%;
}

.dur-card {
  position: relative;
  isolation: isolate;
  /* override the previous flat transition with 3D-aware easing */
  transform: translateY(0) translateZ(0) rotateX(0);
  transform-style: preserve-3d;
  background:
    linear-gradient(170deg,
      #FFFFFF 0%,
      #F4F8FC 50%,
      #E5EDF7 100%) !important;
  transition:
    transform .55s cubic-bezier(.2, .9, .25, 1.05),
    border-color .35s ease,
    box-shadow .55s ease,
    background .35s ease !important;
}

/* Outer halo — the cyan illumination cast on the page behind the card */
.dur-glow {
  position: absolute;
  inset: -28px;
  z-index: -1;
  border-radius: 28px;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(60% 70% at 50% 35%, rgba(108, 217, 242, 0.35), transparent 70%),
    radial-gradient(80% 70% at 50% 90%, rgba(127, 179, 217, 0.28), transparent 70%);
  filter: blur(12px);
  transition: opacity .5s ease, filter .5s ease, transform .5s ease;
  animation: dur-glow-breath 4.6s ease-in-out infinite;
}
@keyframes dur-glow-breath {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.03); }
}

/* Sparkle canvas — sits between the glow and the content */
.dur-sparkle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.92;
  /* clip to card shape */
  -webkit-mask: linear-gradient(180deg,
                rgba(0,0,0,0.85) 0%,
                #000 18%,
                #000 86%,
                rgba(0,0,0,0.65) 100%);
          mask: linear-gradient(180deg,
                rgba(0,0,0,0.85) 0%,
                #000 18%,
                #000 86%,
                rgba(0,0,0,0.65) 100%);
}

/* keep all card content above the sparkle layer */
.dur-card .dur-inner {
  position: relative;
  z-index: 2;
}

/* HOVER state — push-out, intensify glow + sparkles */
.dur-card:hover {
  transform: translateY(-6px) translateZ(0) rotateX(2deg) !important;
  border-color: var(--baby) !important;
  box-shadow:
    0 0 0 4px rgba(127, 179, 217, 0.28),
    0 24px 50px -14px rgba(28, 50, 90, 0.22),
    0 0 70px rgba(108, 217, 242, 0.40) !important;
}
.dur-card:hover .dur-glow {
  opacity: 1;
  filter: blur(8px);
}

/* SELECTED state — push-out furthest, ring + maximum cyan halo */
.dur-card:has(input:checked) {
  transform: translateY(-10px) translateZ(0) rotateX(0) !important;
  border-color: var(--green) !important;
  background:
    linear-gradient(170deg,
      #FFFFFF 0%,
      #ECF2F8 55%,
      #DCEAF6 100%) !important;
  box-shadow:
    0 0 0 5px rgba(127, 179, 217, 0.38),
    0 32px 64px -10px rgba(28, 50, 90, 0.28),
    0 0 100px rgba(108, 217, 242, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
.dur-card:has(input:checked) .dur-glow {
  opacity: 1;
  filter: blur(6px);
  animation-duration: 3s;
}
.dur-card:has(input:checked) .dur-sparkle {
  opacity: 1;
}

/* Bottom shimmer line on selected card (subtle "edge of the spotlight") */
.dur-card:has(input:checked)::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -3px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(108, 217, 242, 0.65) 50%,
    transparent 100%);
  border-radius: 2px;
  filter: blur(1px);
  animation: dur-shimmer 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dur-shimmer {
  0%, 100% { opacity: 0.55; transform: scaleX(0.85); }
  50%      { opacity: 1;    transform: scaleX(1.05); }
}

/* Tag (Most popular / Recommended) — give it a small glow on selected */
.dur-card:has(input:checked) .dur-tag {
  box-shadow: 0 0 14px rgba(108, 217, 242, 0.55);
}

/* Mobile — moderate the perspective so it doesn't tilt awkwardly */
@media (max-width: 640px) {
  .dur-pick { perspective: 800px; }
  .dur-card:hover                 { transform: translateY(-4px) !important; }
  .dur-card:has(input:checked)    { transform: translateY(-7px) !important; }
}

/* =====================================================================
   TYPOGRAPHY v2 — finalisation (v3.7)
   · Tabular numerals site-wide so €50, €100, ~800, 30 min, 60 min line up
   · Headings & numerics use Plus Jakarta Sans
   · Brand name (.brand) in nav: lighter trust-blue with a subtle gradient
   · Credentials line stays as-is (per request)
   ===================================================================== */

/* Tabular + lining numerals everywhere — keeps prices, dates, % aligned */
html {
  font-feature-settings: "ss01", "cv11", "calt", "kern";
  font-variant-numeric: tabular-nums lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings: enforce display family + slight tightening */
h1, h2, h3, h4, h5, h6,
.hello-h1, .hello-tool-content h2,
.about-hero h1, .about-experience h2,
.about-built h2, .booking-step legend,
.dur-name, .step-num, .dur-len,
.tier-price-num, .bundle-price-new {
  font-family: var(--display) !important;
  letter-spacing: -0.018em;
  font-feature-settings: "ss01", "cv11", "calt", "kern", "tnum", "lnum";
}

/* Display-grade numerals — bigger numerics get the ss feature set */
.dur-price, .tier-price-num, .float-card .num,
.ps-num, .bundle-price-new {
  font-family: var(--display) !important;
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
  letter-spacing: -0.025em;
}

/* Mono for HUD, badges and small data labels */
.hr-line, .hg-hud, .hg-meta, .holo-readouts,
.cd-prefix, .step-num, .dur-len,
.exp-period, .powered-by, .upload-file,
.thumb-tag, .booking-meta, .cd-hint {
  font-family: 'JetBrains Mono', 'Menlo', monospace !important;
  font-feature-settings: "ss20", "tnum", "lnum";
}

/* =====================================================================
   BRAND NAME — lighter trust-blue with a subtle gradient
   Visual: from baby-blue on the left to deep trust-blue on the right
   ===================================================================== */
.brand {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  /* Three-stop gradient: baby blue → mid trust → brand-deep */
  background: linear-gradient(105deg,
    #6CA8D2 0%,
    #4A85B5 38%,
    #2C5F8D 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  /* tiny shimmer-on-hover for delight */
  transition: filter .35s ease;
}
.brand:hover {
  filter: brightness(1.10) saturate(1.10);
}
/* Credentials line — stays exactly as-is (user request) */
.brand .credentials {
  /* Reset the text-fill so the muted ink color shows correctly on the SUB-text */
  -webkit-text-fill-color: var(--ink-soft) !important;
  color: var(--ink-soft) !important;
  background: none !important;
  font-family: var(--body) !important;
  font-feature-settings: "tnum", "lnum";
}

/* Footer brand block — same lighter-blue treatment */
.footer-brand {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  background: linear-gradient(105deg, #6CA8D2 0%, #4A85B5 40%, #2C5F8D 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.footer-brand .credentials {
  -webkit-text-fill-color: var(--ink-soft) !important;
  color: var(--ink-soft) !important;
  background: none !important;
}

/* =====================================================================
   DURATION CARD — premium redesign (v3.8)
   Tag → floating ribbon at top-center (overhangs the card edge).
   Layout → centered: time pill · title · description · divider · €price.
   Selected → ribbon glows, gradient ring, pulse line.
   ===================================================================== */

/* Add breathing room above so the floating ribbon has space */
.dur-pick {
  padding-top: 22px !important;
}

/* Card resets — center the inner column */
.dur-card {
  padding: 36px 1.6rem 1.8rem !important;
  overflow: visible !important; /* let the ribbon poke out */
}
.dur-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
}

/* ---- Floating ribbon tag (top-center, overhangs the edge) ---- */
.dur-card .dur-tag {
  position: absolute !important;
  top: -16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  padding: 0.45rem 0.95rem !important;
  font: 700 0.62rem/1 'Inter', sans-serif !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  background: linear-gradient(135deg, #5193C2 0%, #2C5F8D 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow:
    0 6px 18px rgba(44, 95, 141, 0.32),
    0 0 0 3px rgba(127, 179, 217, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.45) inset !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  /* tiny star icon before the text */
}
.dur-card .dur-tag::before {
  content: '★';
  font-size: 0.92em;
  color: rgba(180, 230, 250, 0.95);
  text-shadow: 0 0 8px rgba(108, 217, 242, 0.65);
}
/* The "deep" variant (60-min) gets a softer gradient */
.dur-card .dur-tag.dur-tag-deep {
  background: linear-gradient(135deg, #7FB3D9 0%, #4A85B5 100%) !important;
  color: #fff !important;
}

/* ---- Time pill — small, monospace, eyebrow-style ---- */
.dur-card .dur-len {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0.32rem 0.7rem !important;
  border-radius: 6px !important;
  background: rgba(127, 179, 217, 0.18) !important;
  color: var(--green) !important;
  font: 700 0.7rem/1 'JetBrains Mono', 'Menlo', monospace !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* ---- Title — display font, hero size ---- */
.dur-card .dur-name {
  font-family: var(--display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

/* ---- Description ---- */
.dur-card .dur-desc {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
  margin: 4px 0 0 !important;
  max-width: 28ch;
}

/* ---- Glowing divider before the price ---- */
.dur-card .dur-inner::before {
  content: '';
  display: block;
  width: 70%;
  height: 1px;
  margin: 8px auto 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(108, 217, 242, 0.6) 50%,
    transparent 100%);
  /* faint glow underneath */
  box-shadow: 0 0 12px rgba(108, 217, 242, 0.35);
  transform: scaleX(0.85);
  transition: transform .45s ease, opacity .45s ease;
  opacity: 0.75;
}
.dur-card:has(input:checked) .dur-inner::before {
  transform: scaleX(1.05);
  opacity: 1;
}

/* ---- Hero price block — € as small superscript, big numerals ---- */
.dur-card .dur-price {
  display: block !important;
  font-family: var(--display) !important;
  font-size: 3.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  margin: 4px 0 0 !important;
  font-variant-numeric: tabular-nums lining-nums;
}
/* Tiny € superscript */
.dur-card .dur-price::first-letter {
  font-size: 0.50em;
  vertical-align: 0.65em;
  color: var(--green);
  font-weight: 600;
  margin-right: 2px;
  letter-spacing: 0;
}
/* "per session" subtitle below price */
.dur-card .dur-price::after {
  content: 'per session';
  display: block;
  margin-top: 6px;
  font: 600 0.65rem/1 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-feature-settings: "tnum","lnum";
}

/* ---- Selected state — ribbon glow + pulse ---- */
.dur-card:has(input:checked) .dur-tag {
  box-shadow:
    0 8px 24px rgba(44, 95, 141, 0.45),
    0 0 0 4px rgba(127, 179, 217, 0.30),
    0 0 24px rgba(108, 217, 242, 0.50),
    0 1px 0 rgba(255, 255, 255, 0.55) inset !important;
  animation: dur-tag-pulse 2.6s ease-in-out infinite;
}
@keyframes dur-tag-pulse {
  0%, 100% { transform: translateX(-50%) scale(1);    }
  50%      { transform: translateX(-50%) scale(1.04); }
}
.dur-card:has(input:checked) .dur-len {
  background: rgba(108, 217, 242, 0.30) !important;
  color: var(--green-bright) !important;
}
.dur-card:has(input:checked) .dur-price {
  color: var(--green) !important;
}

/* ---- Subtle dot-grid background inside the card (premium feel) ---- */
.dur-card .dur-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(
    circle, rgba(127, 179, 217, 0.10) 0.6px, transparent 0.7px);
  background-size: 14px 14px;
  z-index: -1;
  opacity: 0.5;
}

/* Mobile — slightly smaller ribbon + hero number */
@media (max-width: 640px) {
  .dur-card { padding: 32px 1.25rem 1.5rem !important; }
  .dur-card .dur-name  { font-size: 1.3rem !important; }
  .dur-card .dur-price { font-size: 2.6rem !important; }
}

/* "per session" suffix — localized via :lang() */
html[lang="hr"] .dur-card .dur-price::after { content: 'po sesiji'; }
html[lang="de"] .dur-card .dur-price::after { content: 'pro Sitzung'; }

/* =====================================================================
   STEP NUMBERS — premium coin tokens (v3.9)
   Replace flat green chip with a gradient blue coin · cyan halo · inner
   ring · accent dot. Sits on top-left of every booking-step fieldset.
   ===================================================================== */
.booking-step .step-num {
  position: absolute !important;
  top: -22px !important;
  left: 24px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(140deg, #6CA8D2 0%, #4A85B5 45%, #2C5F8D 100%) !important;
  color: #fff !important;
  font: 700 1.02rem/1 'JetBrains Mono', 'Menlo', monospace !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 10px 22px -6px rgba(28, 50, 90, 0.40),
    0 0 0 4px rgba(127, 179, 217, 0.20),
    0 0 28px rgba(108, 217, 242, 0.32) !important;
  isolation: isolate;
  z-index: 5;
  /* gentle breath so the coin feels alive without being noisy */
  animation: step-num-breath 5.4s ease-in-out infinite;
}
@keyframes step-num-breath {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.04); }
}
/* Inner glass ring */
.booking-step .step-num::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  pointer-events: none;
}
/* Accent dot — small cyan signal */
.booking-step .step-num::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6CD9F2;
  box-shadow: 0 0 0 0 rgba(108, 217, 242, 0.7);
  animation: step-num-dot 1.8s ease-out infinite;
}
@keyframes step-num-dot {
  0%   { box-shadow: 0 0 0 0   rgba(108, 217, 242, 0.7); }
  70%  { box-shadow: 0 0 0 6px rgba(108, 217, 242, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(108, 217, 242, 0);   }
}
/* Add a touch more padding inside the booking-step so the coin sits cleanly */
.booking-step {
  padding-top: 2.4rem !important;
}

/* =====================================================================
   DURATION CARDS — bottom-align prices via flex (v3.9)
   Description grows to absorb extra space; divider+price stick to bottom.
   Net effect: €50 and €100 line up on the same horizontal across cards.
   ===================================================================== */

/* Cards stretch to grid-row height */
.dur-pick { align-items: stretch; }
.dur-card { display: flex !important; }
.dur-card .dur-inner {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100%;
}

/* Description absorbs extra vertical space */
.dur-card .dur-desc {
  flex: 1 0 auto !important;
  margin-top: 6px !important;
}

/* Hide the old top-of-inner divider (it was being placed before the time pill) */
.dur-card .dur-inner::before {
  display: none !important;
}

/* New divider sits ABOVE the price — universally aligned */
.dur-card .dur-price {
  position: relative;
  margin-top: auto !important; /* push price block to the bottom */
  padding-top: 18px;
  width: 100%;
}
.dur-card .dur-price::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(108, 217, 242, 0.65) 50%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(108, 217, 242, 0.35);
  transform: scaleX(0.85);
  opacity: 0.78;
  transition: transform .45s ease, opacity .45s ease;
}
.dur-card:has(input:checked) .dur-price::before {
  transform: scaleX(1.05);
  opacity: 1;
}

/* =====================================================================
   POST PAGE — single article rich layout (v3.10)
   ===================================================================== */

.post {
  position: relative;
}

/* ---- Hero ---- */
.post-hero {
  padding: 5rem 0 2.5rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 80% at 50% -20%, rgba(127, 179, 217, 0.18), transparent 60%),
    var(--bg);
}
.post-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.78rem/1 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}
.post-cat {
  color: var(--green);
  background: rgba(127, 179, 217, 0.16);
  padding: 0.32rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid rgba(127, 179, 217, 0.32);
}
.post-cat:hover { color: var(--green-bright); border-color: var(--green); }
.post-sep { opacity: 0.5; }
.post-date, .post-read { color: var(--ink-soft); }

.post-h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 1.2rem;
}

.post-lede {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}
.post-lede strong { color: var(--ink); font-weight: 600; }

.post-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--line);
}
.post-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    url('images/portrait-square.jpg') center 18% / cover no-repeat,
    var(--bg-tint);
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(28, 50, 90, 0.12), 0 0 0 1px rgba(127, 179, 217, 0.45);
}
.post-byline-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.byline-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.96rem;
  letter-spacing: -0.01em;
}
.byline-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ---- Body ---- */
.post-body {
  padding: 3rem 0 4rem;
}
.post-body p {
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--ink);
  margin: 0 0 1.1rem;
  text-align: justify;
  hyphens: auto;
}
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body em { color: var(--ink-soft); }

.post-section-title {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 1rem 0 0.4rem;
  font-weight: 700;
}
.post-section-intro {
  color: var(--ink-soft) !important;
  font-style: italic;
  margin-bottom: 2.5rem !important;
}

/* ---- Section cards ---- */
.post-section {
  margin: 2rem 0 2.5rem;
  position: relative;
}
.post-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.post-section-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(140deg, #6CA8D2 0%, #4A85B5 50%, #2C5F8D 100%);
  color: #fff;
  font: 700 0.78rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 6px 14px -4px rgba(28, 50, 90, 0.30),
    0 0 0 3px rgba(127, 179, 217, 0.18);
}
.post-section-num-sigma {
  font-family: var(--display) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
}
.post-section-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.post-section h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  flex: 1;
}

/* ---- Callouts ---- */
.post-callout {
  position: relative;
  margin: 1.3rem 0;
  padding: 1.1rem 1.3rem 1rem;
  border-radius: 10px;
  border-left: 3px solid var(--baby);
  background: rgba(127, 179, 217, 0.06);
}
.post-callout.post-callout-key {
  border-left-color: var(--green);
  background: rgba(127, 179, 217, 0.10);
}
.post-callout.post-callout-warn {
  border-left-color: #E0A93C;
  background: rgba(255, 200, 80, 0.07);
}
.post-callout.post-callout-arrow {
  border-left-color: var(--green-bright);
  background: linear-gradient(90deg, rgba(127, 179, 217, 0.14), rgba(127, 179, 217, 0.04));
}
.callout-tag {
  display: inline-block;
  font: 700 0.66rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.post-callout.post-callout-warn .callout-tag { color: #B47B14; }
.post-callout p {
  margin: 0 !important;
  font-size: 0.96rem !important;
  color: var(--ink-soft) !important;
  text-align: left !important;
}
.post-callout p strong { color: var(--ink); }

/* ---- Block quote ---- */
.post-quote {
  margin: 1.5rem 0;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--green);
  background: rgba(255,255,255,0.55);
  border-radius: 0 8px 8px 0;
  font-family: var(--display);
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
  letter-spacing: -0.005em;
}
.post-quote cite {
  display: block;
  margin-top: 0.7rem;
  font: 600 0.72rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-style: normal;
}

/* ---- Bullets ---- */
.post-bullets {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.4rem;
}
.post-bullets li {
  position: relative;
  padding: 0.7rem 0 0.7rem 28px;
  border-bottom: 1px dashed var(--line);
  color: var(--ink);
  line-height: 1.7;
  font-size: 1.0rem;
  text-align: justify;
}
.post-bullets li:last-child { border-bottom: 0; }
.post-bullets li::before {
  content: '›';
  position: absolute;
  left: 6px;
  top: 0.65rem;
  color: var(--green);
  font-weight: 700;
  font-size: 1.1rem;
}
.post-bullets-strong li::before { content: '✓'; }

/* ---- Formula ---- */
.post-formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 1.2rem 1rem;
  margin: 1rem 0 0.4rem;
  background: linear-gradient(135deg, #fff 0%, var(--bg-soft) 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 18px -10px rgba(28, 50, 90, 0.12);
}
.pf-part {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.pf-op {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--green);
}
.pf-result {
  color: var(--green) !important;
  text-shadow: 0 0 12px rgba(127, 179, 217, 0.3);
}
.post-formula-note {
  text-align: center !important;
  font-size: 0.82rem !important;
  color: var(--ink-faint) !important;
  margin: 0 0 1.5rem !important;
}

/* ---- Summary table ---- */
.post-section-table { margin-top: 3rem; }
.post-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px -10px rgba(28, 50, 90, 0.10);
}
.post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.post-table thead {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-bright) 100%);
  color: #fff;
}
.post-table th {
  padding: 0.85rem 1rem;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-transform: uppercase;
  text-align: left;
}
.post-table td {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink);
}
.post-table tbody tr:nth-child(even) { background: var(--bg-soft); }
.post-table td strong {
  font-family: var(--display);
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.01em;
}

/* ---- Foot: sources + disclaimer ---- */
.post-foot {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.post-foot-h {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.8rem;
  font-weight: 700;
}
.post-sources {
  padding-left: 1.4rem;
  margin: 0 0 1.6rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.post-sources li {
  margin-bottom: 0.35rem;
  padding-left: 0.3rem;
}
.post-disclaimer {
  margin-top: 1.5rem;
  padding: 1.2rem 1.4rem;
  background: rgba(255, 200, 80, 0.06);
  border: 1px solid rgba(255, 200, 80, 0.30);
  border-radius: 10px;
}
.post-disclaimer p {
  margin: 0 !important;
  font-size: 0.86rem !important;
  line-height: 1.65;
  color: var(--ink-soft) !important;
  text-align: left !important;
}
.post-reviewed {
  font: 600 0.72rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- CTA at bottom of post ---- */
.post-cta {
  margin-top: 2.5rem;
  padding: 1.6rem 1.6rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--bg-tint) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.post-cta-text { flex: 1 1 280px; }
.post-cta-text h3 {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.post-cta-text p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }

/* =====================================================================
   POST INDEX (article.html) — list of post cards
   ===================================================================== */
.post-list-section {
  padding: 2rem 0 5rem;
}
.post-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.4rem;
}

.post-card {
  padding: 0;
  overflow: hidden;
  transition: transform .35s, box-shadow .45s, border-color .35s;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--baby); }
.pc-link {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.5rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.pc-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font: 600 0.74rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.85rem;
}
.pc-cat {
  color: var(--green);
  background: rgba(127, 179, 217, 0.14);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(127, 179, 217, 0.30);
}
.pc-sep { opacity: 0.5; }
.pc-h {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 0.7rem;
}
.pc-excerpt {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
  flex-grow: 1;
}
.pc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 1rem;
}
.pc-tag {
  font: 600 0.7rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.45rem;
  background: rgba(127, 179, 217, 0.10);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.pc-cta {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--green);
  margin-top: auto;
}
.pc-cta-soft {
  font: 600 0.78rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: auto;
}

/* Featured (top) card — wider, more prominent */
.post-card-featured {
  margin-bottom: 1rem;
}
.post-card-featured .pc-link {
  padding: 2.2rem 2rem;
}
.post-card-featured .pc-h {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0.4rem 0 1rem;
}
.post-card-featured .pc-excerpt {
  font-size: 1.04rem;
  max-width: 60ch;
}

/* Newsletter bottom-of-list block */
.post-list-newsletter {
  margin-top: 4rem;
  padding: 2rem 1.6rem 2.2rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
}
.post-list-newsletter h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.post-list-newsletter p {
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}

/* =====================================================================
   COMMERCIAL SITE STRUCTURE — homepage, tools hub, profile page
   ===================================================================== */
.site-flow {
  background:
    radial-gradient(80% 50% at 50% -10%, rgba(184, 212, 234, 0.48), transparent 62%),
    linear-gradient(180deg, #F4F8FC 0%, #FFFFFF 46%, #ECF2F8 100%);
}

.section-kicker {
  margin: 0 0 0.7rem;
  color: var(--green);
  font: 800 0.72rem/1 var(--body);
  letter-spacing: 0;
  text-transform: uppercase;
}

.money-hero,
.tools-hero,
.profile-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 7rem) 1.75rem 4rem;
}

.money-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.money-hero-inner,
.tools-hero-grid,
.profile-hero-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.74fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.money-hero-copy h1,
.profile-copy h1,
.tools-hero h1 {
  max-width: 12ch;
  margin: 0 0 1.1rem;
  font-size: clamp(2.7rem, 6vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.money-hero-lede,
.tools-hero .services-lede,
.profile-copy .services-lede {
  max-width: 720px;
  color: var(--ink-soft);
  font-size: clamp(1.04rem, 1.55vw, 1.22rem);
  line-height: 1.75;
}

.hero-actions,
.profile-actions,
.tool-strip-actions,
.tool-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.btn-secondary {
  background: #fff;
  color: var(--green);
  border: 1px solid rgba(44, 95, 141, 0.24);
  box-shadow: none;
}

.btn-secondary:hover {
  color: var(--green-bright);
  border-color: var(--green);
  box-shadow: 0 10px 28px rgba(44, 95, 141, 0.08);
}

.signal-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
}

.signal-row div,
.money-command-panel,
.lane-card,
.tool-strip-card,
.tool-product-card,
.tool-roadmap-panel,
.cv-grid article,
.timeline-item,
.expertise-grid article,
.profile-credential-card {
  border: 1px solid rgba(127, 179, 217, 0.38);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
}

.signal-row div {
  padding: 0.95rem;
  border-radius: 10px;
}

.signal-row dt {
  color: var(--green);
  font: 800 1.35rem/1 var(--display);
  letter-spacing: -0.03em;
}

.signal-row dd {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

.money-command-panel {
  padding: 1.2rem;
  border-radius: 14px;
}

.panel-person {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.95rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.panel-photo,
.profile-photo-main {
  background:
    url('images/portrait-square.jpg') center 18% / cover no-repeat,
    linear-gradient(135deg, var(--baby-soft), #fff);
}

.panel-photo {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px solid rgba(44, 95, 141, 0.2);
}

.panel-person strong,
.panel-person span {
  display: block;
}

.panel-person span {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.panel-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.panel-list a {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 0.8rem;
  padding: 0.85rem;
  border-radius: 10px;
  background: rgba(236, 242, 248, 0.72);
  color: inherit;
}

.panel-list span {
  color: var(--green);
  font-weight: 800;
  grid-row: 1 / span 2;
}

.panel-list strong,
.panel-list em {
  display: block;
  font-style: normal;
}

.panel-list em {
  grid-column: 2;
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

.market-lanes,
.featured-tool-strip,
.authority-band,
.latest-insight,
.newsletter-band,
.tool-library,
.cv-snapshot,
.timeline-section,
.expertise-section,
.built-proof,
.boundary-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.lane-grid,
.tool-grid,
.cv-grid,
.timeline-grid,
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.lane-card,
.tool-product-card,
.cv-grid article,
.timeline-item,
.expertise-grid article {
  border-radius: 14px;
  padding: 1.35rem;
}

.lane-mark,
.tool-status,
.cv-grid span,
.timeline-item span,
.built-tag {
  display: inline-flex;
  margin-bottom: 0.75rem;
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.lane-card h3,
.tool-product-card h2,
.cv-grid strong,
.timeline-item h3,
.expertise-grid h3 {
  margin: 0 0 0.65rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.18rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.lane-card p,
.tool-product-card p,
.cv-grid p,
.timeline-item p,
.expertise-grid p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.58;
}

.lane-card a {
  display: inline-flex;
  margin-top: 0.6rem;
  font-weight: 700;
}

.tool-strip-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.tool-strip-card h2,
.authority-grid h2,
.newsletter-band h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.035em;
}

.authority-band {
  background:
    linear-gradient(90deg, rgba(220, 234, 246, 0.7), rgba(255,255,255,0.74)),
    radial-gradient(70% 90% at 100% 50%, rgba(127,179,217,0.22), transparent 65%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.authority-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
}

.newsletter-band {
  text-align: center;
}

.newsletter-band p {
  color: var(--ink-soft);
}

.footer-note,
.seller-note {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-top: 0.75rem;
}

.seller-note {
  font-size: 0.8rem;
}

.tools-hero {
  background:
    radial-gradient(65% 72% at 90% 12%, rgba(127, 179, 217, 0.28), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.8), rgba(236,242,248,0.86));
  border-bottom: 1px solid var(--line);
}

.tool-roadmap-panel {
  border-radius: 14px;
  padding: 1.25rem;
}

.tool-roadmap-panel strong,
.tool-roadmap-panel span {
  display: block;
}

.tool-roadmap-panel span {
  margin-top: 0.45rem;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}

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

.tool-product-card ul {
  padding-left: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.tool-product-card.is-live {
  border-color: rgba(44, 95, 141, 0.4);
}

.profile-hero {
  background:
    radial-gradient(70% 80% at 8% 14%, rgba(127,179,217,0.25), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(244,248,252,0.92));
  border-bottom: 1px solid var(--line);
}

.profile-photo-stack {
  position: relative;
  min-height: 460px;
}

.profile-photo-main {
  width: min(440px, 100%);
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  border: 1px solid rgba(44, 95, 141, 0.22);
  box-shadow: var(--shadow-lg);
}

.profile-credential-card {
  position: absolute;
  left: clamp(1rem, 6vw, 3.5rem);
  bottom: 1.2rem;
  max-width: 320px;
  border-radius: 14px;
  padding: 1rem;
}

.profile-credential-card strong,
.profile-credential-card span {
  display: block;
}

.profile-credential-card span {
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
  margin-top: 0.28rem;
}

.cv-grid article {
  min-height: 100%;
}

.timeline-grid,
.expertise-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  top: 1.45rem;
  right: 1.45rem;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--baby);
  box-shadow: 0 0 0 5px rgba(127,179,217,0.14);
}

.boundary-section {
  background: #fff;
}

@media (max-width: 980px) {
  .money-hero-inner,
  .tools-hero-grid,
  .profile-hero-grid,
  .tool-strip-card,
  .authority-grid {
    grid-template-columns: 1fr;
  }

  .lane-grid,
  .cv-grid {
    grid-template-columns: 1fr;
  }

  .signal-row,
  .tool-grid,
  .timeline-grid,
  .expertise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .money-hero,
  .tools-hero,
  .profile-hero {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .signal-row,
  .tool-grid,
  .timeline-grid,
  .expertise-grid {
    grid-template-columns: 1fr;
  }

  .tool-strip-actions,
  .tool-card-actions,
  .hero-actions,
  .profile-actions {
    flex-direction: column;
  }

  .profile-photo-stack {
    min-height: auto;
    padding-bottom: 7.5rem;
  }
}

/* ---------- Altoria calculator library ---------- */
.altoria-home-hero .money-hero-copy h1,
.altoria-tool-hero h1,
.software-hero h1,
.calculator-hero h1 {
  max-width: 13ch;
}

.calculation-desk-panel {
  position: relative;
}

.calc-receipt-head {
  display: grid;
  gap: 0.25rem;
  padding: 0 0 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.calc-receipt-head span,
.calc-panel-head span {
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.calc-receipt-head strong,
.calc-panel-head strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0;
}

.calc-tool-grid .tool-product-card {
  min-height: 360px;
}

.calculator-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 7rem) 1.75rem 2.5rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 20%, rgba(127, 179, 217, 0.22), transparent 32%),
    radial-gradient(circle at 86% 12%, rgba(44, 95, 141, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(244, 248, 252, 0.96), rgba(236, 242, 248, 0.72));
}

.calculator-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.calculator-hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.4rem, 5.4vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.calc-context-card,
.calc-panel {
  border: 1px solid rgba(127, 179, 217, 0.38);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
}

.calc-context-card {
  display: grid;
  gap: 0.5rem;
  padding: 1.15rem;
  border-radius: 12px;
}

.calc-context-card strong {
  color: var(--ink);
  font-family: var(--display);
}

.calc-context-card span {
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}

.calculator-workbench {
  padding: 3rem 1.75rem;
  background: #fff;
}

.calc-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(300px, 1.08fr);
  gap: 1.25rem;
  align-items: start;
}

.calc-panel {
  border-radius: 14px;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.calc-panel-head {
  display: grid;
  gap: 0.3rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.calc-inputs {
  display: grid;
  gap: 0.9rem;
}

.calc-inputs label {
  display: grid;
  gap: 0.35rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.calc-inputs input,
.calc-inputs select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 248, 252, 0.88);
  color: var(--ink);
  font: 600 0.96rem/1 var(--body);
  padding: 0.75rem 0.85rem;
}

.calc-inputs input:focus,
.calc-inputs select:focus {
  outline: 2px solid rgba(127, 179, 217, 0.36);
  border-color: var(--green);
  background: #fff;
}

.calc-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.65rem !important;
  color: var(--ink-soft) !important;
  font-weight: 600 !important;
}

.calc-check input {
  width: 18px;
  min-height: 18px;
  margin-top: 0.15rem;
}

.calc-error {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(166, 83, 71, 0.25);
  border-radius: 8px;
  background: rgba(166, 83, 71, 0.08);
  color: #7f332b;
}

.calc-result {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 248, 252, 0.92)),
    repeating-linear-gradient(180deg, transparent 0 32px, rgba(127, 179, 217, 0.05) 32px 33px);
}

.calc-result .calc-panel-head strong {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--green);
  letter-spacing: -0.04em;
}

.calc-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0;
}

.calc-result-grid div {
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.calc-result-grid dt {
  margin: 0 0 0.35rem;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calc-result-grid dd {
  margin: 0;
  color: var(--ink);
  font: 800 1.15rem/1.15 var(--display);
  letter-spacing: -0.02em;
}

.calc-formula {
  margin: 1rem 0 0;
  padding: 0.9rem;
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
  background: rgba(44, 95, 141, 0.07);
  color: var(--ink-soft);
  line-height: 1.55;
}

.calc-content {
  padding: 3.5rem 1.75rem 4.5rem;
}

.calc-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.calc-content article {
  max-width: 760px;
}

.calc-content h2,
.calc-content h3 {
  margin-top: 0;
}

.calc-content p {
  color: var(--ink-soft);
  line-height: 1.75;
}

.related-tools {
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(236, 242, 248, 0.65);
}

.related-tools h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.related-tools a {
  padding: 0.72rem 0.8rem;
  border: 1px solid rgba(127, 179, 217, 0.32);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}

.related-tools a:hover {
  color: var(--green);
  border-color: var(--green);
}

.compact-footer {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

@media (max-width: 900px) {
  .calculator-hero-grid,
  .calc-layout,
  .calc-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .calculator-hero,
  .calculator-workbench,
  .calc-content {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .calc-result-grid {
    grid-template-columns: 1fr;
  }
}