/* assets/css/main.css (revised) */
/* =========================================================
   TOKENS
   ========================================================= */
:root{
  /* Brand */
  --mc-blue:#17407B;
  --mc-blue-2:#102C55;
  --mc-blue-3:#08172B;
  --mc-orange:#FE7301;

  /* Surfaces */
  --bg:#FFFFFF;
  --bg-soft:#F5F5F5;
  --card:#FFFFFF;

  /* Text */
  --text:#0f172a;     /* slate-900 vibe */
  --text-2:#334155;   /* slate-700 */
  --muted:#64748b;    /* slate-500 */

  /* Effects */
  --border: rgba(15,23,42,.10);
  --shadow: 0 18px 44px rgba(2,6,23,.08);
  --shadow-soft: 0 10px 26px rgba(2,6,23,.06);
  --radius: 22px;
  --ease-safe: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --motion-fast: 140ms;
  --motion-normal: 220ms;

  /* Layout */
  --container: 1120px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --fs-hero: clamp(32px, 4.2vw, 54px);
  --fs-h2: clamp(22px, 2.4vw, 30px);
  --fs-h3: 18px
  --fs-body: 16px;
  --fs-small: 13px;

  --lh-tight: 1.08;
  --lh-body: 1.75;

  --ls-hero: -0.03em;
  --ls-head: -0.015em;
}
@media (min-width: 1024px){
  :root{
    --fs-h2: clamp(28px, 2.2vw, 40px); /* bigger + premium */
    --fs-h3: 20px;                    /* keeps hierarchy balanced */
  }
}

/* =========================================================
   BASE / RESET
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: linear-gradient(180deg,#FFFFFF 0%,#FAFAFA 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p{ margin: 0; }
p + p{ margin-top: 10px; } /* consumer rhythm */
a{color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  background: rgba(255,255,255,.30);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);

  /* Default (child pages): dark links + blue underline */
  --nav-link: rgba(15,23,42,.82);
  --nav-link-hover: var(--mc-blue);
  --nav-underline: var(--mc-blue);
}

.nav.nav-scrolled{
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(2,6,23,.06);

  /* Keep dark links when scrolled (even on homepage hero) */
  --nav-link: rgba(15,23,42,.82);
  --nav-link-hover: var(--mc-blue);
  --nav-underline: var(--mc-blue);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
}

.brand-name{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
}

.logo{ height:34px; border-radius:12px; }

.nav-links{
  display:flex;
  gap:18px;
  align-items:center;
}

.nav-links a{
  font-size:14px;
  color: var(--nav-link);
  text-decoration:none;
  transition: color .18s ease;
}

.nav-links a:hover{
  color: var(--nav-link-hover);
}

@media (max-width: 920px){
  .nav-links a{display:none}
  .nav-links .btn{display:inline-flex}
}

/* ✅ White overlay nav ONLY when you explicitly want it (homepage hero) */
.has-hero-nav .nav:not(.nav-scrolled){
  --nav-link: rgba(255,255,255,.88);
  --nav-link-hover: rgba(255,255,255,.98);
  --nav-underline: rgba(255,255,255,.92);
}

/* Brand text in overlay mode */
.has-hero-nav .nav:not(.nav-scrolled) .brand-name,
.has-hero-nav .nav:not(.nav-scrolled) .brand div{
  color: rgba(255,255,255,.92);
}

/* Keep primary button text correct */
.nav .nav-links a.btn-primary{
  color:#fff !important;
}

/* Desktop: spacing */
@media (min-width: 1024px){
  .nav-inner{ padding: 18px 0; }
  .nav-links{ gap: 26px; }

  .nav-links a{
    font-size: 16px;
    letter-spacing: -0.01em;
    padding: 8px 2px;
  }

  .nav-links .btn{
    padding: 12px 18px;
    font-size: 14px;
  }

  /* Underline hover */
  .nav-links a:not(.btn){
    position: relative;
  }

  .nav-links a:not(.btn)::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    background: var(--nav-underline);
    transition: width .22s ease;
  }

  .nav-links a:not(.btn):hover::after{
    width:100%;
  }
}


/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  cursor:pointer;
  text-decoration:none;
  padding:12px 16px;
  border-radius:999px;
  font-weight:800;
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{transform: translateY(1px)}
.btn-primary{
  background: linear-gradient(135deg, var(--mc-blue), #2A75E1);
  color:#fff;
  box-shadow: 0 16px 36px rgba(23,64,123,.25);
}
.btn-primary:hover{opacity:.96}
.btn-secondary{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.88);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow:none;
}
.btn-secondary:hover{background: rgba(15,23,42,.08)}

/* =========================================================
   CARD
   ========================================================= */
.card{
  background:var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding: 68px 0 46px;
  background:
    radial-gradient(900px 460px at 15% 15%, rgba(254,115,1,.18), transparent 55%),
    radial-gradient(1000px 520px at 75% 0%, rgba(42,117,225,.22), transparent 58%),
    linear-gradient(180deg, rgba(8,23,43,1) 0%, rgba(16,44,85,1) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}


.hero:after{
  content:"";
  position:absolute; inset:auto -20% -55% -20%;
  height:520px;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  transform: rotate(-6deg);
  pointer-events:none;
}
.hero .container{position:relative; z-index:1}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}

/* =========================================================
   HERO (dark background) – improve contrast for buttons + tag
   ========================================================= */
.hero.hero-dark .tag{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}

.hero.hero-dark .btn-secondary{
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
}

.hero.hero-dark .btn-secondary:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
}

@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} }

.hero-card{
  padding: 34px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 64px rgba(0,0,0,.24);
}

h1{
  margin: 10px 0 12px;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  font-weight: 850;
  overflow-wrap:anywhere;
  hyphens:auto;
}

.hero-title {
  line-height: 1.2;
}

.hero-line-primary {
  color: var(--bg);
  opacity: 0.9;
  font-weight: 850;
}

.hero-highlight{
  color: var(--mc-orange);
  font-weight: 850;
  letter-spacing: var(--ls-head);
}

.sub{
  font-size: clamp(16px, 3vw, 20px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  max-width: 66ch;
  margin: 0 auto 1.4em;
  letter-spacing: 0.01em;
}
.sub b{ font-weight: 700; }

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* Demo card */
.demo{padding:22px;background: rgba(255,255,255,.92); color: var(--text)}
.demo h3{
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 800;
}
.textarea{ font-size: 15px; line-height: 1.65; width: 100%}
.small{ font-size: var(--fs-small); line-height: 1.45; }

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.out{
  margin-top:12px;
  background: rgba(42,117,225,.06);
  border:1px solid rgba(42,117,225,.14);
  padding:12px;
  border-radius:16px;
  min-height:72px;
}
/* ✅ Responsive overlap container (no fixed height needed) */
.demo-stack{
  display: grid;
  margin-top: 10px;
}

/* all layers occupy the same grid cell (overlap) */
.demo-layer{
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;

  /* prevents invisible layers from being "read" while still allowing container height */
  visibility: hidden;
}

/* active layer fades in */
.demo-layer.is-on{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.demo-img{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.08);
}

.demo-img img{
  width: 100%;
  height: auto;
  display: block;
}

/* Optional: tighten captions on small screens */
@media (max-width: 560px){
  .demo-layer .small{
    margin-top: 8px !important;
    line-height: 1.35;
  }
}

/* Mobile hero comfort */
.hero-grid > *{min-width:0}
.hero-card{padding: clamp(18px, 4.2vw, 34px);}
@media (max-width: 560px){
  .container{padding:0 16px}
  .nav-inner{padding:12px 0}
  .btn{padding:11px 14px}
  .hero{padding:54px 0 34px}
  .hero-card{border-radius:18px}
  .demo{padding:16px}
}
@media (max-width: 380px){
  h1{font-size: clamp(28px, 8.2vw, 42px)}
  .hero-card{padding:16px}
}

/* =========================================================
   SECTIONS (generic)
   ========================================================= */
section{padding: 72px 0}

.section-title{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 8px;
  margin: 0 0 18px;
}
.section-title h2{
  margin:0;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-head);
  font-weight: 850;
}
.section-title p{
  margin:0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 62ch;
}
@media (min-width: 980px){
  .section-title p{ font-size: 16px; max-width: 72ch; }
}

@media (min-width: 1024px){
  .section-title h2{
    position: relative;
    padding-bottom: 12px;
  }

  .section-title h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width: 72px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      var(--mc-blue),
      var(--mc-orange)
    );
    opacity: .85;
  }
}


.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width: 980px){ .grid3{grid-template-columns:1fr} }

/* =========================================================
   FEATURE CARDS (default – light background sections)
   ========================================================= */
.feature{
  padding:22px;
  position: relative;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  will-change: transform;
}

.feature h3{
  margin:0 0 8px;
  font-size: clamp(17px, 1.4vw, var(--fs-h3));
  line-height: 1.22;
  letter-spacing: -0.012em;
  font-weight: 820;
  transition: transform .18s ease, font-size .18s ease;
}

.feature p{
  margin:0;
  color: var(--text-2);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  max-width: 58ch;
  transition: transform .18s ease, font-size .18s ease;
}

.tag{
  display:inline-block;
  margin-top:12px;
  font-size: 12.5px;
  padding: 7px 12px;
  letter-spacing: 0.02em;
  font-weight:800;
  color: rgba(15,23,42,.82);
  background: rgba(15,23,42,.06);
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

@media (hover:hover){
  .feature:hover{
    transform: translateY(-6px);
    box-shadow: 0 26px 70px rgba(2,6,23,.12);
    border-color: rgba(23,64,123,.22);
    background: linear-gradient(180deg, rgba(23,64,123,.04), rgba(255,255,255,1));
  }
  .feature:hover .tag{
    border-color: rgba(254,115,1,.40);
    background: rgba(254,115,1,.12);
    color: rgba(15,23,42,.88);
  }
}

/* Desktop-only: bump typography on hover (without breaking mobile rhythm) */
@media (hover:hover) and (min-width: 980px){
  .feature:hover h3{
    font-size: clamp(18px, 1.45vw, 21px);
    transform: translateY(-1px);
  }
  .feature:hover p{
    font-size: clamp(15.5px, 1.18vw, 17.5px);
    transform: translateY(-1px);
  }
}

/* Reduce motion users */
@media (prefers-reduced-motion: reduce){
  .feature{ transition: none; }
  .feature:hover{ transform: none; }
  .feature h3, .feature p, .tag{ transition:none; }
}

/* =========================================================
   COMO FUNCIONA (hero-like section)
   ========================================================= */
#como-funciona{
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(254,115,1,.10), transparent 55%),
    radial-gradient(900px 520px at 80% 0%, rgba(42,117,225,.12), transparent 60%),
    linear-gradient(180deg, #0B1220 0%, #111827 100%);
  color: #fff;
}

#como-funciona .section-title h2{ color:#fff; }
#como-funciona .section-title p{ color: rgba(255,255,255,.70); }

#como-funciona .card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}

#como-funciona .feature p{ color: rgba(255,255,255,.78); }

#como-funciona .tag{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
}

#como-funciona .feature.attention-once::after{
  border-radius: var(--radius);
}

/* Make tag hover vivid inside dark section (fixes specificity + ordering) */
@media (hover:hover){
  #como-funciona .feature:hover{
    border-color: rgba(255,255,255,.22);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: 0 28px 80px rgba(0,0,0,.34);
  }

  #como-funciona .feature:hover .tag{
    border-color: rgba(254,115,1,.65);
    background: rgba(254,115,1,.18);
    color: rgba(255,255,255,.92);
    box-shadow: 0 10px 22px rgba(254,115,1,.18);
  }
}

/* Optional: stronger edge highlight per card (keeps your “option C” attention) */
@media (hover:hover){
  #como-funciona .grid3 .feature:nth-child(2):hover{
    border-color: rgba(42,117,225,.35);
  }
  #como-funciona .grid3 .feature:nth-child(3):hover{
    border-color: rgba(254,115,1,.40);
  }
}

/* =========================================================
   STATS ROTATOR
   ========================================================= */
.stat-rotator{
  position: relative;
  margin-top: 18px;
  height: clamp(290px, 30vw, 490px);
  width: calc(100% + 24px);
  margin-left: -12px;
  margin-right: -12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
@media (min-width: 980px){ .stat-rotator{ height: 480px; } }

.stat-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .55s ease, transform .9s ease;
  pointer-events:none;
}
.stat-slide.is-active{ opacity:1; transform: scale(1); }

.stat-bg{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: left center;
  display:block;
  /*filter: saturate(1.02) contrast(1.02);*/
}
/* Only apply filter after first paint (non-first slides) */
.stat-slide:not(:first-child) .stat-bg{
  filter: saturate(1.02) contrast(1.02);
}

@media (min-width: 1200px){ .stat-bg{ object-position: center center; } }

.stat-overlay{
  position:absolute;
  inset:0;
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:6px;
  background: linear-gradient(180deg, rgba(8,23,43,.75) 0%, rgba(8,23,43,.35) 45%, rgba(8,23,43,0) 100%);
}
.stat-overlay b{
  font-weight: 800;
  font-size: clamp(16px, 2.2vw, 18px);
  letter-spacing: -0.01em;
  color: var(--mc-orange);
  text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 12px rgba(254,115,1,.25);
}
.stat-overlay span{
  font-size: clamp(13px, 1.8vw, 14px);
  line-height: 1.35;
  color: rgba(255,255,255,.78);
  max-width: 52ch;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.guide-step.is-active img{ animation: guideZoom 6s ease-in-out forwards; }
@keyframes guideZoom { from{transform:scale(1)} to{transform:scale(1.04)} }

.stat-dots{
  position:absolute;
  left: 14px;
  bottom: 12px;
  display:flex;
  gap:8px;
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.22);
}
.dot.is-on{
  background: rgba(254,115,1,.85);
  border-color: rgba(254,115,1,.45);
  box-shadow: 0 8px 18px rgba(254,115,1,.24);
}
@media (prefers-reduced-motion: reduce){
  .stat-slide{transition:none; transform:none;}
}

/* =========================================================
   CHAT WINDOW
   ========================================================= */
#chatWindow{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px;
  min-height:420px;
  max-height:660px;
  overflow-y:auto;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}

.char-counter{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15,23,42,.55);
  text-align: right;
  transition: color .2s ease;
}

.char-counter.is-warning{
  color: #FE7301; /* MeConsulta secondary */
}

.char-counter.is-limit{
  color: #B00020; /* error red */
  font-weight: 700;
}

#charCounter{ font-size:12px; opacity:.7; }
#charCounter.is-warning{ opacity:.9; }
#charCounter.is-limit{ opacity:1; font-weight:900; }

#output {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

/* =========================================================
   MISSION DIVIDER
   ========================================================= */
.mission-divider{
  padding: clamp(64px, 12vw, 96px) 20px;
  text-align: center;
  background: linear-gradient(180deg, #F7FAFF 0%, #EEF4FF 100%);
}
.mission-divider::before{
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 0 auto 32px;
  background: linear-gradient(to right, transparent, rgba(23, 64, 123, 0.35), transparent);
}
.mission-label{
  display: block;
  margin-bottom: 20px;
  font-size: clamp(11px, 2.5vw, 13px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(23, 64, 123, 0.6);
}
.mission-text{
  font-size: clamp(20px, 4vw, 34px);
  line-height: 1.38;
  color: rgba(47, 52, 64, 0.75);
  max-width: 820px;
  margin: 0 auto;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.mission-text strong{
  display: block;
  margin-top: 10px;
  font-size: clamp(22px, 4.5vw, 38px);
  color: var(--mc-blue);
  font-weight: 800;
}

/* =========================================================
   TESTIMONIALS ROTATOR
   ========================================================= */
.testimonials{
  padding: 72px 0;
  background: #DCE8FF; /* close to your screenshot */
}

.testimonials-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
}

.testimonials h2{
  margin:0;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-head);
  color: rgba(15,23,42,.92);
}

.rating-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 30px rgba(2,6,23,.08);
}

.rating-pill .brand-mini{
  font-weight: 900;
  color: var(--mc-blue);
  font-size: 13px;
}

.rating-pill .stars{
  color: var(--mc-orange);
  font-weight: 900;
  letter-spacing: 2px;
}

/* Rotator frame */
.t-rotator{
  max-width: 760px; /* tighter container */
}

/* Card */
.t-slide{
  background: rgba(23,64,123,.12);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;          /* reduced */
  box-shadow: var(--shadow-soft);

  display: none;
}
.t-slide.is-active{ display:block; }

/* Author */
.t-slide h3{
  margin: 0 0 6px;
  font-size: var(--fs-h3);     /* ← token */
  line-height: 1.25;
  font-weight: 900;
  color: rgba(15,23,42,.9);
}

.t-slide h3 span{
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* Text */
.t-slide p{
  margin: 0;
  font-size: var(--fs-body);   /* ← token */
  line-height: 1.6;
  color: rgba(15,23,42,.75);
}

/* Dots */
.t-dots{
  margin-top: 10px;
  gap: 8px;
}

.t-dot{
  width: 8px;
  height: 8px;
}

.t-dot.is-on{ background: var(--mc-orange); }

/* Animation: FADE */
.t-rotator[data-anim="fade"] .t-slide{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease-safe), transform .45s var(--ease-safe);
}
.t-rotator[data-anim="fade"] .t-slide.is-active{
  opacity: 1;
  transform: translateY(0);
}

/* Animation: FLIP (more "wow") */
.t-rotator[data-anim="flip"]{
  perspective: 900px;
}
.t-rotator[data-anim="flip"] .t-slide{
  opacity: 0;
  transform: rotateY(-14deg) translateY(6px);
  transform-origin: left center;
  transition: opacity .45s var(--ease-safe), transform .55s var(--ease-safe);
}
.t-rotator[data-anim="flip"] .t-slide.is-active{
  opacity: 1;
  transform: rotateY(0) translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .t-rotator[data-anim="fade"] .t-slide,
  .t-rotator[data-anim="flip"] .t-slide{
    transition: none;
    transform: none;
  }
}

.t-slide{
  position: relative;
  background: rgba(23,64,123,.12);
}
.t-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.55); /* lifts background brightness */
  border-radius: inherit;
  pointer-events:none;
}
.t-slide > *{ position: relative; } /* keep text above overlay */
/* =========================================================
   PRICING / SUBSCRIPTION
   ========================================================= */
.pricing{
  padding: 84px 0;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(254,115,1,.12), transparent 55%),
    radial-gradient(900px 520px at 80% 0%, rgba(42,117,225,.16), transparent 60%),
    linear-gradient(180deg, #08172B 0%, #102C55 100%);
  color: #fff;
}

.pricing .section-title-light h2{ color:#fff; }
.pricing .section-title-light p{ color: rgba(255,255,255,.72); }

.billing{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 18px;
}

.billing-toggle{
  display:inline-flex;
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}

.billing-btn{
  border: 0;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  color: rgba(255,255,255,.78);
  background: transparent;
  transition: transform .12s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.billing-btn:hover{ color: rgba(255,255,255,.92); }

.billing-btn.is-on{
  color: #fff;
  background: linear-gradient(135deg, rgba(254,115,1,1), rgba(254,115,1,.78));
  box-shadow: 0 14px 28px rgba(254,115,1,.25);
}

.billing-note{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.78);
}

.billing-pill{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  background: rgba(254,115,1,.18);
  border: 1px solid rgba(254,115,1,.28);
}
.billing-text{ font-size: 14px; }

.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 12px;
}

@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   BILLING – MOBILE FIX (non-breaking)
   ========================================================= */
@media (max-width: 720px){

  .billing{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  /* Toggle becomes full-width */
  .billing-toggle{
    width: 100%;
    justify-content: space-between;
    padding: 6px;
  }

  /* Buttons share space evenly */
  .billing-btn{
    flex: 1;
    text-align: center;
    padding: 12px 10px;
    font-size: 14px;
  }

  /* Note moves below and centers */
  .billing-note{
    justify-content: center;
    text-align: center;
    gap: 8px;
  }

  .billing-pill{
    display:none;
  }

  .billing-text{
    font-size: 13px;
  }
}

@media (max-width: 720px){
  .billing-btn.is-on{
    box-shadow:
      0 10px 26px rgba(254,115,1,.35),
      inset 0 0 0 1px rgba(255,255,255,.25);
  }
}

/* Card base */
.pricing-card{
  position: relative;
  z-index: 2;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 26px 70px rgba(0,0,0,.28);
  padding: 18px 18px 16px;
  padding-top: 54px;
  overflow: hidden;

  display:flex;
  flex-direction: column;
}

.pricing-head{ padding: 6px 2px 10px; }

.pricing-kicker{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.72);
}

.pricing-title{
  margin: 8px 0 6px;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 950;
  color: rgba(255,255,255,.95);
}

.pricing-price{
  display:flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}

.pricing-value{
  font-size: 38px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.03em;
}
.pricing-period{
  color: rgba(255,255,255,.70);
  font-weight: 800;
}

.pricing-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.55;
}

.pricing-list li{
  position: relative;
  padding-left: 18px;
}

.pricing-list li::before{
  content:"•";
  position:absolute;
  left: 0;
  top: -1px;
  color: rgba(254,115,1,.92);
  font-weight: 900;
}

.pricing-list b{
  color: rgba(255,255,255,.95);
  font-weight: 900;
}

.mini-badge{
  display:inline-flex;
  align-items:center;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}

.pricing-footnote{
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(255,255,255,.62);
  line-height: 1.45;
}

.pricing-cta{
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* Featured plan */
.pricing-card.is-featured{
  background:
    radial-gradient(900px 520px at 40% 0%, rgba(254,115,1,.22), transparent 55%),
    rgba(255,255,255,.08);
  border-color: rgba(254,115,1,.34);
  transform: translateY(-6px);
}

@media (max-width: 980px){
  .pricing-card.is-featured{ transform: none; }
}

.pricing-badge{
  position:absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(15,23,42,.92);
  background: linear-gradient(135deg, rgba(255, 200, 160, 1), rgba(255, 170, 120, 1));
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.pricing-badge.alt{
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.14);
}

/* Free plan slightly lighter */
.pricing-card.is-free{
  background: rgba(255,255,255,.05);
}

/* Pro plan slightly warmer */
.pricing-card.is-pro{
  background:
    radial-gradient(900px 520px at 60% 0%, rgba(254,115,1,.14), transparent 55%),
    rgba(255,255,255,.06);
}
.pricing-card.is-pro .pricing-cta{
  opacity: .95;
  font-weight: 900;
}

/* Ultimate – custom pricing */
.pricing-price.is-custom{
  margin-top: 6px;
}

.pricing-price.is-custom .pricing-value{
  font-size: 22px;        /* NOT hero-sized */
  font-weight: 800;
  letter-spacing: -0.01em;
  opacity: .95;
}

/* Supporting explanation */
.pricing-caption{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  opacity: .7;
}

/* Trust line */
.pricing-trust{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  color: rgba(255,255,255,.78);
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.72);
  padding: 12px 14px;
}

.pricing-trust b{ color: rgba(255,255,255,.92); }

.trust-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(254,115,1,.85);
  box-shadow: 0 8px 18px rgba(254,115,1,.22);
  flex: 0 0 auto;
}

.trust-sep{
  opacity: .5;
  flex: 0 0 auto;
}

/* Desktop: keep it in one line */
@media (min-width: 980px){
  .pricing-trust{
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 12px;
  }
}

/* Small screens: smaller + cleaner */
@media (max-width: 560px){
  .pricing-trust{
    font-size: 12px;
    gap: 8px;
  }
  .pricing-trust .trust-sep{
    display: none; /* remove the dot separator to reduce clutter */
  }
}

/* Helper */
.is-hidden{ display:none !important; }

/* =========================================================
   CTA (refactor – more fluid with MeConsulta identity)
   ========================================================= */

/* Optional: CTA blue tokens (lighter than your current dark navy) */
:root{
  --cta-blue-top: #0E2A57;   /* lighter than #08172B */
  --cta-blue-mid: #123B76;   /* richer mid */
  --cta-blue-bot: #17407B;   /* brand primary */

}

/* Section */
.cta{
  padding: 84px 0;
  background:
  radial-gradient(900px 520px at 18% 0%, rgba(254,115,1,.10), transparent 55%),
  radial-gradient(900px 520px at 82% 0%, rgba(42,117,225,.18), transparent 60%),
  linear-gradient(180deg, var(--cta-blue-top) 0%, var(--cta-blue-mid) 55%, var(--cta-blue-bot) 100%);
  color:#fff;
}

/* Glass shell */
.cta-shell{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 26px 70px rgba(0,0,0,.26);
  padding: clamp(18px, 3.2vw, 28px);
  border-radius: 26px;
}

/* Title */
#cta .section-title-light h2{ color:#fff; }
#cta .section-title-light p{
  color: rgba(255,255,255,.76);
  max-width: 70ch;
}

/* Grid */
.cta-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .cta-grid{ grid-template-columns: 1fr; }
}

/* Left panel */
#cta .cta-left{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: 16px;
}

#cta .cta-mini{
  font-weight: 850;
  letter-spacing: -0.01em;
  font-size: 13px;
  color: rgba(255,255,255,.84);
  margin-bottom: 10px;
}

/* ✅ Better “item mark” list (use inside CTA for quick trust items or steps) */
.cta-list{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.55;
}
.cta-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

/* The marker: small orange glow + check */
.cta-list li::before{
  content:"";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-top: 2px;
  flex: 0 0 auto;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 55%),
    linear-gradient(135deg, rgba(254,115,1,1), rgba(254,115,1,.70));
  box-shadow:
    0 10px 22px rgba(254,115,1,.22),
    inset 0 0 0 1px rgba(255,255,255,.22);

  /* draw a check using mask (works in modern browsers) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 16.6 4.95 12l1.41-1.41 3.19 3.18 7.49-7.49L18.45 7z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 16.6 4.95 12l1.41-1.41 3.19 3.18 7.49-7.49L18.45 7z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* Store buttons */
.store-buttons{ display:flex; gap:12px; flex-wrap:wrap; }

.store-btn,
.store-badge{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 16px;
  text-decoration:none;

  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
  min-width: 210px;

  transition: transform .12s ease, box-shadow .22s ease, border-color .22s ease;
}

.store-btn:hover,
.store-badge:hover{
  transform: translateY(-1px);
  border-color: rgba(254,115,1,.30);
  box-shadow: 0 18px 40px rgba(2,6,23,.16);
}
.store-btn:active,
.store-badge:active{
  transform: translateY(0);
}

.store-badge img{
  height: 48px;
  width: auto;
  display: block;
}

/* Android button */
.store-android{
  background: rgba(255,255,255,.94);
  min-width: 210px;
}

.store-kicker{
  font-size: 12px;
  font-weight: 750;
  color: rgba(15,23,42,.55);
}

.store-name{
  margin-top: 2px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #111827;
}

.store-note{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(15,23,42,.60);
  max-width: 44ch;
}

/* Disabled state (coming soon) */
.store-btn.is-disabled{
  opacity: .72;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  transform: none !important;
}

/* Footnote (inside light store card) */
#cta .price-footnote{
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(15,23,42,.65);
  max-width: 48ch;
}

/* Links */
#cta .cta-links{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,.76);
}
#cta .cta-links a{
  color: rgba(255,255,255,.88);
  text-decoration: none;
}
#cta .cta-links a:hover{
  color:#fff;
  text-decoration: underline;
}

/* One shared box for both stores */
#cta .store-card{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(2,6,23,.14);
}

/* Badges row */
#cta .store-badges{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

/* Clickable badge area */
#cta .store-badge-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  transition: transform .15s ease;
}
#cta .store-badge-link:hover{ transform: translateY(-1px); }

/* Normalize badge sizing */
#cta .store-badges img{
  display: block;
  height: 48px;
  width: auto;
}

/* Footnote inside the shared box */
#cta .store-card .price-footnote{
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(15,23,42,.65);
  max-width: 56ch;
}

/* =========================================================
   CTA PATCH — equal height + mobile badge sizing (scoped)
   Paste AFTER your current CTA CSS
   ========================================================= */

/* 1) Make the two columns stretch to same height */
#cta .cta-grid{
  align-items: stretch; /* was start */
}

/* Ensure both sides can actually stretch */
#cta .cta-left,
#cta .cta-qr{
  height: 100%;
}

/* Make the QR white card fill its column height */
#cta .qr-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Optional: keep QR centered nicely */
#cta .qr-img{
  margin-top: 12px;
  margin-bottom: 0;
}

/* 2) Badges: desktop stays side-by-side; mobile = equal width */
#cta .store-badges{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;     /* keep them on one row by default */
}

/* Make each badge occupy the same “slot” width */
#cta .store-badge-link{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Optional: give both badges the same clickable box */
  padding: 10px 12px;
  border-radius: 14px;
}

/* Make SVGs scale consistently inside the same box */
#cta .store-badge-link img{
  width: 100%;
  max-width: 220px;
  height: 44px;          /* consistent height */
  object-fit: contain;
  display: block;
}

/* Optical balance: Google badge *looks* bigger */
#cta .store-badge-link.is-android img{ transform: scale(.92); transform-origin: center; }

/* Mobile: stack, but keep SAME width (full-width buttons) */
@media (max-width: 520px){
  #cta .store-badges{
    flex-wrap: wrap;     /* allow stacking */
  }
  #cta .store-badge-link{
    flex: 1 1 100%;
    width: 100%;
  }
  #cta .store-badge-link img{
    max-width: 260px;    /* centered badge inside full-width button */
    height: 46px;
  }
}

/* 3) (Optional) If you want the store-card itself to feel “taller”
      so it visually balances the QR column */
#cta .cta-left{
  display: flex;
  flex-direction: column;
}
#cta .store-card{
  flex: 1 1 auto;
}

/* =========================================================
   CTA Desktop polish — make store card feel “designed”
   Paste AFTER your current CTA CSS
   ========================================================= */

@media (min-width: 981px){

  /* Make the big white card feel less empty */
  #cta .store-card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* badges top, footnote bottom */
    padding: 22px 24px;
    min-height: 220px;               /* gives presence, avoids giant emptiness */
    background:
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 100%);
  }

  /* Keep badges grouped (not far apart across the whole card) */
  #cta .store-badges{
    justify-content: flex-start;      /* keep them together */
    gap: 14px;
  }

  /* IMPORTANT: remove “equal slot width” behavior on desktop,
     so badges don’t stretch / look weird */
  #cta .store-badge-link{
    flex: 0 0 auto;
    padding: 10px 14px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 10px 22px rgba(2,6,23,.10);
  }

  /* Normalize badge visuals */
  #cta .store-badge-link img{
    width: auto;
    max-width: none;
    height: 46px;
  }

  /* Footnote: anchor it and make it read nicely */
  #cta .store-card .price-footnote{
    margin: 14px 0 0;
    color: rgba(15,23,42,.62);
  }
}

/* Keep your mobile behavior intact: equal width / full-width stack */
@media (max-width: 520px){
  #cta .store-badge-link{
    flex: 1 1 100%;
    width: 100%;
  }
  #cta .store-badge-link img{
    width: 100%;
    max-width: 260px;
    height: 46px;
    object-fit: contain;
  }
}


/* QR (desktop only) */
.cta-qr{ display:block; }
@media (max-width: 980px){
  .cta-qr{ display:none; }
}

.qr-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.94);
  padding: 14px;
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
  text-align:center;
}
.qr-title{font-weight:850;letter-spacing:-0.01em;color: var(--text)}
.qr-sub{margin-top:4px;font-size:13px;color: var(--muted);line-height:1.4}
.qr-img{
  width: 100%;
  max-width: 210px;
  margin: 10px auto 0;
  display:block;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}
.qr-foot{margin-top:10px;font-size:12px;color: rgba(15,23,42,.62)}
/* =========================================================
   PRICING – button contrast fix
   ========================================================= */
.pricing .btn-secondary{
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.pricing .btn-secondary:hover{
  background: rgba(255,255,255,.18);
}

.pricing .btn-secondary:active{
  background: rgba(255,255,255,.16);
}

/* =========================================================
   APP SHOWCASE (store-like)
   ========================================================= */
.app-showcase{
  padding: 72px 0;
  background:
    radial-gradient(900px 520px at 60% 0%, rgba(42,117,225,.18), transparent 55%),
    radial-gradient(900px 520px at 15% 30%, rgba(254,115,1,.12), transparent 60%),
    linear-gradient(180deg, #08172B 0%, #102C55 100%);
  color: #fff;
}
.section-title-light h2{ color:#fff; }
.section-title-light p{ color: rgba(255,255,255,.70); }

.showcase-stage{
  position: relative;
  margin-top: 18px;
  padding: 128px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: center;
}
@media (max-width: 980px){
  .showcase-stage{ grid-template-columns: 1fr; padding: 18px; }
}

/* Arrows */
.showcase-prev,
.showcase-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  cursor: pointer;
  z-index: 5;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.showcase-prev{ left: 12px; }
.showcase-next{ right: 12px; }
.showcase-prev:hover, .showcase-next:hover{ background: rgba(255,255,255,.26); }

@media (min-width: 900px){
  .showcase-prev, .showcase-next{ width: 48px; height: 48px; font-size: 18px; }
  .showcase-prev:hover, .showcase-next:hover{
    transform: translateY(-50%) scale(1.16);
    border-color: rgba(254,115,1,.45);
    box-shadow: 0 10px 26px rgba(254,115,1,.35);
  }
  .showcase-prev:active, .showcase-next:active{ transform: translateY(-50%) scale(.96); }
}

.showcase-left{
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
}
.showcase-media{
  position: relative;
  width: min(420px, 90%);
  aspect-ratio: 9/16;
}
.phone-frame{
  position: absolute;
  width: min(460px, 92%);
  aspect-ratio: 9/16;
  border-radius: 34px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.showcase-slide{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .55s ease, transform .9s ease;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.showcase-slide.is-active{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.showcase-slide img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 28px;
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
  background: rgba(255,255,255,.02);
}

.showcase-title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 900;
}
.showcase-desc{
  margin: 0;
  max-width: 52ch;
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.65;
  color: rgba(255,255,255,.70);
}

.showcase-footer{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.showcase-counter{ color: rgba(255,255,255,.65); }

.showcase-dots{ display:flex; gap:8px; justify-content:center; align-items:center; }
.showcase-dots .dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.32);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.showcase-dots .dot.is-on{
  background: var(--mc-orange);
  border-color: rgba(254,115,1,.55);
  box-shadow: 0 6px 16px rgba(254,115,1,.35);
}
@media (min-width: 900px){
  .showcase-dots{ gap: 12px; }
  .showcase-dots .dot{ width:12px; height:12px; }
  .showcase-dots .dot.is-on{ transform: scale(1.15); box-shadow: 0 8px 20px rgba(254,115,1,.45); }
}
@media (min-width: 900px){
  .showcase-dots .dot.is-on{ width: 28px; border-radius: 999px; }
}

/* =========================================================
   APP GUIDE (polish)
   ========================================================= */
#app .card.guide{ padding: 18px; }

#app .guide-viewport{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(254,115,1,.18), transparent 55%),
    radial-gradient(900px 420px at 80% 0%, rgba(42,117,225,.18), transparent 60%),
    linear-gradient(180deg, rgba(8,23,43,1) 0%, rgba(16,44,85,1) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 44px rgba(2,6,23,.10);
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 980px){
  #app .guide-viewport{
    grid-template-columns: 1fr 420px;
    align-items: center;
    gap: 26px;
    padding: 22px;
  }
}

#app .app-guide-overlay{ max-width: 420px; margin: 0; order: 2; }

#app .guide-track{
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 9 / 16;
  justify-self: center;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

#app .guide-step{ margin: 0; width: 100%; height: 100%; }
#app .guide-step img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  background: rgba(255,255,255,.92);
}

#app .app-guide-title{ color: rgba(255,255,255,.95); font-size: 22px; letter-spacing: -0.02em; }
#app .app-guide-desc{ color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.6; }
#app .guide-meta{ display: none; }
#app .guide-step-indicator{ color: rgba(255,255,255,.62); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:22px}
details{border:1px solid rgba(15,23,42,.12);border-radius:16px;padding:12px 14px;background:#fff}
details + details{margin-top:10px}
summary{cursor:pointer;font-weight:900;color:var(--text)}

/* =========================================================
   FAQ – Typography refinement (desktop)
   ========================================================= */
.faq details summary{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.faq details p{
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
}

/* Desktop enhancement */
@media (min-width: 1024px){
  .faq details summary{
    font-size: 18px;          /* clearer hierarchy */
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .faq details p{
    font-size: 16px;
    line-height: 1.75;
    max-width: 680px;         /* better readability */
  }
}

/* =========================================================
   FOOTER (single source of truth — matches current HTML)
   ========================================================= */
.footer{
  padding: 56px 0 42px;
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(254,115,1,.10), transparent 55%),
    radial-gradient(900px 520px at 82% 0%, rgba(42,117,225,.16), transparent 60%),
    linear-gradient(180deg, #08172B 0%, #102C55 100%);
  color: rgba(255,255,255,.78);
  border-top: 1px solid rgba(255,255,255,.10);
}

.footer a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
}
.footer a:hover{
  color:#fff;
  text-decoration: underline;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1.6fr 1fr;
  gap: 32px;
  align-items: start; /* better baseline alignment */
}

/* Brand */
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 12px;
}

.footer-logo{
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.28));
}

.footer-logo{
  width: 180px;      /* choose ONE */
  height: auto;      /* let browser keep ratio */
  max-width: 100%;
  display: block;
}

.footer-tagline{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.65);
  max-width: 32ch;
}

/* Legal */
.footer-legal p{
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.74);
}

.footer-legal strong{ color:#fff; }

.footer-rights{
  margin-top: 12px;
  font-size: 13.5px;
  color: rgba(255,255,255,.55);
}

.footer-legal-link {
  color: inherit;
  text-decoration: none;
}

.footer-legal-link:hover {
  text-decoration: underline;
}

.footer-contact{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.footer-contact-line{
  font-size: 14.5px;
  color: rgba(255,255,255,.74);
  margin-bottom: 10px;
}

.footer-newsletter-row{
  display: flex;
  gap: 10px;
}

.footer-newsletter-row input{
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
}

.footer-newsletter-row input::placeholder{
  color: rgba(255,255,255,.55);
}

.footer-newsletter-row button{
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.footer-newsletter-msg{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

.mc-hp{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mc-hp { display: none !important; }

/* Nav */
.footer-nav{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.footer-nav h4{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color:#fff;
}
.footer-nav a{
  font-size: 14.5px;
  color: rgba(255,255,255,.72);
}

/* Desktop boost */
@media (min-width: 1024px){
  .footer{ padding: 72px 0 54px; }
  .footer-legal p{ font-size: 15.5px; }
  .footer-nav a{ font-size: 15.5px; }
}

/* Responsive */
@media (max-width: 900px){
  .footer{ padding: 44px 0 34px; }
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: flex-start;
  }
  .footer-logo{ width: 220px; }
}

@media (max-width: 600px){
  .footer-logo{ width: 180px; }
  .footer-tagline{ font-size: 14px; }
}
------

.feature,
.btn,
.card{
  transition:
    transform var(--motion-normal) var(--ease-safe),
    box-shadow var(--motion-normal) var(--ease-safe),
    background var(--motion-normal) var(--ease-safe),
    border-color var(--motion-normal) var(--ease-safe);
}

/* --- State-aware feedback --- */
.is-active-state{
  position: relative;
}

.is-active-state::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  border: 1px solid rgba(254,115,1,.55);
  box-shadow: 0 0 0 0 rgba(254,115,1,.35);
  animation: statePulse 1.8s ease-out 1;
  pointer-events:none;
}

@keyframes statePulse{
  0%   { box-shadow: 0 0 0 0 rgba(254,115,1,.35); }
  100% { box-shadow: 0 0 0 14px rgba(254,115,1,0); }
}

.attention-once{
  position: relative;
}

.attention-once::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  border: 1px dashed rgba(254,115,1,.55);
  animation: attentionOnce 2.4s ease-out 1;
  pointer-events:none;
}

@keyframes attentionOnce{
  0%   { opacity:0; transform: scale(.98); }
  25%  { opacity:1; }
  100% { opacity:0; transform: scale(1); }
}