/* AgroHektar — Dark Industrial Premium CSS System v1.0 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter+Tight:ital,wght@0,300..900;1,300..900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Color System according to Master Prompt Part 8 */
  --bg-dark: #0B0F17;
  --bg-surface: #111827;
  --bg-card: #1E293B;

  --primary-emerald: #10B981;
  --primary-hover: #059669;
  --primary-bright: #34D399;
  --primary-glow: rgba(16, 185, 129, 0.3);

  --accent-gold: #FAC775;
  --accent-gold-deep: #D97706;
  --accent-gold-glow: rgba(250, 199, 117, 0.25);

  --text-main: #FAFAFA;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;

  --glass-bg: rgba(30, 41, 59, 0.55);
  --glass-bg-hover: rgba(30, 41, 59, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(16, 185, 129, 0.4);

  /* Typography */
  --font-heading: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', SFMono-Regular, monospace;

  /* Radii Scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Global Transitions System according to Part 7 */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-premium);
  --transition-medium: 300ms var(--ease-premium);
  --transition-premium: 600ms var(--ease-premium);
}

/* Global Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  line-height: 1.6;
}

/* Ambient Cursor Spotlight Glow */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  margin-top: -250px;
  margin-left: -250px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, rgba(11, 15, 23, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.05s linear;
}

/* Background Aurora & Grid Overlay */
.aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 15%, rgba(16, 185, 129, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 80% 65%, rgba(250, 199, 117, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(139, 92, 246, 0.06) 0%, transparent 45%),
    var(--bg-dark);
}

.grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typography Helpers */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-main);
}

.font-mono {
  font-family: var(--font-mono);
}

.currency-gold {
  color: var(--accent-gold);
}

.section-eyebrow, .eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--primary-bright);
  display: inline-block;
  margin-bottom: 12px;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin-bottom: 16px;
}

.section-desc {
  font-size: 16px;
  color: var(--text-secondary);
}

/* Glassmorphism Card System */
.glass-card, .glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium), background var(--transition-medium);
}

.glass-card:hover {
  transform: translateY(-8px);
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-hover);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px var(--primary-glow);
}

/* Buttons & Badges Microinteractions */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.btn:active {
  transform: scale(0.97) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-emerald) 0%, var(--primary-hover) 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 20px var(--primary-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.45);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.btn-glow {
  position: relative;
  overflow: hidden;
}

.btn-glow::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-medium);
  pointer-events: none;
}

.btn-glow:hover::after {
  opacity: 1;
}

.btn-lg {
  padding: 18px 36px;
  font-size: 17px;
  border-radius: var(--radius-lg);
}

.appstore-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000000;
  border: 1px solid var(--glass-border);
  padding: 8px 18px;
  border-radius: var(--radius-md);
  color: var(--text-main);
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.appstore-badge-btn:hover {
  border-color: var(--primary-emerald);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--primary-glow);
}

.badge-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.badge-sub {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.badge-main {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* HEADER NAVIGATION */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 15, 23, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--transition-medium), border-color var(--transition-medium);
}

.site-header.scrolled {
  background: rgba(11, 15, 23, 0.92);
  border-bottom-color: rgba(16, 185, 129, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-main);
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-bright) 0%, var(--primary-hover) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px var(--primary-glow);
  transition: transform var(--transition-fast);
}

.logo-badge:hover .logo-icon {
  transform: scale(1.05) rotate(-3deg);
}

.logo-icon svg {
  width: 24px;
  height: 24px;
  stroke: #FFFFFF;
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.logo-text span {
  color: var(--primary-bright);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: color var(--transition-fast);
  position: relative;
  padding: 4px 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-main);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-emerald);
  transition: width var(--transition-medium);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
}

/* HERO SECTION */
.hero-section {
  min-height: min(780px, calc(100vh - 76px));
  display: flex;
  align-items: center;
  padding: 112px 0 96px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #030607;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(3, 6, 7, 0.98) 0%, rgba(3, 6, 7, 0.91) 38%, rgba(3, 6, 7, 0.22) 71%, rgba(3, 6, 7, 0.08) 100%);
}

.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-section .container {
  position: relative;
  z-index: 2;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 590px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
}

.badge-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-bright);
}

.hero-title {
  font-size: clamp(48px, 6vw, 82px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin-bottom: 24px;
  text-wrap: balance;
}

.hero-title span {
  color: var(--primary-bright);
}

.hero-subtitle {
  font-size: clamp(17px, 1.5vw, 20px);
  color: #D5DEE8;
  margin-bottom: 32px;
  max-width: 510px;
  line-height: 1.55;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-trust-pills {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
  width: 100%;
}

.trust-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

.trust-pill svg {
  width: 18px;
  height: 18px;
  color: var(--primary-bright);
}

/* FLOATING PHONE MOCKUP according to Part 7 section 6 */
.hero-mockup-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-photo-backdrop {
  position: absolute;
  inset: -6% -16%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  z-index: 0;
}

.hero-photo-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.03) brightness(0.92);
}

.hero-photo-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 52% at center, var(--bg-dark) 42%, rgba(11, 15, 23, 0.5) 66%, transparent 100%);
}

.ambient-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: ambientPulse 4s ease-in-out infinite alternate;
}

@keyframes ambientPulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.1); opacity: 0.8; }
}

.floating-phone-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  animation: floatingPhone 6s ease-in-out infinite;
}

@keyframes floatingPhone {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(6px); }
}

.device-reflection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 40%);
  pointer-events: none;
  z-index: 5;
}

.phone-frame {
  background: var(--bg-surface);
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-radius: 40px;
  padding: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px var(--primary-glow);
}

.phone-screen {
  background: var(--bg-dark);
  border-radius: 28px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
}

.gps-status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-bright);
  font-weight: 700;
}

.gps-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--primary-bright);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--primary-bright);
  animation: gpsPulse 1.8s infinite;
}

@keyframes gpsPulse {
  0% { transform: scale(0.8); opacity: 0.4; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.4; }
}

.signal-tag {
  color: var(--text-muted);
}

.live-telemetry-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(17, 24, 39, 0.9) 100%);
  border: 1px solid var(--primary-emerald);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.telemetry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.telemetry-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--primary-bright);
  font-weight: 700;
}

.activity-chip {
  background: var(--primary-hover);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.telemetry-timer-display {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  text-shadow: 0 0 20px var(--primary-glow);
}

.telemetry-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
}

.stat-value {
  font-size: 16px;
  font-weight: 700;
}

/* Map Simulation */
.field-map-visual {
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  padding: 8px;
  position: relative;
  overflow: hidden;
}

.map-svg {
  width: 100%;
  height: 100px;
  display: block;
}

.route-animated-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: drawRoute 8s linear infinite;
}

@keyframes drawRoute {
  0% { stroke-dashoffset: 400; }
  100% { stroke-dashoffset: 0; }
}

.gps-marker-ping {
  animation: markerPing 1.5s ease-out infinite;
}

@keyframes markerPing {
  0% { r: 4; opacity: 1; }
  100% { r: 16; opacity: 0; }
}

.map-badge-overlay {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.speed-indicator {
  color: var(--accent-gold);
  font-weight: 700;
}

/* TRUST BAR SECTION */
.trust-bar-section {
  padding: 40px 0 80px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.trust-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trust-icon {
  width: 44px;
  height: 44px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-bright);
}

.trust-icon svg {
  width: 22px;
  height: 22px;
}

.trust-text h3 {
  font-size: 17px;
  margin-bottom: 4px;
}

.trust-text p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* FEATURE SHOWCASE SECTION */
.features-section {
  padding: 80px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-icon-wrapper {
  width: 48px;
  height: 48px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-bright);
  margin-bottom: 8px;
  transition: transform var(--transition-fast);
}

.feature-card:hover .feature-icon-wrapper {
  transform: scale(1.1) rotate(4deg);
}

.feature-icon-wrapper svg {
  width: 26px;
  height: 26px;
}

.feature-card h3 {
  font-size: 20px;
}

.feature-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.feature-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}

.feature-bullets li {
  font-size: 13px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-bullets li::before {
  content: '•';
  color: var(--primary-bright);
  font-weight: bold;
}

/* FARMER VS CONTRACTOR SECTION */
.comparison-section {
  padding: 80px 0;
}

.profile-toggle-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.profile-toggle-bar {
  display: inline-flex;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  padding: 6px;
  border-radius: var(--radius-full);
  gap: 8px;
}

.profile-tab-btn {
  padding: 12px 28px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-tab-btn.active {
  background: var(--primary-emerald);
  color: #FFFFFF;
  box-shadow: 0 4px 20px var(--primary-glow);
}

.comparison-grid {
  max-width: 960px;
  margin: 0 auto;
}

.profile-display-card {
  padding: 40px;
  display: none;
}

.profile-display-card.active {
  display: block;
}

.card-badge-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.profile-pill-emerald {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-bright);
  letter-spacing: 0.1em;
}

.profile-pill-gold {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.1em;
}

.card-badge-header h3 {
  font-size: 28px;
}

.profile-intro {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.profile-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.prof-feat-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.check-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: var(--primary-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.check-mark.gold {
  background: rgba(250, 199, 117, 0.15);
  color: var(--accent-gold);
}

.prof-feat-item strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.prof-feat-item p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* HOW IT WORKS SECTION */
.how-it-works-section {
  padding: 80px 0;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.step-card {
  padding: 36px;
  position: relative;
}

.step-number {
  font-size: 44px;
  font-weight: 800;
  color: rgba(16, 185, 129, 0.2);
  line-height: 1;
  margin-bottom: 16px;
}

.step-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.step-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* TESTIMONIALS SECTION */
.testimonials-section {
  padding: 80px 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  border-top: 3px solid var(--accent-gold);
}

.star-rating {
  color: var(--accent-gold);
  font-size: 18px;
  letter-spacing: 2px;
}

.testimonial-text {
  font-size: 15px;
  color: var(--text-main);
  line-height: 1.6;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}

.author-avatar {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--primary-bright);
  font-size: 14px;
}

.author-name {
  display: block;
  font-size: 15px;
}

.author-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* FAQ ACCORDION according to Part 7 section 17 */
.faq-section {
  padding: 80px 0;
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  padding: 0;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 24px 32px;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-question:hover {
  color: var(--primary-bright);
}

.faq-icon {
  font-size: 24px;
  font-weight: 400;
  color: var(--text-secondary);
  transition: transform var(--transition-medium);
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: var(--primary-bright);
}

.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 400ms var(--ease-premium), opacity 300ms var(--ease-premium), padding 300ms var(--ease-premium);
  padding: 0 32px;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  opacity: 1;
  padding: 0 32px 24px;
}

.faq-answer p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* PRICING SECTION */
.pricing-section {
  padding: 80px 0 100px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.pricing-card {
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.pricing-card.featured-tier {
  border-color: var(--primary-emerald);
  box-shadow: 0 0 50px var(--primary-glow);
}

.featured-badge {
  position: absolute;
  top: -14px;
  right: 32px;
  background: var(--accent-gold);
  color: #000000;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  letter-spacing: 0.1em;
}

.tier-name {
  font-size: 24px;
  margin-bottom: 12px;
}

.tier-price {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.tier-period {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 400;
}

.tier-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.pricing-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.pricing-bullets li {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bullet-check {
  color: var(--primary-bright);
  font-weight: 800;
}

.bullet-check.gold {
  color: var(--accent-gold);
}

.w-full {
  width: 100%;
}

/* WEATHER & RADAR SECTION */
.weather-section {
  min-height: 620px;
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #030607;
}

.weather-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(3, 6, 7, 0.98) 0%, rgba(3, 6, 7, 0.86) 38%, rgba(3, 6, 7, 0.3) 67%, rgba(3, 6, 7, 0.08) 100%);
}

.weather-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.weather-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
}

.weather-title {
  max-width: 600px;
  margin-bottom: 20px;
  font-size: clamp(42px, 5.5vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.weather-content p {
  max-width: 480px;
  color: #D5DEE8;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
}

/* FINAL CTA SECTION */
.final-cta-section {
  padding: 60px 0 120px;
}

.final-cta-box {
  padding: 64px 48px;
  text-align: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(17, 24, 39, 0.95) 100%);
  border-color: var(--primary-emerald);
}

.cta-title {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  margin: 16px 0 20px;
}

.cta-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 36px;
}

.cta-button-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.cta-note {
  font-size: 12px;
  color: var(--text-muted);
}

/* LEGAL PAGES STYLING (privacy.html & support.html) */
.legal-page {
  padding: 60px 0 100px;
}

.legal-header {
  margin-bottom: 40px;
}

.legal-title {
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 12px;
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.legal-body {
  line-height: 1.8;
}

.legal-body h2 {
  font-size: 24px;
  margin: 32px 0 16px;
  color: var(--primary-bright);
}

.legal-body p {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.legal-body ul {
  margin: 0 0 24px 24px;
  color: var(--text-secondary);
}

.legal-body li {
  margin-bottom: 8px;
}

/* FOOTER */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--glass-border);
  padding: 60px 0 40px;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.brand-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 16px;
  max-width: 380px;
}

.footer-links-col h4 {
  font-size: 15px;
  margin-bottom: 20px;
  color: var(--text-main);
}

.footer-links-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-col a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--transition-fast);
}

.footer-links-col a:hover {
  color: var(--primary-bright);
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--glass-border);
  font-size: 13px;
  color: var(--text-muted);
}

/* SCROLL REVEAL STAGGER ANIMATIONS */
.reveal-stagger {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
  transition-delay: calc(var(--stagger-order, 1) * 100ms);
}

.reveal-stagger.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-section {
    min-height: 720px;
  }

  .hero-visual {
    object-position: 63% center;
  }

  .weather-section {
    min-height: 580px;
  }

  .weather-visual {
    object-position: 64% center;
  }

  .hero-content {
    align-items: flex-start;
  }

  .hero-trust-pills {
    justify-content: center;
  }

  .features-grid, .trust-grid, .steps-grid, .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 720px;
    padding: 104px 0 64px;
  }

  .hero-section::before {
    background: linear-gradient(90deg, rgba(3, 6, 7, 0.96) 0%, rgba(3, 6, 7, 0.68) 100%), linear-gradient(0deg, rgba(3, 6, 7, 0.88) 0%, transparent 64%);
  }

  .hero-visual {
    object-position: 65% center;
  }

  .hero-content {
    align-items: flex-start;
    max-width: min(100%, 460px);
  }

  .hero-title {
    font-size: clamp(48px, 15vw, 64px);
  }

  .hero-subtitle {
    font-size: 17px;
  }

  .hero-cta-group {
    gap: 12px;
  }

  .weather-section {
    min-height: 560px;
    padding: 70px 0;
  }

  .weather-section::before {
    background: linear-gradient(90deg, rgba(3, 6, 7, 0.96) 0%, rgba(3, 6, 7, 0.72) 100%), linear-gradient(0deg, rgba(3, 6, 7, 0.84) 0%, transparent 64%);
  }

  .weather-visual {
    object-position: 65% center;
  }

  .weather-title {
    font-size: clamp(42px, 13vw, 58px);
  }

  .weather-content p {
    font-size: 17px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    width: 100%;
    background: rgba(11, 15, 23, 0.98);
    backdrop-filter: blur(24px);
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--glass-border);
  }

  .nav-links.mobile-open {
    display: flex;
    animation: slideDown 300ms var(--ease-premium);
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .mobile-nav-toggle {
    display: block;
  }

  .features-grid, .trust-grid, .steps-grid, .testimonials-grid, .pricing-grid, .profile-features-grid {
    grid-template-columns: 1fr;
  }

  .final-cta-box {
    padding: 40px 24px;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ACCESSIBILITY: REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .floating-phone-card, .route-animated-path, .gps-pulse-dot, .gps-marker-ping {
    animation: none !important;
  }
}

/* ============================================================
   FULL-SCREEN APP SCREENS (#hero, #zaslon-02 … #zaslon-06)
   Six viewport-tall sections stacked one under the other; the
   page scrolls normally through them, nothing is pinned.
   ============================================================ */

.screen {
  position: relative;
  min-height: max(100svh, 640px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.screen-media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--tint, var(--bg-dark));
}

/* The frame is 8 % taller than the section so it has room to drift without
   ever exposing an edge. 3 % of travel stays well inside the slack the
   device mock-up leaves at the top and bottom of every shot. */
.screen-media img {
  display: block;
  position: absolute;
  top: -4%;
  left: 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
  /* --focus keeps the device mock-up inside the crop on every screen */
  object-position: var(--focus, 50%) 50%;
  transform: translateY(var(--media-par, 0)) scale(var(--media-scale, 1));
}

/* Promotion only while a screen is actually being scrolled through —
   six permanently composited full-bleed photos is a lot of GPU memory. */
.screen.is-animating .screen-media img,
.screen.is-animating .screen-copy { will-change: transform; }

/* One pseudo-element carries four stacked gradients: a fade into the
   section above, a fade into the one below, the side scrim the copy
   sits on, and a flat dim that evens out the brighter photos. */
.screen-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--bg-dark) 0%, rgba(11, 15, 23, 0.5) 42%, transparent 100%)
      top / 100% clamp(90px, 16vh, 260px) no-repeat,
    linear-gradient(to top, var(--bg-dark) 0%, rgba(11, 15, 23, 0.5) 42%, transparent 100%)
      bottom / 100% clamp(90px, 16vh, 260px) no-repeat,
    linear-gradient(var(--scrim-dir, to left),
      rgba(11, 15, 23, 0.96) 0%,
      rgba(11, 15, 23, 0.88) 22%,
      rgba(11, 15, 23, 0.58) 42%,
      rgba(11, 15, 23, 0.2) 62%,
      transparent 80%),
    linear-gradient(rgba(11, 15, 23, 0.12), rgba(11, 15, 23, 0.12));
}

.screen--right { --scrim-dir: to left; }
.screen--left  { --scrim-dir: to right; }

.screen-body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(96px, 13vh, 150px) clamp(24px, 5vw, 72px);
  display: flex;
}

.screen--right .screen-body { justify-content: flex-end; }
.screen--left .screen-body  { justify-content: flex-start; }

.screen-copy {
  max-width: min(620px, 50vw);
  transform: translateY(var(--par, 0));
}

.screen--right .screen-copy { text-align: right; }

.screen-num {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-bright);
  margin-bottom: clamp(12px, 2vh, 20px);
}

.screen-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
  color: var(--text-main);
  margin-bottom: clamp(14px, 2.2vh, 24px);
}

.screen-title--hero {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
}

.screen-title--hero span { color: var(--primary-bright); }

.screen-lead {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  font-weight: 300;
  color: rgba(250, 250, 250, 0.75);
}

.screen-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 4vh, 40px);
}

.screen--right .screen-cta { justify-content: flex-end; }

.platform-note {
  margin-top: clamp(18px, 3vh, 28px);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.platform-note span { color: var(--accent-gold); }

/* Each line resolves on its own slice of the scroll, so the copy assembles
   itself instead of arriving as one block. JS writes --r per element. */
.screen:not(.screen--hero) .screen-num,
.screen:not(.screen--hero) .screen-title,
.screen:not(.screen--hero) .screen-lead,
.screen:not(.screen--hero) .screen-cta {
  opacity: var(--r, 1);
  transform: translateY(calc((1 - var(--r, 1)) * 22px));
}

/* ---- Viewports wider than the photos can take ------------------------
   The shots are 2752×1536 (1.7917) and the device fills roughly 85 % of
   their height, so a cover crop stays safe until about 2.10:1. 16:9 is
   1.7778 — narrower than the photos — which is why a 27" display must NOT
   land here: it would letterbox a screen that can be full-bleed. The
   contain fallback is for genuinely wide or short windows (21:9, a short
   browser window on a wide display). -------------------------------- */
@media (min-width: 861px) and (min-aspect-ratio: 41 / 20) {
  .screen-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--shot);
    background-size: cover;
    background-position: var(--focus, 50%) center;
    filter: blur(34px) brightness(0.45) saturate(0.8);
    transform: scale(1.2);
  }

  .screen-media img {
    position: absolute;
    inset: 76px 0 0 0;
    height: calc(100% - 76px);
    object-fit: contain;
    object-position: var(--focus, 50%) center;
    transform: scale(var(--media-scale, 1));
  }
}

/* ---- Portrait phones -------------------------------------------------
   The crop is far tighter here, so --focus-m re-centres on the device and
   the scrim turns vertical with the copy sitting over the lower third. */
@media (max-width: 860px) {
  /* The sharp frame only takes the top of the screen — a full-height cover
     crop shows barely a quarter of these landscape shots and blows the device
     up past reading. The same photo, blurred, fills the rest so there is no
     edge between the picture and the copy underneath it. */
  .screen {
    --media-h: 45svh;
    /* The header is sticky, so it already occupies flow space at the top of
       the page — only a small breathing gap is needed here. */
    --media-top: clamp(12px, 2.5vh, 24px);
  }

  .screen--hero { --media-h: 33svh; }

  .screen-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--shot);
    background-size: cover;
    background-position: var(--focus, 50%) center;
    filter: blur(30px) brightness(0.45) saturate(0.8);
    transform: scale(1.25);
  }

  .screen-media img {
    position: absolute;
    top: var(--media-top);
    left: 0;
    height: var(--media-h);
    object-position: var(--focus-m, var(--focus, 50%)) 50%;
    transform: scale(var(--media-scale, 1));
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }

  .screen-media::after {
    background:
      linear-gradient(to bottom, var(--bg-dark) 0%, rgba(11, 15, 23, 0.45) 45%, transparent 100%)
        top / 100% clamp(70px, 11vh, 120px) no-repeat,
      linear-gradient(to bottom,
        transparent 0%,
        transparent calc(var(--media-top) + var(--media-h) * 0.6),
        rgba(11, 15, 23, 0.82) calc(var(--media-top) + var(--media-h) * 0.95),
        var(--bg-dark) calc(var(--media-top) + var(--media-h) * 1.12),
        var(--bg-dark) 100%);
  }

  /* Copy always clears the frame instead of sitting on top of the device */
  .screen-body,
  .screen--right .screen-body,
  .screen--left .screen-body {
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(var(--media-top) + var(--media-h) + clamp(20px, 4vh, 40px))
             24px clamp(48px, 8vh, 84px);
  }

  .screen-copy,
  .screen--right .screen-copy {
    max-width: none;
    text-align: left;
  }

  .screen--right .screen-cta { justify-content: flex-start; }
  .screen-cta { margin-top: clamp(18px, 3vh, 28px); }
  .screen-title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .screen-title--hero { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .screen-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .screen-copy,
  .screen-num, .screen-title, .screen-lead, .screen-cta {
    opacity: 1 !important;
    transform: none !important;
  }
  .screen-media img { transform: none !important; }
}

/* ============================================================
   DOWNLOAD SECTION (#prenos)
   ============================================================ */

.download-section {
  padding: clamp(70px, 10vh, 110px) 0 clamp(90px, 13vh, 140px);
}

.download-box {
  padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 48px);
  text-align: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(17, 24, 39, 0.95) 100%);
  border-color: var(--primary-emerald);
}

.download-mark {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  margin: 0 auto 24px;
  display: block;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px var(--primary-glow);
}

.platform-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 32px auto 0;
  padding: 0;
}

.platform-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 168px;
  padding: 14px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(11, 15, 23, 0.4);
}

.platform-list strong {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--text-secondary);
}

.platform-list span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.platform-list li.is-available {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}

.platform-list li.is-available strong { color: var(--text-main); }
.platform-list li.is-available span { color: var(--primary-bright); }

/* App icon now stands in for the old inline mark */
img.logo-icon {
  background: none;
  object-fit: cover;
}

/* Header steps aside while scrolling down so it never clips a device mock-up */
.site-header {
  transition: background var(--transition-medium), border-color var(--transition-medium), transform var(--transition-medium);
}

.site-header.nav-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-header.nav-hidden { transform: none; }
}

.download-legal {
  margin-top: 26px;
  font-size: 12px;
  color: var(--text-muted);
}

.download-legal a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--glass-border);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.download-legal a:hover {
  color: var(--primary-bright);
  border-color: var(--primary-emerald);
}

/* ============================================================
   STORE BADGES — App Store live, Google Play pending
   ============================================================ */

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store-badges--center {
  justify-content: center;
  margin-top: 36px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  min-height: 56px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  color: var(--text-main);
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

a.store-badge:hover {
  transform: translateY(-2px);
  border-color: var(--primary-emerald);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.28);
}

a.store-badge:active { transform: scale(0.98); }

.store-glyph {
  width: 26px;
  height: 26px;
  flex: none;
}

.store-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  text-align: left;
}

.store-text small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.store-text strong {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Not a link — the Android build is not out yet */
.store-badge.is-soon {
  background: rgba(11, 15, 23, 0.66);
  border-color: var(--glass-border);
  cursor: default;
}

.store-badge.is-soon .store-glyph { opacity: 0.55; }
.store-badge.is-soon .store-text strong { color: var(--text-secondary); }
.store-badge.is-soon .store-text small { color: var(--accent-gold); }

.screen-cta { align-items: center; }

.screen-cta-link { min-height: 56px; }

@media (max-width: 860px) {
  .store-badges { width: 100%; }
  .store-badge { flex: 1 1 100%; justify-content: center; }
  .screen-cta .btn { width: 100%; }
}

/* ============================================================
   LARGE DISPLAYS (27" and up)
   At 2560 px the copy pooled in a 1240 px column while the photo bled
   far past it on both sides, and 64 px type read as small against the
   frame. Hold the text nearer the edge it is aligned to and let it grow.
   ============================================================ */
@media (min-width: 1700px) {
  .screen-body {
    max-width: 1680px;
    padding-inline: clamp(72px, 6vw, 128px);
  }

  .screen-copy { max-width: min(760px, 42vw); }
  .screen-num { font-size: 0.95rem; }
  .screen-title { font-size: clamp(3.4rem, 3.6vw, 5.2rem); }
  .screen-title--hero { font-size: clamp(4rem, 4.4vw, 6.2rem); }
  .screen-lead { font-size: clamp(1.15rem, 1.05vw, 1.45rem); }
}

/* The last screen has no photo below it to hand over to, so instead of fading
   into an opaque band it dissolves and lets the page background come through. */
.screen--last .screen-media {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0.55) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0.55) 78%, transparent 100%);
}

.screen--last .screen-media::after {
  background:
    linear-gradient(to bottom, var(--bg-dark) 0%, rgba(11, 15, 23, 0.5) 42%, transparent 100%)
      top / 100% clamp(90px, 16vh, 260px) no-repeat,
    linear-gradient(var(--scrim-dir, to left),
      rgba(11, 15, 23, 0.96) 0%,
      rgba(11, 15, 23, 0.88) 22%,
      rgba(11, 15, 23, 0.58) 42%,
      rgba(11, 15, 23, 0.2) 62%,
      transparent 80%),
    linear-gradient(rgba(11, 15, 23, 0.12), rgba(11, 15, 23, 0.12));
}

/* (mobile last-screen fade is re-enabled further down) */

/* ---- Pricing: one subscription, two billing periods ---- */
.pricing-includes {
  max-width: 900px;
  margin: clamp(36px, 6vh, 60px) auto 0;
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgba(11, 15, 23, 0.4);
}

.pricing-includes .section-eyebrow {
  margin-bottom: 22px;
}

.pricing-includes .pricing-bullets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 32px;
}

.pricing-note {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.pricing-card .tier-header { margin-bottom: 28px; }

/* ============================================================
   MOBILE PASS
   ============================================================ */

/* --- Wordmark: sized and spaced to sit with the app icon, not beside it --- */
.logo-badge { gap: 11px; }

.logo-text {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.logo-text span {
  color: var(--primary-bright);
  font-weight: 600;
}

img.logo-icon {
  border-radius: 11px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07);
}

@media (max-width: 720px) {
  /* Three stacked lines of "Prenesi na App Store" broke the bar and crowded
     the wordmark. The hero carries the same badge two screens further down. */
  .site-header .appstore-badge-btn { display: none; }
  .site-header .container { padding: 0 18px; }
  .header-content { height: 64px; }
  .logo-text { font-size: 19px; }
  img.logo-icon { width: 34px; height: 34px; border-radius: 9px; }
}

@media (max-width: 860px) {
  /* --- Screens: fade in at the top too, so no frame has a cut edge --- */
  .screen {
    --media-h: 42svh;
    --media-top: clamp(10px, 2vh, 18px);
    min-height: max(88svh, 600px);
  }

  .screen--hero { --media-h: 34svh; min-height: auto; }

  .screen-media img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 68%, transparent 100%);
  }

  .screen-media::after {
    background:
      linear-gradient(to bottom, var(--bg-dark) 0%, rgba(11, 15, 23, 0.35) 55%, transparent 100%)
        top / 100% clamp(60px, 9vh, 100px) no-repeat,
      linear-gradient(to top, var(--bg-dark) 0%, rgba(11, 15, 23, 0.4) 50%, transparent 100%)
        bottom / 100% clamp(60px, 9vh, 100px) no-repeat,
      linear-gradient(to bottom,
        transparent 0%,
        transparent calc(var(--media-top) + var(--media-h) * 0.52),
        rgba(11, 15, 23, 0.72) calc(var(--media-top) + var(--media-h) * 0.88),
        var(--bg-dark) calc(var(--media-top) + var(--media-h) * 1.06),
        var(--bg-dark) 100%);
  }

  /* --- Tighter: the copy no longer floats in a half-empty screen --- */
  .screen-body,
  .screen--right .screen-body,
  .screen--left .screen-body {
    padding: calc(var(--media-top) + var(--media-h) + clamp(10px, 2vh, 22px))
             20px clamp(28px, 5vh, 52px);
  }

  .screen-lead { font-size: 1rem; line-height: 1.55; }
  .screen-num { margin-bottom: 10px; }
  .screen-title { margin-bottom: 12px; }

  /* --- Buttons: two badges share a row, the tertiary link stops shouting --- */
  .screen-cta { margin-top: clamp(16px, 2.6vh, 24px); gap: 10px; }
  .store-badges { gap: 10px; flex-wrap: nowrap; }

  .store-badge {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 12px;
    gap: 9px;
    min-height: 52px;
  }

  .store-glyph { width: 22px; height: 22px; }
  .store-text small { font-size: 9px; letter-spacing: 0.04em; }
  .store-text strong { font-size: 14px; }

  .screen-cta .btn.screen-cta-link {
    width: auto;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 6px 0;
    min-height: 40px;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--glass-border);
  }

  .platform-note { margin-top: 14px; }

  /* Section rhythm below the screens */
  .comparison-section, .how-it-works-section,
  .faq-section, .pricing-section { padding: 56px 0; }
  .download-section { padding: 48px 0 64px; }
  .section-header { margin-bottom: 32px; }
}

@media (max-width: 860px) {
  .site-footer { padding: 44px 0 32px; }
  .footer-top-grid { gap: 28px; }
  .footer-links-col h4 { margin-bottom: 12px; }
  .footer-links-col ul { display: grid; gap: 10px; }
  .footer-links-col li { margin: 0; }
  .brand-desc { font-size: 14px; line-height: 1.55; }
  .footer-bottom-bar { padding-top: 22px; gap: 10px; }
}

/* Screen heights come from svh, so they land on fractional pixels and leave a
   ~0.4px hairline between two full-bleed photos. During scroll that line falls
   on different device pixels frame to frame and reads as a flicker at the seam.
   One pixel of overlap closes it; the overlapping row is solid scrim anyway. */
.screen + .screen { margin-top: -1px; }

/* The cursor spotlight only means something when there is a cursor. On a touch
   device it froze mid-screen as a fixed green haze that the page scrolled
   under, which reads as a light following you. Gate on input, not width, so a
   narrow desktop window keeps it and a large tablet does not. */
@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
}

/* ============================================================
   MOBILE PASS 2
   ============================================================ */

/* Compact store buttons in the bar. Hidden on desktop, where the labelled
   App Store badge already sits in the same slot. */
.header-stores { display: none; }

.header-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text-main);
  flex: none;
}

.header-store svg { width: 19px; height: 19px; }

.header-store.is-soon {
  background: rgba(11, 15, 23, 0.6);
  border-color: var(--glass-border);
  opacity: 0.55;
}

@media (max-width: 720px) {
  .header-stores { display: flex; gap: 7px; }
  .nav-actions { gap: 10px; }

  /* The dropdown was pinned to the old 76px bar, so a 12px strip of page
     showed between the two and read as a stray line. */
  .nav-links {
    top: 100%;
    padding: 18px 20px;
    gap: 14px;
    border-top: 1px solid var(--glass-border);
  }

  /* Asked for: the bar stays put on a phone, the two store buttons are the
     primary action and should never scroll away. */
  .site-header.nav-hidden { transform: none; }
}

@media (max-width: 860px) {
  /* Header no longer hides, so the device mock-up has to start below it. */
  .screen { --media-top: clamp(74px, 10vh, 92px); }
  .screen--hero { --media-h: 32svh; }

  /* Profile switch: the parenthetical only fits on a wider screen. */
  .tab-sub { display: none; }

  .profile-toggle-bar { width: 100%; }

  .profile-tab-btn {
    flex: 1 1 0;
    padding: 12px 10px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* The last screen dissolves on a phone too; leaving it opaque made the
     grid background appear as a step instead of a fade. */
  .screen--last .screen-media {
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
}

@media (max-width: 860px) {
  /* The blurred copy of the photo used to cover the whole section at 45 %
     brightness, so above and below the sharp frame it read as a flat grey
     panel rather than as part of the picture. Now it is much darker and
     masked to the frame, so it behaves like light spilling off the photo. */
  .screen { --media-top: clamp(66px, 8.5vh, 80px); }

  .screen-media::before {
    filter: blur(34px) brightness(0.2) saturate(0.7);
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.5) calc(var(--media-top) * 0.55),
      #000 calc(var(--media-top) + var(--media-h) * 0.2),
      #000 calc(var(--media-top) + var(--media-h) * 0.78),
      transparent calc(var(--media-top) + var(--media-h) * 1.45));
    mask-image: linear-gradient(to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.5) calc(var(--media-top) * 0.55),
      #000 calc(var(--media-top) + var(--media-h) * 0.2),
      #000 calc(var(--media-top) + var(--media-h) * 0.78),
      transparent calc(var(--media-top) + var(--media-h) * 1.45));
  }

  /* The tint was the other half of the band: it painted the whole section. */
  .screen-media { background: transparent; }
}

@media (max-width: 860px) {
  /* The header is sticky and therefore already occupies flow space, so the
     section top sits under it anyway. The extra clearance was just dead space. */
  .screen { --media-top: 0px; --media-h: 46svh; }
  .screen--hero { --media-h: 38svh; }

  .screen-media img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 70%, transparent 100%);
  }
}

/* ==========================================================================
   PRICING SECTION STYLES
   ========================================================================== */
.pricing-section {
  padding: 100px 0;
  position: relative;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1140px;
  margin: 48px auto 0 auto;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: all var(--transition-medium);
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--primary-glow);
}

.pricing-card.is-popular {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(30, 41, 59, 0.65) 100%);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15);
}

.popular-badge {
  position: absolute;
  top: -14px;
  right: 24px;
  background: linear-gradient(135deg, var(--primary-emerald), #059669);
  color: #0B0F17;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.plan-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}

.plan-price {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.plan-price small {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}

.price-sub {
  font-size: 0.875rem;
  color: var(--primary-bright);
  margin-top: 6px;
}

.plan-desc {
  font-size: 0.938rem;
  color: var(--text-secondary);
  margin-top: 16px;
  margin-bottom: 28px;
  line-height: 1.5;
}

.plan-features {
  list-style: none;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}

.plan-features li {
  font-size: 0.938rem;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
}

.plan-features li.disabled {
  color: var(--text-muted);
  opacity: 0.6;
}

.feature-icon.check {
  color: var(--primary-emerald);
  font-weight: bold;
}

.feature-icon.cross {
  color: var(--text-muted);
}

.pricing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all var(--transition-fast);
  text-align: center;
}

.pricing-btn.primary-btn {
  background: linear-gradient(135deg, var(--primary-emerald), var(--primary-hover));
  color: #0B0F17;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.pricing-btn.primary-btn:hover {
  background: var(--primary-bright);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.pricing-btn.secondary-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  border: 1px solid var(--glass-border);
}

.pricing-btn.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}