:root{

  --bg:#0B0F17;

  --bg2:#0A1222;

  --card: rgba(255,255,255,.06);

  --border: rgba(255,255,255,.10);

  --text:#EAF0FF;

  --muted:#A6B1CC;

  --accent:#F36F21;     /* Riwi orange */

  --accent2:#4DA3FF;    /* electric blue */

  --shadow: 0 18px 50px rgba(0,0,0,.45);

}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{

  margin:0;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  background: var(--bg);

  color: var(--text);

  overflow-x:hidden;

}

a{ color: inherit; text-decoration:none; }

.container{ width:min(1120px, 92vw); margin:0 auto; }

.muted{ color:var(--muted); }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }

/* Background */

.bg-blob{

  position: fixed;

  width: 800px; height: 800px;

  border-radius: 50%;

  filter: blur(60px);

  opacity: .22;

  z-index:-3;

  pointer-events:none;

}

.blob-a{ left:-240px; top:-220px; background: radial-gradient(circle at 30% 30%, rgba(243,111,33,.9), transparent 55%); }

.blob-b{ right:-260px; top:40px; background: radial-gradient(circle at 30% 30%, rgba(77,163,255,.85), transparent 55%); }

.bg-grid{

  position: fixed;

  inset:0;

  background-image:

    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);

  background-size: 48px 48px;

  opacity: .08;

  z-index:-4;

  pointer-events:none;

  mask-image: radial-gradient(circle at 40% 0%, black, transparent 60%);

}

/* Topbar */

.topbar{

  position: sticky;

  top:0;

  z-index: 50;

  backdrop-filter: blur(14px);

  background: rgba(11,15,23,.55);

  border-bottom: 1px solid rgba(255,255,255,.06);

}

.topbar-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap: 18px;

  padding: 14px 0;

}

.brand{

  display:flex;

  align-items:center;

  gap: 12px;

}

.brand-logo{

  width: 34px;

  height: 34px;

  border-radius: 12px;

  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));

  animation: float 4.4s ease-in-out infinite;

}

.brand-text{ display:flex; flex-direction:column; line-height:1.05; }

.brand-name{ font-weight: 800; letter-spacing:.2px; }

.brand-tag{ font-size: 12px; color: var(--muted); }

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

.nav-link{

  font-size: 14px;

  color: rgba(234,240,255,.82);

  padding: 8px 10px;

  border-radius: 10px;

  border: 1px solid transparent;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;

}

.nav-link:hover{

  background: rgba(255,255,255,.06);

  border-color: rgba(255,255,255,.10);

  transform: translateY(-1px);

}

.topbar-cta{ display:flex; gap: 10px; align-items:center; }

.nav-toggle{

  display:none;

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(255,255,255,.04);

  border-radius: 12px;

  width: 42px; height: 42px;

  padding: 10px;

  cursor:pointer;

}

.nav-toggle span{

  display:block;

  height:2px;

  background: rgba(234,240,255,.85);

  margin: 5px 0;

  border-radius: 2px;

}

.nav-mobile{

  display:none;

  flex-direction:column;

  gap: 10px;

  padding: 10px 0 18px;

}

.nav-mobile .nav-link{ width:max-content; }

/* Buttons */

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap: 8px;

  padding: 10px 14px;

  border-radius: 14px;

  font-weight: 800;

  font-size: 14px;

  cursor:pointer;

  user-select:none;

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(255,255,255,.04);

  transition: transform .15s ease, filter .15s ease, background .15s ease;

}

.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }

.btn.primary{

  background: linear-gradient(135deg, rgba(243,111,33,1), rgba(243,111,33,.86));

  border-color: rgba(243,111,33,.35);

  box-shadow: 0 18px 40px rgba(243,111,33,.20);

}

.btn.ghost{ background: rgba(255,255,255,.04); }

/* Hero */

.hero{ padding: 70px 0 0; }

.hero-inner{

  display:grid;

  grid-template-columns: 1.1fr .9fr;

  gap: 36px;

  align-items:center;

  padding: 24px 0 56px;

}

.pill{

  display:inline-flex;

  align-items:center;

  gap: 10px;

  padding: 8px 12px;

  border-radius: 999px;

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(255,255,255,.10);

  font-size: 13px;

  color: rgba(234,240,255,.85);

}

.pill .dot{

  width: 8px; height: 8px;

  border-radius: 50%;

  background: #43ff9c;

  box-shadow: 0 0 0 6px rgba(67,255,156,.14);

  animation: pulse 1.6s ease-in-out infinite;

}

@keyframes pulse{

  0%,100%{ transform: scale(1); opacity: 1; }

  50%{ transform: scale(1.15); opacity:.7; }

}

.hero h1{

  margin: 16px 0 14px;

  font-size: clamp(40px, 5vw, 56px);

  line-height: 1.03;

  letter-spacing: -.8px;

}

.accent{ color: var(--accent); }

.type{

  background: linear-gradient(135deg, rgba(77,163,255,.95), rgba(234,240,255,.85));

  -webkit-background-clip:text;

  background-clip:text;

  color: transparent;

}

.lead{

  font-size: 16px;

  line-height: 1.6;

  color: rgba(234,240,255,.82);

  max-width: 56ch;

}

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

.hero-metrics{

  display:grid;

  grid-template-columns: repeat(3, minmax(0,1fr));

  gap: 12px;

  margin-top: 22px;

}

.metric{

  padding: 12px 14px;

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(255,255,255,.03);

  display:flex;

  gap:12px;

  align-items:flex-start;

}

.metric-accent{

  border: 1px solid rgba(243,111,33,.28) !important;

  box-shadow: 0 18px 40px rgba(243,111,33,.08);

}

.metric-icon{

  width: 44px;

  height: 44px;

  border-radius: 16px;

  display:grid;

  place-items:center;

  font-size: 22px;

  background: rgba(243,111,33,.10);

  border: 1px solid rgba(243,111,33,.20);

}

.metric-value{ font-weight: 900; }

.metric-label{ font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Hero Visual */

.hero-visual{ position:relative; }

.hero-mascot{

  position: relative;

  height: 260px;

  margin-bottom: 6px;

}

.mascot{

  filter: drop-shadow(0 22px 40px rgba(0,0,0,.42));

  transform-origin: 60% 60%;

}

.mascot.big{

  position:absolute;

  right: 0;

  top: -10px;

  width: min(430px, 78vw);

}

.float{ animation: float 5.4s ease-in-out infinite; }

@keyframes float{

  0%{ transform: translateY(0px) rotate(0deg); }

  50%{ transform: translateY(-10px) rotate(1deg); }

  100%{ transform: translateY(0px) rotate(0deg); }

}

.card{

  border-radius: 22px;

  border: 1px solid var(--border);

  background: rgba(255,255,255,.04);

  box-shadow: var(--shadow);

}

.glass{ backdrop-filter: blur(14px); }

/* Chat */

.chat-preview{ margin-top: 10px; padding: 14px 14px 12px; }

.chat-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding: 6px 8px 10px;

}

.badge-live{

  display:inline-flex;

  align-items:center;

  gap: 8px;

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid rgba(67,255,156,.22);

  background: rgba(67,255,156,.08);

  color: rgba(234,240,255,.92);

  font-size: 12px;

}

.badge-live .pulse{

  width: 8px; height: 8px;

  border-radius:50%;

  background: #43ff9c;

  box-shadow: 0 0 0 7px rgba(67,255,156,.14);

  animation: pulse 1.6s ease-in-out infinite;

}

.chat-body{

  padding: 10px 8px 6px;

  display:flex;

  flex-direction:column;

  gap: 10px;

}

.msg{ display:flex; align-items:flex-end; gap: 10px; }

.msg.right{ justify-content:flex-end; }

.avatar{

  width: 28px; height: 28px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.12);

  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,.06));

}

.avatar.riwi{

  background: radial-gradient(circle at 30% 30%, rgba(243,111,33,.55), rgba(77,163,255,.20));

  border-color: rgba(243,111,33,.22);

}

.bubble{

  padding: 10px 12px;

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(255,255,255,.04);

  color: rgba(234,240,255,.92);

  max-width: 56ch;

  line-height:1.45;

}

.bubble.orange{

  background: rgba(243,111,33,.18);

  border-color: rgba(243,111,33,.25);

}

.typing{

  margin-left: 40px;

  display:flex;

  gap: 6px;

  opacity: .85;

}

.typing span{

  width: 7px; height: 7px;

  border-radius: 999px;

  background: rgba(234,240,255,.8);

  animation: blink 1.2s infinite;

}

.typing span:nth-child(2){ animation-delay: .2s; }

.typing span:nth-child(3){ animation-delay: .4s; }

@keyframes blink{

  0%,100%{ opacity:.25; transform: translateY(0); }

  50%{ opacity:1; transform: translateY(-2px); }

}

/* Sections */

.section{ padding: 72px 0; }

.section.alt{

  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));

}

.section-head{

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  gap: 20px;

  margin-bottom: 22px;

}

.section-head h2{

  margin:0;

  font-size: 32px;

  letter-spacing:-.4px;

}

.section-head p{ margin:0; max-width: 70ch; }

.cards{ display:grid; gap: 14px; }

.cards.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.cards .card{ padding: 18px; }

.icon{

  width: 42px; height: 42px;

  border-radius: 14px;

  display:flex;

  align-items:center;

  justify-content:center;

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(255,255,255,.10);

  margin-bottom: 10px;

}

/* Flow cards */

.flow{

  display:grid;

  grid-template-columns: repeat(4, minmax(0,1fr));

  gap: 14px;

}

.flow-step{ padding: 18px; position:relative; overflow:hidden; }

.flow-num{

  width: 34px; height: 34px;

  border-radius: 12px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-weight: 900;

  background: rgba(243,111,33,.12);

  border: 1px solid rgba(243,111,33,.18);

  color: rgba(255,255,255,.92);

  margin-bottom: 10px;

}

/* HOW flow (animado y útil) */

.how-flow{

  margin: 18px 0 0;

  padding: 16px 16px 16px;

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 18px;

  background: rgba(255,255,255,.03);

}

.how-track{

  position: relative;

  height: 56px;

  display:flex;

  align-items:center;

  gap: 12px;

  margin-bottom: 10px;

}

.how-mascot{

  width: 52px;

  height: 52px;

  flex: 0 0 auto;

  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));

  position: absolute;

  left: 0;

  top: 2px;

  transform: translateX(var(--mx, 0px));

  transition: transform .55s cubic-bezier(.2,.8,.2,1);

}

.how-rail{

  width: 100%;

  display:grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  padding-left: 64px; /* deja espacio al mascot */

}

.how-rail .seg{

  height: 8px;

  border-radius: 999px;

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(255,255,255,.08);

  position: relative;

  overflow:hidden;

}

.how-rail .seg::after{

  content:"";

  position:absolute;

  inset:0;

  transform: translateX(-100%);

  background: linear-gradient(90deg, transparent, rgba(243,111,33,.72), rgba(77,163,255,.45), transparent);

  opacity: .85;

  transition: transform .55s cubic-bezier(.2,.8,.2,1);

}

.how-rail .seg.on::after{ transform: translateX(0%); }

.how-tags{ display:flex; gap:10px; flex-wrap: wrap; }

.chip{

  padding: 8px 10px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(255,255,255,.04);

  cursor:pointer;

  color: rgba(234,240,255,.90);

  font-weight: 800;

}

.chip:hover{ background: rgba(255,255,255,.07); }

.chip.active{

  border-color: rgba(243,111,33,.35);

  box-shadow: 0 14px 30px rgba(243,111,33,.10);

  background: rgba(243,111,33,.12);

}

.how-note{

  margin-top: 10px;

  font-size: 13px;

  line-height: 1.45;

  color: rgba(234,240,255,.72);

}

/* Use cases */

#usecases .cards-3{

  display:grid;

  grid-template-columns: repeat(3, minmax(0,1fr));

  gap: 18px;

}
#usecases.section{ padding-top: 46px;}
.uc-card{

  padding: 18px;

  border-radius: 18px;

  border: 1px solid rgba(255,255,255,.08);

  background: rgba(255,255,255,.03);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;

}

.uc-card:hover{

  transform: translateY(-4px);

  border-color: rgba(243,111,33,.28);

  box-shadow: 0 22px 50px rgba(0,0,0,.35);

}

.uc-icon{

  width: 58px;

  height: 58px;

  border-radius: 20px;

  display:grid;

  place-items:center;

  font-size: 28px;

  background: rgba(243,111,33,.10);

  border: 1px solid rgba(243,111,33,.18);

  margin-bottom: 14px;

}

/* Demo */

.demo-grid{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}

.demo-label{ font-weight: 900; margin-bottom: 10px; }

textarea{

  width: 100%;

  min-height: 140px;

  padding: 12px 12px;

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(0,0,0,.18);

  color: rgba(234,240,255,.92);

  outline:none;

  resize: vertical;

}

textarea:focus{

  border-color: rgba(77,163,255,.35);

  box-shadow: 0 0 0 6px rgba(77,163,255,.10);

}

.demo-actions{ display:flex; gap: 10px; margin-top: 10px; flex-wrap:wrap; }

.response{

  min-height: 160px;

  padding: 12px 12px;

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(0,0,0,.18);

  white-space: pre-wrap;

}

.divider{

  height:1px;

  background: rgba(255,255,255,.10);

  margin: 14px 0;

}

.demo-suggestions{ display:flex; flex-wrap:wrap; gap: 10px; }

.hint{ margin-top: 10px; font-size: 12px; }

/* CTA */

.cta{

  padding: 18px;

  display:grid;

  grid-template-columns: 1.2fr .8fr;

  gap: 10px;

  align-items:center;

}

.cta h2{ margin: 0 0 8px; }

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

.cta-visual{ display:flex; justify-content:flex-end; }

.cta-mascot{ width: 170px; }

/* Footer */

.footer{

  padding: 0 0 0;

  border-top: 1px solid rgba(255,255,255,.06);

}

.footer-inner{

  padding: 28px 0 18px;

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  gap: 24px;

}

.footer-actions{ display:flex; gap:10px; margin-top: 12px; }

@media (max-width: 980px){

  .footer-inner{ flex-direction: column; align-items:flex-start; }

}

/* ✅ Bandana divider NUEVO: inspirado, suave, NO duele */

.bandana-divider{

  height: 42px;

  margin-top: 46px;

  position: relative;

  border-top: 1px solid rgba(255,255,255,.06);

  border-bottom: 1px solid rgba(0,0,0,.25);

  /* Base gradient, muy suave */

  background:

    linear-gradient(135deg, rgba(243,111,33,.20), rgba(77,163,255,.12));

  /* Textura SVG "rarámuri inspired" low contrast */
background-image:
   linear-gradient(135deg, rgba(243,111,33,.16), rgba(77,163,255,.11)),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='42' viewBox='0 0 240 42'%3E%3Crect width='240' height='42' fill='none'/%3E%3Cg opacity='0.24'%3E%3Cpath d='M22 16h6v-6h6v6h6v6h-6v6h-6v-6h-6z' fill='%23F36F21'/%3E%3Cpath d='M70 21l9-9 9 9-9 9z' fill='%234DA3FF'/%3E%3Cpath d='M118 16h6v-6h6v6h6v6h-6v6h-6v-6h-6z' fill='%23F36F21'/%3E%3Cpath d='M166 21l9-9 9 9-9 9z' fill='%234DA3FF'/%3E%3Cpath d='M214 16h6v-6h6v6h6v6h-6v6h-6v-6h-6z' fill='%23F36F21'/%3E%3C/g%3E%3Cg opacity='0.16'%3E%3Cpath d='M0 21H240' stroke='%23FFFFFF' stroke-width='2' stroke-opacity='.32'/%3E%3C/g%3E%3C/svg%3E");
 background-size: cover, 240px 42px;
 background-size: cover, 260px 42px;
  background-size: cover, 220px 42px;

  background-repeat: no-repeat, repeat;

  background-position: center, 0 0;

  /* “soften” */

  filter: saturate(.95);

  mask-image: radial-gradient(800px 60px at 50% 50%, black 55%, transparent 100%);

  opacity: .9;

}

.bandana-divider.flip{

  transform: scaleY(-1);

  margin-top: 0;

  margin-bottom: 46px;

}

/* Scroll reveal */

.reveal{

  opacity: 0;

  transform: translateY(14px);

  transition: opacity .5s ease, transform .5s ease;

}

.reveal.in{

  opacity: 1;

  transform: translateY(0);

}

/* Responsive */

@media (max-width: 980px){

  .hero-inner{ grid-template-columns: 1fr; }

  .cards.three{ grid-template-columns: 1fr; }

  .flow{ grid-template-columns: 1fr; }

  .demo-grid{ grid-template-columns: 1fr; }

  .cta{ grid-template-columns: 1fr; }

  .cta-visual{ justify-content:flex-start; }

  #usecases .cards-3{ grid-template-columns: 1fr; }

}

@media (max-width: 720px){

  .nav{ display:none; }

  .topbar-cta{ display:none; }

  .nav-toggle{ display:block; }

  .nav-mobile.show{ display:flex; }

  .hero{ padding-top: 56px; }

  .hero-metrics{ grid-template-columns: 1fr; }

  .hero-mascot{ height: 240px; }

  .mascot.big{ right: -12px; }

}
 /* Flow cards highlight (cuando el timeline avanza) */
.flow-step{
 transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.flow-step.is-active{
 transform: translateY(-4px);
 border-color: rgba(243,111,33,.28);
 box-shadow: 0 22px 55px rgba(0,0,0,.40), 0 0 0 6px rgba(243,111,33,.08);
 background: rgba(243,111,33,.06);
}
.flow-step.is-active h3{
 color: rgba(234,240,255,.98);
}
.footer-inner{
 position: relative;
}
.footer-mascot{
 margin-left: auto;
 display:flex;
 align-items:flex-end;
}
.footer-riwi{
 width: 92px;
 height: auto;
 opacity: .92;
 filter: drop-shadow(0 16px 30px rgba(0,0,0,.45));
}
@media (max-width: 980px){
 .footer-mascot{
   margin-left: 0;
   margin-top: 10px;
 }
}
/* HOW v2 */
.how-head{
  margin-bottom: 28px;
}

.how-visual-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.how-card{
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  gap: 16px;
  min-height: 100%;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.how-card:hover{
  transform: translateY(-6px);
  border-color: rgba(243,111,33,.26);
  box-shadow: 0 24px 56px rgba(0,0,0,.36);
}

.how-art{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 140px;
  padding: 8px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 20%, rgba(77,163,255,.10), transparent 52%),
    radial-gradient(circle at 50% 85%, rgba(243,111,33,.10), transparent 48%),
    rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}

.how-art img{
  width: min(100%, 96px);
  height: auto;
  display:block;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.22));
  transition: transform .28s ease, filter .28s ease, opacity .28s ease;
  opacity: .88;
}

.how-card:hover .how-art img{
  transform: translateY(-6px) scale(1.02);
}

.how-copy h3{
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -.2px;
}

.how-copy p{
  margin: 0;
  color: rgba(234,240,255,.78);
  line-height: 1.6;
}

.how-step{
  width:32px;
  height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;

  background:rgba(243,111,33,.15);
  border:1px solid rgba(243,111,33,.35);

  font-size:14px;
}

.how-summary{
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.how-summary p{
  margin: 0;
  line-height: 1.7;
  color: rgba(234,240,255,.82);
}

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

  .how-art{
    min-height: 120px;
  }
}
.how-card{
  position: relative;
  overflow: hidden;
}

.how-card.is-active{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(243,111,33,.35);
  box-shadow: 0 26px 56px rgba(0,0,0,.42);
  background: linear-gradient(
    180deg,
    rgba(243,111,33,.10),
    rgba(255,255,255,.04)
  );
}

.how-card.is-active .how-step{
  background: rgba(243,111,33,.22);
  border-color: rgba(243,111,33,.42);
  box-shadow: 0 0 0 6px rgba(243,111,33,.08);
}

.how-card.is-active .how-art img{
  transform: translateY(-4px) scale(1.04);
  opacity: 1;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.28));
}
.how-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}

.how-icon{
  width:48px;
  height:auto;
}

.how-header h3{
  margin:0;
  font-size:20px;
  font-weight:600;
  letter-spacing:-0.2px;
}

.how-desc{
  margin:0;
  color:rgba(234,240,255,.78);
  line-height:1.6;
}
.how-card.is-active .how-icon{
  transform:scale(1.08);
}