/* Tombstone: large component styles moved into /css/components.css
   // removed large component style blocks from css/main.css {}
   The file now contains core layout and overrides; component-specific styles live in components.css
*/
 
/* Consolidated styles (main): primary layout & components.
   NOTE: The older css/style.css content has been merged here and then removed.
   Tombstone for removed file: // removed CSS content from css/style.css {}
   Keep variables in css/variables.css. Edit this file to change UI styles.
*/

/* Main layout */
.main{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;padding:36px 20px 80px;z-index:5}

/* LED frame common - dark */
.led-frame{
  width:1100px;
  max-width:94%;
  background: linear-gradient(180deg, rgba(10,14,18,0.6), rgba(6,9,12,0.45));
  border-radius:var(--radius);
  padding:22px;
  box-shadow: var(--shadow-dark);
  position:relative;
  border: 1px solid rgba(255,255,255,0.02);
  overflow:hidden;
  backdrop-filter: blur(6px) saturate(120%);
}

/* subtle LED border (dark) */
.led-frame::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  /* stronger subtle inner glow + animated edge band */
  box-shadow: 0 0 80px rgba(0,212,255,0.03) inset;
  mix-blend-mode:screen;
  transition:box-shadow .4s ease, transform .4s ease;
  background: linear-gradient(90deg, rgba(0,212,255,0.02), rgba(51,224,255,0.01));
  -webkit-mask: linear-gradient(#000 0 0);
}

/* LED frame hover/active accent */
.led-frame:hover::before,
.led-frame:focus-within::before{
  box-shadow: 0 0 120px rgba(0,212,255,0.06) inset, 0 0 60px rgba(51,224,255,0.03);
  transform: translateZ(0);
}

/* Lightbox / modal styles */
.lightbox{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(2,6,12,0.64);
  z-index:120;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.lightbox.open{
  opacity:1;
  pointer-events:auto;
}
.lightbox-inner{
  max-width:92%;
  max-height:86%;
  padding:18px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(51,224,255,0.06);
  background: linear-gradient(180deg, rgba(10,12,14,0.72), rgba(6,8,10,0.48));
  box-shadow: 0 40px 120px rgba(0,12,20,0.7);
}
.lightbox img{
  max-width:100%;
  max-height:72vh;
  border-radius:10px;
  object-fit:contain;
  box-shadow: 0 30px 90px rgba(0,28,45,0.6);
}
.lightbox-caption{
  color:var(--muted);
  font-size:13px;
  opacity:0.9;
}

/* Close button */
.lightbox-close{
  position:fixed;
  right:20px;
  top:18px;
  z-index:130;
  background:transparent;
  color:var(--text);
  border:1px solid rgba(255,255,255,0.04);
  width:48px;
  height:48px;
  border-radius:12px;
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 40px rgba(0,12,20,0.6);
}
.led-frame::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:12px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,180,255,0.12), transparent);
  border-radius:4px;
  opacity:.9;
  filter: blur(6px);
}

/* Animated glow for highlighted containers */
.content-animated{
  transform: translateY(8px);
  opacity:0;
  transition:transform .9s cubic-bezier(.2,.9,.25,1), opacity .9s ease, box-shadow .6s ease;
}
.content-animated.visible{
  transform:none;
  opacity:1;
  box-shadow: 0 30px 90px rgba(0,28,45,0.5);
}

/* HERO */
.hero{display:flex;justify-content:center;width:100%;position:relative;z-index:6}
.hero-frame{display:flex;flex-direction:column;align-items:flex-start;gap:8px;overflow:visible}
.hero-hero{padding:40px 34px}
.hero-title{
  font-size:56px;
  margin:6px 0 2px;
  letter-spacing:0.02em;
  color:#ffffff;
  text-shadow:
    0 0 28px rgba(0,212,255,0.12),
    0 8px 40px rgba(2,6,23,0.6);
  font-weight:900;
  font-family: "Segoe UI Black", "Inter", sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hero-sub{
  color:var(--muted);
  margin:0;
  font-weight:600;
  letter-spacing:0.01em;
  font-size:15px;
}

/* subtle LED underline */
.hero-frame::after{
  content:"";
  position:absolute;
  left:calc(50% - 220px);
  right:calc(50% - 220px);
  bottom:14px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.06), transparent);
  filter: blur(6px);
  opacity:0.9;
}

/* Slider */
.slider-wrap{display:flex;justify-content:center;width:100%}
.slider-frame{position:relative;padding:18px}
.slider{position:relative;height:560px;border-radius:12px;overflow:hidden;display:block; background:linear-gradient(180deg, rgba(8,12,16,0.4), rgba(6,9,12,0.2)); border-radius:14px; box-shadow:0 30px 80px rgba(0,8,14,0.7)}
.slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.02);
  transition:opacity 1.2s cubic-bezier(.2,.9,.25,1), transform 10s linear;
  border-radius:12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) inset;
}
.slide.active{opacity:1; transform:scale(1);}

/* Dots */
.slider-dots{
  position:absolute;
  left:18px;
  bottom:18px;
  display:flex;gap:8px;
  z-index:8;
}
.slider-dots button{
  width:12px;height:12px;border-radius:50%;border:0;
  background:rgba(255,255,255,0.06);cursor:pointer;box-shadow:0 6px 18px rgba(2,6,23,0.6);
  transition:transform .25s, background .25s;
}
.slider-dots button.active{background:var(--led); transform:scale(1.18); box-shadow:0 12px 36px rgba(0,212,255,0.12)}

/* Video */
.video-section{display:flex;justify-content:center;width:100%}
.video-frame{padding:18px; position:relative}
.promo-video{
  width:100%;
  height:540px;
  background: #000;
  border-radius:12px;
  object-fit:cover;
  box-shadow: 0 30px 90px rgba(0,12,20,0.7);
  outline: none;
  border: 1px solid rgba(0,0,0,0.18);
}
.video-controls{
  position:absolute;
  right:18px;
  bottom:22px;
  z-index:12;
}
.video-controls button{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color:var(--text);
  border:1px solid rgba(0,212,255,0.06);
  padding:8px 12px;
  border-radius:10px;
  backdrop-filter: blur(6px);
  cursor:pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  font-weight:700;
}

/* Content */
.content-section{display:flex;justify-content:center;width:100%}
.content-title{
  font-size:28px;
  margin:6px 0 2px;
  color:var(--text);
  text-shadow: 0 0 20px rgba(0,212,255,0.03);
}
.content-subtitle{margin:0 0 12px;color:var(--muted);font-weight:700}
.content-body{color:#cfe6fb;line-height:1.6;font-size:15.6px}
.content-body h4{margin-top:18px;margin-bottom:8px;color:var(--accent)}
.list{columns:2; margin:0 0 8px 0;padding-left:16px}
.list li{margin-bottom:6px}

/* WHY DENTO — manifesto module (styling + LED accent + entrance) */
.why-dento-section{display:flex;justify-content:center;width:100%}
.why-dento-container{
  padding:26px;
  position:relative;
  overflow:visible;
  border-radius:18px;
  transition:transform .6s cubic-bezier(.2,.9,.25,1), box-shadow .6s ease, opacity .6s ease;
}
/* stronger, distinctive LED band for the module */
.why-dento-container::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(60,255,130,0.06), rgba(0,212,255,0.05), rgba(255,178,77,0.04));
  box-shadow: 0 0 140px rgba(0,212,255,0.04) inset;
  mix-blend-mode:screen;
  opacity:0.95;
  z-index:0;
}
/* ensure content sits above the decorative layer */
.why-dento-container > *{ position:relative; z-index:5; }

/* Title with soft LED glow and slight scale when revealed */
.why-dento-title{
  font-size:30px;
  margin:0 0 8px 0;
  color:var(--text);
  text-shadow: 0 0 36px rgba(0,212,255,0.14), 0 12px 40px rgba(0,12,18,0.6);
  font-weight:900;
  letter-spacing:0.01em;
  transform-origin:center left;
  transition:transform .6s cubic-bezier(.2,.9,.25,1), opacity .6s ease;
}

/* Intro + basic copy */
.why-dento-intro{ color:var(--muted); font-weight:700; margin-bottom:10px; }
.why-dento-list{ margin:12px 0 14px 18px; color:#cfe6fb; line-height:1.6; font-size:15px; columns:2; }
.why-dento-list li{ margin-bottom:8px; }

/* Premium orange LED emphasis for selected benefit lines */
.why-dento-list .led-orange{
  color: var(--led-orange);
  font-weight:900;
  text-shadow: 0 0 18px rgba(255,178,77,0.14), 0 8px 28px rgba(0,0,0,0.45);
  transition: text-shadow .22s ease, color .18s ease, transform .18s ease;
}
.why-dento-list .led-orange:hover,
.why-dento-list .led-orange:focus{
  text-shadow: 0 0 28px rgba(255,178,77,0.22), 0 12px 40px rgba(0,0,0,0.45);
  transform: translateY(-2px);
}

/* Highlight block */
.why-dento-highlight{ color:#eafcff; font-weight:800; margin-top:8px; font-size:15.2px; }

/* Benefits row */
.why-dento-benefits{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.why-dento-benefits span{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  color:var(--text);
  border:1px solid rgba(255,255,255,0.03);
  font-size:13px;
  box-shadow: 0 8px 26px rgba(0,12,20,0.48);
}

/* final punch */
.why-dento-final{ margin-top:14px; color:#ffffff; font-size:15px; }

/* Entry reveal tweaks (reuses .content-animated.visible) */
.why-dento-container.content-animated{ transform:translateY(10px); opacity:0; }
.why-dento-container.content-animated.visible{ transform:none; opacity:1; }
.why-dento-container.content-animated.visible .why-dento-title{
  transform: scale(1.02);
  transition-delay:120ms;
}

/* Reflective module: DENTO — También Soluciona esto */
.reflective-section{display:flex;justify-content:center;width:100%}
.reflective-frame{
  padding:22px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(10,14,18,0.56), rgba(6,9,12,0.36));
  border:1px solid rgba(0,212,255,0.04);
  box-shadow: 0 30px 90px rgba(0,12,20,0.55);
}
.reflective-intro{ color:var(--muted); font-weight:800; margin-top:6px; margin-bottom:12px; font-size:15px; }
.reflective-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; align-items:start; margin-top:6px; }
.reflective-column{ min-height:80px; }
.reflective-small{ font-size:18px; margin:6px 0; font-weight:900; color:var(--text); letter-spacing:0.01em; }
.reflective-issues{ list-style: none; padding:0; margin:0; color:#cfe6fb; font-weight:800; line-height:1.8; }
.reflective-issues li{ padding:6px 10px; border-radius:8px; background: linear-gradient(90deg, rgba(0,212,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.02); }
.reflective-message{ color:#eafcff; font-weight:800; margin:0 0 8px; }
.reflective-cta{ color:var(--led-blue); font-weight:900; margin:0; font-size:15px; }

/* subtle visual accent */
.reflective-frame::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(0,212,255,0.02), rgba(51,224,255,0.01));
  mix-blend-mode:screen;
  z-index:0;
}

/* responsive */
@media (max-width:900px){
  .reflective-grid{ grid-template-columns:1fr; gap:12px; }
  .reflective-small{ font-size:16px; }
  .reflective-cta{ font-size:14px; }
}

/* Keyword cloud: premium floating word cloud */
.keyword-cloud-section{display:flex;justify-content:center;width:100%}
.keyword-cloud-frame{padding:20px}
.keyword-cloud-sub{margin-bottom:8px}

/* cloud container: relative field where words float */
.cloud{
  position:relative;
  width:100%;
  height:420px;
  border-radius:14px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(6,9,14,0.6), rgba(3,8,18,0.35));
  border:1px solid rgba(0,212,255,0.04);
  box-shadow: 0 30px 90px rgba(0,12,20,0.6);
  padding:18px;
  display:block;
  isolation:isolate;
}

/* each word: absolute positioned, subtle LED glow and smooth transitions */
.cloud-word{
  position:absolute;
  display:inline-block;
  color:rgba(235,245,255,0.96);
  font-weight:800;
  letter-spacing:0.01em;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial;
  text-shadow: 0 0 8px rgba(0,212,255,0.04);
  transition: transform 320ms cubic-bezier(.2,.9,.25,1), color 280ms ease, text-shadow 280ms ease, filter 320ms ease;
  cursor:default;
  user-select:none;
  will-change:transform, left, top;
  padding:6px 8px;
  border-radius:8px;
  white-space:nowrap;
  perspective: 400px;
  transform-origin:center center;
  outline:none;
}

/* hover / focus interaction: premium LED intensify */
.cloud-word:hover,
.cloud-word:focus{
  z-index:40;
  transform: scale(1.14) translateZ(10px);
  color: var(--led);
  text-shadow:
    0 0 18px rgba(0,212,255,0.22),
    0 10px 40px rgba(0,12,18,0.36);
  filter: brightness(1.06) saturate(1.1);
}

/* subtle size variants via data-size attribute */
.cloud-word[data-size="1.6"]{ font-size:30px; opacity:1; }
.cloud-word[data-size="1.3"]{ font-size:24px; opacity:0.98; }
.cloud-word[data-size="1.25"]{ font-size:22px; opacity:0.98; }
.cloud-word[data-size="1.2"]{ font-size:20px; opacity:0.96; }
.cloud-word[data-size="1.15"]{ font-size:18px; opacity:0.95; }
.cloud-word[data-size="1.1"]{ font-size:16px; opacity:0.92; }
.cloud-word[data-size="1.05"]{ font-size:15px; opacity:0.9; }
.cloud-word[data-size="1.0"]{ font-size:14px; opacity:0.86; }
.cloud-word[data-size="0.95"]{ font-size:13px; opacity:0.82; }

/* responsive */
@media (max-width:900px){
  .cloud{height:340px;padding:12px}
  .cloud-word[data-size="1.6"]{font-size:26px}
  .cloud-word[data-size="1.3"]{font-size:20px}
  .cloud-word[data-size="1.2"]{font-size:18px}
  .cloud-word{padding:4px 6px}
}

/* responsive adjustments */
@media (max-width:900px){
  .why-dento-list{ columns:1; }
  .why-dento-title{ font-size:22px; }
  .why-dento-benefits span{ font-size:12px; padding:8px 10px; }
}

/* FAQ + Gallery styles */
.faq-section{display:flex;justify-content:center;width:100%}
.faq-frame{padding:18px}
.faq-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.faq-item{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.02);background:linear-gradient(180deg, rgba(8,10,12,0.4), rgba(6,8,10,0.2));}
.faq-q{
  width:100%;
  text-align:left;
  padding:14px 18px;
  background:transparent;
  color:var(--text);
  font-weight:700;
  border:0;
  outline:none;
  cursor:pointer;
  font-size:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.faq-q::after{
  content:"+";
  color:var(--muted);
  font-weight:800;
  transition:transform .28s ease;
}
/* support both legacy .faq-item and .faq-card modular cards */
.faq-item.open .faq-q::after,
.faq-card.open .faq-q::after{ content:"−"; transform:rotate(0deg); color:var(--led) }

.faq-a{
  max-height:0;
  overflow:hidden;
  padding:0 18px;
  color:#cfe6fb;
  font-size:14.6px;
  line-height:1.6;
  transition:max-height .36s cubic-bezier(.2,.9,.25,1), padding .28s ease;
}
/* apply expanded panel styles to both legacy .faq-item and .faq-card */
.faq-item.open .faq-a,
.faq-card.open .faq-a{ padding:12px 18px 18px; max-height:320px; }

/* Gallery grid */
.gallery-section{display:flex;justify-content:center;width:100%}
.gallery-frame{padding:18px}
.gallery-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.gallery-item{display:block;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);box-shadow:0 12px 40px rgba(0,12,20,0.6);background:#050607}
.gallery-item img{width:100%;height:120px;object-fit:cover;display:block;transition:transform .28s ease, filter .28s ease;filter:grayscale(8%);transform:scale(1)}
.gallery-item:hover img{transform:scale(1.03);filter:grayscale(0%);box-shadow:0 20px 60px rgba(0,212,255,0.04)}

/* responsive adjustments for gallery & faq */
@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item img{height:160px}
}

.personalization{
  border-radius:14px;
  padding:18px;
  background: linear-gradient(180deg, rgba(12,16,20,0.6), rgba(8,12,16,0.4));
  box-shadow: 0 24px 80px rgba(0,24,40,0.6);
  border: 1px solid rgba(51,224,255,0.06);
  position:relative;
}
.personalization::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow: 0 0 80px rgba(51,224,255,0.06) inset;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* Reviews styles */
.reviews-section{display:flex;justify-content:center;width:100%}
.reviews-frame{padding:18px;margin-top:12px}
.reviews-sub{color:var(--muted);margin-top:6px;margin-bottom:12px;font-weight:600}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:12px;
}
@media (min-width:1100px){
  .reviews-grid{grid-template-columns:repeat(4,1fr)}
}
.review-card{
  background:linear-gradient(180deg, rgba(8,10,12,0.36), rgba(6,8,10,0.18));
  border:1px solid rgba(255,255,255,0.03);
  padding:16px;border-radius:12px;box-shadow:0 18px 60px rgba(0,12,20,0.55);
  display:flex;flex-direction:column;gap:8px;
}
.review-head{
  display:flex;
  align-items:center;
  gap:12px;
}
/* circular avatar for reviewer */
.review-avatar{
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 26px rgba(0,12,20,0.5);
  flex-shrink:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
}
/* name and stars grouped */
.review-name{font-weight:800;color:var(--text);display:inline-block}
.review-stars{color:var(--led);font-weight:900;letter-spacing:0.04em;margin-left:auto}
.review-body{color:#cfe6fb;font-size:14.4px;line-height:1.5}

/* Review form styles */
.review-form-section{display:flex;justify-content:center;width:100%}
.review-form-frame{padding:18px;margin-top:12px}
.review-form{display:flex;flex-direction:column;gap:12px}
.review-form .row{display:flex;gap:12px}
.review-form label{display:block;font-weight:700;color:var(--text);font-size:14px}
.review-form input[type="text"],
.review-form input[type="email"],
.review-form textarea{
  width:100%;
  padding:10px 12px;
  margin-top:6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--text);
  resize:vertical;
  font-size:14px;
  outline:none;
}
.review-form input:focus,
.review-form textarea:focus{
  box-shadow:0 8px 30px rgba(0,212,255,0.06);
  border-color: rgba(0,212,255,0.12);
}

.req{color:var(--led);margin-left:6px;font-weight:900}

.rating-block{display:flex;flex-direction:column;gap:8px}
.rating-stars{display:flex;gap:10px;align-items:center}
.rating-stars label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  padding:6px 8px;
  border-radius:8px;
  background:transparent;
  transition:background .18s ease, transform .12s ease;
  border:1px solid transparent;
}
.rating-stars label:hover{background:rgba(0,212,255,0.03);transform:translateY(-2px)}
.rating-stars input{display:none}
.rating-stars span{color:rgba(255,220,100,0.92);font-size:18px;line-height:1}

/* message */
.rf-message{
  margin-top:6px;
  padding:12px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(6,20,28,0.42), rgba(8,10,12,0.36));
  color:var(--led-blue);
  border:1px solid rgba(0,212,255,0.08);
  font-weight:800;
}

/* smaller devices */
@media (max-width:900px){
  .review-form .row{flex-direction:column}
}

/* subtle animated pulse for purchase CTA */
.price-cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:0.02em;
  color:var(--text);
  border:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 8px 40px rgba(0,12,20,0.6);
  transition: transform .18s ease, box-shadow .18s ease, filter .2s ease;
  position:relative;
  overflow:visible;
  will-change:transform, box-shadow;
  animation: buy-pulse 4s ease-in-out infinite;
}
.price-cta:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 80px rgba(0,212,255,0.12);
}
@keyframes buy-pulse{
  0%{ transform: translateY(0) scale(1); box-shadow: 0 8px 40px rgba(0,12,20,0.6); }
  50%{ transform: translateY(-3px) scale(1.01); box-shadow: 0 20px 60px rgba(0,212,255,0.08); }
  100%{ transform: translateY(0) scale(1); box-shadow: 0 8px 40px rgba(0,12,20,0.6); }
}

/* Footer */
.footer{
  width:100%;
  display:flex;
  justify-content:center;
  padding:40px 20px 48px;
  z-index:6;
}
.footer-premium .footer-frame{
  width:1200px;
  max-width:96%;
  padding:26px;
  border-radius:20px;
  background: linear-gradient(180deg, rgba(6,7,10,0.7), rgba(6,9,12,0.42));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 50px 140px rgba(0,12,20,0.65);
}
.footer-premium-inner{
  display:flex;
  gap:24px;
  align-items:flex-start;
  justify-content:space-between;
  width:100%;
  flex-wrap:wrap;
}

/* Brand */
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-logo{height:54px;filter: drop-shadow(0 18px 40px rgba(0,212,255,0.08));}
.footer-brand-text{display:flex;flex-direction:column}
.brand-title{
  font-weight:900;
  font-size:20px;
  letter-spacing:0.04em;
  color:var(--text);
  text-shadow:0 0 28px rgba(0,212,255,0.08);
}
.brand-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
  font-weight:700;
  letter-spacing:0.02em;
}

/* Footer navigation (same items as top) */
.footer-nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  min-width:320px;
}
.footer-nav a{
  color:var(--led-blue);
  font-weight:700;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  transition:all .22s ease;
  font-size:14px;
  border:1px solid transparent;
}
.footer-nav a:hover{
  color:var(--text);
  text-shadow:0 0 20px rgba(0,212,255,0.08);
  transform:translateY(-2px);
  border-color: rgba(0,212,255,0.04);
}

/* QR block */
.footer-qr{
  display:flex;
  gap:12px;
  align-items:center;
}
.footer-qr a{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration:none;
  color:var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 20px 60px rgba(0,12,20,0.55);
}
.qr-img{
  /* increased 75% from 84px -> 147px */
  width:147px;
  height:147px;
  object-fit:cover;
  border-radius:12px;
  display:block;
  margin-bottom:6px;
  filter: drop-shadow(0 16px 48px rgba(0,212,255,0.08));
}
.qr-label{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:0.02em;
}

/* Footer credits */
.footer-credits{min-width:220px;text-align:right}
.footer-credits p{
  color:var(--muted);
  margin:0;
  font-weight:700;
  font-size:13px;
}
.footer-credits a{ color:var(--led); text-decoration:underline; font-weight:900; }

/* Responsive tweaks */
@media (max-width:900px){
  .footer-premium .footer-frame{ padding:18px; }
  .footer-premium-inner{ gap:12px; align-items:center; }
  .footer-nav{ order:3; width:100%; justify-content:center; margin-top:10px }
  .footer-qr{ order:2; margin-top:6px }
  .footer-credits{ order:4; width:100%; text-align:center; margin-top:10px }
}

/* Text glow for LED headings and reusable LED text style */
.h1-led, .hero-title, .content-title{
  text-shadow: 0 0 28px rgba(0,212,255,0.08), 0 10px 40px rgba(0,12,18,0.6);
}

/* warm premium LED text option (use on small headings or callouts) */
.led-text{
  color: var(--led-orange);
  font-weight:800;
  text-shadow:
    0 0 10px rgba(255,178,77,0.22),
    0 6px 30px rgba(255,140,30,0.08),
    0 12px 50px rgba(0,12,18,0.45);
  transition: text-shadow .22s ease, transform .18s ease;
}
.led-text:hover, .led-text:focus{
  text-shadow:
    0 0 18px rgba(255,178,77,0.32),
    0 10px 46px rgba(255,140,30,0.12),
    0 18px 80px rgba(0,12,18,0.5);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width:900px){
  .hero-title{font-size:34px}
  .promo-video{height:320px}
  .slide{height:320px}
  .slider{height:320px}
  .list{columns:1}
  .header-inner{gap:10px}
  .top-nav{display:none}
  .led-frame{padding:16px}
}

/* Pricing: premium enterprise cards */
.pricing-section{display:flex;justify-content:center;width:100%}

/* Welcome banner — premium leadership message */
.welcome-banner{display:flex;justify-content:center;width:100%}
.welcome-frame{
  width:1100px;
  max-width:94%;
  padding:18px 26px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(6,9,12,0.62), rgba(8,12,16,0.35));
  border:1px solid rgba(0,212,255,0.03);
  box-shadow: 0 40px 120px rgba(0,12,20,0.55);
  position:relative;
}
.welcome-title{
  font-size:22px;
  margin:0 0 8px;
  color:var(--text);
  text-shadow:0 0 28px rgba(0,212,255,0.06);
  font-weight:900;
}
.welcome-text{
  color:#dff6ff;
  line-height:1.6;
  font-size:15px;
  margin:6px 0 10px;
}
.welcome-text a{ color:var(--led); font-weight:800; text-decoration:underline; }
.welcome-sign{ color:var(--muted); font-weight:800; margin-top:8px; font-size:14px; }

/* subtle decorative LED band for welcome */
.welcome-frame::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(60,255,132,0.04), rgba(0,212,255,0.03));
  box-shadow: 0 0 120px rgba(0,212,255,0.03) inset;
  mix-blend-mode:screen;
  z-index:0;
}
.welcome-frame > *{ position:relative; z-index:6; }

/* keep reveal animation consistent */
.welcome-frame.content-animated{ transform:translateY(10px); opacity:0; }
.welcome-frame.content-animated.visible{ transform:none; opacity:1; }

/* LOGIN MODULE — premium CTA with LED animation */
.login-section{display:flex;justify-content:center;width:100%}
.login-frame{padding:18px}
.login-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px;border-radius:14px;position:relative;background:linear-gradient(180deg, rgba(8,12,16,0.5), rgba(6,9,12,0.3));border:1px solid rgba(255,255,255,0.02);box-shadow: 0 30px 90px rgba(0,12,20,0.45);}

/* Big premium button */
.login-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 34px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:0.06em;
  font-size:18px;
  text-decoration:none;
  color:var(--bg-deep);
  background:linear-gradient(90deg, var(--led-green), var(--led-blue));
  box-shadow: 0 14px 48px rgba(0,212,255,0.12), 0 6px 20px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.06);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position:relative;
  z-index:2;
  overflow:visible;
}

/* LED animated glow behind button */
.login-btn::before{
  content:"";
  position:absolute;
  left:-6px; right:-6px; top:-6px; bottom:-6px;
  z-index:-1;
  border-radius:18px;
  background: linear-gradient(90deg, rgba(60,255,132,0.08), rgba(0,212,255,0.08), rgba(255,178,77,0.06));
  filter: blur(14px);
  opacity:0.9;
  transition:opacity .3s ease, transform .3s ease;
  transform: scale(0.98);
  pointer-events:none;
}

/* Hover: color change and stronger glow */
.login-btn:hover{
  transform:translateY(-6px) scale(1.01);
  filter:brightness(1.06);
  box-shadow: 0 28px 120px rgba(0,212,255,0.16);
  background:linear-gradient(90deg, var(--led-blue), var(--led-orange));
}

/* Focus/active accessibility states */
.login-btn:focus{
  outline:3px solid rgba(0,212,255,0.14);
  outline-offset:6px;
  transform:translateY(-4px);
}

/* Responsive */
@media (max-width:760px){
  .login-btn{padding:14px 20px;font-size:16px;border-radius:12px}
  .login-inner{padding:16px}
}
.pricing-frame{padding:20px 18px;margin-top:10px}
.pricing-sub{color:var(--muted);margin-top:6px;margin-bottom:14px;font-weight:600}

/* Payment image and acceptance line in pricing header */
.pricing-header{gap:16px}
.pricing-accept{ color:var(--muted); font-size:14px; margin:8px 0 0; }
.payment-image{
  max-width:100%;
  width:320px;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow: 0 18px 48px rgba(0,12,20,0.5);
  border:1px solid rgba(255,255,255,0.02);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
}

/* Responsive: shrink payment image on small screens */
@media (max-width:760px){
  .payment-image{ width:220px; margin-top:10px; }
  .pricing-header{ flex-direction:column; align-items:flex-start; gap:12px; }
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:12px;
}
.price-card{
  border-radius:16px;
  padding:22px;
  background:linear-gradient(180deg, rgba(6,9,12,0.6), rgba(8,12,16,0.36));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 30px 90px rgba(0,12,20,0.6);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .28s cubic-bezier(.2,.9,.25,1), box-shadow .28s ease;
  position:relative;
  overflow:visible;
}
.price-card:hover{ transform:translateY(-8px); box-shadow: 0 44px 140px rgba(0,24,40,0.7); }

.price-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.price-head h3{font-size:18px;margin:0; font-weight:800; color:var(--text); text-shadow:0 0 18px rgba(0,212,255,0.04)}
.price-value{font-size:28px;font-weight:900;color:var(--text); letter-spacing:0.01em}
.price-value .currency{font-size:14px;margin-right:6px;opacity:0.95}
.price-desc{color:#cfe6fb;font-size:14px;line-height:1.5;margin:0 0 6px}

.price-cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:0.02em;
  color:var(--text);
  border:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 8px 40px rgba(0,12,20,0.6);
  transition:transform .18s ease, box-shadow .18s ease;
}

/* LED color accents for cards */
.price-cyan::before,
.price-teal::before,
.price-gold::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0.12;
}
.price-cyan{
  border:1px solid rgba(60,255,132,0.06);
}
.price-cyan::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:14px;height:2px;border-radius:4px;
  background:linear-gradient(90deg, transparent, rgba(60,255,132,0.12), transparent);
  filter: blur(6px);
}
.price-cyan .price-cta{
  border-color: rgba(60,255,132,0.12);
  box-shadow: 0 12px 36px rgba(60,255,132,0.06);
}
.price-cyan .price-head h3{ color: var(--led-green); }

.price-teal{
  border:1px solid rgba(0,212,255,0.06);
}
.price-teal::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:14px;height:2px;border-radius:4px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,0.12), transparent);
  filter: blur(6px);
}
.price-teal .price-cta{
  border-color: rgba(0,212,255,0.12);
  box-shadow: 0 12px 36px rgba(0,212,255,0.06);
}
.price-teal .price-head h3{ color: var(--led-blue); }

.price-gold{
  border:1px solid rgba(255,178,77,0.06);
}
.price-gold::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:14px;height:2px;border-radius:4px;
  background:linear-gradient(90deg, transparent, rgba(255,178,77,0.12), transparent);
  filter: blur(6px);
}
.price-gold .price-cta{
  border-color: rgba(255,178,77,0.12);
  box-shadow: 0 12px 36px rgba(255,178,77,0.06);
}
.price-gold .price-head h3{ color: var(--led-orange); }

.price-cta:active{ transform:translateY(1px) }

@media (max-width:1100px){
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .pricing-grid{grid-template-columns:1fr}
  .price-value{font-size:22px}
  .price-card{padding:16px}
}