/* Core layout and theme for Examina Proctor clone */

/* ===== HERO VIDEO FULLSCREEN ===== */
.hero-video {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 30%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
}
.hero-video-content {
  position: relative;
  z-index: 2;
  text-align: left;
  padding-top: 100px;
  padding-left: 100px;
  padding-bottom: 60px;
  max-width: 750px;
}
.hero-video-content h1 {
  font-size: clamp(60px, 11vw, 115px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
  letter-spacing: -3px;
  line-height: 1;
}
.hero-video-content h1 .accent {
  background: linear-gradient(135deg, var(--primary), #00e676);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-video-content p {
  font-size: clamp(17px, 2vw, 21px);
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 36px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  line-height: 1.7;
  max-width: 500px;
}
.hero-cta-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-video-content .btn-lg {
  padding: 16px 32px;
  font-size: 16px;
  border-radius: 10px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-video-content .btn-primary.btn-lg {
  background: linear-gradient(135deg, var(--primary), #00e676);
  color: #0a0f1a;
  font-weight: 700;
  box-shadow: 0 6px 28px rgba(88, 211, 255, 0.3);
}
.hero-video-content .btn-primary.btn-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(88, 211, 255, 0.45);
}
.hero-video-content .btn-outline.btn-lg {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}
.hero-video-content .btn-outline.btn-lg:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Hero Video Mobile - Centrar video */
@media (max-width: 768px) {
  .hero-video-bg video {
    object-position: 65% center;
  }
  .hero-video-content {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 120px;
    text-align: center;
    max-width: 100%;
  }
  .hero-video-content p {
    max-width: 100%;
  }
  .hero-cta-group {
    justify-content: center;
  }
  .hero-video-overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.3) 100%
    );
  }
}

/* Hero Stats */
.hero-stats {
  position: absolute;
  left: 50%;
  bottom: 60px;
  z-index: 2;
  display: flex;
  gap: 12px;
  align-items: center;
}
.hero-stat {
  text-align: center;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.stat-number {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.stat-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

/* Features Showcase Section */
.features-showcase {
  padding: 100px 0;
}
.showcase-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 100px;
}
.showcase-block:last-child {
  margin-bottom: 0;
}
.showcase-block.showcase-reverse {
  direction: rtl;
}
.showcase-block.showcase-reverse > * {
  direction: ltr;
}
.showcase-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}
.showcase-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(88, 211, 255, 0.1) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}
.showcase-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.showcase-block:hover .showcase-image img {
  transform: scale(1.03);
}
.showcase-content {
  padding: 20px 0;
}
.showcase-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(88, 211, 255, 0.1);
  border: 1px solid rgba(88, 211, 255, 0.2);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.showcase-content h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 20px;
}
.showcase-content p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  margin: 0 0 28px;
}
.showcase-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.showcase-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}
.showcase-list .check-icon {
  color: var(--primary);
  font-weight: 700;
}

/* Scroll reveal animations */
.reveal-left,
.reveal-right,
.reveal-up {
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-left {
  transform: translateX(-60px);
}
.reveal-right {
  transform: translateX(60px);
}
.reveal-up {
  transform: translateY(40px);
}
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-up.revealed {
  opacity: 1;
  transform: translate(0);
}
/* Stagger delay for step items */
.step-item.reveal-up:nth-child(1) { transition-delay: 0s; }
.step-item.reveal-up:nth-child(2) { transition-delay: 0.1s; }
.step-item.reveal-up:nth-child(3) { transition-delay: 0.2s; }
.step-item.reveal-up:nth-child(4) { transition-delay: 0.3s; }

@media (max-width: 900px) {
  .showcase-block {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 80px;
  }
  .showcase-block.showcase-reverse {
    direction: ltr;
  }
  .showcase-content {
    text-align: center;
  }
  .showcase-list li {
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .hero-stats {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-video {
    min-height: 100svh;
  }
  .hero-video-overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0.5) 100%
    );
  }
  .hero-video-content {
    text-align: center;
    padding-top: 100px;
    max-width: 100%;
  }
  .hero-video-content h1 {
    font-size: clamp(40px, 11vw, 56px);
    letter-spacing: -1px;
  }
  .hero-video-content p {
    font-size: 16px;
    margin: 0 auto 32px;
  }
  .hero-video-content p br {
    display: none;
  }
  .hero-cta-group {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .hero-video-content .btn-lg {
    padding: 15px 28px;
    font-size: 15px;
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* Legacy hero styles */
.hero{ position:relative; min-height: 82vh; display:grid; align-items:center; }
.hero-overlay{ position:absolute; inset:0; z-index:1; background: linear-gradient(100deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 38%, rgba(0,0,0,.7) 54%, rgba(0,0,0,.35) 72%, rgba(0,0,0,.12) 82%, rgba(0,0,0,0) 92%); opacity:0; animation: overlayFade 1.5s ease-in-out forwards; }
.hero-overlay::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(100deg, transparent 57%, rgba(255,255,255,.16) 58.2%, transparent 59.4%); opacity:.4; }
@keyframes overlayFade{ from{ opacity:0 } to{ opacity:1 } }
.hero-inner{ position:relative; z-index:2; display:flex; align-items:center; min-height:inherit; padding: 80px 24px; }
.hero-content{ max-width: 720px; color:#fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.hero-content h1{ font-size: clamp(40px, 6vw, 72px); margin:0 0 10px; font-weight: 800; }
.hero-content p{ font-size: clamp(16px, 2.2vw, 20px); opacity:.95; margin:0 0 18px; }
.hero-cta{ background:#00FF99 !important; color:#07110b !important; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hero-cta:hover{ box-shadow: 0 0 20px rgba(0,255,153,.7), 0 12px 34px rgba(0,0,0,.45); }

/* Responsive fallback */
@media (max-width: 640px){
  .hero{ min-height: 560px; }
  .hero-overlay{ background: linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.88)); opacity:1; animation:none; }
  .hero-inner{ padding: 72px 18px; }
}
@keyframes hero-gradient-animation {
    0% {
        --c-0: hsla(160, 58%, 28%, 1);
        --s-start-0: 8.392121895570533%;
        --s-end-0: 38.584065253664996%;
        --x-0: 93%;
        --y-0: 63%;
        --y-1: -7%;
        --x-1: 33%;
        --c-1: hsla(0, 0%, 0%, 1);
        --s-start-1: 8.392121895570533%;
        --s-end-1: 22.10878124098502%;
        --c-2: hsla(0, 0%, 0%, 1);
        --x-2: 84%;
        --y-2: 7%;
        --s-start-2: 8.392121895570533%;
        --s-end-2: 22.558651527792346%;
        --x-3: 14%;
        --y-3: 5%;
        --c-3: hsla(0, 0%, 0%, 1);
        --s-start-3: 8.392121895570533%;
        --s-end-3: 22.558651527792346%;
        --y-4: 96%;
        --s-start-4: 8.392121895570533%;
        --s-end-4: 22.558651527792346%;
        --c-4: hsla(0, 0%, 0%, 1);
        --x-4: 7%;
        --y-5: 90%;
        --x-5: 93%;
        --c-5: hsla(0, 0%, 0%, 1);
        --s-start-5: 8.392121895570533%;
        --s-end-5: 22.558651527792346%;
        --y-6: 61%;
        --s-start-6: 8.392121895570533%;
        --s-end-6: 39.67138181429644%;
        --x-6: 3%;
        --c-6: hsla(152, 48%, 22%, 1);
        --y-7: 59%;
        --c-7: hsla(152, 48%, 22%, 1);
        --s-start-7: 8.392121895570533%;
        --s-end-7: 49.58090142552271%;
        --x-7: 94%;
        --c-8: hsla(158, 52%, 34%, 1);
        --x-8: 48%;
        --y-8: 63%;
        --s-start-8: 8.392121895570533%;
        --s-end-8: 34.815367581495366%;
        --s-start-9: 8.392121895570533%;
        --s-end-9: 31.77166380372925%;
        --y-9: 78%;
        --c-9: hsla(160, 58%, 28%, 1);
        --x-9: 96%;
    }

    50% {
        --c-0: hsla(160, 58%, 28%, 1);
        --s-start-0: 12.892043731642234%;
        --s-end-0: 42.94837818044209%;
        --x-0: 2%;
        --y-0: 59%;
        --y-1: 10%;
        --x-1: 42%;
        --c-1: hsla(0, 0%, 0%, 1);
        --s-start-1: 8.392121895570533%;
        --s-end-1: 41.69445156991687%;
        --c-2: hsla(0, 0%, 0%, 1);
        --x-2: 75%;
        --y-2: 29%;
        --s-start-2: 8.392121895570533%;
        --s-end-2: 20.488815899465003%;
        --x-3: 5%;
        --y-3: 16%;
        --c-3: hsla(0, 0%, 0%, 1);
        --s-start-3: 8.392121895570533%;
        --s-end-3: 30.099844327777923%;
        --y-4: 91%;
        --s-start-4: 8.392121895570533%;
        --s-end-4: 24.59566937006635%;
        --c-4: hsla(0, 0%, 0%, 1);
        --x-4: 36%;
        --y-5: 91%;
        --x-5: 70%;
        --c-5: hsla(0, 0%, 0%, 1);
        --s-start-5: 8.392121895570533%;
        --s-end-5: 24.59566937006635%;
        --y-6: 73%;
        --s-start-6: 9%;
        --s-end-6: 26.825849058644888%;
        --x-6: 54%;
        --c-6: hsla(152, 48%, 22%, 1);
        --y-7: 76%;
        --c-7: hsla(152, 48%, 22%, 1);
        --s-start-7: 9%;
        --s-end-7: 49.05074977970796%;
        --x-7: 57%;
        --c-8: hsla(158, 52%, 34%, 1);
        --x-8: 11%;
        --y-8: 53%;
        --s-start-8: 9;
        --s-end-8: 26.166345747226664%;
        --s-start-9: 9;
        --s-end-9: 22.152460022684956%;
        --y-9: 70%;
        --c-9: hsla(160, 58%, 28%, 1);
        --x-9: 70%;
    }

    100% {
        --y-1: -3%;
        --x-1: 76%;
        --c-1: hsla(0, 0%, 0%, 1);
        --s-start-1: 8.392121895570533%;
        --s-end-1: 59.32232816638693%;
        --c-2: hsla(0, 0%, 0%, 1);
        --x-2: 97%;
        --y-2: 18%;
        --s-start-2: 8.392121895570533%;
        --s-end-2: 28.52989037790774%;
        --x-3: 42%;
        --y-3: 18%;
        --c-3: hsla(0, 0%, 0%, 1);
        --s-start-3: 8.392121895570533%;
        --s-end-3: 28.52989037790774%;
        --y-4: 95%;
        --s-start-4: 8.392121895570533%;
        --s-end-4: 28.52989037790774%;
        --c-4: hsla(0, 0%, 0%, 1);
        --x-4: 66%;
        --y-5: 92%;
        --x-5: 46%;
        --c-5: hsla(0, 0%, 0%, 1);
        --s-start-5: 8.392121895570533%;
        --s-end-5: 28.52989037790774%;
        --y-6: 16%;
        --s-start-6: 24.72064437400016%;
        --s-end-6: 47.490620328604024%;
        --x-6: 102%;
        --c-6: hsla(152, 48%, 22%, 1);
        --y-7: 52%;
        --c-7: hsla(152, 48%, 22%, 1);
        --s-start-7: 10.200720718860145%;
        --s-end-7: 50.46456494288142%;
        --x-7: 22%;
        --s-start-9: 6.294132688184733%;
        --s-end-9: 20.79106730744014%;
        --y-9: 51%;
        --c-9: hsla(160, 58%, 28%, 1);
        --x-9: 97%;
    }
}

/* Lightweight movement using GPU-friendly transforms */
@keyframes bg-pan {
  0% { transform: translate3d(0,0,0) scale(1); filter: hue-rotate(0deg) saturate(1); }
  50% { transform: translate3d(-2%, -1%, 0) scale(1.04); filter: hue-rotate(6deg) saturate(1.03); }
  100% { transform: translate3d(1.8%, 1%, 0) scale(1.06); filter: hue-rotate(-6deg) saturate(1.02); }
}

@property --c-0 { syntax: '<color>'; inherits: false; initial-value: hsla(160, 58%, 28%, 1) }
@property --s-start-0 { syntax: '<percentage>'; inherits: false; initial-value: 8.392121895570533% }
@property --s-end-0 { syntax: '<percentage>'; inherits: false; initial-value: 38.584065253664996% }
@property --x-0 { syntax: '<percentage>'; inherits: false; initial-value: 93% }
@property --y-0 { syntax: '<percentage>'; inherits: false; initial-value: 63% }
@property --y-1 { syntax: '<percentage>'; inherits: false; initial-value: -7% }
@property --x-1 { syntax: '<percentage>'; inherits: false; initial-value: 33% }
@property --c-1 { syntax: '<color>'; inherits: false; initial-value: hsla(0, 0%, 0%, 1) }
@property --s-start-1 { syntax: '<percentage>'; inherits: false; initial-value: 8.392121895570533% }
@property --s-end-1 { syntax: '<percentage>'; inherits: false; initial-value: 22.10878124098502% }
@property --c-2 { syntax: '<color>'; inherits: false; initial-value: hsla(0, 0%, 0%, 1) }
@property --x-2 { syntax: '<percentage>'; inherits: false; initial-value: 84% }
@property --y-2 { syntax: '<percentage>'; inherits: false; initial-value: 7% }
@property --s-start-2 { syntax: '<percentage>'; inherits: false; initial-value: 8.392121895570533% }
@property --s-end-2 { syntax: '<percentage>'; inherits: false; initial-value: 22.558651527792346% }
@property --x-3 { syntax: '<percentage>'; inherits: false; initial-value: 14% }
@property --y-3 { syntax: '<percentage>'; inherits: false; initial-value: 5% }
@property --c-3 { syntax: '<color>'; inherits: false; initial-value: hsla(0, 0%, 0%, 1) }
@property --s-start-3 { syntax: '<percentage>'; inherits: false; initial-value: 8.392121895570533% }
@property --s-end-3 { syntax: '<percentage>'; inherits: false; initial-value: 22.558651527792346% }
@property --y-4 { syntax: '<percentage>'; inherits: false; initial-value: 96% }
@property --s-start-4 { syntax: '<percentage>'; inherits: false; initial-value: 8.392121895570533% }
@property --s-end-4 { syntax: '<percentage>'; inherits: false; initial-value: 22.558651527792346% }
@property --c-4 { syntax: '<color>'; inherits: false; initial-value: hsla(0, 0%, 0%, 1) }
@property --x-4 { syntax: '<percentage>'; inherits: false; initial-value: 7% }
@property --y-5 { syntax: '<percentage>'; inherits: false; initial-value: 90% }
@property --x-5 { syntax: '<percentage>'; inherits: false; initial-value: 93% }
@property --c-5 { syntax: '<color>'; inherits: false; initial-value: hsla(0, 0%, 0%, 1) }
@property --s-start-5 { syntax: '<percentage>'; inherits: false; initial-value: 8.392121895570533% }
@property --s-end-5 { syntax: '<percentage>'; inherits: false; initial-value: 22.558651527792346% }
@property --y-6 { syntax: '<percentage>'; inherits: false; initial-value: 61% }
@property --s-start-6 { syntax: '<percentage>'; inherits: false; initial-value: 8.392121895570533% }
@property --s-end-6 { syntax: '<percentage>'; inherits: false; initial-value: 39.67138181429644% }
@property --x-6 { syntax: '<percentage>'; inherits: false; initial-value: 3% }
@property --c-6 { syntax: '<color>'; inherits: false; initial-value: hsla(152, 48%, 22%, 1) }
@property --y-7 { syntax: '<percentage>'; inherits: false; initial-value: 59% }
@property --c-7 { syntax: '<color>'; inherits: false; initial-value: hsla(152, 48%, 22%, 1) }
@property --s-start-7 { syntax: '<percentage>'; inherits: false; initial-value: 8.392121895570533% }
@property --s-end-7 { syntax: '<percentage>'; inherits: false; initial-value: 49.58090142552271% }
@property --x-7 { syntax: '<percentage>'; inherits: false; initial-value: 94% }
@property --c-8 { syntax: '<color>'; inherits: false; initial-value: hsla(158, 52%, 34%, 1) }
@property --x-8 { syntax: '<percentage>'; inherits: false; initial-value: 48% }
@property --y-8 { syntax: '<percentage>'; inherits: false; initial-value: 63% }
@property --s-start-8 { syntax: '<percentage>'; inherits: false; initial-value: 8.392121895570533% }
@property --s-end-8 { syntax: '<percentage>'; inherits: false; initial-value: 34.815367581495366% }
@property --s-start-9 { syntax: '<percentage>'; inherits: false; initial-value: 8.392121895570533% }
@property --s-end-9 { syntax: '<percentage>'; inherits: false; initial-value: 31.77166380372925% }
@property --y-9 { syntax: '<percentage>'; inherits: false; initial-value: 78% }
@property --c-9 { syntax: '<color>'; inherits: false; initial-value: hsla(160, 58%, 28%, 1) }
@property --x-9 { syntax: '<percentage>'; inherits: false; initial-value: 96% }
:root{
  --bg:#0b1220;
  --bg-2:#0d1628;
  --text:#e7f0ff;
  --muted:#a8b3c7;
  --primary:#58d3ff;
  --primary-2:#4fa2ff;
  --card:#121b2f;
  --card-2:#0f192c;
  --border: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 1px rgba(255,255,255,.06) inset;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: transparent;
}

/* Single, continuous animated background as a fixed layer for performance */
body::before{
  content:"";
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  /* variables initial state */
  --c-0: hsla(217.59493670886076, 100%, 30%, 1);
  --x-0: 93%; --y-0: 63%;
  --y-1: -7%; --x-1: 33%; --c-1: hsla(0,0%,0%,1);
  --c-2: hsla(0,0%,0%,1); --x-2:84%; --y-2:7%;
  --x-3:14%; --y-3:5%; --c-3: hsla(0,0%,0%,1);
  --y-4:96%; --c-4: hsla(0,0%,0%,1); --x-4:7%;
  --y-5:90%; --x-5:93%; --c-5: hsla(0,0%,0%,1);
  --y-6:61%; --x-6:3%;  --c-6: hsla(152, 48%, 22%, 1);
  background-color: hsla(160, 40%, 6%, 1);
  /* Fewer gradients for better performance (6 spots) */
  background-image:
    radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
    radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
    radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),
    radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)),
    radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)),
    radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6));
  animation: hero-gradient-animation 28s linear infinite alternate,
             bg-pan 24s ease-in-out infinite alternate;
  will-change: transform, filter, opacity, background-image;
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1200px, 92%); margin:0 auto}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.1rem; border-radius:12px; font-weight:600; color:#0b1220; background:linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%); box-shadow:0 10px 20px rgba(79,162,255,.25); transition:transform .15s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 14px 26px rgba(79,162,255,.3)}
.btn.btn-primary{color:#0b1220; background: linear-gradient(180deg, #9bffb1, #00e676); box-shadow:0 14px 26px rgba(0,230,118,.35), 0 0 0 1px rgba(255,255,255,.06) inset}
.btn.btn-primary:hover{box-shadow:0 20px 40px rgba(0,230,118,.45), 0 0 0 1px rgba(255,255,255,.08) inset}
.btn-outline{color:var(--text); background:transparent; border:1px solid var(--border)}

/* Floating Assist button */
.assist-fab{position:fixed; right:22px; bottom:22px; z-index:60; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:14px 18px; border-radius:999px; background: linear-gradient(180deg, #6ad6ff, #4fa2ff); color:#0b1220; font-weight:800; letter-spacing:.2px; box-shadow:0 18px 42px rgba(79,162,255,.45), 0 0 0 1px rgba(255,255,255,.08) inset; transition: transform .16s ease, box-shadow .2s ease, filter .2s ease; animation: fab-glow 3.4s ease-in-out infinite}
.assist-fab:hover{transform: translateY(-2px) scale(1.05); box-shadow:0 26px 60px rgba(79,162,255,.55), 0 0 0 1px rgba(255,255,255,.1) inset}
.assist-fab:active{transform: translateY(0) scale(.98)}
.assist-fab:focus{outline:none; box-shadow:0 0 0 3px rgba(106,214,255,.4), 0 18px 42px rgba(79,162,255,.45)}
@keyframes fab-glow{0%,100%{filter: brightness(1)}50%{filter: brightness(1.08)}}
@media (max-width: 640px){.assist-fab{right:16px; bottom:16px; padding:12px 16px; font-size:14px}}

/* Floating Exam button (above assist) */
.exam-fab{position:fixed; right:22px; bottom:86px; z-index:60; display:inline-flex; align-items:center; justify-content:center; gap:.7rem; padding:14px 22px 14px 16px; border-radius:999px; background: linear-gradient(180deg, #00d86b, #00a85a); color:#0b1220; font-weight:800; letter-spacing:.2px; box-shadow:0 22px 48px rgba(0,168,90,.5), 0 0 0 1px rgba(255,255,255,.08) inset; transition: transform .16s ease, box-shadow .2s ease, filter .2s ease; animation: exam-glow 3.2s ease-in-out infinite; text-decoration:none}
.exam-fab::before{content:""; display:inline-block; width:28px; height:28px; border-radius:8px; background:url('../images/89d4d8ee-47dd-4ea8-8363-df70445f887f.png') center/cover no-repeat; box-shadow:0 0 0 2px rgba(255,255,255,.35) inset, 0 0 0 1px rgba(0,0,0,.08)}
.exam-fab:hover{transform: translateY(-2px) scale(1.06); box-shadow:0 30px 70px rgba(0,230,118,.55), 0 0 0 1px rgba(255,255,255,.1) inset}
.exam-fab:active{transform: translateY(0) scale(.98)}
.exam-fab:focus{outline:none; box-shadow:0 0 0 3px rgba(0,230,118,.35), 0 22px 48px rgba(0,230,118,.45)}
@keyframes exam-glow{0%,100%{filter: brightness(1)}50%{filter: brightness(1.1)}}
@media (max-width: 640px){.exam-fab{right:16px; bottom:76px; padding:12px 16px 12px 12px; font-size:14px; gap:.6rem}.exam-fab::before{width:24px; height:24px; background-image:url('../images/89d4d8ee-47dd-4ea8-8363-df70445f887f.png')}}

/* Chat modal (grande, estilo glass) */
.chat-modal{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(3,6,12,.55); backdrop-filter:saturate(140%) blur(8px)}
.chat-modal.open{display:flex}
.chat-panel{width:min(1080px, 94vw); height:min(78vh, 820px); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035)); border:1px solid var(--border); border-radius:22px; box-shadow:0 28px 80px rgba(0,0,0,.6); display:grid; grid-template-rows: 64px 1fr 66px; overflow:hidden}
.chat-header{display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--border)}
.chat-header .title{font-weight:800; letter-spacing:.3px}
.chat-header .actions{display:flex; gap:8px}
.chat-close{background:transparent; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer}
.chat-body{display:grid; grid-template-columns: 320px 1fr}
.chat-sidebar{border-right:1px solid var(--border); padding:14px; overflow:auto}
.chat-sidebar .row{display:flex; flex-direction:column; gap:6px; margin:10px 0}
.chat-sidebar input{background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text)}
.chat-messages{position:relative; overflow:auto; padding:16px}
.msg{display:flex; align-items:flex-end; gap:10px; margin:10px 0}
.msg.me{justify-content:flex-end}
.msg .avatar{flex:0 0 auto; width:42px; height:42px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.12); box-shadow:0 2px 8px rgba(0,0,0,.35)}
.msg .avatar img{width:100%; height:100%; object-fit:cover; display:block}
.msg .avatar.avatar-fallback{background:linear-gradient(180deg, #6ad6ff, #4fa2ff)}
.msg .bubble{max-width:68%; padding:12px 14px; border-radius:16px; font-size:15px; line-height:1.5; box-shadow:0 6px 18px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.06)}
.msg.bot .bubble{background:rgba(255,255,255,.06); color:#eaf4ff; border-top-left-radius:6px}
.msg.me .bubble{background:#ffffff; color:#0b1220; border-top-right-radius:6px}
@media (max-width: 640px){
  .msg .bubble{max-width:80%}
  .msg .avatar{width:36px; height:36px}
}
.chat-input{display:flex; gap:10px; align-items:center; padding:10px 12px; border-top:1px solid var(--border); background:rgba(6,10,18,.7)}
.chat-input input{flex:1; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:12px; padding:12px; color:var(--text)}
.chat-input .send{background:linear-gradient(180deg,#6ad6ff,#4fa2ff); color:#0b1220; border:0; border-radius:12px; padding:12px 16px; font-weight:800; cursor:pointer}
@media (max-width: 980px){
  .chat-panel{grid-template-rows:56px 1fr 64px; height:min(82vh,820px)}
  .chat-body{grid-template-columns:1fr}
  .chat-sidebar{display:block}
}

/* Contact modal (Airtable) */
.contact-modal{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(3,6,12,.55); backdrop-filter:saturate(140%) blur(8px)}
.contact-modal.open{display:flex}
.contact-panel{width:min(1080px, 94vw); height:min(82vh, 880px); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035)); border:1px solid var(--border); border-radius:22px; box-shadow:0 28px 80px rgba(0,0,0,.6); display:grid; grid-template-rows: 60px 1fr; overflow:hidden}
.contact-header{display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--border)}
.contact-header .title{font-weight:800; letter-spacing:.3px}
.contact-close{background:transparent; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer}
.contact-body{height:100%; padding:16px 18px 20px}
.contact-form{height:100%; display:flex; flex-direction:column; gap:18px}
.contact-grid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px 18px}
.contact-grid .field-full{grid-column:1 / -1}
.field label{display:block; margin-bottom:6px; font-size:14px; font-weight:500; color:#eaf4ff}
.field input{width:100%; border-radius:12px; border:1px solid var(--border); padding:10px 12px; background:rgba(5,10,20,.85); color:var(--text); font-size:14px; outline:none; box-shadow:0 0 0 1px rgba(0,0,0,.4) inset}
.field input:focus{border-color:rgba(88,211,255,.7); box-shadow:0 0 0 1px rgba(88,211,255,.6) inset, 0 0 0 1px rgba(88,211,255,.35)}
.field input::placeholder{color:rgba(168,179,199,.7)}
.contact-actions{display:flex; align-items:center; gap:14px; margin-top:auto}
.contact-actions .btn{height:44px; padding:0 20px}
.contact-status{min-height:18px; font-size:13px; color:var(--muted)}
.contact-status.contact-status--success{color:#9bffb1}
.contact-status.contact-status--error{color:#ff9b9b}
@media (max-width: 640px){
  .contact-grid{grid-template-columns:1fr}
}

/* Navbar */
.navbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(150%) blur(8px); background:rgba(10,15,25,.6); border-bottom:1px solid var(--border)}
.navbar .inner{display:flex; align-items:center; justify-content:space-between; height:110px}
.brand{display:flex; align-items:center; gap:.7rem; font-weight:700}
.brand .logo{display:flex; align-items:center}
.brand .logo img{height:128px; width:auto; display:block}
.brand .brand-name{letter-spacing:.3px}
.nav-links{display:flex; align-items:center; gap:1rem}
.nav-links a{color:var(--muted); font-weight:500; padding:.4rem .6rem; border-radius:8px}
.nav-links a.active,.nav-links a:hover{color:var(--text); background:rgba(255,255,255,.05)}

/* Nav actions (Inicio + lang switch) - always visible */
.nav-actions{display:flex; align-items:center; gap:12px}
.nav-actions .nav-home{color:var(--muted); font-weight:500; padding:.4rem .6rem; border-radius:8px}
.nav-actions .nav-home.active,.nav-actions .nav-home:hover{color:var(--text); background:rgba(255,255,255,.05)}
.nav-actions .lang-switch{display:flex; align-items:center; gap:6px}
.nav-actions .lang-btn{display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border); padding:4px; border-radius:10px; cursor:pointer; width:36px; height:36px}
.nav-actions .lang-btn img{width:22px; height:22px; border-radius:50%; display:block}

/* Hamburger toggle (hidden on desktop) */
.nav-toggle{display:none; background:transparent; border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:8px; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px}
.nav-toggle-bar{width:100%; height:2px; border-radius:2px; background:#e7f0ff; display:block; transition: transform .2s ease, opacity .2s ease}
body.nav-open .nav-toggle-bar:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}
body.nav-open .nav-toggle-bar:nth-child(2){opacity:0}
body.nav-open .nav-toggle-bar:nth-child(3){transform:rotate(-45deg) translate(5px, -5px)}

/* Hero */
.hero{padding:120px 0 72px}
.hero .grid{display:grid; grid-template-columns: .95fr 1.55fr; gap:72px; align-items:center}
.hero h1{font-size:72px; line-height:1.02; margin:0 0 18px; letter-spacing:.2px; color:#ffffff; text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 30px rgba(0,0,0,.18);
  background: linear-gradient(180deg, #ffffff 0%, #d8fff0 35%, #9bffb1 100%);
  -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent;
  position: relative;
}
.hero h1::after{content:""; position:absolute; left:2px; bottom:-6px; width:46%; height:8px; border-radius:999px;
  background: linear-gradient(90deg, rgba(0,255,153,.85), rgba(88,211,255,.7)); filter: blur(.2px);
  box-shadow: 0 6px 18px rgba(0,255,153,.28);
}
.hero p{color:var(--muted); margin:0 0 28px; font-size:18px}
.hero .actions{display:flex; gap:14px}
.hero .actions-secondary{margin-top:14px; display:flex; justify-content:center}
.hero .actions-secondary .btn{min-width:230px}

/* Hero grid y orden */
.hero-grid{display:grid; grid-template-columns: .95fr 1.55fr; grid-template-rows: auto auto; gap:0 72px; align-items:center}
.hero-text{grid-column:1; grid-row:1}
.hero-media{grid-column:2; grid-row:1 / 3}
.hero-actions{grid-column:1; grid-row:2; margin-top:0; display:flex; gap:14px}
.hero .media{border-radius:18px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5); border:1px solid var(--border); background:rgba(255,255,255,.03); position:relative; transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s}
.hero .media img{width:100%; height:clamp(440px, 48vh, 560px); object-fit:cover; object-position:center}
.hero .media video{width:100%; height:clamp(440px, 48vh, 560px); object-fit:cover; object-position:46% 56%; display:block; transform:scale(1.12); transform-origin:center}
.hero .media::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg, rgba(106,214,255,.5), rgba(0,230,118,.4)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; opacity:.9}
.hero .media::after{content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(120% 100% at 20% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 60%, rgba(0,0,0,.24) 100%),
  linear-gradient(315deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 12%, rgba(0,0,0,0) 30%); /* máscara suave en esquina inferior derecha */}
.hero .media:hover{transform: translateY(-4px); box-shadow:0 30px 70px rgba(0,0,0,.6)}
.hero .btn-primary{background:#00FF99; color:#07110b; border-color:transparent; box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(0,255,153,.0); animation:ctaPulse 2.6s ease-in-out infinite}
.hero .btn-primary:hover{box-shadow:0 12px 36px rgba(0,0,0,.45), 0 0 24px 8px rgba(0,255,153,.25); transform: translateY(-1px)}
@keyframes ctaPulse{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(0,255,153,0)}50%{box-shadow:0 12px 36px rgba(0,0,0,.45), 0 0 24px 8px rgba(0,255,153,.25)}}

/* estilo para el bloque de texto del hero (sin rectángulo translúcido) */
.hero .grid > div:first-child{backdrop-filter:none; -webkit-backdrop-filter:none}

/* Steps */
.section{padding:80px 0}
.section .title{font-size:40px; margin:0 0 10px}
.section .title .accent{color:var(--primary)}
/* Asegurar color de acento también en texto de párrafos */
.accent{color:var(--primary)}
.section .subtitle{color:var(--muted); margin:0 0 26px}
/* Center blog heading/subtitle */
#blog .title{ text-align:center; }
#blog .subtitle{ text-align:center; }
/* Feature Steps Grid */
.feature-steps-grid{display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center}
.steps-list{display:flex; flex-direction:column; gap:32px}
.step-item{display:flex; align-items:flex-start; gap:20px; opacity:0.4; transition: opacity .5s ease, transform .5s ease}
.step-item.active{opacity:1; transform: translateX(0)}
.step-number{flex-shrink:0; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; border:2px solid rgba(88,211,255,.3); background:rgba(88,211,255,.08); color:var(--muted); transition: all .5s ease}
.step-item.active .step-number{background:var(--primary); border-color:var(--primary); color:#0b1220; transform: scale(1.1); box-shadow: 0 0 24px rgba(88,211,255,.5)}
.step-item.completed .step-number{background:rgba(0,230,118,.2); border-color:rgba(0,230,118,.6); color:#00e676}
.step-item.completed .step-number::after{content:"✓"; font-size:24px}
.step-content h3{margin:0 0 8px; font-size:20px; color:#eaf4ff; transition: color .5s ease}
.step-item.active .step-content h3{color:#fff}
.step-content p{margin:0; color:var(--muted); font-size:15px; line-height:1.6}

/* Visual Container */
.steps-visual{position:relative; border-radius:18px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.6); border:1px solid rgba(88,211,255,.2)}
.visual-container{position:relative; width:100%; aspect-ratio:4/3; background:rgba(0,0,0,.3)}
.step-image{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; transform: translateY(60px); will-change: transform, opacity}
.step-image.active{z-index:1; pointer-events:auto; animation: slideInUp .6s cubic-bezier(.16,1,.3,1) forwards}
.step-image.exiting{z-index:0; animation: slideOutUp .6s cubic-bezier(.7,0,.84,0) forwards}

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

@keyframes slideOutUp{
  from{opacity:1; transform: translateY(0) scale(1)}
  to{opacity:0; transform: translateY(-60px) scale(0.95)}
}
.visual-container::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4)); pointer-events:none; z-index:2}

/* Nota de cumplimiento */
.compliance-note{margin-top:26px; text-align:center; color:#8fbef0; font-size:12px}

@media (prefers-reduced-motion: reduce){
  .step-item, .step-number, .step-image{transition:none}
  .step-image{transform:none !important}
}

/* Blog */
.grid-blog{display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; perspective: 900px}
.grid-blog.grid-blog--xl{grid-template-columns: repeat(2, 1fr); gap:32px 28px}
.post{position:relative; border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transform-style: preserve-3d; will-change: transform; transition: transform .18s ease, box-shadow .18s ease}
.post.is-tilting{transition: none}
.post:hover{box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(88,211,255,.12) inset}
.post .cover{height:300px; background:#0b0f19}
.post .cover img{width:100%; height:100%; object-fit:cover; transform: translateZ(30px); transition: transform .2s ease}
.post:hover .cover img{transform: translateZ(30px) scale(1.04)}
.post.post--xl{border-radius:20px}
.post.post--xl .cover{height:400px}
.post.post--xl .content{padding:22px}
.post.post--xl h4{font-size:22px}
/* Forzar mismas alturas en variaciones */
.post.post-fit .cover{height:300px}
.post.post-fit .cover img{object-fit:cover; object-position:center; padding:0; transform: none}
.post.post-fit--wide .cover{height:300px}
.post.post-fit--wide .cover img{object-fit:cover; object-position:center}
/* contenido en panel inferior (no superpuesto) */
.post .content{position:static; padding:18px; background:linear-gradient(180deg, rgba(6,10,18,.96), rgba(8,12,20,.98)); border-top:1px solid var(--border)}
.post .meta{color:#7fcfff; font-size:12px; margin:0 0 8px; display:flex; align-items:center; gap:8px}
.post .meta::before{content:""; display:inline-block; width:14px; height:14px; border-radius:3px; background:linear-gradient(180deg, #6ad6ff, #4fa2ff)}
.post h4{margin:0 0 8px; font-size:18px; color:#eaf4ff}
.post p{margin:0 0 12px; color:var(--muted)}
.post a{color:var(--primary)}

/* CTA Section (sub-hero final) */
.cta{padding:72px 0 88px; position:relative}
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top, rgba(0,255,153,.12), transparent 55%),
             radial-gradient(circle at bottom, rgba(79,162,255,.14), transparent 55%);
  opacity:0.9;
  pointer-events:none;
}
.cta .container{position:relative; z-index:1}
.cta .box{
  max-width:720px;
  margin:0 auto;
  background:linear-gradient(135deg, rgba(155,255,177,.08) 0%, transparent 40%),
             linear-gradient(315deg, rgba(106,214,255,.1) 0%, transparent 40%),
             rgba(8,14,24,.92);
  border-radius:26px;
  border:1px solid rgba(120,196,255,.32);
  box-shadow:0 26px 70px rgba(0,0,0,.85);
  padding:26px 26px 24px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta .box::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.16), transparent 40%, rgba(0,0,0,.6));
  mix-blend-mode:soft-light;
  opacity:.45;
  pointer-events:none;
}
.cta h2{
  position:relative;
  margin:0 0 10px;
  font-size:40px;
  line-height:1.05;
  letter-spacing:.2px;
  background: linear-gradient(180deg, #ffffff, #d8fff0 35%, #9bffb1 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow: 0 3px 22px rgba(0,0,0,.35);
}
.cta p{
  position:relative;
  margin:0 0 22px;
  color:#cfeaff;
  font-size:17px;
}
.cta .cta-actions{
  position:relative;
  display:flex;
  gap:14px;
  justify-content:center;
}
.cta .cta-actions .btn{
  height:48px;
  padding:0 22px;
  font-weight:700;
  border-radius:999px;
}

@media (max-width: 640px){
  .cta{padding:56px 0 64px}
  .cta .box{padding:22px 18px 20px; border-radius:22px}
  .cta h2{font-size:28px}
  .cta p{font-size:15px; margin-bottom:18px}
  .cta .cta-actions{flex-direction:column; gap:10px}
  .cta .cta-actions .btn{width:100%; max-width:260px; margin:0 auto; height:46px; font-size:14px}
}

/* AI Support Section */
.section-ai .ai-grid{display:grid; grid-template-columns: auto 1fr; gap:40px; align-items:center}
.section-ai .ai-frames{position:relative; width:min(460px, 48vw); height:min(440px, 50vw); justify-self:start}
.section-ai .frame{position:absolute; width:75%; height:78%; border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.7); border:1px solid rgba(88,211,255,.2); background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02))}
.section-ai .frame img{width:100%; height:100%; display:block; object-fit:cover}
.section-ai .frame-back{top:0; left:0; transform: rotate(-10deg); z-index:1}
.section-ai .frame-front{bottom:0; right:0; transform: rotate(7deg); z-index:2; box-shadow:0 24px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08) inset}
.section-ai .ai-content .title{margin-bottom:12px}
.section-ai .ai-content p{color:var(--muted); font-size:16px; line-height:1.7}


/* Highlighted subtitle animation */
.highlight-sub{display:inline-block; font-size:24px; font-weight:800; letter-spacing:.3px; position:relative; animation: sub-pop .5s ease both}
.highlight-sub::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:3px; background:linear-gradient(90deg, #9bffb1, #00e676, #6ad6ff); background-size:200% 100%; transform-origin:left; transform: scaleX(0); animation: underline-sweep 1.2s .2s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes underline-sweep{0%{transform:scaleX(0); background-position:0 0}60%{transform:scaleX(1); background-position:100% 0}100%{transform:scaleX(1); background-position:100% 0}}
@keyframes sub-pop{from{opacity:0; transform: translateY(6px)} to{opacity:1; transform: translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .highlight-sub{animation:none}
  .highlight-sub::after{animation:none; transform: none}
}

/* Typewriter cursor */
.tw-cursor{display:inline-block; width:1ch; margin-left:2px; border-right:2px solid #9bffb1; animation: tw-blink 0.9s step-end infinite}
@keyframes tw-blink{50%{border-color: transparent}}

/* About Section - Bento Grid */
.about{position:relative}
.about::before{content:none; display:none}

/* About carousel wrapper */
.about-carousel{position:relative; width:100%;}

/* Bento Grid Layout */
.bento-grid{display:grid; grid-template-columns:1fr; gap:20px; width:100%}

@media (min-width: 768px){
  .bento-grid{grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(180px, auto));}
  .bento-tall{grid-row: span 3}
  .bento-wide{grid-column: span 2}
}

/* Bento Card Base */
.bento-card{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035)); border:1px solid rgba(88,211,255,.22); border-radius:18px; padding:24px; box-shadow:0 10px 26px rgba(0,0,0,.45); overflow:hidden; display:flex; flex-direction:column; gap:12px; transition: transform .3s ease, box-shadow .3s ease}

/* About arrows (ocultas por defecto, solo móvil) */
.about-arrow{display:none; position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(5,10,18,.8); color:#eaf4ff; align-items:center; justify-content:center; cursor:pointer; z-index:5; box-shadow:0 10px 24px rgba(0,0,0,.7); font-size:16px;}
.about-arrow--prev{left:0;}
.about-arrow--next{right:0;}
.about-arrow:active{transform:translateY(-50%) scale(.95);}

/* Aparecer al scrollear */
/* Animación removida: tarjetas visibles por defecto */

/* Borde con brillo sutil */
.bento-card::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: linear-gradient(135deg, rgba(106,214,255,.55), rgba(0,230,118,.28)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity:.8}

.bento-card:hover{transform: translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 24px rgba(88,211,255,.18)}

/* Bento Card Typography */
.bento-card h3{margin:0; font-size:20px; letter-spacing:.2px; color:#eaf4ff; font-weight:600}
.bento-card p{margin:0; color:var(--muted); line-height:1.7; font-size:15px}

/* Bento Icons */
.bento-icon{width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(88,211,255,.12); color:var(--primary); margin-bottom:8px}
.bento-icon-small{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(88,211,255,.12); color:var(--primary)}

/* Bento Badge */
.bento-badge{display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; background:rgba(88,211,255,.10); color:#cfeaff; border:1px solid rgba(88,211,255,.28); box-shadow:none}

/* Bento Stat Card */
.bento-stat{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px}
.bento-stat::after{content:""; position:absolute; inset:0; opacity:.15; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 16px 16px; pointer-events:none}
.stat-number{font-size:72px; font-weight:900; line-height:1; color:#fff; position:relative; z-index:1}
.stat-label{font-size:14px; color:var(--muted); margin-top:8px; position:relative; z-index:1}

/* Bento CTA Card */
.bento-cta{display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:24px}
.bento-cta h3{margin-bottom:8px}

@media (max-width: 767px){
  .bento-cta{flex-direction:column; align-items:flex-start}
}

.btn.btn-cta-blue:hover{transform: scale(1.05); box-shadow:0 20px 40px rgba(79,162,255,.45), 0 0 0 1px rgba(255,255,255,.08) inset}
.btn.btn-cta-blue:hover::after{transform: translateX(220%); transition: transform .9s cubic-bezier(.22,.61,.36,1)}

@keyframes cta-glow{0%,100%{box-shadow:0 14px 26px rgba(79,162,255,.32), 0 0 0 1px rgba(255,255,255,.06) inset}50%{box-shadow:0 18px 34px rgba(79,162,255,.42), 0 0 0 1px rgba(255,255,255,.07) inset}}

/* Floating Action Button - Comienza tu examen */
.fab-cta{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:90;
  background:linear-gradient(135deg, #00FF99, #00e676);
  color:#07110b;
  font-weight:600;
  font-size:12px;
  padding:10px 16px;
  border-radius:999px;
  box-shadow:0 6px 20px rgba(0,255,153,.3), 0 3px 8px rgba(0,0,0,.25);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fab-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,255,153,.4), 0 4px 10px rgba(0,0,0,.3);
}
.fab-cta-icon{display:none}
.fab-cta-text{white-space:nowrap}

@media (max-width: 640px){
  .fab-cta{
    bottom:14px;
    right:14px;
    padding:9px 14px;
    font-size:11px;
  }
}

/* Footer */
.footer{
  position:relative;
  padding:48px 0 28px;
  background:linear-gradient(180deg, rgba(6,10,18,.95) 0%, rgba(10,16,28,.98) 100%);
  border-top:1px solid rgba(88,211,255,.2);
  overflow:hidden;
}
.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(155,255,177,.4), rgba(106,214,255,.4), transparent);
}
.footer::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:200px;
  background:radial-gradient(ellipse at center bottom, rgba(88,211,255,.08), transparent 70%);
  pointer-events:none;
}
.footer .container{position:relative; z-index:1}
.footer .grid{display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:28px}
.footer h4{
  margin:0 0 14px;
  font-size:15px;
  font-weight:700;
  color:#fff;
  letter-spacing:.3px;
}
.footer p{color:var(--muted); font-size:14px; line-height:1.6}
.footer a{
  color:var(--muted);
  font-size:14px;
  transition:color .2s ease;
  display:inline-block;
  margin-bottom:6px;
}
.footer a:hover{color:#9bffb1}
.footer .bottom{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#7b89a6;
  font-size:13px;
  text-align:center;
}

/* Legal logos list */
.legal-list{display:flex; flex-direction:column; gap:12px; margin-top:8px}
.legal-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  transition:background .2s ease, border-color .2s ease;
}
.legal-item:hover{background:rgba(88,211,255,.08); border-color:rgba(88,211,255,.2)}
.legal-item img{
  display:block;
  height:auto;
  max-height:28px;
  max-width:100px;
  width:auto;
}
.legal-item a{color:var(--muted); margin:0}

/* Powered by list */
.powered-list{display:flex; flex-direction:column; gap:12px; margin-top:8px}
.powered-item{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  transition:background .2s ease, border-color .2s ease;
  text-decoration:none;
  color:inherit;
}
.powered-item:hover{background:rgba(155,255,177,.08); border-color:rgba(155,255,177,.2)}
.powered-item img{
  display:block;
  height:auto;
  max-height:28px;
  max-width:100px;
  width:auto;
}
.powered-item span{color:var(--muted); font-weight:600; font-size:13px}
.powered-item img.logo-novax{
  max-height:28px;
}

/* Allow the footer to wrap to extra columns if needed */
@media (min-width: 981px){
  .footer .grid{grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr}
}

/* Responsive */
@media (max-width: 980px){
  .hero{padding:96px 0 48px}
  .hero .grid{grid-template-columns:1fr; gap:28px}
  .hero h1{font-size:52px}
  .hero h1::after{height:6px; width:52%}
  .hero .media img{height:360px}
  .hero .media video{height:360px; transform:scale(1.1); object-position:46% 58%}
  .feature-steps-grid{grid-template-columns:1fr; gap:40px}
  .steps-visual{order:-1}
  .section-ai .ai-grid{grid-template-columns:1fr}
  .section-ai .ai-media{aspect-ratio:3/4; width:100%}
  .section-ai .ai-media img{height:100%; object-fit:cover; object-position:50% 50%}
  .about .about-grid{grid-template-columns: 1fr 1fr}
  .grid-blog{grid-template-columns:1fr}
  .footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  body{overflow-x:hidden;}
  body.nav-open{overflow:hidden !important}
  
  /* Overlay */
  .nav-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:140;
  }
  body.nav-open .nav-overlay{
    display:block;
  }
  
  .navbar{position:relative}
  .navbar .inner{height:60px; padding:0 12px}
  .brand{flex:1}
  .brand .logo img{height:56px} /* Aumentado de 48px a 56px */
  
  /* Show hamburger button */
  .nav-toggle{display:flex; z-index:200}
  /* Colocar la X dentro del panel lateral, con margen del borde */
  body.nav-open .nav-toggle{
    position:fixed;
    top:14px;
    right:calc(15vw + 24px);
  }
  
  /* Nav actions en móvil */
  .nav-actions{gap:8px; margin-left:auto; margin-right:8px}
  .nav-actions .nav-home{font-size:13px; padding:6px 10px}
  .nav-actions .lang-switch{gap:4px}
  .nav-actions .lang-btn{width:30px; height:30px; padding:3px}
  .nav-actions .lang-btn img{width:18px; height:18px}
  
  /* Hide nav links by default, show when open */
  .nav-links{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    width:85vw !important;
    max-width:320px !important;
    height:100vh !important;
    height:100dvh !important;
    bottom:auto !important;
    background:#080d14 !important;
    border-right:1px solid rgba(88,211,255,.2);
    box-shadow:4px 0 30px rgba(0,0,0,.7);
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    padding:80px 20px 40px !important;
    gap:8px !important;
    transform:translateX(-100%);
    pointer-events:none;
    transition:transform .3s ease;
    z-index:150 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  body.nav-open .nav-links{
    transform:translateX(0) !important;
    pointer-events:auto !important;
  }
  .nav-links a{
    font-size:16px !important;
    padding:14px 16px !important;
    border-radius:10px !important;
    background:#111a26 !important;
    border:1px solid rgba(255,255,255,.1) !important;
    color:#e7f0ff !important;
    text-decoration:none !important;
    display:block !important;
  }
  .nav-links a:hover,.nav-links a.active{
    background:rgba(88,211,255,.18) !important;
    border-color:rgba(88,211,255,.35) !important;
    color:#fff !important;
  }
  .nav-links .btn.btn-primary{
    margin-top:16px !important;
    text-align:center !important;
    background:linear-gradient(180deg, #9bffb1, #00e676) !important;
    color:#0b1220 !important;
    font-weight:600 !important;
  }
  .nav-links .lang-switch{
    margin-top:20px !important;
    justify-content:flex-start !important;
  }
  
  /* Acerca de Examina Proctor - carrusel móvil */
  .about .bento-grid{
    display:flex;
    flex-direction:row;
    gap:16px;
    overflow-x:auto;
    padding:4px 8px 10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .about .bento-card{
    min-width:78%;
    max-width:78%;
    scroll-snap-align:center;
    flex-shrink:0;
    padding:18px;
  }
  .about .bento-card.bento-tall,
  .about .bento-card.bento-wide{
    min-height:0; /* evitar alturas excesivas en móvil */
  }
  /* ocultar scrollbar en algunos navegadores */
  .about .bento-grid::-webkit-scrollbar{display:none}
  .about .bento-grid{-ms-overflow-style:none; scrollbar-width:none}
  .about-arrow{display:flex}

  /* Supervisión real con apoyo inteligente - móvil (tarjeta única glass) */
  .section-ai{padding:56px 0 40px}
  .section-ai .ai-grid{gap:20px}
  .section-ai .ai-frames{max-width:320px; margin:0 auto}
  .section-ai .title{font-size:24px; text-align:left; margin-bottom:16px}
  .section-ai .ai-content{
    background:radial-gradient(circle at 0 0, rgba(155,255,177,.18), transparent 55%),
               radial-gradient(circle at 100% 100%, rgba(106,214,255,.18), transparent 55%),
               rgba(10,16,28,.82);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-radius:22px;
    border:1px solid rgba(120,196,255,.35);
    padding:18px 16px 16px;
    box-shadow:0 20px 50px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.6) inset;
    position:relative;
    overflow:hidden;
  }
  .section-ai .ai-content::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(135deg, rgba(255,255,255,.12), transparent 45%, rgba(0,0,0,.55));
    mix-blend-mode:soft-light;
    opacity:.35;
    pointer-events:none;
  }
  .section-ai .ai-content h2{position:relative; z-index:1; margin-bottom:10px}
  .section-ai .ai-content p{
    position:relative;
    z-index:1;
    margin:0 0 8px;
    font-size:14px;
    line-height:1.6;
  }
  .section-ai .ai-content p:last-of-type{margin-bottom:0}
  .section-ai .ai-content .accent{color:#9bffb1; font-weight:600}
  
  .hero{padding:72px 0 28px}
  .hero h1{font-size:32px}
  .hero h1::after{height:4px; width:50%}
  .hero .media img{height:220px}
  .hero .media video{height:220px; transform:scale(1.06); object-position:48% 60%}
  
  /* Hero móvil: orden título → subtítulo → imagen → botón */
  .hero-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
  }
  .hero-text{
    order:1 !important;
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
  }
  .hero-media{
    order:2 !important;
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
  }
  .hero-actions{
    order:3 !important;
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    margin-top:0;
    justify-content:center;
  }
  .cta h2{font-size:26px}
  /* Footer móvil mejorado */
  .footer{
    padding:40px 16px 32px;
    background:rgba(12,18,30,.85);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-top:1px solid rgba(88,211,255,.15);
    border-radius:24px 24px 0 0;
    margin-top:20px;
  }
  .footer .grid{
    grid-template-columns:1fr !important;
    gap:32px;
    text-align:center;
  }
  .footer h4{
    font-size:18px;
    margin-bottom:12px;
    color:#fff;
  }
  .footer p, .footer a{
    font-size:14px;
    line-height:1.6;
  }
  .legal-list, .powered-list{
    align-items:center;
    gap:14px;
  }
  .legal-item, .powered-item{
    flex-direction:row !important;
    justify-content:center;
  }
  .legal-item img, .powered-item img{
    max-height:36px;
    max-width:160px;
  }
  .footer .bottom{
    text-align:center;
    font-size:13px;
    margin-top:24px;
    padding-top:20px;
  }
  
  .about .about-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .grid-blog{perspective:none}
  .post, .post:hover{transform:none !important}
  .post .cover img, .post:hover .cover img{transform:none !important}
}

/* ===== NEW SEO PAGES STYLES ===== */

/* Breadcrumbs */
.breadcrumbs{padding:12px 0; background:rgba(255,255,255,.02); border-bottom:1px solid var(--border)}
.breadcrumbs ol{display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; font-size:14px}
.breadcrumbs li{display:flex; align-items:center}
.breadcrumbs li:not(:last-child)::after{content:"›"; margin-left:8px; color:var(--muted); font-size:16px}
.breadcrumbs a{color:var(--muted); transition:color .2s ease}
.breadcrumbs a:hover{color:var(--primary)}
.breadcrumbs li[aria-current="page"]{color:var(--text); font-weight:500}

/* Article Hero */
.article-hero{padding:80px 0 60px; position:relative}
.hero-content-article{max-width:800px; margin:0 auto; text-align:center}
.hero-content-article h1{font-size:clamp(36px, 5vw, 56px); line-height:1.1; margin:0 0 16px; background:linear-gradient(180deg, #ffffff, #d8fff0 35%, #9bffb1 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-subtitle{font-size:clamp(18px, 2.5vw, 24px); color:var(--muted); margin:0 0 20px; line-height:1.5}
.article-meta{display:flex; align-items:center; justify-content:center; gap:20px; font-size:14px; color:var(--muted)}
.meta-item{display:flex; align-items:center; gap:6px}
.meta-item::before{content:"•"; color:var(--primary)}
.meta-item:first-child::before{display:none}

/* Article Content */
.article-content{padding:40px 0 80px}
.article-container{max-width:820px; margin:0 auto}
.content-section{margin-bottom:60px}
.content-section:last-child{margin-bottom:0}
.lead-text{font-size:20px; line-height:1.7; color:#cfeaff; margin-bottom:28px}
.content-section h2{font-size:clamp(28px, 4vw, 36px); margin:0 0 20px; color:#fff; position:relative; padding-bottom:12px}
.content-section h2::after{content:""; position:absolute; left:0; bottom:0; width:60px; height:3px; background:linear-gradient(90deg, var(--primary), rgba(88,211,255,.3)); border-radius:3px}
.content-section h3{font-size:clamp(22px, 3vw, 28px); margin:28px 0 14px; color:#eaf4ff}
.content-section h4{font-size:clamp(18px, 2.5vw, 22px); margin:20px 0 12px; color:#eaf4ff}
.content-section p{font-size:17px; line-height:1.8; color:var(--muted); margin:0 0 18px}
.content-section ul, .content-section ol{margin:0 0 20px; padding-left:24px}
.content-section li{font-size:17px; line-height:1.8; color:var(--muted); margin-bottom:10px}

/* Highlight Boxes */
.highlight-box{background:linear-gradient(135deg, rgba(88,211,255,.08), rgba(0,230,118,.06)); border:1px solid rgba(88,211,255,.2); border-radius:16px; padding:24px; margin:28px 0; box-shadow:0 10px 30px rgba(0,0,0,.3)}
.highlight-box h3{margin:0 0 12px; font-size:20px; color:#fff}
.highlight-box p{margin:0; font-size:16px; line-height:1.7}

.info-box{background:rgba(88,211,255,.05); border-left:4px solid var(--primary); padding:20px 24px; margin:28px 0; border-radius:8px}
.info-box h4{margin:0 0 10px; color:var(--primary)}
.info-box p{margin:0 0 10px; font-size:16px}
.info-box p:last-child{margin:0}
.info-box ul{margin:10px 0 0; padding-left:20px}

.insight-text{background:rgba(155,255,177,.06); border:1px solid rgba(155,255,177,.2); border-radius:12px; padding:16px 20px; margin:24px 0; font-size:16px; line-height:1.7}

/* Lists */
.feature-list, .check-list{list-style:none; padding:0; margin:20px 0}
.feature-list li, .check-list li{position:relative; padding-left:32px; margin-bottom:14px}
.feature-list li::before{content:"▸"; position:absolute; left:0; color:var(--primary); font-size:18px}
.check-list li::before{content:"✓"; position:absolute; left:0; color:#00e676; font-size:18px; font-weight:700}

/* Comparison Grid */
.comparison-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; margin:28px 0}
.comparison-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:16px; padding:24px; transition:transform .3s ease, box-shadow .3s ease}
.comparison-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.5)}
.comparison-card.highlight{border-color:var(--primary); background:linear-gradient(135deg, rgba(88,211,255,.08), rgba(0,230,118,.04))}
.comparison-card h4{margin:0 0 16px; color:#fff; font-size:20px}
.comparison-card ul{list-style:none; padding:0; margin:0}
.comparison-card li{padding:8px 0; font-size:15px; border-bottom:1px solid rgba(255,255,255,.05)}
.comparison-card li:last-child{border-bottom:none}

/* Process Timeline */
.process-timeline{margin:32px 0}
.timeline-item{display:flex; gap:24px; margin-bottom:32px; position:relative}
.timeline-item::before{content:""; position:absolute; left:23px; top:56px; bottom:-32px; width:2px; background:linear-gradient(180deg, var(--primary), transparent); opacity:.3}
.timeline-item:last-child::before{display:none}
.timeline-number{flex-shrink:0; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--primary-2)); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:#0b1220; box-shadow:0 8px 20px rgba(88,211,255,.3); position:relative; z-index:1}
.timeline-content h4{margin:0 0 10px; font-size:20px; color:#fff}
.timeline-content p{margin:0; font-size:16px; line-height:1.7}

/* Types Grid */
.types-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:28px; margin:32px 0}
.type-card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:18px; padding:28px; position:relative; transition:transform .3s ease, box-shadow .3s ease}
.type-card:hover{transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.6)}
.type-card.featured{border-color:var(--primary); background:linear-gradient(135deg, rgba(88,211,255,.1), rgba(0,230,118,.05))}
.type-badge{position:absolute; top:-12px; right:20px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#0b1220; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; box-shadow:0 6px 16px rgba(88,211,255,.4)}
.type-icon{width:64px; height:64px; border-radius:14px; background:rgba(88,211,255,.1); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--primary)}
.type-card h3{margin:0 0 12px; font-size:22px; color:#fff}
.type-card p{margin:0 0 16px; font-size:15px; line-height:1.7}
.type-card ul{list-style:none; padding:0; margin:0 0 16px}
.type-card li{padding:6px 0; font-size:14px; color:var(--muted); position:relative; padding-left:20px}
.type-card li::before{content:"•"; position:absolute; left:0; color:var(--primary)}
.type-note{font-size:13px; color:#8fbef0; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06)}

/* Benefits Grid */
.benefits-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:24px; margin:32px 0}
.benefit-card{background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:14px; padding:24px; text-align:center; transition:transform .3s ease, border-color .3s ease}
.benefit-card:hover{transform:translateY(-4px); border-color:var(--primary)}
.benefit-icon{font-size:48px; margin-bottom:16px; display:block}
.benefit-card h4{margin:0 0 10px; font-size:18px; color:#fff}
.benefit-card p{margin:0; font-size:15px; line-height:1.6}

/* Why Examina Grid */
.why-examina-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; margin:28px 0}
.why-card{background:linear-gradient(135deg, rgba(88,211,255,.06), rgba(0,230,118,.04)); border:1px solid rgba(88,211,255,.15); border-radius:14px; padding:20px; transition:transform .3s ease}
.why-card:hover{transform:scale(1.03)}
.why-card h4{margin:0 0 8px; font-size:18px; color:#fff}
.why-card p{margin:0; font-size:14px; line-height:1.6}

/* CTA Section */
.cta-section{background:linear-gradient(135deg, rgba(155,255,177,.08), rgba(106,214,255,.08)); border:1px solid rgba(120,196,255,.25); border-radius:20px; padding:48px 32px; text-align:center; margin:60px 0}
.cta-section h3{margin:0 0 12px; font-size:32px; color:#fff}
.cta-section p{margin:0 0 28px; font-size:18px; color:var(--muted)}
.cta-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.cta-buttons .btn{min-width:200px}

/* FAQ Section */
.faq-section{margin-top:60px}
.faq-list{margin:28px 0}
.faq-item{background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px; padding:20px 24px; margin-bottom:16px; transition:background .3s ease, border-color .3s ease}
.faq-item:hover{background:rgba(255,255,255,.04); border-color:rgba(88,211,255,.3)}
.faq-question{margin:0; font-size:18px; color:#fff; cursor:pointer; position:relative; padding-right:30px}
.faq-question::after{content:"▼"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:12px; color:var(--primary); transition:transform .3s ease}
.faq-item.open .faq-question::after{transform:translateY(-50%) rotate(180deg)}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .4s ease, margin-top .4s ease}
.faq-item.open .faq-answer{max-height:500px; margin-top:16px}
.faq-answer p{margin:0 0 12px; font-size:16px; line-height:1.7}
.faq-answer p:last-child{margin:0}
.faq-answer ul{margin:10px 0; padding-left:24px}
.faq-answer li{margin-bottom:8px}

/* Related Content */
.related-section{margin-top:60px; padding-top:40px; border-top:1px solid var(--border)}
.related-section h3{margin:0 0 24px; font-size:24px; color:#fff; text-align:center}
.related-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px}
.related-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:14px; padding:24px; text-decoration:none; display:block; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease}
.related-card:hover{transform:translateY(-4px); border-color:var(--primary); box-shadow:0 12px 30px rgba(0,0,0,.4)}
.related-card h4{margin:0 0 10px; font-size:18px; color:#fff}
.related-card p{margin:0 0 12px; font-size:15px; color:var(--muted); line-height:1.6}
.read-more{color:var(--primary); font-size:14px; font-weight:600}

/* Pricing Hero */
.pricing-hero{padding:80px 0 60px}
.hero-content-pricing{max-width:700px; margin:0 auto; text-align:center}
.hero-content-pricing h1{font-size:clamp(36px, 5vw, 52px); line-height:1.1; margin:0 0 16px; background:linear-gradient(180deg, #ffffff, #d8fff0 35%, #9bffb1 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-content-pricing .hero-subtitle{font-size:clamp(20px, 3vw, 28px); color:#cfeaff; margin:0 0 12px}
.hero-content-pricing .hero-subtext{font-size:16px; color:var(--muted)}

/* Pricing Content */
.pricing-content{padding:40px 0 80px}
.pricing-container{max-width:1200px; margin:0 auto}
.pricing-section{margin-bottom:80px}
.pricing-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:32px; margin:40px 0}

/* Pricing Card */
.pricing-card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:20px; padding:32px 28px; position:relative; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.pricing-card:hover{transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.6); border-color:rgba(88,211,255,.4)}
.pricing-card.featured{border-color:var(--primary); background:linear-gradient(135deg, rgba(88,211,255,.1), rgba(0,230,118,.05)); box-shadow:0 16px 40px rgba(88,211,255,.2)}
.plan-badge{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#0b1220; padding:6px 18px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; box-shadow:0 6px 16px rgba(88,211,255,.4)}
.plan-header{margin-bottom:24px}
.plan-name{margin:0 0 8px; font-size:26px; color:#fff}
.plan-subtitle{margin:0; font-size:14px; color:var(--muted)}
.plan-price{margin-bottom:20px; display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:4px}
.price-prefix{font-size:14px; color:var(--muted); font-weight:500; width:100%; text-align:center; margin-bottom:-8px}
.price-currency{font-size:28px; color:var(--primary); font-weight:700; margin-right:4px}
.price-amount{font-size:56px; color:#fff; font-weight:800; line-height:1}
.price-period{font-size:16px; color:var(--muted); margin-left:8px}
.price-custom{font-size:32px; color:var(--primary); font-weight:700}
.plan-discount{text-align:center; margin-bottom:20px; padding:10px; background:rgba(0,230,118,.08); border-radius:8px}
.plan-discount p{margin:0; font-size:14px; color:#9bffb1; font-weight:600}
.plan-features{margin-bottom:28px}
.plan-features h4{margin:0 0 16px; font-size:16px; color:#eaf4ff; text-transform:uppercase; letter-spacing:.5px; font-weight:600}
.plan-features ul{list-style:none; padding:0; margin:0}
.plan-features li{padding:10px 0; font-size:15px; color:var(--muted); display:flex; align-items:flex-start; gap:10px; border-bottom:1px solid rgba(255,255,255,.04)}
.plan-features li:last-child{border-bottom:none}
.plan-features .check{color:#00e676; font-size:18px; flex-shrink:0}
.plan-cta .btn{width:100%; justify-content:center}

/* Volume Section */
.volume-section{margin-bottom:80px}
.volume-section h2{text-align:center; margin-bottom:16px}
.section-intro{text-align:center; max-width:700px; margin:0 auto 40px; font-size:17px; color:var(--muted)}
.volume-table{overflow-x:auto; margin:32px 0}
.volume-table table{width:100%; border-collapse:collapse; background:rgba(255,255,255,.02); border-radius:12px; overflow:hidden}
.volume-table th{background:rgba(88,211,255,.1); padding:16px; text-align:left; font-size:14px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--primary)}
.volume-table td{padding:16px; font-size:15px; color:var(--muted); border-bottom:1px solid rgba(255,255,255,.05)}
.volume-table tr:last-child td{border-bottom:none}
.volume-table .highlight-row{background:rgba(88,211,255,.05)}
.volume-table .highlight-row td{color:#cfeaff; font-weight:500}
.volume-note{background:rgba(155,255,177,.06); border:1px solid rgba(155,255,177,.2); border-radius:12px; padding:20px; margin-top:24px; text-align:center}
.volume-note p{margin:0; font-size:16px; line-height:1.7}

/* Value Section */
.value-section{margin-bottom:80px}
.value-section h2{text-align:center; margin-bottom:40px}
.value-comparison{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:32px; max-width:900px; margin:0 auto}
.comparison-col{background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:16px; padding:32px}
.comparison-col.highlight{border-color:var(--primary); background:linear-gradient(135deg, rgba(88,211,255,.08), rgba(0,230,118,.04))}
.comparison-col h4{margin:0 0 20px; font-size:22px; color:#fff; text-align:center}
.comparison-list{list-style:none; padding:0; margin:0}
.comparison-list li{padding:12px 0; font-size:16px; line-height:1.6; border-bottom:1px solid rgba(255,255,255,.05)}
.comparison-list li:last-child{border-bottom:none}
.comparison-list.negative li{color:#ff9b9b}
.comparison-list.positive li{color:#9bffb1}

/* Includes Section */
.includes-section{margin-bottom:80px}
.includes-section h2{text-align:center; margin-bottom:40px}
.features-detailed{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:28px}
.feature-detail{display:flex; gap:20px; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:14px; padding:24px; transition:transform .3s ease, border-color .3s ease}
.feature-detail:hover{transform:translateY(-4px); border-color:rgba(88,211,255,.3)}
.feature-icon{font-size:40px; flex-shrink:0}
.feature-content h4{margin:0 0 8px; font-size:18px; color:#fff}
.feature-content p{margin:0; font-size:15px; line-height:1.6}

/* FAQ Pricing Section */
.faq-pricing-section{margin-bottom:80px}
.faq-pricing-section h2{text-align:center; margin-bottom:40px}

/* Guarantee Section */
.guarantee-section{margin-bottom:80px}
.guarantee-section h2{text-align:center; margin-bottom:40px}
.guarantee-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px}
.guarantee-card{background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:14px; padding:28px; text-align:center; transition:transform .3s ease}
.guarantee-card:hover{transform:translateY(-4px)}
.guarantee-icon{font-size:48px; margin-bottom:16px; display:block}
.guarantee-card h4{margin:0 0 10px; font-size:18px; color:#fff}
.guarantee-card p{margin:0; font-size:15px; line-height:1.6}

/* Final CTA Section */
.final-cta-section{margin-bottom:60px}
.cta-box{background:linear-gradient(135deg, rgba(155,255,177,.1), rgba(106,214,255,.1)); border:1px solid rgba(120,196,255,.3); border-radius:24px; padding:56px 40px; text-align:center; position:relative; overflow:hidden}
.cta-box::before{content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,.1), transparent 40%, rgba(0,0,0,.3)); mix-blend-mode:soft-light; opacity:.4; pointer-events:none}
.cta-box h3{position:relative; margin:0 0 12px; font-size:36px; color:#fff}
.cta-box p{position:relative; margin:0 0 28px; font-size:18px; color:var(--muted)}
.cta-box .cta-buttons{position:relative}
.cta-note{position:relative; margin-top:20px; font-size:14px; color:#8fbef0}

/* Student Flow */
.student-flow{margin:32px 0}
.flow-step{margin-bottom:48px; position:relative}
.flow-number{width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--primary-2)); display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; color:#0b1220; box-shadow:0 10px 24px rgba(88,211,255,.35); margin-bottom:20px}
.flow-number span{position:relative; z-index:1}
.flow-content h3{margin:0 0 14px; font-size:24px; color:#fff}
.flow-content p{margin:0 0 16px; font-size:16px; line-height:1.7}
.flow-content ul, .flow-content ol{margin:16px 0; padding-left:24px}
.flow-content li{margin-bottom:10px; line-height:1.7}
.flow-tip, .flow-important, .flow-detail{background:rgba(88,211,255,.06); border-left:4px solid var(--primary); padding:16px 20px; margin:16px 0; border-radius:8px; font-size:15px}
.flow-important{background:rgba(155,255,177,.06); border-left-color:#00e676}

/* Dual System */
.dual-system{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; margin:28px 0}
.system-card{background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:14px; padding:24px}
.system-card.featured{border-color:var(--primary); background:linear-gradient(135deg, rgba(88,211,255,.08), rgba(0,230,118,.04))}
.system-card h4{margin:0 0 12px; font-size:20px; color:#fff}
.system-card p{margin:0 0 14px; font-size:15px}
.system-card ul{list-style:none; padding:0; margin:0 0 14px}
.system-card li{padding:6px 0; font-size:14px; position:relative; padding-left:20px}
.system-card li::before{content:"•"; position:absolute; left:0; color:var(--primary)}
.system-note{font-size:13px; color:#8fbef0; font-style:italic; margin:0}

/* Proctor Flow */
.proctor-flow{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; margin:32px 0}
.proctor-step{background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:20px; transition:transform .3s ease}
.proctor-step:hover{transform:translateY(-4px)}
.proctor-step h4{margin:0 0 10px; font-size:18px; color:#fff}
.proctor-step p{margin:0; font-size:15px; line-height:1.6}

/* AI Functions */
.ai-functions{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; margin:32px 0}
.ai-card{background:linear-gradient(135deg, rgba(88,211,255,.06), rgba(0,230,118,.04)); border:1px solid rgba(88,211,255,.15); border-radius:14px; padding:24px; text-align:center; transition:transform .3s ease, box-shadow .3s ease}
.ai-card:hover{transform:translateY(-6px); box-shadow:0 16px 40px rgba(88,211,255,.15)}
.ai-icon{font-size:48px; margin-bottom:16px; display:block}
.ai-card h4{margin:0 0 10px; font-size:18px; color:#fff}
.ai-card p{margin:0; font-size:15px; line-height:1.6}

/* Human Advantages */
.human-advantages{margin:32px 0}
.advantage-item{display:flex; gap:20px; margin-bottom:28px; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:14px; padding:24px; transition:transform .3s ease, border-color .3s ease}
.advantage-item:hover{transform:translateX(8px); border-color:rgba(88,211,255,.3)}
.advantage-icon{font-size:40px; flex-shrink:0}
.advantage-content h4{margin:0 0 8px; font-size:18px; color:#fff}
.advantage-content p{margin:0; font-size:15px; line-height:1.7}

/* Testimonial Box */
.testimonial-box{background:linear-gradient(135deg, rgba(155,255,177,.08), rgba(106,214,255,.06)); border:1px solid rgba(120,196,255,.2); border-radius:16px; padding:32px; margin:32px 0; position:relative}
.testimonial-box::before{content:"""; position:absolute; top:20px; left:24px; font-size:80px; color:rgba(88,211,255,.15); font-family:Georgia, serif; line-height:1}
.testimonial-text{position:relative; margin:0 0 16px; font-size:17px; line-height:1.7; color:#cfeaff; font-style:italic; padding-left:40px}
.testimonial-author{position:relative; margin:0; font-size:15px; color:var(--muted); text-align:right; padding-left:40px}

/* Comparison Table */
.comparison-table{overflow-x:auto; margin:32px 0}
.comparison-table table{width:100%; border-collapse:collapse; background:rgba(255,255,255,.02); border-radius:12px; overflow:hidden}
.comparison-table th{background:rgba(88,211,255,.08); padding:16px; text-align:center; font-size:14px; font-weight:700; color:#fff; border-bottom:2px solid rgba(88,211,255,.3)}
.comparison-table td{padding:16px; text-align:center; font-size:15px; color:var(--muted); border-bottom:1px solid rgba(255,255,255,.05)}
.comparison-table tr:last-child td{border-bottom:none}
.comparison-table .highlight-col{background:rgba(88,211,255,.06); color:#cfeaff; font-weight:600}
.conclusion-text{margin-top:24px; font-size:17px; line-height:1.7; text-align:center; padding:20px; background:rgba(155,255,177,.06); border-radius:12px}

/* Report Preview */
.report-preview{background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:20px; margin:20px 0}
.report-preview h4{margin:0 0 12px; font-size:18px; color:#fff}
.report-preview ul{margin:0; padding-left:24px}
.report-preview li{margin-bottom:8px; line-height:1.6}

/* Responsive */
@media (max-width: 768px){
  .pricing-grid{grid-template-columns:1fr}
  .comparison-grid{grid-template-columns:1fr}
  .types-grid{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr}
  .value-comparison{grid-template-columns:1fr}
  .dual-system{grid-template-columns:1fr}
  .ai-functions{grid-template-columns:1fr}
  .guarantee-grid{grid-template-columns:1fr}
  .volume-table{font-size:14px}
  .volume-table th, .volume-table td{padding:12px 8px}
  .cta-buttons{flex-direction:column}
  .cta-buttons .btn{width:100%; max-width:300px; margin:0 auto}
}

/* FAQ Accordion Styles */
.faq-list{max-width:800px; margin:0 auto}
.faq-item{background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px; margin-bottom:16px; overflow:hidden; transition:border-color .3s ease}
.faq-item:hover{border-color:rgba(88,211,255,.3)}
.faq-item.active{border-color:var(--primary); background:rgba(88,211,255,.04)}
.faq-question{margin:0; padding:20px 24px; font-size:18px; font-weight:600; color:#fff; cursor:pointer; position:relative; display:flex; justify-content:space-between; align-items:center}
.faq-question::after{content:"+"; font-size:24px; color:var(--primary); font-weight:400; transition:transform .3s ease}
.faq-item.active .faq-question::after{transform:rotate(45deg)}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .3s ease-out; padding:0 24px; opacity:0}
.faq-item.active .faq-answer{max-height:500px; padding-bottom:24px; opacity:1; transition:max-height .3s ease-in, opacity .3s ease-in}
.faq-answer p{margin:0; font-size:16px; line-height:1.6; color:var(--muted)}