/* ════════════════════════════════════════════════════════════
   polish.css — visible premium refinements layered over the brand.
   Additive override layer (loaded last). Identity-preserving:
   dark + vibrant + Syne. Tuned to be easy on the eyes.
   ════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. HERO HEADLINE — bigger, bolder, with a living
   nacre/pearl sheen (helmi = pearl). The morph JS
   animates `filter`, so we ONLY touch background-clip
   + size here — never `filter` — so the morph stays intact.
   ───────────────────────────────────────────── */
.section-hero__headline {
  font-size: clamp(4rem, 8.4vw, 7.75rem);  /* fits the longest morph phrase, slightly bolder presence */
  font-weight: var(--weight-bold, 700);
  letter-spacing: -0.04em;
}

/* Keep the morph text solid + visible (it is split into per-char spans, so a
   background-clip gradient would render transparent). A soft neon halo gives
   the premium pearl-glow read on brand, without touching the morph's filter. */
.section-hero__headline,
.hero-morph-char {
  color: #ffffff;
  text-shadow:
    0 0 28px rgba(130, 195, 255, 0.45),
    0 0 64px rgba(150, 110, 255, 0.22);
}

/* Gentle depth halo behind the whole headline block (no JS filter here). */
.section-hero__text {
  filter: drop-shadow(0 10px 46px rgba(110, 170, 255, 0.16));
}

/* "we" refined as a quiet lead-in */
.hero-headline-fixed {
  opacity: 0.78;
  letter-spacing: 0.16em;
}

/* Tag row: more refined, premium spacing + subtle accent */
.section-hero__tags {
  letter-spacing: 0.12em;
}
.section-hero__tags .tag {
  transition: color .3s ease, text-shadow .3s ease;
}
.section-hero__tags .tag:hover {
  color: var(--neon-cyan, #00E5FF);
  text-shadow: 0 0 18px rgba(0, 229, 255, .5);
}

/* ─────────────────────────────────────────────
   2. NAV CTAs — quote button matches the outline style;
   login is a compact icon button (→ app.helmies.fi/login).
   ───────────────────────────────────────────── */
.nav__cta--icon {
  width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease;
}
.nav__cta--icon:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
}
.nav__cta--icon svg { width: 18px; height: 18px; }

/* Language switcher */
.nav__lang {
  display: flex; align-items: center; gap: .3rem; margin-right: .35rem;
  font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .08em;
}
.nav__lang-link { color: rgba(255,255,255,.55); padding: .2rem .15rem; transition: color .25s ease, opacity .25s ease; }
.nav__lang-link:hover { color: #fff; }
.nav__lang-link.is-active { color: #fff; font-weight: 700; }
.nav__lang-sep { color: rgba(255,255,255,.25); }

/* ─────────────────────────────────────────────
   3. GLOBAL MICRO-POLISH — links, pills, focus.
   ───────────────────────────────────────────── */
.cf-pill, .tag, .pill {
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.cf-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px -4px rgba(0, 229, 255, .35);
}

/* A touch more air + premium contrast on body copy (easy on the eyes) */
:root {
  --hp-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ─────────────────────────────────────────────
   4. SECTION HEADINGS — tie the premium glow through
   the whole scroll (subtle, brand-keyed, easy on eyes).
   ───────────────────────────────────────────── */
.section-tech__headline,
.team-person__name {
  text-shadow: 0 0 34px rgba(130, 195, 255, 0.22);
}

/* Testimonial quote mark: a touch more presence */
.card-testimonial__quote-mark {
  text-shadow: 0 0 40px rgba(150, 110, 255, 0.3);
}

/* Section deep glass cards: crisper edge + soft lift on hover */
.card-service,
.card-work,
.card-testimonial {
  transition: transform .4s var(--hp-ease, ease), box-shadow .4s ease, border-color .4s ease;
}
.card-service:hover,
.card-work:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6), 0 0 32px -8px rgba(99, 139, 255, .3);
}

@media (prefers-reduced-motion: reduce) {
  .hero-morph-text, .hero-morph-layer { animation: none; }
}