/* ==========================================================================
   InstantFineTune Landing Page Stylesheet
   ========================================================================== */

/* Compatibility Base */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* User Selection Utility */
.select-none {
  -webkit-user-select: none;
  user-select: none;
}

/* Body: rich midnight-blue gradient foundation */
body {
  background: linear-gradient(160deg, #04080F 0%, #060C1A 35%, #070B18 65%, #050910 100%);
  background-attachment: fixed;
}

/* Glassmorphism Styles — blue-tinted panels */
.glass-panel {
  background: rgba(7, 10, 24, 0.78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(26, 32, 56, 0.85);
}
.glass-panel-hover:hover {
  border-color: rgba(0, 242, 254, 0.28);
  box-shadow: 0 8px 30px rgba(0, 100, 180, 0.06), 0 0 0 1px rgba(0, 242, 254, 0.06);
  transform: translateY(-2px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Atmospheric depth classes for layered navy glows */
.atmo-navy-tl {
  background: radial-gradient(ellipse 80% 60% at 15% 10%, rgba(10, 28, 80, 0.50) 0%, transparent 70%);
}
.atmo-navy-br {
  background: radial-gradient(ellipse 70% 55% at 85% 90%, rgba(8, 22, 62, 0.42) 0%, transparent 70%);
}
.atmo-cyan-hero {
  background: radial-gradient(ellipse 55% 45% at 50% 18%, rgba(0, 180, 220, 0.04) 0%, transparent 65%);
}
.atmo-navy-mid {
  background: radial-gradient(ellipse 65% 50% at 80% 48%, rgba(12, 30, 88, 0.30) 0%, transparent 70%);
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #04080F; }
::-webkit-scrollbar-thumb { background: #1A2038; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00F2FE; }

/* Text Gradients */
.text-gradient-cyan {
  background: linear-gradient(135deg, #FFFFFF 0%, #7DF9FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-accent {
  background: linear-gradient(135deg, #00F2FE 0%, #7DF9FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Radial accent glows — transparent base updated to midnight */
.radial-glow-cyan {
  background: radial-gradient(circle, rgba(0, 242, 254, 0.09) 0%, rgba(6, 10, 20, 0) 70%);
}
.radial-glow-amber {
  background: radial-gradient(circle, rgba(255, 179, 0, 0.06) 0%, rgba(6, 10, 20, 0) 70%);
}
.radial-glow-emerald {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.09) 0%, rgba(6, 10, 20, 0) 70%);
}

/* Input focus */
input:focus {
  outline: none;
  border-color: rgba(0, 242, 254, 0.5) !important;
  box-shadow: 0 0 15px rgba(0, 180, 220, 0.15);
}

/* FAQ Arrow Transition */
details[open] summary svg {
  transform: rotate(180deg);
  color: #00F2FE;
}

/* Interactive Demo console cursor */
.console-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background-color: #00F2FE;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
  margin-left: 4px;
}
@keyframes blink {
  from, to { background-color: transparent }
  50% { background-color: #00F2FE }
}

/* Smooth open/close transition for FAQ details */
details.faq-item summary { list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item .faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
details.faq-item[open] .faq-body {
  grid-template-rows: 1fr;
}
details.faq-item .faq-body-inner {
  overflow: hidden;
}
details.faq-item summary .faq-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
details.faq-item[open] summary .faq-chevron {
  transform: rotate(180deg);
}
details.faq-item {
  border-bottom: 1px solid rgba(31, 32, 38, 0.7);
}
details.faq-item:last-child { border-bottom: none; }