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

:root {
  /* Tifo brand red family — #CF2020 is the canonical brand red (matches the
     app icon, dark-theme header block, and app dark-theme accent). --red-light
     is a hover-only brighten, never used in gradients (Tifo is flat colour,
     no glows/gradients on cards or buttons). */
  --red: #CF2020;
  --red-light: #E04040;
  --red-dark: #A81818;
  --bg: #121212;
  --bg-card: #1C1C1C;
  --bg-card-hover: #232323;
  --bg-surface: #181818;
  --text: #F2EFE8;
  --text-muted: rgba(242, 239, 232, 0.5);
  --text-dim: rgba(242, 239, 232, 0.35);
  /* Two-tier border language, matching src/constants/TifoColors.ts on mobile:
     --divider = thin, low-opacity separators (nav/footer rules, pill outlines);
     --card-border = bold, near-solid card outlines. */
  --divider: rgba(242, 239, 232, 0.15);
  --card-border: #F2EFE8;
  --card-border-width: 2px;
  --border: var(--divider);
  --radius: 0;
  --radius-lg: 0;
  --radius-sm: 0;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-accent: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

[data-theme="light"] {
  --bg: #F6F3EC;
  --bg-card: #F6F3EC;
  --bg-card-hover: #EFEBE1;
  --bg-surface: #EFEBE1;
  --text: #2A2723;
  --text-muted: rgba(42, 39, 35, 0.55);
  --text-dim: rgba(42, 39, 35, 0.4);
  --divider: rgba(42, 39, 35, 0.18);
  --card-border: rgba(42, 39, 35, 0.35);
  --card-border-width: 1.5px;
  --border: var(--divider);
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

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

.text-gradient {
  color: var(--red);
}

.section-accent {
  font-family: var(--font-accent);
  font-weight: 700;
  color: var(--red);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 10px;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 560px;
  margin-bottom: 48px;
}

/* === Theme-aware images === */
.themed-img-light { display: none; }
.themed-img-dark { display: block; }
[data-theme="light"] .themed-img-light { display: block; }
[data-theme="light"] .themed-img-dark { display: none; }

/* For inline images in flex containers */
.nav-logo .themed-img-light,
.footer-logo .themed-img-light { display: none; }
.nav-logo .themed-img-dark,
.footer-logo .themed-img-dark { display: block; }
[data-theme="light"] .nav-logo .themed-img-light,
[data-theme="light"] .footer-logo .themed-img-light { display: block; }
[data-theme="light"] .nav-logo .themed-img-dark,
[data-theme="light"] .footer-logo .themed-img-dark { display: none; }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--red);
  color: #fff;
}
.btn-primary:hover {
  background: var(--red-light);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border: var(--card-border-width) solid var(--card-border);
}
.btn-outline:hover {
  border-color: var(--red);
  color: var(--red);
}

.btn-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.btn-sm { padding: 8px 20px; font-size: 0.85rem; }
.btn-lg { padding: 16px 36px; font-size: 1.1rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-icon { width: 20px; height: 20px; }

/* === Nav === */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.scrolled { border-bottom-color: var(--border); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-img { height: 72px; width: auto; }
/* Theme-aware nav logos: dark theme shows nav-logo-dark, light theme shows nav-logo-light */
.nav-logo-light { display: none; }
.nav-logo-dark { display: block; }
[data-theme="light"] .nav-logo-light { display: block; }
[data-theme="light"] .nav-logo-dark { display: none; }
/* Theme-aware footer icons */
.footer-icon-img { height: 44px; width: auto; }
.footer-icon-light { display: none; }
.footer-icon-dark { display: block; }
[data-theme="light"] .footer-icon-light { display: block; }
[data-theme="light"] .footer-icon-dark { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a:not(.btn) {
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav-links a:not(.btn):hover { color: var(--text); }

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

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border);
}
.nav-mobile a {
  color: var(--text-muted);
  font-size: 1rem;
}
.nav-mobile.open { display: flex; }

/* Hero mobile logo — hidden on desktop, shown on mobile */
.hero-mobile-logo {
  display: none;
}

/* nav-controls groups theme + hamburger together */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-inner { height: 56px; }
  .nav-logo { display: none; }

  /* Pills left, controls right */
  .nav-actions {
    flex: 1;
    justify-content: space-between;
  }

  .hero-mobile-logo {
    display: flex;
    justify-content: center;
    margin-top: -16px;
    margin-bottom: 16px;
  }
  .hero-mobile-logo-img {
    height: 100px;
    width: auto;
  }
}

/* === Hero === */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 0 60px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(207, 32, 32, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 30%, rgba(230, 57, 70, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}

.hero-accent {
  font-family: var(--font-accent);
  font-weight: 700;
  color: var(--red);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 14px;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-subtitle {
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 500px;
  margin-bottom: 32px;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.hero-ios {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 0.95rem;
}

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

.badge {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 100px;
}

/* Phone mockup */
.hero-visual { display: flex; justify-content: center; }

.phone-mockup { perspective: 1000px; }

.phone-frame {
  width: 280px;
  height: 580px;
  background: var(--bg-card);
  border-radius: 36px;
  border: 4px solid var(--card-border);
  padding: 12px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 80px rgba(207, 32, 32, 0.1);
  transform: rotateY(-5deg) rotateX(2deg);
  transition: transform 0.5s ease;
}
.phone-frame:hover { transform: rotateY(0deg) rotateX(0deg); }

.phone-screen {
  width: 100%;
  height: 100%;
  background: #1a1a2e;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-placeholder {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.phone-placeholder-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 16px;
  opacity: 0.6;
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}
.hero-scroll a { color: var(--text-dim); }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-badges { justify-content: center; }
  .hero-visual { margin-top: 20px; }
  .phone-frame { width: 240px; height: 500px; transform: none; }
}

/* === Features === */
/* Mirrors DiagonalHeader.tsx on mobile: dark theme's header block is red,
   light theme's is ink — same per-theme logic applied to this section cut. */
.diagonal-divider {
  height: 72px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 100%);
  position: relative;
  z-index: 1;
}
[data-theme="light"] .diagonal-divider {
  background: var(--text);
}

.features {
  padding: 120px 0;
  background: var(--bg-surface);
}

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

.feature-card {
  background: var(--bg-card);
  border: var(--card-border-width) solid var(--card-border);
  padding: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
.feature-card:hover {
  border-color: var(--red);
  background: var(--bg-card-hover);
  transform: translateY(-4px);
}

/* Headline/flagship feature — same red-accent treatment as the Pro pricing
   card, so the one card carrying the biggest new capability reads as the
   most important one in the grid rather than blending into the other 7. */
.feature-card-pro {
  border-color: var(--red);
  grid-column: 1 / -1;
}
.feature-card-pro .feature-strip {
  background: var(--red);
}
.feature-card-pro .feature-title,
.feature-card-pro .feature-icon svg {
  color: #fff;
}
.feature-pro-tag {
  flex-shrink: 0;
  background: #fff;
  color: var(--red);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
}

.feature-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-surface);
  border-bottom: var(--card-border-width) solid var(--card-border);
}

.feature-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon svg {
  width: 24px;
  height: 24px;
  color: var(--red);
}

.feature-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 0;
}

.feature-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 20px;
}

@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }

/* === Pricing === */
.pricing {
  padding: 120px 0;
  background: var(--bg);
}

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

.pricing-card {
  background: var(--bg-card);
  border: var(--card-border-width) solid var(--card-border);
  padding: 40px 32px;
  position: relative;
}
.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--card-border);
}
.pricing-card-pro::before {
  background: var(--red);
}

.pricing-card-pro {
  border-color: var(--red);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 20px;
  border-radius: 100px;
}

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

.pricing-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pricing-amount {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 3rem;
}

.pricing-period {
  color: var(--text-muted);
  font-size: 1rem;
}

.pricing-annual {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 4px;
}

.pricing-save {
  color: var(--red);
  font-weight: 600;
}

.pricing-features {
  list-style: none;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 2.5;
  margin-top: 1px;
}
.check.pro { stroke: var(--red); }

.pricing-features strong { color: var(--text); }

@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* === Screenshots === */
.screenshots {
  padding: 120px 0;
  background: var(--bg-surface);
}

.showcase-copy {
  max-width: 620px;
  margin: 56px 0 30px;
}

.showcase-copy-portrait {
  margin-top: 72px;
}

.showcase-kicker {
  color: var(--red-light);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.showcase-copy h3 {
  margin: 8px 0 6px;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
}

.showcase-copy p {
  margin: 0;
  color: var(--text-dim);
}

.device-shell {
  position: relative;
  margin-inline: auto;
  padding: 11px;
  border: 4px solid var(--card-border);
  border-radius: 24px;
  background: #111;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.4);
}

.device-shell::before {
  content: '';
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #555;
}

.device-shell-landscape {
  width: min(100%, 920px);
  aspect-ratio: 16 / 10;
}

.device-shell-landscape::before {
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
}

.device-shell-portrait {
  width: min(100%, 315px);
  aspect-ratio: 3 / 4.8;
  border-radius: 22px;
}

.device-shell-portrait::before {
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
}

.device-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 13px;
  background: #0d0d0d;
}

.showcase-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 700px) {
  .device-shell-portrait { width: min(100%, 300px); }
}

.carousel-wrapper { position: relative; }

.screenshots-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Desktop: JS transform-based carousel */
.carousel-track-wrapper {
  overflow: hidden;
  flex: 1;
  border-radius: var(--radius-lg);
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.carousel-slide {
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

/* Landscape carousel: one wide slide per view */
[data-carousel="landscape"] .carousel-slide { flex: 0 0 100%; }

/* Portrait carousel: three narrower slides per view on desktop */
[data-carousel="portrait"] .carousel-slide { flex: 0 0 33.333%; }

@media (max-width: 900px) {
  [data-carousel="portrait"] .carousel-slide { flex: 0 0 50%; }
}

.carousel-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.carousel-btn:hover {
  border-color: var(--red-light);
  color: var(--red-light);
}
.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.carousel-btn svg { width: 20px; height: 20px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.carousel-dot.active {
  background: var(--red);
  width: 28px;
  border-radius: 5px;
}

/* Mobile: native scroll-snap, no JS transform. Placed after the base
   .carousel-btn/.carousel-slide rules above so equal-specificity overrides
   here win the cascade at narrow widths. */
@media (max-width: 600px) {
  .screenshots-carousel { gap: 0; }
  .carousel-btn { display: none; }

  .carousel-track-wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* hide scrollbar */
    scrollbar-width: none;
  }
  .carousel-track-wrapper::-webkit-scrollbar { display: none; }

  .carousel-track {
    /* disable JS transform on mobile — native scroll handles it */
    transform: none !important;
    transition: none;
    width: 100%;
  }

  [data-carousel] .carousel-slide {
    flex: 0 0 85%;
    padding: 0 8px;
    scroll-snap-align: center;
    box-sizing: border-box;
  }
}

/* === CTA Section === */
.cta-section {
  padding: 80px 0 120px;
}

.cta-card {
  background: var(--bg-card);
  border: var(--card-border-width) solid var(--card-border);
  padding: 64px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--red);
}

.cta-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.cta-subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 32px;
}

/* === Footer === */
.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}

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

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
/* .footer-icon-img is styled above in theme-aware section */

.footer-tagline {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 280px;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 14px 8px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-social-link:hover {
  color: var(--text);
  border-color: var(--red-light);
  transform: translateY(-2px);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--red-light);
  outline-offset: 3px;
}

.footer-social-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.footer-social-icon-facebook {
  background: #1877f2;
  padding-top: 3px;
}

.footer-social-icon-instagram {
  background: linear-gradient(135deg, #833ab4 5%, #e1306c 52%, #f77737 100%);
  font-size: 1.25rem;
}

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

.footer-col h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin-bottom: 16px;
  color: var(--text);
}

.footer-col a {
  display: block;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--red-light); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  text-align: center;
}
.footer-bottom p {
  color: var(--text-dim);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .footer-links { grid-template-columns: 1fr; }
}

/* === Animations === */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance animations */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

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

.hero-content {
  animation: fadeSlideUp 0.8s ease-out both;
}

.hero-content .hero-accent { animation: fadeSlideUp 0.6s 0.1s ease-out both; }
.hero-content .hero-title { animation: fadeSlideUp 0.6s 0.2s ease-out both; }
.hero-content .hero-subtitle { animation: fadeSlideUp 0.6s 0.35s ease-out both; }
.hero-content .hero-ctas { animation: fadeSlideUp 0.6s 0.5s ease-out both; }
.hero-content .hero-badges { animation: fadeSlideUp 0.6s 0.65s ease-out both; }

.hero-visual {
  animation: fadeSlideUp 0.8s 0.3s ease-out both;
}

.phone-mockup {
  animation: float 4s ease-in-out infinite;
}

/* Staggered feature cards */
.feature-card:nth-child(1) { transition-delay: 0s; }
.feature-card:nth-child(2) { transition-delay: 0.08s; }
.feature-card:nth-child(3) { transition-delay: 0.16s; }
.feature-card:nth-child(4) { transition-delay: 0.24s; }
.feature-card:nth-child(5) { transition-delay: 0.32s; }
.feature-card:nth-child(6) { transition-delay: 0.4s; }
.feature-card:nth-child(7) { transition-delay: 0.48s; }
.feature-card:nth-child(8) { transition-delay: 0.56s; }

/* Feature card hover */
.feature-card {
  transition: transform 0.3s ease, border-color 0.3s ease, opacity 0.6s ease, background 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--red);
}
.feature-icon {
  transition: transform 0.3s ease;
}
.feature-card:hover .feature-icon {
  transform: scale(1.1);
}

/* Pricing card hover */
.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
}

/* Badge subtle pulse */
.hero-trial-badge {
  animation: fadeSlideUp 0.6s 0.6s ease-out both;
}

/* Button hover lift */
.btn-primary {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
}

/* Section titles slide in */
.section-accent, .section-title, .section-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.section-accent.visible, .section-title.visible, .section-subtitle.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Screenshot images hover */
.carousel-slide {
  transition: transform 0.3s ease;
}
.carousel-slide:hover {
  transform: scale(1.02);
}

/* CTA card entrance */
.cta-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease;
}
.cta-card:hover {
  transform: translateY(-4px);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Theme Toggle === */
.theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-left: 8px;
}
.theme-toggle:hover {
  border-color: var(--red-light);
  color: var(--red-light);
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* === Light Mode Overrides === */
[data-theme="light"] .nav {
  background: rgba(245, 245, 247, 0.85);
}

/* Hero uses the app's light-theme header colour (ink, #2A2723 — same value as
   TIFO.light.headerBg in src/constants/TifoColors.ts) instead of the page's
   cream background, matching the Dashboard's DiagonalHeader. Text/logo/scroll
   hint flip to the cream tones the app uses for `onHeader` text, since they'd
   be unreadable at their normal ink-on-cream values against this dark block.
   The glow strength is left at the dark-theme tuning (no light-specific
   override) — a glow calibrated for a near-white background is too faint to
   read against ink. */
[data-theme="light"] .hero {
  background: #2A2723;
}
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-subtitle {
  color: #F6F3EC;
}
[data-theme="light"] .hero-subtitle {
  opacity: 0.75;
}
[data-theme="light"] .hero-scroll a {
  color: rgba(246, 243, 236, 0.6);
}
/* Force the white wordmark inside the now-dark hero, overriding the global
   light-theme rule (line ~188) that would otherwise show the ink-coloured
   logo made for a cream background. */
[data-theme="light"] .hero-mobile-logo .nav-logo-light {
  display: none;
}
[data-theme="light"] .hero-mobile-logo .nav-logo-dark {
  display: block;
}
/* The disabled "iOS — Coming Soon" outline button uses ink text/border by
   default, which the dark hero would swallow entirely. */
[data-theme="light"] .hero .btn-outline {
  color: #F6F3EC;
  border-color: rgba(246, 243, 236, 0.35);
}

[data-theme="light"] .phone-frame {
  box-shadow:
    0 20px 60px rgba(0,0,0,0.1),
    0 0 80px rgba(207, 32, 32, 0.05);
}

[data-theme="light"] .phone-screen {
  background: #e8e8f0;
}

[data-theme="light"] .nav-toggle span {
  background: var(--text);
}

[data-theme="light"] .hero-ios svg {
  fill: var(--text-dim);
}

/* === Screenshot images === */
.screenshot-img {
  aspect-ratio: 16/10;
  width: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: var(--card-border-width) solid var(--card-border);
  background: var(--bg-card);
}

.phone-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Tablet showcase: the current app captures are presented in a wider,
   touchline-friendly frame rather than a phone shell. Portrait captures stay
   fully visible inside the tablet with a subtle letterbox background. */
.tablet-mockup { perspective: 1000px; animation: float 4s ease-in-out infinite; }
.tablet-frame {
  width: 460px;
  height: 300px;
  max-width: 44vw;
  background: var(--bg-card);
  border-radius: 24px;
  border: 4px solid var(--card-border);
  padding: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(207, 32, 32, 0.1);
  transform: rotateY(-5deg) rotateX(2deg);
  transition: transform 0.5s ease;
}
.tablet-frame:hover { transform: rotateY(0deg) rotateX(0deg); }
.tablet-frame-landscape {
  height: auto;
  aspect-ratio: 16 / 10;
  box-sizing: border-box;
}
.tablet-screen {
  width: 100%;
  height: 100%;
  background: #1a1a2e;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tablet-screenshot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

@media (max-width: 900px) {
  .tablet-frame { width: min(440px, 82vw); max-width: none; height: auto; aspect-ratio: 16/10; }
}

/* === Hero trial badge === */
.hero-trial-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(39, 174, 96, 0.15);
  border: 1px solid rgba(39, 174, 96, 0.4);
  color: #27ae60;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === Pricing trial text === */
.pricing-trial {
  font-size: 0.85rem;
  color: #27ae60;
  margin-top: 6px;
  font-weight: 500;
}

/* === Language Toggle (pill style, mimics app) === */
.lang-pills {
  display: flex;
  gap: 4px;
  margin-right: 4px;
}
.lang-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.flag-icon {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
}
.lang-pill:hover {
  border-color: var(--red-light);
}
/* Active state */
[data-lang="mt"] .lang-pill[data-lang="mt"],
[data-lang="en"] .lang-pill[data-lang="en"] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Language visibility — default is English */
[data-lang="en"] .lang-mt { display: none !important; }
[data-lang="mt"] .lang-en { display: none !important; }