/*
  pricing-cinematic.css
  Dark, smoky, high-contrast pricing section with burnt-orange accents and cyan outlines.
  Notes:
  - Section root: #pricing-cinematic
  - Uses CSS variables for easy theming
  - Works with reveal-on-scroll via .reveal-in class (set by JS)
  - Keep responsive and accessible
*/

:root {
  --tjm-bg: #0a0a0b;
  --tjm-surface: rgba(255,255,255,0.05);
  --tjm-border: rgba(255,255,255,0.1);
  --tjm-ring: rgba(255,255,255,0.1);
  --tjm-text: #e5e7eb;
  --tjm-text-dim: #a1a1aa;
  --tjm-black50: rgba(0,0,0,0.5);
  --tjm-accent: #ff6a1a; /* burnt orange */
  --tjm-secondary: #22d3ee; /* cyan */
}

/* Section shell */
#pricing-cinematic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--tjm-text);
  background: radial-gradient(1200px 600px at 70% 120%, rgba(255,106,26,0.18), transparent 60%),
              radial-gradient(900px 500px at 10% -10%, rgba(34,211,238,0.12), transparent 60%),
              linear-gradient(0deg, rgba(0,0,0,0.82), rgba(10,10,11,0.95));
  border-radius: 20px;
  outline: 1px solid var(--tjm-ring);
  margin-top: 0; /* ensure no extra gap above section */
  padding-top: 0; /* section itself contributes no top padding */
}

#pricing-cinematic h1,
#pricing-cinematic h2,
#pricing-cinematic h3,
#pricing-cinematic h4,
#pricing-cinematic h5,
#pricing-cinematic h6,
#pricing-cinematic p,
#pricing-cinematic li,
#pricing-cinematic a {
  color: var(--tjm-text) !important;
}

#pricing-cinematic .subtle { color: var(--tjm-text-dim) !important; }

#pricing-cinematic { padding-top: 0 !important; margin-top: 0 !important; }

#pricing-cinematic .inner {
  padding: 12px 24px 16px 24px;
}

@media (min-width: 640px) { #pricing-cinematic .inner { padding: 14px 40px 16px 40px; } }
@media (min-width: 768px) { #pricing-cinematic .inner { padding: 16px 56px 16px 56px; } }
@media (min-width: 1024px){ #pricing-cinematic .inner { padding: 18px 80px 16px 80px; } }

/* Reduce top gap on hero block specifically */
#pricing-cinematic .inner.hero {
  padding-top: 0; /* nearly flush to top */
  padding-bottom: 8px; /* tighter bottom spacing */
  text-align: center; /* center hero content */
}
@media (min-width: 768px){
  #pricing-cinematic .inner.hero { padding-top: 0; }
}
@media (min-width: 1024px){
  #pricing-cinematic .inner.hero { padding-top: 0; }
}

/* Remove any collapsing top margin from the first child in hero block */
#pricing-cinematic .inner.hero > :first-child { margin-top: 0; }

/* Hero */
#pricing-cinematic .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--tjm-surface); border: 1px solid var(--tjm-border);
  color: #d4d4d8; font-size: 12px; backdrop-filter: blur(6px);
}

#pricing-cinematic .inner.hero .pill { display: none; }

#pricing-cinematic h1 {
  margin-top: 0; font-family: 'Cinzel', serif; font-weight: 600;
  line-height: 1.1; text-shadow: 0 3px 6px rgba(0,0,0,0.8);
}
/* Pull hero title to the very top */
#pricing-cinematic .inner.hero h1 { margin-top: 0; }

/* Ensure pill sits tight to the top in hero */
#pricing-cinematic .inner.hero .pill { margin-top: 0; }

#pricing-cinematic .hero p { margin-top: 8px; color: var(--tjm-text); max-width: 48ch; margin-left:auto; margin-right:auto; }

/* Center block-level children in hero (pill, tabs container, etc.) */
#pricing-cinematic .inner.hero > * { margin-left: auto; margin-right: auto; }

/* Tabs */
#pricing-cinematic .tabs {
  display: inline-grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px; padding: 6px; border-radius: 12px;
  background: var(--tjm-surface); border: 1px solid var(--tjm-border);
  backdrop-filter: blur(6px);
}

#pricing-cinematic .tab-btn { 
  display: flex; align-items: center; gap: 8px; 
  padding: 8px 14px; border-radius: 10px; font-size: 14px; 
  color: #d4d4d8; outline: 1px solid var(--tjm-border);
  background: transparent; transition: background .25s ease, color .25s ease;
}
#pricing-cinematic .tab-btn.active {
  color: #fff; background: color-mix(in srgb, var(--tjm-accent) 15%, transparent);
  outline-color: var(--tjm-accent);
}
#pricing-cinematic .tab-btn:not(.active):hover { background: rgba(255,255,255,0.06); color: #fff; }

/* Layouts */
#pricing-cinematic .section { padding-bottom: 12px; }
#pricing-cinematic .subtle { color: var(--tjm-text-dim); }

#pricing-cinematic .grid-3 { display: grid; gap: 16px; }
@media (min-width: 768px) { #pricing-cinematic .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Plan cards */
.plan-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border-radius: 16px; padding: 24px; backdrop-filter: blur(6px);
  background: var(--tjm-surface); border: 1px solid var(--tjm-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  transition: outline-width .25s ease, transform .25s ease;
  outline: 1px solid var(--tjm-ring);
}
.plan-card:hover { outline-width: 2px; transform: translateY(-2px); }
.plan-card .badge {
  position: absolute; right: 16px; top: -10px; 
  background: var(--tjm-accent); color: #000; 
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(255,106,26,0.5);
}
.plan-card h3 { font-weight: 600; }
.plan-card p.note { margin-top: 4px; font-size: 14px; color: var(--tjm-text-dim); }

.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.price-box { text-align: center; border: 1px solid var(--tjm-border); background: rgba(0,0,0,0.3); border-radius: 10px; padding: 12px; }
.price-box .label { font-size: 11px; text-transform: uppercase; color: var(--tjm-text-dim); letter-spacing: .08em; }
.price-box .value { margin-top: 6px; font-size: 22px; font-weight: 700; }
.price-box .cadence { font-size: 11px; color: var(--tjm-text-dim); }
.price-box.outlined { outline: 1px solid var(--tjm-accent); }

.plan-features { margin-top: 16px; display: grid; gap: 10px; }
.plan-features li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #e5e5e5; }
.plan-features li .dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 3px; }

/* Buttons */
.btn-primary-glow {
  display: inline-flex; align-items: center; gap: 6px; 
  border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; color: #000;
  background: linear-gradient(180deg, var(--tjm-accent) 0%, #d85511 100%);
  box-shadow: 0 10px 30px -10px rgba(255,106,26,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-outline-soft {
  display: inline-flex; align-items: center; gap: 6px; 
  border-radius: 10px; padding: 10px 14px; font-size: 14px; color: #fff; 
  border: 1px solid color-mix(in srgb, var(--tjm-accent) 40%, transparent);
  background: transparent;
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; 
  border-radius: 10px; padding: 10px 14px; font-size: 14px; color: #d4d4d8; 
  border: 1px solid var(--tjm-border); background: var(--tjm-surface);
}

/* Solutions grid */
.solution-card {
  border-radius: 16px; padding: 20px; backdrop-filter: blur(6px);
  background: var(--tjm-surface); border: 1px solid var(--tjm-border);
  outline: 1px solid var(--tjm-ring);
}

/* Reveal animation */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(0.22, 1, 0.36, 1), transform .6s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-in { opacity: 1 !important; transform: translateY(0) !important; }

/* Ember float (subtle) */
@keyframes emberFloat { 0%{ transform: translateY(0) translateX(0) scale(1); opacity: 0; } 10%{ opacity:.5;} 100%{ transform: translateY(-120vh) translateX(20px) scale(1.5); opacity: 0; } }
#pricing-cinematic .embers span {
  position: absolute; display: block; width: 4px; height: 4px; border-radius: 999px; opacity: .3; filter: blur(.5px);
  animation: emberFloat 12s linear infinite;
}

/* Safety override: if JS reveal fails or is delayed, never leave content hidden. */
#pricing-cinematic [data-reveal] { opacity: 1 !important; transform: none !important; }