/* ─────────────────────────────────────────────────────────────
   Milina Consulting — styles.css
   Quiet Swiss luxury. Cormorant Garamond + Raleway.
   ───────────────────────────────────────────────────────────── */

/* ─── Tokens ─────────────────────────────────────────────────── */
:root {
  --bg:             #07090a;
  --surface:        #0d1014;
  --surface-raised: #121820;
  --border:         rgba(200, 169, 110, 0.16);
  --border-hover:   rgba(200, 169, 110, 0.35);
  --gold:           #c8a96e;
  --gold-muted:     #9a7d4f;
  --green:          #7aab7a;
  --green-muted:    #5a8a5a;
  --text:           #f0ece4;
  --text-secondary: #8a8880;
  --text-muted:     #5a5856;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Raleway', system-ui, sans-serif;

  --nav-h: 72px;
  --wrap:  1160px;
  --ease:  260ms ease;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

/* ─── Grain overlay ──────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.028;
  mix-blend-mode: screen;
}

/* ─── Background layer (parallax) ───────────────────────────── */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 70% at 12% 10%, rgba(122,171,122,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 88% 85%, rgba(122,171,122,0.11) 0%, transparent 55%),
    radial-gradient(ellipse 65% 80% at 50% 50%, rgba(122,171,122,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 70% 40% at 82% 4%, rgba(200,169,110,0.06) 0%, transparent 55%);
  transform: translateY(calc(var(--scroll-y, 0) * -0.12px));
  will-change: transform;
}

/* ─── Starfield ──────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(200,169,110,0.18) 1px, transparent 1px),
    radial-gradient(circle, rgba(122,171,122,0.22) 1px, transparent 1px),
    radial-gradient(circle, rgba(122,171,122,0.14) 1px, transparent 1px);
  background-size: 320px 320px, 500px 500px, 720px 720px;
  background-position: 60px 120px, 200px 380px, 480px 90px;
  animation: star-drift 90s linear infinite;
  opacity: 0.80;
}
@keyframes star-drift {
  0%   { background-position: 60px 120px, 200px 380px, 480px 90px; }
  100% { background-position: 380px 440px, 700px 880px, 1200px 810px; }
}

/* ─── Atmospheric aura ───────────────────────────────────────── */
.hero__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero__aura::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 171, 122, 0.09) 0%, transparent 70%);
  filter: blur(70px);
  top: -18%;
  right: -12%;
  animation: aura-a 22s ease-in-out infinite alternate;
}
.hero__aura::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 169, 110, 0.045) 0%, transparent 70%);
  filter: blur(90px);
  bottom: -10%;
  left: 8%;
  animation: aura-b 30s ease-in-out infinite alternate;
}
@keyframes aura-a {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0.65; }
  100% { transform: translate(-70px, 55px) scale(1.18); opacity: 1; }
}
@keyframes aura-b {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0.45; }
  100% { transform: translate(55px, -40px) scale(1.22); opacity: 0.80; }
}

/* ─── Layout ─────────────────────────────────────────────────── */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 48px;
}

/* ─── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

/* ─── Nav ────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--ease), border-color var(--ease), backdrop-filter 400ms ease;
}
.nav.scrolled {
  background: rgba(7, 9, 10, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(200, 169, 110, 0.10);
}
.nav__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text);
  flex-shrink: 0;
}
.nav__logo-img {
  height: 34px;
  width: auto;
  display: block;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}
.nav__links a {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--ease);
}
.nav__links a:hover { color: var(--text); }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.lang-toggle button {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--ease);
  padding: 4px 0;
}
.lang-toggle button.active { color: var(--gold); }
.lang-toggle button:hover  { color: var(--text-secondary); }
.lang-toggle .sep { color: var(--text-muted); font-size: 0.55rem; }

/* ─── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  filter: brightness(0.5) saturate(0.7);
  pointer-events: none;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
    rgba(7, 9, 10, 0.00)  0%,
    rgba(7, 9, 10, 0.60) 65%,
    rgba(7, 9, 10, 0.85) 100%);
}
.hero__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 32px;
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 600px;
  flex-shrink: 0;
}
.hero__kicker {
  margin-bottom: 28px;
  color: var(--gold);
  opacity: 0.55;
  letter-spacing: 0.28em;
}
.hero__headline {
  font-size: clamp(3.4rem, 7vw, 5.8rem);
  font-weight: 300;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.hero__headline em {
  font-style: italic;
  color: var(--gold);
  opacity: 0.75;
}
.hero__subline {
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 440px;
  margin-bottom: 52px;
  line-height: 1.9;
}
.hero__deco {
  font-family: var(--font-display);
  font-size: clamp(14rem, 24vw, 22rem);
  font-weight: 300;
  color: var(--green);
  opacity: 0.09;
  line-height: 0.82;
  letter-spacing: -0.06em;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
  position: relative;
  right: -1vw;
  animation: m-pulse 9s ease-in-out infinite alternate;
}
@keyframes m-pulse {
  0%   { opacity: 0.09; }
  100% { opacity: 0.20; }
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 40px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border: 1px solid var(--border-hover);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
.btn:hover {
  border-color: var(--gold);
  background: rgba(200, 169, 110, 0.06);
  transform: translateY(-2px);
}
.btn--gold {
  border-color: var(--gold);
  color: var(--gold);
}
.btn--gold:hover {
  background: var(--gold);
  color: var(--bg);
}

/* ─── Sections ───────────────────────────────────────────────── */
.site-section { padding: 104px 0; }
.contact-section {
  border-top: none;
  background: linear-gradient(180deg, rgba(13,16,20,0.75) 0%, rgba(7,9,10,0.55) 60%);
  position: relative;
}
.contact-section::before {
  content: '';
  position: absolute;
  top: 0; left: 48px; right: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), rgba(200,169,110,0.3) 50%, var(--border), transparent);
}

/* ─── Network ────────────────────────────────────────────────── */
#network {
  background: linear-gradient(180deg, rgba(13,16,20,0.8) 0%, var(--bg) 100%);
  position: relative;
}
#network::before {
  /* Seitenlaenge des Quadrats. Die Raute ist das um 45 Grad gedrehte
     Quadrat, ihre Diagonale ist also Seite * 1.414. */
  --d: clamp(6.2rem, 10.9vw, 10.9rem);
  content: '';
  position: absolute;
  /* Ueberstand der Diagonale ueber die Box ausgleichen, damit die Raute
     dort steht, wo vorher das Schriftzeichen stand. */
  right: calc(3vw - var(--d) * 0.2071);
  top: 50%;
  width: var(--d);
  height: var(--d);
  border: clamp(2px, 0.45vw, 5px) solid var(--gold);
  box-sizing: border-box;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  animation: diamond-float 6.5s infinite;
}
/* Fruehere Fassung nutzte das Zeichen ◇. Dessen Zeilenbox ist hoeher als
   breit, die Drehung lief also um einen Punkt neben der Rautenmitte und
   die Raute sprang beim Schleifenende sichtbar weg. Ein echtes Quadrat
   dreht um die eigene Mitte, 90 Grad sind dadurch exakt deckungsgleich.
   Der Schwung entsteht aus einer einzigen Kurve mit Ueberschwinger
   (cubic-bezier mit y > 1), nicht aus gesetzten Umkehrpunkten. */
@keyframes diamond-float {
  0% {
    transform: translateY(-50%) rotate(45deg) scale(1);
    opacity: 0.07;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  61% {
    transform: translateY(-48%) rotate(51deg) scale(1.045);
    opacity: 0.14;
    animation-timing-function: cubic-bezier(0.2, 1.42, 0.45, 1);
  }
  100% {
    transform: translateY(-50%) rotate(135deg) scale(1);
    opacity: 0.07;
  }
}
.network-intro {
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
}
.network-intro .section__intro {
  font-size: 1.05rem;
  color: var(--text-secondary);
  font-weight: 300;
  margin-top: 10px;
}

.network-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  background: none;
  border: none;
  position: relative;
  z-index: 1;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: background var(--ease), box-shadow var(--ease), transform var(--ease);
  border: 1px solid var(--border);
}
.card--active {
  cursor: pointer;
  min-height: 340px;
  border-color: rgba(200, 169, 110, 0.10);
  overflow: hidden;
}
.card--active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(200,170,110,0.13), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card--active:hover::before {
  opacity: 1;
}
.card--active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(200,169,110,0.07), transparent 70%);
  opacity: 0;
  transition: transform 800ms ease;
  pointer-events: none;
}
.card--active:hover {
  background: var(--surface-raised);
  box-shadow:
    0 16px 72px rgba(0, 0, 0, 0.70),
    inset 0 0 0 1px rgba(200, 169, 110, 0.40),
    0 0 80px rgba(62, 122, 82, 0.05);
  transform: translateY(-4px);
  z-index: 2;
  border-color: rgba(200, 169, 110, 0.30);
}
.card--active:hover::after {
  opacity: 1;
}
.card--disabled {
  opacity: 0.30;
  pointer-events: none;
  padding: 28px 32px;
  min-height: auto;
  background: transparent;
  border-color: rgba(200, 169, 110, 0.06);
}
.card__name--redacted {
  filter: blur(4.5px);
  user-select: none;
  opacity: 0.5;
}
.card__badge {
  font-size: 0.60rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.card__name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
  margin-top: 2px;
}
.card--disabled .card__name {
  color: var(--text-muted);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
}
.card__desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.8;
  flex: 1;
}
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 10px;
  transition: gap var(--ease);
}
.card--active:hover .card__cta { gap: 16px; }
.card__lock {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.35em;
  margin-top: 6px;
}

/* ─── Network about ──────────────────────────────────────────── */
.network-about {
  margin-bottom: 48px;
  max-width: 560px;
  border-left: 2px solid rgba(122, 171, 122, 0.28);
  padding-left: 22px;
}
.network-about__text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.9;
  margin-bottom: 18px;
  font-weight: 300;
}

/* ─── Contact referral ───────────────────────────────────────── */
.contact-referral {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.7;
}

/* ─── Contact ────────────────────────────────────────────────── */
.contact-inner { max-width: 560px; }
.contact-heading {
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  margin-bottom: 20px;
}
.contact-heading::before {
  content: '◆';
  display: block;
  font-family: var(--font-body);
  font-size: 0.48rem;
  color: var(--green);
  opacity: 0.52;
  margin-bottom: 18px;
  letter-spacing: 0;
}
.contact-subline {
  color: var(--text-secondary);
  margin-bottom: 10px;
  font-size: 1rem;
}
.contact-fine {
  font-size: 0.76rem;
  color: var(--text-muted);
  letter-spacing: 0.07em;
  margin-bottom: 52px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}
.form-field label {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-field input,
.form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  outline: none;
  transition: border-color var(--ease);
  width: 100%;
}
.form-field input:focus,
.form-field textarea:focus { border-bottom-color: var(--gold); }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-muted); font-weight: 300; }
.form-field textarea { resize: vertical; min-height: 120px; line-height: 1.7; }

/* ─── Footer ─────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 64px 0;
}
.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 7px;
}
.footer__tagline {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 300;
}
.footer__links {
  display: flex;
  gap: 36px;
  list-style: none;
  align-items: center;
  padding-top: 4px;
}
.footer__links a {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--ease);
}
.footer__links a:hover { color: var(--text-secondary); }

/* ─── Legal pages ────────────────────────────────────────────── */
.legal-page {
  padding-top: calc(var(--nav-h) + 88px);
  padding-bottom: 120px;
}
.legal-warning {
  border-left: 3px solid var(--gold);
  background: rgba(200, 169, 110, 0.05);
  padding: 16px 22px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 52px;
  line-height: 1.65;
}
.legal-content { max-width: 680px; }
.legal-content h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 52px;
  font-weight: 300;
}
.legal-content h2 {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 48px 0 14px;
}
.legal-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.9;
}
.legal-content p strong { color: var(--text); font-weight: 400; }
.legal-content a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-content { display: none; }
.lang-content.active { display: block; }


/* ─── Scroll reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Watermark ──────────────────────────────────────────────── */
.watermark {
  position: fixed;
  bottom: 8%;
  right: -4%;
  font-family: var(--font-display);
  font-size: clamp(5rem, 9vw, 11rem);
  font-weight: 300;
  color: var(--green);
  opacity: 0.055;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.02em;
  transform: translateY(calc(var(--scroll-y, 0) * -0.15px));
  will-change: transform;
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__video  { display: none; }
  .bg-layer     { transform: none !important; }
  .watermark    { transform: none !important; }
  .card--active::before { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .wrap           { padding: 0 32px; }
  .nav__inner     { padding: 0 32px; }
  .network-grid   { grid-template-columns: 1fr; gap: 16px; }
  .site-section   { padding: 88px 0; }
  .hero__deco     { display: none; }
  .hero__content  { max-width: none; }
  .contact-section::before { left: 32px; right: 32px; }
  .card--active   { min-height: 280px; }
}
@media (max-width: 640px) {
  .wrap           { padding: 0 24px; }
  .nav__inner     { padding: 0 24px; }
  .nav__links     { display: none; }
  .network-grid   { grid-template-columns: 1fr; gap: 12px; }
  .site-section   { padding: 72px 0; }
  .footer__inner  { flex-direction: column; gap: 32px; }
  .contact-section::before { left: 24px; right: 24px; }
}

/* ─── Contact form feedback ──────────────────────────────────── */
.form-status {
  margin-top: 20px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.6;
  border-left: 3px solid transparent;
}
.form-status--success {
  border-left-color: var(--green);
  background: rgba(122, 171, 122, 0.08);
  color: #7aab7a;
}
.form-status--error {
  border-left-color: #c87a6e;
  background: rgba(200, 122, 110, 0.08);
  color: #c87a6e;
}

/* Button loading state */
.btn--loading {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}