/* ========================================
   HERO SPLIT REDESIGN
   ======================================== */

.hero{
  margin-top: 54px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 12px 0 0;
  min-height: auto;
  position: relative;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(248,251,255,0.96) 0%, rgba(242,247,255,0.9) 48%, rgba(246,247,249,0.72) 100%);
  border: 0;
  box-shadow: none;
}

.hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 42%, rgba(101, 154, 255, 0.08), transparent 26%),
    radial-gradient(circle at 84% 46%, rgba(101, 154, 255, 0.09), transparent 30%);
  pointer-events: none;
}

.hero .container{
  max-width: 1720px;
  width: 100%;
  padding: 0 12px;
}

.hero-content-centered{
  position: relative;
  max-width: 1660px;
  margin: 0 auto;
  z-index: 1;
}

.hero-shell{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(560px, 1.04fr);
  align-items: center;
  gap: 18px;
  padding: 18px 10px 34px 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.38) 46%, rgba(255,255,255,0.14) 100%);
  border: 1px solid rgba(126, 163, 230, 0.14);
  border-radius: 38px;
  box-shadow: 0 18px 46px rgba(20, 38, 72, 0.05);
  overflow: visible;
}

.hero-visual-panel{
  position: relative;
  background: #eef5ff;
}

.hero-visual-panel--unified{
  min-height: 530px;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(15,26,43,0.08);
}

.hero-visual-panel--unified::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.006) 56%, rgba(255,255,255,0.03) 72%, rgba(255,255,255,0.08) 84%, rgba(255,255,255,0.15) 93%, rgba(255,255,255,0.22) 100%);
  pointer-events: none;
}

.hero-visual-image{
  width: 100%;
  height: 100%;
  min-height: 530px;
  object-fit: cover;
  object-position: 53% center;
  display: block;
}

.hero-monitor-overlay{
  position: absolute;
  top: 19.1%;
  left: 52.1%;
  width: 26.9%;
  height: 43.8%;
  z-index: 1;
  padding: 10px 9px 9px;
  border-radius: 11px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: perspective(900px) rotateZ(-1.9deg) skewX(-6.8deg) skewY(1deg);
  transform-origin: center center;
}

.hero-monitor-overlay__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #22334d;
}

.hero-monitor-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-monitor-badge__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #31c16e;
  box-shadow: 0 0 0 4px rgba(49,193,110,0.14);
  animation: heroPulse 1.8s ease-in-out infinite;
}

.hero-monitor-time{
  color: rgba(34,51,77,0.68);
}

.hero-monitor-overlay__body{
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 8px;
  height: calc(100% - 20px);
}

.hero-monitor-card{
  border-radius: 12px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(185,205,239,0.72);
  box-shadow: 0 8px 20px rgba(97,132,189,0.08);
}

.hero-monitor-card--call{
  padding: 10px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: start;
}

.hero-monitor-card__avatar{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4b8eff 0%, #357ae8 100%);
  color: #fff;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.hero-monitor-card__details{
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.46rem;
  line-height: 1.2;
  color: rgba(34,51,77,0.78);
}

.hero-monitor-card__details strong{
  color: #0f1a2b;
  font-size: 0.54rem;
}

.hero-monitor-card--transcript{
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-monitor-line{
  opacity: 0;
  transform: translateY(6px);
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.47rem;
  line-height: 1.28;
  color: #203048;
  animation: heroLineReveal 9s ease-in-out infinite;
}

.hero-monitor-line--ai{
  background: rgba(75,142,255,0.14);
}

.hero-monitor-line--caller{
  background: rgba(64,197,117,0.14);
}

.hero-monitor-line:nth-child(1){ animation-delay: 0.3s; }
.hero-monitor-line:nth-child(2){ animation-delay: 1.2s; }
.hero-monitor-line:nth-child(3){ animation-delay: 2.1s; }
.hero-monitor-line:nth-child(4){ animation-delay: 3s; }
.hero-monitor-line:nth-child(5){ animation-delay: 3.9s; }

.hero-monitor-typing{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  width: fit-content;
  background: rgba(75,142,255,0.12);
}

.hero-monitor-typing span{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4b8eff;
  animation: heroTyping 1.1s ease-in-out infinite;
}

.hero-monitor-typing span:nth-child(2){ animation-delay: 0.18s; }
.hero-monitor-typing span:nth-child(3){ animation-delay: 0.36s; }

.hero-copy-panel{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 530px;
  padding: 4px 20px 30px 18px;
}

.hero-copy-panel--unified{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.04)),
    radial-gradient(circle at 68% 18%, rgba(91, 145, 255, 0.12), transparent 36%),
    radial-gradient(circle at 85% 74%, rgba(91, 145, 255, 0.06), transparent 28%);
}

.hero-copy-panel--unified::before{
  display: none;
}

.hero-main-content{
  max-width: 700px;
  width: 100%;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.hero-main-content--split{
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-pill-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 800px;
  margin: 22px auto 0;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(238,241,245,0.98), rgba(226,231,237,0.96));
  border: 1px solid rgba(196, 204, 214, 0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 4px 12px rgba(34,64,111,0.04);
  overflow: hidden;
}

.hero-info-pill{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 25%;
  min-height: 46px;
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid rgba(184, 193, 204, 0.95);
  background: transparent;
  color: #313c4e;
  font-size: var(--type-micro-size);
  font-weight: 600;
  line-height: 1.25;
  box-shadow: none;
  white-space: normal;
  transition: background 0.2s ease, color 0.2s ease;
}

.hero-info-pill:last-child{
  border-right: 0;
}

.hero-info-pill::before{
  content: '\f058';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.72rem;
  margin-right: 8px;
  color: #2f7fe8;
  flex: 0 0 auto;
}

.hero-info-pill:hover{
  background: rgba(255,255,255,0.22);
}

.hero-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 5px 12px;
  margin-bottom: 14px;
  border: 1px solid rgba(76, 132, 255, 0.42);
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #4a84ff;
  font-size: var(--type-micro-size);
  font-weight: var(--type-micro-weight);
  letter-spacing: var(--type-micro-track);
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(74,132,255,0.08);
}

.hero-kicker::before{
  content: '✦';
  margin-right: 6px;
  font-size: 0.72rem;
}

.hero-main-title{
  margin: 0;
  width: 100%;
  max-width: 700px;
  font-size: clamp(2.75rem, 4vw, 4.2rem) !important;
  font-weight: 900;
  line-height: 0.92 !important;
  letter-spacing: -0.055em;
  color: #0f1a2b;
  text-wrap: initial;
}

.hero-main-title__line{
  display: block;
  white-space: nowrap;
}

.hero-main-title__line + .hero-main-title__line{
  margin-top: 14px;
}

.hero-main-title .hero-main-title__accent{
  color: #4b8eff;
}

.hero-main-title__accent--inline{
  display: inline;
}

.hero-copy-divider{
  width: 56px;
  height: 2px;
  margin: 16px 0 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(15,26,43,0.65), rgba(15,26,43,0.12));
}

.hero-main-subtitle{
  margin: 0;
  width: 100%;
  max-width: 42ch;
  font-size: clamp(var(--type-section-subtitle-size), 1.2vw, 1.22rem);
  line-height: var(--type-body-line);
  color: rgba(15,26,43,0.88);
  font-weight: var(--type-section-subtitle-weight);
}

.hero-cta-group{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.hero-cta-group--left{
  margin-top: 38px;
}

.btn-hero-white{
  min-width: 336px;
  padding: 18px 24px;
  border-radius: 18px;
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  line-height: var(--type-button-line);
  text-align: center;
  justify-content: center;
  background: linear-gradient(135deg, #4b8eff 0%, #357ae8 100%);
  box-shadow: 0 16px 32px rgba(47,118,222,0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-hero-white--pill{
  border-radius: 999px;
  min-width: 336px;
}

.btn-hero-white:hover{
  background: linear-gradient(135deg, #3f86fb 0%, #2e6dd4 100%);
  transform: translateY(-1px);
  box-shadow: 0 20px 36px rgba(47,118,222,0.28);
}

.btn-hero-white .cta-stack{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 5px;
}

.btn-hero-white .cta-stack__top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-button-size);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  white-space: nowrap;
}

.btn-hero-white .cta-stack__label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-hero-white .cta-stack__bottom{
  display: block;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1;
  font-weight: var(--type-button-weight);
  color: #ffffff;
  letter-spacing: 0.005em;
}

.hero-cta-subtext{
  margin: 0 auto;
  color: rgba(15,26,43,0.8);
  font-size: var(--type-helper-size);
  line-height: var(--type-helper-line);
  font-weight: var(--type-helper-weight);
  max-width: 32ch;
  text-align: center;
}

@keyframes heroPulse{
  0%, 100%{ transform: scale(1); opacity: 0.95; }
  50%{ transform: scale(1.12); opacity: 1; }
}

@keyframes heroLineReveal{
  0%, 8%{ opacity: 0; transform: translateY(6px); }
  12%, 82%{ opacity: 1; transform: translateY(0); }
  100%{ opacity: 0; transform: translateY(4px); }
}

@keyframes heroTyping{
  0%, 80%, 100%{ opacity: 0.35; transform: translateY(0); }
  40%{ opacity: 1; transform: translateY(-2px); }
}

@media (max-width: 1180px){
  .hero-shell{
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.9fr);
    gap: 26px;
    padding: 16px 10px 16px 8px;
    border-radius: 32px;
  }

  .hero-visual-panel--unified,
  .hero-visual-image,
  .hero-copy-panel{
    min-height: 490px;
  }

  .hero-copy-panel{
    padding: 24px 0 24px 0;
  }

  .hero-main-content{
    max-width: 460px;
  }

  .hero-main-title{
    font-size: clamp(2.45rem, 4.5vw, 3.9rem);
  }

  .hero-main-subtitle{
    max-width: 27ch;
  }
}

@media (max-width: 980px){
  .hero{
    margin-top: 30px;
    margin-bottom: 48px;
    padding: 10px 0 14px;
  }

  .hero .container{
    padding: 0 10px;
  }

  .hero-shell{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 14px;
    border-radius: 30px;
  }

  .hero-visual-panel--unified,
  .hero-visual-image{
    min-height: 420px;
  }

  .hero-monitor-overlay{
    top: 19.4%;
    left: 47.9%;
    width: 30.6%;
    height: 44.8%;
    padding: 8px 7px 7px;
    border-radius: 9px;
    transform: perspective(900px) rotateZ(-1.6deg) skewX(-5deg) skewY(1deg);
  }

  .hero-copy-panel{
    min-height: auto;
    padding: 6px 0 0;
    justify-content: center;
  }

  .hero-main-content{
    max-width: 620px;
    text-align: center;
    align-items: center;
    margin: 0 auto;
  }

  .hero-pill-row{
    justify-content: center;
    max-width: 800px;
  }

  .hero-info-pill{
    flex: 1 1 50%;
    min-height: 46px;
    padding: 10px 12px;
    font-size: 0.74rem;
    line-height: 1.18;
  }

  .hero-main-subtitle{
    max-width: 34ch;
  }

  .hero-kicker,
  .hero-cta-group,
  .hero-cta-group--left{
    align-items: center;
  }

  .hero-cta-subtext{
    margin-left: 0;
  }
}

@media (max-width: 640px){
  .hero{
    margin-top: 26px;
    margin-bottom: 38px;
    padding: 8px 0 12px;
  }

  .hero .container{
    padding: 0 8px;
  }

  .hero-shell{
    gap: 18px;
    padding: 10px;
    border-radius: 24px;
  }

  .hero-visual-panel--unified{
    border-radius: 24px;
  }

  .hero-visual-panel--unified,
  .hero-visual-image{
    min-height: 320px;
  }

  .hero-monitor-overlay{
    top: 18.6%;
    left: 47.2%;
    width: 31.6%;
    height: 45.8%;
    padding: 6px 5px 5px;
    border-radius: 8px;
    transform: perspective(900px) rotateZ(-1.4deg) skewX(-4.5deg) skewY(0.8deg);
  }

  .hero-monitor-overlay__header,
  .hero-monitor-card__details,
  .hero-monitor-line{
    font-size: 0.38rem;
  }

  .hero-monitor-card__details strong{
    font-size: 0.44rem;
  }

  .hero-monitor-card--call{
    gap: 6px;
    padding: 7px 6px;
  }

  .hero-monitor-card__avatar{
    width: 22px;
    height: 22px;
    font-size: 0.56rem;
  }

  .hero-copy-panel{
    padding: 0;
  }

  .hero-kicker{
    margin-bottom: 14px;
    font-size: 0.7rem;
  }

  .hero-pill-row{
    gap: 0;
    margin-top: 18px;
    max-width: 100%;
  }

  .hero-info-pill{
    flex: 1 1 100%;
    min-height: 38px;
    max-width: 100%;
    padding: 8px 10px;
    font-size: 0.71rem;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid rgba(184, 193, 204, 0.95);
  }

  .hero-info-pill:last-child{
    border-bottom: 0;
  }

  .hero-main-title{
    font-size: clamp(2.12rem, 10vw, 3rem);
    line-height: 0.96;
  }

  .hero-copy-divider{
    margin: 16px 0 14px;
  }

  .hero-main-subtitle{
    font-size: 1rem;
    max-width: 26ch;
  }

  .hero-cta-group--left{
    margin-top: 22px;
  }

  .btn-hero-white,
  .btn-hero-white--pill{
    min-width: min(100%, 272px);
    width: min(100%, 272px);
    padding: 16px 18px;
  }

  .btn-hero-white .cta-stack__top{
    font-size: 0.92rem;
    gap: 10px;
  }

  .hero-cta-subtext{
    font-size: 0.78rem;
  }
}