/* Non-critical styles placeholder: you can add more detailed theming here. */
.hero .btn { transition: transform .25s ease, box-shadow .25s ease; }

/* Anchor offset for fixed header */
:is(header, section, footer)[id] { scroll-margin-top: 84px; }
@media (min-width: 992px) {
  :is(header, section, footer)[id] { scroll-margin-top: 96px; }
}

/* Desktop hero height removed to allow adaptive height */
@media (min-width: 992px) {
  .hero { min-height: auto; }
}

/* Buttons contrast in dark hero */
.hero .btn-dark { background-color: #111827; border-color: #111827; }
.hero .btn-dark:hover { background-color: #0b1220; border-color: #0b1220; }
.hero .btn-outline-dark { color: #f8fafc; border-color: rgba(248,250,252,.35); }
.hero .btn-outline-dark:hover { color: #0f172a; background-color: #f8fafc; border-color: #f8fafc; }

/* Underline wider in hero */
.hero .hero-underline { width: 160px; }
.hero .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2,6,23,.15); }
.plan-featured { animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(37,99,235,.08) inset; } 50% { box-shadow: 0 0 0 6px rgba(34,211,238,.12) inset; } }

/* Perché un sito (Why) - expanded styles */
.why-intro { color: #475569; }
.kpi-badge { 
  background: #f1f5f9; color: #0f172a; border-radius: 999px; padding: 6px 12px; 
  font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px;
}
.kpi-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg,#2563eb,#22d3ee); display: inline-block; }

.why-card { 
  position: relative; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; 
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; 
  will-change: transform;
  background: #fff;
}
.why-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: 16px; padding: 1px; 
  background: linear-gradient(135deg, rgba(37,99,235,.0), rgba(34,211,238,.0)); -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .28s ease;
}
.why-card::before {
  /* Add standard mask for compatibility */
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
}
.why-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 44px rgba(2,6,23,.12); border-color: #bfdbfe; }
.why-card:hover::before { opacity: 1; background: linear-gradient(135deg, rgba(37,99,235,.35), rgba(34,211,238,.35)); }

.why-icon { 
  width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center; 
  background: linear-gradient(135deg,#eff6ff,#e0f2fe); color: #0f172a; 
  box-shadow: 0 6px 16px rgba(2,6,23,.06); transition: transform .25s ease;
}
.why-card:hover .why-icon { transform: translateY(-4px) rotate(-2deg); }

.why-card h3 { margin-top: 12px; margin-bottom: 8px; }
.why-card p { margin: 0 0 8px; color: #475569; }
.why-list { padding-left: 0; margin: 8px 0 0; list-style: none; }
.why-list li { display: flex; align-items: center; gap: 8px; color: #334155; margin: 6px 0; }
.why-list svg { flex: 0 0 auto; color: #16a34a; }

.why-cta .btn { transition: transform .25s ease, box-shadow .25s ease; }
.why-cta .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2,6,23,.15); }

/* Improved contrast for lead text (light hero) */
.hero .lead { color: #334155; }
/* Navbar link colors scoped to theme */
.navbar-light .nav-link { color: #0f172a; }
.navbar-light .nav-link:focus, .navbar-light .nav-link:hover { color: #0b132b; }
.navbar-dark .nav-link { color: #e5e7eb; }
.navbar-dark .nav-link:focus, .navbar-dark .nav-link:hover { color: #ffffff; }
.pw-navbar.scrolled { background: rgba(255,255,255,.92); }

/* Hero base (più azzurro + effetto) */
.hero {
  position: relative;
  overflow: hidden;
  /* Layer multi-gradient: più azzurro, mantenendo leggibilità */
  background:
    radial-gradient(1200px circle at 20% -10%, rgba(219,234,254, .85) 0%, rgba(219,234,254, 0) 60%),
    radial-gradient(900px circle at 85% 120%, rgba(224,242,254, .85) 0%, rgba(224,242,254, 0) 55%),
    linear-gradient(135deg, #ffffff 0%, #eaf2ff 55%, #dbeafe 100%);
  color: #0f172a;
  min-height: auto;
}

/* Effetto "cool": alone conic che ruota molto lentamente, molto soft */
.hero::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(147,197,253,.28), /* blue-300 */
    rgba(34,211,238,.22),  /* cyan-400 */
    rgba(147,197,253,.28),
    rgba(191,219,254,.25)
  );
  filter: blur(80px);
  opacity: .28;
  animation: heroSpin 38s linear infinite;
}

@keyframes heroSpin { to { transform: rotate(1turn) } }
.hero .container { position: relative; z-index: 1; }
.mobile-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mobile-ambient::before, .mobile-ambient::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .35;
  will-change: transform, opacity;
}
/* Neutral ambient accents (very subtle grays) */
.mobile-ambient::before {
  width: 60vmax;
  height: 60vmax;
  top: -15vmax;
  left: -10vmax;
  background: radial-gradient(closest-side, rgba(148,163,184,.22), rgba(148,163,184,0));
  animation: driftA 16s ease-in-out infinite alternate;
}
.mobile-ambient::after {
  width: 40vmax;
  height: 40vmax;
  right: -10vmax;
  bottom: -10vmax;
  background: radial-gradient(closest-side, rgba(203,213,225,.22), rgba(203,213,225,0));
  animation: driftB 14s ease-in-out infinite alternate;
}

@keyframes driftA {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(3vmax, 2vmax, 0) scale(1.05); }
  100% { transform: translate3d(6vmax, 4vmax, 0) scale(1.1); }
}
@keyframes driftB {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-2vmax, -3vmax, 0) scale(1.07); }
  100% { transform: translate3d(-4vmax, -6vmax, 0) scale(1.12); }
}

/* Reduced motion: keep visuals but stop animation */
@media (prefers-reduced-motion: reduce) {
  .mobile-ambient::before, .mobile-ambient::after { animation: none; opacity: .22; }
  .hero::before { animation: none; opacity: .18; }
}

/* Mobile hero micro-animations (neutral tones) */
.highlight-gradient {
  background: linear-gradient(90deg, #0f172a, #64748b, #94a3b8, #0f172a);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hueShift 8s ease-in-out infinite;
}

@keyframes hueShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-underline {
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8);
  background-size: 200% 100%;
  animation: underlineFlow 6s linear infinite;
}

@keyframes underlineFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -30%;
  width: 40%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg) translateX(-120%);
  animation: shineSweep 4s ease-in-out infinite;
}

.btn-shine:hover::after { animation-duration: 2s; }

@keyframes shineSweep {
  100% { transform: skewX(-25deg) translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .highlight-gradient { animation: none; }
  .hero-underline { animation: none; }
  .btn-shine::after { animation: none; opacity: .2; }
}

/* Spacing improvements and mobile enhancements */
@media (max-width: 576px) {
  .pw-navbar { padding-top: 6px; padding-bottom: 6px; }
  .navbar-brand span { font-size: 1rem; }
  .navbar-toggler { padding: .25rem .5rem; }
  /* Keep custom filter only for light navbar; dark uses Bootstrap default */
  .navbar-light .navbar-toggler-icon { filter: invert(10%) saturate(150%); }

  .hero { padding-top: 28px; padding-bottom: 24px; min-height: auto; }
  .hero .display-4 { font-size: 1.85rem; line-height: 1.2; margin-bottom: .5rem; }
  .hero .lead { font-size: 1.05rem; margin-bottom: 1rem; color: #475569; }
  .hero .btn { width: 100%; margin-bottom: .6rem; }
  .hero-mockup img { max-height: 260px; width: 100%; object-fit: cover; }

  section { padding: 56px 0; }
  .kpi-badge { font-size: 12px; padding: 4px 10px; }
  .why-card { padding: 16px; border-radius: 12px; }
  .why-icon { width: 40px; height: 40px; border-radius: 10px; }
  .why-list li { font-size: .95rem; }

  .pricing .card { margin-bottom: 12px; }
  .carousel-control-next, .carousel-control-prev { width: 20%; }
}

/* Desktop spacing refinements */
@media (min-width: 992px) {
  .hero { padding-top: 80px; padding-bottom: 80px; }
  .hero .display-4 { font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.2rem); margin-bottom: 12px; }
  .hero .lead { font-size: 1.125rem; margin-bottom: 18px; color: #475569; }
  .hero .btn + .btn { margin-left: 10px; }
  section { padding: 84px 0; }
}

/* Offcanvas mobile menu */
.offcanvas-nav .nav-link { font-size: 1.125rem; padding: 12px 0; }
.offcanvas-nav .btn { width: 100%; }

/* Cookie banner (bottom sheet) */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080; }
.cookie-card { 
  background: #ffffff; border-top: 1px solid #e5e7eb; box-shadow: 0 -10px 30px rgba(2,6,23,.12);
}
.cookie-card .form-check-label { font-size: .95rem; }
.cookie-actions .btn { min-width: 120px; }

@media (prefers-reduced-motion: no-preference) {
  .cookie-banner { transform: translateY(100%); transition: transform .4s ease; }
  .cookie-banner.show { transform: translateY(0); }
}

/* Reduce hover transforms on touch devices */
@media (hover: none) {
  .why-card:hover { transform: none; }
  .why-card:hover .why-icon { transform: none; }
}

/* Disable heavy tilt/parallax on small devices */
@media (max-width: 576px) {
  .tilt-3d { transform: none !important; will-change: auto; }
}