/* Marketing page animations and micro-interactions */
:root{
  --accent: #6366f1; /* indigo-500 */
}

/* Parisienne font for hero */
.font-parisienne{ 
  font-family: 'Parisienne', cursive;
  font-weight: 300; /* use a thinner weight to avoid a bold look */
  font-style: normal;
  letter-spacing: 0.02em;
}

.reveal, .reveal-card{
  opacity: 0;
  transform: translateY(18px) scale(0.995);
  transition: opacity 560ms cubic-bezier(.2,.9,.2,1), transform 560ms cubic-bezier(.2,.9,.2,1), box-shadow 360ms ease;
  will-change: opacity, transform;
}
.reveal.visible, .reveal-card.visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Cards subtle lift on hover */
.reveal-card:hover{
  /* Hover lift disabled per request: keep cards static on hover */
  transform: none !important;
  box-shadow: none !important;
}

/* CTA button micro animation */
.btn-cta{
  position: relative;
  overflow: hidden;
  /* Modern black -> gray gradient */
  background: linear-gradient(90deg, #0b0f12 0%, #2f3336 100%);
  color: #fff;
  border: none;
  box-shadow: 0 12px 28px rgba(2,6,23,0.36);
  border-radius: 10px;
  padding: 0.7rem 1.1rem;
  font-weight: 600;
}
.btn-cta::after{
  content: "";
  position: absolute;
  left: -40%;
  top: -20%;
  width: 30%;
  height: 140%;
  background: linear-gradient(120deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05), rgba(255,255,255,0.25));
  transform: rotate(22deg) translateX(-120%);
  transition: transform 650ms cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}
.btn-cta:hover::after{ transform: rotate(22deg) translateX(220%); }

/* btn-cta hover and small variant */
.btn-cta:hover{
  transform: translateY(-4px);
  filter: brightness(1.06);
}
.btn-cta.small{
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* Reduce sheen on small header CTA to avoid overpowering glow */
.btn-cta.small::after{
  left: -30%;
  top: -10%;
  width: 18%;
  height: 120%;
  background: linear-gradient(120deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03), rgba(255,255,255,0.12));
  transition: transform 420ms cubic-bezier(.2,.9,.2,1);
}

/* Dark mode: invert CTA to white background with dark text */
.dark .btn-cta{
  background: #ffffff;
  color: #0b0f12;
  box-shadow: 0 10px 24px rgba(2,6,23,0.06);
}

/* Slightly different sheen for dark/light variants */
.dark .btn-cta::after{ background: linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02), rgba(255,255,255,0.08)); }
.btn-cta::after{ background: linear-gradient(120deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05), rgba(255,255,255,0.16)); }

/* Header login tuning to match CTA height */
.header-login{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  padding-left: .9rem !important;
  padding-right: .9rem !important;
  border-width: 2px !important; /* restored original thickness */
  border-radius: 10px !important;
}

/* Ensure dark mode header login looks correct */
.dark .header-login{
  background: transparent !important;
}

/* Header login: explicit color/border depending on theme */
.header-login{
  color: #000 !important;
  border-color: #000 !important;
}
.dark .header-login{
  color: #fff !important;
  border-color: #fff !important;
}

/* Header login hover styling to match site theme (neutral, not indigo) */
.header-login:hover{
  background: rgba(0,0,0,0.06);
  color: #000 !important;
  border-color: #000 !important;
}
.dark .header-login:hover{
  background: rgba(255,255,255,0.06);
  color: #fff !important;
  border-color: #fff !important;
}

/* Outline button hover */
.btn-outline{ transition: background-color 220ms ease, color 220ms ease, transform 220ms ease; }
.btn-outline:hover{ transform: translateY(-3px); }

/* Floating phone subtle bounce */
.floating-phone{
  animation: floaty 6s ease-in-out infinite alternate;
}
@keyframes floaty{
  0%{ transform: translateY(0) rotate(-0.3deg); }
  100%{ transform: translateY(-10px) rotate(0.3deg); }
}

/* Decorative gradient blobs (backdrop) */
.marketing-blobs{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}

/* Small responsive tweaks */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-card, .floating-phone { animation: none; transition: none; }
}

/* Mobile: reduce distance between header and hero section */
@media (max-width: 640px){
  .marketing-hero{
    padding-top: 2rem !important; /* reduce from py-16 (~4rem) */
    padding-bottom: 2rem !important;
  }
  .marketing-hero .font-parisienne{ font-size: 2rem; }
}

/* Modern feature icons */
.feature-icon{
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.feature-icon svg{ width: 24px; height: 24px; display:block; }
.feature-icon i{ font-size: 1.25rem; line-height:1; display:block; }
.feature-icon.indigo{ background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%); color: #4f46e5; }
.feature-icon.green{ background: linear-gradient(180deg, #ecfdf5 0%, #dcfce7 100%); color: #16a34a; }
.feature-icon.yellow{ background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%); color: #f59e0b; }
.feature-icon.blue{ background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%); color: #2563eb; }

/* Dark mode variants (subtle toned backgrounds) */
.dark .feature-icon.indigo{ background: linear-gradient(180deg, rgba(79,70,229,0.16), rgba(99,102,241,0.10)); color: #c7d2fe; }
.dark .feature-icon.green{ background: linear-gradient(180deg, rgba(16,163,74,0.14), rgba(16,163,74,0.08)); color: #bbf7d0; }
.dark .feature-icon.yellow{ background: linear-gradient(180deg, rgba(245,158,11,0.14), rgba(245,158,11,0.06)); color: #fde68a; }
.dark .feature-icon.blue{ background: linear-gradient(180deg, rgba(37,99,235,0.14), rgba(37,99,235,0.06)); color: #bfdbfe; }

/* Slight spacing tweak for feature list text */
.reveal-card > div + div { max-width: calc(100% - 56px); }

/* Hover/tap subtle lift for icon container */
.reveal-card:hover .feature-icon{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(15,23,42,0.12); }

/* Smaller icon sizes on very small screens */
@media (max-width: 420px){
  .feature-icon{ width: 44px; height: 44px; border-radius: 10px; }
  .feature-icon svg{ width: 18px; height: 18px; }
  .reveal-card > div + div { max-width: calc(100% - 48px); }
}

/* Marketing page: larger Browly logo only on marketing view */
#marketing-logo-light,
#marketing-logo-dark{
  height: 56px !important;
  width: auto !important;
}
@media (min-width: 768px){
  #marketing-logo-light,
  #marketing-logo-dark{ height: 64px !important; }
}
@media (min-width: 1024px){
  #marketing-logo-light,
  #marketing-logo-dark{ height: 72px !important; }
}

/* Disable sheen/slide-in highlight on CTA buttons */
.btn-cta::after,
.btn-cta.small::after,
.dark .btn-cta::after {
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
}

/* -----------------------------
   Status tiles (Bronze / Silver / Gold)
   ----------------------------- */
.status-grid .status-card{
  /* Make cards transparent to avoid leftover dark backgrounds when toggling themes */
  background: transparent !important;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Base border and transition for all status-card instances (used also by 3-step tiles) */
.status-card{
  border: 1px solid rgba(15,23,42,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.status-grid .status-card:hover,
.status-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(15,23,42,0.08);} 
.status-card .status-icon{
  width: 48px; height: 48px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-size:18px; color: #ffffff;
}
.status-card .status-icon i{line-height:1}

/* Status card backgrounds removed — keep only icon backgrounds to indicate status */
.status-card.black{ background: transparent !important; border-color: rgba(2,6,23,0.12); }
.status-card.black .status-icon{ background: linear-gradient(135deg,#111827,#0b1220); color:#ffffff }

.status-card.silver{ background: transparent !important; }
.status-card.silver .status-icon{ background: linear-gradient(135deg,#9ca3af,#d1d5db); color:#06142b }

.status-card.gold{ background: transparent !important; }
.status-card.gold .status-icon{ background: linear-gradient(135deg,#ffcc4d,#ffd97a); color:#3b2a00 }

/* Dark mode adjustments */

/* Dark mode adjustments - use .dark on root (html) */
.dark .status-card{ background: transparent !important; border-color: rgba(255,255,255,0.04); box-shadow:none }
.dark .status-card.black{ background: transparent !important; border-color: rgba(255,255,255,0.04); }
/* Stronger, more visible icon backgrounds in dark mode */
.dark .status-card .status-icon{ box-shadow: 0 8px 20px rgba(2,6,23,0.6); border: 1px solid rgba(255,255,255,0.04); transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.dark .status-card.black .status-icon{ background: linear-gradient(135deg, rgba(28,30,34,0.94), rgba(14,16,18,0.88)); color:#ffffff; border:1px solid rgba(255,255,255,0.06); box-shadow: 0 10px 26px rgba(0,0,0,0.6); }
.dark .status-card.silver .status-icon{ background: linear-gradient(135deg, rgba(120,128,136,0.44), rgba(92,100,108,0.28)); color:#ffffff; border:1px solid rgba(255,255,255,0.04); box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.dark .status-card.gold .status-icon{ background: linear-gradient(135deg, rgba(230,170,40,0.96), rgba(200,140,40,0.82)); color:#ffffff; border:1px solid rgba(255,215,100,0.12); box-shadow: 0 10px 26px rgba(255,170,30,0.08); }

/* Status card text color: ensure good contrast in light & dark */
.status-card{ color: #0b1220; }
.dark .status-card{ color: #e6e9ee; }

/* Force light-mode variants when html doesn't have .dark (higher specificity) */
html:not(.dark) .status-card.black{ background: linear-gradient(180deg,#0f1724 0%, #0b1220 100%); border: 1px solid rgba(2,6,23,0.12); }
html:not(.dark) .status-card.black .status-icon{ background: linear-gradient(135deg,#111827,#0b1220); color:#ffffff }

/* Status card text color: ensure good contrast in light & dark */
.status-card{ color: #0b1220; }
.dark .status-card{ color: #e6e9ee; }

@media (max-width: 640px){
  .status-grid .status-card{ padding:1rem }
  .status-card .status-icon{ width:44px;height:44px }
}

/* Step icons used in the 3-step signup section — match status icon sizing/shape */
.step-icon{
  width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#ffffff; flex-shrink:0;
}
.step-icon i{ line-height:1 }
.step-icon.indigo{ background: linear-gradient(135deg,#eef2ff,#e0e7ff); color: #4f46e5 }
.step-icon.green{ background: linear-gradient(135deg,#ecfdf5,#dcfce7); color: #16a34a }
.step-icon.yellow{ background: linear-gradient(135deg,#fffbeb,#fef3c7); color: #f59e0b }

.dark .step-icon{ box-shadow: 0 8px 20px rgba(2,6,23,0.6); border: 1px solid rgba(255,255,255,0.04); }
.dark .step-icon.indigo{ background: linear-gradient(180deg, rgba(79,70,229,0.16), rgba(99,102,241,0.10)); color: #c7d2fe }
.dark .step-icon.green{ background: linear-gradient(180deg, rgba(16,163,74,0.14), rgba(16,163,74,0.08)); color: #bbf7d0 }
.dark .step-icon.yellow{ background: linear-gradient(180deg, rgba(245,158,11,0.14), rgba(245,158,11,0.06)); color: #fde68a }

/* App view image: remove heavy box-shadow and use drop-shadow that respects transparency
   This prevents a visible white frame when the image has transparent areas. */
.marketing-app-img{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  border-radius: 16px; /* keep rounded corners */
  /* Use drop-shadow filter which respects image alpha channel */
  filter: drop-shadow(0 18px 36px rgba(2,6,23,0.24));
  -webkit-filter: drop-shadow(0 18px 36px rgba(2,6,23,0.24));
}

/* Slightly different shadow intensity in dark mode for the dark variant */
.dark #marketing-phone-dark.marketing-app-img{
  filter: drop-shadow(0 20px 44px rgba(0,0,0,0.44));
  -webkit-filter: drop-shadow(0 20px 44px rgba(0,0,0,0.44));
}

/* Light-mode specific tweak for the white image */
html:not(.dark) #marketing-phone-light.marketing-app-img{
  filter: drop-shadow(0 18px 36px rgba(2,6,23,0.18));
  -webkit-filter: drop-shadow(0 18px 36px rgba(2,6,23,0.18));
}

/* Fallback: ensure no accidental box-shadow applied by utility classes */
#marketing-phone-light, #marketing-phone-dark{ box-shadow: none !important; -webkit-box-shadow:none !important; }