/* enhanced.css
   Progressive enhancement styles for the enhanced UI.
   - Theme variables (neon / tech palette)
   - Hero, cards, reveal, testimonials (desktop + mobile stacking)
   - Feature tiles, modal notes, badge burst canvas
   - Footer improvements and mobile sticky CTA
   - Accessibility: respects prefers-reduced-motion, focus styles, larger tap targets on mobile
*/

/* Theme variables (neon / tech palette) */
:root{
  --bg: #001022;
  --panel: rgba(255,255,255,0.02);
  --accent: #00fff7;
  --accent2: #ffe156;
  --neon-1: #00fff7;
  --neon-2: #8aff7a;
  --neon-3: #ffd36a;
  --glass: rgba(255,255,255,0.03);
  --muted: #b8dce8;
  --text-on-accent: #081227;
  --footer-bg: linear-gradient(180deg, rgba(2,8,20,0.98), rgba(2,8,20,0.96));
}

/* -------------------------------------------
   Global / header glow
   ------------------------------------------- */
.header-wrap::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 16%;
  width: 70%;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,255,247,0.06) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
  filter: blur(28px);
  z-index: 0;
}

/* -------------------------------------------
   Typography helpers
   ------------------------------------------- */
.title { font-family: 'Poppins', 'Inter', Arial, sans-serif; }
body { font-family: 'Inter', Roboto, Arial, sans-serif; }

/* -------------------------------------------
   Hero badge + burst affordance
   ------------------------------------------- */
.hero-badge{
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s;
  cursor: pointer;
  outline: none;
}
.hero-badge:hover,
.hero-badge:focus{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0,255,247,0.14);
}

/* Make the badge clearly visible on small screens */
@media (max-width: 600px) {
  .hero-badge{ padding:6px 10px; font-size:0.95rem; }
}

/* -------------------------------------------
   Hero depth & performance
   ------------------------------------------- */
.hero-card{
  perspective: 1200px;
  will-change: transform;
}
.hero-inner{ will-change: transform; transition: transform .6s cubic-bezier(.2,.9,.3,1); }

/* subtle shine (disabled by prefers-reduced-motion) */
.hero-shine{ pointer-events:none; }

/* -------------------------------------------
   Reveal animations (GSAP/Intersection friendly)
   - Uses .fade-in and .visible classes
   ------------------------------------------- */
.fade-in{
  opacity:0;
  transform:translateY(16px) scale(.995);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1);
}
.fade-in.visible{
  opacity:1;
  transform:none;
}

/* -------------------------------------------
   Testimonials (desktop: single-slide absolute; mobile: stacked flow)
   - Server renders semantic list; JS toggles .visible and aria-hidden
   - Mobile stacks for readability and touch comfort
   ------------------------------------------- */
#testiList{
  position:relative;
  min-height:92px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-radius:12px;
  padding:0;
  overflow:hidden;
}
#testiList .testi-item{
  padding:12px;
  transition: opacity .35s ease, transform .28s ease;
  position:absolute;
  inset:0;
  opacity:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
#testiList .testi-item.visible{
  opacity:1;
  position:relative;
}
#testiControls{ display:flex; gap:8px; justify-content:center; margin-top:12px; align-items:center; }
#testiControls .btn{ min-width:72px; }

/* Indicators */
#testiIndicators{ display:flex; gap:8px; align-items:center; }
#testiIndicators .active{ box-shadow: 0 6px 22px rgba(0,255,247,0.08); }

/* -------------------------------------------
   Mobile responsiveness: stack testimonials
   - On smaller viewports we abandon the single-slide absolute layout
     and allow testimonials to flow/stack for natural scrolling.
   - Controls reflow: indicators remain accessible but are more compact.
   ------------------------------------------- */
@media (max-width: 900px) {
  #testiList{
    position:relative;
    min-height:unset;
    padding:10px;
    overflow:visible;
  }

  /* Make all items flow naturally and be visible (improves readability & accessibility) */
  #testiList .testi-item{
    position:relative !important;
    opacity:1 !important;
    transition:none !important;
    display:block;
    padding:14px;
    border-radius:8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
    margin-bottom:10px;
  }

  /* De-emphasize absolute-style visible toggling on mobile (but JS still updates aria-hidden) */
  #testiList .testi-item[aria-hidden="true"]{ opacity:1 !important; }

  /* Controls: compact, wrap on small screens */
  #testiControls{ gap:8px; justify-content:space-between; flex-wrap:wrap; align-items:center; padding:6px 10px; }
  #testiIndicators{ display:flex; gap:6px; justify-content:center; width:100%; order:3; margin-top:6px; }

  /* Make indicator buttons bigger & friendlier to tap */
  #testiIndicators .btn{ min-width:36px; padding:7px 10px; font-size:0.92rem; }
  #testiControls .btn{ min-width:56px; padding:8px 12px; }

  /* Reduce visual weight of per-item box on very narrow screens */
  @media (max-width: 420px) {
    #testiList .testi-item{ padding:12px; margin-bottom:8px; }
    #testiIndicators .btn{ padding:6px 8px; font-size:0.86rem; }
  }
}

/* Hide detailed controls on extra-small screens (optional) */
@media(max-width:360px){
  #testiIndicators { display:none; }
}

/* -------------------------------------------
   Feature tiles (hover lift + micro-shine)
   ------------------------------------------- */
.feature-tile{
  transition: transform .22s ease, box-shadow .22s ease, border-radius .18s;
  border-radius:10px;
  background-clip: padding-box;
}
.feature-tile:hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 36px rgba(0,255,247,0.04);
  border-radius:12px;
}

/* -------------------------------------------
   Modal notes: accessible collapse
   ------------------------------------------- */
.details-notes{ margin-top:10px; }
.details-notes summary{
  cursor:pointer;
  font-weight:700;
  padding:9px 12px;
  border-radius:6px;
  background: rgba(255,255,255,0.02);
  list-style:none;
}
.details-notes summary::-webkit-details-marker{ display:none; }
.details-notes div{
  padding:10px;
  color:var(--muted);
  max-height:220px;
  overflow:auto;
  border-radius:6px;
  background: rgba(0,0,0,0.02);
  margin-top:8px;
}

/* Make summary keyboard friendly */
.details-notes summary:focus{
  outline: 3px solid rgba(0,255,247,0.12);
  outline-offset: 3px;
}

/* -------------------------------------------
   Badge burst canvas handling
   ------------------------------------------- */
#badgeBurst{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  display:block;
  z-index:4;
}

/* -------------------------------------------
   Minor polish & accessibility helpers
   ------------------------------------------- */
.sr-only{ position:absolute; overflow:hidden; clip:rect(0 0 0 0); height:1px; width:1px; padding:0; border:0; }

.btn-outline-light-custom{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  padding:10px 14px;
  border-radius:20px;
}

/* Ensure hero shine isn't shown to reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .fade-in{ transition:none; transform:none; opacity:1; }
  .hero-badge{ transition:none; }
  .feature-tile{ transition:none; }
  .hero-shine{ display:none; }
  #badgeBurst{ display:none !important; }
  /* Collapses remain usable without animations */
}

/* -------------------------------------------
   Color contrast adjustments (buttons, controls)
   ------------------------------------------- */
.btn-sm.btn-outline-light{ color: #e6f7ff; border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.01); }
.btn-sm.btn-light{ background:#fff; color:#081227; border-radius:6px; padding:6px 8px; }

.badge{ font-weight:700; letter-spacing:0.2px; }

/* -------------------------------------------
   Small-screen adjustments for layout & spacing
   ------------------------------------------- */
@media(max-width:520px){
  .hero{ padding:16px; }
  .title{ font-size:1.5rem; }
  .hero-cta{ gap:8px; }
  .feature-img{ padding:6px; }
}

/* -------------------------------------------
   Footer improvements & mobile sticky CTA
   ------------------------------------------- */

/* Footer base */
.footer{
  background: var(--footer-bg);
  border-top: 1px solid rgba(255,255,255,0.04);
  padding: 28px 20px;
  color: #d7eaf0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* layout grid for footer content (desktop) */
.footer .footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Logo and short description column */
.footer .brand {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer .brand .logo {
  display:flex;
  align-items:center;
  gap:10px;
}
.footer .brand .desc {
  color: #b9dbe6;
  opacity: 0.95;
  max-width: 46ch;
  font-size: 0.95rem;
}

/* Links column */
.footer .links {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer .links a {
  color: #cfeef7;
  opacity: 0.95;
  text-decoration: none;
}
.footer .links a:hover, .footer .links a:focus {
  color: var(--accent);
  text-decoration: underline;
  outline: none;
}

/* Newsletter / register column */
.footer .newsletter {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}
.footer .newsletter p { color: #b8dce8; margin:0; }
.footer .newsletter .cta-btn {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: var(--text-on-accent);
  border: none;
  padding: 10px 14px;
  border-radius: 22px;
  font-weight:700;
  cursor:pointer;
}
.footer .newsletter .cta-btn:focus {
  outline: 3px solid rgba(0,255,247,0.12);
  outline-offset: 3px;
}

/* bottom row: legal & copyright */
.footer .footer-bottom {
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:space-between;
  align-items:center;
  color:#9fbfdc;
  font-size:0.88rem;
}

/* social icons */
.footer .social { display:flex; gap:8px; align-items:center; }
.footer .social a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;border-radius:8px;
  background: rgba(255,255,255,0.02);
  color:#e6f7ff;
  text-decoration:none;
}
.footer .social a:focus { outline: 3px solid rgba(0,255,247,0.12); outline-offset: 3px; }

/* contrast tweak for small legal text */
.footer small { color:#95c3d6; }

/* Responsive reflow for smaller screens */
@media (max-width: 900px) {
  .footer .footer-inner {
    grid-template-columns: 1fr;
    gap:12px;
  }
  .footer .newsletter { align-items: flex-start; }
  .footer .brand .desc { max-width: none; }
  .footer .footer-bottom { flex-direction:column; align-items:flex-start; gap:6px; }
}

/* Mobile sticky CTA (compact) */
.mobile-sticky-cta {
  display:none;
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:1200;
  background: linear-gradient(90deg, rgba(2,8,20,0.96), rgba(8,16,32,0.95));
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  padding:10px;
  border-radius:14px;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

/* Buttons inside sticky CTA */
.mobile-sticky-cta .btn {
  flex:1 1 auto;
  margin-left:6px;
  margin-right:6px;
}
.mobile-sticky-cta .btn:first-child { margin-left:0; }
.mobile-sticky-cta .btn:last-child { margin-right:0; }

/* Only show on small screens */
@media (max-width: 768px) {
  .mobile-sticky-cta { display:flex; }
}

/* -------------------------------------------
   End of enhanced styles
   ------------------------------------------- */