/* ================================================================
   ViaChat About Us — v3 (Purple + Yellow rebuild)
   Design: UA-26.04.02 viachat About Us (new mock, 2026-04-15)
   NOTE: Color hex values below are approximate from the design image
         and are flagged for user confirmation. Search "PLACEHOLDER"
         and "TODO-COLOR" to review.
   ================================================================ */

:root{
  /* Brand palette — confirmed 26-04-15
     main purple #8D00FF + CTA yellow #FFF951 per user.
     Deep / soft / card are HSL-derived variants of #8D00FF (hue 273°). */
  --bg-purple:       #8D00FF;
  --bg-purple-deep:  #6600BA;
  --bg-purple-soft:  #A325FF;
  --bg-purple-card:  #9D1FFF;
  --cta-yellow:      #FFF951;
  --cta-yellow-hover:#FFEC1F;
  --text-on-purple:  #FFFFFF;
  --text-muted:      rgba(255,255,255,.78);
  --text-dim:        rgba(255,255,255,.55);
  --text-on-light:   #1C1235;
  --text-body-light: #4A3A6B;
  --light-tint:      #F7F3FF;
  --light-border:    #E4D8FF;
  --radius:          20px;
  --radius-sm:       14px;
  --max-w:           1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;background:var(--bg-purple);overflow-x:hidden;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",sans-serif;
  color:var(--text-on-purple);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{overflow-wrap:break-word;word-wrap:break-word;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
button{border:0;background:transparent;cursor:pointer;font-family:inherit;}
ul{list-style:none;}

.in-mc{max-width:var(--max-w);margin:0 auto;padding:0 40px;position:relative;}

/* ---------- Placeholder blocks (for unsliced imagery) ---------- */
.ph{
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 12px,transparent 12px 24px);
  border:2px dashed rgba(255,255,255,.32);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.65);
  font-size:13px;
  font-weight:500;
  text-align:center;
  padding:16px;
  line-height:1.4;
}
.ph.light{
  background:
    linear-gradient(135deg,#F3ECFF,#E7D9FF),
    repeating-linear-gradient(45deg,rgba(107,77,209,.04) 0 12px,transparent 12px 24px);
  border:2px dashed #B8A1FF;
  color:#6B4DD1;
}

/* ================================================================
   HEADER
   ================================================================ */

.site-header{
  width:100%;
  max-width: var(--max-w);
  margin:0 auto 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:100px;
}
.site-header .btn-menu svg{
  display: none;
}
.site-header .logo h1{
  font-size: 0;
}
.site-header .logo  img{
  display: block;
  width:212px;
}
.site-header .nav {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-header .nav .onav{
  display: inline-block;
  padding: 2px;
  text-decoration: none;
  color:#fff;
  margin:0 15px;
}
.site-header .nav .onav.cur{
  font-weight:bold;
  font-size: 16px;
  position:relative;
}
.site-header .nav .onav.cur::after{
  content: '';
  position: absolute;
  left:0;
  right:0;
  bottom: 2px;
  height: 3px;
  background:#fff;
  filter: blur(3px);
}

.site-header .nav .btn-login{
  display: flex;
  align-items: center;
  justify-content: center;
  height:50px;
  padding:0 20px;
  background:#FFF951;
  color:#000;
  font-size:16px;
  font-weight: bold;
  min-width: 60px;
  border-radius: 25px;
  white-space: nowrap;
}



/* ================================================================
   SEC :: HERO
   ================================================================ */
.sec-hero{
  background:var(--bg-purple);
  min-height:720px;
  padding:00px 0 100px;
  position:relative;
  overflow:hidden;
}
.sec-hero::before{
  /* subtle decorative blob so the purple isn't flat */
  content:"";
  position:absolute;
  top:-160px;right:-160px;
  width:540px;height:540px;
  background:radial-gradient(circle,rgba(255,249,81,.18),transparent 65%);
  pointer-events:none;
}
.hero-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:80px;
  position:relative;
  z-index:1;
}
.hero-text{flex:1;max-width:560px;}
.hero-brand{
  font-size:96px;
  font-weight:900;
  letter-spacing:-3px;
  line-height:1;
  margin-bottom:28px;
}
.hero-tag{
  font-size:20px;
  font-weight:500;
  line-height:1.55;
  color:var(--text-muted);
  margin-bottom:44px;
  max-width:500px;
}
.hero-subtitle{display:none;}
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:30px 96px;
  background:var(--cta-yellow);
  border:0;
  border-radius:999px;
  color:#111;
  font-size:32px;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
  cursor:pointer;
  transition:all .2s ease;
}
.cta-btn:hover{
  background:var(--cta-yellow-hover);
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.hero-visual{flex:1;display:flex;justify-content:center;align-items:center;}
.hero-stack-img{
  width:100%;
  max-width:560px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.28));
}

/* ================================================================
   SEC :: ABOUT VIACHAT (white, holds the PDF H1)
   ================================================================ */
.sec-about{
  background:#fff;
  color:var(--text-on-light);
  padding:130px 0;
  text-align:center;
}
.sec-about .about-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
}
.sec-about .about-head,
.sec-about .about-foot{
  max-width:860px;
  width:100%;
}
.sec-about .about-visual{
  display:flex;
  align-items:center;
  justify-content:center;
}
.sec-about .split-img{
  width:100%;
  max-width:560px;
  height:auto;
  display:block;
}
.sec-about .hero-h1{
  font-size:48px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:-1px;
  color:var(--text-on-light);
  margin:0 auto 28px;
  max-width:820px;
  text-wrap:balance;
}
.sec-about .sec-body{
  font-size:17px;
  line-height:1.75;
  color:var(--text-body-light);
  margin:0 auto 16px;
  max-width:680px;
}
.sec-about .accent{
  display:inline-block;
  font-size:24px;
  font-weight:900;
  color:var(--bg-purple);
  margin-top:12px;
  letter-spacing:.2px;
}

/* ================================================================
   SEC :: WHY VIACHAT STANDS OUT (purple)
   ================================================================ */
.sec-why{
  background:var(--bg-purple);
  padding:130px 0;
  text-align:center;
}
.sec-why .wrap{max-width:960px;margin:0 auto;}
.sec-why h2{
  font-size:48px;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1.12;
  margin-bottom:20px;
}
.sec-why .lead{
  font-size:22px;
  font-weight:800;
  color:#fff;
  margin-bottom:20px;
  letter-spacing:.2px;
}
.sec-why .body{
  font-size:17px;
  line-height:1.75;
  color:#fff;
  max-width:740px;
  margin:0 auto 60px;
}
.sec-why .focus-lead{
  font-size:20px;
  font-weight:700;
  letter-spacing:0;
  line-height:44px;
  color:#fff;
  margin-bottom:36px;
}
.sec-why .focus-grid{
  display:flex;
  justify-content:center;
  gap:56px;
  flex-wrap:wrap;
  margin-bottom:64px;
}
.sec-why .focus-item{
  flex:1;
  max-width:240px;
  min-width:180px;
}
.sec-why .focus-icon-img{
  display:block;
  width:120px;
  height:120px;
  margin:0 auto 22px;
  object-fit:contain;
}
.sec-why .focus-item h4{
  font-size:18px;
  font-weight:800;
  margin-bottom:10px;
}
.sec-why .focus-item p{
  font-size:14px;
  color:#fff;
  line-height:1.6;
}
.sec-why .tagline{
  display:block;
  font-size:40px;
  font-weight:900;
  color:#fff;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:0;
  border:0;
  background:transparent;
  line-height:1.2;
}

/* ================================================================
   SEC :: SMARTER MATCHING, BETTER RESULTS (deep purple)
   ================================================================ */
.sec-smart{
  background:var(--bg-purple);
  padding:130px 0;
  text-align:center;
}
.sec-smart h2{
  font-size:48px;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1.12;
  margin-bottom:24px;
}
.sec-smart .body{
  font-size:17px;
  line-height:1.75;
  color:#fff;
  max-width:760px;
  margin:0 auto 30px;
}
.sec-smart .users-lead{
  font-size:20px;
  font-weight:700;
  letter-spacing:0;
  line-height:44px;
  color:#fff;
  margin-bottom:36px;
}
.sec-smart .users-row{
  display:flex;
  justify-content:center;
  gap:56px;
  flex-wrap:wrap;
  margin-bottom:64px;
}
.sec-smart .user-card{max-width:260px;}
.sec-smart .user-avatar-img{
  display:block;
  width:200px;
  height:200px;
  margin:0 auto 22px;
  object-fit:contain;
}
.sec-smart .user-card h4{
  font-size:18px;
  font-weight:800;
  margin-bottom:10px;
  color:#fff;
}
.sec-smart .user-card p{
  font-size:15px;
  color:#fff;
  line-height:1.6;
}
.sec-smart .stat-note{
  font-size:17px;
  line-height:1.75;
  color:#fff;
  max-width:820px;
  margin:0 auto 34px;
}
.sec-smart .tagline{
  display:block;
  font-size:40px;
  font-weight:900;
  color:#fff;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:0;
  border:0;
  background:transparent;
  line-height:1.2;
}

/* ================================================================
   SEC :: MORE EXPRESSIVE (white, 2-column)
   ================================================================ */
.sec-expressive{
  background:#fff;
  color:var(--text-on-light);
  padding:130px 0;
}
.sec-expressive h2{
  font-size:56px;
  font-weight:900;
  letter-spacing:-1.2px;
  line-height:1.15;
  text-align:center;
  color:var(--text-on-light);
  margin:0 auto 80px;
  max-width:none;
  white-space:nowrap;
}
.sec-expressive .cols{
  display:flex;
  gap:64px;
}
.sec-expressive .col{
  flex:1;
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.sec-expressive .col h3{
  font-size:34px;
  font-weight:900;
  margin-bottom:40px;
  color:var(--text-on-light);
  letter-spacing:-.4px;
}
.sec-expressive .col-icon-img{
  display:block;
  width:260px;
  height:260px;
  margin:0 auto 40px;
  object-fit:contain;
}
.sec-expressive .col p{
  font-size:17px;
  line-height:1.7;
  color:var(--text-body-light);
  max-width:520px;
  margin:0 auto 18px;
}
.sec-expressive .col p:last-child{margin-bottom:0;}

/* ================================================================
   SEC :: NUMBERED 4-BOX GRID (purple, 2x2)
   Hosts PDF H2s #5-#8
   ================================================================ */
.sec-num{
  background:var(--bg-purple);
  padding:130px 0;
}
.sec-num .num-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:80px;
  row-gap:96px;
}
.sec-num .num-box{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}
.sec-num .num-badge{
  display:block;
  width:104px;
  height:104px;
  margin-bottom:18px;
  object-fit:contain;
}
.sec-num .num-box h2{
  font-size:28px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.4px;
  margin-bottom:16px;
}
.sec-num .num-box .intro{
  font-size:15px;
  color:var(--text-muted);
  line-height:1.65;
  margin-bottom:22px;
}
.sec-num .num-box ul{padding:0;}
.sec-num .num-box li{
  font-size:15px;
  padding:10px 0 10px 30px;
  position:relative;
  line-height:1.55;
  color:var(--text-muted);
}
.sec-num .num-box li::before{
  content:"";
  position:absolute;
  left:0;top:16px;
  width:14px;height:14px;
  background:var(--cta-yellow);
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,249,81,.2);
}

/* ================================================================
   SEC :: START CONNECTING TODAY (white, merged with brand band)
   ================================================================ */
.sec-cta{
  background:#fff;
  color:var(--text-on-light);
  padding:60px 0 140px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.sec-cta .in-mc{position:relative;z-index:1;}
.sec-cta .brand-img{
  display:block;
  width:100%;
  max-width:760px;
  height:auto;
  margin:0 auto 60px;
}
.sec-cta h2{
  font-size:56px;
  font-weight:900;
  letter-spacing:-1.5px;
  line-height:1.1;
  color:var(--text-on-light);
  margin:0 auto 28px;
  max-width:820px;
  text-wrap:balance;
}
.sec-cta .body{
  font-size:18px;
  line-height:1.7;
  color:var(--text-body-light);
  max-width:720px;
  margin:0 auto 12px;
}
.sec-cta .body:last-of-type{margin-bottom:48px;}



.site-footer{
  background: #000;
  padding: 40px 0 0px;
}
.site-footer .dl-link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:100px;
}
.site-footer .dl-link img{
  display: block;
  height:86px;
}
.site-footer .ft-link{
  padding-top:50px;
  text-align: center;
}
.site-footer .ft-link a{
  text-decoration: none;
  color:#fff;
  font-size:16px;
  margin:0 20px;
}
.site-footer .copy-right{
  background:#000;
  color:#fff;
  text-align: center;
  font-size:12px;
  padding:30px 15px;
  line-height:1.5;
  margin-top: 30px;
}

/* ================================================================
   MOBILE DROP MENU
   ================================================================ */
.drop-menu{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(102,0,186,.97);
  backdrop-filter:blur(6px);
  z-index:1000;
  padding:80px 40px 40px;
}
.drop-menu.show{display:block;}
.drop-menu .inc a{
  display:block;
  padding:18px 0;
  color:#fff;
  font-size:22px;
  font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* ================================================================
   MOBILE (≤ 680px)  — rem basis = clientWidth / 10
   ================================================================ */
@media (max-width:680px){
  .in-mc{padding:0 .4rem;}

  .site-header{
    max-width: 100%;
    height:70px;
    box-sizing: border-box;
    padding: 0 .3rem;
  }
  .site-header .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
    }
  .site-header .btn-menu svg{
    display: block;
    width: .5rem;
    height:.5rem;
  }
  .site-header .logo  img{
    width:auto;
    height:30px;
  }
  .site-header .nav .onav{
    display: none
  }
  .site-header .nav .btn-login{
    height:38px;
    padding:0 20px;
    font-size:15px;
    min-width: 60px;
    border-radius: 10px;
  }

  .btn-menu{display: none}

  /* Hero — fills iPhone 12 Pro first screen (390x844) */
  .sec-hero{
    min-height:100vh;
    padding:0 0 .5rem;
    display:flex;
    flex-direction:column;
  }
  .sec-hero::before{display:none;}
  .hero-inner{
    flex:1;
    width:100%;
    max-width:100%;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:.5rem;
    padding:.1rem .4rem .6rem;
    text-align:center;
  }
  .site-header{width:100%;max-width:100%;margin:0;}
  .hero-visual{order:1;width:100%;flex:0 0 auto;}
  .hero-stack-img{max-width:8.6rem;margin:0 auto;}
  .hero-text{
    order:2;
    width:100%;max-width:none;margin:0;
    display:flex;flex-direction:column;align-items:center;
    flex:0 0 auto;
  }
  .hero-brand{
    font-size:1.8rem;
    letter-spacing:-.06rem;
    line-height:1;
    margin-bottom:.16rem;
    color:#fff;
  }
  .hero-tag{display:none;}
  .hero-subtitle{
    display:block;
    font-size:.72rem;
    font-weight:900;
    color:#fff;
    line-height:1.1;
    margin:0 0 .44rem;
    letter-spacing:-.02rem;
  }
  .cta-btn{padding:.42rem 1.1rem;font-size:.44rem;border-radius:999px;}
  .cta-btn .arrow{width:.36rem;height:.36rem;font-size:.22rem;}

  /* About */
  .sec-about{padding:1rem 0 1.1rem;}
  .sec-about .about-stack{gap:.5rem;}
  .sec-about .about-visual{width:100%;}
  .sec-about .split-img{max-width:7.6rem;}
  .sec-about .hero-h1{font-size:.6rem;max-width:100%;margin-bottom:.36rem;letter-spacing:0;line-height:1.22;text-wrap:initial;}
  .sec-about .sec-body{font-size:.3rem;max-width:100%;margin-bottom:.22rem;line-height:1.65;}
  .sec-about .accent{font-size:.42rem;margin-top:.16rem;}

  /* Why */
  .sec-why{padding:1.1rem 0;}
  .sec-why h2{font-size:.6rem;letter-spacing:-.01rem;margin-bottom:.24rem;line-height:1.2;}
  .sec-why .lead{font-size:.34rem;margin-bottom:.24rem;}
  .sec-why .body{font-size:.28rem;margin-bottom:.8rem;line-height:1.65;}
  .sec-why .focus-lead{font-size:.38rem;letter-spacing:0;line-height:2;margin-bottom:.56rem;}
  .sec-why .focus-grid{flex-direction:column;gap:.9rem;margin-bottom:.9rem;}
  .sec-why .focus-item{max-width:none;min-width:0;}
  .sec-why .focus-icon-img{width:2.6rem;height:2.6rem;margin-bottom:.36rem;}
  .sec-why .focus-item h4{font-size:.42rem;margin-bottom:.24rem;}
  .sec-why .focus-item p{font-size:.3rem;line-height:1.55;max-width:8rem;margin:0 auto;}
  .sec-why .tagline{font-size:.56rem;padding:0;border:0;letter-spacing:.01rem;line-height:1.22;}

  /* Smart */
  .sec-smart{padding:1.1rem 0;}
  .sec-smart h2{font-size:.6rem;letter-spacing:-.01rem;margin-bottom:.24rem;line-height:1.2;}
  .sec-smart .body{font-size:.28rem;margin-bottom:.48rem;line-height:1.65;}
  .sec-smart .users-lead{font-size:.38rem;letter-spacing:0;line-height:2;margin-bottom:.56rem;}
  .sec-smart .users-row{flex-direction:column;gap:.9rem;margin-bottom:.8rem;}
  .sec-smart .user-card{max-width:none;}
  .sec-smart .user-avatar-img{width:4.4rem;height:4.4rem;margin-bottom:.32rem;}
  .sec-smart .user-card h4{font-size:.42rem;margin-bottom:.2rem;}
  .sec-smart .user-card p{font-size:.3rem;line-height:1.55;max-width:8.2rem;margin:0 auto;}
  .sec-smart .stat-note{font-size:.28rem;max-width:100%;margin-bottom:.56rem;line-height:1.65;}
  .sec-smart .tagline{font-size:.48rem;padding:0;border:0;letter-spacing:.01rem;line-height:1.22;}

  /* Expressive */
  .sec-expressive{padding:1.1rem 0;}
  .sec-expressive h2{font-size:.56rem;margin-bottom:.8rem;letter-spacing:-.01rem;max-width:100%;line-height:1.22;white-space:normal;}
  .sec-expressive .cols{flex-direction:column;gap:1.1rem;}
  .sec-expressive .col{padding:0;}
  .sec-expressive .col h3{font-size:.52rem;margin-bottom:.4rem;}
  .sec-expressive .col-icon-img{width:4.6rem;height:4.6rem;margin:0 auto .4rem;}
  .sec-expressive .col p{font-size:.3rem;line-height:1.6;max-width:8.4rem;margin:0 auto .26rem;}

  /* Num grid */
  .sec-num{padding:1.1rem 0;}
  .sec-num .num-grid{grid-template-columns:1fr;gap:.96rem;}
  .sec-num .num-box{padding:0;border-radius:0;text-align:center;display:flex;flex-direction:column;align-items:center;}
  .sec-num .num-badge{width:3.2rem;height:3.2rem;margin-bottom:.44rem;font-size:.96rem;border-radius:.6rem;}
  .sec-num .num-box h2{font-size:.5rem;margin-bottom:.28rem;line-height:1.22;letter-spacing:-.01rem;text-align:center;}
  .sec-num .num-box .intro{font-size:.3rem;margin-bottom:.32rem;line-height:1.6;text-align:center;}
  .sec-num .num-box ul{padding:0;display:inline-block;text-align:left;}
  .sec-num .num-box li{font-size:.3rem;padding:.14rem 0 .14rem .6rem;line-height:1.55;}
  .sec-num .num-box li::before{width:.24rem;height:.24rem;top:.28rem;box-shadow:0 0 0 .06rem rgba(255,249,81,.2);}

  /* CTA (merged with brand band) */
  .sec-cta{padding:.6rem 0 1.2rem;}
  .sec-cta .brand-img{max-width:100%;margin:0 auto .56rem;}
  .sec-cta h2{font-size:.72rem;letter-spacing:-.02rem;margin-bottom:.32rem;max-width:100%;line-height:1.15;text-wrap:initial;}
  .sec-cta .body{font-size:.3rem;margin:0 auto .2rem;max-width:100%;}
  .sec-cta .body:last-of-type{margin-bottom:.56rem;}

  .site-footer .dl-link{
    flex-direction: column;
    gap:30px;
  }
  .site-footer .dl-link img{
    height:56px;
  }
  .site-footer .ft-link{
    padding-top:10px;
  }
  .site-footer .ft-link a{

    margin:20px 0px;
    display: block;
  }

  .site-footer .copy-right{
    font-size:10px;
  }
  /* Hero CTA: fixed bottom after scrolling past hero */
  .hero-text .cta-btn.is-fixed{
    position:fixed;
    bottom:.5rem;
    bottom:calc(.5rem + env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    z-index:100;
    white-space:nowrap;
    width:auto;
    box-shadow:0 8px 28px rgba(0,0,0,.3);
  }
}