/* =========================================
   E-Prescription App Landing Page Styles
   Modern, Colorful, Animated, Professional
   ========================================= */

/* Reset & Base */
.landing-page {
  font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #334155;
  line-height: 1.6;
  overflow-x: hidden;
  background: #fff;
}

.landing-page * {
  box-sizing: border-box;
}

/* Animated Background */
.landing-bg-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: floatShape 20s infinite ease-in-out;
}

.bg-shape-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #0d9488, #7c3aed);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}

.bg-shape-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  bottom: 10%;
  left: -5%;
  animation-delay: 5s;
}

.bg-shape-3 {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  top: 50%;
  right: 20%;
  animation-delay: 10s;
}

.bg-shape-4 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #10b981, #0d9488);
  bottom: 20%;
  left: 30%;
  animation-delay: 15s;
}

@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(50px, -50px) rotate(5deg); }
  50% { transform: translate(-30px, -20px) rotate(-3deg); }
  75% { transform: translate(-40px, 30px) rotate(2deg); }
}

/* Navigation */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
  transition: all 0.3s ease;
}

.landing-nav.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

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

.landing-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0f766e;
  font-weight: 700;
  font-size: 20px;
  transition: transform 0.2s ease;
}

.landing-logo:hover {
  transform: scale(1.02);
}

.landing-logo img {
  height: 36px;
  width: auto;
  border-radius: 50%;
}

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

.landing-nav-links a {
  text-decoration: none;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.landing-nav-links a:hover {
  color: #0d9488;
}

.landing-nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0d9488, #7c3aed);
  transition: width 0.3s ease;
}

.landing-nav-links a:hover::after {
  width: 100%;
}

.landing-nav-cta {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  color: #fff !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3);
}

.landing-nav-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4) !important;
  color: #fff !important;
}

.landing-nav-cta::after {
  display: none !important;
}

/* Doctor Login button - stays outlined so it does not out-shout the filled
   "Get Started Free" CTA beside it, but now carries a highlight ring and a
   short attention pulse: the root url is the marketing page, so a doctor who
   already has an account has to be steered here rather than to sign-up. */
.landing-nav-signin {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: #fff !important;
  color: #0f766e !important;
  padding: 9px 20px !important;
  border: 2px solid #0d9488;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap;
  position: relative;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.13);
  /* Runs three times and stops - a permanent pulse reads as an error state
     and gets tuned out within seconds. */
  animation: signinAttention 2.2s ease-out 1.2s 3;
}

@keyframes signinAttention {
  0%, 100% { box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.13); }
  50%      { box-shadow: 0 0 0 9px rgba(13, 148, 136, 0.05); }
}

/* Vestibular safety, and it also keeps the button still for anyone who has
   asked the OS to stop animations. */
@media (prefers-reduced-motion: reduce) {
  .landing-nav-signin {
    animation: none;
  }
}

.landing-nav-signin:hover {
  background: #0d9488 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.28);
}

.landing-nav-signin::after {
  display: none !important;
}

.landing-nav-signin i {
  font-size: 15px;
}

.landing-mobile-menu .landing-nav-signin {
  justify-content: center;
  padding: 12px 16px !important;
  font-size: 16px;
}

.landing-mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: #334155;
  cursor: pointer;
  padding: 8px;
  transition: color 0.2s ease;
}

.landing-mobile-toggle:hover {
  color: #0d9488;
}

.landing-mobile-menu {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding: 20px;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease;
}

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

.landing-mobile-menu a {
  text-decoration: none;
  color: #475569;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.landing-mobile-menu a:hover {
  background: #f0fdfa;
  color: #0d9488;
}

.landing-mobile-menu .landing-nav-cta {
  text-align: center;
  margin-top: 8px;
}

/* Hero Section */
.landing-hero {
  padding: 140px 0 100px;
  background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 50%, #f0f9ff 100%);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.landing-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.landing-hero-content {
  animation: slideInLeft 0.8s ease-out;
}

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

.landing-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  animation: fadeInDown 0.6s ease-out;
}

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

.landing-hero-content h1 {
  font-size: 52px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.gradient-text {
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-hero-content p {
  font-size: 18px;
  color: #64748b;
  margin-bottom: 32px;
  line-height: 1.7;
  max-width: 480px;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.landing-hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.btn-landing-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-landing-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-landing-primary:hover::before {
  left: 100%;
}

.btn-landing-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(13, 148, 136, 0.4);
  color: #fff;
}

.btn-landing-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #0d9488;
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid #0d9488;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-landing-secondary:hover {
  background: #f0fdfa;
  transform: translateY(-3px);
  color: #0d9488;
  box-shadow: 0 8px 25px rgba(13, 148, 136, 0.15);
}

/* Explicit route to sign-in for a doctor who already has an account. The hero
   CTAs above it are both sign-up paths, so without this the only way in is
   spotting the nav button - which is behind the hamburger on mobile.
   Built as a card with a real button: a sentence with a link in it does not
   read as something to press. */
.landing-signin-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 26px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #d7e3ea;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
  max-width: 560px;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out 0.7s both;
}

/* Teal accent rail, drawn rather than using border-left so the card's rounded
   corner is not squared off on that edge. */
.landing-signin-hint::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0d9488 0%, #0f766e 100%);
}

.signin-hint-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

.signin-hint-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}

.signin-hint-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.signin-hint-text span {
  display: block;
  font-size: 13px;
  color: #64748b;
}

.signin-hint-btn {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.signin-hint-btn:hover,
.signin-hint-btn:focus {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.42);
}

.signin-hint-btn i {
  font-size: 12px;
}

/* Below this the three columns stop fitting side by side and the button gets
   squeezed to a sliver, so stack and let it span the card. */
@media (max-width: 560px) {
  .landing-signin-hint {
    flex-wrap: wrap;
    gap: 12px;
  }

  .signin-hint-text {
    flex: 1 1 calc(100% - 56px);
    /* The hero centres its text at this width; left-aligning keeps the copy
       tied to the icon beside it instead of drifting to the middle. */
    text-align: left;
  }

  .signin-hint-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

.landing-hero-trust {
  display: flex;
  align-items: center;
  /* The trust line names what the free plan is NOT - a trial - so it is longer
     than the two short chips it replaced. Wrapping keeps it inside a narrow
     phone instead of pushing the hero sideways; on a wide screen there is
     nothing to wrap, so the row is unchanged. */
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13px;
  color: #64748b;
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-item i {
  color: #10b981;
  font-size: 16px;
  animation: bounce 2s infinite;
}

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

.landing-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slideInRight 0.8s ease-out;
}

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

.landing-hero-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.landing-hero-image {
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
  animation: floatImage 4s ease-in-out infinite;
}

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

.landing-hero-placeholder {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #7c3aed 100%);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 25px 60px rgba(13, 148, 136, 0.3);
  position: relative;
  overflow: visible;
}

.hero-icon-circle {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin-bottom: 16px;
  animation: floatIcon 3s ease-in-out infinite;
  backdrop-filter: blur(10px);
}

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

.hero-text {
  text-align: center;
  z-index: 2;
  position: relative;
}

.hero-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
  font-size: 14px;
  opacity: 0.9;
  font-weight: 400;
}

.hero-floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: #0f172a;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: floatCard 4s ease-in-out infinite;
}

.hero-floating-card i {
  font-size: 20px;
  color: #0d9488;
}

.card-1 {
  top: 20px;
  right: -20px;
  animation-delay: 0s;
}

.card-2 {
  bottom: 40px;
  left: -30px;
  animation-delay: 1.5s;
}

.card-3 {
  bottom: 20px;
  right: 10px;
  animation-delay: 3s;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

/* Trust Bar */
.landing-trust {
  padding: 60px 0;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  z-index: 1;
}

.landing-trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}

.landing-trust-item {
  text-align: center;
  animation: fadeInUp 0.6s ease-out both;
}

.landing-trust-item:nth-child(1) { animation-delay: 0.1s; }
.landing-trust-item:nth-child(2) { animation-delay: 0.2s; }
.landing-trust-item:nth-child(3) { animation-delay: 0.3s; }
.landing-trust-item:nth-child(4) { animation-delay: 0.4s; }

/* A word rather than a counted figure, so it needs to sit on the same optical
   line as the numbers beside it without overflowing its column. */
.landing-trust-word {
  font-size: 34px;
  letter-spacing: -0.01em;
}

.landing-trust-number {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 4px;
}

.landing-trust-label {
  font-size: 14px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Sections Common */
.landing-section {
  padding: 100px 0;
  position: relative;
  z-index: 1;
}

.landing-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
  color: #0d9488;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.landing-section-header h2 {
  font-size: 36px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.landing-section-header p {
  font-size: 18px;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
}

.landing-section-alt {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Features */
.landing-features-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.landing-feature-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 36px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.landing-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0d9488, #7c3aed);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.landing-feature-card:hover::before {
  transform: scaleX(1);
}

.landing-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: #0d9488;
}

.landing-feature-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
  transition: transform 0.3s ease;
}

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

.landing-feature-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.landing-feature-card p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* How It Works */
.landing-steps {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.landing-step {
  text-align: center;
  position: relative;
}

.landing-step-number {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
  transition: transform 0.3s ease;
}

.landing-step:hover .landing-step-number {
  transform: scale(1.15) rotate(10deg);
}

.landing-step h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.landing-step p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Pricing */
.landing-pricing-grid {
  /* Four tiers now that Enterprise sits alongside the three self-serve ones.
     Widened from 1100px so the cards do not squeeze; drops to 2-up and then
     1-up below. */
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 1180px) {
  .landing-pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}

/* ===== Time & money saved ===== */
.landing-roi {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.landing-roi-panel {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.landing-roi-inputs {
  padding: 36px 32px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

.landing-roi-inputs h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.landing-roi-inputs h4 i {
  color: #0d9488;
}

.landing-roi-field {
  display: block;
  margin-bottom: 16px;
}

.landing-roi-field span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.landing-roi-field span em {
  font-style: normal;
  font-weight: 500;
  color: #94a3b8;
}

.landing-roi-field input {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-roi-field input:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.14);
}

.landing-roi-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
}

.landing-roi-results {
  padding: 36px 32px;
  background: linear-gradient(160deg, #0f766e 0%, #134e6f 55%, #4c1d95 100%);
  color: #fff;
}

.landing-roi-headline {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.landing-roi-figure {
  display: block;
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

.landing-roi-unit {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.landing-roi-sub {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.landing-roi-sub strong {
  color: #5eead4;
}

.landing-roi-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px 0;
}

.landing-roi-stat {
  text-align: center;
  padding: 16px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
}

.landing-roi-stat-value {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: #fbbf24;
}

.landing-roi-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.landing-roi-payback {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: rgba(94, 234, 212, 0.14);
  border: 1px solid rgba(94, 234, 212, 0.35);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
}

.landing-roi-payback i {
  margin-top: 3px;
  color: #5eead4;
}

.landing-roi-payback strong {
  color: #5eead4;
}

.landing-roi-results .btn-landing-primary {
  background: #fff;
  color: #0f766e;
  box-shadow: none;
}

.landing-roi-results .btn-landing-primary:hover {
  background: #f0fdfa;
  color: #0f766e;
}

.landing-roi-assumption {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.landing-roi-inline {
  width: 52px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.landing-roi-inline:focus {
  outline: none;
  border-color: #5eead4;
}

.landing-roi-where {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 48px auto 0;
  padding: 0 20px;
}

.landing-roi-where-item {
  padding: 26px 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.landing-roi-where-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}

.landing-roi-where-item i {
  font-size: 22px;
  color: #0d9488;
}

.landing-roi-where-item h4 {
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.landing-roi-where-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #64748b;
}

@media (max-width: 900px) {
  .landing-roi-panel {
    grid-template-columns: 1fr;
  }

  .landing-roi-inputs {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }

  .landing-roi-where {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .landing-roi-figure {
    font-size: 54px;
  }

  .landing-roi-split {
    grid-template-columns: 1fr;
  }
}

/* The paid storage top-up, shown in brackets beside each plan's storage line.
   Muted and one size down so it reads as an option, not as part of the plan. */
.landing-pricing-addon {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

/* Billing period toggle */
.landing-billing-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  max-width: 380px;
  margin: 0 auto 40px;
  padding: 5px;
  background: #f1f5f9;
  border-radius: 999px;
}

.landing-billing-toggle button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.landing-billing-toggle button:hover {
  color: #0f766e;
}

.landing-billing-toggle button.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.landing-billing-save {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Savings line under each price. The monthly variant is muted rather than
   hidden so the card keeps the same height when the toggle flips - otherwise
   the whole grid jumps every time a doctor compares the two options. */
.landing-pricing-save {
  min-height: 22px;
  margin: -8px 0 20px;
  font-size: 13px;
  font-weight: 700;
  color: #b45309;
}

.landing-pricing-save.is-placeholder {
  font-weight: 500;
  color: #94a3b8;
}

@media (max-width: 480px) {
  .landing-billing-toggle {
    max-width: 100%;
  }

  .landing-billing-toggle button {
    flex-direction: column;
    gap: 4px;
    padding: 9px 12px;
    font-size: 14px;
  }
}

.landing-pricing-card {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transition: all 0.4s ease;
}

.landing-pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0d9488, #7c3aed);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.landing-pricing-card:hover::before {
  transform: scaleX(1);
}

.landing-pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: #0d9488;
}

.landing-pricing-card.popular {
  border-color: #0d9488;
  box-shadow: 0 20px 50px rgba(13, 148, 136, 0.2);
  transform: scale(1.03);
  background: linear-gradient(180deg, #fff 0%, #f0fdfa 100%);
}

.landing-pricing-card.popular:hover {
  transform: scale(1.03) translateY(-8px);
}

.landing-pricing-card.popular::before {
  transform: scaleX(1);
}

.landing-pricing-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
}

.landing-pricing-card.popular .landing-pricing-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

.landing-pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  color: #fff;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}

.landing-pricing-card h3 {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.landing-pricing-price {
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
  line-height: 1;
}

.landing-pricing-price span {
  font-size: 18px;
  font-weight: 500;
  color: #64748b;
  -webkit-text-fill-color: #64748b;
}

.landing-pricing-period {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 24px;
}

.landing-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  text-align: left;
}

.landing-pricing-features li {
  padding: 10px 0;
  font-size: 14px;
  color: #475569;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.landing-pricing-features li i {
  margin-top: 3px;
  font-size: 16px;
}

.landing-pricing-features li i.fa-check-circle {
  color: #10b981;
}

.landing-pricing-features li i.fa-times-circle {
  color: #ef4444;
}

.landing-pricing-card .btn-landing-primary,
.landing-pricing-card .btn-landing-secondary {
  width: 100%;
  justify-content: center;
}

.landing-pricing-note {
  margin-top: 12px;
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

/* Payment Info */
.landing-payment-info {
  max-width: 600px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.payment-card {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  color: #fff;
  box-shadow: 0 20px 50px rgba(13, 148, 136, 0.3);
  animation: fadeInUp 0.8s ease-out;
}

.payment-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  backdrop-filter: blur(10px);
}

.payment-card h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.payment-card p {
  font-size: 15px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.payment-card strong {
  color: #fbbf24;
  font-size: 18px;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  margin-top: 12px;
}

.btn-whatsapp:hover {
  background: #128c7e;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  color: #fff;
}

.btn-whatsapp-large {
  padding: 16px 32px;
  font-size: 16px;
}

/* Testimonials */
.landing-testimonials-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.landing-testimonial-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.landing-testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.landing-testimonial-card:hover::before {
  transform: scaleX(1);
}

.landing-testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.landing-testimonial-stars {
  color: #f59e0b;
  font-size: 14px;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.landing-testimonial-text {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}

.landing-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.landing-testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.landing-testimonial-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.landing-testimonial-info span {
  font-size: 13px;
  color: #64748b;
}

.testimonial-cta {
  background: linear-gradient(135deg, #0f766e 0%, #7c3aed 100%) !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-cta::before {
  display: none;
}

.testimonial-cta-content {
  text-align: center;
  color: #fff;
}

.testimonial-cta-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  backdrop-filter: blur(10px);
}

.testimonial-cta h3 {
  color: #fff;
  margin-bottom: 8px;
  font-size: 22px;
}

.testimonial-cta p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
}

.testimonial-cta .btn-landing-primary {
  background: #fff;
  color: #0d9488;
}

.testimonial-cta .btn-landing-primary:hover {
  background: #f0fdfa;
}

/* FAQ */
.landing-faq-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.landing-faq-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.landing-faq-item:hover {
  border-color: #0d9488;
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.1);
}

.landing-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.landing-faq-question:hover {
  color: #0d9488;
}

.landing-faq-question i {
  color: #0d9488;
  transition: transform 0.3s ease;
  font-size: 14px;
}

.landing-faq-item.active .landing-faq-question i {
  transform: rotate(180deg);
}

.landing-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.landing-faq-item.active .landing-faq-answer {
  max-height: 300px;
  padding: 0 24px 20px;
}

.landing-faq-answer p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* CTA Section */
.landing-cta {
  padding: 100px 0;
  background: linear-gradient(135deg, #0f766e 0%, #7c3aed 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.landing-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/app/img/axiom-pattern.png');
  opacity: 0.05;
}

.landing-cta-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.landing-cta h2 {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}

.landing-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
}

.btn-landing-large {
  padding: 18px 48px !important;
  font-size: 18px !important;
}

.landing-cta .btn-landing-primary {
  background: #fff;
  color: #0d9488;
  font-size: 18px;
  padding: 16px 40px;
}

.landing-cta .btn-landing-primary:hover {
  background: #f0fdfa;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  color: #0d9488;
}

.landing-cta-note {
  margin-top: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* Footer */
.landing-footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 60px 0 30px;
  position: relative;
  z-index: 1;
}

.landing-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

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

.landing-footer-brand {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.landing-footer-desc {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.landing-footer-social {
  display: flex;
  gap: 12px;
}

.landing-footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.3s ease;
}

.landing-footer-social a:hover {
  background: #0d9488;
  color: #fff;
  transform: translateY(-3px);
}

.landing-footer h4 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.landing-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.landing-footer-links li {
  margin-bottom: 10px;
}

.landing-footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}

.landing-footer-links a:hover {
  color: #0d9488;
  padding-left: 4px;
}

.landing-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

.landing-footer-bottom a {
  color: #0d9488;
  text-decoration: none;
}

.landing-footer-bottom a:hover {
  text-decoration: underline;
}

/* Animations */
.landing-fade-up {
  opacity: 1;
  transform: translateY(0);
}

/* Payment Modal */
.landing-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.landing-modal {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideInUp 0.4s ease;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.landing-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.payment-modal-content {
  text-align: center;
}

.payment-modal-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 36px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(13, 148, 136, 0.3);
}

.payment-modal-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.payment-modal-plan {
  font-size: 16px;
  color: #64748b;
  margin-bottom: 24px;
}

.payment-modal-plan strong {
  color: #0d9488;
}

.payment-instructions {
  text-align: left;
  margin-bottom: 28px;
}

.payment-step {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #0d9488;
}

.step-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.step-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.step-content p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 8px;
}

.bkash-number {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px dashed #0d9488;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 700;
  color: #0d9488;
}

.bkash-number i {
  font-size: 20px;
}

.btn-landing-full {
  width: 100%;
  justify-content: center;
}

/* Responsive */
@media (max-width: 992px) {
  .landing-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .landing-hero-content p {
    max-width: 100%;
  }

  .landing-hero-buttons {
    justify-content: center;
  }

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

  .landing-hero-visual {
    order: -1;
  }

  .landing-hero-content h1 {
    font-size: 40px;
  }

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

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

  .landing-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .landing-pricing-card.popular {
    transform: none;
  }

  .landing-pricing-card.popular:hover {
    transform: translateY(-8px);
  }

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

  .landing-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .landing-nav-links {
    display: none;
  }

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

  .landing-mobile-menu {
    display: flex;
  }

  .landing-hero {
    padding: 120px 0 60px;
  }

  .landing-hero-content h1 {
    font-size: 32px;
  }

  .landing-hero-content p {
    font-size: 16px;
  }

  .hero-floating-card {
    display: none;
  }

  .landing-features-grid {
    grid-template-columns: 1fr;
  }

  .landing-steps {
    grid-template-columns: 1fr;
  }

  .landing-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .landing-footer-grid {
    grid-template-columns: 1fr;
  }

  .landing-section {
    padding: 70px 0;
  }

  .landing-section-header h2 {
    font-size: 28px;
  }

  .landing-cta h2 {
    font-size: 28px;
  }

  .landing-cta p {
    font-size: 16px;
  }

  .landing-pricing-price {
    font-size: 36px;
  }

  .landing-modal {
    padding: 24px;
  }
  
  .landing-trust-inner {
    gap: 40px;
  }
  
  .landing-trust-word {
    font-size: 26px;
  }

  .landing-trust-number {
    font-size: 32px;
  }
}

/* Demo Video Section */
.landing-demo {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
}

.landing-demo-frame {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.landing-demo-player {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 18px;
  overflow: hidden;
  /* Shown as-is until vm.demo.poster is set, so the no-poster state still
     looks deliberate rather than like a failed image. */
  background: linear-gradient(135deg, #0f766e 0%, #0f172a 55%, #7c3aed 100%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  cursor: pointer;
}

.landing-demo-player iframe,
.landing-demo-player video,
.landing-demo-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

.landing-demo-poster {
  transition: transform 0.5s ease, opacity 0.3s ease;
  opacity: 0.92;
}

.landing-demo-player:hover .landing-demo-poster {
  transform: scale(1.03);
  opacity: 1;
}

.landing-demo-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  font-size: 28px;
  padding-left: 6px; /* optically centre the triangle */
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(13, 148, 136, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: demoPulse 2.4s ease-out infinite;
}

.landing-demo-player:hover .landing-demo-play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 14px 40px rgba(13, 148, 136, 0.6);
}

@keyframes demoPulse {
  0%   { box-shadow: 0 10px 30px rgba(13, 148, 136, 0.5), 0 0 0 0 rgba(13, 148, 136, 0.45); }
  70%  { box-shadow: 0 10px 30px rgba(13, 148, 136, 0.5), 0 0 0 26px rgba(13, 148, 136, 0); }
  100% { box-shadow: 0 10px 30px rgba(13, 148, 136, 0.5), 0 0 0 0 rgba(13, 148, 136, 0); }
}

.landing-demo-duration {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.landing-demo-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .landing-demo-play {
    width: 64px;
    height: 64px;
    font-size: 22px;
  }

  .landing-demo-cta {
    flex-direction: column;
  }

  .landing-demo-cta .btn-landing-primary,
  .landing-demo-cta .btn-landing-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* Scroll fix, scoped to this page only.
   The shared app shell (theme/_layout.scss) sets body{overflow:hidden} and
   .app{height:100%} so the dashboard's own .content-wrap can own scrolling.
   The landing page isn't wrapped in .content-wrap, so it inherited the clipped
   body and couldn't scroll to the bottom. core.js toggles body.landing-page-active
   while this state is active, so this override only ever applies here. */
body.landing-page-active {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /* The shell's 50px padding-bottom is dashboard slack. Here it sat below the
     dark footer as a pale #E5E9EC strip at the very end of the page — the same
     bar login.css already zeroes for the sign-in screen. */
  padding-bottom: 0;
}

body.landing-page-active .app {
  height: auto;
  min-height: 100%;
}

/* ---------------------------------------------------------------------------
   Video testimonials ("In their own words")
   Sits above the written testimonials in #testimonials and is hidden entirely
   until vm.videoStories has an entry. Follows the demo player's shape: 16:9
   box, brand gradient behind it so the no-poster state looks deliberate
   rather than like a failed image.
   --------------------------------------------------------------------------- */
.landing-stories {
  max-width: 1200px;
  margin: 0 auto 44px;
  padding: 0 20px;
}

.landing-stories-lead {
  text-align: center;
  margin-bottom: 24px;
}

.landing-stories-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.landing-stories-lead p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 15px;
}

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

.landing-story {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.landing-story:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.landing-story-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: linear-gradient(135deg, #0f766e 0%, #0f172a 55%, #7c3aed 100%);
  overflow: hidden;
}

.landing-story-frame iframe,
.landing-story-frame video,
.landing-story-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* No poster supplied: the doctor's initial on the brand gradient. Set to the
   top-left rather than centred, because the play button owns the centre of the
   tile and the two were drawing on top of each other. */
.landing-story-blank {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 14px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.landing-story-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #0f766e;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.3);
  transition: transform 0.25s ease, background 0.25s ease;
}

.landing-story-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}

/* Nudges the triangle onto the optical centre of the circle. */
.landing-story-play i {
  margin-left: 4px;
}

.landing-story-body {
  padding: 20px 22px 22px;
}

.landing-story-quote {
  margin: 0 0 12px;
  color: #334155;
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
}

.landing-story-who strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
}

.landing-story-who span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 992px) {
  .landing-stories-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .landing-stories-grid { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   Enterprise tier: no published price, so the card sells a conversation.
   --------------------------------------------------------------------------- */
.landing-pricing-card.enterprise {
  border-color: #0f766e;
  background: linear-gradient(180deg, #f8fdfc 0%, #ffffff 60%);
}

/* Sized to sit on the same baseline as the numeric prices beside it. */
.landing-pricing-talk {
  font-size: 34px;
  color: #0f766e;
}

.landing-pricing-alt-cta {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: #0f766e;
  font-size: 14px;
  font-weight: 600;
}

.landing-pricing-alt-cta:hover {
  color: #0d9488;
  text-decoration: underline;
}

.landing-pricing-note {
  margin: 12px 0 0;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

/* Value line on the pricing cards. Replaces the old "Save X BDT" discount
   line: the price said per day, and how fast the doctor's own reclaimed time
   covers it. Given more weight than the saving ever had, because it is the
   argument that actually sells the plan. */
.landing-pricing-value {
  margin: 10px 0 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.landing-pricing-value b {
  display: block;
  font-size: 15px;
  color: #0f5c56;
}

/* ---------------------------------------------------------------------------
   Licensed-business details. A doctor moving their patient list onto someone
   else's servers is making a trust decision as much as a purchase, so the
   trade licence and a physical address are given real estate rather than
   being buried in the small print.
   --------------------------------------------------------------------------- */
.landing-legal {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.landing-legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.landing-legal-line {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.landing-legal-line strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.landing-legal-line i {
  margin-right: 5px;
  opacity: 0.75;
}

/* Same claim, restated where the money decision is actually made. */
.landing-pricing-trust {
  max-width: 1320px;
  margin: 28px auto 0;
  padding: 0 20px;
  text-align: center;
  color: #64748b;
  font-size: 13.5px;
}

.landing-pricing-trust i {
  color: #0f766e;
  margin-right: 6px;
}