﻿
.hs-slide1 *, .hs-slide1 *::before, .hs-slide1 *::after { box-sizing: border-box; }
.hs-slide1 { width:100%; position:relative; overflow:hidden; line-height:normal; }
.hs-slide1 .tsb-banner {
  width:1900px; height:700px; position:relative; overflow:hidden;
  transform-origin:top left;
  isolation:isolate;
  font-family:system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  background:linear-gradient(108deg,#a5bdcb 0%,#f3f3f3 55%,#ececec 100%);
}
.hs-slide1 .tsb-desktop-layout { position:relative; width:100%; }
.hs-slide1 .tsb-bgdeco,
.hs-slide1 .tsb-lines {
  display:block;
  max-width:none !important;
}
/* â”€â”€ Keyframes â”€â”€ */
@keyframes tsb-heroIn   { 0%{opacity:0;transform:translateX(-70px) scale(.88)} 70%{opacity:1;transform:translateX(4px) scale(1.02)} 100%{opacity:1;transform:translateX(0) scale(1)} }
@keyframes tsb-slideIn  { from{opacity:0;transform:translateX(-50px)} to{opacity:1;transform:translateX(0)} }
@keyframes tsb-badgeIn  { from{opacity:0;transform:translateX(-28px)} 85%{transform:translateX(3px)} to{opacity:1;transform:translateX(0)} }
@keyframes tsb-btnIn    { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes tsb-phoneIn  { 0%{opacity:0;transform:scale(0) rotate(-8deg)} 65%{opacity:1;transform:scale(1.06) rotate(-8deg)} 82%{transform:scale(.97) rotate(-8deg)} 100%{opacity:1;transform:scale(1) rotate(-8deg)} }
@keyframes tsb-cardTL   { from{opacity:0;transform:translate(-400px,-300px)} 70%{opacity:1;transform:translate(6px,5px)} to{opacity:1;transform:translate(0,0)} }
@keyframes tsb-cardTR   { from{opacity:0;transform:translate( 400px,-300px)} 70%{opacity:1;transform:translate(-6px,5px)} to{opacity:1;transform:translate(0,0)} }
@keyframes tsb-cardBL   { from{opacity:0;transform:translate(-400px, 300px)} 70%{opacity:1;transform:translate(6px,-5px)} to{opacity:1;transform:translate(0,0)} }
@keyframes tsb-cardBR   { from{opacity:0;transform:translate( 400px, 300px)} 70%{opacity:1;transform:translate(-6px,-5px)} to{opacity:1;transform:translate(0,0)} }
@keyframes tsb-phoneFloat{ 0%,100%{opacity:1;transform:translateY(0)} 50%{opacity:1;transform:translateY(-5px)} }
@keyframes tsb-cardFloat { 0%,100%{opacity:1;transform:translateY(0)} 50%{opacity:1;transform:translateY(-4.5px)} }
@keyframes tsb-drawLine  { to{stroke-dashoffset:0} }
@keyframes tsb-verified  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes tsb-checkIn   { from{transform:scale(0)} to{transform:scale(1)} }
@keyframes tsb-taglineIn { from{opacity:0} to{opacity:1} }
@keyframes tsb-mphoneFloat { 0%,100%{transform:scale(1) rotate(-8deg) translateY(0)} 50%{transform:scale(1) rotate(-8deg) translateY(-5px)} }

/* â”€â”€ Left panel â”€â”€ */
.hs-slide1 .tsb-left {
  position:absolute; left:0; top:0; width:855px; height:700px;
  display:flex; flex-direction:column; justify-content:center;
  padding:40px 38px 0 190px; overflow:visible;
  transform:scale(1.08); transform-origin:left center;
  z-index:5;
}
.hs-slide1 .tsb-hero {
  opacity:0; transform:translateX(-70px) scale(.88); transform-origin:left center;
  display:flex; flex-direction:column; align-items:flex-start;
}
.hs-slide1 .tsb-pill {
  display:inline-flex; border:1.5px solid #5e6c7b; border-radius:20px;
  padding:4px 16px; margin-bottom:11px; background:white; color:#5e6c7b;
  font-size:12.5px; font-weight:700; letter-spacing:2.5px;
}
.hs-slide1 .tsb-titlegroup {
  display:flex; flex-direction:column; align-items:flex-start;
}
.hs-slide1 .tsb-h1 { font-size:44.5px; font-weight:800; color:#1a2332; line-height:1.14; }
.hs-slide1 .tsb-titleunderline {
  width:72px; height:4px; margin-top:8px; border-radius:2px;
  background:linear-gradient(to right, #6366f1, #8b5cf6, #06b6d4);
  flex:0 0 auto;
}
.hs-slide1 .tsb-body {
  opacity:0; transform:translateX(-50px); margin-top:16px;
}
.hs-slide1 .tsb-h2 { font-size:20.5px; font-weight:700; color:#1a2332; margin-bottom:4px; }
.hs-slide1 .tsb-sub { font-size:15.5px; font-weight:500; color:#4d6070; margin-bottom:7px; }
.hs-slide1 .tsb-p  { font-size:15px; font-weight:400; color:#536070; line-height:1.65; margin-bottom:14px; }
.hs-slide1 .tsb-badges { display:flex; flex-direction:column; gap:7px; }
.hs-slide1 .tsb-badge {
  background:white; border-radius:8px; padding:7px 13px 7px 12px;
  font-size:14.5px; font-weight:600; color:#1a2332;
  box-shadow:0 2px 10px rgba(0,0,0,.09); border-left:3.5px solid #1d6fa4;
  align-self:flex-start; opacity:0; transform:translateX(-28px);
}
.hs-slide1 .tsb-learnbtn {
  display:inline-block; margin-top:18px; padding:11px 32px; border-radius:10px;
  background:#1a2e42; color:#fff; font-size:15.5px; font-weight:700;
  letter-spacing:.4px; text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 4px 18px rgba(26,46,66,.28);
  transition:background .25s,color .25s,box-shadow .25s;
  opacity:0; transform:translateY(16px); font-family:inherit;
}
.hs-slide1 .tsb-learnbtn:hover {
  background:rgba(200,210,220,.7); color:#1a2e42;
  box-shadow:0 4px 22px rgba(100,140,180,.18);
}

/* â”€â”€ Right green glow â”€â”€ */
.hs-slide1 .tsb-rglow {
  position:absolute; left:855px; top:0; width:1045px; height:700px;
  background:radial-gradient(ellipse 75% 80% at 48% 50%,#c8f0d0 0%,#e8f5e9 55%,transparent 100%);
  opacity:0; pointer-events:none; transition:opacity .6s ease;
  z-index:1;
}

/* â”€â”€ BG green overlay â”€â”€ */
.hs-slide1 .tsb-bgoverlay {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(108deg, rgba(200,240,208,.6) 0%, transparent 55%);
  opacity:0; transition:opacity .6s ease;
}

/* â”€â”€ Lines SVG â”€â”€ */
.hs-slide1 .tsb-lines {
  position:absolute; left:0; top:0; width:1900px; height:700px;
  pointer-events:none; overflow:visible;
  z-index:2;
}

/* â”€â”€ Phone â”€â”€ */
.hs-slide1 .tsb-phone-wrap {
  position:absolute; left:1275px; top:221px; /* center - PW/2, center - PH/2 */
  z-index:3;
}
.hs-slide1 .tsb-phone {
  position:relative; width:142px; height:258px;
  opacity:0; transform:scale(0) rotate(-8deg); transform-origin:center center;
  will-change:transform,opacity;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}
.hs-slide1 .tsb-phone.tsb-entering {
  animation:tsb-phoneIn 1s cubic-bezier(.175,.885,.32,1) forwards !important;
}
.hs-slide1 .tsb-pglow {
  position:absolute; inset:-35px;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(30,136,229,.32) 0%,transparent 65%);
  filter:blur(20px); pointer-events:none; transition:background .8s;
}
.hs-slide1 .tsb-pshell {
  position:relative; width:142px; height:258px; border-radius:30px;
  background:linear-gradient(170deg,#2d3e52 0%,#1c2b3a 45%,#0f1c28 100%);
  box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 0 1.5px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.35);
  overflow:hidden;
  isolation:isolate;
  contain:layout paint;
}
.hs-slide1 .tsb-island { position:absolute; top:12px; left:50%; transform:translateX(-50%); width:42px; height:10px; border-radius:7px; background:#000; }
.hs-slide1 .tsb-sb1 { position:absolute; left:-2px; top:54px; width:2px; height:22px; background:#0c1520; border-radius:2px 0 0 2px; }
.hs-slide1 .tsb-sb2 { position:absolute; left:-2px; top:82px; width:2px; height:22px; background:#0c1520; border-radius:2px 0 0 2px; }
.hs-slide1 .tsb-sb3 { position:absolute; right:-2px; top:62px; width:2px; height:32px; background:#0c1520; border-radius:0 2px 2px 0; }
.hs-slide1 .tsb-home { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:44px; height:4px; border-radius:2px; background:rgba(255,255,255,.22); }
.hs-slide1 .tsb-screen {
  position:absolute; left:9px; top:30px; width:124px; height:210px;
  border-radius:7px; overflow:hidden; background:white;
  isolation:isolate;
  contain:layout paint;
  clip-path:inset(0 round 7px); -webkit-clip-path:inset(0 round 7px);
}
.hs-slide1 .tsb-qrphase {
  position:relative; width:100%; height:100%; background:#f8f8f8;
  display:flex; align-items:center; justify-content:center;
}
.hs-slide1 .tsb-corner { position:absolute; width:16px; height:16px; opacity:0; transition:opacity .2s; }
.hs-slide1 .tsb-corner.vis { opacity:1; }
.hs-slide1 .tsb-ctlc { top:8px; left:8px; border-top:2.5px solid #00c853; border-left:2.5px solid #00c853; }
.hs-slide1 .tsb-ctrc { top:8px; right:8px; border-top:2.5px solid #00c853; border-right:2.5px solid #00c853; }
.hs-slide1 .tsb-cblc { bottom:8px; left:8px; border-bottom:2.5px solid #00c853; border-left:2.5px solid #00c853; }
.hs-slide1 .tsb-cbrc { bottom:8px; right:8px; border-bottom:2.5px solid #00c853; border-right:2.5px solid #00c853; }
.hs-slide1 .tsb-scanline {
  position:absolute; left:0; top:-3px; width:100%; height:2.5px; display:none;
  background:linear-gradient(90deg,transparent 0%,#00c853 15%,#69f0ae 50%,#00c853 85%,transparent 100%);
  box-shadow:0 0 14px #00c853,0 0 5px #69f0ae;
}
.hs-slide1 .tsb-personinfo {
  width:100%; height:100%; display:flex; flex-direction:column;
  background:linear-gradient(160deg,#f0faf4 0%,#e6f4ea 100%);
  opacity:0; position:absolute; top:0; left:0;
}
.hs-slide1 .tsb-personinfo.tsb-show { animation:tsb-verified .5s ease-out forwards; }
.hs-slide1 .tsb-pheader { background:linear-gradient(90deg,#1557a0,#1d6fa4); padding:6px 9px; display:flex; align-items:center; gap:5px; flex-shrink:0; }
.hs-slide1 .tsb-pheader .lbl { color:white; font-size:8.5px; font-weight:800; letter-spacing:1px; }
.hs-slide1 .tsb-pheader .std { margin-left:auto; font-size:7px; color:rgba(255,255,255,.75); }
.hs-slide1 .tsb-pavatar { display:flex; justify-content:center; padding:9px 0 5px; }
.hs-slide1 .tsb-avcircle { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#90a4ae,#546e7a); display:flex; align-items:center; justify-content:center; border:2px solid white; box-shadow:0 3px 8px rgba(0,0,0,.2); flex-shrink:0; }
.hs-slide1 .tsb-pfields { padding:2px 10px; flex:1; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.hs-slide1 .tsb-flabel { font-size:5.5px; color:#607d8b; font-weight:700; letter-spacing:.6px; display:block; }
.hs-slide1 .tsb-fbar { height:7px; border-radius:2.5px; background:#b0bec5; }
.hs-slide1 .tsb-vfooter { margin:4px 9px 9px; background:#2d8a4e; border-radius:5px; padding:5px 0; display:flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; }
.hs-slide1 .tsb-vfooter span { font-size:9px; font-weight:800; color:white; letter-spacing:1px; }

/* â”€â”€ Cards â”€â”€ */
.hs-slide1 .tsb-card {
  position:absolute; width:200px; height:116px;
  border-radius:14px; background:white;
  box-shadow:0 8px 30px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);
  overflow:hidden; opacity:0;
  z-index:4;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.hs-slide1 .tsb-cheader { width:100%; height:44px; display:flex; align-items:center; padding:0 11px 0 13px; justify-content:space-between; }
.hs-slide1 .tsb-ctitle { color:white; font-weight:800; font-size:14.5px; letter-spacing:.2px; }
.hs-slide1 .tsb-ccheck { width:22px; height:22px; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,.2); transform:scale(0); opacity:0; }
.hs-slide1 .tsb-ccheck.tsb-show { animation:tsb-checkIn .5s cubic-bezier(.175,.885,.32,1.275) forwards; opacity:1; }
.hs-slide1 .tsb-cbody { height:72px; display:flex; align-items:center; justify-content:center; }
.hs-slide1 .tsb-cstatus { border-radius:6px; padding:4px 14px; font-weight:700; font-size:13px; background:#f1f4f6; color:#90a4ae; transition:background .3s,color .3s; }
.hs-slide1 .tsb-cstatus.tsb-show { background:#e8f5e9; color:#2d8a4e; }

/* â”€â”€ Tagline â”€â”€ */
.hs-slide1 .tsb-tagline {
  position:absolute; left:855px; top:621px; width:1045px;
  text-align:center; font-size:15px; font-weight:700; color:#46586e;
  letter-spacing:.25px; opacity:0; z-index:6;
  text-shadow:0 1px 0 rgba(255,255,255,.18);
}

/* â”€â”€ SVG bg deco â”€â”€ */
.hs-slide1 .tsb-bgdeco { position:absolute; inset:0; width:1900px; height:700px; pointer-events:none; overflow:visible; }

/* â”€â”€ Responsive layout wrappers â”€â”€ */
.hs-slide1 .tsb-desktop-layout { display:block; }
.hs-slide1 .tsb-mobile-layout  { display:none; }
@media (max-width:1023px) {
  .hs-slide1 .tsb-desktop-layout { display:none; }
  .hs-slide1 .tsb-mobile-layout  { display:block; }
}

/* â”€â”€ Native responsive layout (tablet + mobile, < 1024px) â”€â”€ */
.hs-slide1 .tsb-native-banner {
  width:100%; position:relative; overflow:hidden;
  font-family:system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  background:linear-gradient(108deg,#a5bdcb 0%,#f3f3f3 55%,#ececec 100%);
}
.hs-slide1 .tsb-native-inner {
  padding:clamp(28px,5vw,52px) clamp(22px,7vw,80px) clamp(32px,5vw,56px);
  position:relative; z-index:1;
}
.hs-slide1 .tsb-native-bgdeco {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.hs-slide1 .tsb-native-hero {
  opacity:0; transform:translateX(-70px) scale(.88); transform-origin:left center;
  display:flex; flex-direction:column; align-items:flex-start;
}
.hs-slide1 .tsb-native-pill {
  display:inline-flex; border:1.5px solid #5e6c7b; border-radius:20px;
  padding:3px 14px; margin-bottom:10px; background:white; color:#5e6c7b;
  font-size:clamp(10px,1.5vw,12.5px); font-weight:700; letter-spacing:2.5px;
}
.hs-slide1 .tsb-native-titlegroup {
  display:flex; flex-direction:column; align-items:flex-start;
}
.hs-slide1 .tsb-native-h1 {
  font-size:clamp(28px,5.5vw,44.5px); font-weight:800; color:#1a2332; line-height:1.14;
}
.hs-slide1 .tsb-native-titleunderline {
  width:72px; height:4px; margin-top:8px; border-radius:2px;
  background:linear-gradient(to right, #6366f1, #8b5cf6, #06b6d4);
  flex:0 0 auto;
}
.hs-slide1 .tsb-native-body { opacity:0; transform:translateX(-50px); margin-top:12px; }
.hs-slide1 .tsb-native-h2 {
  font-size:clamp(15px,2.6vw,20.5px); font-weight:700; color:#1a2332; margin-bottom:4px;
}
.hs-slide1 .tsb-native-sub {
  font-size:clamp(13px,2vw,15.5px); font-weight:500; color:#4d6070; margin-bottom:6px;
}
.hs-slide1 .tsb-native-p {
  font-size:clamp(12px,1.8vw,15px); font-weight:400; color:#536070; line-height:1.65; margin-bottom:14px;
}
.hs-slide1 .tsb-native-badges { display:flex; flex-direction:column; gap:7px; }
.hs-slide1 .tsb-native-badge {
  background:white; border-radius:8px; padding:7px 13px 7px 12px;
  font-size:clamp(12px,1.8vw,14.5px); font-weight:600; color:#1a2332;
  box-shadow:0 2px 10px rgba(0,0,0,.09); border-left:3.5px solid #1d6fa4;
  align-self:flex-start; opacity:0; transform:translateX(-28px);
}
.hs-slide1 .tsb-native-learnbtn {
  display:inline-block; margin-top:18px; padding:11px 32px; border-radius:10px;
  background:#1a2e42; color:#fff; font-size:clamp(13px,2vw,15.5px); font-weight:700;
  letter-spacing:.4px; text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 4px 18px rgba(26,46,66,.28); opacity:0; transform:translateY(16px);
  font-family:inherit; transition:background .25s,color .25s;
}
.hs-slide1 .tsb-native-learnbtn:hover {
  background:rgba(200,210,220,.7); color:#1a2e42;
}
.hs-slide1 .tsb-mobile-layout .tsb-vtxt {
  font-weight:800;
  letter-spacing:.2px;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* â”€â”€ Tablet overrides (768px â€“ 1023px) â”€â”€ */
@media (min-width:768px) and (max-width:1023px) {
  .hs-slide1 .tsb-native-inner {
    padding:clamp(42px,5.5vw,66px) clamp(46px,8vw,110px) clamp(46px,5.5vw,70px);
  }
  .hs-slide1 .tsb-native-pill { font-size:13px; }
  .hs-slide1 .tsb-native-h1  { font-size:clamp(42px,5.6vw,48px); line-height:1.1; }
  .hs-slide1 .tsb-native-h2  { font-size:clamp(26px,3vw,30px); margin-bottom:8px; line-height:1.16; }
  .hs-slide1 .tsb-native-sub { font-size:clamp(18px,2.3vw,21px); margin-bottom:10px; color:#41566a; }
  .hs-slide1 .tsb-native-p   { font-size:clamp(16px,2vw,18px); line-height:1.62; margin-bottom:20px; color:#43556a; }
  .hs-slide1 .tsb-native-badge { font-size:clamp(16px,2vw,18px); padding:9px 17px 9px 14px; border-left-width:4px; }
  .hs-slide1 .tsb-native-badges { gap:10px; }
  .hs-slide1 .tsb-native-learnbtn { font-size:clamp(16px,2.2vw,18px); padding:13px 38px; margin-top:22px; }
}

