/* VRI — Cyprus Investor Deck */
:root {
  --ink: #0a0a0b;
  --ink-2: #141416;
  --ink-3: #1c1c1f;
  --gold: #F5B728;
  --gold-2: #ffd267;
  --gold-deep: #b07a00;
  --cream: #f3ecdb;
  --paper: #faf7f2;
  --muted: rgba(255,255,255,0.62);
  --line: rgba(245,183,40,0.22);
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

deck-stage section {
  width: 1920px; height: 1080px;
  position: relative; overflow: hidden;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  letter-spacing: -0.01em;
}

/* Shared atmospheric background */
.atmo {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 800px at 85% 15%, rgba(245,183,40,0.22), transparent 60%),
    radial-gradient(1600px 1000px at 10% 110%, rgba(245,183,40,0.08), transparent 55%),
    linear-gradient(180deg, #0a0a0b 0%, #0f0e10 60%, #0a0a0b 100%);
}
.atmo::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.4;
}
.grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Chrome */
.chrome {
  position: absolute; inset: 0;
  padding: 56px 80px;
  display: flex; justify-content: space-between; align-items: flex-start;
  z-index: 10; pointer-events: none;
}
.chrome .brand {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--sans); font-weight: 600;
  font-size: 18px; letter-spacing: 0.18em;
  color: #fff; text-transform: uppercase;
}
.chrome .brand .mk {
  width: 72px; height: 82px;
  background: url('assets/vri-logo-cropped.png') center/contain no-repeat;
  filter: drop-shadow(0 0 24px rgba(245,183,40,0.35));
  flex-shrink: 0;
}
.chrome .brand .mk-dark {
  width: 72px; height: 82px;
  background: url('assets/vri-logo-dark.png') center/contain no-repeat;
  flex-shrink: 0;
}
.chrome .brand span { display: none; }
.chrome .meta {
  text-align: right;
  font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.chrome .meta .num { color: var(--gold); font-weight: 600; }

/* Section markers */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 15px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.eyebrow::before {
  content: ''; width: 40px; height: 1px; background: var(--gold);
}

/* Typography */
.hero {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 180px;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.hero .it { font-style: italic; color: var(--gold); font-weight: 300; }

.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 120px;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.title .it { font-style: italic; color: var(--gold); font-weight: 300; }

.subtitle {
  font-family: var(--sans);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--muted);
  max-width: 780px;
}

.kicker {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* Stat displays */
.stat-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 240px;
  line-height: 0.85;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 40%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-num .suffix {
  font-size: 140px;
  vertical-align: top;
  margin-left: 8px;
}
.stat-label {
  font-size: 22px;
  color: rgba(255,255,255,0.75);
  max-width: 360px;
  line-height: 1.4;
}

/* Placeholder image block with Cyprus scene */
.photo {
  position: relative;
  background: #1a1a1c;
  overflow: hidden;
  border: 1px solid var(--line);
}
.photo::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--scene);
}
.photo::after {
  content: attr(data-label);
  position: absolute; bottom: 18px; left: 20px;
  font-size: 11px; letter-spacing: 0.24em;
  color: rgba(255,255,255,0.55); text-transform: uppercase;
  font-weight: 500;
}

/* Limassol skyline scene */
.scene-limassol {
  --scene:
    linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0.85) 85%),
    linear-gradient(180deg, #1a2942 0%, #2a3a58 30%, #d4a25a 55%, #f5b728 68%, #b87a2a 85%);
}
.scene-marina {
  --scene:
    linear-gradient(0deg, rgba(10,10,11,0.8) 0%, transparent 45%),
    linear-gradient(180deg, #0f1a2a 0%, #1d3556 40%, #2a4b7c 70%, #1a2d4a 100%);
}
.scene-coast {
  --scene:
    linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0.75) 90%),
    linear-gradient(180deg, #f5d28c 0%, #e8a45a 25%, #3a5278 50%, #1a2840 100%);
}
.scene-villa {
  --scene:
    linear-gradient(180deg, rgba(10,10,11,0.3) 0%, rgba(10,10,11,0.85) 100%),
    linear-gradient(135deg, #2a2824 0%, #4a3a28 40%, #8a6838 70%, #d4a25a 100%);
}
.scene-mediterranean {
  --scene:
    linear-gradient(0deg, rgba(10,10,11,0.5) 0%, transparent 50%),
    linear-gradient(180deg, #f5b728 0%, #e88a3a 20%, #a85a4a 40%, #3a4268 70%, #0f1a2a 100%);
}

/* SVG illustrations drawn over scenes */
.skyline-svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 55%; }
.mountain-svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; }
.sun-glow {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,150,0.9) 0%, rgba(245,183,40,0.5) 30%, transparent 65%);
  filter: blur(8px);
}

/* Charts */
.chart-bar { fill: var(--gold); }
.chart-bar.muted { fill: rgba(255,255,255,0.15); }
.chart-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.chart-axis { fill: rgba(255,255,255,0.5); font-size: 16px; font-family: var(--sans); }
.chart-label { fill: #fff; font-size: 20px; font-family: var(--sans); font-weight: 500; }

/* Utility */
.flex { display: flex; }
.col { flex-direction: column; }
.gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.gap-40 { gap: 40px; } .gap-64 { gap: 64px; } .gap-80 { gap: 80px; }
.grid { display: grid; }
.divider { height: 1px; background: var(--line); }

/* Hairline */
.rule {
  height: 1px; background: linear-gradient(90deg, var(--gold), transparent);
}

/* Cream slide variant */
.cream-slide {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
.cream-slide .atmo { display: none; }
.cream-slide .grain { opacity: 0.04; }
.cream-slide .subtitle { color: rgba(10,10,11,0.68); }
.cream-slide .stat-label { color: rgba(10,10,11,0.7); }
.cream-slide .kicker { color: rgba(10,10,11,0.55); }