/* ═══════════════════════════════════════════════════════════════
   PREMIUM DARK LANDING - Blood Pressure Awareness
   Elegant, high-tech, medical-adjacent (non-clinical)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-dark: #0a0a0b;
  --bg-charcoal: #121214;
  --bg-card: rgba(24, 24, 27, 0.6);
  --gold-100: #fef3c7;
  --gold-200: #fde68a;
  --gold-400: #fbbf24;
  --gold-500: #d4a012;
  --gold-600: #b8860b;
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --glow-gold: rgba(251, 191, 36, 0.15);
  --glass: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ═══ Background Effects ═══ */
.bg-pattern {
  position: fixed;
  inset: 0;
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(212, 160, 18, 0.12), transparent),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(251, 191, 36, 0.06), transparent),
    radial-gradient(ellipse 50% 30% at 0% 80%, rgba(251, 191, 36, 0.05), transparent);
  pointer-events: none;
  z-index: 0;
}

.bg-hex-pattern {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ═══ Layout ═══ */
.page-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

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

/* ═══ Navbar ═══ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.25rem 2rem;
  background: rgba(10, 10, 11, 0.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: all 0.4s ease;
}

.navbar.scrolled { padding: 0.75rem 2rem; }

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-200), var(--gold-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.3s, transform 0.2s;
}

.nav-links a:hover { color: var(--gold-400); transform: translateY(-1px); }

/* ═══ Disclaimer Banner (High Contrast) ═══ */
.disclaimer-banner {
  position: relative;
  background: linear-gradient(90deg, #b91c1c 0%, #dc2626 50%, #b91c1c 100%);
  background-size: 200% 100%;
  animation: disclaimer-pulse 4s ease-in-out infinite;
  padding: 1rem 2rem;
  text-align: center;
  margin-top: 70px;
  box-shadow: 0 4px 20px rgba(185, 28, 28, 0.4);
  z-index: 100;
}

@keyframes disclaimer-pulse {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.disclaimer-banner p {
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  max-width: 900px;
  margin: 0 auto;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.disclaimer-banner strong { font-weight: 800; }

/* ═══ Advertising Label ═══ */
.ad-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid var(--gold-500);
  color: var(--gold-200);
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 1rem 0;
  animation: label-glow 3s ease-in-out infinite;
}

@keyframes label-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.2); }
  50% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.35); }
}

/* ═══ Hero ═══ */
.hero {
  padding: 6rem 2rem 8rem;
  text-align: center;
  position: relative;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero .hero-content[style*="grid"] { max-width: 1100px; }

@media (max-width: 900px) {
  .hero .hero-with-product {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .hero .hero-with-product .hero-cta { justify-content: center !important; }
  .hero .product-img-wrap { order: -1; max-width: 320px; }
}

.hero-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-400);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.2s;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #fff 0%, var(--gold-200) 50%, var(--gold-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.3s;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.4s;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.5s;
}

/* ═══ Buttons ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: #0a0a0b;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(251, 191, 36, 0.4);
}

.btn-secondary {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}

.btn-secondary:hover {
  border-color: var(--gold-500);
  color: var(--gold-400);
  transform: translateY(-2px);
}

/* ═══ Wave Animation ═══ */
.wave-section {
  position: relative;
  padding: 6rem 2rem;
  overflow: hidden;
}

.wave-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' fill='none'%3E%3Cpath d='M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z' fill='rgba(18,18,20,0.8)'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  opacity: 0.6;
}

/* ═══ Section Titles ═══ */
.section-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold-500);
  margin-bottom: 1rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.section-desc {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 3rem;
}

/* ═══ Cards - Glassmorphism ═══ */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(12px);
  transition: all 0.4s ease;
}

.card:hover {
  border-color: rgba(251, 191, 36, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px var(--glow-gold);
  transform: translateY(-4px);
}

/* ═══ Trust Section ═══ */
.trust-section {
  padding: 5rem 2rem;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.trust-item {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  transition: all 0.4s ease;
}

.trust-item:hover {
  transform: translateY(-5px);
  border-color: rgba(251, 191, 36, 0.2);
}

.trust-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.trust-item span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Trust Cosa Offriamo - allineamento uniforme */
.trust-cosa {
  text-align: center;
}

.trust-cosa .section-label,
.trust-cosa .section-title {
  margin-left: auto;
  margin-right: auto;
}

.trust-cosa .section-desc {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.trust-cosa .trust-grid {
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

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

@media (max-width: 500px) {
  .trust-cosa .trust-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══ Scroll Reveal Animation ═══ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ Animations ═══ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.floating { animation: float 6s ease-in-out infinite; }

/* ═══ Footer ═══ */
.footer {
  background: var(--bg-charcoal);
  border-top: 1px solid var(--border-subtle);
  padding: 4rem 2rem 2rem;
  margin-top: 6rem;
}

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand .logo { margin-bottom: 1rem; display: inline-block; }

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 280px;
}

.footer h4 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.footer-links {
  list-style: none;
}

.footer-links li { margin-bottom: 0.75rem; }

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s;
}

.footer-links a:hover { color: var(--gold-400); }

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ═══ Cookie Banner ═══ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(18, 18, 20, 0.98);
  border-top: 1px solid var(--glass-border);
  padding: 1.5rem 2rem;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.cookie-banner.visible { transform: translateY(0); }

.cookie-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cookie-text {
  flex: 1;
  min-width: 280px;
}

.cookie-text p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.cookie-text a { color: var(--gold-400); text-decoration: underline; }

.cookie-btns {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

/* ═══ Parallax Waves ═══ */
.parallax-wave {
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, transparent, rgba(18, 18, 20, 0.6));
  pointer-events: none;
}

.wave-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  fill: rgba(18, 18, 20, 0.9);
  animation: wave-move 8s ease-in-out infinite;
}

@keyframes wave-move {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50% { transform: translateX(-2%) scaleY(1.02); }
}

/* ═══ Product Image ═══ */
.product-img-wrap {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}

.product-img-wrap img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(251,191,36,0.08);
  border: 1px solid var(--glass-border);
  background: var(--glass);
}

.product-img-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(251,191,36,0.2), transparent 50%, rgba(251,191,36,0.1));
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}

.product-img-wrap:hover::before { opacity: 1; }

.product-img-wrap img { position: relative; z-index: 1; }

/* ═══ Button micro-interactions ═══ */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn:hover::before { opacity: 1; }

/* ═══ Card glow on hover ═══ */
.card { position: relative; }

.awareness-section {
  text-align: center;
}

.awareness-section .section-label,
.awareness-section .section-title {
  margin-left: auto;
  margin-right: auto;
}

.awareness-section .section-desc {
  max-width: 700px;
}

.awareness-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch;
}

.awareness-cards .card {
  display: flex;
  flex-direction: column;
  min-height: 140px;
}

.awareness-cards .card h3 {
  color: var(--gold-400);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.awareness-cards .card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  flex: 1;
}

@media (max-width: 768px) {
  .awareness-cards { grid-template-columns: 1fr; }
}

/* ═══ Fonti Section - allineamento uniforme ═══ */
.fonti-section {
  text-align: center;
}

.fonti-section .section-label,
.fonti-section .section-title {
  margin-left: auto;
  margin-right: auto;
}

.fonti-section .section-desc {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.fonti-section .card {
  width: 100%;
  text-align: left;
}


/* ═══ Mobile nav toggle ═══ */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--gold-400);
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 10, 11, 0.98);
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
    border-top: 1px solid var(--border-subtle);
  }
  .nav-links.open { display: flex; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-brand p { max-width: none; }
  .hero { padding: 4rem 1.5rem 6rem; }
  .cookie-inner { flex-direction: column; text-align: center; }
  .disclaimer-banner p { font-size: 0.85rem; }
}